Nostr notes by Patrick Brosset

🌏🗣️ Localizing PWAs is about to get a whole lot better! ...

2026-04-24T14:32:53Z

🌏🗣️ Localizing PWAs is about to get a whole lot better!

With manifest localization, you can now provide translations for your app name, description, icons, and more, which wasn’t possible before.
Shipping in Chromium 148.

Amazing work from Alexander Kyereboah on the Edge team.

➡️ https://developer.chrome.com/blog/manifest-localization

Curious about custom <select>? I wrote about some of my ...

2026-03-11T15:32:39Z

Curious about custom <select>?

I wrote about some of my recent demos over at CSS-Tricks (npub1j5z…uqw3)!

Take a look ✨ https://css-tricks.com/abusing-customizable-selects/

Fun isn’t a distraction from learning, it’s how we learn ...

2026-01-06T09:49:51Z

Fun isn’t a distraction from learning, it’s how we learn best.
The web is still a playful playground: open a text editor, try something weird, learn something new.

Let's all keep the web fun, weird, and wonderful!
➡️ https://patrickbrosset.com/articles/2026-01-06-fun-with-the-web/

In 2005, The Million Dollar Homepage went viral. It let you buy ...

2025-12-30T14:15:45Z

In 2005, The Million Dollar Homepage went viral. It let you buy ad space for $1 per pixel. People went crazy.

Reminiscing about this, I discovered it used a single <img> and an image map for ad links.
So, obviously, I had to create a version of it with CSS grid!

➡️ https://patrickbrosset.com/lab/million-dollar-grid/

Trying to animate grid-row and grid-column to make an item move ...

2025-12-16T13:51:51Z

Trying to animate grid-row and grid-column to make an item move around a CSS grid.
It works great as long as I don't use a custom property for the grid size.
If I do, the item jumps between corners on Firefox. Works fine in Chromium.

Left: Chrome
Right: Firefox

See: https://codepen.io/captainbrosset/pen/YPqopPj?editors=0100

Based on last year's State of HTML, 60% of web developers ...

2025-10-01T13:46:47Z

Based on last year's State of HTML, 60% of web developers find it challenging to keep informed of new web platform features, which I can definitely understand.

At the same time, I keep seeing newsletters and blogs that seem to be doing a great job at it.

What's missing for you?

📢 The Interop 2026 proposal window is closing later today! 122 ...

2025-09-24T09:32:03Z

📢 The Interop 2026 proposal window is closing later today!

122 proposals have been created: https://github.com/web-platform-tests/interop/issues?q=is%3Aissue%20state%3Aopen%20label%3Afocus-area-proposal

Is anything missing from that list? Are there critical building blocks of the web which you need to work the same in all browsers?

If so, add it, or vote for it with a 👍!

The URL Pattern API is now available across all major browser ...

2025-09-22T06:44:57Z

The URL Pattern API is now available across all major browser engines! It's now much easier to work with URLs.

See https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API for more info.

The CSS Custom Highlight API lets you style ranges of text ...

2025-09-16T11:43:31Z

The CSS Custom Highlight API lets you style **ranges** of text without creating new nodes in the DOM.

And now, with the new highlightsFromPoint() method, you can even find custom highlights under the cursor and unlock cool text editing experiences.

See https://developer.mozilla.org/docs/Web/API/HighlightRegistry/highlightsFromPoint

Starting to work on something cool: ...

2025-08-25T17:01:23Z

Starting to work on something cool: https://github.com/webmachinelearning/webmcp/blob/main/docs/explainer.md

As a web developer, if you think you should be given a say in how AI browsers use your app, then take a read!

I'll be digging into this more soon, but would love to hear any early feedback you might already have on this.

Same here ... hopefully some storm tomorrow, bring that ...

2025-07-02T12:14:49Z

In reply to nevent1q…g0sq
_________________________

Same here ... hopefully some storm tomorrow, bring that temperature down.
Hang in there.

This still works on the web. Love that weird 20+ years old ideas ...

2025-07-01T16:55:03Z

This still works on the web. Love that weird 20+ years old ideas are still implemented in browsers. Keep the web weird.
Thank you Chris Wilson (npub1pu2…mhz5)

The ability to style grid and flex gaps is coming fast in a ...

2025-06-05T12:29:03Z

The ability to style grid and flex gaps is coming fast in a browser near you!
Bubbling with ideas for what this will be useful for!

Code: https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations

Scrollbar styling just became a whole lot better on the web! The ...

2024-12-16T10:35:55Z

Scrollbar styling just became a whole lot better on the web!
The scrollbar-width and scrollbar-gutter CSS properties are now supported in the latest versions of Chrome, Firefox, Edge, and Safari.

December release notes: https://web-platform-dx.github.io/web-features-explorer/release-notes/december-2024/

Now we just need scrollbar-color and we're set. Come on Safari!

Today I learned about Object.assign() and how it can make DOM ...

2024-12-10T08:15:59Z

Today I learned about Object.assign() and how it can make DOM node creation code look a bit more compact:

document.body.appendChild(
Object.assign(document.createElement('div'), {
style: 'color: red;',
className: 'foo bar',
textContent: 'Hello, world!'
})
);

Object.assign(target, source) copies all properties from source to target, and returns target.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

~40% of my immediate fediverse circle doesn't know what an ...

2024-12-06T09:51:24Z

In reply to nevent1q…dyfm
_________________________

~40% of my immediate fediverse circle doesn't know what an origin trial is. Probably fair to assume that at least 50% to 75% of web devs don't either.

Origin trials are a mechanism by which certain browsers let you use early experimental APIs in production, on your site, for some time.

This allows you to test the API early, as if it was already enabled.
And it helps us get feedback and make the API better for everyone.

Interested? See
https://developer.microsoft.com/microsoft-edge/origin-trials
and
https://developer.chrome.com/origintrials/

Without looking it up, do you know what an "origin trial" ...

2024-12-05T14:19:04Z

Without looking it up, do you know what an "origin trial" is?

it took me so long to wrap my head around these ...

2024-12-04T14:07:57Z

In reply to nevent1q…2ktv
_________________________

it took me so long to wrap my head around these justify/align/place keywords, and the content/items/self suffixes too.
It finally clicked for me a few years ago, but still a bit of a struggle to remember when I need them.

Nostr event nevent1qqsypdlhdnqxn9rnft4vjln57vhwwan3w5975puhnf26wc3k7e4aasszyz32cfg3acrd2h9crexwp95q3wal4zru9hcf74tgtnftsr0mfsne7c9zx6s

2024-12-04T13:53:03Z

In reply to nevent1q…k7n9
_________________________

yes!
https://web-platform-dx.github.io/web-features-explorer/features/align-content-block/
https://developer.chrome.com/blog/align-content

Experimenting with showing "vendor positions" on the web ...

2024-11-29T17:16:25Z

Experimenting with showing "vendor positions" on the web features explorer, on top of browser compat. This way you can see if a feature is held up because it hasn’t been implemented yet, or if the vendor opposes it.

Example: https://web-platform-dx.github.io/web-features-explorer/features/accelerometer/

Is this how you feel when trying to keep track of new things on ...

2024-11-26T18:02:23Z

Is this how you feel when trying to keep track of new things on the web?
If so, what resources/tools help?

Care about IndexedDB read performance ⚡? Check out Edge’s ...

2024-11-20T09:08:34Z

Care about IndexedDB read performance ⚡?

Check out Edge’s getAllRecords proposal, which allows for fast batch reads in either directions ➡️ https://patrickbrosset.com/articles/2024-11-19-even-faster-indexeddb-reads-with-getallrecords/

Feedback on the explainer is more than welcome!

The official results from the State of HTML 2024 survey are now ...

2024-11-13T09:03:26Z

The official results from the State of HTML 2024 survey are now live: https://2024.stateofhtml.com/en-US
including a conclusion from yours truly.

Good news, Firefox 132 just shipped, which means that ...

2024-11-05T08:44:38Z

In reply to nevent1q…dayj
_________________________

Good news, Firefox 132 just shipped, which means that requestVideoFrameCallback is now supported across all browser engines!

https://web-platform-dx.github.io/web-features-explorer/features/request-video-frame-callback/

The web Notifications API lets you alert users in a nice ...

2024-10-29T17:13:59Z

The web Notifications API lets you alert users in a nice OS-integrated way.

But, what if you work on an audio/video calls app? Wouldn't you need slightly different notifications? Notifications that better convey the immediateness of a call? That have obvious Accept/Dismiss buttons?

On the Edge team, we have a solution for this:
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Notifications/notifications_actions_customization.md

And an implementation in Chromium.

If this is something you need, we'd love your feedback and questions: https://github.com/MicrosoftEdge/MSEdgeExplainers/issues

YES, that’s exactly what I’ve been working on, on the side, ...

2024-10-19T18:34:57Z

In reply to nevent1q…9350
_________________________

YES, that’s exactly what I’ve been working on, on the side, together with my work on the WebDX community group:

Home page: https://web-platform-dx.github.io/web-features-explorer/ (see the various tabs for newly and widely)
Release notes: https://web-platform-dx.github.io/web-features-explorer/release-notes/
RSS: https://web-platform-dx.github.io/web-features-explorer/release-notes.xml

First time in New York. In love with this city. ...

2024-10-10T17:40:04Z

First time in New York. In love with this city.

Today is the LAST day to submit proposals for the Interop 2025 ...

2024-10-09T13:00:42Z

Today is the LAST day to submit proposals for the Interop 2025 project.

But also, it's a great time to review the existing proposals and upvote the ones you care about!

Unleash your thumbs-up emojis at:
https://github.com/web-platform-tests/interop/issues?q=is%3Aopen+is%3Aissue+label%3Afocus-area-proposal

Declarative Shadow DOM allows you to create your component's ...

2024-10-04T09:13:24Z

Declarative Shadow DOM allows you to create your component's shadow DOM from HTML rather than JavaScript, making server-side rendered components possible.

(bonus: it's now in all browsers, since earlier this year).

A problem we've heard web devs talk about is the inability to share styles though. State of HTML 2023 gave pretty signals on this.

My Microsoft Edge colleagues have solution proposals for this!
➡️ https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md

We'd love your feedback! Feel free to open issue on the repo.

The video.requestVideoFrameCallback() method is soon coming to ...

2024-09-19T14:42:03Z

The video.requestVideoFrameCallback() method is soon coming to all browsers. This means you'll soon be able to run code on every frame of a playing <video>, which can be useful to, for instance, update a <canvas> at the same time.

Here's a quick demo video showing how I used this to compute the average color of a video frame (by dropping the frame into a canvas and getting the image color data), and set the page's background color to it.

🌟 We now have an RSS feed 🌟 You can now subscribe to our ...

2024-09-17T15:56:18Z

🌟 We now have an RSS feed 🌟

You can now subscribe to our web platform release notes at
https://web-platform-dx.github.io/web-features-explorer/release-notes.xml

Thank you [@azu_re](https://mstdn.jp/@azu_re ) for contributing that very useful feature.

Need to store a lot data on the client-side, in a real database? ...

2024-09-04T07:04:23Z

Need to store a lot data on the client-side, in a real database?

If you can afford it (if your users can pay the download cost/time), then know that SQLite is available as a WASM build, and can run in the browser.

It's backed by the Origin Private File System API (OPFS), which has been available in all browsers for 1,5 year (Firefox 111 was the last one to support).

Check it out https://sqlite.org/wasm/doc/trunk/index.md

Heard of baseline? Not sure what it is? I try to explain ...

2024-08-23T19:23:07Z

Heard of baseline? Not sure what it is?

I try to explain baseline, web-features, and the work we do on the WebDX community group in this very short video.

Take a look!
https://www.w3.org/2024/09/TPAC/demo-baseline.html

Is Firefox bringing back support for PWAs? Maybe: ...

2024-08-13T08:07:50Z

Is Firefox bringing back support for PWAs?

Maybe:
https://connect.mozilla.org/t5/discussions/how-can-firefox-create-the-best-support-for-web-apps-on-the/m-p/60561

Nostr event nevent1qqs8rlgvn2emnwhf53maldmh4shywhx4nlzsgqafel5547jfnezy2yqzyz32cfg3acrd2h9crexwp95q3wal4zru9hcf74tgtnftsr0mfsne7gnlh3z

2024-08-12T07:05:52Z

Back at work after 3 weeks off. Wish me luck.