Web Weekly #178
- Published at
- Updated at
- Reading time
- 10min
Do you preload your responsive images? Have you heard of the new text-grow CSS property? And do you know that the strong HTML element isn't really announced by screen readers?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Paweล listens to "Nightmares On Wax - True" and says:
We love Nightmares on Wax. This is my daughter's favorite band ever (I'm so proud of her). This one comes from the new album and I cannot tell you how many hours I spent dancing to this one.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.
The songs are mainly shared by Paweล, though. (Thanks buddy!) Some more folks would be nice. Let me know what you're rocking each day!
That's it for 2025 and this Web Weekly edition will be this year's last one. Web Weekly is closing the year with 6.2k subscribers. This number is wild and I appreciate that you're all reading along!
If you're curious about what it means to run a small newsletter, how I got into web development and how I see the current state of our industry, Daniel invited me to his podcast. We had such a lovely chat!
Thanks again, Daniel, for inviting me!
And with that, let's dive into the last web dev news of 2025!
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! โค๏ธ
Did you know the Largest Contentful Paint and Interaction to Next Paint metrics will soon be available across browsers? Have you tried the Chrome DevTools MCP server? And why are Lighthouse scores likely to become more accurate next year? Read the DebugBear review of web performance in 2025 to find out!
A huge bag of karma points goes to Daniel and Kรกroly this week. Thank you for covering a small fraction of the cost it takes to send Web Weekly every week! โค๏ธ
If you enjoy Web Weekly, too, join 31 supporters and support indie publishing on Patreon or GitHub Sponsors. It really makes a difference for me!
Don't ask how many times I "boinged," okay?
- "AI optimism requires you to see yourself and your loved ones as safe from AI; as the passengers in the self-driving car, and not as the pedestrians it might run over." โ AI optimism is a class privilege.
- "We do so much reading all dayโthere should be a natural balance with producing words, too." โ On 10 Years of Writing a Blog Nobody Reads.
- "We found out one of the reasons why freelancers are challenged more and more to get jobs over the past years: We failed to share the value of freelancers to our customers." โ The Secret Value of Freelancers for Companies
It's "Spotify Wrapped" season and Raymond shared how you can download all your music stats to build your own little music gallery. I didn't know you could do that.
How many paginations have you built in your life? I can't count all the different sites at this point. But how do you actually build an accessible pagination? Martin explained why simple things often lead to better accessibility.
Roman blew everybody's mind last year creating this effect (๐) with pure CSS that works today. When you read his post, though, you'll probably think "yeah that's too much and too hacky!" But there's news!
The new text-grow CSS property isn't ready for prime time yet (Chrome Canary only and the cursor positioning seems very buggy), but there's progress toward a CSS-native fit-to-width text solution. Adam put together a quick post including a demo, the CSS draft and an explainer doc.
Fiddling with the font size, however, should be treated very carefully. Donnie, who has the best blog post images, reacted and brought up some accessibility considerations.
Either way, I'm excited about this!
Speculation rules are still a Chromium-only thing, but there's no harm in applying them. If you care about web performance, which I'm sure you do, you can add a script block to your sites and let Chromium handle the prefetching/preloading.
![{ "prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "eager" }], "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }] }](https://images.ctfassets.net/f20lfrunubsq/7J2DRfUInj9ItHn2PNeate/3d8ef8ccb4863169daf7644252316fcc/Screenshot_2025-12-07_at_18.19.47.png)
Is there a catch? There was. Figuring out when to kick off performance optimizations on mobile devices has been tricky because there are no clear hover events. There are some changes and I'll let Barry explain the rest.
Do you know that you can preload responsive images with the good old link element?
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
Disclaimer: the following is PostHog's marketing site. I'm still unsure what they sell and didn't bother to find out, but what they did with their main web presence is amazing. The team over there has built an entire operating system based on their marketing stuff.
I can't even imagine the meetings that needed to happen to pull this off in a reasonably big company. I mean, how do you sell months of frontend work to turn your main site into an OS? Wow!
PS. Make sure to look in the trash.
I was looking for an old ssh command the other day and usually I grep over my history. This didn't work. What I was looking for was too old and undiscoverable. I needed to figure it out on my own...
A few days later, and after reading Nick's post, I learned that ctrl + r tools like McFly (which I have installed) keep a separate SQLite database to archive all commands. Next time I'll know and will also discover commands executed last year.
![#!/bin/sh query='process.env' exclude='!src/env.ts' if \[\[ $(rg $query -g $exclude --type js --type ts ) \]\]; then echo "process.env is being used outside src/env.ts. Fix it!" exit 1 fi](https://images.ctfassets.net/f20lfrunubsq/3CClR8HiMMUfg57ahoNJCP/72a2af51a604deaf4df229c3d2ce2c98/Screenshot_2025-12-07_at_16.36.20.png)
I was just using a CLI tool the other day and it just died because I didn't define the correct environment variables. There was no feedback about what was wrong. It just failed. Not great.
Tim shared his approach to dealing with process. It includes a custom env file, a tiny bit of zod validations and a shell script. Smart!
If you're looking for ways to discover slow resources and/or improve your site's performance, Joan has some handy JS snippets for everyday performance tracking for you!
This is some serious eye candy, isn't it? How would you build it?
When I first looked at it, I thought of applying some 3d transforms and moving things around based on the cursor movement. I was wrong.
Amit shared that creating these holographic card effects isn't that easy because clipping and overflowing elements aren't working well with CSS transforms.
Because according to the CSS Transforms Module Level 2 specification, applying any "grouping property" like overflow (with any value other than visible), opacity less than 1, or filter, forces the element to flatten.
He still found a solution and published a fantastic read!
I was pretty much aware of the importance of the lang attribute and how a missing lang attribute messes with screen readers. However, I've never thought of other tools that might fail when the document language isn't defined. Todd shared some good examples!
From the unlimited MDN knowledge archive...
I've never stumbled into doing media coding work, but today I learned that HTMLMediaElements (read audio and video) implement a canPlayType method. This isn't very surprising, but the possible return values are. The method returns "" (empty string), probably or maybe. This seems pretty fuzzy to me.
A while ago, I learned that it's not guaranteed that screen readers will announce strong and em elements. Bummer. This fact makes arguing about b and strong way harder. If you want to learn more, find some resources on the blog!
Find more short web development learnings in my "Today I learned" section.
You probably know about the close method of dialog elements, but do you know about requestClose? The new'ish method has been available on the baseline since May.
- cjpais/Handy โ An offline-first, free, open source, and extensible speech-to-text application.
- tconbeer/harlequin โ The SQL IDE for Your Terminal.
- searlsco/posse_party โ Cross-post content from your site to social media platforms.
If you're looking for a quick way to convert images, audio files, or documents into other formats, Vert might be what you're looking for. It runs locally, so that's nice!
Find more single-purpose online tools on tiny-helpers.dev.
Derek shared his thoughts on society and the male "loneliness crisis" and it included this banger.
If you want two people who disagree to actually talk to each other, you build them a space to talk. If you want them to hate each other, you give them a phone.
โค๏ธ If so, join 31 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.2k 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.