Colorception 🔗
What happens when you derive an element's color from its inherited color in CSS? [...]
Aleksandr Hovhannisyan
Posts
The AI Dilemma 🔗
According to the people who sell AI products, it's going to take your job in the next few years. Then what? [...]
Let Me Opt In, Not Out 🔗
Why should I have to opt out of something I never agreed to in the first place? [...]
How to Split Audio Stems 🔗
A quick guide on how to use a free and open-source tool to separate stems from audio tracks using locally installed models. [...]
Remote Code Execution with LLM Agents 🔗
Some AI agents can execute code or connect to services. If you're not careful, you could be the victim of prompt injection and RCE attacks. [...]
Cache-Busting Assets in Eleventy 🔗
Generate a sourcemap and add it to Eleventy's global data. [...]
In Memory of Em 🔗
A very serious eulogy that is meant to be taken literally. [...]
Making Windows 11 Usable 🔗
My recommended settings for a fresh installation of Windows 11. [...]
How to Correctly Install the Framework 13 Bezel 🔗
Improperly routed cables can cause the Framework 13 bezel to pop back out. [...]
How to Wipe a Drive Without Removing It 🔗
Safely wipe a drive using a bootable USB and diskpart. [...]
How to Open and Close HTML Dialogs 🔗
Learn how to use the show(), showModal(), and close() methods to toggle an HTML dialog's visibility. [...]
WSL Backup Guide 🔗
Back up your entire WSL distribution and import it on a different machine. [...]
Tag, You're It 🔗
There's a challenge going around where folks tag each other with questions about their blogs. Here are my responses. [...]
To Parse an Int 🔗
Why does JavaScript's parseInt treat keycap emoji as integers? Is it a bug, a feature, or both? [...]
Syntax Highlighting with Prism.js and markdown-it 🔗
Learn how to decorate your Markdown code blocks with Prism to add line numbers, file names, and copy-to-clipboard buttons. [...]
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. [...]
CLI Cheat Sheet for Videos 🔗
A reference for downloading, splitting, and optimizing videos with CLI tools. [...]
Performant Game Loops in JavaScript 🔗
A look at some best practices for creating performant game animations in JavaScript. [...]
Useful Bash Aliases 🔗
Bash aliases I use to speed up my workflows. [...]
Access Windows Files from WSL 🔗
Move files between Windows and WSL using the wslpath command-line utility. [...]
Get the IP Address of a Linux Machine 🔗
Programmatically read your machine's IPv4 address on Linux. [...]
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 🔗
With a few lines of CSS, you can override metrics for fallback fonts to minimize layout shifts. [...]
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 🔗
Implement a simple algorithm that listens for a sequence of keystrokes in JavaScript. [...]
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 🔗
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. [...]
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 🔗
Requiring certain characters in passwords is counterproductive and encourages bad habits that can actually weaken passwords. [...]
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 🔗
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. [...]
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 🔗
Setting a font size in rems ensures that your text will scale when users change their browser's preferred font size. [...]
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 🔗
Chrome dev tools allow you to simulate loading a page in a different locale. [...]
Gated Content, Broken Locks 🔗
Paywalls are often implemented incorrectly with client-side gating, making it easy for anyone to access the content. [...]
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 and optimize Google Fonts in [...]
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 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 [...]
How to Add Comments to a Static Site with GitHub Issues 🔗
Add comments to your blog using serverless functions and the GitHub Issues API. [...]
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! [...]
A Deep Dive on 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. [...]
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 🔗
Commits that have a single responsibility make it easier to troubleshoot code regressions and time travel in Git. [...]
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 an important soft skill for developers and can help you build a more successful career. [...]
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, but CSS Grid offers a more intuitive approach that defines spacing at the layout level. [...]
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 move on. [...]
Subtle Accessibility Failures (And How to Fix Them) 🔗
You got a perfect score on an accessibility audit. But is your site actually accessible, or did you overlook more subtle issues? [...]
Dynamic Tag Name Props in React and 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. [...]
How to Undo Changes in Git 🔗
If you messed up your git repo, don't panic. Here are a few ways you can undo those changes. [...]
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 🔗
Define aspect ratios 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 🔗
In JavaScript, promises allow you to write asynchronous code. Here are a few interesting things you can do with them. [...]
Optimizing Images with WebP and Lazy Loading 🔗
Improve your page load speed by using a modern image format and lazily loading images. [...]
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. [...]
Writing Semantic HTML 🔗
Learn how to use the right HTML elements and attributes to create accessible documents. [...]
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. [...]
The Binary Number System 🔗
Learn how computers store numbers and perform computations using binary. [...]
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. [...]
Getting Started with Jekyll and GitHub Pages 🔗
Jekyll is a static site generator that makes it easy to create your first website, which you can even host for free on 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. [...]
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 Prefix Tree 🔗
Learn how to implement a prefix tree to efficiently search through a list of words by prefix. [...]
Operating System Scheduling Algorithms 🔗
How do processes take turns running on a CPU? Learn about the different kinds of scheduling algorithms and how they work. [...]
Hard Links and Soft Links 🔗
Unix file systems keep track of file references using two types of links: symlinks and hard links. [...]
On Learning to Code 🔗
Beginners tend to prioritize the wrong things when learning to code. This is my advice for what to focus on. [...]