Do you use image-set for background images in CSS? Have you used Wakamai Fondue to analyze your variable fonts? And do you know that field-sizing isn't only about textareas?

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

::: highlight quote Jesper listens to Yttling Jazz — "Illegal Hit" and says:

This is a song that helps me keep my head up during winter and look forward to spring! :::

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

Let's kick things off with some quick-to-read accessibility resources that didn't fit elsewhere!

Not new, but still relevant: Adrian shared Where to Put Focus When Opening a Modal Dialog. It comes with the banger opener:

Blanket statements about where to put focus when opening a modal dialog are wrong, including this one.

I also discovered Steve's post explaining that hidden content still makes it into the computation of an element's accessible name. This fact is important when you're connecting error messages with aria-describedby and hiding a possible error with display: none. The error won't be visible, but it'll still be part of the accessible name computation. Not good.

And lastly, Manuel reminds us all that box-shadow isn't an alternative to a proper outline! Let's stick to the defaults.

I'll share some more accessibility resources next week. Is there anything great I should include?

A big thank you and a huge bag of karma points go to Daniel who provided a new testimonial! If you have something nice to say about Web Weekly or want to support indie publishing in the times of cheap AI slop, reach out.

You can support Web Weekly on Patreon or GitHub Sponsors. We're currently at 40 supporters, and I'd love to hit the magical 50. ❤️

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

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

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

::: highlight sponsored

Build any web layout, with confidence.

The Layout Maestro is a written, interactive CSS course that teaches you how to think, build, and debug layouts, not just memorize properties. It covers flexbox, grid, :has(), and container queries. Use the coupon code WEBWEEKLY for $50 off.

<a class="btn btn__small" href="https://thelayoutmaestro.com?utm_source=webweekly">Level up your layout game</a>

Side note from me: I plug Ahmad's interactive blog posts from time to time, and looking at all the outstanding resources he's published over the years, I'm sure this course is more than worth it! :::

Something that made me smile this week

Jack learned that there are "only" 84k Firefox extensions out there and thought "Challenge accepted. I'm gonna install them all!" while documenting his journey.

YOU CAN (barely) RUN FIREFOX WITH ALL 84 THOUSAND EXTENSIONS.

Who would have guessed. 😅 Man, I love the internet.

<a class="btn btn__small" href="https://jack.cab/blog/every-firefox-extension">Install them all</a>

No code

• The unwritten laws of software engineering → "It took me embarrassingly long to learn that when production breaks and you recently deployed anything, you shouldn’t spend an hour proving your change is innocent..."
• What, then, are we paying for? → "Paying for software isn’t paying for a solution. It’s paying for someone else to own a problem."

Analyze your font's features set

You know, I'm no font or typography nerd but occasionally I need to inspect what features are included in a font. Font features? Yes! There are variable font axes controlled via font-variation-settings or open type features controlled via font-feature-settings.

But how can you inspect a font and know what you can do with it? Well, Wakamai Fondue just hit v1.0, and it looks great!

<a class="btn btn__small" href="https://wakamaifondue.com/">Get nerdy about fonts</a>

More view transition tools and resources

After plugging Bramus' View Transition Toolkit two weeks ago, people pointed me to the "View Transition Bag". It includes plenty of resources and yes, view transition tools are included, too!

<a class="btn btn__small" href="https://vtbag.dev/">Level up your transitions</a>

Modern features misbehaving in the shadow DOM

Granted, it's been a minute since I've used the shadow DOM with web components, but today I learned that there are quite a few issues with modern web features when crossing the boundaries.

For example, cascade layers, container queries, @scope, and @property can behave differently between light and shadow DOM.

The team behind Adobe Spectrum started documenting some common issues.

<a class="btn btn__small" href="https://shadow-dom-css.adobe.com/">Know what works</a>

sizes=auto requires width and height

Here's a quick addition from last week's sizes=auto update. I'm still super excited about it and Eric reminds us that you need to define width and height attributes. You probably do that anyways, but I thought it'd be good to share that with you!

<a class="btn btn__small" href="https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/">Help the layout</a>

Smart: using fallback values to work around layer clashes

David uses cascade layers and has run into a problem. The style requirements were colliding with the defined layer order. He used a smart trick to work around clashing layers.

<a class="btn btn__small" href="https://dbushell.com/2026/04/15/containment-breach-in-cascade-layer/">Keep things flexible</a>

Side note: David also shared that !important works across layer boundaries. Can someone explain that to me?

The wonderful weird web – Train Jazz

Unfortunately, the Train Jazz doesn't work for Berlin (does it work for your city?). The site plays jazz music depending on a city's train/subway data. Is this very useful? Probably not, but I love everything about this! ❤️

<a class="btn btn__small" href="https://www.trainjazz.com/">Listen to some trains</a>

A nifty flexbox trick

Granted, the title of this blog post is a bit misleading (container queries using break points still use... breakpoints), but I enjoyed this little flexbox snippet! 👆

<a class="btn btn__small" href="https://frontendmasters.com/blog/building-a-ui-without-breakpoints/">Flex!</a>

Squashing and stretching animations

Josh published a new post, and we all know what this means. There's a new high-quality post available including lots of demos and eye candy. I must admit I've forgotten about the ability to overwrite the SVG d attribute in CSS and am still on the fence about whether that's a good idea. 😅

<a class="btn btn__small" href="https://www.joshwcomeau.com/animation/squash-and-stretch/">Apply animation principles</a>

Make interfaces feel better

Granted, everything in this post is also packaged up as an AI skill, but the advice on building good-looking UIs is solid. I wasn't aware of this little outline trick at the end.

<a class="btn btn__small" href="https://jakub.kr/writing/details-that-make-interfaces-feel-better">Polish your interfaces</a>

Why do some images look brighter than the rest?

Tom came out of nowhere and finally explained to me why some images on my Mac are glaring on my screen. There are chances you haven't seen what I'm talking about, but for me on my MacBook Pro using the Signal App (it must be Electron-based), sometimes I receive a photo and it almost feels like the rest of the screen is getting darker because the image is so bright. Turns out, some hardware/software combinations simply display HDR images. Wow!

<a class="btn btn__small" href="https://tn1ck.com/blog/abuse-hdr-images-for-marketing">Understand images</a>

Random MDN – transition-behavior

From the unlimited MDN knowledge archive...

Everybody was talking about transition-behavior a year ago. Do you use it? The CSS property allows you to finally combine property transitions including display. And the best thing, it's been on the baseline since 2024!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior">Change the behavior</a>

TIL recap – field-sizing doesn't only work for textareas

field-sizing enables textareas to automatically grow. And that's great, but do you know that it works for "normal" inputs and select boxes, too?

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/field-sizing-is-about-more-than-textareas/">Resize your elements</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline

After including baseline updates for quite a while here, I realized I'm riding pretty much on the cutting edge. And many folks are also interested in the baseline "widely available" updates. So here we go!

Do you know that you can use image-set to serve different background images right in CSS? Now you do and image-set is "widely available" since last month! 🎉

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/image/image-set">Be responsive</a>

And I'm sorry but I can't help it and I know you're also waiting for some cutting-edge stuff: the team over at Mozilla added container style queries support to Firefox Nightly, which means it's slowly time to start looking into them. Bam!

Three valuable projects to have a look at

• thoughtfulllc/gridland – Terminal apps that run anywhere - even the browser!
• getelena/elena – A simple, tiny library for building Progressive Web Components.
• meodai/heerich – An engine for 3D voxel scenes rendered to SVG. 👈 That one's very fancy!

A new Tiny Helper

Now, I'm not sure if it's a good idea to have complex vector graphics like the above in CSS, but hey. Temani updated his SVG to CSS tool and it now supports multiple path elements. So if you ever wanted to transform SVGs into clip-path (or the new border-shape) properties, this tool is for you!

<a class="btn btn__small" href="https://css-generators.com/svg-to-css/">Clip all the paths</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

Ezhik's post really hit a nerve with me. The world is changing. Heck, our entire industry and profession might be completely turned on its head. I'm beyond scared. What puzzles me the most is that quality might become less important.

Many builders, designers, and [insert whatever digital profession you like] slowly lose the desire to create high-quality "things". Many are totally fine with generating something quickly. Done is better than perfect, right? And this approach might be alright. For many teams and companies it's always been like that. In the end, everybody can build whatever they like. It is how it is.

However, what scares me is the other side. And of course, that's not true for everybody, but does the majority out there care about a stellar product that took months to build? Do people care about a well-researched article? Does it matter if someone actually put in the work?

I know this is a downer to close this Web Weekly, but I'm honestly not sure anymore.

::: highlight quote

I'm terrified of the good enough to ship — and I'm terrified of nobody else caring. :::

Did you learn something from this issue?

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

This is all, friends!

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 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!

::: highlight quote Boris listens to Wheatus - Teenage Dirtbag and says:

I'm currently rediscovering Teenage Dirtbag and the story behind the song. Maybe you'll find it interesting too! :::

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!

::: highlight 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.

<a class="btn btn__small" href="https://frontendatlas.com?utm_campaign=web-weekly">Start practicing for free</a>

<small>Web Weekly is open for sponsorships. When you want to reach 6k developers, <a href="https://webweekly.email/sponsor">you know what to do</a>!</small> :::

Something that made me smile this week

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

<a class="btn btn__small" href="https://teybannerman.com/strategy/2026/03/31/how-many-microsoft-copilot-are-there.html">Name everything the same</a>

No code

• 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."

Not existing font-family fallbacks

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.

<a class="btn btn__small" href="https://csswizardry.com/2026/04/font-family-doesnt-fall-back-the-way-you-think/">Fall back properly</a>

bfcache problems

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.

<a class="btn btn__small" href="https://guilhermesimoes.github.io/blog/making-dark-mode-work-with-bfcache">Tweak the cache</a>

Why (and how) MDN was rebuilt without React

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/">Consider simple architecture</a>

The accessibility report of the top 1,000,000 home pages

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.

<a class="btn btn__small" href="https://webaim.org/projects/million/">Look at sad numbers</a>

The wonderful weird web – 100 jumps

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

<a class="btn btn__small" href="https://boredzebra.com/100jumps/">Jump!</a>

HTML in canvas might become a thing

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.

<a class="btn btn__small" href="https://mattrothenberg.com/notes/html-in-canvas/">Render HTML</a>

TIL — Intl can localize units, too!

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!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/intl-can-localize-units-too/">Format your numbers</a>

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.

Scoping with name-only container queries (or @scope)

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!

<a class="btn btn__small" href="https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/">Scope your styles</a>

New to the platform: lazy loading video

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!

<a class="btn btn__small" href="https://engineering.squarespace.com/blog/2026/how-to-use-standard-html-video-and-audio-lazy-loading-on-the-web-today">Delay all the heavy videos</a>

Random MDN – ReportingObserver

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/ReportingObserver">Read the reports!</a>

TIL recap – the pathLength attribute

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.

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/pathlength-makes-makes-svg-path-animations-easier-to-manage/">Animate all the paths</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

Soon on the baseline - sizes=auto

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!

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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!

<a class="btn btn__small" href="https://wiretext.app">Draw with text</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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

::: highlight quote

Your web app is not the center of the universe. :::

Did you learn something from this issue?

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

This is all, friends!

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!

::: highlight quote Mark listens to "Jet Black" by Fletchr Fletchr and says:

An anthemic crashing guitar explosion, "Jet Black" ruined a perfectly good nap in the sun for me at Boardmasters Festival this summer by erupting on stage, and it's gone on heavy rotation since. :::

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.

No code

• 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."

Use subgrid to deal with "controlled" content

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

<a class="btn btn__small" href="https://dbushell.com/2026/04/02/css-subgrid-is-super-good/">Lay out!</a>

TS Type guards vs. assertion functions

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!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/the-scope-of-type-guards-and-assertion-functions/">Narrow things down!</a>

What to know in JavaScript 2026

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!

<a class="btn btn__small" href="https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/">Stay up to date!</a>

Everybody's raving about pretext

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?

<a class="btn btn__small" href="https://github.com/chenglou/pretext?tab=readme-ov-file">Be fancy</a>

The View Transitions Toolkit

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.

<a class="btn btn__small" href="https://chrome.dev/view-transitions-toolkit/">Level up your transition game</a>

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.

The wonderful weird web – CSS-or-BS

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

<a class="btn btn__small" href="https://www.keithcirkel.co.uk/css-or-bs/">Decide!</a>

The human.json protocol

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?

<a class="btn btn__small" href="https://codeberg.org/robida/human.json/src/branch/main/README.md">Trust your fellow webmaster</a>

light-dark() works soon for images

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.

<a class="btn btn__small" href="https://www.bram.us/2026/03/19/more-easy-light-dark-mode-switching-light-dark-is-about-to-support-images/">Flip some images</a>

A sticky CSS spec change

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!

<a class="btn btn__small" href="https://www.bram.us/2026/03/30/css-sticky-per-axis/">Stick!</a>

Edge's experimental network efficiency guardrails

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!

<a class="btn btn__small" href="https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/">Watch out</a>

CSS containment explained

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!

<a class="btn btn__small" href="https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/">Save some work</a>

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

Random MDN – position-visibility

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?

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-visibility">Hide and seek</a>

TIL recap – Forbidden fetch headers

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

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/forbidden-headers-cant-be-set-in-fetch-requests/">Stay in your lane</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline

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.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-indent">Move your text around</a>

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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

<a class="btn btn__small" href="https://www.pixelateimage.co">Pixelate</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

So true.

::: highlight quote

Software engineering projects are not dominated by the known work, but by the unknown work, which always takes 90% of the time. :::

Did you learn something from this issue?

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

This is all, friends!

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 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!

::: highlight quote Mario listens to "Ethel Cain - Waco, Texas" and says:

This is my kind of opera. :::

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! ❤️

Web Weekly housekeeping

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!

No code

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!

color-contrast() beyond black & white

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.

<a class="btn btn__small" href="https://una.im/advanced-contrast-color/">Mix all the colors</a>

Form-associated custom elements

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!

<a class="btn btn__small" href="https://frontendmasters.com/blog/form-associated-custom-elements-in-practice/">Attach your inputs</a>

A new focusgroup RFC

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!

<a class="btn btn__small" href="https://developer.chrome.com/blog/focusgroup-rfc">Test it out!</a>

Stop checking for view transition support

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.

<a class="btn btn__small" href="https://www.bram.us/2026/03/11/view-transitions-mock-is-a-non-visual-polyfill-for-same-document-view-transitions/">Remove some ifs</a>

The wonderful weird web – JND

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?

<a class="btn btn__small" href="https://www.keithcirkel.co.uk/whats-my-jnd/">Look closely</a>

Native JSON modules with import attributes

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.

<a class="btn btn__small" href="https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/">Import your JSON</a>

Even more customizable selects

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.

<a class="btn btn__small" href="https://css-tricks.com/abusing-customizable-selects/">Select!</a>

Feature detection of at-rules

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.

<a class="btn btn__small" href="https://www.bram.us/2026/03/15/at-rule/">Detect</a>

Node.js subpath imports

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!

<a class="btn btn__small" href="https://johnnyreilly.com/only-node-subpaths-with-no-restricted-imports-and-perfectionist-sort-imports">Shorten your imports</a>

Random MDN – CSS .to() in JS

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?

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/CSSNumericValue/to">Convert</a>

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

TIL recap – svg elements can be nested

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

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/you-can-nest-svg-elements/">Nest all these SVGs</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline — CSS shape()

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape">Shape!</a>

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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!

<a class="btn btn__small" href="https://basewatch.dev/">Stay up to date</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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

::: highlight quote

Data tells you what people consume, not what you should make. [...] "What is happening?" and "What should happen?" are two completely different questions and should be dealt with as such. :::

Did you learn something from this issue?

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

This is all, friends!

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!

::: highlight quote I am listening to "KRAFTKLUB - Marlboro Mann" and say:

I've seen Kraftklub live twice so far. The first time I was surprised by the excellent show. The second time I was truly amazed. This week, I'm going to see Germany's best live band for the third time, and I'm sure that I'll tear up while dancing my ass off. I can't wait! :::

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! ❤️

No code

• 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".

Heads up: Chrome will adopt a new release cycle

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.

<a class="btn btn__small" href="https://developer.chrome.com/blog/chrome-two-week-release">Catch up</a>

Do you remember theme-color?

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.

<a class="btn btn__small" href="https://grooovinger.com/notes/2026-02-27-safari-26-header-background">Color the Safari frame</a>

Yes, this is a custom select!

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

<a class="btn btn__small" href="https://codepen.io/editor/cbolson/pen/019cbfe5-85da-7d31-a7de-44b6b35e7c1c">Select with style</a>

: and = in style queries

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!

<a class="btn btn__small" href="https://css-tip.com/if-trick/">Compare styles</a>

Problems with anchor positioning

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.

<a class="btn btn__small" href="https://css-tip.com/anchor-issues/">Master all these anchors</a>

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

Style restrictions of the new geolocation element

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.

<a class="btn btn__small" href="https://frontendmasters.com/blog/the-enforced-accessibility-of-the-geolocation-element/">Style the location</a>

The wonderful weird web – A map of us

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. ❤️

<a class="btn btn__small" href="https://amapof.us/map">Discover memories</a>

npmx is having a moment

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!

<a class="btn btn__small" href="https://npmx.dev/">Check packages with style</a>

A CSS state machine

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?

<a class="btn btn__small" href="https://patrickbrosset.com/articles/2026-03-09-using-css-animations-as-state-machines-to-remember-focus-and-hover-states-with-css-only/">Remember focus</a>

You Don't Know HTML Tables

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)?

<a class="btn btn__small" href="https://blog.frankmtaylor.com/2026/03/05/you-dont-know-html-tables/">Level up your table game</a>

Creative ways to select :root

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

Random MDN – stop()

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/stop">Stop!</a>

TIL recap – Overwrite your dependencies' dependencies

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!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-override-your-dependencys-dependencies/">Fix your deps</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline — Trusted Types

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API">Be safe</a>

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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.

<a class="btn btn__small" href="https://svgconverter.online">Convert</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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

::: highlight quote

The human in the loop isn't a bug to be fixed. It's a feature to be protected. :::

Did you learn something from this issue?

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

This is all, friends!

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!

::: highlight quote Pablo listens to ROSALÍA - Berghain and says:

Rosalía's Berghain (& the LUX album) are real masterpieces. Berghain has passages in German, showing us in the key of Opera what Hildegard of Bingen was experiencing, who saw "the reflection of the living Light" as a vision of God. Rosalía's Berghain translates in German the religious visions as "The flame penetrates my brain Like a lead teddy bear". I absolutely recommend listening to this album, sung in German, French, Catalan, Italian, Ukrainian, Japanese and Spanish. :::

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! ❤️

No code

• 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?"

Soft navigations in Chrome

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!

<a class="btn btn__small" href="https://developer.chrome.com/docs/web-platform/soft-navigations-experiment">Measure!</a>

Laws of UX

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.

<a class="btn btn__small" href="https://www.userinterface.wiki/laws-of-ux">Follow the law</a>

setHTML is coming to Firefox

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!

<a class="btn btn__small" href="https://hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/">Don't allow XSS</a>

Yet another way to center elements in CSS

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?

<a class="btn btn__small" href="https://css-tricks.com/yet-another-way-to-center-an-absolute-element/">Center everything</a>

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

The wonderful weird web – aem1k

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

<a class="btn btn__small" href="https://aem1k.com/">Be amazed</a>

TIL - tabs and newlines are removed from URLs

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

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/new-lines-are-removed-from-whatwg-urls/">Break things apart</a>

sec-fetch as modern CSRF protection

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!

Does this demo still count as a select?

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.

<a class="btn btn__small" href="https://codepen.io/t_afif/pen/PwGPJOB">Pick a fruit!</a>

Random MDN – :open

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:open">Style the open</a>

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...

TIL recap – overflow: hidden is still scrollable

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.

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/elements-with-overflow-hidden-are-scrollable/">Clip it!</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline: rcap, rch, rex and ric

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.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#browser_compatibility">Use the fancy relatives</a>

Classifieds & friends

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. 🎉

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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.

<a class="btn btn__small" href="https://cruxvis.withgoogle.com/">Check your Vitals</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

One might think Ibrahim has a point here. 🫣

::: highlight quote

When a customer reaches for your chatbot, it's not because they think chatbots are cool. It's because you've failed them. :::

Did you learn something from this issue?

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. ❤️

This is all, friends!

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 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!

::: highlight quote André listens to "Ordinary" by Alex Warren and says:

This is genuinely one of the most beautiful songs I've ever listened to. It landed instantly on my short-list playlist of personal 'masterpieces' — the kind of songs that feel timeless to me, alongside classics like 'The Sound of Silence'. It's emotionally honest, restrained, and quietly powerful in a way that really stays with you. :::

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! ❤️

No code

• 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".

New on the blog

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

Web Weekly Housekeeping

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!

An in-depth guide to customizing list styles

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...

<a class="btn btn__small" href="https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/">List with style</a>

TIL — CSS zoom

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.

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/css-zoom-to-scale-elements/">Zoom!</a>

The web breaks free from rectangles

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.

<a class="btn btn__small" href="https://una.im/border-shape/">Shape the web</a>

Safer JS error checking

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

<a class="btn btn__small" href="https://allthingssmitty.com/2026/02/23/from-instanceof-to-error-iserror-safer-error-checking-in-javascript/">Check the error</a>

The wonderful weird web – Kaomoji Cool Club

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!

<a class="btn btn__small" href="https://kaomojicool.club/">Express yourself with Unicode</a>

Lazy loaded videos are coming to the web

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?

<a class="btn btn__small" href="https://scottjehl.com/posts/lazy-media/">Defer the heavy load</a>

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.

Are image sprites still a thing?

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!

<a class="btn btn__small" href="https://www.joshwcomeau.com/animation/sprites/">Remember sprites</a>

Yet another list of web dev stuff

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.

<a class="btn btn__small" href="https://canwe.dev/">Get some resources</a>

New in Chrome DevTools — Render blocking

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.

Random MDN – text-box-trim

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!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-box-trim">Align</a>

TIL recap – text-transform can affect screen readers

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

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/text-transforms-affects-screen-readers-too/">Be aware</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline — new map methods

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.

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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

<a class="btn btn__small" href="https://www.svg.studio/">Tweak all the SVGs</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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.

::: highlight quote

My immediate fear isn't that I'll be out of a job. My fear is that I'll lose the part of my job that I love the most. :::

Did you learn something from this issue?

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

This is all, friends!

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 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!

::: highlight quote Paweł listens to "Tarika Blue - Topic" and says:

This one is another sample that I was shocked to discover. My beloved Erykah Badu used a sample of this song in her "Didn't Cha Know". I love everything by Erykah, and I love jazz music, so this song is a perfect combo for me. :::

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!

Web Weekly housekeeping

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! ❤️

Something that made me smile this week

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

<a class="btn btn__small" href="https://www.einenlum.com/articles/git-shitstorm/">Don't be evil</a>

No code

• 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." 😱

Use @layer for your reset styles

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!

<a class="btn btn__small" href="https://matuzo.at/blog/2026/lowering-specificity-of-multiple-rules">Reset layer by layer</a>

@scope in inline <style> blocks

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.

<a class="btn btn__small" href="https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/">Scope!</a>

using works in Node.js

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.

<a class="btn btn__small" href="https://allthingssmitty.com/2026/02/02/explicit-resource-management-in-javascript/">Use "using"</a>

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

The new era of customizable select elements

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.

<a class="btn btn__small" href="https://nerdy.dev/nice-select">Select with style</a>

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

The wonderful weird web – gradient.horse

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.

<a class="btn btn__small" href="https://gradient.horse/">Draw a horse</a>

The State of CSS in 2026

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!

<a class="btn btn__small" href="https://www.projectwallace.com/the-css-selection/2026">Analyze the web</a>

The logo soup problem

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!

<a class="btn btn__small" href="https://www.sanity.io/blog/the-logo-soup-problem">Align all these icons</a>

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

Throttle/block individual requests in Chrome DevTools

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

<a class="btn btn__small" href="https://developer.chrome.com/blog/throttle-individual-network-requests">Block rendering</a>

On reusable OS font sizes in browsers...

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.

<a class="btn btn__small" href="https://adrianroselli.com/2026/02/honoring-mobile-os-text-size.html">Honor the OS settings</a>

Random MDN – <search>

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.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search">Search with semantics</a>

TIL recap – header/footer elements can change their assigned ARIA role

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!

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/header-and-footer-elements-lose-their-roles-in-sectioning-content/">Check the roles</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New scroll "stuff" in the baseline

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!

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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!

<a class="btn btn__small" href="https://npmx.dev">Browse packages</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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

::: highlight quote

Don't let your job get in the way of your career. :::

Did you learn something from this issue?

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

This is all, friends!

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!

::: highlight quote Mike listens to "Is It Making You Feel Something?" by Superchunk and says:

One of my all-time favorite bands put out a new record this year, and the title track is a simple instant classic with a fun little chorus. :::

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 housekeeping

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!

Something that made me smile this week

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!

<a class="btn btn__small" href="https://detail.design/">Look at eye candy</a>

No code

• "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."

CodePen 2025 highlights

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!

<a class="btn btn__small" href="https://codepen.io/2025/popular/pens/">Be amazed</a>

Two handy promise.all utils

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!

The :only-child view transition trick

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!

<a class="btn btn__small" href="https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/">Transition in and out</a>

Custom invoker commands

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!

<a class="btn btn__small" href="https://pawelgrzybek.com/more-invoker-commands-and-more-reasons-not-to-use-javascript-please/">Add custom commands</a>

The wonderful weird web – Draw a horse

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!

<a class="btn btn__small" href="https://interactingincorrectly.online/lookaround.html">Interact incorrectly</a>

A new meta element is coming to town

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.

<a class="btn btn__small" href="https://www.joshtumath.uk/posts/2026-01-27-try-text-scaling-support-in-chrome-canary/">React to user preferences</a>

Accessibility barriers introduced by text effects

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!

<a class="btn btn__small" href="https://adrianroselli.com/2026/01/barriers-from-links-with-aria.html">Keep things accessible</a>

The problem of modern frontend development

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.

<a class="btn btn__small" href="https://paulmakeswebsites.com/writing/shadcn-radio-button/">Keep things simple</a>

Yet another great CSS reset

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

<a class="btn btn__small" href="https://vale.rocks/posts/css-reset">Get inspired</a>

Quick HTML tricks

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 isn't just for popups

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!

<a class="btn btn__small" href="https://rolandfranke.nl/frontend-stories/drawing-connections-with-css-anchor-positioning/">Anchor without using popups</a>

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.

Random MDN – console.timeStamp

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?

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/console/timeStamp_static">Mark your timeline</a>

TIL recap – . doesn't match all characters in regular expressions

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?

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/the-dot-in-regexp-doesnt-match-all-characters-in-javascript/">Match everything</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline

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!

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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!

<a class="btn btn__small" href="https://neberej.github.io/exposedbydefault/">Understand your fingerprint</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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

::: highlight quote

Humans don't operate best at machine speed. We think, hesitate, reconsider, and change our minds. Design that ignores this doesn't make people more efficient — it instead pushes them to move faster than their intent. :::

Did you learn something from this issue?

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

This is all, friends!

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! 👋

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!

::: highlight quote Olivier listens to "Shelf Lives - Where Did I Go?" and says:

I simply love this song's power and energy! :::

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! ❤️

Something that made me smile this week

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?

<a class="btn btn__small" href="https://dbushell.com/2026/01/09/death-to-scroll-fade/">Take care of scroll</a>

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.

No code

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

Exciting new Chrome features

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. 🎉

Sound on websites

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?

<a class="btn btn__small" href="https://userinterface-wiki.vercel.app/sounds-on-the-web">Delight with sound</a>

Bouncy window resizing

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.

<a class="btn btn__small" href="https://lynnandtonic.com/thoughts/entries/case-study-2025-refresh/">Bounce!</a>

Web interface guidelines

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.

<a class="btn btn__small" href="https://vercel.com/design/guidelines">Ship good stuff</a>

The wonderful weird web – Draw on the world map

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! 👆

<a class="btn btn__small" href="https://wplace.live/">Be fascinated</a>

The custom elements manifest

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.

<a class="btn btn__small" href="https://frontendmasters.com/blog/the-missing-link-for-web-components/">Document your web components</a>

What actually is TTFB?

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.

<a class="btn btn__small" href="https://calendar.perfplanet.com/2025/ttfb-doesnt-mean-what-you-think-it-means/">Understand your metrics</a>

More declarative HTML: <geolocation>

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

<a class="btn btn__small" href="https://developer.chrome.com/blog/geolocation-html-element?hl=en">Ask for permission</a>

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

For the Mac users

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?

<a class="btn btn__small" href="https://macos-tidbits.lai.nz/">Be a power user</a>

Random MDN – system-ui and friends

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.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family#system-ui">Match the system</a>

TIL recap – Are self-closing HTML elements a thing?

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.

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/self-closing-tags-are-mostly-meaningless-in-html/">Understand HTML</a>

::: highlight info Find more short web development learnings in my "Today I learned" section. :::

New on the baseline

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.

<a class="btn btn__small" href="https://css-tricks.com/css-anchor-positioning-guide/">Anchor</a>

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

Three valuable projects to have a look at

• 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.

A new Tiny Helper

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.

<a class="btn btn__small" href="https://www.alwaystwisted.com/relicss/">Forget the past</a>

::: highlight info Find more single-purpose online tools on tiny-helpers.dev. :::

Thought of the week

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.

::: highlight quote

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. :::

Did you learn something from this issue?

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

This is all, friends!

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! 👋