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, party people! 👋

Are you desperately waiting for CSS state queries? Do you wonder how to speed up your sites? Or do you want to know how to build web apps that work on flaky connections?

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

Roman Komarov published a real CSS custom property head-scratcher.

Let’s look at the first two declarations of our first code example:  "--level: var(--level--default); --level--default: var(--level,);"  Wait a minute… Did we set --level to --level--default, and then… set --level--default to the --level? Isn’t that… invalid?

I mean, look at it! 🤯

The article describes how you can use cyclic CSS properties as value toggles. I'm amazed (and confused)!

<div class="with-some-toggles" style="   --toggles: var(--is-pink); "></div> <div class="with-some-toggles" style="   --toggles: var(--is-round) var(--is-pink); "></div> <div class="with-some-toggles" style="   --toggles: var(--is-round) var(--has-shadow); "></div> <div class="with-some-toggles" style="   --toggles:     var(--is-round)     var(--is-pink)     var(--has-shadow); "></div>

It's a good explainer of the custom property inner workings.

And while being fancy, I wouldn't use this approach, because it's too clever. But hey, it's good to know about these tricks!

Nevertheless, Roman's blog is worth a follow because it's full of these nerdy CSS techniques. Here's another post about fit-to-width text with pure CSS without hardcoded parameters.

Example of scroll-to-fit text css

Something that made me smile this week

Realistic looking QR codes.

That's what I call creative AI use. This article describes how to create stunning-looking QR codes that still work!

And if you want to create your own QR Code art, use this generator. But yeah... my Berlin QR code doesn't look that great. 😅

Scrappy Berlin QR code

Going against stress-based business models

Stressful booking.com UI examples

Like everybody else, I hate booking a stay at booking.com. The site triggers so much anxiety. Alex Charlton took the matter into their own hands and built a Chrome extension to remove and change all these persuasive UI elements.

Destress the internet

Beautiful blurred borders

A photo with blurred edges.

I love a bit of UI sugar. Artur Bień shared how to create blurred borders with backdrop-filter and clip-path. The technique uses background images and two DOM elements. Would this effect be possible without one img element, too?

Add beautiful blurred borders

While not the same, this blurred border effect reminded me of natural SVG shadows. Learn how to create these on the blog. 👇

A color wheel with a colored shadow.

Will state queries become a thing?

Example of a state "stuck: top" CSS query

Disclaimer: while new CSS features are shipping daily right now, the following is only a call from the future.

The Chrome team is experimenting with a new type of container query. We have size queries (@container card (min-width: 400px)). We have style queries (@container stats style(--theme: dark)). And maybe we'll get state queries (@container header state(wrap: true)) soon, too!

Ahmad Shadeed looked into the future. 👇

React to UI state

XML doesn't have to be ugly

My styled RSS feed.

I've spent way too much time fiddling with XSLT over the weekend. Why? Darek Kay reminded me you can style XML files (your RSS feeds and sitemap).

It's super unimportant because RSS or Sitemap files are only read by machines, yet my styled feeds spark a lot of joy!

Style your RSS feed

If you're reading the post via RSS, please tell me I didn't break my feeds. I'm a little worried. 😅

The wonderful weird web – world maps are a lie

Worldmap projecting European contries onto Africa.

Did you know that the world map you see every day isn't accurate? Yeah, that's right! The Mercator projection makes Greenland, Antarctica, Canada and Russia larger than they actually are. 😲

Discover the world's proper size

If you want to read more about this fact, Tomas Pueyo shares a ton of misleading examples of how we see the world.

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

TIL — EventTarget is a web-native event emitter

Prototype chain of HTMLElement inheriting from Element, Node and EventTarget.

How often did you install an event emitter library in your Frontend project? I surely did this countless times.

This week I learned that JavaScript comes with a native event emitter.

Use the platform

Improve your core web vitals

9 most effective  Core Web Vitals optimizations  for 2023

If you're keeping an eye on your site's web performance and core web vitals, Barry Pollard's deck shares tips and tricks on improving the user experience. ✨

Speed up!

Even though it's still Chromium-only, fetchpriority is a handy way to prioritize your critical assets.

The "version skew" problem

A graphic explaining deployment-dependant routing

Malte Ubl blogged about the problem of version skew. And it's a tough one to solve! So, what's the issue?

If you're working on Frontend applications that run in the browser for a long time, your API and JS app likely run out of sync because the site isn't refreshed. You could now show a little "Hey, please refresh!" message, but this approach is disruptive and not great. Are there better ways to work around this problem?

Our friends at Vercel are experimenting with a new feature called "Skew Protection" to solve this problem on an infrastructure level. Wild!

Route your Frontend on the deployment level

Should web apps be local-first?

Johannes Schickling on stage explainging a local-first app.

Short answer: YES! But what's a local-first app?

You might now think, "Hold on — we have offline-first apps!", and that's right. But do we? When PWAs became a thing, we all experimented with offline experiences, but we never really made it beyond showing an offline banner and rendering an "Oops, you're offline" shell.

Johannes Schickling argues it's time to try this approach again and make complex web apps work without a connection. Yes, please!

Learn about local-first

Random MDN – console.group

Example showing the rendered output of `console.group`

From the unlimited MDN knowledge archive...

Are you a person using console.log to debug things? (aren't we all?)

Did you know that you can group logs with console.group? Now you do!

Group all these messages

TIL recap – overflow: hidden clips at the padding box

Example showing that "overflow: hidden" hides things on the padding box.

Three years ago, I learned that overflow: hidden clips at an element's padding box. When does this matter? Well... if you're using three gradients on a single element, this behavior might surprise you!

Be aware of box-model when hiding stuff

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

Three valuable projects to have a look at

A new Tiny Helper

An SVG path visualized.

Suppose you want to understand how SVG paths work; the SVG Path Visualizer is a handy tool helping to understand all these cryptic numbers.

Understand SVG paths

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

Thought of the week

Una Kravets spoke at CSS Day, and there's nothing more to say about the CSS revolution that's currently happening.

CSS has become a more complete mature language, that works better with the way we build websites today.

A song that makes you stop coding

Ost & Kjex - Mosambiquetravellplan

This week's song is chaotic, but what shall I say? I'm all in if there's a smooth electro beat, some vocals, and a piano driving the hook line!

Listen to "Mosambiquetravellplan"

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! 👋

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