All Blog Posts
Browse the following posts, or view all tags.
-
Published on
Naturalized
After nearly two decades of living in the United States, I'm proud to say that I'm now officially a U.S. citizen.
-
Published on
Interactive HTML Code Demos in Eleventy
With eleventy-plugin-code-demo, you can easily add interactive HTML, CSS, and JavaScript code demos to your Eleventy site using Markdown.
-
Published on
Class Fields vs. Methods in JavaScript
In JavaScript, class fields allow you to define properties on a class instance outside the constructor. In the case of function properties, it's important to understand how fields differ from methods and their potential tradeoffs.
-
Published on
Listening for Key Sequences in JavaScript
Learn how to implement a simple algorithm that listens for a specific sequence of keystrokes in JavaScript, with an optional delay between keys.
-
Published on
Detecting Nested Components in React with the Context API
The React Context API is normally used to avoid prop drilling. But it can also be used to detect if a component is nested within another instance of itself or as a child of a particular component.
-
Published on
An Interactive Guide to JavaScript Events
Learn how event capturing, targeting, and bubbling work in JavaScript; how to prevent an event's default behavior; how to stop event propagation; and more.
-
Published on
A Font-Face Faux Pas
When using the font-face local() function to load fonts installed on a user's system, double-check that sure you're requesting the right font family.
-
Published on
Writing Better Documentation
Documentation is one of those things that you don't appreciate until you have to work without it. Good documentation should go beyond the code itself and also cover your team, the product, your work process, areas of specialization, and many other key areas.
-
Published on
Serializing HTML Form Data with JavaScript
Learn how to use JavaScript's FormData, URLSearchParams, and URL constructors to serialize an HTML form's data into a well-formatted and encoded URL.
-
Published on
The Cost of Tech Debt
The longer you leave tech debt unresolved, the more problems it will create for your team, until one day it becomes unbearable.
-
Published on
11ty Serverless and Object Permalinks: Hybrid Rendering
Learn how to reuse a single source template in 11ty Serverless to generate both a static and server-rendered page.
-
Published on
Modular Arithmetic and the Diffie-Hellman Algorithm
Using the properties of congruence modulo, Alice and Bob can generate a shared private key and communicate publicly, while Eve will struggle to decipher their messages.
-
Published on
Are Password Composition Rules Counterproductive?
Registration systems often ask users to create a password containing certain characters. Unfortunately, in doing so, these systems encourage bad habits that can weaken a user's password.
-
Published on
Tech Twitter Burnout
Twitter can be a great way to network with other people and learn new things if it's used in moderation. But there's the rub.
-
Published on
Creating an Accessible Image Carousel
Learn how to build an accessible image carousel that supports multiple input modes and is progressively enhanced with CSS scroll snap and JavaScript.
-
Published on
Limiting Memory Usage in WSL2
By default, WSL 2 may reserve a significant chunk of your host RAM. Thankfully, we can limit its memory usage with a .wslconfig file.
-
Published on
A typeof Typo
When a pair of quotes makes a world of difference.
-
Published on
Add Build Info to an 11ty Site
Expose information about your 11ty site at build time to all templates using global data. Among other things, this can be used to show your site's build time, package version, and the latest Git commit hash.
-
Published on
16 Shades of Gray
The one where I create my first generative artwork and still refuse to use any color on my site.
-
Published on
A Set of Useful 11ty Filters
One of my favorite things about 11ty is its flexibility and how easily you can customize your chosen template language without having to leave the familiar comfort of the Node ecosystem.
-
Published on
Use Rems for Font Size to Respect User Preferences
Of all the CSS units, rems are the most accessible for font sizing, allowing you to scale text responsively when users change their preferred font size settings.
-
Published on
Implementing the Caesar Cipher in JavaScript
The Caesar cipher is named after Roman emperor Julius Caesar, who used the technique to encrypt his military and political communication. Learn how to implement both a simple and keyed Caesar cipher in JavaScript.
-
Published on
Design Mode in 11ty
Sometimes, I prefer to compose text right in my browser and copy it over to my source files. In 11ty, we can enable this behind a keyboard shortcut in our development environment using environment variables.
-
Published on
Overzealous Destructuring
Destructuring in JavaScript has many clever uses that can make your code more expressive and compact. But overusing it can make your code harder to read, trickier to debug, and more error prone.
-
Published on
Changing the Locale in Chrome with Dev Tools
Modern browsers have developer tools that allow us to simulate user preferences, vision impairments, device resolutions, and various other scenarios. Chromium browsers in particular allow us to also simulate loading the page in a different locale.
-
Published on
Gated Content, Broken Locks
Some sites gate their content by hiding it with CSS. Whether you open the site incognito or normally, the full content appears to be beyond reach. But it's not—anyone can swing open the gate.
-
Published on
Flexbox Holy Albatross with Variable-Width Columns
The Holy Albatross technique allows a flex container to auto-wrap from multiple columns to a single column at a target container width. Let's modify the original code to control the number and widths of columns.
-
Published on
How to Download and Optimize Google Fonts
Self-hosting fonts can improve your site's performance while also respecting your users' privacy in the era of the GDPR. Learn how to download, subset, and optimize any Google Font for your projects.
-
Published on
Custom Markdown Components in 11ty
Ever wanted to nest Markdown in HTML? In 11ty, you can easily do this with paired shortcodes and a custom Markdown library parser.
-
Published on
HTML Input Validation with JavaScript
If you want to use a standalone HTML input to accept user input and store it locally in your app's state, you can use the checkValidity, reportValidity, and setCustomValidity methods to validate the user's input and provide feedback.