Web Weekly #129

Guten Tag! Guten Tag! đź‘‹

Do you know how to track long animation frames that are responsible for a poor INP score? Have you used the text-emphasis CSS property? Or do you know about the two competing proposals for CSS Masonry layouts?

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

Martin listens to "Maustetytöt — Maailman onnellisin kansa" and says:

This song is called “Maailman onnelisin kansa” (“The happiest peoples in the world”) by Finnish pop-duo “Maustetytöt” (literally translates to “Spice Girls”). It plays with the fact that Finland gets awarded first place in the World Happiness Report year after year. The song points out in a laconic way all the things that go wrong in Finnish society, from poverty to insanely high depression rates, and then the chorus goes like “The happiest peoples in the world / you can see it in their faces / joy has no borders” and I think that is just ridiculous. Besides the political theme, I just enjoy Maustetytöt’s catchy melodies and how they manage to transform sadness and tristesse into something genuinely enjoyable.

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

Open tabs

How to detect a specific browser?

console.log(navigator.userAgentData); { brands: [ { brand: "Google Chrome", version: "123" }, { brand: "Not:A-Brand", version: "8" }, { brand: "Chromium", version: "123" } ], mobile: false, platform: "macOS" }

The answer: it's complicated because browsers lie! All. The. Time.

Niels Leenheer goes on a long journey explaining the problems with User-Agent strings and how the relatively new User-Agent Client Hints API aimed to improve the circle of lies. It's a long read that includes a good history lesson. So, if you're only curious about the modern pieces, here they are:

The social media problem

There is no way to delete a reply to your post. Let's say I post a zinger and then someone replies with a racism. I can block that person, and I won't see it any more, but the 10,000 people who follow me will still see it when they click on my post. It means that I have given that terrible person a boost in reach that I cannot revoke. It's like having dogshit on your shoe that everyone at the party can smell but you.

I'm active on social media, and, like most people, I have a love/hate relationship with it. But I've never thought about some facts Louie Mantia makes in his post.

Know what you're dealing with

Use CSS to ship good stuff

label:not(:has(:is(input,output,textarea,select))):not([for]) { outline: var(--error-outline); --error-unassociated-label: 'The "label" neither uses the `for` attribute nor wraps an applicable form element' }

Here's Heydon with some CSS to keep your sites accessible. I love everything about it!

Make CSS your watch dog

text-emphasis

The words "Hello world" where every character renders the fire emoji on top.

Do you know of the text-emphasis CSS property? If not, maybe you want to spice up your headlines and links a little...

Emphasize!

The wonderful weird web – Moodist

Moodist — Ambient sounds for focus and calm.

If you're looking for sounds to put on your headphones but you're not in the mood for music. Moodist provides a great mix of ambient sounds to get in the zone.

Turn on all the sounds

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

paint-order works in SVG and CSS!

Two headings. One has no paint-order applied and the letter visually overlap. The other one has paint-order applied the letter blend into each other.

Adam Argyle shared a handy trick for bold outline headers. How does it work? It's clever combination of -webkit-text-stroke and paint-order.

I added this paint-order example to the blog.

Control the order

Is Cloudflare really that much cheaper than Vercel?

Comparison of Vercel and Cloudflare serverless functions. Cloudflare appears to be much cheaper.

Disclaimer: The following article is from a service repackaging Cloudflare, so you must take it with a grain of salt.

But it's no secret that Vercel isn't cheap. According to the article, you can save a lot by using Cloudflare. It's a good reminder to check all the hosting options because the hosting wars are on!

Compare the prices

Frontend developer handbook 2024

Front end developer handbook

Whether you're starting your Frontend development career or have been in the game for quite a while, the Frontend Masters Frontend developer handbook covers everything you need to know.

Know what you need to know!

Random MDN – long-animation-frame

const observer = new PerformanceObserver((list) => { console.log(list.getEntries()); }); observer.observe({ type: "long-animation-frame", buffered: true });

From the unlimited MDN knowledge archive...

Google recently rolled out the INP update punishing slow and JS-heavy sites. But how can you evaluate which scripts block the next paint in your sites?

Use a PerformanceObserver to watch out for long-animation-frame events. đź’Ż

Track the slow JS

The MDN page doesn't show compat info yet, but it should be supported in modern Chromiums.

TIL recap – Labels trigger states for associated inputs

Example UI with the paragraph "Hover the label and see the input change its background"

CSS fun fact: did you know labels trigger CSS states for the associated inputs?

Now you do!

Discover the fascinating

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

New on the platform

.masonry { display: masonry; masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }

Last week, I shared that Safari ships Masonry grid layouts (grid-template-rows: masonry;) as part of their recent tech preview. That's a reason to party, but unfortunately, there's controversy between the party people.

The Chrome team argues that putting masonry into the grid spec is a mistake and prefers to create a new display property (display: masonry;). Ouch...

It might take a while until there's an agreement.

Understand the Chrome side

Three valuable projects to have a look at

A new Tiny Helper

MarkdownDown — Convert any webpage to a clean markdown w/ images downloaded.

If you're looking for a quick way to transform HTML back to markdown, "MarkdownDown" will do this. As always with these tools, it's not perfect, but I'll give you a massive headstart!

Transform HTML back to the source

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

Thought of the week

Here's Eric Bailey explaining the problem with doing a good job. So true!

Because it works, nobody pays attention to it.

Do you enjoy Web Weekly?

đź’™ Tell your friends on social media about it. Here's the web version to share. Thank you!

This is all, friends!

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! đź‘‹