Web Weekly #129 | Stefan Judis Web Development
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.
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:
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.
Here’s Heydon with some CSS to keep your sites accessible. I love everything about it!
Do you know of the text-emphasis
CSS property? If not, maybe you want to spice up your headlines and links a little…
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
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.
What are your favorite internet corners? Send them my way, and I’ll include them in Web Weekly!
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.
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!
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.
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. 💯
The MDN page doesn’t show compat info yet, but it should be supported in modern Chromiums.
CSS fun fact: did you know labels trigger CSS states for the associated inputs?
Now you do!
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.
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
Here’s Eric Bailey explaining the problem with doing a good job. So true!
Because it works, nobody pays attention to it.
💙 Tell your friends on social media about it. Here’s the web version to share. Thank you!
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! 👋