Web Weekly #106

Guten Tag! ๐Ÿ‘‹

Do you notice the performance impact of inline SVGs and are looking for solutions? Do you wonder how to evaluate the performance impact of an npm package? Or are you confused about self-closing HTML tags such as <br> (or is it <br />?) and need to know when to use which?

This week's Web Weekly includes all the answers and much more. ๐Ÿซฃ

You might have noticed that I took a three-week-long Web Weekly break. The main reason was that I traveled to Canada to give a new talk โ€” Back to boring (part two). And I had such a blast with countless wonderful people! ๐Ÿ’™

During the talk prep, I finally made it to play around with view transitions. And this stuff is nothing but incredible. Only a bit of vanilla spaghetti JavaScript (example CodePen) is needed to transition elements from A to B. I can't wait for the web to look smoother than ever before. Currently, they're only supported in Chrome; but let's hope the other browsers agree they're a good idea!

Example view for view transitions in which elements animate from one point to another one.

"The new web" isn't about all these Chrome-only features, though. I'm super excited about relative colors in CSS. And if you're using Safari, you can see a color palette entirely generated via CSS on the blog now.

Relative colors examples showing CSS to generate a color palette with CSS.

But anyways, I've created many new web stuff demos, and I'll share them one by one in the upcoming Web Weeklys.

Now, let's get into the hottest Frontend stuff of the last three weeks!

Something that made me smile this week

An input field with a Giraffe.

From the department of useless things on the web that spark joy: Stanko Tadiฤ‡ shared how to let a Giraffe walk next to your cursor when filling out forms. ๐Ÿซฃ

Make your forms fun!

Quick links

Are root container queries a thing yet?

Is it safe to contain the root element? ๐Ÿ‘๐Ÿผ It should be. ๐Ÿ‘Ž๐Ÿผ But it isnโ€™t. ๐Ÿ‘๐Ÿผ Unless youโ€™re careful.

Now that we're having size container queries, I want to reduce my media query usage drastically. Container queries are what we wanted in the first place, right?

I also plan to use container queries on the root element, but unfortunately, I discovered it's not that easy. Miriam Suzanne shares the pitfalls of container queries on the root element.

Be careful with root container queries

A massive bug in the npm registry

npm example package with inconsistent data.

The JavaScript ecosystem isn't known for its outstanding security practices, but Darcy Clarke's recent bug discovery is beyond wild.

In a nutshell, you can't trust the package metadata shown on npm.

Be aware of the risk

The leveled-up Node.js testing game

import { describe, test, mock, before, after } from "node:test"; import { deepEqual } from "node:assert"; import os from "node:os";

But speaking of the Node.js ecosystem, do you know that Node.js comes with built-in test utilities? Paweล‚ Grzybek published a quick-to-read summary that might motivate you to drop some testing dependencies.

Test things without a library

Node 20.4 even comes with MockTimers.

What makes interactions intuitive?

iPad app with a visualized swipe gesture.

Rauno Freiberg shared tons of UI interactions that make a user interface feel natural. Get ready; there's a lot of eye candy in this post.

Build beautiful UIs

The wonderful weird web โ€“ The password game

A password field showing a validation rule to include on of the sponsors (pepsi, starbucks, shell)

Neal Agarwal released another fun experiment โ€” a UI with the hardest password validation rules ever. ๐Ÿ˜… How far did you make it?

Pick a secure password

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

HTML elements referenced in the global window object

&lt;button id=&quot;myId&quot; onclick=&quot;heyThere()&quot;&gt;Click!&lt;/button&gt; &lt;script&gt; function heyThere() { alert(myId.innerHTML); } &lt;/script&gt;

Oldie but goldie: do you know that HTML elements leak into the global window object with their id? While this behavior is handy, it can lead to unwelcome surprises. Matteo Mazzarolo describes what you need to look out for.

Be aware of variable shadowing

The problem of inlined SVGs

SVGs in JS have a cost and SVGs do not belong into your JS bundle. Itโ€™s about time to bring back SVG-in-HTML. Letโ€™s take a look at better techniques for using SVG in JSX, while keeping our JS bundle small and performant.

Jacob GroรŸ reminded me that inlined SVGs come with a cost, and I deployed a fix to my site to get around the "extensive DOM size" Lighthouse warning that's been bugging me for ages!

If you're inlining all your SVGs, this post is for you!

Don't inline your SVGs

Self-closing HTML tags are mostly meaningless

Example showing that self-closed divs don't have any effect.

Jake Archibald published a real banger getting into the argument of self-closing HTML elements, and it's an excellent read with lots of explanations and references.

Suppose you prefer to read a tl;dr; head over to the blog. But disclaimer: this post might affect your worldview. ๐Ÿซฃ

Don't close HTML elements

Random MDN โ€“ @counter-style

@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; } ul { list-style: thumbs; }

From the unlimited MDN knowledge archive...

Safari 17 (currently in beta) will start to support @counter-style, which you can use to define... well your list counter styles. It's a tiny thing, but I'm looking forward to it to spice up my lists.

Count with style

TIL recap โ€“ split separators

Example showing how to use String.split and include the separators in the result.

Here's some JS trivia: do you know that you can keep the separators when using String.prototype.split? Now you do! ๐Ÿ˜‰

Keep the separators around

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

Three valuable projects to have a look at

A new Tiny Helper

pkg-size โ€” Find the true size of an npm package. Why?

pkg-size lets you figure out how much an installed npm package will add to your Frontend bundle. And while it's not the first tool giving this info (Bundlephobia anyone?), I'm sure it's the first to run npm install in the browser. ๐Ÿ˜ฒ

Watch your bundle!

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

Thought of the week

"If JavaScript doesn't bring users joy, thank it, and throw it away." Marie Kondo

Okay, okay... It might be that Addy Osmani tricked us in his new "The cost of JavaScript" talk, but this probably made-up quote is too good not to include here!

A song that makes you stop coding

Hundreds cover.

I've been listening to Hundreds for a very long time now and "Happy virus" is smooth and chilled electro track that makes me bounce!

Listen to "Happy virus"

This is all, friends!

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