Web Weekly #174
- Published at
- Updated at
- Reading time
- 8min
Do you know when to use error? And do you localize your quotation marks with pure CSS? And have you heard of :interest-target?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Heydon listens to "Fu Manchu - Loch Ness Wrecking Machine" and says:
Fu Manchu's latest LP, Return To Tomorrow, features a track improbably titled "Loch Ness Wrecking Machine". It's a cautionary tale about harnessing the fabled immortal Scottish lake dinosaur/monster to demolish civil infrastructure (I think). It also has the best riff ever.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.
Let's kick off this week's Web Weekly with some nice personal websites that come with beautiful theme switchers, shall we?
Here's Josh with some piano playing color toggles.
Then we have Max's site which doesn't only change colors but also fonts and overall style. There can never be enough lobster, right?
But the absolute winner is Matthias with his Kontrastor 82M. Look at these custom controls! 😲
Man, I love the internet! ❤️
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
Do you know how fast your website is for real users and what you can do to boost visitor experience? DebugBear real user monitoring tells you where your website is slow based on Google's Core Web Vitals metrics, and uses modern browser APIs to provide targeted debug data. Sign up for a free 14-day trial!
A huge bag of karma points goes to Hank this week. Thank you for buying me a monthly coffee! It's much needed on days like today, when I'm late with sending all the emails. ❤️
If you enjoy Web Weekly, join 26 supporters and support this indie newsletter on Patreon or GitHub Sponsors.
You might have recognized that I have a thing for lists. To name a few: I collect tools, I document my web development learnings, I write down quotes from smart people, and now I think I'm forced to start another list... Dang it!
The people behind the self-hosted photo and video management tool Immich maintain a list of their cursed knowledge. I love this spin!
- Comparing interviews at 8 large tech companies
- How to stand out when anyone can build anything
- Should you join an AI startup right now?
![div.setHTML(html, { elements: ["h1"], attributes: ["style"] });](https://images.ctfassets.net/f20lfrunubsq/1X6Hh5DVkdmrBU5Mt4fbs9/23fe1c7e1a6150cae0bedcf63b7767e5/Screenshot_2025-11-10_at_16.03.57.png)
Granted; Ollie's article covers a cutting-edge browser API because it's not really prime time yet, but I'm already a fan. If you're dealing with user-generated content like comments for example, you must be very careful not to open your doors for XSS attacks.
Today, libraries like DOMPurify let you filter out all these nasty attack vectors, but shouldn't there be a native solution for this common problem? Right! And this is exactly what setHTML will become!
Do you know that CSS has localized quotes built-in? This week I learned about content: no-close-quote; (Thanks Matthias!) and updated my blog post about all these fancy quotation marks.
Temani shared yet another CSS experiment and this time it doesn't include mind-boggling CSS math calculations. If you think anchor positioning is only about displaying tooltips, think again!
Here's how you can use the new web feature to create a "moving focus indicator"!
The effect should probably be tied to a reduced-motion query but are there any other downsides? If you know, please shout!
Here's a new Chrome Dev Tools feature for the performance engineers: you can now throttle and delay specific requests right in the network waterfall. Our friends at DebugBear will tell you everything you need to know!
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
If you want to go down memory lane and rediscover the web from the beginning The Web Design Museum will show you the websites from the time when it all began.
![{ "version": 3, "file": "add.js", "sourceRoot": "", "sources": ["add.ts"], "names": ["add", "a", "b"], "mappings": "AAAA,OAAO,SAAS,IAAI,CAAC,EAAE;EACrB,OAAO,IAAI;AACb" }](https://images.ctfassets.net/f20lfrunubsq/6FQe6CX3fdPNhDBbLvyWTI/25dc30c004ddc4ffb6e7ad8cbdfa40da/Screenshot_2025-11-10_at_18.15.33.png)
Okay, this post is kinda nerdy and I'm not sure if you'll ever need it... but do you wonder how JavaScript source maps actually work?
When I started doing web development we were all worrying about blocking the main thread and creating smooth animations. We worried about the render pipeline, tweaked things with will-change and only animated "safe" CSS properties. It feels like people don't worry about this topic that much anymore, doesn't it?
But let's bring this topic back! The people behind motion shared tons of animation wisdom!
![[interestfor] { /* delay before interest is shown */ interest-delay-start: 0.5s; /* delay before interest is hidden */ interest-delay-end: 200ms; }](https://images.ctfassets.net/f20lfrunubsq/5QnBl15DlIofbC13tTDuQl/4a6053f737cd462f03d69944a145067c/Screenshot_2025-11-10_at_20.00.58.png)
Shout outs to Danny and his Modern Web Weekly newsletter for covering the new interestfor HTML attribute which is already available in Chrome. Is there a polyfill? No idea...
But I'm excited about interestfor, :interest-source and :interest-target.
Matt explains how error makes error debugging and logging easier. Does this work everywhere yet? Yep!
From the unlimited MDN knowledge archive...
It's been a while since I used env(safe-area-inset-right) but if you're facing some issues with weird user agents or notches it's good to know about user agent environment variables.
Be honest. Do you know the difference between these two TypeScript directives? If not, you can learn about it on the blog.
Find more short web development learnings in my "Today I learned" section.
- Vanilagy/mediabunny – Read, write, and convert video and audio files directly in the browser.
- anthropic-experimental/sandbox-runtime – A lightweight sandboxing tool working without requiring a container.
- attogram/bash-screensavers – Turn your idle shell into a visual playground.
I must admit this one's very niche, but if you ever need to create a sankey diagram (today I learned that they're called like that) you can do that quickly online.
Find more single-purpose online tools on tiny-helpers.dev.
I realized that I've been too sloppy when taking on new jobs. My entire life, I literally just stumbled into the next gig. Swizec gives some advice that I keep thinking about.
Beyond income there's 2 reasons to take any specific job: Invest in yourself or invest in the company. Both is best.
❤️ If so, join 26 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.