Web Weekly #130 (#blogPost)

Do you know how ARIA live regions work? Or do you sometimes struggle to center text vertically? Or want to get started with scroll-driven animations but don't know how?

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 four more songs left in the queue.

This Web Weekly issue is already beefy enough, so I'll skip a long intro and only open with some single-purpose URLs for your daily internet use.

• justforfunnoreally.dev
• dontasktoask.com
• nohello.net

I just love it when I can reply someone with a URL.

Sponsored

Learn to build and publish a component library that works in any web framework

The interactive Component Odyssey course will teach you everything you need to build a modern web component library. In over 60 lessons, learn how to build, style, and publish components that are interoperable with React, Vue, Svelte, and any other web framework.

Save yourself and your company weeks of development time by betting on the web and browser-native tools. Start building components your users will love. Web Weekly readers get 10% off with the discount code WEBWEEKLY01.

Become a future-proof web developer today!

• ismyhostfastyet compares TTFB timings of common hosters.
• TIL — border: none is inaccessible in High Contrast mode.
• Snippet: how to select html or :root with a single character.

In rare cases like AB testing, you might want to delay rendering to avoid layout shifts. But how do you do this without blocking the HTML parser?

I can only think of a not-so-great opacity: 0 hack, but luckily, there's a new property on the horizon — blocking: render.

Block rendering*

✱ but only if you know what you're doing.

I still haven't made it to play with scroll-driven animations (Chromium-only), but when I do, I'll definitely start by watching Bramus' new, free course.

Make it fancy

And here's Bramus again: CSS specificity and the cascade are powerful but also confusing.

Three common but wrong specificity thoughts are:

• Specificity is a decimal score.
• Using the style attribute adds Specificity.
• Using !important adds Specificity.

If you think one of these is true, this post if for you.

Refresh your CSS understanding

I just set up a GitHub repo that visits my site, takes screenshots and commits them to the repo. I love to archive things.

If you want to document how your sites change over time, Alex wrote an excellent tutorial about it.

Take pictures

I don't know this map's data source, but following all the Internet's links is just magical.

Inspect the web

If you wonder how ARIA live regions work and how you should use them to make your site's updates more accessible, Patrick tested screen reader / browser combinations and shares recommendations.

Announce important stuff

If you're setting rel="noopener" on your links to prevent access to window.opener, stop it and save some characters.

Use the default

Patching globals might seem like a reasonable approach to add functionality to the platform, but usually it fights back quickly. It puzzles me that JS ecosystem heavyweights Next.js, React and Bun thought it was a good idea. This post explains what to do instead. 💯

Don't mess with globals

I'm not usually a fan of these "centering things in CSS hard" jokes, but last week, I desperately tried to align an icon next to a custom font. And what should I say? I gave up...

Niki came along just in time with some font magic so that I can tackle things again next week.

Center all the things

Thanks Simon, for sending this article over!

From the unlimited MDN knowledge archive...

Here's a fun one: you probably know that when you scale an element via CSS, it doesn't affect its layout size.

Sometimes, I find this confusing, but if you want to scale the actual size, zoom does this. And the CSS property is just about to enter the baseline.

Chrome supports it since version 1 (#wat?), Safari joined the party with version 3.1 (#wat^2)? and now, in 2024, Mozilla decided to prioritize zoom with Firefox 126. 😅

Make things bigger

Let me know if you know why this "old school" property was considered now. I'm super curious!

I tried to pair !important with custom properties a while ago and ran into a big surprise. If the code above surprises you, this post is for you.

Learn about the cascade

It's still in progress, but Firefox, as the missing engine, started working on transition-behavior. What is it good for?

You probably know the problem of setting opacity: 0 and display: none in the same go, making a smooth transition impossible. transition-behavior allows you to transition opacity and flip over display once opacity is set to 0. Magic!

Transition the display property

• mezod/awesome-indie – Resources for independent developers to make money.
• ente-io/ente – Fully open source, End to End Encrypted alternative to Google Photos and Apple Photos.
• WickyNilliams/cally – Small, feature-rich calendar components.

If you're working with SVGs and are frustrated that design tools aren't showing you code (at least I haven't discovered these features), SVGViewer lets you tweak and preview SVGs with code. This is golden! 👇

Tweak all these icons

💙 If you learned something from this issue, give back and support me with a small donation on Patreon.

These small gestures really help me stay motivated. 😊

I use a AI daily, but there's nothing more to add to this quote from Molly White's article.

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

If you think there’s something that needs to be improved or something that you enjoyed, 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! 👋