Accessibility
Opening the can of tooltips
Tooltips seem simple, until you look closer. The title attribute can't be styled and isn't accessible to everyone, while custom tooltips come with plenty of complexity. What would it take to build a native tooltip that's customizable, accessible, and easy to use, from plain text to rich HTML?
CSS
Dolly — scroll animations in plain CSS
Scroll-driven motion, in CSS. 34 camera moves on one attribute, no JavaScript.
<h2 data-dolly="tilt-up">This rises into place as you scroll to it.</h2>
That attribute is the whole API. You don't call or wrap anything, and the browser runs the animation itself.
Native masonry layouts with CSS grid lanes
Native masonry layouts have been a long time coming to CSS and after years of debate over how they should work and fit into the language, we finally have display: grid-lanes.
If you want the full backstory on how we got here, Sunkanmi Fafowora has a great overview of the grid-lanes announcement over on CSS-Tricks. Here, I want to focus on the technical side of masonry, why it took so long to get right, and how display: grid-lanes works.
CSS scroll-state() Queries: Styling Stuck, Snapped, and Scrollable
Every codebase I have worked in has the same file somewhere. It is called stickyHeader.js or useIsStuck.ts, and it exists because CSS could tell you an element was position: sticky but never whether it was currently stuck. So you wire up an IntersectionObserver against a one-pixel sentinel div, toggle a class, and hope nobody asks why the shadow flickers on iOS.
The browser has always known the answer. It has to know: it is the thing doing the sticking, the snapping, and the overflowing. Scroll-state container queries are the API that finally exposes that knowledge to the stylesheet.
Confetti Shape Explosion using random()
Do you want a cool hover effect? Using random() and modern features, you can explode any border-only shape into confetti.
Useful @custom-media Presets
Back in February of 2026, Firefox 148 shipped the @custom-media at-rule (requires the layout.css.custom-media.enabled flag to be set to true, for now), which can be used to create custom media queries. As you might’ve guessed, custom media queries are like custom properties (or “CSS variables”) but for media queries. They let us reuse media queries by referencing the name we’ve given them.
In this article, I’ll share some useful @custom-media presets that you can drop into any project without them being too opinionated, but you do need to understand browser support and your options there.
HTML
HTML-in-Canvas in Chrome 157: Interactive DOM inside 2D, WebGL, and WebGPU
Chrome 157 ships the HTML-in-Canvas API, letting you render live, interactive, and accessible DOM subtrees into 2D, WebGL, and WebGPU canvases.
JavaScript
react-jsonschema-form - A React component for building Web forms from JSON Schema
A simple React component capable of using JSON Schema to declaratively build and customize web forms.
Animaxxing
Agent skills that teach your coding agent to animate the shit out of your website with GSAP.
The AI cost of JavaScript frameworks
One of my pet peeves with the web development community is that so many of the decisions we make are vibes-based. Frameworks are “blazing fast,” tools will “supercharge” your development, the right abstraction will benefit both you and your users (DX and UX all in one!). All of this breathless boasting is usually offered with zero evidence. Alex Russell has called this “frontend’s lost decade”, Baldur Bjarnason has called programming a pop culture.
React.lazy, Suspense and the Hidden 300 ms Startup Delay
Every new tab is a cold start. We set out to shrink our bundle, found that bytes weren't the problem, and traced the real delay to how React reveals lazy-loaded and suspended content.
Miscellaneous
Gradient Background Generator
Create an animated gradient background right in your browser — free, with no signup. Choose from 20+ live shader modes, tune the colors in real time, and export a still PNG or an animated video with no watermark. Drop the result into a website, presentation, social post, product mockup, or video — or copy the embed code to run the live gradient on your own site.