Are you excited about sizes="auto" landing in browsers? Did you ever run into issues with the bfcache and didn't know what to do? Or are you looking for a native way to lazy load videos?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.

A big thank you and a huge bag of karma points go to Mathias this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

You can support Web Weekly on Patreon or GitHub Sponsors.

And if you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you!

Sponsored

Practice Real Frontend Interviews

FrontendAtlas helps frontend engineers prepare with practical coding challenges, frontend interview questions, and a frontend system design blueprint. Built for JavaScript, React, Angular and Vue interviews — with implementation-heavy practice instead of generic puzzle grind.

Start practicing for free

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!

Naming is hard, I get it. But it seems more like Microsoft has given up on giving AI features another name than copilot.

Name everything the same

• If you thought the speed of writing code was your problem - you have bigger problems → "If you want to ship faster, look at where things are waiting."
• I Tried Vibing an RSS Reader and My Dreams Did Not Come True → "The making from nothing isn't as hard anymore. But everything after that still is."

If you sometimes see Times New Roman flashing somewhere, Harry describes that the issue is most likely incorrect font-family properties. It might seem obvious, but I bet many people have these issues in their stylesheets.

Fall back properly

Guilherme wanted to implement a quick and easy theme toggle on his site and discovered that sometimes things aren't that easy.

If I had kept it simple (just a regular dark mode using @media (prefers-color-scheme: dark) and light-dark()) I wouldn’t have hit so many problems.

I've discovered the same when implementing the theme toggle on webweekly.email. Regardless, it's a good read on the BFCache, pageshow events and how you can work around aggressive but very welcome browser caching behavior.

Tweak the cache

I remember when MDN got a little style overhaul last year, but I didn't realize that it was an entire rebuild to drop React. The team responsible realized that React might not have been the best choice because:

Our React app was merely a wrapper around our static content.

MDN is a massive collection of docs pages with occasional demo or UI sprinkles. So what are they doing now? The new (current?) MDN is built with a custom render pipeline and Lit web components.

The article is a great read to learn more!

Consider simple architecture

Once a year, WebAIM analyzes the top 1,000,000 home pages for accessibility issues and it's been looking good (or at least better) for a while but now the overall state of the web is getting worse again.

There are now more errors, more ARIA usage and an overall worse experience.

Home pages with ARIA present had significantly more errors (59.1 on average) than pages without ARIA (42 on average)

This makes me sad.

Look at sad numbers

Let's pretend I didn't play this game for fifteen minutes and still only made it to 62 jumps. 😅

Jump!

Do you remember the times when some companies rebuild the entire DOM for better performance? Those were wild times (and obviously a pretty bad idea). But check this out, there's a new proposal to render HTML into the canvas element. It's pretty wild!

Granted, this is very cutting edge (Chrome Canary with a flag) and canvas stuff can involve a lot of heavy math, Matt shared some very fancy examples of what you can do with this.

Render HTML

This week I learned that you can use the built-in Intl object to localize and format numbers with units! I love love love it!

Format your numbers

And side note: Intl is one of the hidden gems that we should all be using more. Kilian published a long guide explaining many more things you can do with powerful JS API.

If you open this post, make sure to read it to the end.

Safari 26.4 started to support name-only container queries (@container [name] {} without a condition). Chris discovered that name-only container queries could be used for CSS scoping similar to how CSS modules work. It's a valid and creative take, but here's the kicker: Miriam shared that you can do similar things with CSS @scope (the post was updated later on).

I'm still not 100% on the CSS scoping train, but this post definitely included some good-to-know details!

Scope your styles

It's wild that we couldn't lazy load videos until now, isn't it? Scott and his team thought the same and fixed that by contributing to Webkit and Firefox. I love all of this. If you're curious about when it'll land and what needs to be considered when lazy loading videos, this post is golden!

Delay all the heavy videos

From the unlimited MDN knowledge archive...

Did you know that there's a JavaScript API to listen to reports like the usage of deprecated browser features? Now you do!

Read the reports!

You've probably seen these SVG effects that look like a line or signature is drawn. The most common solution to build these animations is to combine stroke-dashoffset and stroke-dasharray. And they work fine, but usually rely on some magic numbers that depend on the SVG path length (e.g. stroke-dasharray: 7151;). A while ago I learned that pathLength can make everything a whole lot easier.

Animate all the paths

Disclaimer: sizes=auto isn't on the baseline yet, but I'm so excited about it so that I'll plug it already. Responsive images are tough and many people implement them incorrectly. With sizes=auto we can provide the image sizes and let the browser figure out the rest.

There's one catch: images need to be lazy loaded so that the browser did layout already. Still, I think this is a much needed addition.

Where are we browser support wise:

• ✅ Chromium already supports the attribute
• ⌛ Firefox will support it in two weeks with 150
• ⌛ Webkit shipped it in tech preview

Great times ahead!

• SacDeNoeuds/yawn – A Frontend framework built on async iterables.
• kamranahmedse/slim – Give your localhost a local or public URL.
• unmta/emailmd – Render markdown into email-safe HTML.

If you're looking for a quick way to mock or prototype UIs or service architectures, Wiretext is a quick app to rock all these ASCII characters. I love the look of these diagrams!

Draw with text

Eric got into the complex topic of keyboard shortcuts and accessibility and this sentence is an absolute banger, isn't it?

❤️ If so, join 40 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Have you heard about the CSS sticky spec change? Or have you used the position-visibility property before? And are you aware of the new JavaScript features landing in 2026?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

A big thank you and a huge bag of karma points go to "vaupeh" this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

You can support Web Weekly on Patreon or GitHub Sponsors.

• The last quiet thing → "Nothing you own is finished. Everything exists in a state of permanent incompletion, permanently needing."
• Don't Let AI Write For You → "Letting an LLM write for you is like paying somebody to work out for you."
• AI Shrinks the Team, Not the Problem → "Reducing the team [because of AI] does not reduce the number of things that can go wrong. It reduces the number of people available to own them."

Short'n'sweet: David explains how CSS subgrid (available across browsers since September 2023) helps with laying out content coming from CMS systems.

Lay out!

While reading Absorbing unknown Into the Type Realm I learned a new TypeScript thing. Usually, I'm going for type guards to narrow types, but with assertion functions (asserts data is Something) you can narrow the type inside of the current scope. No ifs or anything like that needed. Good stuff!

Narrow things down!

CSS has been so much on fire that it sometimes feels as if nothing is happening in JavaScript land. Chris was so kind and summarized what you need to know this year!

Stay up to date!

The pretext project is only one month old and already gained 40k GitHub stars. People are excited. Why?

pretext is a "JavaScript/TypeScript library for multiline text measurement & layout". That means you can give it some text and it'll figure out how much space the text will need. Under the hood it normalizes the input text and then uses canvas.measureText() to get the size and layout information. I didn't even know that measureText is a thing in canvas land.

Now, some of the demos are very impressive but I agree a lot with Donnie's take. Just because something can be done in JS, it doesn't mean it needs to be done with it. And also, CSS is moving fast, some of the layout issues might be resolved sooner than later if enough people show interest. What's your take?

Be fancy

Bramus released a new npm package full of view transition utilities. The GitHub docs are also worth a read if you want to learn more about view transition inner workings. For example, I didn't know that you can pause view transitions.

Level up your transition game

Side note: while playing around with all these snippets I've also run into the situation of view transitions blocking document interactions. Luckily, Bramus had a fix for that one, too.

I must admit this was harder than I thought! Are you certain you can differentiate real from made up CSS properties?

Decide!

More and more content is primarily generated without any human reviewing things. The human part is more at danger in our beloved web. To counter this movement, I've seen multiple people implement the human.json protocol. People can vouch for each other so that we can build a network of trust. Should we all get on board?

Trust your fellow webmaster

The light-dark() CSS function was limited to color values but very soon will work for images in CSS, too. It'll land in Chromium and Firefox soon. Let's see when Safari joins the party.

Flip some images

A nine-year-old CSS spec issue has been resolved and position: sticky now tracks the nearest scrolling container per axis. So, if you want to stick an element to a scroll container and the document, this will soon be possible. As usual, today, we're still in Chromium only land. Still, great that this landed!

Stick!

Now, that's cool! Edge is experimenting with a new way to track and report low-quality network resources. The initial criteria are uncompressed text resources, images larger than 200 kB and data URLs larger than 100 kB. I'm game!

Watch out

Harry has a gift for publishing reference pieces. This time the new article is about CSS containment (contain, content-visibility or contain-intrinsic-size). It's a stellar piece and if you wonder how to save the browser some rendering and recalculation work, you should check it out!

Save some work

CSS containment can be used in other situations, too, though. Ryan explained how contain helped with a tricky layout situation.

From the unlimited MDN knowledge archive...

Now that anchor positioning works across browsers, do you know that there's a CSS property to control when an anchored element is shown?

Hide and seek

Did you know that you can't set all the headers in your "common" fetch calls?

Stay in your lane

I'm not sure I'll ever use this but if you're into typography and fancy text layouts, you might dig it. The text-indent values hanging and each-line are now supported across browsers.

Move your text around

• jaywcjlove/awesome-mac – A collection of high-quality macOS software.
• unhappychoice/gitlogue – Turn your Git history into a living, animated story.
• zhw2590582/ArtPlayer – A modern and full featured HTML5 video player.

If you're looking for a quick way to pixelate images, this tiny helper is for you!

Pixelate

So true.

❤️ If so, join 40 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Today I learned that Intl allows you to format numbers with currencies or units!

console.log(
  new Intl.NumberFormat("de-DE", { 
    style: "currency", 
    currency: "EUR" 
  }).format(123456789),
); // "123.456.789,00 €"

console.log(
  new Intl.NumberFormat("ja-JP", { 
    style: "currency", 
    currency: "JPY" 
  }).format(123456789),
); // "￥123,456,789"

console.log(
  new Intl.NumberFormat("pt-PT", {
    style: "unit",
    unit: "kilometer-per-hour",
  }).format(50),
); // "50 km/h"

console.log(
  new Intl.NumberFormat('fr-FR', {
    style: 'unit',
    unit: 'kilobyte',
    unitDisplay: 'long',
  }).format(123456)
); // "123 456 kilooctets"

Did you notice how the Japanese Yen symbol (￥) moved in front of the numbers? Or that, apparently, French folks translate the unit kilobyte? Fun!

Whenever you put currency/unit logic into userland JavaScript, don't. It's all baked into the language these days.

Tip: here's the list of supported units.

I've just read Absorbing unknown Into the Type Realm. It's a good read, check it out.

However I also learned an important difference between TypeScript type guards and assertion functions. And to be fair, I didn't even know assertion functions were a thing in TypeScript.

Let's look at a standard type guard.

ts
interface User {
  name: string;
}
 
// standard type guard
function isUser(value: unknown): value is User {
  return typeof value === "object" && value !== null && "name" in value;
}
 
// let's pretend JSON.parse is an unknown data source
const data = JSON.parse('{"name": "Stefan"}');
 
if (isUser(data)) {
  data.name.toUpperCase(); // narrowed to User inside of condition scope
   
const data: User
}
 
data;
 
const data: any

If you receive data from an unknown source (most likely via fetch or HTTP), TypeScript doesn't know the types. To be on the safe side, you should bring in a validation library like Zod but if you only care about the types, a classic type guard might do the trick.

When you check the types above you see that thanks to the isUser type guard, data is of type User inside the condition scope. Great! But if you leave the scope you'll see that data is again back at any. Booh!

Now check this out!

ts
interface User {
  name: string;
}
 
// assertion function
function assertIsUser(value: unknown): asserts value is User {
  if (typeof value !== "object" || value === null || !("name" in value)) {
    throw new Error("Expected a User");
  }
}
 
// let's pretend JSON.parse is an unknown data source
const data = JSON.parse('{"name": "Stefan"}');
 
assertIsUser(data); // throws if not a User
 
data.name.toUpperCase(); // narrowed to User after assertion
 
const data: User

If you now change the type guard to be an assertion function with asserts value is User the type will be adjusted for the rest of the current scope. The contract is: if this function doesn't throw, apply the type to the current scope.

Good stuff!

Have you heard of focusgroup? Did you try aliases in Node.js imports already? Or do you know that CSS is available in JavaScript?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

A big thank you and a huge bag of karma points go to Jonathan this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! My little side project is now supported by 40 people. This makes me incredibly happy (and proud). ❤️

You can support Web Weekly on Patreon or GitHub Sponsors.

And also, I messed up a link last week. I clicked all the links before sending the email, but because last week was an "unofficial Temami edition", I didn't recognize that I linked to the wrong post. Here's the correct link to anchor positioning issues. Sorry!

I didn't discover good "No code" articles this week. Did you read something great beyond coding lately? I'd love to read it, too!

With Chrome 147 (planned for Mar 25), the contrast-color() function will be newly available across all browsers. Theoretically, the function lets you throw a color in and get an accessible contrast color out. It's a great idea, but contrast-color() is limited to returning black or white right now.

Una describes how to work around this limitation.

Mix all the colors

Granted, Rob's article is very long, but the intro paragraphs make it worth reading already.

I've seen the attachInternals() method quite a few times in custom elements materials, but I never really understood what it's about.

Now I do, and it's quite cool if you're dealing with web components. Thanks, Rob!

Attach your inputs

There's a new HTML feature shipping behind a flag in Chromium: focusgroup. The idea is that the attribute will make it easier to build components that require custom focus handling.

It's also wild that a focusgroup is supposed to set the correct ARIA roles automatically. If this works, maybe that will make the web a bit more accessible? I've heard some skeptical voices already, though.

Browsers are asking for feedback, so now is your chance!

Test it out!

You've probably written this snippet many times by now. 👆 Even though view transitions have been cross-browser supported for a while, you still have to check every time if they're available with if (document.startViewTransition). What if you didn't have to do that? Bramus released a non-visual polyfill.

Remove some ifs

Today I learned about JND: Just Noticeable Difference. Keith built a fun little game for your lunch break. To what point can you differentiate the colors?

Look closely

You can load JSON files via import attributes (that's the fancy with syntax) across modern browsers for roughly a year now. But how do import attributes affect caching? And are they really that much better than what bundlers already provided for years? Matt has some answers.

Import your JSON

I know that I plugged a great-looking select last week already, but man... I'm very much into these new ways of customizing select elements. Patrick's article comes with many explanations this week.

Select!

Disclaimer: at-rule() is far from being cross-browser supported and will only hit Chrome in version 148 (we're currently at 146), but it's still cool that we'll be able to check support for at-rules (e.g. @starting-style) in the future.

Detect

Do you know that you can set custom import paths in vanilla Node.js? If not, John explains how they work. He's kind of skeptical about the idea, but I'm really digging it!

Shorten your imports

From the unlimited MDN knowledge archive...

Here are two fun ones. First, do you know that CSS exists in JavaScript? And second, how cool is it that you can convert one unit into another?

Convert

Disclaimer: .to() doesn't work in all browsers yet but will land in Firefox soon!

Here's a quick learning from eight years ago: did you know that you can nest svg elements? Now you do!

Nest all these SVGs

With Firefox 148, the CSS shape() function entered the baseline, which means that you can now pair offset-path or clip-path with a function that understands CSS. That's right! No more SVG syntax fiddling!

Shape!

• arktypeio/arktype – A TypeScript validator that's optimized from editor to runtime.
• mcollina/snipgrapher – A CLI to generate image snippets from code files.
• jalonsogo/tui-studio – A visual design tool for building Terminal User Interfaces.

As a WW subscriber, you should be pretty well aware of what's going on with browser features and the baseline. If the newsletter isn't enough, BaseWatch looks great!

Stay up to date

Here are some wise words from one of my favorite bloggers.

❤️ If so, join 40 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself — mentally, physically, and emotionally.

I'll see you next week! 👋

Are you struggling to understand why your anchor positioning doesn't work? Did you know that there's a window.stop() method? And did you ever wonder how to apply a theme color to Safari?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.

A huge thank you and a huge bag of karma points go to Paweł, Johann, and Corey this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

If you enjoy Web Weekly, too, join 39 supporters on Patreon or GitHub Sponsors. It really makes a difference!

And if you learned something from this week's edition, share Web Weekly with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 LinkedIn

A quick "repost" really helps the newsletter out. Thank you! ❤️

• Don't Make Me Talk to Your Chatbot → "It's fine that people talk to chatbots, but they should not expect me to listen to theirs".
• Nobody Gets Promoted for Simplicity → "Nobody gets promoted for the complexity they avoided".

Starting in September, Chrome will ship a new version every two weeks, and I already see these version numbers going through the roof. But honestly, more updates are a good thing.

Catch up

The theme-color meta element used to color Safari's frame and configure a color for progressive web apps.

Turns out, Safari dropped the theme color support for "normal" websites. And yet, sometimes the Safari frame is colored in website colors.

What is going on? Martin investigated Safari's behavior.

Color the Safari frame

Disclaimer: customizable select elements are still a Chromium-only thing, but man, look at this beauty!

Select with style

Style queries aren't supported in Firefox yet, so I must say that I didn't really play with them yet. But today I learned there's a difference between using : and =.

Whoot? Big thanks go to Temani for sharing yet another CSS pro tip!

Compare styles

I still haven't fully adopted anchor positioning, but I figured there are many edge cases, and sometimes I'm also just scratching my head. Temani covered many reasons why the anchors might not show up where you expect them to.

Master all these anchors

And if you want to see Chris rant a bit, he also talks about common anchor positioning mistakes.

And speaking of Chris, he also played with the new geolocation element (currently Chrome-only, and I covered it six weeks ago) and found some "interesting" CSS quirks of this new native element.

Style the location

AMOU is a map of memories. People can share memories from a certain place. I've spent quite some time discovering all these unknown memories in my neighborhood. ❤️

Discover memories

I plugged npmx in a previous Web Weekly, and while I thought the project was cool, I secretly didn't have high hopes of me using it. But I do! And the team is building a nice community around the project. Good stuff!

Check packages with style

Patrick tried to find a CSS-only way to store the information of whether an element was previously focused. The solution is hacky but also... elegant?

Remember focus

Frank claims that I don't know HTML tables, and turns out he's right. This is a massive read, but I'm sure you'll learn a thing or two. I mean, did you know that there's a TOM (table object model)?

Level up your table game

Temani and Daniel get into an unofficial competition about unconventional ways to select the :root element and some of these approaches made me smile. I love CSS.

• The Hidden Selectors of The HTML Element
• The Different Ways to Select html in CSS

From the unlimited MDN knowledge archive...

Here's a fun one: did you know that there's a global stop() method? Well, now you do!

Stop!

Did you know that npm supports an overrides key in your package.json? If one of your dependencies is pulling in something nasty, you can fix the dependency right from the root level. Handy!

Fix your deps

With Firefox 148 and Safari 26, Trusted Types entered the baseline! 🎉 What are they for?

Whenever you're dealing with user-generated content, you can enforce content to pass a sanitization step before injecting it into the DOM. You can enforce this via CSP, too. Pretty cool!

Be safe

• lokesh/color-thief – Grab the color palette from an image using just JavaScript. The demo site is pretty nice!
• searlsco/posse_party – Crossposting content from your site to a variety of social media platforms.
• webpro-nl/unbarrelify – Barrel file removal tool for JavaScript & TypeScript.

I can't be the only person who tries to transform a png to an svg at least once a month. I played with this converter a bit, and the results looked promising.

Convert

Here's Matteo on everyone's "favorite" topic.

❤️ If so, join 39 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Have you heard of Chrome's soft navigations? Do you parse the sec-fetch header to prevent CSRF? Or do you know that elements with overflow: hidden are still scrollable?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

• Developing Taste → "Expose yourself to great work, this way you’ll learn how greatness looks and feels like."
• Why Am I Doing the Thinking for You? → "when you ask someone 'what do you think?' without sharing what you think, you’re not collaborating, but more like outsourcing?"

This is probably old news for all the performance experts, but I learned this week that Chrome has been experimenting with a new navigation type for a while: soft navigations.

The goal is to gather common web vitals across JS-navigations in single-page apps. I'm game!

Measure!

Just in case you want to be the person quoting UX laws in your next interface discussion, Raphael put together a nice guide with interactive examples.

Follow the law

Firefox became the first browser shipping the new setHTML method. What's wrong with good old innerHTML? innerHTML and older ways to change the DOM were all open to XSS attacks.

setHTML finally tries to fix this!

Don't allow XSS

Here's Juan sharing another way to center absolutely positioned elements in CSS.

I don't have anything else to say other than that centering things in CSS is a solved problem in 2026, don't you think?

Center everything

Side note: and if this post isn't enough, here's another post explaining how margin: auto can help with absolutely positioned elements, too.

Martin is a fairly famous code golfer and man... every time I see his work I'm blown away.

What's code golfing? When you're code golfing, you're trying to use the fewest possible characters. This is hard and complicated in itself already, but Martin pushed this even further.

Do you see this ASCII globe there? 👆 This globe is the script that renders itself. Unbelievable!

Here are my favorites:

• an ASCII fire
• the mentioned ASCII world
• an ASCII clock

Be amazed

Well, did you know that browsers remove newlines and tabs from link URLs? I definitely didn't!

Break things apart

Cross-Site Request Forgery (CSRF) is an attack in which an attacker tricks a user's browser into making an unintended request to a site where they might be logged in. If someone is on evil.com and the browser makes a POST request to my-bank.com, it could go through because all cookies are sent with it. Not good.

To protect yourself, many sites implement CSRF tokens to ensure that the user is really on the site when the request is made. But there's a header that we can use since 2023: sec-fetch.

Miguel shared this discovery in December and the MDN docs on CSRF are also quite good. Enjoy and be safe!

I shared that customizable selects are coming to the web in Web Weekly 183. They're still Chromium only, though.

Now, Temani pushed the concept to the next level and I'll let you decide if you would call this experience a select box.

Pick a fruit!

From the unlimited MDN knowledge archive...

Here's a little party trick: do you know that input elements with a picker like select or date inputs also support :open? You're welcome!

Style the open

Side note: while looking at :open I discovered that Safari still doesn't support it? Not even for details elements? I'm a bit disappointed...

Do you know that elements with overflow: hidden set can still be scrolled? If you don't, check out the blog to learn which property prevents scrolling.

Clip it!

Firefox started to support the relative <length> CSS values: rcap, rch, rex and ric.

Granted, these units are a bit niche, because how often do you need to style something based on the width of the glyph 0 (rch)? But it's still good to know they exist.

And cap isn't actually that exotic: here's how the cap unit can help with vertical alignment.

Use the fancy relatives

If you're based in the Netherlands and would like to go to the JS Nation conference (June 11 & June 15), I've got one ticket to give away for free! Hit reply and let me know! And even if you don't win, Web Weekly readers get 10% off with the code WEBWEEKLY. 🎉

• thisiskps/fetch-network-simulator – A request/response network behavior simulator for frontend applications.
• dlvhdr/diffnav – A git diff pager with a file tree, à la GitHub.
• edge-js/edge – Node.js template engine with a breath of fresh air.

CruxVis isn't a new tool, but I'm sure some of you haven't seen it.

If you want to check a site's Core Web Vitals coming from real users via Crux, the site offers quick-to-use graphs and visualizations.

Check your Vitals

One might think Ibrahim has a point here. 🫣

If so, join 37 other Web Weekly supporters and earn a huge bag of karma points by supporting Web Weekly via Patreon or GitHub Sponsors. ❤️

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Today I learned something groundbreaking about URLs!

You know that when you're templating HTML and you're dealing with attribute values, it might make sense to break things into pieces. I like to have one attribute per line and sometimes even break the attribute values into multiple lines.

Long URLs are always tricky, because you can't break these apart...

<a class="something something_else 
          something_very_long something_even_longer"
   href="https://www.example-blog-about-everything-under-the-sun.com/2026/03/03/the-ultimate-comprehensive-and-absolutely-definitive-guide-to-understanding-why-your-css-layout-breaks-at-3am-when-you-least-expect-it-and-how-to-fix-it-once-and-for-all-without-losing-your-sanity-or-your-will-to-live-as-a-frontend-developer-in-the-modern-web-ecosystem-featuring-flexbox-grid-and-container-queries">
  Long link
</a>

Or can you?

Daniel shared that line breaks and tabs will actually be removed from URLs. Excuse me?!

Here's the URL parsing WHATWG spec:

2. If input contains any ASCII tab or newline, invalid-URL-unit validation error.
3. Remove all ASCII tab or newline from input.

So, browsers discover newlines or tabs in URLs, recognize them as "invalid-URL-unit" errors, and then remove the invalid characters to get the job done. Nice job, browsers — I love it!

Here's a rendred link including a URL with tabs and newlines for you to inspect.

[Interactive component: visit the article to see it...]

Tabs and newslines are removed and things just work and because we're looking at the WHATWG spec in action here, the characters will be remove in JavaScript, too!

const urlWithTabsAndNewlines = `https://www.	
stefanjudis.
com`;

const normalizedUrl = new URL(urlWithTabsAndNewlines);
console.log(
  normalizedUrl.href === urlWithTabsAndNewlines
); // false

That's pretty wild, isn't it?

Check Daniel's post if you want to learn more!

If you follow this blog for a while, you might know that I focus on tech topics and try to be very rational and neutral in my writing. I usually am too afraid of "pissing off". Maybe, it's the current state of the world or that I'm just getting older, but certain things just get to me and I want to establish writing as a healthy coping mechanism.

So! I've just read a post about Anthropic's recent pricing changes. For context, you can't use the Claude flat rate for the Anthropic API anymore. If you want to use the simple (and reasonably cheap) Claude Code pricing you must use Anthropic's products and can't use other agents/products/tools with the one-fits-all offer.

Anthropic is now enforcing and limiting people to use their products as intended. Outrageous, right?

I won't link to the post, but the author is very upset about this change. However, there are things that stand out.

And have you even seen Dario speak with reporters? Like, he doesn't make eye contact, and he talks really fast. I don't know. I just don't like him. It's an absolute disgrace.

The author mocks Anthropic's CEO for how he looks and speaks. Honestly, you can think of AI and the new world whatever you wish, and I'm also not aligned with all the content theft, ethical problems and the overall economic shift. Frankly, I'm beyond scared about the future. But blogging about not liking how someone speaks or looks is just a very low low. I get that the author is furious and frustrated, but sitting down to write a blog post explaining how and why you don't like how a person looks tells more about you than the person in question.

The following paragraph triggered me to write this post.

I want Anthropic's product at other companies' prices, and I want to be able to use it how I want to use it. Anthropic owes me that.

That's a lot of demands and I really don't understand how people can feel like a company owes them something...

I've been watching this privileged tech community entitlement for a while and it has always been rubbing me the wrong way. Regardless if it's about Tailwind, Anthropic or any other free or paid project. Things are simple: nobody owes you anything.

Let me give a few examples:

If you use free software, nobody owes you a new feature or "critical" bugfix. You can't get a free sandwich and then make demands. Surely you can provide feedback, but no one is obliged to act on it. It's a free sandwich after all.

If you take the time to open a PR in a GitHub repo, nobody owes you a review. Life's busy. Maintainers burn out. If your PR is stale you can easily fork the project, republish (if the licence permits it) or use something else. That's what open source is about.

If you tag or reply to someone on social media, nobody owes you a reply. Especially, if you don't know each other, why would someone owe an internet stranger mental capacity?

If a company offers a free tier, nobody owes you keeping it free. Building products is hard. Maintaining products is even harder. People need to make a living. Of course, this situation sucks if you relied on something being free, but again, nobody owes you anything. Especially, if it's free.

If a company requires you to follow their terms of service, the company doesn't owe you anything. You pay for a service. If the service doesn't meet your expectations, use something else. Nobody forces you to use a paid product.

I totally understand that all these scenarios suck on very different scales. Sometimes things aren't black and white, either, and everybody has the right to be angry about anything.

But in a world where nothing is guaranteed anymore, why do people think they're owed something? I just don't get it.

Have you ever struggled with lazy loading videos? Or have you used CSS zoom before? And do you know what Map.getOrInsertComputed does?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are seven more songs left in the queue.

This Web Weekly turned out very beefy already, so I'll keep the intro short. I discovered modern.css and it's outstanding.

The site lists old practices next to their modern counterparts. I'm sure you'll learn some new tricks by simply browsing around. Highly recommended!

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

• On screwing up → "Managers will forgive mistakes, but they won't forgive being made to look like a fool".
• 14 More lessons from 14 years at Google → "Most meetings fail not because they're unnecessary, but because they're disguised journaling".
• The Unbearable Joy of Sitting Alone in a Café → "When you let your thoughts wander, they take you on a journey you'll never think possible".

• Notes on relying on the ARIA Authoring Practices Guide
• Nobody owes you anything

Since I doxed my inbox two weeks ago asking for more replies, I've been having many nice email conversations. And because I enjoy this, let's keep the housekeeping going for a bit longer.

Question this week: many people told me that Web Weekly is a bit too long at times. I can totally relate to this. And frankly, writing Web Weekly is a ton of work.

So, what would you cut? I'm torn because I actually like it as is. Reply and let me know!

Oh and a quick reminder: Web Weekly is open for sponsorships. If you want to reach 6.5k developers, you know what to do!

If you want to spice up your list styling going beyond some bullets or numbers, Richard dropped a massive article explaining ::marker, @counter-style and symbols(). My highlight: I had forgotten that list-style-position is a thing...

List with style

I've seen the zoom property before but I didn't realize that it can actually be pretty dang useful. If you want to learn more about the difference between zoom and scale, check out this demo on the blog.

Zoom!

If you had told me that one day I'd be excited about a property called border-shape, I wouldn't have believed you. And yet, here we are. Una shared the new CSS property coming to Chrome that allows you to actually "shape" elements.

Unlike clip-path, which simply masks an element, border-shape actually redefines the "box" itself. When you apply a shape to a border, the background, the border-image, focus outline, and the box-shadow all follow that new geometry.

Shape the web

Short and sweet: Matt explains why Error.isError is the way to go for error checking.

Check the error

Did you know that these "emojis" are called Kaomoji? "Kaomoji" is a mix of the Japanese words "kao" 顔 (face) and "moji" 文字(character). Today I learned. And if you want to snatch some of the funky faces to look cool, that's what the Kaomoji Cool Club is about!

Express yourself with Unicode

Scott and his team at Squarespace are working on bringing loading="lazy" to video and audio elements, and it's wild that we didn't have this in 2026, isn't it?

Defer the heavy load

Side note: Scott was also behind pushing browser vendors to add responsive video support, and I honestly think that his "little side projects" are very inspiring.

Josh got into the topic of image sprites which, I must admit, I haven't used in at least a decade. But because Josh's posts are always so much fun to read and he explains object-fit, object-position and the animation step() function, it's definitely worth a read!

Remember sprites

You probably know about caniuse.com. But do you know about caniemail.com? Or canidev.tools, whocanuse.com and cssdb.org?

I love a good list, and canwe.dev lists all these utility webdev sites.

Get some resources

If you care about web performance, you probably check for render-blocking resources. Chrome supports a handy JS API to discover all these offenders.

And there's now a new column in the network panel giving you this information.

From the unlimited MDN knowledge archive...

Unfortunately, text-box-trim doesn't work in Firefox yet, but man, I can't wait for this to work everywhere because it will make vertical alignment so much easier!

Align

Did you know that text-transform: uppercase can affect how screen readers read out the content? Well, now you do!

Be aware

JavaScript maps got two new methods to access entries while providing fallback values: getOrInsert and getOrInsertComputed. The method names are a bit too wordy for my taste, but I dig that getOrInsertComputed allows you to evaluate the fallback lazily.

• auroris/logo-soup – A JS library to normalize and harmonize logo visuals.
• seflless/slowmo – Slow down, pause, or speed up time of any web content.
• Veirt/weathr – A terminal weather app with ASCII animation.

If you're looking for a quick way to update and tweak SVG files in code, svg.studio will help you out!

Tweak all the SVGs

Nolan shared his thoughts on how AI might be changing programming, and of course, I can relate. I love coding. I love the puzzling part and am excited about learning things. But will all these things still matter? We'll find out soon enough.

❤️ If so, join 37 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

You probably know that you can use the scale function scale() or even just scale property to transform and change an element's size.

The thing with scale is that it only changes visual appearance and the layout size of the target element remains the same.

Today I learned there's also the zoom property. zoom "really" scales the element and its layout. Check this out!

[Interactive component: visit the article to see it...]

What's the browser support?

MDN Compat Data (source)

Browser support info for zoom

1	1	12	126	126	3.1	3	1.5	1

It's pretty green!

I can totally see constrained situations where this can come in handy, but you should avoid animating it because browsers probably don't appreciate the layout shift.

Eric wrote about how to instruct an LLM to fetch the "valuable stuff" from the ARIA Authoring Practices Guide (APG). The article includes some points about APG itself that are worth highlighting. And what's the valuable stuff?

If you don't know the Authoring Practice Guide, here's what you'll see after finding it online looking for ARIA patterns.

As you see above, the guide is supposed to teach how to use accessibility semantics defined by the Accessible Rich Internet Application (ARIA). And it looks very authoritative. When I first discovered it after some googling, I treated this guide as the source of truth because it lives under w3.org and looks very official. I learned early on that using ARIA correctly is hard; and thought that APG must be the place showing me how to do ARIA correctly.

It sort of is but not really.

Lately, I've seen many accessibility folks raise concerns about APG, and Eric's article echoes some of them.

The APG was created to demonstrate ARIA's capabilities. Because of this, it disproportionately favors ARIA in its code examples.

The guide is there to showcase ARIA usage patterns and if people want to showcase something they might overuse it at times. This is true for ARIA usage in the APG, too.

The APG was also not created to serve as a pattern library, design system, or single source of truth for the "right way" to make something. Unfortunately, a lot of people treat it this way.

I understand Eric's point, but I also can't blame people for treating the guide as "the right way". The home page literally says that "APG provides design patterns and functional examples". It's hosted on w3.org. It looks very official. If there's a line between "a collection of design patterns" and a "pattern library" at all, it's a very thin one.

Of course people treat the Authoring Practice Guide as the right way to do things — when I discovered it, I did, too.

Recall here that the original reason for APG code is to be a showpiece for how ARIA could hypothetically be used. Because of this, it is not the APG's concern that ARIA does not have perfect support.

This is by far the biggest reason why I don't pretend to know when something is truly accessible. Nothing is ever fully accessible to everyone, and the world of assistive technology is huge. A single ARIA attribute might make things more accessible in theory, but who knows if it works across all browser-screen reader combinations.

The effort alone to verify that an ARIA pattern works well across assistive technologies is massive.

But what are the guide's valuable parts? Eric highlights the pattern names, "about this pattern" section and the keyboard interaction specification.

The pattern names. Having a standardized way to refer to a discrete piece of UI that is larger than any one company is highly beneficial.

The content contained in the "About This Pattern" section. This is what the discrete piece of UI does, and how it goes about doing it.

The content contained in the "Keyboard Interaction" section. This is how people who use assistive technology will expect things to work.

That's good to know!

So if you've been treating APG as the definitive source of truth, think again. Its examples demonstrate what ARIA can do, not necessarily what you should do.

It doesn't matter if you've discovered the ARIA Authoring Practices Guide or not, before reaching for a complex ARIA pattern found on the internet, the usual rules apply:

• Always start with native HTML: the first rule of ARIA is to use a native HTML element before adding ARIA. A <button> beats a <div role="button"> every time regardless of what's written in a fancy ARIA guide or what your LLM claims to be accessible.
• Test with assistive technology yourself: nothing beats firing up a screen reader and actually navigating your own UI. It's hard and time-consuming but you can't claim that something is accessible if you haven't tested it.
• Follow practitioners who do the testing: as you might know, I'm a huge fan of Adrian Roselli who constantly puts in the work of testing ARIA patterns with different assistive technology combination. He publishes findings on what actually works versus what the spec promises. Huge!

Edit: Eric (partly responsible for the Authoring Practices Guide) shared on Mastodon how the project evolved into what it is today.

Have you checked what's included in Interop 2026? Do you know about the using declaration in JavaScript? And are you excited about the new ways to style select elements?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are eight more songs left in the queue.

The biggest news this week was that the Interop 2026 initiatives were released. If you don't know, Interop is a cross-browser initiative to align on which web features should ship in the upcoming year. Generally it's good stuff and many appreciate browsers going into the same direction (even though not everybody agrees with the focus topics).

Last year's Interop included bangers like Anchor Positioning, View Transitions, and @scope, and the results were pretty good at the end of the year.

But what's included this year? Here's the full list from the WebKit blog.

I haven't had the time to dive in yet, but this looks like a decent list, and I might go deeper next week. I do miss sizes=auto for images, though.

But I'm not complaining, so let's get to the web dev goodies of this week!

Last week I asked you to reply to this email to check if it would improve this newsletter's open rate. And well... it was quite a week. I doxxed myself with around 60 emails hitting my inbox on the first day. Writing this newsletter sometimes feels a bit lonely, but it really reminded me of why I sit down every week. Having all these replies and conversations gave me a nice and fuzzy feeling!

Also, Mark, Michelle, Derek, Zoran, Evan, and Francis provided testimonials for the Web Weekly site, and Michal, Jason, and Jules started to support Web Weekly with a monthly coffee donation! A special thanks goes to all of you!

So, thank you all for reading along and if you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 LinkedIn

A quick "repost" really helps this indie newsletter reach more people. Thank you! ❤️

Look, I'm not saying that you should ever, ever use git-shitstorm, but the level of evilness really made me smile.

Don't be evil

• Performance Reviews Are the Scorecard of Capitalism → "If review season is the only time you hear feedback about your work, that's a problem."
• Notes on Not Posting → "The internet doesn't need you. It's good to be reminded of that once in a while."
• How I estimate work as a staff software engineer → "It is not possible to accurately estimate software work." 😱

Confession time: I'm still not using @layer even though it's been baseline supported since 2022. Manuel describes how to use CSS layers to deal with CSS reset specificity. Great trick!

Reset layer by layer

And speaking of styles not overwriting each other... with @scope entering the baseline, I could finally drop some odd class conventions so that my site's new custom components aren't clashing with the overall styles.

I love this! We can now drop <style> elements right into the page, use @scope, and the styles will be applied only to the surrounding container. Good stuff.

If you haven't used @scope, here's why you might want to prefer it over naming conventions.

Scope!

I read about the using declaration syntax in early JS proposals, but thanks to Matt, I learned that it actually works in Node.js 24 today. What's using, though?

With a little bit of JS trickery and well-known symbols, objects can be cleaned up when their variables go out of scope. There's no need for try/catch/finally or other dances.

Does it work in browsers, too? We're close. Safari has yet to join the party.

Use "using"

And if you want to go really deep into using, generators, and WeakSets/WeakMaps, Mat has you covered over on the Piccalilli blog.

Adam published a post pushing all the new web and CSS features to the limit. Granted, all this select sugar is mainly a Chrome-only thing right now, but this post feels like a reference piece of cutting-edge CSS in 2026.

Put some time on your calendar and explore ::picker-icon, ::checkmark, <selectedcontent>, @starting-style, and many more new features!

But what about Safari and Firefox? Well, they'll render good old select elements like the ones we've been dealing with for the last 10 years. So no big deal.

Select with style

And if this isn't enough select magic for you today, here's Brecht with selects that don't even look like selects anymore.

You might remember drawafish.com — an absolute internet classic. Today's wonderful weird web plug is the same thing, but with horses, music, and some CSS gradients.

Draw a horse

You might have noticed that the yearly Web Almanac didn't include a CSS chapter for a couple of years, because analyzing all that data is a ton of work and things are "a little complicated".

Bart, who maintains some popular CSS analyzers, took the matter into his own hands and "just" wrote the tooling to analyze the CSS of 100k popular domains. What an initiative! ❤️

If you're into fun stats like the biggest discovered stylesheet being 52MB, sites with 4,858 @support rules, or the highest found selector specificity being 146,1546,159, this post is for you.

Side note: of course, the report also includes useful stats like the one that @container queries were used on 10% of the crawled pages!

Analyze the web

If you're working in startup land like I do, you usually have a logo collection showing off how many big brands use your product somewhere on the marketing site. And most of the time, these logo clouds (lanes? soups?) look terrible because all the logos have different ratios, heights, and perceived weights.

Sanity released a React library to tame this problem using "the Proportional Image Normalization Formula". Use these words if you want to sound smart at parties.

Regardless, I added the component to the WW site and it works great!

Align all these icons

And if you prefer vanilla JS, here's a port of the algorithm.

Quick reminder: if you want to debug if and how certain resources affect rendering, Chrome DevTools allows you to throttle/block individual resources.

Block rendering

Last week I plugged the new text-scale element, which enables Chrome to also bump up the font size if folks have increased font size settings in their OS.

So far so good. Adrian had a deeper look at how this behavior could work across all browser engines. And things are complicated. Or as he puts it, a bit Frankenstyle.

Honor the OS settings

From the unlimited MDN knowledge archive...

I caught myself thinking "Right! There is a search element in HTML" this week. I had kind of forgotten about it (don't judge). So here's a reminder about the power of semantic HTML.

Search with semantics

Speaking of semantic markup, if you use elements like header or footer, they get some specific ARIA roles applied. It's banner for header elements and contentinfo for footer elements.

But do you know that these elements can change their role depending on where they're placed in the DOM? There's been a rather recent change to the ARIA spec, and browsers have started to ship it!

Check the roles

If you ever wanted to listen to a scroll end event, now you can. With Safari 26.2, scrollend entered the baseline!

And if colored scrollbars are your thing, scrollbar-color works across browsers now, too!

• williamtroup/Heat.js – A JavaScript library for generating interactive heatmaps.
• macaly/almostnode – Node.js in your browser. 👈 This is very cool!
• griddy-icons/griddy-icons – A lightweight icon library.

If you're slightly worried about npm and npmjs.com, you're not alone. Especially since the website doesn't seem to have received updates in ages. npmx is a modern alternative built by the community. The site looks very slick, and especially the file explorer is such an improvement!

It stands out that the project isn't much older than a month and has already gathered 178 contributors. Is this one of the rare examples showing that open source and community-led efforts work? I hope so!

Browse packages

I keep thinking about Anil's quote, it's such a smart and wise take.

❤️ If so, join 37 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself — mentally, physically, and emotionally.

I'll see you next week! 👋

Have you had a look at the new Navigation API (baseline newly available) already? Do you know about the formmethod and formaction HTML attributes? And are you as excited about custom invoker commands as I am?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.

Daniel blogged about highlight pseudo-elements. And if you don't know what they're about, don't worry, I learned a ton, too!

The commonly known one is probably ::selection to style the text someone marks on a page.

But wait for it, there are also a lot of funkier ones.

There's ::target-text (baseline newly available) which you can use to style highlights defined in the URL (#:~:text=hello):

Then there's ::highlight() (almost baseline ready — Firefox has some minor issues) to add custom text highlights to your page. You might now wonder when to use this feature; the <syntax-highlight /> element provides code highlights without the usual span soup.

There are also ::spelling-error and ::grammar-error. Unfortunately, these two aren't in the baseline yet.

And very new, hot off the press: there's now ::search-text to style "find in page" results, which just shipped in Chrome 144. There are no real docs for ::search-text yet. Check out my quick blog post to learn more.

I keep being amazed by how far CSS has come!

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Web Weekly's open rate is at 48% these days. Marketers would be jealous, but not too long ago it was in the mid-fifties. I'm not really concerned about it (yet), but Cassidy shared that her newsletter stats improved simply by asking people to reply to her emails. Even though I risk destroying my inbox with this ask, if you enjoy my tiny newsletter, could you reply to it? I'd really like to see if more replies will help Web Weekly get into the primary inbox.

Secondly, David reported that Web Weekly doesn't work well in the Spark email client. I'm considering going full-blown custom HTML for a while. Are there more issues? Do you have any troubles reading the email in your client? If so, you guessed it, hit reply and let me know!

And lastly, writing Web Weekly takes a lot of time. And with the AI-volution being in full swing, I sometimes wonder if there's a future for blogging, curating, and indie publishing. If you enjoy Web Weekly, earn yourself a huge bag of karma points and join 33 supporters on Patreon or GitHub Sponsors. It really makes a difference!

And that's it! Now, let's really get into some web stuff. This edition is jam-packed and full of good stuff!

I've just discovered detail.design, and it's nothing but amazing to look at well-crafted UI examples. That's the stuff I want to see on the web!

Look at eye candy

• "The Hidden Benefits of Quitting" → "If a longstanding commitment no longer feels rewarding to you, take those feelings seriously."
• "I waste so much time chasing people." → I love the company-internal anti-ghosting rule!
• "Invisible work" → "Watch who people actually rely on when something important needs to happen."

Our friends over at CodePen released 2025's most popular pens, and, of course, the collection is full of eye candy. I'm always amazed by the quality people put into "fiddling on CodePen" but without surprise, my favorites were the ones coming without three.js or GSAP.

• Check this CSS/SVG-only checkmark effect
• Learn how to implement inset border radius effects
• Use SVG to create holographic effects

And my absolute favorite is this electrified border; no JS required!

Be amazed

I usually list interesting GitHub projects at the end, but this JavaScript util is such a banger that it deserves its own spot! You know that when you use Promise.all you can wait for promises to resolve in parallel. However, things become interesting when the promises depend on each other.

Usually, you'd then need to untangle everything to get the optimal loading order. better-all does this for you! I love it!

If you want to ensure you never await your promises before passing them to Promise.all, use this handy parallelize TypeScript util!

Chris blogged about React's new ViewTransition element and dropped a link to a nifty view transition trick.

View transitions make it very easy to morph elements into a new state, but I still struggled creating custom enter/exit animations. Cyd shared how you can use :only-child for this. TIL!

Transition in and out

Invoker commands just recently went into the baseline. The command and commandfor attributes let you define interactivity with declarative HTML.

But what about custom functionality? Pawel shares an often overlooked feature, explaining that you can define custom commands with a double-dash (--do-something). Good stuff!

Add custom commands

When I first looked at this "project", I didn't really understand what was in front of me. I've got no idea who made this or why, but I'm fascinated by the ambition to use software to draw a horse in the most ridiculous ways. Chapeau!

Interact incorrectly

To be honest, I didn't know that most mobile browsers don't pick up when the default OS font size is bumped up. Josh shares the current state and how a new meta element can help make the web a bit more usable.

React to user preferences

First off, if you're not reading Adrian's blog, you definitely should. I'm thankful and amazed by the accessibility knowledge he shares for free and the effort he puts into testing web interfaces.

Now, if you ever wondered whether fancy text effects paired with countless span elements, aria-hidden, and aria-label have an impact on UX or A11y, this post might become a future reference piece!

Keep things accessible

Paul went on the journey to understand how radio buttons are rendered when using a "modern Frontend" (ShadCN and Radix) and well...

To understand how our radio buttons work I need to understand two separate component libraries and hundreds of lines of React.

Keep things simple

Nothing more to say than I just love reading people's CSS resets. Here's Declan's take, and it includes some smart tricks!

Get inspired

Quick'n'dirty; do you know that you can place form elements outside of the actual form? Kevin describes how to do it with a fieldset. But it works with input and button elements via the form attribute, too.

And speaking of buttons, here's another party trick: you can overwrite a form's action or endpoint via formaction and formmethod. This is wild, isn't it?

Anchor positioning entered the baseline last month, and while everyone is talking about popups, Roland shares how to use the feature to draw connections with pseudo-elements. That's some very funky CSS!

Anchor without using popups

FYI: the page widget shows that anchor positioning isn't in the baseline yet. I checked the demo in Chrome, Firefox, and Safari, and it renders fine.

From the unlimited MDN knowledge archive...

Do you know that there's a non-standard console method to add markers to the dev tools performance panel? It's primarily a Chrome thing, but I think that's where we're all debugging perf issues anyway, right?

Mark your timeline

Even though I blogged about it nine (!) years ago, I ran into a regular expression "bug" the other day. Do you know that . doesn't match all characters?

Match everything

With Firefox 147, the Navigation API entered the baseline. It's the successor to previous web platform features such as the History API and window.location. If you want to learn what it's about, Ollie has been secretly blogging about it!

• The navigate event
• Initiating navigations with the Navigation API
• Focus Management with the Navigation API
• Preventing same-document and cross-document navigation

All these posts will definitely get you up to speed!

• steipete/RepoBar – Yet another native GitHub repo status app.
• vicanso/zedis – A native Redis GUI built with Rust and GPUI.
• tldev/posturr – A macOS app that blurs your screen when you slouch.

If you wonder how you're tracked across the internet, "Exposed by default" provides all the information your browser shares about you. And it's a lot!

Understand your fingerprint

Carl shares how friction can sometimes be a good thing, and I agree with every word.

❤️ If so, join 33 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself — mentally, physically, and emotionally.

I'll see you next week! 👋

Chrome 144 shipped new CSS pseudo-elements!

::search-text {
  background: var(--blue);
  color: white;
}

::search-text:current {
  background: var(--blue-darker);
  color: white;
  text-decoration: currentColor solid underline;
}

The classes are so new that there aren't MDN pages yet, but I'm super excited about this tiny search improvement.

I'm pretty quick with hitting CMD + F because often I can't be bothered with using the provided site search (if there is one). However, sometimes it's hard to understand what's currently selected if you're looking at multiple matching substrings.

Today I learned, this is a Chrome/Firefox problem because Safari's "find in page" feature adds an overlay while highlighting the current substring.

This looks great, but I won't switch browsers for a better in-page search experience. So what about Chrome and Firefox?

::search-text allows you to style the found strings to follow your site's style. This is good stuff but not really helping with understanding the currently selected search string. This is where ::search-text:current comes into play. Check this out!

[Interactive component: visit the article to see it...]

If you're on Chrome 144 right now, search the page for "doggo"! The matching strings in the component above are matching my site's colors and you can now see which dog is the selected search entry. It doesn't look as fancy as the Safari overlay but I'll buy it!

Highlighting "find in page" entries isn't the most groundbreaking feature in the world, but I'm excited because I think it'll make my search experience way better! Apparently, there's no clear thumbs up from Mozilla yet, but let's hope that we'll get this improvement on the web.

If you want to dive deeper, here are some more resources:

• From Igalia: Find-in-Page Highlight Styling
• The search-text spec

Will you use Chrome's new <geolocation> HTML element? Are you excited about CSS anchor positioning going baseline? And do you know what a self-closing <div /> really does?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.

The new Web Almanac was released! If you don't know about the project: the team behind it takes all the data gathered from the HTTP Archive to analyze and understand the "state of the web". It's always super interesting to read and, almost as a tradition, I went over it and shared the interesting facts on Bluesky. Here are some fun ones.

The amount of third-party activity on the web is just mind-boggling...

The web is slow...

... and heavy. The median site is 2.3MB primarily to ship some text and images. Wild times!

If you're curious about more bite-sized stats, Geoff blogged about it, but either way:

Give the Almanac a read; it's a ton of work (kudos to all the authors and analysts) and you'll definitely learn something new!

A huge thank you and a huge bag of karma points go to Jens and Temani this week. Thank you for supporting indie publishing by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

If you enjoy Web Weekly, too, join 34 supporters on Patreon or GitHub Sponsors. It really makes a difference!

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 LinkedIn

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

David rants about the all-too-common "scroll-to-fade" technique. Thinking back, I've been lucky enough to never actually have to build one of these. I mean, why would you heavily delay showing precious content, right?

David's idea of the web developer community pretending that this feature is impossible to build made me smile, though.

We're all developers here. Can we collectively pretend scroll fade is technically impossible now?

Take care of scroll

It's funny though, because scroll-driven animations only recently entered the web. I guess it's like all fancy web dev things: let us all be responsible for the things we build.

• Life Happens at 1x Speed → "The irony is that consuming faster often means processing less."
• Good conversations have lots of doorknobs

Chrome is always at the forefront of releasing new things, but there have been some changes that really fix fundamental web issues. Bramus was on a roll and blogged about all of them.

If you're fighting the problem that 100vw doesn't consider scrollbars, a Chrome change landing in 145 might help.

You probably know the problem that when you open a modal dialog, you have to set overflow: hidden on the html element to prevent the underlying content from scrolling. It works but was never a good solution. Chrome now supports a better way to do it. Let's hope the other vendors follow suit quickly.

And lastly, an experimental version of vertical tabs for Chrome is in the making. 🎉

I know of exactly two websites that use sounds: one is Josh's blog and the other one is LinkedIn. Every time I upload a video on LinkedIn, it beeps, and honestly, I like it. Should there be more sound effects on the web?

Delight with sound

Lynn Fischer redesigns her site every year, and it's always great. The 2021 redesign was incredible (resize the window!). This year the redesign is a bit more subtle but still includes fun resize functionality using the ResizeObserver API.

Bounce!

I'm really no fan of Vercel, but their public interface guidelines include good stuff. Do you know of more companies putting these out? I'd love to learn about the UI quality standards of other big players.

Ship good stuff

There's this site where people can log in to draw pixel art on the maps of this world, and it's a wonderfully weird collection of pixel art. This is how my area looks! 👆

Be fascinated

I heard about the Custom Elements Manifest for the first time when Dave blogged about it, and it seems like it will improve the tooling around web components drastically.

If I understand this correctly, you can now scan, parse, and document your web components to display them in Storybook or have much-needed editor completions.

Document your web components

If you care about web performance, looking at Time to First Byte is often a first step. But what does this metric actually tell you? It turns out things are very complicated when you look at the first bytes. Robin provides massive detail and explains what you need to watch out for! Highly recommended.

And if learning about TTFB isn't enough, the post also includes some spiciness showing how "certain" companies fake a good TTFB metric with useless 103 Early Hints headers. Ouch.

Understand your metrics

Chrome 144 (released last week) ships a new HTML element. And what can I say? I'm all for more native elements!

Ask for permission

And if you're into declarative HTML, you should definitely check out Invoker Commands, which recently went into Baseline!

I thought I was pretty good on the Mac power user scale, but after reading these tidbits, I noticed that I need to level up. This tip, for example:

Hold ⌘ to interact with background windows without bringing them into focus.

I mean, what? How could I not know about this?

Be a power user

From the unlimited MDN knowledge archive...

Did you know that you can set the default operating system font via font-family: system-ui? There's also ui-serif, ui-sans-serif, ui-monospace, and ui-rounded; they're Safari-only, but useful if you're after the original Apple look.

Match the system

Trick question: can you imagine what the HTML above renders? Note the self-closing div elements.

I won't reveal the answer, but there's a high chance that you'll be very surprised.

Understand HTML

With Firefox 147 (released last week), CSS anchor positioning moved into cross-browser territory. If you were holding back on learning this incredible new CSS feature because the browser support wasn't there, now's the time to look into it!

And a good start is the CSS-Tricks reference guide.

Anchor

And if this guide is too long for you today, here's a very practical example from Chris.

• brunopulis/awesome-a11y – A curated list of accessibility resources.
• 3ru/eslint-plugin-baseline-js – ESLint plugin to enforce the JavaScript Baseline.
• argyleink/css-color-component – A modern color picker for the web with support for all spaces.

Do you remember all those wild CSS hacks we had to deal with a decade ago like *+html .ie7-only {} or ::-moz-selection? Luckily those times are mostly gone, but they'll probably live on forever in old CSS resets andaAbandoned sites. If you want to double-check whether you're shipping relics from the past, ReliCSS can help discover them.

Forget the past

Here's Jim (one of my favorite bloggers) with something I can very much stand behind in the new world of "no effort" creations and coding.

❤️ If so, join 34 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Do you use iterator helpers in JavaScript? Have you heard of scroll-triggered CSS animations? Are you excited about Temporal?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.

The State of HTML survey results are in! And let me tell you, if you read them you'll definitely discover some new web technology things.

For me this year, the web dev features that the fewest people know about was the most interesting. Let's have a look.

Only 10% have heard of rel="expect". In combination with blocking="render" the new attributes enable smooth cross-document view transitions. Cross-document view transitions are still a Chromium-only thing, but once they ship in more browsers, it'll be time to check out these new attributes.

17% have heard of the Intl.Segmenter API. If you're wrangling text, you should definitely check this one out! It works across browsers, too, and I wrote about it in November 2022 already.

And lastly, only 20% have heard of hidden="until-found". Chromium has shipped the property to make content discoverable via search for ages, and Firefox and Safari are slowly getting there.

Either way, have a look at the survey results. I'm sure you'll discover some new things to learn!

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 LinkedIn

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Sponsored

Measure Core Web Vitals in Safari and Firefox

For a long time, Google's Core Web Vitals metrics could only be measured in Chrome. But now the Largest Contentful Paint and Interaction to Next Paint metrics can both be measured in Firefox and Safari!

Learn more

Web Weekly is open for sponsorships. If you want to reach 6k developers, you know what to do!

A huge thank you and huge bag of karma points go to Nicolas this week. Thank you for supporting indie publishing by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

If you enjoy Web Weekly, too, join 33 supporters on Patreon or GitHub Sponsors. It really makes a difference!

Have you ever noticed that if you use text-decoration: underline, the underline isn't aligned with the actual text? Daniel said this about "the problem":

I say it's a problem "we've" had rather sheepishly because maybe you, like some users, don't actually care. But if you're a funny bunny like me (I think "designer" is the technical term) then it most likely drives you crazy.

This made me smile because it seems like I'm "some users."

Align the line

• The Trust Equation with some fancy MathML.
• How the hell are you supposed to have a career in tech in 2026? with the banger line "Don't let your job get in the way of your career."

I'm gonna be honest here; I've never thought about how some browser APIs work internally. How does navigator.geolocation figure out the current location? Or how do all these fancy new LLMs in Chrome work? Kilian shares that certain APIs have third-party dependencies.

Makes total sense, and yet I'm surprised because I didn't even think about this fact.

Evaluate browser APIs

I warned you last week; last year's Web Performance calendar was so high-quality that multiple articles will make it into Web Weekly.

If you're debugging web performance, you shouldn't miss out; check these articles for some Chrome performance debugging tricks:

• Tips for making the Performance Panel less overwhelming
• Chrome DevTools for Debugging Web Performance

Lea reflects on the current state of web dependencies, and frankly, it's not great. Could we improve the current state to work without heavy bundler dependencies? I hope so!

Fix the web

I must admit I'm still confused about when to use iterator helpers. Matt gives some good pointers on when and why to use them.

Iterate

There's nothing to see here, it's just some Pomeranians having a walk...

Walk the dog

Disclaimer: you'll need some time for this guide. Temani explains all the details when it comes to CSS alignment. Do you wonder why we need place-content, place-self, and place-items in CSS? If so, this guide is for you!

Align

That's some funky CSS, isn't it? Scroll-triggered animations will land in Chrome 145 (we're currently on 143). Granted, there aren't many materials besides this blog post and the specs yet, but Bramus shares details about what's coming!

Trigger

Here's Mat talking about date handling in JavaScript:

I dislike Date immensely.

I feel you, Mat. I really do! But there's something better coming: Temporal. The new API will make date handling so much better. Browser support isn't there yet (Firefox ships it and Chromium and WebKit are working on it), but if you want to peek into the bright future, this nicely nerdy post will get you started.

Add one more day

And if this isn't enough: Phil also shared how to handle durations with Temporal.

I'm still unsure whether I think the switch checkbox attribute shipped by Safari was a good idea. But hey, if you fancy it, there's a new polyfill available.

Switch the checkbox

I learned a new thing about ARIA. Do you know that elements containing landmark roles like menu change their children's semantics?

Watch the tree

From the unlimited MDN knowledge archive...

Did you know that you can adjust the size of lowercase letters relative to the size of uppercase letters with CSS? Now you do!

Adjust your fonts

Here's a quick Git tip: if you want to find when a code string entered the codebase, log -S is your friend!

Analyze the past

Big news for the declarative web: invoker commands entered the baseline! 🎉 command and commandfor now work across browsers. Huge!

Invoke

And if you're curious about a practical example: Aubrey shared how to control dialogs with the fancy invokers.

• schedule-x/schedule-x – A JavaScript event calendar.
• docmost/docmost – An open-source alternative to Confluence and Notion.
• tw93/Mole – Deep clean and optimize your Mac.

Checking markup semantics and accessibility can be tough when it's littered with classes, data attributes, and framework markers. The HTML De-crapulator helps out if you want to check the "pure" HTML.

Clean up

I plugged Ibrahim's post last week already, but this line is too good not to share again. If you need to discuss "work from home" policies at work, this post includes some strong arguments.

❤️ If so, join 33 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself—mentally, physically, and emotionally.

I'll see you next week! 👋

I've learned something new about ARIA today!

You probably know the first rule of ARIA:

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state, or property to make it accessible, then do so.

Unfortunately, many people slap ARIA attributes on elements without really understanding what they're doing. Adding role="menu" to navigation lists is one example that I see very often.

What's supposed to be a menu? Here's the ARIA spec:

A menu is a container, generally rendered as a popup or overlay, for a set of menu items that can be invoked to perform an action or function.

Making a list of navigation entries a menu isn't a good idea because a menu is supposed to include menu items that invoke actions or functions. However, that's not all.

Today I learned that adding ARIA attributes to elements can also change the semantics of the included elements. Here's the role="menu" example for a ul case.

[Interactive component: visit the article to see it...]

A "normal" list might be announced by a screen reader as "List (3 items)". It's helpful to know how many elements are in the list, right? A menu, though, must include menu items. And if you're not planning to also add elements with role="menuitem" to the menu, it'll be empty.

I quickly tested Chrome with VoiceOver on this CodePen:

• A normal list is announced as "List (3 items)".
• A list with role="menu" without included menuitems isn't announced at all. The list entries are read out loud.
• A list with role="menu" with included menuitems is announced as "Menu (3 items)".

Incorrect role="menu" usage can not only be confusing but might remove the list item count and nuke the item semantics.

Don't mess with ARIA unless you know what you're doing.

Check this post if you want to dive deeper into ARIA and what other roles affect their children semantics.

My Mac was running out of disk space the other day, and because I wasn't in the mood to hunt for custom solutions, I reached for Clean My Mac. It's a nice tool, and I knew it would do the job just fine. It freed up 60GB in about twenty minutes. Nice! Cleaning up disk space without any hassle was worth paying for.

A couple of days later, Nick sent out his "One tip a week" newsletter, and dang it... He shared Mole — a free open source CLI tool that does the same thing as Clean My Mac. Too late, Nick. Too late.

I haven't tried it, but I trust Nick's judgment here. You might want to give it a try if you're running low on disk space.

How do you know that you can trust someone?

I struggle to answer this question objectively because trust feels like such a subjective matter. Some people just don't "sit right with me," and that's okay. I also can't expect that I'm trusted and liked by everyone. That's okay, too.

But why is it so hard to explain why you trust someone or not?

Explaining feelings is hard for many, but I just discovered a helpful tool: the trust equation. The formula is like math for feelings — yay!

[Interactive component: visit the article to see it...]

Here's a direct quote from the post explaining what all the variables mean:

Credibility: What we say and the expertise we bring.

Reliability: What we do consistently.

Intimacy: How safe others feel sharing with us.

Self-Orientation: How much we appear to be acting in our own interest (lower is better).

Looking back at my own professional experience, this equation makes a ton of sense.

For me, the biggest kicker is reliability. I've worked with too many people promising the world while constantly failing to deliver. It drives me up the wall that overpromising is "normal" for some folks.

In close second place is self-orientation. I've also worked with the classic solo career climber and backstabber. It was clear that I was working with someone who had an agenda that didn't include me or the team. No fun, no trust.

Credibility and intimacy are also important, but not as important for me as the first two.

However, I guess the formula checks out, and I'll definitely come back to it when I need to evaluate why I don't trust someone.

Here's a quick and handy addition to the Firefox DevTools.

Whenever you debug CSS that's full of CSS variables, it becomes annoyingly hard to parse everything going on in the DevTools because the custom properties are cluttering :root or * or whatever.

Firefox 145 (released Nov 11, 2025) now added a tiny adjustment that helps out massively.

Love it!

Jim is, as always, on point.

My desire to give you constructive feedback is in direct correlation to your effort to care — about your communications, about what you ship, even about what you don't ship.

Shipping something unfinished, half-assed or broken to "gather feedback" just won't do any good. There is a certain (and often obvious) level of quality that needs to be reached before asking for feedback. If laziness shows, nobody will care...

Do you wonder what the final masonry CSS syntax will look like? Do you use the dialog element to its fullest potential? And are you excited about CSS @scope entering baseline?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.

I've mentioned a couple of times last year that a Web Weekly redesign is in the making. It only took me a year on and off to start from scratch and finally have a landing page suitable for a Frontend newsletter. And here it is!

It ships with view transitions, container queries, popover, @starting-style, light-dark() and many other new'ish Frontend things I share here in the newsletter. I'm no designer, but I must say I'm very pleased with the new look.

For the RSS folks: there are now also two new RSS feeds. One for the actual newsletter and one for quick links. Check them out!

A special shoutout goes to all the people who participated in the new "wall of love" aka the testimonials section. Thank you Louis, Eva, Wojtek, Chris, Josefine, Khaled, Max, Carlos, Jeremias, Paul, Olivier, Sébastien, Michiel, Dominic, Kristina, Dominik, Johann, Jay, Henry, Gustavo, Owen, Eric, Attila, Martin, Marcel, Gabriel, Emre, Károly, George, Thomas, Matthias, Ivan, Oliver, Tino, Barry, Tim, Stefano, Ekrem, Simon, Schalk, Andy, Patrick, Bart, Mirko, Kilian, Matt, Øystein, Paul, Den, Craig, Sachin, Andreas, Torsten, Lars, Bramus, Craig, Amr, Christian, Mohamed, Anselm. You all rock!

If you want to tell your friends about Web Weekly, want to give a testimonial yourself, or have any feedback on the new site, let me know. I'm all ears!

And another huge thank you and massive bag of karma points goes to Jens and Boris this week. Thank you both for covering a small fraction of the cost it takes to send Web Weekly every week! ❤️

If you enjoy Web Weekly, too, join 32 supporters and support indie publishing on Patreon or GitHub Sponsors. It really makes a difference for me!

Picking icons is tough because they should look good, blend in nicely, convey meaning... and then there's also the question of whether and when you should use icons in the first place.

Tonsky's post is a long rant on the new macOS Tahoe icons and I understand that design for an operating system is challenging and that there are always trade-offs to be made, but this icon macOS dialog (👆) made me laugh out loud.

This UI and icon madness can't be true, or can it?

Be speechless

• How good engineers write bad code at big companies
• Do I Leave the Laptop at the Office? A Case Against Returning to Office
• 21 Lessons From 14 Years at Google

And a special somewhat "no code" highlight: it's wild that posts like Your job is to deliver code you have proven to work need to be written today but yet here we are. I published my thoughts and commentary about this post on the blog, too.

Emil shared all the considerations going into his Sonner toast library and let me tell you that's some quality work. I love it!

Consider the details

However, keep in mind that toasts come with serious accessibility and UX issues and that there are better ways to give updates.

Caching was and is one of those web dev things that are hard to get right. Especially when it comes to URL caching, things get messy very quickly because the web is full of random query parameters. How can you tell browsers and CDNs that random utm parameters don't matter and that the cached HTML is fine?

There's a new header in town (No-Vary-Search) and Barry explains why it'll be a big deal. It's Chrome-only for now but "should" be safe to use already.

Cache all the things

Side note: this year's Web Performance Calendar was outstanding! Every other post was a banger and I'll definitely plug more posts in the upcoming weeks.

I absolutely loved this post! If you don't know about the wbr element or the ­ character, you should definitely check it out!

Break the words

There were many discussions about how and if masonry layouts should come to CSS last year. And it seems the CSS Working Group came to a conclusion? At least, it sounds like it in the Safari release post. We can all now wait for display: grid-lanes to hit a stable browser release or play with Safari's Tech Preview.

Lay things out

If you're a music nerd, you're going to love this. Typatone transforms your written words into looped tracks. Can you make a song using it? If so, I'd love to hear it!

Type a tone

Every single project I've worked on included the dotenv dependency to load .env files in development. This week I learned that Node.js has had this functionality built-in and marked as stable since v24.

Remove a dependency

If you haven't used the dialog element yet or didn't keep up with the latest feature additions (closedBy or requestClose), Sara summarized what you need to know in one piece!

Have a dialog

Be warned that many CSS features highlighted in this year's CSS wrapped aren't ready for prime time yet because they're Chrome-only, but the site is stunning work and I can't imagine all the work that has gone into building it!

I'll cover most of the new CSS features once they're coming closer to cross-browser support here, but if you're curious about all the countless things coming to CSS, this "short" summary worth a read.

Wrap it up!

However, if things aren't mission critical and you're cool with partial browser support, knock yourself out! I, for example, took Una's snippet to automatically hide/show my fixed headers on scroll and it's already deployed on the new Web Weekly site (only visible in Chrome Canary).

Have you seen this CSS monstrosity before? These user-agent styles are the leftovers of the document outline algorithm that (unfortunately) never went anywhere. If you want to learn more about it, Martin shares all the details.

Understand the outline

From the unlimited MDN knowledge archive...

Here's some DOM trivia; did you know that you can access loaded images via document.images? Well, now you do...

Inspect the images

What happens if you nest elements with different CSS visibility? Can elements be visible while being inside elements with visibility: hidden;? Yes, they can.

I think this is terribly confusing and you can learn more about it on the blog.

Be confused

With Firefox 146 (released Dec 9), @scope made it into baseline. It's a very complex topic and I can't say I totally get it all, but I'm extremely excited about the ability to use inline style elements to scope component styles (👆).

Daniel gives a good overview of what you need to know.

Scope your styles

• gibbok/typescript-book – A free and concise TypeScript book.
• Epistates/treemd – A (TUI/CLI) markdown navigator.
• karol-broda/snitch – A prettier way to inspect network connections.

I just realized that I'm super into dithered images and I might check if I can bring them into the new Web Weekly site somehow. With this week's helper, you can create these image effects without opening Photoshop or the like.

Make your images fancy

I'm more of an AI skeptic because I value human work. I value people who put in the work. And I'm worried. Scratch that, I'm scared. Wherever we're heading and whatever "AI" will mean for us, our jobs, or the world, I'm terrified. And I keep thinking about the well-phrased points Josh makes on his blog.

Today's AI excitement is a matter of privilege.

❤️ If so, join 32 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Node.js continues to follow the lead of competing runtimes and implements more and more userland features. Loading .env files was one of these features that's been solved in userland (dotenv has 46m weekly downloads) since I started writing Node.js code almost 15 years ago.

Today I learned that Node.js not only added support for loading environment files from the command line with the --env-file and --env-file-if-exists flags, but also added a new loadEnvFile() method to load .env files right in your scripts, similar to how dotenv does it. The new method is marked stable since Node.js v24.

import { loadEnvFile } from 'node:process';

// load .env file with default path ('./.env')
loadEnvFile();
// load .env file with a custom path
loadEnvFile('../../.env');

One thing to watch out for, though, is that loadEnvFile() throws if the .env file doesn't exist, which is usually the case in production environments. But that's no problem, and I wrapped it into a small utility when I was removing dotenv from one of my projects.

import { loadEnvFile } from 'node:process';

export function safeLoadEnvFile(): void {
  try {
    loadEnvFile();
  } catch (error) {
    // In prod environments there's usually no `.env` file.
    // Ignore the error thrown if the file doesn't exist.
  }
}

I love seeing Node.js moving forward!

Edit: If you're looking for a more advanced snippet to bring into your projects, François shared an environment-aware way to load .env files.

I just stumbled over this package: @pierre/diffs.

@pierre/diffs is an open source diff and code rendering library. It's built on Shiki for syntax highlighting and theming, is super customizable, and comes packed with features.

The package just hit v1 and seems to be pretty new. The docs live on diffs.com (no idea how one could snatch this domain in 2026) and it looks amazing.

It comes as a React and Vanilla JS component, supports server-side rendering, and the configuration options look solid.

Disclaimer: I haven't tried diffs but I can imagine that I will take it as a starter for this blog eventually.