Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! πŸ‘‹

Have you checked the animation-timeline CSS property already? Or do you wonder how React server component really work? Or are you cursed with HTML emails and want to target specific mail clients with CSS?

All the answers and much more are included in this week's Web Weekly. 🫣

The conference dedicated to enhancing the developer experience!

Before we kick things off: if you live around Toronto, Canada, and want to join me at the Reactor DX conf on July 12/13, you can get a 50% discount with the code HOTSUMMER. 🀫

I'm super duper excited about being part of this stellar line-up!

Something that made me smile this week

A pengiun standing on the floor.

There's nothing to see here. πŸ˜† It's just a penguin enjoying being tickled.

Tickle your fellow penguin

DevTools comparisons

Table showing that also Polypane and Safari show specificity in their devtools

Speaking of specificity values and devtools: Chrome isn't the only browser displaying selector specificity. I rediscovered canidev.tools, which lists developer tools and the features they support!

Compare browser developer tools

Modern CSS in real life

Pie chart showing the website using CSS (100%)

Chris Coyier was so kind (thanks, Chris!) to transform his recent talk into an article. It covers logical properties, container queries, cascade layers and all these new colors we can use today. Aaaaaand, it's packed with beautiful examples!

Use the new and shiny

Scroll-driven CSS animations

Stacked cards

Disclaimer: the following only works in Chrome 115 (which still hasn't shipped yet), but if you want to see the CSS property animation-timeline in action, spin up Chrome Canary. Bramus build some stunning examples showing off what it can do! πŸ’―

React to scroll in CSS

Why I don't need to clean up my Mac

Let me tell you a secret! I didn't need to clean up ~/Downloads or ~/Desktop for a year now because I changed a few macOS settings. There are two tricks to get rid of the problem of too many files on your hard drive.

Oldie but goldie: I blogged about my Mac and browser settings that help me avoid filling my desktop or downloads folder with junk.

It ended up on HN the other day, and because the comments didn't tear it apart, I guess it's still valid.πŸ˜…

Keep your machine clean

The wonderful weird web – Wonky

WONKY β€” An exploration of rhythm and grooves that break the rules illustration of erykah badu, j dilla on his drum machine, and stevie wonder

I'm such a pudding.cool fanboy! Their articles' storytelling and interactivity are just fantastic. This time the journey goes into rhythm and why some songs just "have the groove".

Groove and swing

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

Frontend best practices

Some things I learnt from working on big frontend codebases

Stefano Magni shared what rules you should follow when working on a massive frontend codebase, and I found myself nodding along!

Build something great

A πŸ’™ for CSS Weekly

CSS Weekly

I've been subscribed to Zoran's CSS Weekly for many years. If you like Web Weekly, it'll be right down your alley!

Check out the latest CSS news

Reminder: optional catch bindings are cross-browser supported

Editor complaining about a catch block without a parameter.

There are situations when you're trying to catch an exception but don't want to do anything with it. One of JS' quirks was that you couldn't just leave the catch empty. ☝️

Here's a trick: omit the () and use optional catch bindings. They've been cross-browser supported for a long time, and Axel Rauschmayer explains what they're about.

Ignore the error

React server components (RSCs) from scratch

In this technical deep dive, we'll implement a very simplified version of React Server Components (RSC) from scratch. This deep dive will be published in several parts: Part 1: Server Components (this page) Part 2: Client Components (not written yet) Part 3: TBD (not written yet)

I've only read the first third of Dan Abramov's guide on React server components because it's long! Very long.

But Dan clearly put a lot of effort into it. If you want to understand how React and RSCs work, make yourself comfortable!

Learn how RSCs work

Random MDN – The 🐘 in the room.

@randomMDN@botsin.space Mastodon bot.

After my RandomMDN Twitter bot was suspended, there's now a new one on Mastodon! The cool thing about Mastodon: you can also subscribe to it via RSS (add .rss to the account URL).

A huge shoutout goes to Jan for putting this back together.πŸ’™

That said, I still would love to bring a platform-independent Random MDN to life and will share my plan on GitHub soon!

TIL recap – background-repeat: round

Visualization of background-repated "repeat", "round" and "space"

Short'n'sweet: did you know that background-repeat supports other values than repeat? Now you do!

Repeat differently

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

Three valuable projects to have a look at

A new Tiny Helper

 How to Target Email Clients screenshot

If you're dealing with HTML emails, first of all, I feel for you, but if you need to target a specific email client with CSS, howtotarget.email will help you with some wild CSS queries!

Rock all these emails

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

Thought of the week

Julia Evans shared some myths about blogging, and it included this little gem. πŸ’™

Just because there is information on the internet, it doesn’t get magically teleported into people’s brains!

A song that makes you stop coding

Two puppies playing with a monkey.

I was at a techno open-air on Friday, and the DJ remixed Weezer's "Island in the sun", so that I fell in love again with this beautiful music video.

Listen to "Island in the sun"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.8k 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 week! πŸ‘‹

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly β€” Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles