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.

Guten Tag! ๐Ÿ‘‹

Do you know what's new in ECMAScript 2023? Or are you still confused about all these CSS color spaces? Or want to learn how to shrink your custom web fonts?

All the answers and much more are included in this week's Web Weekly. ๐Ÿซฃ

Three weeks ago, I published a post getting into variable fonts, the Roboto font, and its GRAD axis that enables you to transition font weights without characters getting wider.

Blog component with a slider to control the `GRAD` axis.

The post includes an interactive component to see the font feature in action. And this all worked perfectly, but I didn't feel great when I deployed it.

Why? Because I shipped a 780kB heavy Roboto font for a tiny demo component. That's five times my blog's overall page weight.

So I decided to squeeze out as many bytes of Roboto as possible, and guess what? I shrunk it down to 52kB for my blog post component!

Table showing file savings of subsetting Roboto and remove variable axis.

How? I learned that to optimize your variable fonts, there are two tricks:

I'm still amazed by the result. And with this, happy font optimizing!

Something that made me smile this week

Albert Einstein wearing sneakers.

Let me share Albert Einstein, Thomas Edison, and Madame Curie wearing their favorite sneakers. ๐Ÿ˜†

Love your sneakers

LERP

Codepen with the headline "Follow the mouse - with lerp"

LERP stands for linear interpolation, and Rach Smith shared one of these snippets that you'll carry around from project to project.

What does it do? It makes your animations a tiny bit smoother! ๐Ÿ’ฏ

Animate with style

TIL โ€“ @media (update: fast)

  // If screen update is NOT fast (either slow or print)   // Disable animations   @media not (update: fast) {     img {       animation-play-state: paused;     }   }

The Chromium preview version 113 ships a new media query โ€” update. According to MDN, @media (update: slow) matches e-book readers or severely underpowered devices.

I immediately checked if I could detect Chrome's new Energy saver mode with the media feature. Unfortunately, that's not the case in Canary.

Nevertheless, it's good to know the feature, and Nicolas Hoizey describes how you can use it today!

Adopt the update

A creatively styled details element

A card with the headline "Jupiter" and a closing button in the top-right corner

The details element is commonly used to toggle information such as FAQs. Most of the time, it's visualized with a triangle and opens on click automatically.

Robin Rendle styled it in another way, and I love everything about it!

Style your details

Stay interviews

Exit Interviews ask why people are leaving, and Stay Interviews ask why they keep working here. I just learned the term today and Iโ€™m already a fan.

For people managers: a stay interview is such a wonderful idea. ๐Ÿ’™

Ask why people stick around

The wonderful weird web โ€“ floor796

A grid full of people doing very different things.

There's so much going on on the 796th floor of a comic space station that I've just spent ten minutes discovering all the details.

The site is a hobby project, all the animations are rendered onto a canvas element, and the characters are hand-drawn. ๐Ÿ‘

Watch what's up in space!

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

For the TS users ๐Ÿ‘‡

Comparison of two intellisence errors. One is barely readable whereas the other is nicely formatted.

Do you struggle with decrypting TypeScript errors in VS Code? Yeah, me too!

But I learned about a new VS Code extension that makes TypeScript warnings readable.

Understand all these TS errors

How to access phone contacts with JS

const supportedProperties = await navigator.contacts.getProperties();   if (supportedProperties.includes("email")) {     console.log("You've got mail!");   }

I have yet to use it, but the Contact Manager API seems like a wonderful web feature for mobile applications to access information stored in your phone book quickly! ๐Ÿ’ฏ

Access your contacts

The AIlephant in the room

All of these uses are not what AI is actually good at, and how it can be helpful. They can blind you to the real power of these tools. I want to try to show you some of why AI is powerful, in ways both exciting and anxiety-producing.

I was (still am a little) terribly annoyed by the AI evolution. It's scary, and there's just too much going on. But I decided to lean in.

If you're as confused as I am about all these buzzwords, Ethan Mollick does an excellent job explaining what ChatGPT, Google Bard, Midjourney, and all the other tools can do today.

Keep up with the robots

What's the deal with oklch()?

HSL and OKLCH colorspaces visualized.

Do you keep track of all these new CSS color possibilities? There's lab(), lch(), and then there's even oklab(), and oklch(). And some can display colors we haven't seen on the web before. ๐Ÿคฏ

Keith J. Grant does a great job explaining oklch(), and I've put it on my "play around TODO list".

Color up

New in ECMAScript

const original = \[1, 2, 2, 4\]; const withThree = original.with(2, 3);  console.log(original); // \[ 1, 2, 2, 4 \]  console.log(withThree); // \[ 1, 2, 3, 4 \]

There's news in JavaScript land: the ES2023 features set has been decided, and it comes with Array.findLast, Hashbang Grammar, symbols as weakmap keys, and, most excitingly, new array methods (toReversed, toSorted, toSpliced and with).

Paweล‚ Grzybek summarizes what's new splendidly! ๐Ÿ’ฏ

Adopt the new and shiny

Random MDN โ€“ Symbol.asyncIterator

Screenshot 2023-04-23 at 20.49.16const myAsyncIterable = {   async *\[Symbol.asyncIterator\]() {     yield "hello";     yield "async";     yield "iteration!";   }, };  (async () => {   for await (const x of myAsyncIterable) {     console.log(x);   } })();

From the unlimited MDN knowledge archive...

Have you used async operators (for await (const x of y))? And if you did, do you know that you can use Symbol.asyncIterator to create async iterables? Now you do!

Iterate asynchronously

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap โ€“ text-transform: capitalize;

.something {   text-transform: capitalize; }  /* "hello world" will be displayed as "Hello World" */

This week's TIL is very quick: did you know that capitalizing text with CSS is a thing? ๐Ÿ˜…

Capitalize

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

Three valuable projects to have a look at

A new Tiny Helper

The HD gradients tool with various controls.

Speaking of colors: Adam Argyle released a new gradient tool that supports all these new color spaces! Say hi to gradient.style

Create stunning gradients

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

Thought of the week

Whether it's about the never-ending todo list, potential blog posts, or side projects that might be a hit, as Derek Sivers says, things are only worth something when they're paired with actions.

Ideas are worth nothing unless executed.

A song that makes you stop coding

Amistat on stage

I've been out to see the Amistat brothers here in Berlin, and it has been one of the best concerts in a long time. The melodic guitar music made me even shed a tear or two.

Listen to "Listen to the silence"

This is all, friends!

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

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