Skip to main content

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!

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!

Something that made me smile this week 

What happens when you name everything Copilot? An attempt to map every product, app, and service that Microsoft has launched with the name "Copilot"

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

Name everything the same

No code 

Not existing font-family fallbacks 

h1 { font-family: "Open Sans"; }

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

Fall back properly

bfcache problems 

self.addEventListener('pageshow', (event) => { if(event.persisted) { let theme = localStorage.getItem('theme'); let root = document.documentElement; root.classList.remove('light-theme', 'dark-theme'); if (theme) { root.classList.add(`${theme}-theme`);}}});

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

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

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

Tweak the cache

Why (and how) MDN was rebuilt without React 

Search dialog with the question "Under the hood of MDN's new frontend". The Answers: HTML, CSS, JavaScript and Web APIs

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

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

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

The article is a great read to learn more!

Consider simple architecture

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

The text "This chart shows the number of ARIA attributes per home page over time" next to a graph with exploding ARIA attribute usage.

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

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

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

This makes me sad.

Look at sad numbers

The wonderful weird web – 100 jumps 

A square with a face standing on a flying shelf.

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

Jump!

HTML in canvas might become a thing 

<canvas id="canvas" layoutsubtree> <form id="form_element"> <label for="name">name:</label> <input id="name"> </form> </canvas>

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

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

Render HTML

TIL — Intl can localize units, too! 

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

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

Format your numbers

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

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

@container ds-card { .title { background: rebeccapurple; color: white; } }

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

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

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

Scope your styles

New to the platform: lazy loading video 

<video loading="lazy" autoplay playsinline muted src="path/to/sloth.webm"></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!

Delay all the heavy videos

Random MDN – ReportingObserver 

const observer = new ReportingObserver( (reports, observer) => { reports.forEach((report) => { log(JSON.stringify(report, null, 2)); }); }, { types: ["deprecation"], buffered: true, } );

From the unlimited MDN knowledge archive...

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

Read the reports!

TIL recap – the pathLength attribute 

<svg width="7149" height="1392" viewBox="0 0 7149 1400"> <path d="M0.640625 ..." pathLength="100" /> </svg>

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

Animate all the paths

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

Soon on the baseline - sizes=auto 

<img alt="A cat wearing a hat." srcset=" cat-s.jpg 300w, cat-m.jpg 600w, cat-l.jpg 1200w " loading="lazy" 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:

Great times ahead!

Three valuable projects to have a look at 

A new Tiny Helper 

ASCII mock up showing a form UI with controls.

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

Draw with text

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?

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

Join 6.4k+ developers and

Subscribe to Web Weekly