Guten Tag! Guten Tag! 👋

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!

Martin listens to "Arc De Soleil - Sunchaser"

Surf meets Funk meets melodies that stick for weeks. Few artists get me in the zone as reliably as Arc de Soleil.

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! ❤️

Something that made me smile this week

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

Open tabs

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".

Maybe soon: `document.ariaNotify()`

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

Node.js dual-package hazards

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

Also from the Edge team: `console.context`

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

Are Chrome's new CSS-only carousels accessible?

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

Is this micro optimization worth it?

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

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

Email

The wonderful weird web – `owlsintowels.org`

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

Hoo hoo!

I really dig this CSS-only hologram effect!

Multiple images with an applied hologram effect

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

Browser alternatives beyond the obvious

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

Vertical spacing that makes sense

Demo showing how the unit helps with a good vertical rhythm

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

Complicated curved corner effects

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.

Random MDN – new'ish `Set` methods

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

TIL recap – Static initialization blocks

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!

Find more short web development learnings in my "Today I learned" section.

New on the baseline - `RegExp.escape()`

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!

Three valuable projects to have a look at

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.

There's no new Tiny Helper this week...

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.

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

Here's a classic from swyx...

The third time you use an idea in a conversation, you have to blog about it.

Did you learn something from this issue?

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.

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! 👋

Reply to Stefan