Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag, my friend!

Have you ever wondered if the Largest Contentful Paint metric measures unimportant things? Or do you know that some ARIA attributes aren't considered by translation tools? Or that there's a CSS property to avoid reflows when your content grows so that you need a scrollbar?

All the answers and much more are included in this week's Web Weekly. πŸ™ˆ Enjoy!

Welcome to the 19 new subscribers! I'm super excited to have you around! πŸ‘‹

πŸ’‘ Thought of the week

MDN is probably the most important webdev resource out there. It's THE documentation of the web. And while most of us only read it, you can contribute, too.

For example, if you find some outdated browser support information, head over to the "mdn/browser-compat-data" repo and propose an update! It's all structured JSON files that you can update and query. There's even an npm package holding all this information.

MDN compat table on stefanjudis.com showing feature browser support.

I can tell you that using this data to render custom support tables (☝️) makes me so happy!

Paragraph showing browser support information in a popup.

And while I'm rolling my own implementation, you don't have to do that. You could also use Stephanie Eckles's css-browser-support package to query or her handy 11ty filters to display the data. Thanks, Stephanie! 😲

But table rendering isn't the only use case for this dataset. Use Paul Kinlan's "Now Stable" to find out when browser features became stable across all vendors.

 Time to Stable β€” For a given set of browsers, what APIs are in all of them and how many days it take for the API to land in the first browser to the last.

The site offers fascinating browser support stats, but here's a hidden gem: Paul just added an RSS feed (add &type=rss to the URL). πŸ‘

Now, if you want to keep up with the platform and discover when new features become stable, here's the feed that includes the major browsers!

Can you think of other use cases? I love hacking on this data; maybe we want to collaborate on something. πŸ˜‰

Something that made me smile this week

An old man pointing down

I watched this video at least ten times, and it got better and better!

Be surprised

Don't trust anything you see

This Cat Does Not Exist  Using generative adversarial networks (GAN), we can learn how to create realistic-looking fake versions of almost anything, as shown by this collection of sites that have sprung up in the past month. Learn how it works.

I still don't understand the difference between machine learning, artificial intelligence, neural networks, and all the other buzzword in this space. Still, we're currently at a tipping point. New use cases, tools and algorithms are released weekly.

I said it already, and I'll repeat it: better watch the space because computers will soon create more media content than humans. thisxdoesnotexist.com lists multiple sites generating all kinds of stuff.

Find the non-existing

The ARIA attribute translation problem

One drawback of using attributes like aria-description (and aria-label) that contain text content is that they aren’t consistently converted by translation tools. So screen reader users who browse the web in another language may encounter a barrier when hearing an announcement that they don’t understand.

Darin Senneff described how to use the super new aria-description attribute and pointed out that translation tools do not translate "inline attributes" such as aria-label and aria-description.

Consider translation tools

Learning TypeScript

Become the TypeScript Wizard at Your Company β€” A comprehensive production-grade TypeScript training by Matt Pocock

I've been TypeScript-sceptical for a long time, but I'm slowly leaning in... Matt Pocock released a new TypeScript course, and I'll give all these messy type annotations a try. πŸ™ˆ

Learn TS

"Creative" fingerprints

Our tests indicate that you have strong protection against Web tracking.

What information can be used to identify and track you across the web?

Your browser's user agent? Sure. Your screen size? Probably. Cookies? You bet!

"Cover your tracks" analyzes your browser and shows you many more ways to create your digital fingerprint.

Be aware of tracking capabilities

The problem with the Largest Contentful Paint (LCP) metric

Largest Contentful Paint (LCP) makes the assumption that the largest visible element is the most important content from the visitors’ perspective; however, we don’t have a choice about which element it measures. LCP may not be measuring the most appropriate – or even the same – element for each page view.

Since Lighthouse's appearance, we're all more metric-driven. Who doesn't want to have a score of 100, right? But no metric is perfect; Andy Davies explains the LCP metric's pitfalls and how to work around them.

Measure the correct things

Free up the main thread

function saveSettings () {   // Validate the form at high priority   scheduler.postTask(validateForm, {priority: 'user-blocking'});    // Show the spinner at high priority:   scheduler.postTask(showSpinner, {priority: 'user-blocking'});    // Update the database in the background:   scheduler.postTask(saveToDatabase, {priority: 'background'}); };

Speaking of Lighthouse: if you looked at its results, you might have discovered the Total Blocking Time. The metric describes how busy the browser is executing your JavaScript.

This week I learned about the new scheduler JavaScript API, which can help to chunk and divide your scripts so that the UI stays responsive. Jeremy Wagner describes how you can use the API.

Don't block the main thread

The new era of web animations

.gallery__image--active {   page-transition-tag: active-image; }  .gallery__image {   contain: paint; }

The way we build websites is changing. It's almost prime time for the long-awaited technologies :has() and Container Queries. πŸŽ‰

But I have one more request β€” I want to create delightful and fun animations without the overhead of a full-fledged animation library.

Adrian Bece wrote an extensive guide to the Element Transition API. And if this API really enters the platform, it'll be a game changer.

(It's a Chrome-only thing, but let's hope all browser vendors adopt it!)

Build delightful experiences

Videos, webp, and AVIF

The 'video' element is a perfectly okay option for replacing GIFs but it does have one unfortunate side-effect: it prevents a user’s screen from going to sleep, as explained in this post from an ex- product manager on the Microsoft Edge browser.

I didn't expect to find so many juicy details in Ollie Williams' article about videos and gifs. Sure, gifs are old-school and huge, and you shouldn't use them, but what are the alternatives?

The answer is the usual "it depends", but before choosing a format: consider that a video element could prevent your computer from going to sleep and that videos don't support loading=lazy!

Avoid gifs

Random MDN – scrollbar-gutter

/* "stable" keyword, with optional modifier */ scrollbar-gutter: stable; scrollbar-gutter: stable both-edges;

From the unlimited knowledge archive called MDN...

Did you know that you can use scrollbar-gutter to avoid this annoying reflow when a container grows and enforces a scrollbar? Now you do!

Apply the gutter

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – fetch and keep-alive

fetch(`${root}/api/collect`, {   method: 'POST',   body: data,   // note the `keepalive` option   keepalive: true, });

You might know about the sendBeacon JavaScript method, but here's a tip: fetch supports the same functionality!

Keep your fetch alive

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

Three valuable projects to have a look at

A new Tiny Helper

Example showing a headline displayed in two overlaying fonts.

The Fallback Font Generator is a handy tool to optimize Layout shifts when loading custom fonts. πŸ’―

Keep the layout still

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

Thought of the week

To achieve my goals: I try to plan and structure my life. I set goals, track progress, and look at them constantly. But often, life gets messy. Plans don't work out. πŸ€·β€β™‚οΈ That's life, and it's okay.

Visakan Veerasamy's take on the topic is golden, though.

Plans are worthless, planning is priceless.

A song that makes you stop coding

Motive (Blue Lab Beats Remix)

This week's track is Elder Island's slow electro track "Motive". It feels like summer, making me bounce on my chair while writing this newsletter.

Listen to "Motive"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, change that! πŸ˜‰

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 4 days ago.

Related Topics

Related Articles