Frontend Masters Blog – Helping Your Journey to Senior Developer

Latest Articles

@function CSS

The Fundamentals and Dev Experience of CSS @function

By Jane Ori on May 29, 2026

There are quite a few “gotchas,” developers face when getting into the new @function syntax of CSS. Some are getting addressed!

Anchor CSS Ident

Managing Anchor Associations With Data Attributes and Advanced attr()

By Daniel Schwarz on May 27, 2026

There is no `anchor` attribute in HTML, it was decided CSS `anchor-name` / `position-anchor` was the way to go. But modern CSS functions can get us there anyway.

Node.js Streaming

The Production Playbook for Node.js Stream Leaks

By Durgesh Rajubhai Pawar on May 26, 2026

Short story: `pipeline()` over `.pipe()` and destroy what you create.

Node Streaming

Your Node.js Streams Aren’t Backpressuring. They’re Silently Eating Your Memory.

By Durgesh Rajubhai Pawar on May 25, 2026

Memory management in Node.js streaming applications can be quite complex. Streams don’t inherently protect against memory exhaustion and we get into common pitfalls developers face.

Apple CI / CD Mac Safari

Testing Safari on a Budget

By Declan Chidlow on May 20, 2026

Good luck on non-Apple devices! You may want to try remote hardware or an online service. Or go refurbished and try to keep the cost down.

React RSCs TanStack

React Server Components in TanStack

By Adam Rackis on May 18, 2026

RSCs in TanStack Start are server-only executed code — perhaps a significant improvement over the Next.js implementation.

The Beat

A short, clear, engaging website that explains how diamonds are made by Jaydip Sanghani. Several facts in there I just didn’t know at all until now, like how many diamonds have a tiny serial number carved onto them. I think it’s nice to showcase websites that do things that websites really do best. I’d maybe lose that question mark in the title though since it’s not really a question.

The new No-Vary-Search header can be used to tell browsers that a query string like ?product_id=7 means the content on that URL is unique based on the query parameter, so cache pages like that individually. But also that a query string like ?utm_source=frontendmasters does not have unique content, so don’t cache it individually. (As explained by Harry Roberts)

Una Kravets:

Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. […] This is where border-shape comes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border.

Welp, clip-path() had a good run. I’ll always be fond of tools like Clippy. But border-shape() serves a much more common use case: you want to re-shape an element but not lose the border or box-shadow and whatnot.

Wes Bos has a great short video showing off a use case combining it with the also-mega-powerful shape() function. I was hoping that an element newly-formed via border-shape would automatically have text flow into the new shape, but alas, it does not. If you extend the shape, the text flow ignores it, if you cut into the shape, it just cuts off the text, as if the text were still set in the rectangle of the original element. If you’re clever, though, you can split the shape into left/right halves and use shape-outside to reflow text into the new shape.

Nice 9-minute video from Matt Pocock (from about a year ago) introducing composites. The problem of not being able to compare objects definitely feels worth solving. Or, more accurately, fixing the issue where when compare two objects that look exactly the same, it’s still false. And that using them as keys doesn’t work. Sounds like Records & Tuples were close, but the performance downsides were too strong. Composites are more likely to happen.

const pos1 = Composite({ x: 1, y: 4 });
const pos2 = Composite({ x: 1, y: 4 });
Composite.equal(pos1, pos2); // trueCode language: JavaScript (javascript)

Still true if you swap the order of the keys! Looks good to me. I don’t think it’s particularly close to making it into the language, but I see there is still discussion and research going on.

Featured

In-N-Out Animations: Dialogs (Part 1/3)

Popular

Latest Articles

The Fundamentals and Dev Experience of CSS @function

Managing Anchor Associations With Data Attributes and Advanced attr()

The Production Playbook for Node.js Stream Leaks

Your Node.js Streams Aren’t Backpressuring. They’re Silently Eating Your Memory.

Testing Safari on a Budget

React Server Components in TanStack

The Beat

Featured

In-N-Out Animations: Dialogs (Part 1/3)

Popular

Latest Articles

The Fundamentals and Dev Experience of CSS @function

Managing Anchor Associations With Data Attributes and Advanced attr()

The Production Playbook for Node.js Stream Leaks

Your Node.js Streams Aren’t Backpressuring. They’re Silently Eating Your Memory.

Testing Safari on a Budget

React Server Components in TanStack

The Beat

How Diamonds are Made?

Better Browser Caching with No-Vary-Search

border-shape

Arrays, objects… now ‘composites’?

Subscribe

Wanna write?