Web Weekly #172
- Published at
- Updated at
- Reading time
- 10min
Do you know about the web compatibility standard? Should you import JSON data with { type: 'json' } already? And have you heard of Intl?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Andreas listens to FKJ - Just Piano and says:
FKJ sounds like what I want my code to feel like.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.
Evan shared small utility CLI scripts he uses daily. I love these posts!
Here are my favorite CLI utils that I use daily.
First, my cp and mv commands are aliases to be safer and more verbose.
Second, I use Git on the command line and occasionally use Claude Code to write commit messages for me with a custom git-cco script (a git-cco executable is translated to a git cco command).
And third, I have a custom clone function that clones a repository, navigates into it and runs npm install if there's a package.
I'd love to feature a "Web Weekly community CLI tricks edition" next week. Do you have any favorites the world should know about? If so, shoot them my way!
Hot of the press, you might know that top-level await works across browsers in ECMAScript modules. Jake shared that there's a bug in WebKit that blows up imports in certain scenarios. So watch out!
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
DebugBear helps you identify slow pages on your website and provides detailed technical reports surfacing the highest-impact optimizations. Get comprehensive insights with synthetic and real user page speed monitoring, built for developers.
Web Weekly is open for sponsorships. When you want to reach 6.2k developers, you know what to do!
While being on my journey of using YouTube without relying on the algorithm, I rediscovered Matthew's Channel and a video that's an absolute internet classic for me — the wavy url.
Matthew just hits my exact sense of humor. I think he's hilarious and the internet should have more of this silly content.
- How to Turn Liquid Glass into a Solid Interface (I'm still holding back updating to macOS Tahoe, but if you're rocking liquid glass already this guide might help making it a bit more accessible.)
- How to Increase Your Luck Surface Area
- I disabled my YouTube "Home" feed and I might like it
I think that optional chaining is overused. There, I said it. The codebase I'm working with has it everywhere. Don't get me wrong, I do think it's a valuable language feature but it really doesn't need to be placed everywhere. Sometimes it might be a good idea to reconsider the types or underlying data model.
Matteo investigated if optional chaining could also lead to a performance slow down. Are we talking about micro-optimization here? Totally! Is it good to know about this! Absolutely!
Aaron wrote a web component that shows and hides form elements depending on other form elements. I love it! Should these components exist natively? Is there some spec work in the making?
I don't know but if you do, let me know!
So, here's Mike musing about the history of the WHATWG Compat Standard logo. Spoiler: it doesn't follow standards.
But more interestingly, WHATWG Compat Standard? Huh? Here's what it's about.
This standard describes a collection of web platform features that web browsers need to support for compatibility with the de facto web.
You probably know, that we can't remove things from the web because it's hard to know what's out there. But I didn't know there's a standard for all this legacy web technology.
Be aware that sibling-count() and sibling-index() are Chromium-only right now but man... I'm a huge fan of these small utils!
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
I can't imagine how much time Neal spends on his "fun sites". But, as always, not-a-robot is no exception. I made it up to level 21.
Manuel explored how he could use custom properties in media queries. Disclaimer: his solution doesn't work across browsers (Firefox doesn't support style queries yet) but the post is still a wonderful explanation of @container, @property and the min() function.
Side note: I explored the same topic and reached a different and a bit simpler solution last year.
Importing files with { type: json } works across browsers these days. And it was about time, wasn't it? However, Jake made some points of when you should rather fetch your JSON.
When I opened Ahmad's article, I expected some advanced grid usage. The post held the promise but delivered much more. It comes with container queries, style queries, and responsive typography. It's a great post showing what's possible in the modern web.
What's more impressive is that the post shows how much Ahmad cares. He treats UI development as a craft (rightfully so!). Responsive web design isn't about making it work "somehow" across screen size. It's very obvious that Ahmad wants to make things work the best possible way. Chapeau my friend!
I'm far away from being a database person, but Nanda put together a wonderful interactive article explaining database internals.
Side note: in this new world in which the internet consists of AI slop, articles like this will be the only way to stand out. Content put together by people that care is becoming more important than ever.
Chris explains how to build rounded tabs with CSS shape(), and while this tab look doesn't match today's modern style, it's good to learn about the new CSS function.
From the unlimited MDN knowledge archive...
Did you know that import maps work across all browsers for a while? If your dependencies aren't handled by a framework or build tool you should check them out!
Do you know that everybody's most favorite JavaScript util (Intl) can be used to split strings into characters, words and sentences? Now you do!
Find more short web development learnings in my "Today I learned" section.
I'm pretty sure I mentioned that JS-driven view transitions are on their way to the baseline in a previous Web Weekly, but now we're there! startViewTransition() works in all browsers. Hallelujah! If you wonder about all the other view transition features, Bramus collected them over on web.
And if you're just getting started with using view transitions, the bag of view transition tricks will give you a headstart!
- sindresorhus/css-extras – Useful CSS custom functions using the new
@functionrule. - lume/nimble-html – A light-weight
htmltagged template string function for writing declarative-reactive web apps. - quietui/quiet – An open source UI library for the Web focusing on accessibility, longevity, performance, and simplicity.
Fliiip Book lets you create handdrawn gifs. Not sure when I would use them, but you might be into this custom style.
Find more single-purpose online tools on tiny-helpers.dev.
I can relate to Mu-An Chiou's thoughts, can you?
I am disappointed that our once open and low barrier entry to web development was raised so unnecessarily and arbitrarily high that we don't even know exactly what we are serving to users.
❤️ If so, join 25 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.1k 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.