Guten Tag! Guten Tag! 👋

Do you wonder how to create Apple's liquid glass effect with web technologies? Do you know what's included in ECMAScript 2025? Or what's the best way to handle focus when opening a modal?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Luciano listens to "GUNSHIP - Monster In Paradise":

Here's a random suggestion for those who don't mind a weird mix of electronics, rock and even Jazz from a band I have been listening to lately!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.

When building layouts I hold the strong opinion that components shouldn't include (outer) margins. I'll die on this hill and this is all thanks to Kyle. Here are two posts that explain why margins should be treated with care:

Prefer Gaps To Margins
No Outer margin

Margins define the components' outer spacing and frankly, it shouldn't be the component's responsibility to define how far away it should be from other elements. If you compose different elements, outer margins lead to nothing but headaches.

What's a better approach?

Creating layout containers that control the spacing between elements. If you're working with a flex or grid container, gap is your friend. All elements will then be self-contained and can be moved around and aligned by the surrounding element. Win win!

What else could you do?

You could also celebrate the eleven-year anniversary of the lobotomized owl which automatically applies a margin-top to element following other elements.

And the beauty about the owl selector is that in combination with a custom property for the margin, you can apply different margins from the outside—from the layout container. Here's a glorious snippet from Andy.

There, the layout container modifies the spacing of certain elements by setting a custom property. This is so much nicer than elements pushing themselves away. I love this!

So, generally I really don't think that elements should have outer margins and that's why I'm also fairly unexcited about the new margin-trim property (currently, Safari only). Are you?

If you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Sponsored

You can now run Playwright tests on real iOS devices with Safari

Playwright users can now test on real iPhones and iPads with Safari. BrowserStack's latest launch lets you run parallel tests across 1000+ device-browser combinations, capture logs, videos, and text reports in one place, and simulate real-world conditions to ensure full coverage.

Run your first test here!

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!

Something that made me smile this week

I won't spoil what you'll find at sadhighfive.com and, unfortunately, the site is HTTP-only, but the fact that it exists brings me pure joy! Even though, it's incredibly sad, of course.

High five!

Open tabs

Fun fact: the PNG spec received an update.

Syntax highlighting without "span soup"

I highlight GitHub projects usually at the end but this one is such a banger that it deserves a special place today. <syntax-highlight /> is a custom element that adds syntax highlighting to your code blocks without adding any additional elements. What!?

It uses the new Highlight API under the hood and guess what? The global Highlight object went into the baseline last week with Firefox 140.

I'll definitely free my site from thousands of spans soon!

Highlight!

ECMAScript 2025 is out!

Short'n'sweet: ECMAScript 2025 is out and Dr. Axel explains what features landed in JavaScript.

Here's a sneak peek if you can't wait:

Import attributes and JSON modules
Iterator helper methods
New Set methods
RegExp.escape()
Regular expression pattern modifiers (inline flags)
Duplicate named capture groups
Promise.try()
Support for 16-bit floating point numbers (float16)

Learn what's new!

TIL — you can combine CSS `@keyframes`

Diagrams showing the curves of combined CSS keyframe animations.

Josh, as usual, came around with a real banger. Did you know that you can combine CSS @keyframes animating the same properties? You might now say "Sure, one overwrites the other, right?". However, this isn't the case and you can find many interactive demos in this post.

Combine everything

How to stay up to date in webdev

Suppose, you're a Web Weekly regular, you are already pretty up to date, but if you wonder where I get all the updates from, Sascha collected most of the sources I use to stay up to date.

Watch the new releases

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

Email

The wonderful weird web – Vystery

Vystery is a quick but surprisingly fun game perfect for your five minute pomodoro break.

Recognize!

Why `transform` order is important

Speaking of CSS animations, do you know what this CSS transition does? 👆 Easy, it scales and translates an element. However, it probably doesn't do what you expect it to do. Jake explains some lesser-known details about transforming elements. It's a good read if you want to understand how CSS works under the hood.

Understand your transforms

The order of transform functions isn't only important when animating them. Years ago, I learned that flipping transform functions around also leads to different results.

Even though I'm no fan...

Liquid glass effect

Apple released a new design language: liquid glass. I can't say I'm excited for it to hit my Macbook and all these translucent backgrounds are "a bit questionable" accessibility-wise. Let's see how/if Apple will make it work properly.

However, the web dev community does what it does best, figuring out if these effects could work on the web. Here are the two "best" implementations I've seen so far:

Both examples are done with SVG filter magic but, unfortunately, they're Chromium-only.

Codepen also collected some more web-first glassy designs if you need even more liquid glass in your life.

What CSS units should you use when?

Let me be frank and tell you that I'm an em/rem guy when it comes to CSS styling. However, there are many more units like cap, ex or cqi. Kevin explains when to use what unit in a nicely readable decision graph. And it provides follow-up resources, too! 💯

Use the correct units

Focus handling when opening a modal

Managing focus is one of the toughest things to do on the web. So, where should you place the focus when you open a modal window? The answer is the usual "it depends". However, Adrian gives some valuable thoughts on the matter that will help you opening modals with reasonable focus behavior.

Focus!

Random MDN – `CSS.supports()`

From the unlimited MDN knowledge archive...

Do you know that you can check for CSS feature support from JavaScript? Now you do! 🫵

Check what's possible!

TIL recap – `target="_blank"`

Here's an absolute classic: if you're using target=_blank in combination with rel="noopener", you can stop doing this.

Clean up some HTML

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

New browser releases

There have been two major browser releases this time and we'll untangle them in the next weeks. Have a look yourself if you're curious.

Three valuable projects to have a look at

automatisch/automatisch – The open source Zapier alternative.
awesome-selfhosted/awesome-selfhosted – An awesome list for self-hostable stuff!
type-challenges/type-challenges – Collection of TypeScript type challenges.

A new Tiny Helper

If you're in the unusual situation of requiring to turn text into SVG paths, "Text to SVG" might be a godsend.

Transform

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

Thought of the week

There's nothing more to add to Procreate's /ai statement...

Creativity is made, not generated.

Did you learn something from this issue?

❤️ If so, join 23 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Reply to Stefan