Web Weekly #191

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!

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:

• Google’s Prompt API
• Firefox's concerns written by Jake Archibald
• The duality of language models in the browser

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

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?

Ooo?

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

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.

• npm: min-release-age
• pnpm: minimumReleaseAge
• bun: minimumReleaseAge

No-Vary-Search (again) 

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!

Cache it!

Combined CSS animations 

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.

Combine

Accessibility myths debunked 

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

Build good stuff

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

The wonderful weird web – Cursor camp 

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

Enjoy the camp

On readable code 

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

Keep code readable

HTML in canvas 

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!

Customize HTML rendering

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 

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.

Load the right images

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!

Reword

Random MDN – RegExp.escape() 

From the unlimited MDN knowledge archive...

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

Escape!

TIL recap – Global Git message templates 

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

Align your messages

New on the baseline 

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 

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.

Fontify yourself

Thought of the week 

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

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