Accessibility
ADA Title II Digital Accessibility Compliance for State & Local Government
Understand ADA Title II digital accessibility requirements for state and local governments, including WCAG 2.1, assistive technology access, and compliance evaluation.
CSS
Typographic scales and technical pens
A flexible system for consistent stroke widths across type sizes.
By using size and weight formulas (inversely relating weight to size), and converting them into CSS with variables and functions like pow(), you can create typography whose stroke width stays consistent across different sizes.
You can also extend this concept to other design elements like borders and SVG icons, ensuring their line weights fit the same logic.
Trying to Make the Perfect Pie Chart in CSS
Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it.
A Better Way to Express Percentage Height
Percentage height is a common issue in CSS. Using height: 100% to fill the vertical space fails in most cases because the parent container doesn't have an explicit height. Even if the parent has a definite height, you may still face issues related to margin, box-sizing, etc.
Instead of height: 100%, you can rely on the new stretch value that will do a better job.
How (and Why) to Stop Users from Selecting Text on Your Website
I recently needed to prevent a page from having selectable text. I remember in the “old days” of the Internet there were all sorts of elaborate, mostly Javascript-based workarounds, that would block people from highlighting text. Today, it’s much easier, with the CSS property user-select:none. This was apparently in the CSS3 spec, then removed from a later spec, then put back in to the current spec, and is now supported by all major browsers except Safari.
The New CSS - Lightweight Utility-First CSS Library
Lightweight utility-first CSS library. Modern CSS features, familiar class names, zero build step. Drop in a link tag and start building.
Warcraft III — UI Component Library
Battle-tested components forged in Azeroth.
A themeable, accessible component library inspired by the Warcraft III interface. Ships with four faction themes out of the box. 1.2kb core · Zero dependencies · Framework-agnostic. Compatible with React, Vue, Svelte, and vanilla JS
HTML
A new meta tag for respecting text scaling on mobile
When you open the accessibility settings on your smartphone and increase the font size, you will immediately notice that the system font size increases. On Android, as a Firefox user, you will also notice that websites scale. As a Chrome user, you won't see any difference because Chrome doesn't respect the font size settings for web content. As an iOS user, it's the same.
In a recent blog post by Josh Tumath, I learned about a proposal for a new meta tag that, in the future, may enable us to instruct browsers to respect text size settings on websites.
Performance-Optimized Video Embeds with Zero JavaScript
Every embedded video comes with a real cost to page load performance. Each player loads extra resources, whether the user ever hits play or not, as Chris Coyier noted in his blog post on “YouTube Embeds are Bananas Heavy and it’s Fixable”.
The approach of using <lite-youtube> in that article works well when the video appears further down on the page and loads outside of the initial viewport. If the video is directly in the initial viewport, it can still cause a cumulative layout shift (CLS).
What if I told you you could lazy-load videos on interaction, without any JavaScript, even above the fold, with only native HTML (<details> and <summary>) and CSS?
JavaScript
Solid.js Best Practices
These are the Solid best practices that come up for me most often — especially when helping people move from React.
If there’s one theme running through all of this, it’s to work with Solid’s reactivity model, not against it. Keep your getters intact, derive instead of sync, and let the framework do the heavy lifting.
What to Expect in Angular 22
While Angular v21 laid much of the groundwork, Angular v22 is shaping up to be a release that consolidates Angular’s post-Zone.js era, deepens its signal-first APIs, and significantly improves how large-scale applications are built, tested, and rendered.
Highlights include:
- Signal-Based Forms Reach Maturity
- Selectorless Components and Template Imports
- OnPush as the Default Change Detection Strategy
- Developer Experience Improvements
- Testing & Tooling Modernization
- AI Tools and Integration
It’s about to get a lot easier for your JavaScript to clean up after itself
There’s some very useful capabilities coming to JavaScript: [Symbol.dispose]() and using. Mat Marquis is here to explain why they’re coming and how to use them effectively.
Peek - Light Weight "Headroom Style" scroll intent library that hides the site header on scroll down and shows on scroll up
A lightweight JavaScript library for smart header behavior. Hide on scroll down, reveal on scroll up.
GitHub repo here.
UX
Stop Using Icons in Data Tables
We have been sold a lie that icons are the universal language of the modern interface.
In our quest for “clean” and “minimalist” UI, we have stripped away the clarity of text and replaced it with a field of cryptic glyphs. Designers often treat icons as a panacea for cognitive load. But in the context of complex, data-heavy products, the opposite is true. Icons don’t simplify; they increase cognitive load.
How Typography Hierarchy Boosts UI Usability
People do not read interfaces the way they read books. They scan, evaluate, and act. Nielsen Norman Group has consistently shown that most users scan pages instead of reading them fully, with studies indicating that roughly 79 percent of users scan while only a small minority read word by word. This behavior is not a flaw. It is an adaptation to information density and time pressure.
Because of this, typography hierarchy becomes a core usability mechanism. It allows users to understand what a screen is about in seconds, identify relevant sections without effort, and move confidently toward actions. When hierarchy is missing or weak, users feel lost even if the copy itself is good.
Miscellaneous
How Browsers Work
The guide is for engineers and curious people who use the web every day, but never built a mental model of how browsers work.
A Guide to Browser DevTools
In the first three parts of this series, we explored three essential browser dev tools: the Inspector, for examining and editing HTML and CSS in real time; the Console, for running JavaScript and troubleshooting issues directly in the browser; and the Debugger, for stepping through code without leaving the page. In this fourth part, we’ll take a look at the Network Monitor.