Accessibility
The major technical reasons why accessibility overlays don't work
The Overlay Factsheet describes an accessibility overlay as follows:
“Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website.”
On the surface, this seems very promising. JavaScript can be used to add, remove, or modify elements and attributes on the page and modify CSS to change the appearance and layout. It truly is the perfect technology for this task. In practice, it doesn’t really work. The Overlay Factsheet discusses the many reasons why. I’d like to provide a deep discussion on the 4th item identified in that list: the difficulty remediating accessibility problems in React, Angular, Vue, etc.
You can’t audit your way into accessibility culture change
When teams rely on audits as their primary accessibility strategy, they place themselves in a reactive position. The audit identifies defects, teams log them, and bug fixing begins under tight timelines and competing priorities. This pattern creates the appearance of progress, yet it rarely leads to sustained improvement because the same types of issues continue to surface release after release.
The underlying issue is structural. Audits are lagging indicators. They report on the consequences of earlier decisions rather than influencing those decisions in real time. If a design system lacks accessible patterns, if requirements exclude accessibility criteria, or if engineering teams build custom components without proper semantics, the audit will capture those gaps after they are already embedded in the product.
Accessibility For Everyone by Laura Kalbag
Read the book online for free.
We first published Accessibility For Everyone with A Book Apart back in 2017. This means the book is now 9 years old. Accessibility best practices haven’t really changed, and you should still find this book valuable. However, some of the recommended tools might be outdated, job titles have changed, and the Web Content Accessibility Guidelines are now approaching version 3.
CSS
Tachyons Neo
A small, composable CSS toolkit. Sharper defaults for modern viewports, finer-grained colour steps, a small CSS Grid layer, and a handful of utilities for prototyping. No build step, no dependencies, one stylesheet.
Tabular numbers in CSS
Use font-variant-numeric: tabular-nums when digits need to stay aligned. It gives every digit the same width, so counters, prices, timers, and table columns do not wiggle as values change.
Better fluid sizing with round()
Fluid sizing with clamp() and container query units is powerful, but the computed values often land on numbers like 19.7px or 143.2px. The CSS round() function lets you snap those values to a predictable step, which is useful for typography, spacing, and layout rhythm.
In this article, I’ll show the problem, how round() works, and some examples you can try in the demos.
Cross-Document View Transitions: The Gotchas Nobody Mentions
This is Part 1 of a two-part series about cross-document view transitions, going over all the gotchas, from ditching the deprecated way to opt into them to a little-known 4-second timeout.
Three Shape Variations using border-shape
Usingshape(), you can easily create any CSS-only shapes, and if you combine it with border-shape, you can have the border-only and cutout variations using almost the same code structure.
Gap decorations: Now available in Chromium
CSS gap decorations are available in Chrome and Edge starting in version 149. Style the gaps between grid, flexbox, and multi-column layouts without using borders or pseudo-elements. This feature was built in collaboration between the Microsoft Edge and Google Chrome teams
HTML
The <noscript> element as a trap
One of the few traps of the web is how the <noscript> element doesn't provides the right behavior.
JavaScript
fate - a modern data client for React inspired by Relay and GraphQL. It combines view composition, normalized caching, data masking, Async React features, and type-safe data fetching
React data fetching is still largely centered around requests. Components fetch independently, requests happen at every level of the component tree, and keeping client state consistent often requires imperative cache invalidation, defensive refetching, or detailed mutation patching logic. As coding agents write more and more of our code, reducing imperative cache management and request-centric state handling becomes more important, not less. fate is designed to eliminate those patterns at the framework level.
fate takes a different approach: Instead of caching requests, fate caches normalized objects, shifts thinking to what data is required, and composes declarative view requirements into a single request at the application root. This enables precise optimistic updates, efficient live subscriptions, predictable cache behavior, and deep integration with modern Async React features through a minimal, composable API.
Check out the initial announcement if you'd like to learn more about why fate exists.
TypeScript Refactoring Interview Questions
How to spot weak TypeScript code, explain the problem, and refactor it into safer, cleaner, more maintainable code.
When React parent components need to know their children
In React, it’s always preferable to maintain a linear data flow. If a parent needs something, lift the state instead of smuggling it back up. All rules are made to be broken, though.
Brownies
Tastier cookies, local, session, and db storage in a tiny package. Includes subscribe() events for changes.
alien-signals - The lightest signal library
This project explores a push-pull based signal algorithm. The implementation is related to the following frontend projects:
- Propagation algorithm of Vue 3
- Preact’s double-linked-list approach
- Inner effects scheduling of Svelte
- Graph-coloring approach of Reactively
I wrote the reactivity code for both Vue and alien-signals. The core algorithm has since been ported back to Vue 3.6.
React Performance Isn’t About useMemo — It’s About Render Boundaries
Why slow React applications usually come from state placement, update scope, and architectural coupling - not missing memoization hooks.
Miscellaneous
Modern Web Guidance
Modern Web Guidance is a set of evergreen and expert-vetted skills that guide your AI coding agents across many common use cases to build modern web experiences that are accessible, performant, and secure.
Modern Web Guidance can be used with your favorite AI coding agents, ensuring you have access to guidance for modern web best practices in your preferred workflow.