Web Weekly #176
- Published at
- Updated at
- Reading time
- 9min
Are you excited about @scope hitting the baseline soon? And do you know that there's also a :scope in JavaScript? And have you ever used enterkeyhint in HTML?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Gerardo listens to "Los hermanos Reyes 'Dos horas de balazos'" and says:
It is a typical adventure of cowboys, 4 go to save the ranch stolen, they recover the terrains, and the funny thing is that we don't know who of the 4 conquers the lady owner of the lands.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.
Last week I shared Roma's post It is OK to Say "CSS Variables" Instead of (or Alongside) "Custom Properties" and if you're having the urge to correct people when they talk about CSS variables, you should definitely check it out.
After sharing last week's newsletter Axel pointed me again to the CSS Custom Properties spec (which lives under /css-variables) and there is written:
This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
This is of course spec language so Bramus rephrased it:
Custom Properties is how variables are implemented in CSS.
So, --something is a custom property and it was introduced to enable cascading CSS variables.
This all makes sense and with these points made, I'm now finally able to let go of my grudge against people talking about CSS variables. Are you, too?
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
Wondering how fast your website is for real users, and what you can do to optimize it? The free DebugBear website speed test provides an in-depth technical report of your page speed. Plus, you can see how your Core Web Vitals have changed over time, based on Google's Chrome User Experience Report.
Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!
A huge bag of karma points goes to Björn this week. Thank you for buying me a monthly coffee and covering a small fraction of sending Web Weekly every week! ❤️
If you enjoy Web Weekly, too, join 30 supporters and support indie publishing on Patreon or GitHub Sponsors. It really makes a difference for me!
You know, I'm more of a dog person, but hey, animal placeholder images are always more than welcome!
- Always Be Ready to Leave (Even If You Never Do)
- Things That Aren't Doing the Thing
- Why Your Best Engineers Are Interviewing Elsewhere
Firefox 146 will be released in two weeks and with it we'll have another CSS goodie hitting the baseline: CSS @scope.
Scoped CSS rules will allow you to... well... limit or scope your CSS rules to components or DOM subtrees. Ollie reminded me about another little detail. If you place @scope into style elements, the CSS scope will only be applied to the parent DOM element. Does this feel like magic? It surely does!
And if you now wonder how you could make this work for inline demos, Roma shares how his <LiveExample /> component uses @scope.
Speaking of scoped stuff: do you know that :scope is a thing in querySelector calls, too?
Speaking of web features that are missing in only one browser. Do you know about the Web Platform Features Explorer?
It's one of the many tools I use to inform you about new browser features entering the baseline. Check it out if you want to learn what browsers hold back web features from going into cross-browser support territory.
Chris has been playing with the new CSS random() function, and while it'll still take a while until we can use it because it's only supported in Safari Tech Preview, I wonder what fancy effects we all can create with randomized CSS values. This post is a good starter to get some inspiration.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
I just checked; my entire blog's home page weight is 223KB (before compression) so that I can call myself a proud member of the 512KB club.
Are you a club member, too? Maybe we can highlight some Web Weekly reader sites next week!
![const routerConfig = [ { pathName: new URLPattern("/home{/}?"), component: "my-home" }, { pathName: new URLPattern("/posts{/}?"), component: "my-posts" }, { pathName: new URLPattern("/about{/}?"), component: "my-about" }, ];](https://images.ctfassets.net/f20lfrunubsq/2JptMuC92NW5e66TWaK8Ve/4e9dc0b1a34948c36dd21b9bb8d7717e/Screenshot_2025-11-24_at_16.25.26.png)
If you've been reading Web Weekly for long enough, you must have noticed my UrlPattern excitement. The new JS API works across browsers since September of this year and it makes URL operations so much easier!
Jim explained how you can use it to build your own custom router and this will be right down your alley if you enjoy building your own stuff!
I've always thought that light-dark() is a drop-in replacement for prefers-color-scheme queries... I was wrong and you can learn more about this on the blog.
![function add(items: Array\<string\>, newItem: string) function add(items: string[], newItem: string)](https://images.ctfassets.net/f20lfrunubsq/1TeRRJ4dbidMG508AJcD2M/a2d9e3f9643321e174b3313c48ee8127/Screenshot_2025-11-24_at_21.45.09.png)
Oldie but goldie; when you define arrays in TypeScript do you go for the [] or Array<> notation? Dominik has a strong opinion and even stronger arguments on the topic...
Guilherme reminded me about JS performance optimizations and explained ECMAScript classes aren't working well with bundler optimizations like tree-shaking. Check it out if you want to keep your bundles as small as possible!
From the unlimited MDN knowledge archive...
Do you know that you can control what the ENTER key shows in virtual keyboards using the enterkeyhint HTML attribute? Now you do!
Is it just me or are TypeScript extends kinda scary? A while ago, I learned how to use them to iterate over union types and some things finally clicked for me.
Find more short web development learnings in my "Today I learned" section.
Rendering very large HTML documents can become a real challenge for mobile devices that aren't high-end. content-visibility isn't cutting edge anymore but only went into the baseline last year. Check it out if you're struggling with rendering too much markup and are desperately looking for a possible performance boost!
- cloudfour/image-compare – A web component for comparing images with a slider.
- cure53/DOMPurify – A DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.
- unhappychoice/gitlogue – A cinematic Git commit replay tool for the terminal. 👈 This is wild!
There are plenty of color palette tools listed on Tiny Helpers but the ColorPalette Pro is by far the best looking one!
Find more single-purpose online tools on tiny-helpers.dev.
I'm that kind of person not answering their phone and I must also admit that I prefer text for many interactions, but if things are urgent and you really need help, as Jim points out in "Everything is broken", a human is who I want to speak to.
A direct line to a human feels like the ultimate luxury at this point.
❤️ If so, join 30 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.