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:
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.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
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.
Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!
I won't spoil what you'll find at sadhighfive 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.
- Fun fact: the PNG spec received an update.
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!
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)
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.
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.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
Vystery is a quick but surprisingly fun game perfect for your five minute pomodoro break.
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.
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.
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.
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! 💯
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.
From the unlimited MDN knowledge archive...
Do you know that you can check for CSS feature support from JavaScript? Now you do! 🫵
Here's an absolute classic: if you're using target=_blank in combination with rel="noopener", you can stop doing this.
Find more short web development learnings in my "Today I learned" section.
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.
- 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.
If you're in the unusual situation of requiring to turn text into SVG paths, "Text to SVG" might be a godsend.
Find more single-purpose online tools on tiny-helpers.dev.
There's nothing more to add to Procreate's /ai statement...
Creativity is made, not generated.
❤️ If so, join 23 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
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! 👋