Web Weekly #158

Have you heard of the new proposals coming from the Edge team (ariaNotify() and console.context())? Should you worry about dual package hazards in Node.js? Or should you start using the lh CSS unit more often?

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

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

If you enjoy Web Weekly, help me grow this newsletter and let your friends know...

• 🦋 Bluesky
• 🐘 Mastodon
• 💼 Linkedin

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

Google continues to roll out AI summaries in Search. Fun fact: if you make up a saying Google Search will happily explain it to you making up facts, references and its own thoughts. 😅

Invent sayings

• ts-reset cleans up some of TypeScript's rough edges.
• Chrome changes how :visited links are rendered to enhance privacy.
• New on the blog: "Stringly Typed".

Adding accessible notifications using aria-live or role=status, role=alert, etc. isn't a straightforward task. You can read my notes on the topic on the blog.

To notify assistive technology from JavaScript you have to update the DOM which is hard to get right and everything but convenient. That's why the Edge team proposes and trials a new DOM method, ariaNotify().

I like it. What do you think?

Provide feedback

I've come across the official Node package publishing guide and Node.js recommends to only offer one package format these days. We should all publish either CommonJS or ES Modules...

This makes sense because in modern Node.js ESM can import CJS and vice versa, but I haven't heard of the term dual-package hazard before. Sounds dangerous doesn't it? 😅

Publish your packages the correct way

There's more from the Edge team: to tame all these log messages, console.context could give you the opportunity to group, style and filter certain messages.

I'm game!

Log with context

You might have heard that Chrome is shipping some native CSS carousels. I didn't play with them yet, but they come with new CSS properties like scroll-marker-group and new pseudo-elements like ::scroll-marker.

That's exciting! The feature is still behind a flag and it's still early days. Sara took the time to inspect and evaluate the carousel examples in terms of accessibility. Her conclusion: they're not ready but read more about it yourself. 👇

Learn more about accessibility

I'm unsure if I'll ever have to optimize when certain JS functions will be compiled and parsed (maybe this'll be something for framework authors?) but if you want to instruct Chrome to parallelize and compile function code immediately you now can do that!

Optimize your JS

Let's just say this domain name lives up to its promise.

Hoo hoo!

Christian collected some good looking hologram effects over on CodePen. I really like this style and the best thing is that they're done without fancy Math or canvas magic. It's just CSS.

How is that possible? The effect is based on stacked elements, fixed background-attachment and mix-blend-mode. Smart! Rob explains how to bring it all together.

Be fancy

You might know that Firefox is my main driver to browse the web. I'm close to switching, though. Where to? I'm peeking at Vivaldi for a while but if you want to go off the mainstream, Chris collected some nice'n'niche browsers.

Browse differently

Jen makes a strong argument for using the lh (line height) unit for vertical spacing. And what shall I say, using the line height for vertical spacing makes way more sense to keep things nicely aligned. 💯

Keep the visual order

Here are two posts for your bookmarks! 🫵

If you're working with designers who like to "go fancy," you've probably encountered curved corners outside of an element's box model. How do you build these curvy thingies then?

The problem looks straightforward at first but it's actually quite hard. Here are two examples using smart radial-gradients.

• Concave rounding (inverted radius) nav item
• Curved Box Cutouts in CSS

From the unlimited MDN knowledge archive...

JavaScript Sets aren't new, but some set methods are. If you haven't heard of difference(), intersection() and their friends symmetricDifference() and union() you should check them out!

Combine sets

Not too long ago, I learned that you can put "nameless static" blocks into ECMAScript classes. What do they do? You can learn more about static initialization blocks on the blog.

Go static!

If you're wrangling strings and regular expressions you probably start to scratch your head wondering what characters need to be escaped in a regular expression.

Luckily, with Chromium 136 a new util entered the platform and you can now let JavaScript do the job. If you look at the example above, there's quite something going on. If you're curious why the escaped characters become so complicated — MDN documents the design decisions.

Escape!

• wanasit/chrono – A natural language date parser in Javascript.
• goldbergyoni/nodejs-testing-best-practices – A super-comprehensive list of Node.js testing best practices.
• punkpeye/awesome-mcp-servers – A collection of MCP servers.

Heeeeeelllp! I've been struggling with new webdev online tools for the last few weeks. If you know and use online tools that might make a good addition to tiny-helpers.dev, please let me know.

Here's a classic from swyx...

Web Weekly might be free, but it ain't cheap.

If Web Weekly helps you getting better at your job, join 22 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! 👋