Guten Tag! Guten Tag! 👋

Have you heard that the new Git version makes rewriting history easier? Did you ever combine multiple CSS keyframe animations? And have you played with the new HTML in canvas API yet?

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

::: highlight quote Paweł listens to Hird - Keep You Kimi and says:

No chance I remember how this one landed on my playlist, but this is a solid, mesmerising tune. This baseline halfway through the song gives me goosebumps. :::

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

The biggest news this week was that Chrome 148 shipped a new Prompt API. Which means that Chrome now includes Gemini Nano. And that's right; this model probably already sits on your computer right now.

And there've been strong reactions because we're talking web standards here. Here's Mat's take:

At present, this is a web standard designed around a single company’s product.

Now, I'm not involved in spec writing but this part also seems very strange to me:

Once a model is available on your device, per the specification, any website you visit will be able to send prompts to that model without requesting permission to do so, then do whatever it wants with the responses.

Think of Chrome's scale. Millions and millions of machines downloading a 4GB model they didn't ask for so that websites can "do LLM things". Wild!

If you want to dive deeper into this topic, here are some more links:

Let's see how all this unfolds!

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

::: highlight sponsored

Uptime monitoring built for people who hate Datadog.

Upwatch is a solo-dev-built uptime monitor. Multi-region checks from New York, Frankfurt, Singapore, and Sydney. 30-second alerts to Slack, email, SMS, or webhook. $5/month for unlimited monitors — no per-seat fees, no upgrade traps. Use code WEBWEEKLY for 6 months of Pro free.

<a class="btn btn__small" href="https://upwatch.dev/webweekly?utm_source=webweekly&utm_medium=newsletter">Try Upwatch for free</a>

<small>Web Weekly is open for sponsorships. When you want to reach 6k developers, <a href="https://webweekly.email/sponsor">you know what to do</a>!</small> :::

Web Weekly housekeeping

You might have noticed, I took a bit of a break because I traveled to Valencia to give a Playwright workshop and well, I was late. Very late. And freaking out, frankly. But things went well and now we're back on track!

First of all, I need to apologize for a mistake I made last time. Ahmad booked an ad for his course "The Layout Maestro" and I made a silly copy and paste mistake. The email's CTA said "Start practicing for free" and of course high-quality materials neither can nor should be free. I'm sorry for the confusion that I caused.

Then, I plugged image-set() as being widely available and Barry had a great comment.

It's nice, but hiding assets in secondary resources like CSS (including inline attributes) chains their download 😢 So for LCP images and other important images, HTML (<img> or <picture>) are often better. Alternatively, if using this, also add a preload with a media attribute to the HTML.

Let's avoid using CSS backgrounds for important images!

Something that made me smile this week

I've got no words for this URL. 😅 I mean, why?

No code

I didn't read any great non-coding related articles. Have you? If so, I'd love to read them, too!

A quick 2min task...

npm, pnpm and bun config for release gating

With AI enabling more and more security incidents, you better be safe and tell your package manager not to slurp in every fresh package. Here's how to do it with npm, bun and pnpm.

`No-Vary-Search` (again)

No-Vary-Search: key-order, params, except=("colour" "size")

Disclaimer: the No-Vary-Search header is currently Chromium-only, but if you want to serve cached HTML to URLs with lots and lots of random query (aka tracking) parameters, you should check it out!

<a class="btn btn__small" href="https://csswizardry.com/2026/05/better-browser-caching-with-no-vary-search/">Cache it!</a>

Combined CSS animations

box { animation: rotate 5s linear infinite, rotate 5s linear infinite paused; animation-composition: add; } box:hover { animation-play-state: running; }

Changing and tweaking infinite CSS animations is harder than you think. Temani explained how to do it using the animation-composition property and of course there's plenty of other CSS nerdery included.

<a class="btn btn__small" href="https://frontendmasters.com/blog/how-to-control-infinite-css-animations-part-1-of-2/">Combine</a>

Accessibility myths debunked

Oldie but goldie: Sergei shares and debunks common misconceptions about accessibility.

<a class="btn btn__small" href="https://a11ymyths.com/">Build good stuff</a>

And if that's not enough: here's Stephanie giving even more arguments for building an accessible web.

The wonderful weird web – Cursor camp

A comic style waterfall with cursors swimming in a lake.

If you haven't gone hunting for all the goofy details in cursor camp, you're missing out!

<a class="btn btn__small" href="https://neal.fun/cursor-camp/">Enjoy the camp</a>

On readable code

// Is this good code? const data = await fetchUsers() .then(res => res.json()) .then(users => users.filter(u => u.active)) .then(users => users.map(u => u.name));

There's nothing more to say other than I agree with the points Matt makes about chaining too many methods.

<a class="btn btn__small" href="https://allthingssmitty.com/2026/04/20/why-i-dont-chain-everything-in-javascript-anymore/">Keep code readable</a>

HTML in canvas

A form that squishes and bounces when you drag a point on the form.

Are you ready for something very wild? There's a new experimental HTML in Canvas API and you can play around with it in Chromium browsers after enabling a flag. After you've done that, you can put a layoutsubtree attribute on a canvas element and it'll render HTML in the canvas element. And because it's in the canvas, you can apply all sorts of funky effects. Absolutely wild!

<a class="btn btn__small" href="https://frontendmasters.com/blog/the-web-is-fun-again-first-experiments-with-html-in-canvas/">Customize HTML rendering</a>

And if you're looking for a more practical example: here's Eric explaining how this feature solves a long overdue tooling problem.

More on the history of the `sizes` attribute

img loading=lazy src= img-650.jpg srcset=img-650.jpg 650w, img-960.jpg 960w, img-1400.jpg 1400w sizes=auto, (min-width: 1040px) 650px, calc(94.44vw - 15px)" alt="...">

I already shared my excitement about sizes=auto in WW 190 and WW 189, but because it's such a fundamental change to how we load optimized images, I think it's more than warranted.

And there's news. Chromium was first to implement it, and now Firefox has followed. Only Safari is missing! If you want to learn more about the history of the attribute and how to apply sizes=auto progressively today, Mat shared his love-hate relationship with sizes.

<a class="btn btn__small" href="https://piccalil.li/blog/the-end-of-responsive-images/">Load the right images</a>

Why you should update Git

Git 2.54 comes with a feature that I bet you've been waiting for. At least I have. git history reword <commit> lets you reword commit messages without the interactive rebase dance. Finally!

<a class="btn btn__small" href="https://github.blog/open-source/git/highlights-from-git-2-54/">Reword</a>

Random MDN – `RegExp.escape()`

const url = "https://webweekly.email"; const unsafe = new RegExp(url); console.log(unsafe.test("https://webweeklyXemail")); // true const safe = new RegExp(RegExp.escape(url)); console.log(safe.test("https://webweeklyXemail")); // false

From the unlimited MDN knowledge archive...

If you're dealing with regular expressions based on dynamic input, escape can help you out!

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/escape">Escape!</a>

TIL recap – Global Git message templates

Speaking of Git, did you know that you can set up global commit message templates?

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/global-git-commit-templates/">Align your messages</a>

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

New on the baseline

Baseline Newly Available: contrast-color / Baseline widely available :user-invalid

Short'n'sweet: contrast-color is now Baseline newly available and :user-invalid entered widely available. 🎉

Three valuable projects to have a look at

isaac-mason/crashcat – A physics engine for JavaScript.
componade/calendarjs – Lightweight date picker, event scheduler, and timeline components for JavaScript.
johannesnagl/showmd – Preview Markdown files on macOS.

A new Tiny Helper

Turn your handwriting into a real font — free

Disclaimer: I haven't tried this, but if you've ever wanted to turn your handwriting into a font, FontCrafter might be exactly what you're looking for.

<a class="btn btn__small" href="https://arcade.pirillo.com/fontcrafter.html">Fontify yourself</a>

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

Thought of the week

This quote hits home big time, doesn't it?

::: highlight quote

Nobody gets promoted for the complexity they avoided. :::

Did you learn something from this issue?

❤️ If so, join 40 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! 👋

Web Weekly #191