Frontend Masters Blog

Latest posts

1. true or false in CSS

   6 Nov 2026 · blog.master.dev · Preethi Sam

   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.

2. Data Access Testing With @testcontainers

   4 Nov 2026 · blog.master.dev · Adam Rackis

   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…

3. Multi-Column Different-Speed Scrolling

   3 Nov 2026 · blog.master.dev · Chris Coyier

   Scroll-Driven Animations can step in and make scrolling feel different even if you aren't actually interfering with the actual page scroll.

4. Overriding Heading Levels With the headingoffset HTML Attribute

   2 Nov 2026 · blog.master.dev · Daniel Schwarz

   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.

5. 

   Two Circles, One Connection, and border-shape

   30 Oct 2026 · blog.master.dev · Temani Afif

   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.

6. Useful @custom-media Presets

   29 Oct 2026 · blog.master.dev · Daniel Schwarz

   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.

7. How I Used Claude Code to Speed Up My Shell Startup by 95%

   28 Oct 2026 · blog.master.dev · Chris Coyier

   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.

8. What should you put on a dynamic custom social media card image?

   27 Oct 2026 · blog.master.dev · Chris Coyier

   There is technology to dynamically create custom social media cards (like this one!) — but what you put on it really depends.

9. The Vertical Codebase

   23 Oct 2026 · blog.master.dev · Chris Coyier

   A nice app architecture thought by Dominik: The Vertical Codebase. When component architecture came along, many started co-locating HTML/CSS/JS for a component, and it felt right. What if you take that one step further and co-locate based on the site’s conceptual areas? For example, the “dashboard”…

10. Building an Isolated Preview for AI-Generated HTML

    22 Oct 2026 · blog.master.dev · Keshav Malik

    An iframe with srcdoc feels like a safe place to render HTML a model wrote. It isn't. Three tests show how the preview can read your page, escape the frame, and phone home, and four layers of protection close each hole.

11. “I Redesigned VLC After 25 Years”

    20 Oct 2026 · blog.master.dev · Chris Coyier

    I watched this whole video by Juxtaposed, assuming it was a real redesign of the VLC player, but alas, it is not official. Nevertheless, it should be, and it’s a wonderful example of how much real human brainpower it takes to design something well.

12. Structured Output with TanStack AI

    19 Oct 2026 · blog.master.dev · Adam Rackis

    Part 2 of this intro to TanStack AI covers structured output: constraining the model's response to a Zod schema, then streaming that JSON in and rendering it while it's still incomplete.

13. Unlocking AI in Your Apps with TanStack AI

    16 Oct 2026 · blog.master.dev · Adam Rackis

    TanStack AI is a strongly typed set of libraries for adding AI features to your apps. Part 1 of this intro covers basic setup and prompting, streaming responses, persisting threads to your database, and resuming a response after a mid-stream refresh.

14. SVG “Linked Parameters” Will Change How We Do Icon Systems

    16 Oct 2026 · blog.master.dev · Chris Coyier

    Maybe we can get back to an img-based icon system?

15. Building a Fancy Scrollspy Using Modern CSS

    14 Oct 2026 · blog.master.dev · Mojtaba Seyedi

    Scrollspy navigation used to mean IntersectionObserver and a pile of JavaScript. With scroll-target-group, :target-current, and a little anchor positioning, a plain list of anchor links can highlight the current section all on its own.

16. “WebMCP is Agentic WebPerf”

    14 Oct 2026 · blog.master.dev · Chris Coyier

    Yoav Weiss makes a good point: “WebMCP is Agentic WebPerf”. I’ve seen both pushback to WebMCP in the form of “websites should just be better, or agents should be smarter, there shouldn’t be alternative paths to using them built.” And I’ve seen plenty of excitement for WebMCP in the form of “ooooo…

17. Tips and Tricks for Using TanStack Start with Cloudflare Durable Objects

    12 Oct 2026 · blog.master.dev · Adam Rackis

    Some hot tips on using middleware for simplifying Durable Object creation and managing WebSocket connections.