Frontend Masters BlogMore Front-end Bloggers11 min read
Creating Diagrams and Graphs Using Modern CSS
The final part of the connectors series: dynamic connections that pick the closest sides, static connections that always leave from the same edge, and some bendy, zig-zag, and spring connectors, all built with anchor positioning, border-shape, shape(), and if().
Frontend Masters BlogMore Front-end Bloggers3 min read
My Interop 2027 Picks
What web platform features are we all wishing for perfect cross-browser interoperability next year?
Frontend Masters BlogMore Front-end Bloggers7 min read
TanStack AI’s Sandbox API
Part 3 of this intro to TanStack AI covers the Sandbox API: spinning up a remote sandbox on Vercel or Railway, running Claude Code inside it with GitHub access, and having it clone your repo, add a feature, and open a pull request.
Frontend Masters BlogMore Front-end Bloggers5 min read
true or false in CSS
CSS doesn’t have a boolean type, but it does have the true and false keywords. Register a custom property that only accepts them, flip it with :has(), and container style queries turn messy :checked selector combinations into readable conditions.
Frontend Masters BlogMore Front-end Bloggers12 min read
Data Access Testing With @testcontainers
Testing data access code has always been awkward: unit tests want to be fast and isolated, and a real database is neither. With Docker and @testcontainers you can spin up a throwaway Postgres inside your Vitest suite, push your Drizzle schema into it, and verify that your real insert and query code round-trips correctly.
Frontend Masters BlogMore Front-end Bloggers5 min read
Multi-Column Different-Speed Scrolling
Scroll-Driven Animations can step in and make scrolling feel different even if you aren't actually interfering with the actual page scroll.
Frontend Masters BlogMore Front-end Bloggers5 min read
Overriding Heading Levels With the headingoffset HTML Attribute
The new headingoffset HTML attribute lets you bump a heading’s level up by adding to it, which is handy when a component’s h1 needs to be an h2 somewhere else. Here’s how the math works, how to reset it, how to style the result with :heading(), and where aria-level fits in.
Frontend Masters BlogMore Front-end Bloggers13 min read
Two Circles, One Connection, and border-shape
Swapping the clip-path arrow from the previous article for border-shape and shape(), we can connect two draggable circles with fancy curved lines that stay perfectly aligned.
Frontend Masters BlogMore Front-end Bloggers10 min read
Useful @custom-media Presets
Custom media queries let you name and reuse media queries the way custom properties do for values. Here’s a set of drop-in @custom-media presets for input mechanisms, breakpoints, and true HDR, plus a container style query version of each that works in every browser today.
Frontend Masters BlogMore Front-end Bloggersread at source
How I Used Claude Code to Speed Up My Shell Startup by 95%
I like the idea of "Please suggest 10 improvements to my ~/.zshrc" as a prompt (John Lindquist). Nick Taylor wrote up all the stuff it found for him and got nearly a second back for every fresh terminal opened.