Accessibility
The State of US Local Government Accessibility 2026
The ADA Title II web deadline passed on April 24, 2026. We scanned 221 US city government sites for WCAG 2.2 failures: 42% still have a critical barrier, 45% fail the criterion most cited in ADA lawsuits, and a city's CMS vendor predicts its risk.
CSS
Responsive CSS Grid Layout with Animation
A responsive grid with a smooth animation when the layout is updated.
Get Ready For the Powerful CSS border-shape Property
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property.
Getting Started with Anchor Positioning
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a first-class solution to this problem, and it’s pretty friggin’ cool! In this tutorial, I’ll share the most useful parts I’ve found from this modern CSS feature.
Boundary-Aware Styling in CSS
There are times we might prefer specific styles for elements located near the edges of their containers or the screen.
Different colors, sizes, or rotations based on how close they are to the edge and which side of the container they are on. Instead of relying on class names, item counts, or sibling positions, we can achieve this with a single CSS function.
The view() CSS function is known for its use in scroll-driven animations, affecting elements based on their visibility within a scroll container. However, it can be used without involving any actual scrolling or motion effect.
This article shows you how to do that to create more adaptive interfaces based on their closeness to their container’s boundaries.
Fixing full-bleed CSS
The “modern” approach is to use CSS containment. Turn the <body> element (or any 100% width child) into a container. Then replace the viewport units with container units.
Generative colors with CSS
I’m now taking advantage of relative colors with the oklch() CSS function to dynamically generate all of the colors used on this site from just six hex codes defined as CSS variables.
HTML
How to Make an Interactive Element Invisible but Accessible
Let’s say we want to hide some interactive elements until interaction occurs. For example, we want some cards to have share buttons, but we don’t want them to clutter the UI. Other use-cases include skip links, which we can reveal at key moments in the tab order, anchor links (i.e., links to a specific part of a page), which we can reveal when we’re within said part, copy-to-clipboard buttons, which we can reveal when we’re somehow engaged with the content that we want to copy, scroll-to-top buttons, actionbar items of lesser importance — you know, things that might be okay to hide initially because they’re highly contextual or because users will know that they’re there.
This means we need to hide the element while still making it accessible. Well, that’s what the hidden="until-found" attribute-value does, but we also need to reserve the space, since we can’t hover what isn’t there, right? We also don’t want to cause any layout shift.
And that’s exactly where contain-intrinsic-size: auto none comes into it, which remembers the size of a rendered element.
JavaScript
Time-based background colour transitions with Temporal and CSS color-mix
A visual refresh with a background that changes colour according to the time of day, using the new Temporal API along with CSS custom properties that blend into each other.
Different hydration and rendering strategies
Over the years, in our goal to achieve faster and faster web applications, we created different hydration and rendering strategies. Each with benefits and drawbacks that we explore in this article.
How to detect when an element's visibility changes with JavaScript
Today, I wanted to show you how to detect when an element’s visibility changes using the JavaScript IntersectionObserver API.
What's new in ECMAScript 2026
Every year after the final language specification approval, I publish about the latest additions to the language. Here is a full list.
Astryx Design System
Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most-used and largest design system in the company — powering 13,000+ apps and shaped by the engineers, designers, and product teams who depend on it every day.
It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system. You import pre-built CSS and use typed React components — no build plugin, no styling library to adopt — and both people and AI assistants build with the same tooling.
Built on React and StyleX.
µJS — Lightweight AJAX Navigation Library, 5KB alternative to Turbo and htmx
Traditional websites reload the entire page on every click. µJS changes that: it intercepts link clicks and form submissions, fetches the new page in the background, and replaces only the content that changed. The browser never fully reloads — navigation feels instant, like a single-page application.
There's no framework to learn, no build step, no server-side changes. Add a single script tag to your existing site, call mu.init(), and every internal link becomes an AJAX navigation. It works with any backend — PHP, Python, Ruby, Go, or anything that serves HTML.
Built on the modern Fetch API: no XMLHttpRequest, no polyfills. Requests are managed natively with AbortController: when the user clicks a new link while the previous one is still loading, the in-flight request is cleanly cancelled.
UX
Stop Reporting UX Activity and Report Business Outcomes
UX teams should report business outcomes — not activity or UX metrics — to show impact on revenue, cost, risk, speed, retention, and to secure resources.
Miscellaneous
HoverSource - Translate What You See To What Your Agent Needs.
Hover on any UI element in your browser, Alt + C, Ctrl + V, and see your AI skip the digging session.
GitHub repo here.