Accessibility
Understanding aria-valuenow
A quick explanation of aria-valuenow - looking at native and non-native controls.
Speech recognition and complex tables with fields
We’re talking about speech recognition, an assistive technology that doesn’t get talked about nearly as much as screen readers. And not just any tables, but complex tables with input fields or links baked into the cells.
If you’re designing or developing tables like this, you’re in the right place. You’ll get specific considerations for building complex tables with speech recognition in mind.
Even if you’re not building complex tables, this article gives an interesting look at the process of learning about AT, testing assumptions, and rethinking. That’s the part worth taking with you, whether or not you ever touch a table again.
19½ things you didn’t know about accessibility in HTML and CSS
A collection of lesser-known accessibility details and newer browser features, aimed at experienced front-end developers.
CSS
12 CSS features you can use today with no build step
Modern CSS features that replace Sass, PostCSS plugins and JavaScript hacks, checked in September 2026.
Random Blob Shapes
Creating CSS Shapes is cool, but what about Random CSS Shapes? Thanks to the new random() function, we can generate unique shapes. A new shape appears on each page load. You never see the same shape twice.
Filling in the last row of a responsive grid
Until we have widespread support for gap decorations, the easy trick for having borders between grid cells in CSS is giving the grid a 1px gap, setting the container's background color to the desired border color, and setting the cells' background colors to the desired background color.
As long as you don't need some other background to show through, this is really handy and saves you from crazy :nth selectors or a bunch of extra logic. The tradeoff is some extra complexity when you don't have the right number of items to fully fill the grid.
The root scroller and how not to lose it
Every page has one main scroll container that scrolls the page itself: the root scroll container, or root scroller for short. Because it scrolls the entire page, the browser gives the root scroller a bunch of features that regular scroll containers don't get, and because they work automatically, most developers aren't aware of them.
It's easy to accidentally stop using the root scroller, and hard to notice when you have. Your 'page' still scrolls (visually at least) and you don't get any errors, but your site misses out on some features and that can make the user experience worse.
In this article we'll go over what the root scroller is, how it's different from other scroll containers, and how to fix it when you've accidentally opted out of it.
CSS scroll-triggered animations are here, and I completely missed them
Triggered animations are CSS animations that respond to a trigger being either active or inactive. We can specify animation actions and use it, for example, to play, pause or reverse animations based on if the trigger is active or not.
A decent custom checkbox pattern for until ::checkmark is ready
We're a while off from being able to leverage ::checkmark with checkbox styling, but here's a decent way to get the styling control you want, while preserving the useful parts of the native input element.
HTML
New in Chrome 154: iframes that automatically resize themselves to their content
Chrome 154 adds support for responsively-sized iframes, letting an <iframe> size itself based on the intrinsic size of its embedded document. This is perfect for seamlessly embedding third-party comment widgets, varying-height social media embeds, or any other type of embed that uses an <iframe>.
Blurry before beautiful: image previews for the web
You've probably already seen this common pattern in action: blurry versions of the images of a site appear immediately and, moments later, their full versions replace them.
We (Microsoft Edge) are proposing to make this a built-in capability of the web, and we'd love to know if this is worth pursuing and what the exact scope should be.
For now, our proposal focuses only on loading, displaying, and replacing the preview image. To achieve this, we propose to introduce a new attribute for the <img> element called previewsrc.
Some thoughts on HTML’s proposed previewsrc attribute
An interesting new proposal has been brought forth by Microsoft. There are a dozen ways to show a preview of an <img> element before the src= attribute has loaded. So why not standardise on previewsrc=?
I instinctively like the idea - if only to simplify source code and reduce JS usage. But I do have some concerns which I've shared with the team.
JavaScript
10 JavaScript Error Handling Patterns That Actually Matter
From try/catch and custom errors to React Error Boundaries and process-level fallbacks.
zep: Auto-canceling, leak-free event pipelines in 320 bytes JS. Zero dependencies
Zero Event Plumbing.
zep:
- is a very small event pipeline library.
- turns every addEventListener into a composable, self-cleaning pipeline.
- is framework agnostic (vanilla js), so it should fit every frontend.
Events are great, until they are not. Like when you need to debounce inputs, handle scroll spam, or fetch async data out-of-order.
zep was built for exactly those moments.
No more loose let variables, no more memory leaks, no event handling boilerplate. Just clean, composable event handling logic.
lisse - Squircle corners for the web. Bindings for React, Vue, and Svelte
Lisse is a small JavaScript library that draws squircle corners, the same continuous curve Figma and iOS use. Bindings for React, Vue, and Svelte, plus a framework-agnostic core. Per-corner control, borders, and shadows are included.
Tibetan Singing Bowls - synthesized in the browser with Web Audio
Play a set of virtual Tibetan singing bowls right in your browser. Strike a bowl, or hold it down to draw the tone out the way a mallet circles the rim. The sound is synthesized live, so there are no audio files to load, and it works offline.
GitHub repo here.
Delaying all JavaScript is not optimisation, it just moves the problem
This one annoys me. A lot of today’s “speed up your site” plugins ship a single checkbox that lifts a Lighthouse score in the blink of an eye.
What it does is delay the execution of all JavaScript until the first user interaction — a scroll, a click, a tap.
For real users, though, nothing gets faster. It can make things slower, and it can quietly break your analytics.
It is a small con trick that our whole industry keeps tacitly accepting.
tinyjs — desktop apps for macOS, Windows, and Linux in ~6 MB
Build macOS, Windows, and Linux desktop apps in JavaScript: txiki.js backend, native webview window, ~6 MB shipped. No Electron. No ports.
Miscellaneous
MÒ 墨 — 52 semantic-HTML UI components with neutral design tokens. Zero dependencies, no build step, 43 kB gzip
Mò (墨, "ink") is a fork of oat rebuilt around the shadcn/ui design language — its exact neutral palette in oklch, radius scale and shadows — using only modern CSS (cascade layers, light-dark(), color-mix(), popovers) and a little vanilla JS.
No build step for consumers. No classes required. No CSS that fights yours.
Learn UI: interfaces, explained interactively
An interactive guide to design engineering: how interfaces are built to feel right, from motion and typography to systems and craft.