Web Weekly #164
- Published at
- Updated at
- Reading time
- 9min
Should you use JavaScript's logical assignment operators? Have you heard of the user activation API? And did your websites get a nice speed improvement thanks to speculation rules?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Øystein listens to Ulrich Schnauss - Goodbye
Lush and dreamy beat-driven electronica from my newest musical discovery - perfect for late night contemplation.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.
This year's state of HTML survey is open until August 15 and you should really take the time to fill it out. Why?
First, browser vendors really do look at the results and even if it's just a tiny thing, if you're unhappy about a web feature, you're probably not alone. And the stronger the signals are the higher the chance that something will change.
However, more importantly, you'll learn something new if you fill out the survey! It's a perfect way to discover old and new HTML features.
Here are my discoveries on Bluesky and three things you might not have heard of yet.
showPicker() will allow us to open input and form controls from within JavaScript. I can see this being handy for custom controls.
sizes="auto" will make responsive images so much easier because we can tell the browser to pick the best image without defining a complicated sizes attribute. Images need to be lazy loaded, though. I blogged about sizes="auto" a while ago if you want to learn more!
This one puzzled me. navigator still doesn't work in all browsers? That's kinda wild, isn't it?
Anyway, I hope you see that filling out the survey is worth it. Now go and have fun (and learn about something new)!
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
Before getting into all these web dev resources I want to give a shoutout to Eric and Alex!
Eric included Web Weekly in Newsletters that regularly hit my inbox these days and if you're not following his blog via RSS, you totally should!
If you can't get enough of all this web dev writing, Alex shared a massive list of bloggers worth following. As someone following Alex's work for many many years I'm humbled to be included in the list.
And, of course, I maintain my own list, too. Check out the blog roll for even more words from the community.
Keeping up with the latest tools in web and app development can be a challenge. Web Tools Weekly sifts through the madness, providing categorized roundups of the latest and best in tools for JavaScript, CSS, HTML, React, Vue, SVG, AI/LLMs, APIs, Mobile, and more. You get one email every Thursday, no spam. It's the best newsletter in the industry solely focused on tools for web and app developers!
Web Weekly is open for sponsorships. When you want to reach 6.1k developers, you know what to do!
I noticed that my site doesn't include proper ::selection styles and remembered that Chris shared a little "rainbow trick". Selected text is now rendered in different colors and I don't know why but this make me very happy.
- Your Strengths Are Your Weaknesses
- Curate your own newspaper with RSS
- Adding a feature because ChatGPT incorrectly thinks it exists
Here's a quick reminder that logical JavaScript assignment operators (||=, &&= and ??=) are a thing these days. I'm still on the fence if I should start using them because my brain refuses to understand what I'm looking at, but maybe you're having an easier time with them.
Camillo shared how to create this wiggly SVG filter effect. I'm not sure I'll ever use it but I love everything about it!
John published yet another deep dive. This time, it's all about SVGs. And if you now think "well, yeah... it's probably all the beginner stuff", you're absolutely right.
Still, I learned quite a few new SVG details from it. And I'm sure you will, too! And even if you don't, just playing with the interactive demos is very satisfying. Don't forget to turn on sound!
Do you know that you can use the same transform functions (translate(), rotate(), etc.) in a single transform declaration? Chris shares when you want to do it and sneakily explains the animation-composition property on the way, too.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
It might not be the most efficient way to remove the background from photos, but I promise this site offers the most satisfying one.
David shared lots of web component tips and tricks and this rather lengthy post is definitely worth a read! I still have to learn and understand when to use ElementInternals, but I'll leave this for another time.
Do you remember the times when Frontend development didn't require megabytes of JavaScript, endlessly running build processes and code you could debug easily in the browser... Yeah, here's a quick manual sharing when you should reach for JavaScript in the first place.
This post reminded me of the absolute classic "Everyone has JS, right? which you should check out if you don't know about it.
Jeff had a figure element and wanted to size the figcaption depending on the included image's height. Sounds straightforward, right?
After discussing the problem with the web dev community, Jeff shared all possible solutions ranging from display: table-caption; (Yikes!), max-width: min-content;, and even contain: inline-size;.
Suppose you're using aria-label to provide accessible names, you should be aware of one problem. In-browser translation tools won't translate the attribute values. This behavior makes content inaccessible.
Adrian keeps track of the problem for over five years now and just added the current state of affairs.
From the unlimited MDN knowledge archive...
Speculation rules are shipping in Chromium for a while. Suppose, you're looking for a quick way to speed up cross-page navigations, you should check them out!
I've been using the Polypane web browser for almost two years now and always knew that I'm not using it the "right" way. I surely figured out how to use it for responsive design testing, but there's much more!
I jumped on a call with Kilian and he showed me lots of pro tips!
Have you heard of the User Activation API? There are certain actions and JavaScript methods (navigator, video, input) that only work when the user is or has been active. You can learn more about the User Activation API on MDN and this post on the Webkit blog is also quite good.
- toss/es-toolkit – A major upgrade to good old lodash.
- minbrowser/min – A fast, minimal browser that protects your privacy.
- sst/opencode – An AI coding agent, built for the terminal.
Oh, oh, oh! Tiny Helpers is running low on new contributions. If you know of any small web development utilities that aren't included on Tiny Helpers yet, send them my way!
Find more single-purpose online tools on tiny-helpers.dev.
It's hard to ignore the current AI agent hype (I'm honestly a bit anxious about it), but Simon aka "Mr. LLM" says that skills will still matter. Let's hope he's correct with this one, right?
Without the skilled individual, the "agent" is useless. It may as well not exist.
Web Weekly usually takes me an entire day to write (and research). If you want to receive some karma points and support this indie newsletter, join 24 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors. It would really mean the world to me! ❤️
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.