Masonry (with Animation) in CSS
Masonry.js was famous for creating, uh, Masonry layouts. But it did something else, too: animate fluid grids. Here's a way to get that in native CSS as well as the layout.
Frontend Masters Blog
@frontend-masters-blog
Publisher
19
Posts
Posts by Frontend Masters Blog
Lumis: Syntax Highlighter powered by Tree-sitter
Lumis looks like a pretty sweet new syntax highlighter tool. Powered by Tree-sitter, of which I can vouch for its speed and power. I like how many runtimes it supports, almost encouraging server-side use, which is the best place for the job when you can pull it off.
Lessons Learned Rewriting a Sticky Detector
A dozen years go by, it turns out we can do things a lot differently and a lot better. Here a `scroll` event is entirely replaced by HTML and CSS features and much better performance.
FixCSS
There is a famous document from the CSS Working Group that lists the historical mistakes in the design of CSS. It contains stuff like how box-sizing: border-box; should have been the default, which is why a lot of us still put that in starter stylesheets. Declan Chidlow took a step I’ve never see...
In-N-Out Animation using sibling-index()
Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!
The Siren Song of ariaNotify()
Mat Marquis details the good-and-dangerous of a new method which we can just make a screenreader say something. There’s a brand new ariaNotify() method — defined by the Accessible Rich Internet Applications (WAI-ARIA) 1.3 Specification — that provides you with a means of programmatically triggeri...
Thinking Horizontally in CSS @layer
If you put your custom properties (tokens) for every component in an @layer, then overriding them is never a fight.
How to Make an Interactive Element Invisible but Accessible
The attribute `hidden=
Boundary-Aware Styling in CSS
You might think of the view() function as used in scroll-driven animations, but really it just pairs @keyframes animation with the current position of an element.
The Field Guide to Grid Lanes
The WebKit gang did a good job with The Field Guide to Grid Lanes showcasing what kind of layouts are now achievable with display: grid-lanes;. Basically: Masonry layout, with arbitrary column widths, and proper tabbing order, is now progressive-enhanceable and HTML/CSS only.
Cloudflare Workers and Hyperdrive with TanStack Start
In Part 2 of the series on using Cloudflare with Web Apps, the focus is on setting up a database and addressing key issues like performance and connection management.
Totally Free Course: Claude Code
Lydia Hallie from Anthropic spends a couple of hours with us, helping us level up what we’re doing with Claude Code. Learn to customize Claude Code for your codebase, using CLAUDE.md, plan mode, and permissions that adhere to your team’s standards. Build reusable skills tailored to your processes...
Uber for Dogs: How to Stop & Think for Design
Jacky Gilbertson writes about the real job of design in Uber for Dogs: How to Stop & Think for Design. It doesn’t have anything to do with pixels and colors at first; it has to do with what problem is trying to be solved, why, and for whom. Perhaps it’s an overloaded term, but design […]
Fluid Typography with progress()
With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past.
Introduction to Cloudflare Workers for Web Apps
Maybe you don't need a traditional server to run a web app that needs a node server backend. Maybe the requests that need that can go to a cloud function on demand.
Modern Web Guidance
Google released an AI “skill” at Google I/O last month called Modern Web Guidance. It’s essentially a folder of nested Markdown files that AI agents know how to read and use as part of their context window when they deem appropriate. This skill has a bunch of HTML/CSS/JavaScript information that...
Let’s Play With Gap Decorations!
The `rule` (and friends) CSS property allows us to draw markers (like borders) in the gaps between columns and rows (and flex items!)
Prop For That
Adam knows better than anyone, CSS knows about the user, device, variables, layout and more. But there is a little bit of information that CSS doesn’t have. Like what’s the current value of a range input exactly? What are the exact coordinates of the mouse? It’s not hard to pass over that informa...
Your Database’s Isolation Levels Don’t Mean What You Think
A tour through Read Committed, Repeatable Read, and Serializable, and why the same three words guarantee completely different things depending on which database you ask.