Web Weekly #189
Guten Tag! Guten Tag! 👋
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.
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
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! 👋
readers loved this