Tag, You're It 🔗
There's a challenge going around where folks tag each other with questions about their blogs. Here are my responses. [...]
Aleksandr Hovhannisyan
Posts
To Parse an Int 🔗
Why does JavaScript's parseInt treat keycap emoji as integers? Is it a bug, a feature, or perhaps both? [...]
Syntax Highlighting with Prism.js and markdown-it 🔗
Learn how to add line numbers, file names, and copy-to-clipboard buttons to your code blocks. [...]
2024 in Review 🔗
Looking back on everything I learned and tried in 2024. [...]
A Tale of Two Routes 🔗
Poorly designed API routes and an account creation loophole cause route collisions on Twitter. [...]
Performant Game Loops in JavaScript 🔗
A look at some best practices for creating performant game animations in JavaScript. [...]
I Moved to Cloudflare 🔗
After some recent incidents involving Netlify and Vercel, I decided to play it safe and move my website and another side project to Cloudflare. [...]
Eleventy Images Just Got Better 🔗
Eleventy 3.0 adds a new API to optimize images anywhere on your site, without shortcodes. [...]
An Introduction to Unicode 🔗
In this deep dive, you'll learn about the Unicode character set and how it's encoded and decoded with UTF. [...]
Virtual Templates in Eleventy 🔗
In Eleventy 3.0, virtual templates enable plugin authors to publish and share dynamic templates. [...]
Creating Perfect Font Fallbacks in CSS 🔗
Learn how to use three CSS properties to override font metrics and minimize layout shifts during font load. [...]
Hearing Silence 🔗
Subtitles can capture essential dialogue and sounds, but what about the quiet parts? [...]
My First DIY Laptop Upgrade 🔗
A post-mortem of my first attempt at upgrading a laptop. [...]
(Don't Fear) Mutation 🔗
The irrational fear of mutation in programming can sometimes do more harm than good. [...]
2023 in Review 🔗
Reflecting on an unusually eventful year in my life. [...]
The Perfect Theme Switch Component 🔗
Learn how to implement a progressively enhanced theme switch component using HTML, CSS, and JavaScript. [...]
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. [...]
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. [...]
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 impor [...]
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. [...]
Detecting Nested Components in React with the Context API 🔗
Normally, React's Context API is used to avoid prop drilling. But you can also use it to detect if a component is a child of a particular component. [...]
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 [...]
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. [...]
Writing Better Documentation 🔗
Documentation is one of those things that you don't appreciate until you have to live without it. [...]
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. [...]
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. [...]
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. [...]
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 deciph [...]
Password Composition Rules Are Counter­productive 🔗
Registration systems often require that passwords contain certain characters. But this is counterproductive and encourages bad habits that can weaken [...]
Tech Twitter Burnout 🔗
Tech Twitter can be a great way to network with other developers and learn new things. But it can also be unhealthy. [...]
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. [...]
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. [...]
A typeof Typo 🔗
When a pair of quotes makes a world of difference. [...]
Add Build Info to an 11ty Site 🔗
Expose useful information about your Eleventy build to all of your templates using global data. [...]
144 Shades of Gray 🔗
The one where I create my first generative artwork and still refuse to use any color on my site. [...]
A Set of Useful 11ty Filters 🔗
Extend Eleventy's built-in filters with custom logic for these common use cases. [...]
Use Rems for Font Size to Respect User Preferences 🔗
Rems are the most accessible CSS unit for font size, allowing text to scale responsively when users change their preferred font size settings. [...]
Overzealous Destructuring 🔗
Excessive destructuring in JavaScript can make your code harder to read, trickier to debug, and more error prone. [...]
Changing the Locale in Chrome with Dev Tools 🔗
Learn how to use Chrome developer tools to simulate loading a page in a different locale. [...]
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 [...]
How to Download and Optimize Google Fonts 🔗
Self-hosting fonts can improve your site's performance and eliminate unwanted third-party tracking. Learn how to download, subset, and optimize any Go [...]
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. [...]
HTML Input Validation with JavaScript 🔗
Validate user input in real time with the checkValidity, reportValidity, and setCustomValidity methods. [...]
Creating a Fluid Type Scale with CSS Clamp 🔗
Understand the math behind fluid typography and learn how to programmatically generate a fluid type scale with CSS clamp and Sass. [...]
Modern Techniques for Writing Better CSS 🔗
Write cleaner CSS using modern strategies like :is and :where, logical properties and values, clamp, gap, and aspect-ratio. [...]
Managing Keyboard Focus for Load-More Buttons 🔗
Load-more buttons are more accessible than infinite scrolling, but they also steal keyboard focus when new content loads in. We can fix this problem b [...]
Configuring Web Fonts in 11ty with Global Data 🔗
Use global data in 11ty to create a single configuration for fonts that you can reference in your templates and CSS. [...]
Optimizing Images with the 11ty Image Plugin 🔗
While imagery can enrich your content, it can also slow down your site if it's not used responsibly. Learn how to use the official 11ty image plugin t [...]
Add Comments to a Dev Blog with Netlify Functions and the GitHub API 🔗
Comment systems can be a pain to set up, but they don't have to be. Learn how to use the GitHub Issues API to create a custom comment system powered b [...]
Managing Complex State in React with useReducer 🔗
React's useState hook works well for managing simple state. But once your component starts to grow, useReducer may be a better fit for managing state. [...]
NFTs Are a Problem 🔗
NFTs are artificially scarce, make it easier to commit fraud, undermine the intellectual property rights of content creators, and encourage consumptiv [...]
Preventing Layout Shifts in Status Text with CSS Grid 🔗
Use this trick with CSS Grid to prevent layout shifts when swapping text in status indicators. [...]
Represent State with HTML Attributes, Not Class Names 🔗
You might not need another CSS class. Use HTML attributes for state and style those states with the CSS attribute selector. [...]
Passing Object Arguments to Liquid Shortcodes in 11ty 🔗
Currently, 11ty doesn't allow you to pass object arguments to shortcodes in Liquid. As a temporary workaround, you can assemble and parse a JSON strin [...]
Dynamically Importing Components with React.lazy 🔗
With React.lazy, you can dynamically import components at run time to reduce the size of your JavaScript bundles. [...]
Automate Netlify Redirects in 11ty 🔗
Tired of listing all of your Netlify redirects by hand? Generate them programmatically with a bit of 11ty templating magic! [...]
Awaiting Multiple Promises with Promise.all 🔗
Learn how to use JavaScript's Promise.all method to await multiple async operations, as well as how to write a custom implementation of Promise.all. [...]
Cleaner Type Predicates with Derived Types 🔗
In TypeScript, type predicates allow you to narrow down an abstract type to a more concrete type with a simple assertion. Together with derived types, [...]
The 62.5% Font Size Trick 🔗
Once you get used to thinking in rems for font sizing, you'll find that it's easy to express familiar powers of two. But for other values, you may fin [...]
Don't Use a Fixed Line Height 🔗
In typography, the ideal line height for text depends on a variety of factors, including font size, line length, and font family. [...]
11ty: The Good, the Bad, and the... Possum? 🔗
An in-depth review of 11ty, an extensible static site generator written in Node that supports a variety of template languages. [...]
React, Iframes, and a Back-Navigation Bug 🔗
If an iframe re-renders in React, it can interfere with back navigation in your browser. The solution? Force the iframe to unmount with a unique key. [...]
Make Atomic Git Commits 🔗
It can be tempting to lump unrelated code changes into a single commit, but this makes it difficult to debug and time travel in Git. Prefer to write a [...]
How to Format on Save with ESlint 🔗
Set up ESLint to format on save in two popular code editors: VS Code and neovim. [...]
CRLF vs. LF: Normalizing Line Endings in Git 🔗
Line endings can differ from one OS to another. Learn the history behind CRLF and LF line endings and how to enforce line endings in Git. [...]
Why Developers Should Write 🔗
Writing is likely one of the last skills you associate with software development. But it plays a key role in everything that we do and can help you bu [...]
Set a Width and Height on Images to Reduce Layout Shifts 🔗
When you set a width and height on image tags, browsers are able to reserve the correct amount of space ahead of time to minimize layout shifts as the [...]
Why You No Longer Enjoy Reading 🔗
Reading books isn't something that everyone enjoys. But if you used to like reading but can no longer get past the first chapter of a new book, there [...]
Why I Don't Like Tailwind CSS 🔗
On paper, Tailwind CSS sounds like a great idea. In reality, it suffers from the same problems that it tries to solve. [...]
SVG Tutorial: How to Code SVG Icons by Hand 🔗
Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand. [...]
Creating a Vertical Rhythm with CSS Grid 🔗
Margins are commonly used to space paragraphs in an article, but CSS Grid offers a more intuitive alternative that defines the spacing at the layout l [...]
Rest in Peace, Flash 🔗
If it were up to me, things wouldn't end this way. We had some great times together, but now it's time to say goodbye. [...]
Subtle Accessibility Failures (And How to Fix Them) 🔗
You got a perfect score on an accessibility audit. But is your site actually accessible, or have you overlooked more subtle failures? [...]
Be Careful with Async Functions that Return Booleans 🔗
Suppose an async function returns a boolean. What happens if you check the return value without awaiting it? [...]
Dynamic Tag Name Props in React (with TypeScript) 🔗
Sometimes, a React component needs to allow users to render a custom tag. Here's how you can pass dynamic tag names as props. [...]
6 Ways to Undo Changes in Git 🔗
When things go wrong, don't panic. Here are a few ways you can undo changes in git and clean up your commit history. [...]
Does Web Performance Matter? It Depends. 🔗
Some big brands have a slow page load speed, but they still rank well on Google. So does web performance even matter? [...]
Creating Aspect Ratios in CSS 🔗
Learn how to give any element an aspect ratio in CSS, using the modern aspect-ratio property or a trick with percentage padding. [...]
Hesitation Is Defeat 🔗
After a one-year hiatius from Sekiro, I returned to face the final boss—and, through painful persistence, triumphed. [...]
JavaScript Promises: Practical Use Cases and Examples 🔗
Promises are a powerful tool for writing asynchronous code in JavaScript. Here are a few interesting use cases. [...]
Optimizing Images with WebP and Lazy Loading 🔗
Learn how to optimize images for the web using the WebP image format and lazy loading with JavaScript. [...]
Don't Mind the Leetcode Grind 🔗
Leetcode is a polarizing topic in the software industry. But what is it, and how much time should you invest into it? [...]
An Introduction to HTTP Cookies 🔗
Learn why HTTP cookies are needed, how they're used, where they're stored, and how they impact security and privacy. [...]
Semantic HTML: Building a More Accessible Web 🔗
Accessibility is a hot topic, but it's not always executed correctly. Learn how to use semantic HTML to create an accessible user experience on the we [...]
How to Test Localhost on Mobile (with ngrok) 🔗
Learn how to easily test localhost on mobile using ngrok, without deploying a single line of code. [...]
Add Comments to Jekyll with the GitHub Issues API 🔗
Add comments to your Jekyll blog with the GitHub issues API and lazily load them for improved performance. [...]
Binary for Beginners: The ABCs of 0s and 1s 🔗
The binary number system underlies everything in computation and software. But what's the deal with all those 0s and 1s? [...]
Goodbye, GitHub Pages—Hello, Netlify 🔗
GitHub Pages is a good option for hosting simple sites for free, but Netlify offers plenty of more advanced features. [...]
Is JavaScript Pass by Reference? 🔗
Developers are often taught that JavaScript passes objects by reference. In reality, JavaScript is a pass-by-value language. [...]
How to Get More Traffic with SEO 🔗
SEO is the art of making strategic improvements to a site in order to rank higher in search results and gain more traffic. Learn how to use tried-and- [...]
How to Add a Copy-to-Clipboard Button to Jekyll 🔗
Add a copy-to-clipboard button to your Jekyll blog with a simple include and a few lines of JavaScript. [...]
Getting Started with Jekyll and GitHub Pages 🔗
Jekyll is a static site generator that makes it easy for you to create a website. Learn how to get started with Jekyll and GitHub Pages. [...]
Implementing a Finite State Machine in C++ 🔗
Finite state machines (FSMs) are a useful tool for representing stateful entities in code. In this tutorial, we'll learn how to implement the finite s [...]
Invulnerability Frames in Unity 🔗
Invulnerability frames are a popular mechanic in many retro and modern games. In Unity, you can implement i-frames using coroutines. [...]
Using WebP Images in Jekyll 🔗
Improve your page load speed in Jekyll using the WebP image format and a custom include. [...]
Least Squares Fitting: How to Fit a Curve to Data 🔗
A deep dive on how to perform straight-line and polynomial least squares fitting, both by hand and programmatically. [...]
The Method of Least Squares 🔗
With least squares regression, you can find the closest solution to a system of equations that doesn't have a unique solution. [...]
Outer Wilds: Stop and Smell the Pine Trees 🔗
On the surface, Outer Wilds is a space exploration game. But peel back the layers, and it's a captivating and philosophical story about life and our u [...]
Implementing a Trie in Python 🔗
Prefix trees (also known as tries) allow you to efficiently search for a string in a dictionary of known words using just a prefix. Learn how to imple [...]
Operating System Scheduling Algorithms 🔗
Only one process can run at a time on a single CPU. Scheduling algorithms are what allow these processes to take turns running. [...]
Hard Links and Soft Links 🔗
Links allow Unix file systems to keep track of files in one of two ways: soft (symbolic) links and hard links. One sticks around for good, while the o [...]
Learn to Code Without Wasting Time & Money 🔗
A discussion of the things that beginner programmers tend to get wrong, as well as concrete suggestions for what they should be doing instead. [...]