Web Weekly #152 (#blogPost)

What can we expect from Interop 2025? How can you give your console.log statements more context()? Is using gifs generally a good idea?

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

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

If you enjoy Web Weekly, let others know by reposting it on your favorite social network. It really helps me growing this newsletter into something "real". 🫣

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

Thank you! 💙

The browser makers came together and decided on the focus areas of Interop 2025.

And if you now think, "Oh well... again, new stuff!?", I get it. However, the features included in Interop aren't browser APIs working in a single browser for the next decade. The promise is that all browsers support the listed features this year. These Interop features are supposed to enter the web soon'ish. For realz.

The Interop focus areas this year include:

• CSS anchor positioning
• Core Web Vitals
• ::details-content
• import ... with { type: "json" }
• CSS @scope
• View Transitions
• and many more things...

The "official Interop 2025 docs" are a good read, so check them out!

But what's the current state and where are we today?

Unsurprisingly, Chromium is leading the way in terms of new features, but I expect that things will move fast.

I'm quite happy with Interop 2025, but if you're game for some critical thoughts, of course, Alex Russel never disappoints and shares some spicy takes.🌶️

I resisted for over a year and didn't put stickers on my computer, but these are just too good!

Be a fake developer

• TIL: How to iterate over TypeScript union types

Oldie but goldie: Martin makes some good points against using animated gifs.

Reconsider

Did you know that not every element is considered a valid LCP element? Or are you aware that Chromium and Firefox evaluate the LCP elements differently? Matt explains the details.

Understand LCP

How do you search for things on a web page? You might CMD+f all the things. If you do, you've probably also encountered situations when a simple text search doesn't work.

Schepp explains how to make content findable for the built-in browser search and assistive technology using hidden="until-found" and some CSS trickery.

It's an excellent post, and I wonder if this approach will become a .sr-only class replacement.

Make things searchable

Today I learned that the Chromium console includes a context() method that allows you to create loggers, which you can easily filter in the JavaScript console.

Filter your logs

Floor796 is an absolute classic created in 2018, and the animated space station includes areas with a gazillion tiny details. The fun thing: the project is still being worked on and extended.

Discover things

I'm really trying to lean into some AI coding features, but with all these new browser features shipping daily, I would be lying if I said I'm not concerned about the AI knowledge cut-off.

Be aware of the new stuff

You might have heard of the Chromium-only Speculation Rules. They're supposed to be a prefetch / prerender alternative.

I learned that Google Search ships them in production, and their implementation includes many tips and tricks about things to consider. I mean look at this snippet, "anonymous-client-ip-when-cross-origin", what? 🤯

Speculate

I just love it when I see CSS grids being used for more than putting columns next to each other.

Power up your grids

This news might only be important for package maintainers, but after all these years of dancing the endless CommonJS vs ECMAScript modules dance, it's finally time to embrace modules.

Node.js 20 and higher versions can now require ECMAScript modules, which means that when Node.js 18 reaches the end of life in April, everybody can drop all these build steps compiling multiple module systems and "just ship" modules.

Go all-in with modules

From the unlimited MDN knowledge archive...

Here's one of the many famous JavaScript quirks: did you know there's a static data property called POSITIVE_INFINITY? Now you do.

Discover infinity

Here's a trick question: what values will be matched for the prefers-contrast media feature query when you omit the value and use the so called "boolean context"?

Query features!

Short'n'sweet: if styling the scrollbar is your jam, scrollbar-color and scrollbar-width work across modern browsers now!

Be on brand

• yassinebenaid/bunster – Compile shell scripts to static binaries.
• GyulyVGC/sniffnet – Comfortably monitor your Internet traffic.
• PatrickJS/awesome-cursorrules – A list of awesome .cursorrules files.

Addy continues his tooling journey! There are now a tool to remove backgrounds from images, a tool to compress images and the newest member — a tool to compress videos.

Compress your videos

In the spirit of the web platform, here's some wisdom from Harry:

💙 If so, join 21 other Web Weekly readers and give back with a small monthly donation on Patreon or GitHub Sponsors.

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

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

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

I'll see you next week! 👋