Web Weekly #166

Do you style the ::target-text pseudo-element? Do you use modern Git commands? And do you know how SVG paths really work?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there is only one more song left in the queue.

If you enjoy Web Weekly, share it with your friends and family.

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Suppose you're a person who likes looking into the sky discovering shapes and animals in the clouds, then you'll love cloudgazing.online. It's a platform (and community) to draw things in the clouds.

Look at the clouds

• "Blogs, at their best, have a person behind them."
• "Too many people are doing a great disservice to their writing by garnishing it with generative-ai."
• "The drawing is already here. It's none of your business whether you like it or not."

I heard about the Big O notation in university for the first time. While useful, I rarely come across it in daily life. However, if you want to learn what it's about and how you can optimize your method performance, Sam does a wonderful job explaining the complicated topic.

Optimize the Big O

TIL from the post; do you know that you can sum the numbers going from 1 to n with a simple formula: (n*(n+1))/2? Wild!

Call me old school, but I still use Git from the command line. I still remember how confused I was when I started using it. The most confusing command was git checkout because it handles files and branches. What the heck?

Modern Git versions support git restore and git switch and the new commands are now considered not experimental anymore.

Does this mean I've stopped using git checkout? What should I say; I tried but things are hard to unlearn.

Do you know that you can round an element's corners using SVG filters? Or use them to create natural drop shadows? Or apply an eye-catching dithering effect?

I started collecting SVG filters a while ago. If you know of any more fancy ones, I'd love to add them to the small collection.

Use SVG filters

Here's a bit of future music. Una shared that soon, with Chromium 140, we can implement CSS-only scroll spies. This means that we can highlight links in table of contents components depending on which container is currently visible by using scroll-target-group: auto; and the new pseudo-class :target-current. And theoretically, all this should work without JavaScript. Whoop whoop!

However, there's a catch... 👇

Sara had a look at the new scroll-target-group and recommends to still use JavaScript to make the CSS-only spies more accessible.

I have the slight feeling that I included Purrli last year, but it crossed my path again. If you're a cat person, you'll enjoy this internet cat!

Be comfy

I love the PPM metric (purrs per minute). 😅

The new TypeScript version comes with import defer, new init settings and... drum rolls... a new preview feature called "expandable hovers". If you've ever cursed TypeScript for only showing a type or interface in your editor without giving info on what it includes, this issue hopefully will be resolved.

Check the new version

Ahmad shared how to create multiple complex layouts with modern CSS and the post is quite a banger because it explains grid areas (grid-template-areas), style queries (style(--featured: true)), the :has() selector, and container queries. Highly recommended!

Use all the good stuff!

Side note: be aware that style queries aren't supported in every browser yet.

Josh came around with another interactive article explaining SVG primitives. It's about SVG paths. Make sure to turn on sounds because otherwise you'll be missing out!

Understand all these numbers

Disclaimer; CSS random() is very much future music. There's no MDN page and no caniuse.com entry yet. But there's a post on the Webkit blog! And while use cases for random CSS values are definitely niche, I'm super excited about them!

Roll the dice

From the unlimited MDN knowledge archive...

Did you know there's a ::target-text pseudo-element that works in all browser engines? Now you do!

Target the text

If you're long enough in the game you might remember the good old _private property naming convention. JS properties starting with an underscore were considered implementation details and shouldn't be used from the outside. Of course, this approach didn't really forbid to use or read these properties. What if I told you that you can use JS symbols to hide your internal properties?

Hide the internals

Firefox 142 now ships with the URL Pattern API. And while it's not on the baseline yet, it's already included in Safari 26. There's also a Polyfill available. If you're wrangling regular expressions to match URL patterns you should check it out!

Match it!

• slevithan/regex – A template tag for high-performance JS regexes with extended syntax.
• colinhacks/zshy – A bundler-free build tool for TypeScript libraries.
• codpro2005/ts-regexp – A strictly typed & minimal RegExp wrapper.

Suppose you're looking for a quick'n'easy and login-free tool to edit SVG paths, Hyvector might be the tool for the job.

Edit online

I think Ben is more than right with this take. 👇

❤️ If so, join 25 other Web Weekly supporters, earn some karma points 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! 👋