Stefan Judis

Sharing web dev tricks with 5.7k people at webweekly.email

Today I learned Blogger

Maintaining tiny-helpers.dev

Pronouns: he/him

2025-05-15
2025-05-15

It was about time, wasn't it? πŸ˜… πŸ‘‡

But now, with Firefox 138 all major browser engines support import attributes to import JSON from within your ECMAScript modules. πŸ‘‡

βœ… Chromium: 123+
βœ… Safari: 17.2+
βœ… Firefox: 138+ (released 2w ago)

PS. This syntax works in modern Node.js, too!

// Import Attributes
import data from "./resource.json" with { type: "json" };
2025-05-13

With Chrome 136, we have a new RegExp method supported in all engines: `escape()`.

If you're wrangling regular expressions, it might come in handy!

developer.mozilla.org/en-US/do

RegExp.escape("Buy it. use it. break it. fix it.");
// "\\x42uy\\x20it\\.\\x20use\\x20it\\.\\x20break\\x20it\\.\\x20fix\\x20it\\."
RegExp.escape("foo.bar"); // "\\x66oo\\.bar"
RegExp.escape("foo-bar"); // "\\x66oo\\x2dbar"
RegExp.escape("foo\nbar"); // "\\x66oo\\nbar"
2025-05-13

@scrwd Jake's linked article is a quite nice example of classes running static blocks. Maybe it'll help. :)

til.jakelazaroff.com/html/defi

2025-05-13

@kaiserkiwi Agreed. :)

2025-05-13

@scrwd From the linked blog post.

Static initialization blocks can be extremely handy for conditionally registering custom elements (as Jake showed) or dynacially (uhm... dynamically?! πŸ˜…) setting up a shared property across class instances. I could think of a shared database connection or something like this.
2025-05-12

TIL recap: Not too long ago, I learned that you can put "nameless static" blocks into ECMAScript classes. What do they do?

A static initialization block runs whenever the ECMAScript class is initialized (don't confuse this with using the class to create a new instance).

Fancy!

stefanjudis.com/today-i-learne

class MyElement extends HTMLElement {
  // Static class property
  static tag = "my-element";

  // Static class method
  static define(tag = this.tag) {
    // ...
  }

  // πŸ‘‡ What's this is?
  static {
    // ...
  }
}
2025-05-12

Adding accessible notifications using `aria-live` or `role=status`, `role=alert`, etc. isn't a straightforward task.

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

I like it. What do you think?

blogs.windows.com/msedgedev/20

// Dispatch a message associated with the document. document.ariaNotify("John Doe is connected");   // Dispatch a message associated with an element. document.querySelector("#text-editor").ariaNotify("Selected text is bold");
2025-05-11

@jonathan Can confirm "something" view transition'ish is in nightly 140 but looks wonky on my end. 🀷

So let's see when it's ready to roll and when they move it into stable.

2025-05-11

@jonathan If I read this correctly you need to use Nightly though. 🫣

But yeah, I'm wondering if I'm missing out on all these smooth transitions, too.

2025-05-11

For my fellow Firefox friends, we might see some eye candy eventually. πŸŽ‰

Honestly, missing view transitions drove me pretty close to switching daily browsers... so let's see.

mozilla.org/en-US/firefox/140.

Starting with Firefox 139, Nightly builds now support the View Transition API.
2025-05-09

The new Web Weekly is just about to hit all the inboxes. πŸ“«

If you want to stay up to date with the web platform, you should check it out. It's jam-packed this time.

stefanjudis.com/blog/web-weekl

Web Weekly 158

- document.ariaNotify() (proposal)
- lh unit use cases
- console.context() (proposal)
- Dual package hazards
- Static initialization blocks
- new’ish Set() methods
2025-04-23

@janmon Jan! I haven't seen your avatar in ages. I hope you're well!

Nice β€” thanks. I'll check it out!

2025-04-23

@jon Thanks! I'll check it out!

2025-04-23

@eeeps @yatil Haha... I was a happy fantastical user at some point, but it doesn't have an android app and for that it was too pricey.

But I'll check out MailMate.

And hey β€” I think you both are very cool! 🫡

2025-04-23

I think I'm finally ready to leave Gmail / Gcal behind. What are the cool kids using these days?

2025-04-16

@czichon I'd call this cheating then. :D But well played! πŸ’―

2025-04-16

@czichon dang. That's a good score! πŸŽ‰πŸ«΅

2025-04-15

@matze haha! Smart. πŸ«΅πŸ˜…

2025-04-15

The new Web Weekly edition is just about to hit all the inboxes. πŸ’ͺ

If you want to stay up to date with web development and the web platform, you should check it out!

It's, as always, full of cutting-edge but also general web best practices. 🫣

stefanjudis.com/blog/web-weekl

Web Weekly 157

- The semantic meaning of <hr>
- @function
- Array.at()
- text-wrap: pretty;
- Often forgotten input attributes
- Intl.Collator()

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst