I mostly write about front-end web development, but sometimes I'll write about other cool stuff too.
Have you ever thought to yourself while building a website, how could I manipulate the DOM? Possibly create new HTML elements or modify existing elements? This article explains some of the fundamentals for interacting with the DOM using client-side JavaScript. Maybe you've been tasked with writing a function that creates an unordered list <ul> with multiple list items <li> populated with data…
With @import at-rules slowly being phased out of the main implementation of Sass (dart-sass) and eventually deprecated, its time to learn how to use @use rules and the neat features that come along with it. The main implementation of Sass is dart-sass and for the sake of this article, I will be using the dart-sass implementation as it gets new features before any of the other implementations.…
To create a Node.js application, you need a web server, a request, a router, and request handlers. Frameworks like Express.js speed up development by providing a robust set of features to build web applications and APIs. Developing applications with Node.js doesn't have to be intimidating. Sure, large apps will have much greater complexity than a simple API but the underlying logic of how they…
The Fibonacci sequence is a series of numbers where each number in the sequence is the sum of the two preceding numbers, with the sequence beginning with F(1) = 0 and F(2) = 1. In mathematics, the Fibonacci numbers form the sequence where numbers (n) are greater than 1 (n > 1). To better understand how the numbers are calculated in the sequence, view the below equation for generating a Fibonacci…
This article will discuss how to calculate the diagonal difference and sum for a n x n square matrix. The diagonal difference problem can be found on HackerRank and the diagonal sum problem can be found on LeetCode 1572. Matrix Diagonal Sum . Getting Started To begin, we are given a n x n square matrix as input. We're asked to create a function that returns the diagonal difference or sum of the…
Finding a value in a BST can be done iteratively or recursively in logarithmic time on average because of the properties of a BST. The Tree data structure is commonly used to represent hierarchical data. A tree can have up to n child nodes, where in a Binary Tree the maximum number of children is two. Building on this, a Binary Search Tree has the following properties: All of the nodes in the left…
I discovered some nested links weren't working on my site. After sifting through each page, I finally noticed that there was a CSS rule applying transform-style: preserve-3d to the entire home page instead of only the element that needed it, which caused unexpected rendering of nested links. How to spot this? I only noticed this behavior happening on Firefox, but the warning signs could probably…
For a fixed-size array (non-dynamic), calculating the size can seem complicated but it's really quite simple when we think about how the sizeof operator works. The sizeof will yield the size in bytes of a variable or data structure. Given the fact that arrays are linear data structures for sequentially storing elements of the same type, we can get the size of the underlying array data structure…
The 'any' type isn't something I use very often in my own development. But I have seen it occasionally used out in the wild. A good rule is, if your unsure of a data type for a variable, its best to let TypeScript infer the variables type for you through type inference rather than using type any . Only resort to using any if you absolutely have to. When you can, try using a type annotation to…
There are many great features to choose from when building websites with Eleventy. One feature in particular that I find very useful is the ability to iterate over a global data file and generate page content using a templating language of your choice. You can create global data files in 11ty by placing them inside the _data directory. Global data files can be stored as JSON .json or as data from…
The order of operations in an expression is very important to understand. With more complex expressions, operator precedence isn't always straightforward and if not used correctly leads to unexpected values. Understanding which operators and groups take the highest precedence in an expression will help tremendously. As someone with a background in mathematics, the acronym "PEMDAS" was spoken quite…
Rounding numbers in Python is quite common. There might be a situation where values must only be rounded to 3 decimals or some arbitrary number. Using the built-in function round() is handy but changes the original value. During chemistry class in college, I frequently heard and used the term "significant figures". Which essentially referred to rounding off a large decimal number so that we only…
When reviewing a PR, its usually helpful to pull into that feature branch and test the changes locally in your own copy of the project. Can you pull into my feature branch and review the changes locally? I saw this phrase appear again and again while contributing to Open Source. Before I knew the git commands to accomplish pulling into a feature branch, I tried thinking about how I would actually…
Files can become quite large in a Node.js project. Modules provide developers a "modular" approach by putting related code into separate files and then exporting them to be used elsewhere. What is a module? Modules in Node.js are essentially just files. They provide a place for related code to be stored and exported for reuse throughout the application. Each module will usually have it's own…
Removing duplicate values from an array is quite a common task in programming. Sometimes, specific scenarios require a collection of data to only store unique values. That is, no repeated values. A Set data structure is commonly used in programming languages to store unique values. The Set object in JavaScript allows you to store "unique" values of any data type. For a value in the Set to be…
I wanted to use Angular and Node.js for creating a blog template similar to how I would do things in Eleventy. Create one base template that each of the blog posts content can be displayed on. It showcases Angular Material, GitHub REST API, Netlify lambda functions and Netlify for hosting. How does it work? Coming from a background of using Static Site Generators (Eleventy), I've missed being able…
In JavaScript, arrays are predefined objects, where the indexes are the arrays properties. They can hold a collection of values with differing data types. The array is a go-to data structure for common list related tasks. Is JavaScript Object Oriented? JavaScript is a prototype based , multi-paradigm, single threaded, dynamic language which supports object oriented, imperative, and declarative…
To begin contributing to open-source software, you might want to become familiar with Git. Understanding the workflow of creating your own local copy of a repository and keeping it up to date with the upstream repository is integral to start contributing in public projects. Git is a distributed version control system (DVCS) that can handle just about any size project you throw at it. The software…
Creating search functionality for a static site isn't always easy. Luckily, using custom data attributes and a bit of JavaScript. You can filter blog posts by comparing the search input to post titles and visually hide posts that don't match the search query. The blog post titles will be stored in a custom data attribute data-post-title to be compared with the user input from the search bar. Using…
Have you ever had an array of values that you needed to convert to an object? I've run into this scenario quite a few times and wanted to write about it. While working on the Day 4 challenge for this years Advent of Code . I came across the need to transform a large string of key and value like inputs from the challenges input data. To give a little bit of context, the Day 4 challenge provided…
If you've built sites using Eleventy before, you're probably familiar with collections . Collections are a great feature to show blog posts on your site. If your posts are written inside of markdown files, you can give each post the tags key as front matter data to create a collection. Front matter in 11ty is placed inside opening and closing document separators --- and uses YAML syntax. Two…
How familiar are you with using SSH? If you hesitated to answer, don't fear as after reading this article you will understand how to perform a secure remote connection using SSH and work in the server environment. I'm by no means a security expert, but these challenges can be quite fun while providing some solid file system practice. Grab your favorite cup of coffee or tea and get ready to conquer…