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.

Happy Monday Tuesday, party people!

Major announcement: we've seen the sun here in Berlin the last few days. It makes such a difference in my mood. Life's just better when the sun is shining. Wherever you are, I hope it's sunny, too!

This time Web Weekly includes:

  • the dialog element
  • creative ways to speed up your builds
  • new CSS color features

... and, as always, GitHub repositories, a new Tiny Helper and some music.

On a personal note

Articles โ€“ Keep writing, writing, writing...

I spent some time rolling out a minor redesign of my website this weekend. It has more gradients and new buttons now. Additionally, it throws more confetti, and I felt hilarious shipping an easter egg in the browser console (Chromium only).

It's the tiny things that spark joy!

Besides that, I'm packing boxes and getting ready to move apartments in two weeks. I'm excited!

And lastly, my little flatmate, the Random MDN Twitter bot, gained 2.8k new followers in the last two days. This is a lot of people being interested in random web development facts! I decided to add an MDN section to this newsletter. Let me know what you think!

Something that made me smile this week

A bird with arms taking a selfie

Apparently, "birds with arms" were a thing in 2020. I missed this trend, but it is so funny!

Watch some birds

How to give browser feedback

Talking shit doesnโ€™t work โ€“ Complaining on Twitter sure does feel good but it doesnโ€™t do much other than burning bridges and burning through peopleโ€™s patience. I guess you may also get hit with the mute button which is probably the opposite effect you were hoping for. Despite how good or valid your complaint is, combativeness results in immediate dismissal by your target audienceโ€ฆ not once, but for years. People hold grudges for a shockingly long time.

I love Dave's take on giving browser feedback. Complaining and screaming "ABC is the new IE!" doesn't work. Surprise, surprise! There are other things you can do. ๐Ÿ‘‡

Give constructive browser feedback

The dialog element is coming

We believe the web deserves a simple and bug-free solution for these use-cases. Safari Technology Preview 134 and Safari 15.4 beta introduces the dialog element for this reason!

With Safari shipping the dialog element, a new way of displaying dialogs is supported across all major browsers. I can't wait to play around with it!

Implement the dialog

โ€œEvergreenโ€ Does Not Mean Immediately Available

Like me, my coworker also uses a top-of-the-line laptop to get things done. This means that the laptop can go for months without needing a reboot. Ironically, this might be a situation where a craptop is conditionally forced to have a faster browser upgrade path.

As you see above, I often share new browser APIs and features telling you that they're now cross-browser supported. And I do believe that it's essential to be aware of these things, but as Eric points out, just because a feature is supported in all the latest browser versions, it doesn't mean you can use it safely everywhere.

Bet on progressive enhancement

Lightning round interview questions

But it turned out to be really helpful, and at a couple of these interviews, my interviewer actually said, โ€œWow! Thatโ€™s a lot of questions!โ€ (it was 2 full pages) and offered that if there were any we didnโ€™t get to, that I could send them over email.

As you may know, I'm interviewing for a new job. Dave shared a handy list of questions that help determine how a company works internally.

Ask better questions

Google Calendar features you probably don't use

5 Google Calendar features every remote or hybrid team needs

If you're using Google Calendar at work, this post is worth your time. I discovered multiple handy functions that I didn't know existed.

Level up your calendar game

Creative ways to speed up your builds

Lee Robinson and Jared Palmer in a coding live stream

I haven't worked in a large-scale monorepo yet, but I've seen a lot of buzz around turborepo. Turbo is a performant task runner for repositories holding your API, website, design system and overall project code. Jared Palmer and Lee Robinson walk through the project in a nifty demo session.

Turbo's task runner functionality reminds me of the old Grunt days, but it also introduces a new approach to build systems. Turbo's remote caching stores your build artifacts in the cloud so that your CI/CD system and coworkers don't have to rebuild things you already built on your machine. This approach is new and sounds wild, but I think Jared is onto something here!

Cache your build artifacts

Web APIs on the server-side

A list of every web API in Deno

When Deno was announced, Node.js inventor Ryan Dahl shared that he aims for building a faster, more secure and easier-to-handle Node.js. Deno supports JavaScript, TypeScript and WebAssembly. I see more and more people talking about it.

Whether you're happy with Node.js or not, Deno's invention is fantastic for the entire web development ecosystem. Similar to the browser market, competition is a very good thing. Competition leads to innovation!

Deno's stand out because the project already implements multiple APIs you're familiar with from the browser world.

Have a look at it (you might find some new browser APIs, too).

Discover browser APIs

All the new color stuff โ€“ it's so confusing

First, a major heads up. This stuff is so complicated. I barely understand it.

There's a lot of movement in the CSS color space. There's display-p3, lab, lch and more. New color spaces also can express colors we haven't seen before. What? ๐Ÿคฏ

Chris Coyier shares his journey of making sense of all this new color stuff. I loved Chris' tone in the article. He's confused. So am I! Let's make sense of it all.

Learn about new CSS color functionality

Color conversion vrom lch to rbg showing that not every color can be expressed in rgb.

Lea Verou also created a handy lch color picker that shows colors unavailable in rgb.

TIL - Safari sometimes changes the default font size

The reason for this, is that Mobile Safari increases the default font-size when you switch a website from portrait to landscape.

Kilian shared some "interesting behavior" in mobile Safari. The browser changes the default font size when switching from portrait to landscape. ๐Ÿ˜ฒ

Learn more about Safari

Random MDN

๐Ÿฆ– Random MDN: color-scheme ๐Ÿฆ–  https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Learn more about color-scheme

TIL recap โ€“ How to preload responsive images

HTML Link element to preload a responsive images

Did you know that you can preload responsive images using the link element? Now you do. ;)

Preload responsive images

If you learned something new, no matter if small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

A new Tiny Helper

fancy border-radius generator that allows to create blob like shapes with CSS.

Did you know that the CSS border-radius property accepts multiple values and even slashes? That's right โ€“ you can create blobby shapes with a line such as border-radius: 63% 37% 42% 58% / 34% 30% 70% 66%;.

Looks too complicated? I feel the same and the Fancy-Border-Radius generator can help out here.

Create blobs with CSS

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

A quote to think about

You might know Ali Abdaal and David Perell. The two successful content creators serve two different channels โ€“ Ali focuses on YouTube and David is the "writing guy". They discussed how to succeed in both worlds and shared the following quote.

Do what looks like work to others but feels like play to you.

A song that makes you stop coding

Cover showing a man standing in front of the Eiffel tower โ€“ The Kooks "Oh laa"

This week's song is an absolute Indie classic. The Kooks "Oh laa" is a hit that I can't just play in the background.

Listen to "Oh laa"

Thank you for reading!

And that's a wrap for the fifty-seventh Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. โ™ฅ๏ธ

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

Stay safe, and I'll talk to you next week! ๐ŸŽ‰ ๐Ÿ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 19 days ago.
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