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

Latest Articles

CSS Media Query

How much do you really know about media queries?

By Daniel Schwarz on September 29, 2025

There are a ton more @media queries than “width” and “prefers-reduced-motion”. Let’s have a long, along with use-cases.

CSS Starter

The Coyier CSS Starter

By Chris Coyier on September 24, 2025

A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn’t.

@function attr()calc-size()CSS field-sizing if()interpolate-size invokers linear()random()reading-flow text-wrap

What You Need to Know about Modern CSS (2025 Edition)

By Chris Coyier on September 19, 2025

If you thought 2024 was packed with amazing new CSS, well, you’re right. But so is 2025 and it keeps looking bright. Check out our list of the best stuff with easy-to-reference examples.

Animation animation-composition CSS Menu offset-path

CSS offset and animation-composition for Rotating Menus

By Preethi Sam on September 17, 2025

The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

Animation CSS Images SVG

Replace Your Animated GIFs with SVGs

By John Rhea on September 15, 2025

You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

@function CSS Grid if()Media Query

Breakpoint Columns, Five Ways. Which Do You Like?

By Chris Coyier on September 12, 2025

There are usually multiple ways to do the same thing on the web. Sometimes… a lot of ways. Which is “better” can be a matter of taste or which abstraction buys the most value. Check out this CSS example and see which you prefer.

The Beat

I’m just hearing about the closedby="any" attribute/value for <dialog>. HTML popovers have this “light dismiss” behavior where you can “click outside” to close them, but not dialogs (until this). I forked a previous demo to try it and it works great (in Chrome & Firefox, just waiting for Safari). I’ve been using a custom <ClickOutsideDetector /> element for ages, so this is a welcome feature.

In A Progressive Enhancement Challenge, I laid out a situation where the hardest thing to do is show a button you never want to show at all if the JavaScript loads and executes properly. I wrote of this state:

It seems like the ideal behavior would be “hide the interactive element for a brief period, then if the relevant JavaScript isn’t ready, show the element.” But how?! We can’t count on JavaScript for this behavior, which is the only technology I’m aware of that could do it. Rock and a hard place!

Scott Jehl blogged For Your Convenience, This CSS Will Self-Destruct, including an idea that fits the bill. It’s a @keyframes animation that hides-by-default then fades in after 2s. With this in place, in your JavaScript, you’d include a bit that ensures the button stays hidden, with a new class. That’s a win!

… a site’s JavaScript files can often take many seconds to load and execute, so it’s great to have something like this ready to bail out of anything fancy in favor of giving them something usable as soon as possible.

All sorts of inputs have little microphone buttons within them that you can press to talk instead of type. Honestly, I worry my daughter will never learn to type because of them. But I get it from a UX perspective, it’s convenient. We can put those in our web apps, too. Pamela Fox has an article about all this.

There are two approaches we can use to add speech capabilites to our apps:

Use the built-in browser APIs: the SpeechRecognition API and SpeechSynthesis API.

Use a cloud-based service, like the Azure Speech API.

Which one to use? The great thing about the browser APIs is that they’re free and available in most modern browsers and operating systems. The drawback of the APIs is that they’re often not as powerful and flexible as cloud-based services, and the speech output often sounds much more robotic.

I like that she whipped it up into a Web Component.

I liked this bit of JavaScript trivia from Cassidy Williams.

Look at this JavaScript code:

let [CLOSED, OPEN] = [{}, {}];
CLOSED = {
  cake: OPEN,
};
OPEN = {
  fish: 5,
};
console.log(CLOSED); // cake is {}Code language: JavaScript (javascript)

Why is it that CLOSED is not { cake: { fish: 5 }}?

There is a clear answer, and it’s something worth making sure you understand before heading into a job interview that involves JavaScript.

Featured

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

Popular

Latest Articles

How much do you really know about media queries?

The Coyier CSS Starter

What You Need to Know about Modern CSS (2025 Edition)

CSS offset and animation-composition for Rotating Menus

Replace Your Animated GIFs with SVGs

Breakpoint Columns, Five Ways. Which Do You Like?

The Beat

Featured

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

Popular

Latest Articles

How much do you really know about media queries?

The Coyier CSS Starter

What You Need to Know about Modern CSS (2025 Edition)

CSS offset and animation-composition for Rotating Menus

Replace Your Animated GIFs with SVGs

Breakpoint Columns, Five Ways. Which Do You Like?

The Beat

closedby=”any”

For Your Convenience, This CSS Will Self-Destruct

Browser Speech Input & Output Buttons

Why JavaScript variables don’t always update

Subscribe

Wanna write?