Accessibility
Accessibility Bugs Are Often Architecture Bugs
Why many accessibility bugs are really frontend architecture problems, and how better components, patterns, and workflows can prevent them.
prefers-reduced-motion, explained (and how to test it)
What prefers-reduced-motion is, the CSS and JavaScript patterns that actually pass, four ways to test it on a real page, and how it maps to WCAG 2.2.2 and 2.3.3.
Awesome A11Y Book & Course: Web Accessibility
An open-source book/course for learning web accessibility (A11Y). It covers accessibility concepts and best practices and includes interactive CodeSandbox examples so you can see the concepts in practice.
CSS
Delayed-Then-Instant Tooltips with HTML & CSS Alone
We can do all this in HTML and CSS with no JavaScript at all.
Get Grid Information using pure CSS
Thanks to modern CSS, it's now easy to retrieve various information from a responsive CSS grid such as the number of rows, number of columns, and the coordinates of each item within the grid. The only requirement is to have equal-width columns. Rows can have different heights.
If you combine this with the new if(), you can easily create conditional styling.
Cropping Images with CSS While Keeping a Focal Point in the Center
Images can be an impactful part of web content, but providing images that fit every device, from small to large screens, can be quite a challenge.
Fortunately, the web platform offers several solutions for adjusting images to different screen sizes, including resolution switching and art-direction.
However, there are times when cropping an image on the client side is necessary, especially when the image needs to fit into a dynamically sized container.
To crop an image effectively, it’s important to prioritize a specific part of the image and preserve the essential content around it. One way to achieve this is by identifying the image’s “focal point” – the part of the image that is most important – and cropping the image around it.
In this post, I’ll walk you through my technique for cropping images with CSS while preserving the image’s focal point.
Vertical Rhythm
Good vertical rhythm is something that the reader doesn't notice, but definitely can feel. Historically it was unreasonably difficult to actually get right, and was therefore often overlooked or omitted on purpose. With modern CSS (finally) making this level of polish relatively straightforward, there really isn't a good reason anymore to ignore the vertical rhythm of your designs.
Hover Proximity with Scroll-Driven Animations
A fancy hover effect in a 2D responsive grid powered by modern CSS.
Can’t touch the DOM? Reach for :has() to style any element
Third-party component libraries come with restrictions, the :has() CSS pseudo-selector unlocks flexible style options without needing JavaScript.
cssGraphics: A DOM-ready 3D asset library powered by PolyCSS
cssGraphics packages animated and interactive 3D models as real HTML and CSS, without a WebGL or canvas renderer. Powered by the PolyCSS engine.
The Future of CSS: Target Multiple Classes with the Class Prefix Selector
To target multiple classes that share the same prefix, you'd typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a new selector: The Class Prefix Selector (.prefix-*).
HTML
My HTML boilerplate in 2026
Every element I use for the basic structure of a HTML document, with explanations why.
Five years ago, I shared the HTML boilerplate I use for most of my projects. Since then, a lot has happened in HTML. It's time to give it an update.
HTML Can Do That
HTML has been gobbling up swathes of what used to be JavaScript’s remit. This page lists a bunch of dynamic functionality that we can now achieve with just HTML.
JavaScript
Fast Group Scroll — grouped-list fast scrolling for Svelte 5
An accessible A–Z fast scroller for Svelte 5. Tap, drag, or use the keyboard to move through a long grouped list — with configurable bucketing, search and selection.
flynt.js: JS ultra-lightweight reactive micro-engine for MPA's
Flynt.js is a lightweight, zero-build reactivity library built specifically for Multi-Page Applications (MPAs) like Magento/Hyvä, Blade, or WordPress.
It organizes UI logic into clean, decoupled Presenters without the bloat, virtual DOM, or build step of full SPA frameworks.
React scrollIntoView + useRef: Scroll to Any Element
A practical guide to scrolling, refs, fixed headers, newly rendered elements, and the cases where native browser behavior stops being enough.
Loopem - A picker for lists of any length. Line, arc, wheel, or a layout you write. Virtualized, keyboard-accessible, and it works with any framework
A framework-agnostic library for building pickers: date wheels, color swatches, photo carousels, anything where someone drags through options and lands on one. You pick the shape, from a straight line to an arc, a wheel, or a layout you write yourself.
Drag it, flick it, or use the arrow keys, and it always lands on an item instead of resting between two. Only the items on screen are in the DOM, so the length of your list stops mattering.
No dependencies.
Miscellaneous
The Modern Tech Career: A Survival Guide
Tech is an excellent field to be in, as the compensation-to-effort ratio far exceeds virtually all others. I am not aware of any other career that offers a six figure income at such a low barrier of entry. Even at the low end, you’re nearly guaranteed to make considerably more money than far more difficult and important careers such as public school teaching or waste management. This is great until you start experiencing the capriciousness of tech.