Web Weekly #186
Guten Tag! Guten Tag! 👋
Are you struggling to understand why your anchor positioning doesn't work? Did you know that there's a window.stop() method? And did you ever wonder how to apply a theme color to Safari?
Turn on the Web Weekly tune and find some answers below. Enjoy!
I am listening to "KRAFTKLUB - Marlboro Mann" and say:
I've seen Kraftklub live twice so far. The first time I was surprised by the excellent show. The second time I was truly amazed. This week, I'm going to see Germany's best live band for the third time, and I'm sure that I'll tear up while dancing my ass off. I can't wait!
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are six more songs left in the queue.
A huge thank you and a huge bag of karma points go to Paweł, Johann, and Corey this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! ❤️
If you enjoy Web Weekly, too, join 39 supporters on Patreon or GitHub Sponsors. It really makes a difference!
And if you learned something from this week's edition, share Web Weekly with your friends and family.
A quick "repost" really helps the newsletter out. Thank you! ❤️
No code
- Don't Make Me Talk to Your Chatbot → "It's fine that people talk to chatbots, but they should not expect me to listen to theirs".
- Nobody Gets Promoted for Simplicity → "Nobody gets promoted for the complexity they avoided".
Heads up: Chrome will adopt a new release cycle
Starting in September, Chrome will ship a new version every two weeks, and I already see these version numbers going through the roof. But honestly, more updates are a good thing.
Do you remember theme-color?
The theme-color meta element used to color Safari's frame and configure a color for progressive web apps.
Turns out, Safari dropped the theme color support for "normal" websites. And yet, sometimes the Safari frame is colored in website colors.
What is going on? Martin investigated Safari's behavior.
Yes, this is a custom select!
Disclaimer: customizable select elements are still a Chromium-only thing, but man, look at this beauty!
: and = in style queries
Style queries aren't supported in Firefox yet, so I must say that I didn't really play with them yet. But today I learned there's a difference between using : and =.
Whoot? Big thanks go to Temani for sharing yet another CSS pro tip!
Problems with anchor positioning
I still haven't fully adopted anchor positioning, but I figured there are many edge cases, and sometimes I'm also just scratching my head. Temani covered many reasons why the anchors might not show up where you expect them to.
And if you want to see Chris rant a bit, he also talks about common anchor positioning mistakes.
Style restrictions of the new geolocation element
And speaking of Chris, he also played with the new geolocation element (currently Chrome-only, and I covered it six weeks ago) and found some "interesting" CSS quirks of this new native element.
The wonderful weird web – A map of us
AMOU is a map of memories. People can share memories from a certain place. I've spent quite some time discovering all these unknown memories in my neighborhood. ❤️
npmx is having a moment
I plugged npmx in a previous Web Weekly, and while I thought the project was cool, I secretly didn't have high hopes of me using it. But I do! And the team is building a nice community around the project. Good stuff!
A CSS state machine
Patrick tried to find a CSS-only way to store the information of whether an element was previously focused. The solution is hacky but also... elegant?
You Don't Know HTML Tables
Frank claims that I don't know HTML tables, and turns out he's right. This is a massive read, but I'm sure you'll learn a thing or two. I mean, did you know that there's a TOM (table object model)?
Creative ways to select :root
Temani and Daniel get into an unofficial competition about unconventional ways to select the :root element and some of these approaches made me smile. I love CSS.
Random MDN – stop()
From the unlimited MDN knowledge archive...
Here's a fun one: did you know that there's a global stop() method? Well, now you do!
TIL recap – Overwrite your dependencies' dependencies
Did you know that npm supports an overrides key in your package.json? If one of your dependencies is pulling in something nasty, you can fix the dependency right from the root level. Handy!
Find more short web development learnings in my "Today I learned" section.
New on the baseline — Trusted Types
With Firefox 148 and Safari 26, Trusted Types entered the baseline! 🎉 What are they for?
Whenever you're dealing with user-generated content, you can enforce content to pass a sanitization step before injecting it into the DOM. You can enforce this via CSP, too. Pretty cool!
Three valuable projects to have a look at
- lokesh/color-thief – Grab the color palette from an image using just JavaScript. The demo site is pretty nice!
- searlsco/posse_party – Crossposting content from your site to a variety of social media platforms.
- webpro-nl/unbarrelify – Barrel file removal tool for JavaScript & TypeScript.
A new Tiny Helper
I can't be the only person who tries to transform a png to an svg at least once a month. I played with this converter a bit, and the results looked promising.
Find more single-purpose online tools on tiny-helpers.dev.
Thought of the week
Here's Matteo on everyone's "favorite" topic.
The human in the loop isn't a bug to be fixed. It's a feature to be protected.
Did you learn something from this issue?
❤️ If so, join 39 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
This is all, friends!
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.5k+ developers and