Web Weekly #179
- Published at
- Updated at
- Reading time
- 9min
Do you wonder what the final masonry CSS syntax will look like? Do you use the dialog element to its fullest potential? And are you excited about CSS @scope entering baseline?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Mohamed listens to LAW NASYANY and says:
I listen to this song as it has a great soundtrack that makes you move your body without noticing it.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.
I've mentioned a couple of times last year that a Web Weekly redesign is in the making. It only took me a year on and off to start from scratch and finally have a landing page suitable for a Frontend newsletter. And here it is!
It ships with view transitions, container queries, popover, @starting-style, light-dark() and many other new'ish Frontend things I share here in the newsletter. I'm no designer, but I must say I'm very pleased with the new look.
For the RSS folks: there are now also two new RSS feeds. One for the actual newsletter and one for quick links. Check them out!
A special shoutout goes to all the people who participated in the new "wall of love" aka the testimonials section. Thank you Louis, Eva, Wojtek, Chris, Josefine, Khaled, Max, Carlos, Jeremias, Paul, Olivier, Sébastien, Michiel, Dominic, Kristina, Dominik, Johann, Jay, Henry, Gustavo, Owen, Eric, Attila, Martin, Marcel, Gabriel, Emre, Károly, George, Thomas, Matthias, Ivan, Oliver, Tino, Barry, Tim, Stefano, Ekrem, Simon, Schalk, Andy, Patrick, Bart, Mirko, Kilian, Matt, Øystein, Paul, Den, Craig, Sachin, Andreas, Torsten, Lars, Bramus, Craig, Amr, Christian, Mohamed, Anselm. You all rock!
If you want to tell your friends about Web Weekly, want to give a testimonial yourself, or have any feedback on the new site, let me know. I'm all ears!
And another huge thank you and massive bag of karma points goes to Jens and Boris this week. Thank you both for covering a small fraction of the cost it takes to send Web Weekly every week! ❤️
If you enjoy Web Weekly, too, join 32 supporters and support indie publishing on Patreon or GitHub Sponsors. It really makes a difference for me!
Picking icons is tough because they should look good, blend in nicely, convey meaning... and then there's also the question of whether and when you should use icons in the first place.
Tonsky's post is a long rant on the new macOS Tahoe icons and I understand that design for an operating system is challenging and that there are always trade-offs to be made, but this icon macOS dialog (👆) made me laugh out loud.
This UI and icon madness can't be true, or can it?
- How good engineers write bad code at big companies
- Do I Leave the Laptop at the Office? A Case Against Returning to Office
- 21 Lessons From 14 Years at Google
And a special somewhat "no code" highlight: it's wild that posts like Your job is to deliver code you have proven to work need to be written today but yet here we are. I published my thoughts and commentary about this post on the blog, too.
Emil shared all the considerations going into his Sonner toast library and let me tell you that's some quality work. I love it!
However, keep in mind that toasts come with serious accessibility and UX issues and that there are better ways to give updates.
Caching was and is one of those web dev things that are hard to get right. Especially when it comes to URL caching, things get messy very quickly because the web is full of random query parameters. How can you tell browsers and CDNs that random utm parameters don't matter and that the cached HTML is fine?
There's a new header in town (No-Vary-Search) and Barry explains why it'll be a big deal. It's Chrome-only for now but "should" be safe to use already.
Side note: this year's Web Performance Calendar was outstanding! Every other post was a banger and I'll definitely plug more posts in the upcoming weeks.
I absolutely loved this post! If you don't know about the wbr element or the ­ character, you should definitely check it out!
There were many discussions about how and if masonry layouts should come to CSS last year. And it seems the CSS Working Group came to a conclusion? At least, it sounds like it in the Safari release post. We can all now wait for display: grid-lanes to hit a stable browser release or play with Safari's Tech Preview.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
If you're a music nerd, you're going to love this. Typatone transforms your written words into looped tracks. Can you make a song using it? If so, I'd love to hear it!
Every single project I've worked on included the dotenv dependency to load .env files in development. This week I learned that Node.js has had this functionality built-in and marked as stable since v24.
If you haven't used the dialog element yet or didn't keep up with the latest feature additions (closedBy or requestClose), Sara summarized what you need to know in one piece!
Be warned that many CSS features highlighted in this year's CSS wrapped aren't ready for prime time yet because they're Chrome-only, but the site is stunning work and I can't imagine all the work that has gone into building it!
I'll cover most of the new CSS features once they're coming closer to cross-browser support here, but if you're curious about all the countless things coming to CSS, this "short" summary worth a read.
However, if things aren't mission critical and you're cool with partial browser support, knock yourself out! I, for example, took Una's snippet to automatically hide/show my fixed headers on scroll and it's already deployed on the new Web Weekly site (only visible in Chrome Canary).
Have you seen this CSS monstrosity before? These user-agent styles are the leftovers of the document outline algorithm that (unfortunately) never went anywhere. If you want to learn more about it, Martin shares all the details.
From the unlimited MDN knowledge archive...
Here's some DOM trivia; did you know that you can access loaded images via document? Well, now you do...
What happens if you nest elements with different CSS visibility? Can elements be visible while being inside elements with visibility: hidden;? Yes, they can.
I think this is terribly confusing and you can learn more about it on the blog.
Find more short web development learnings in my "Today I learned" section.
With Firefox 146 (released Dec 9), @scope made it into baseline. It's a very complex topic and I can't say I totally get it all, but I'm extremely excited about the ability to use inline style elements to scope component styles (👆).
Daniel gives a good overview of what you need to know.
- gibbok/typescript-book – A free and concise TypeScript book.
- Epistates/treemd – A (TUI/CLI) markdown navigator.
- karol-broda/snitch – A prettier way to inspect network connections.
I just realized that I'm super into dithered images and I might check if I can bring them into the new Web Weekly site somehow. With this week's helper, you can create these image effects without opening Photoshop or the like.
Find more single-purpose online tools on tiny-helpers.dev.
I'm more of an AI skeptic because I value human work. I value people who put in the work. And I'm worried. Scratch that, I'm scared. Wherever we're heading and whatever "AI" will mean for us, our jobs, or the world, I'm terrified. And I keep thinking about the well-phrased points Josh makes on his blog.
Today's AI excitement is a matter of privilege.
AI optimism requires you to see yourself and your loved ones as safe from AI.
❤️ If so, join 32 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! 👋
Join 6.3k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.