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

Latest Articles

Background Patterns with CSS `corner-radius`

By Preethi Sam on Feb 09, 2026

You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.

CSS JavaScript Layout Performance

The Browser Hates Surprises

By Durgesh Rajubhai Pawar on Feb 06, 2026

To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.

CSS Details

An Over-The-Top Spoiler Design with the Details Element

By Chris Coyier on Feb 04, 2026

You can style anything you want on the entire page when any given details element is open or closed.

Details Performance Video Web Components YouTube

Performance-Optimized Video Embeds with Zero JavaScript

By Stefan Bauer on Feb 02, 2026

Putting a YouTube video inside a closed details element means it won’t load until that details element is opened. We can use that.

React’s ViewTransition Element

By Chris Coyier on Jan 30, 2026

The Canary version of React has a special component for ViewTransitions. Does it help?

AI Claude Code GitHub Copilot

What Senior Engineers Need to Know About AI Coding Tools

By Marc Grabanski on Jan 29, 2026

Senior engineers actually have a massive advantage with AI tools once they learn the basics. They know what questions to ask. They understand edge cases. A junior dev accepts the first output. A senior dev knows what’s missing.

The Beat

I ran across this website Very Good Components the other day and thought it was a neat idea to have a design gallery that wasn’t whole websites but individual components. They actually went a bit further and have configurable code for them. Here’s a Glowing Gradient Divider. I decided to remake it as an <hr> because… that’s just what I do sometimes. Only to make mine super configurable, I used my own slideVars library. For no other reason than I think it’s cool, I’ll mention I just fixed slideVars up to list the --custom-properties in the order you put them in your own CSS in v1.5.0.

My go-to local app image optimizer has long been ImageOptim. It’s Mac-only (and free), but they suggest alternatives for other platforms. I reach for ImageOptim usually when I want to optimize a whole bunch of images in a batch. For one-offs, you can’t do much better than Squoosh, a great progressive web app (PWA).

I haven’t seen much innovation in this space in a long time, but recently just saw Convert & Compress and it’s pretty good! It’s got a nice UI for looking at before/after results like Squoosh has, but also does batch processing. The one review left so far mentions SVG support, which I agree would be nice. ImageOptim does that, as does the PWA SVGOMG. Convert & Compress is free-for-now and looks reasonably priced once it’s not anymore.

If you don’t like the UI or features, it feels like this is the kind of app that would be good vibe coding practice.

I feel like “streaming” will be more and more of a concept in 2026. We can stream HTML, but rarely do. With AI APIs these days, we’re seeing streaming much more commonly. We want to see that LLM kick out an answer word-by-word, as the perceived performance is better that way. What about a JSON response, can we stream that? Seems harder since JSON needs to be fully valid to be decoded. Krasimir Tsonev shows how it can be done.

Firefox 147 just came out, and the flagship developer feature is clearly anchor positioning support, bringing that “to the baseline” as we’re supposed to say these days. That rules, but I’m also very hyped about CSS module scripts. Remember, they are a way of importing a stylesheet in JavaScript, that is, the only decent way of handling CSS in the Shadow DOM.

import sheet from './styles.css' with { type: 'css' };

class MyComponent extends HTMLElement {
  constructor() {
    super(); 
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.adoptedStyleSheets = [sheet];
  }
}
Code language: JavaScript (javascript)

For clarity, this is sometimes called “CSS Module Scripts” and the import syntax is called “Import Attributes”.

Featured

The Drill-Down Menu with Details and @scope

Popular

Latest Articles

Background Patterns with CSS `corner-radius`

The Browser Hates Surprises

An Over-The-Top Spoiler Design with the Details Element

Performance-Optimized Video Embeds with Zero JavaScript

React’s ViewTransition Element

What Senior Engineers Need to Know About AI Coding Tools

The Beat

Featured

The Drill-Down Menu with Details and @scope

Popular

Latest Articles

Background Patterns with CSS `corner-radius`

The Browser Hates Surprises

An Over-The-Top Spoiler Design with the Details Element

Performance-Optimized Video Embeds with Zero JavaScript

React’s ViewTransition Element

What Senior Engineers Need to Know About AI Coding Tools

The Beat

Glowing Gradient `hr`

Convert & Compress

Streaming JSON in just 200 lines of JavaScript

Firefox Goes CSS Modules

Subscribe

Wanna write?