Frontend Masters Blog – Page 11 – Helping Your Journey to Senior Developer

Latest Articles

Creating Flower Shapes using clip-path: shape()

By Temani Afif on May 12, 2025

Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.

CSS shape()Shapes

shape(): A New Powerful Drawing Syntax in CSS

By Chris Coyier on May 7, 2025

Don’t underestimate `shape()` — it’s the CSS version of SVG that we absolutely needed.

Container Queries Container Units CSS Custom Properties

Using Container Query Units Relative to an Outer Container

By Ana Tudor on May 6, 2025

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

Curved Box Cutouts in CSS

By Preethi Sam on May 1, 2025

Kinda like that “bento box” look.

HTML includes

Seeking an Answer: Why can’t HTML alone do includes?

By Chris Coyier on April 29, 2025

Is there a perfectly clear and reasonable answer? Or could we get this someday?

JavaScript React React Hooks useEffect

React Internals: Which useEffect runs first?

By Teng Wei Herr on April 28, 2025

It’s not particularly obvious, but a child’s useEffect will run before a parent’s will. Let’s look at why.

The Beat

I thought Ashley Willis did an excellent job explaining the role in What Is Developer Advocacy? (2025 Edition).

We’re still here to serve developers. And we’re still doing the messy, meaningful work of bridging the gap between what a company thinks developers want and what developers actually need.

I liked the perspective that it’s actually better for a developer advocate to be a little removed from day to day development at the company itself:

… our value often comes because we’re not too close to the implementation. We can see the experience from a developer’s point of view. We notice when onboarding is confusing, when SDKs are missing critical examples, when the documentation skips the “hard but honest” parts.

Some Q&A from Brian Rinaldi on the topic is interesting as well.

I was trying to play with CSS Module Scripts the other day, which are a way to import CSS as a constructable stylesheet using the ESModules syntax. They are Chrome-only so not really something we can generally use (unless you’re building an Electron app or something), but I really like the idea of being able to load a stylesheet for a web component in a separate file cleanly. Anyway, there is lots of information out there that shows and old syntax that doesn’t work anymore, and little information that the syntax has changed to use the with keyword.

// NOPE, old
import sheet from './styles.css' assert { type: 'css' };

// YEP, they changed it
import sheet from './styles.css' with { type: 'css' };Code language: JavaScript (javascript)

So they are called “import attributes” now also, best I can tell. I imagine it applies to the JSON version as well. Hope this saves someone some grief.

A fun list post from Nic Chan where you check off the funny/sad/proud/weird things we do as front-end developers. I don’t know if a higher score is better, but it certainly means you’ve been around the block.

I doubt you’ll be able to resist poking around Nic’s site, it’s really fun.

There was a lot of interest in our Why Can’t HTML Alone Do Includes? article. I’d like to point you to my ShopTalk Show conversation where we really get into things more with Jake Archibald.

Featured

Perfectly Pointed Tooltips: To The Corners

Popular

Latest Articles

Creating Flower Shapes using clip-path: shape()

shape(): A New Powerful Drawing Syntax in CSS

Using Container Query Units Relative to an Outer Container

Curved Box Cutouts in CSS

Seeking an Answer: Why can’t HTML alone do includes?

React Internals: Which useEffect runs first?

The Beat

Featured

Perfectly Pointed Tooltips: To The Corners

Popular

Latest Articles

Creating Flower Shapes using clip-path: shape()

shape(): A New Powerful Drawing Syntax in CSS

Using Container Query Units Relative to an Outer Container

Curved Box Cutouts in CSS

Seeking an Answer: Why can’t HTML alone do includes?

React Internals: Which useEffect runs first?

The Beat

What Is Developer Advocacy? (2025 Edition)

Import Assertions use “with” not “assert” anymore.

You’re not a front-end developer until you’ve…

Jake Archibald on Native HTML Includes

Subscribe

Wanna write?