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! πŸ‘‹

When will we be able to animate the display property? What's CSS @starting-style? And when will the HTML search element hit the baseline?

This week's Web Weekly includes all the answers and much more. Enjoy!

Artur BieΕ„ described how to use SVG filters to mask out a DOM element's black pixels. Wild!

A demo component where all black pixels are transparent.

The filter uses feColorMatrix, and oh boy... I've no idea how this works. πŸ˜…

SVG Code using FeColorMatrix

But SVG filters aren't only about masking out pixels. My favorite SVG filter use case is making components naturally reflect their colors.

A colorful component casting a colorful shadow.

And then there's fancy stuff, like Robin Rendle's SVG noise filter animation.

Distorted text.

The filter's rough and artsy. I love it!

I doubt I'll start creating these wild effects myself soon, but I started collecting beautiful SVG filter examples. Do you know any more fancy filters?

Head over to the blog to see these three examples live!

Web components are great for the enterprise

If your components only have one place to go, then you probably don’t need Web Components. Even if your components service a couple different apps or product teams that all use the same uniform tech stack, you probably don’t need Web Components.

As a "love the platform" person, I still secretly want web components to win, but who knows if and when this will happen. Dave Rupert shared a very convincing take, though.

If your code is supposed to work in Drupal, 11ty and whatever custom web stack is present in your company, web components are the most portable choice. Word!

Ship components that work everywhere

Server-rendering web components

Enhance vs. Lit vs. WebC: Who Wins?

Speaking of web components; server rendering them remains a big problem. But how does that work? And if I wanted to render components on the server side, do I do this by hand or bet on a framework?

Jared White draws a surprisingly clear conclusion by comparing Lit, WebC and Enhance.

Render HTML

Chrome deprecates unload

However the unload event is extremely unreliable. In most browsers the code often won't run and it has a negative impact on a site's performance, by preventing the usage of bfcache (back/forward cache).

The unload JS event was the only way to send data to the server when someone closed a website. Chrome will slowly start deprecating the event. Why? The unload event is unreliable and prevents the bfcache (back/forward cache).

Barry Pollard and DemiΓ‘n Renzulli announce the change and explain possible alternatives (visibilitychange and pagehide).

Don't unload

How does Next.js do caching?

Very complex diagram showing Vercel/Next.js cachin

This is how.β˜οΈπŸ˜…β˜οΈ

But jokes aside, running Next.js apps on Vercel has quite some hidden complexity. The following post is an interesting read about the framework's caching strategies.

Cache it

The only thing bugging me is that Next.js fiddles with extends the global fetch method. We've been there before: changing and extending native methods can become a massive foot gun.

The wonderful weird web – Optical Toys

Many colorful dots on a gray background.

Optical Toys is a collection of optical illusions. Not all worked for me (the duck only rotated in one direction for me πŸ˜…), but it's a wonderful gathering of visual trickery.

Trick your brain

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

Closures in React

Deep dive into closures in JavaScript and React: how they appear, why we need them, what stale closures are, and how to prevent and fix them in React.

Knowing the difference between React's useMemo and useCallback will never make it into my muscle memory, but Nadia Makarevich's post was definitely of help!

Get into React's nitty-gritty

The sad story of RSS

How Google helped destroy adoption of RSS feeds

I'm following a gazillion RSS feeds (if your blog isn't on the list, please shout! πŸ˜‰) to stay up to date. RSS is this wonderful and independent tool to follow indie blogs without an algorithm in between. There's no curation. It's just me following good stuff!

And yet, I'm discovering blogs without an RSS feed all the time. Why is that? Was it because Google Reader was killed? The following post lists Google decisions that did everything but help with making RSS mainstream.

Learn what happened

Chrome's new entry and exit animation features

@starting-style {   .item {     opacity: 0;     height: 0;   } }

Transitioning elements into and out of the DOM was always iffy. View transitions make things easier now, but more web platform features are on the horizon.

With Chrome 116, you can animate the display property. Whoot?

And then, looking more into the future, with Chrome 117, we'll get @starting-style? Double whoot?

Element entry and exit animations are coming, and Una Kravets has us all covered.πŸ‘‡

Animate! Animate!

Random MDN – address

Example usage of the address element

From the unlimited MDN knowledge archive...

Have you ever used the address HTML element? Me neither...

Provide your contact details with style

TIL recap – Array.from's 2nd argument

Array.from(   {length: 7},   (v, i) => String.fromCodePoint(     129300 + Math.floor(Math.random() * 20)   ) );

Did you know that Array.from accepts a mapping function as 2nd argument? Now you do. πŸ˜‰

Create and map

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

New to the platform

Three valuable projects to have a look at

  • ai/size-limit – Calculate the cost to run your JS app or lib to keep good performance.
  • egoist/tsup – Bundle your TypeScript libraries.
  • jarun/nnn – The unorthodox terminal file manager.

A new Tiny Helper

Hand written "web weekly"

The image above is no gif or mp4. It's an SVG with embedded @keyframes animation. If you want to create similar effects, it took me twenty seconds with "SVG Drawing".

Sign your sites

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

Thought of the week

From the world of web perf shenanigans: Scott Jehl argues that a site should load before you can say CLS. How long is that? Stoyan Stefanov took a scientific approach to answer this question.

A website should load before you can say cumulative layout shift.

A song that makes you stop coding

I've always liked sharing music because Web Weekly shouldn't only be about the nerd stuff. But lately, I need help with finding new music.

Here's an idea: should I close the newsletter with tunes from the Web Weekly community? What track are you vibing lately? Or what's your all-time focus song?

Let me know, and I'll include it in the following Web Weeklys.

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 4.1k 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 1 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.