Web Weekly

Web Weekly #199

Tue, 08 Sep 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Do you know how Interop 2026 is doing right now? Will you use the new CSS progress() function? And do you know how ESM module resolution really works?

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

::: song by="Pawel" title="Kalabrese - Fresh And Foolish" youtube="tvoGb76yUEk" Is it only me, but this one reminds me the vibes of early Roisin Murphy? Love the vocal and jazzy parts on this one. :::

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

How much controversy can there be around dark/light mode toggles? Turns out, a lot. Lea Verou kicked off a whole thing. People have opinions on these little two- or three-state toggles.

So, Lea started the discussion by arguing that website visitors don't care about dark mode toggles (I agree) and that they only reach for them when something's off.

A dark mode toggle is a temporary comfort adjustment. [...] It’s situational, it’s immediate, and it’s usually about the environment you’re in rather than a considered long-term stance on color schemes.

From there, she argues that a dark mode toggle should only have two options: the system preference (shown as dark or light) and the opposite. That's smart. Whenever things are different from the system, you can store the preference that's not the system default. If it matches their general settings, there's nothing to do, and if you go back to the system setting, you clear the preference. This approach seems reasonable to me at first sight.

Bramus disagreed, though.

When building these types of control, I think that one of the main goals here should be to keep things predictable for users.

And well, that's a strong point, too, I'd say. A little sun icon that actually means "system preferences" is a bit tricky to understand if you really care about light and dark modes. I tend to agree here, and it seems like a "Agree to disagree." case, but the whole community had feelings about this. Lea shared more feedback in a follow-up post. And it closed with a banger:

And then it dawned on me: all these persistent dark mode toggles I had seen, literally all of them have been on developer-facing sites!

And I think that's what I came to conclude, too. It's an interesting discussion to have but I really don't think normies care too much about two, three, or no dark/light mode states. Things can always be better and smoother, but for this case I think it's just us nerds who love discussing these things. 😅

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

I've been out conferencing for the last two weeks, so Web Weekly had to be put on the back burner for a bit. But today marks edition 199. I'm not sure if I'll do something special for 200 but man... this newsletter has been going for a looooooong time.

A big thanks this week goes to Torsten. 57 people help me out with a little bit of money now. Thank you all! These small gestures really keep me going. If you also want to support indie publishing, you can do so on Patreon or GitHub Sponsors. It really makes a difference in these hard times of AI slop and low-effort web creation.

No code

"Building without predicting" → "I love that this home feels wrong for others, and just right for us."
"The Amazon Tax" → "My publisher is paying Amazon a dollar to show you an ad for the book you went to buy in the first place."
"Your AI Output Is Someone Else's Input" → "So now I run one test before I send anything, and it catches almost everything: would I be glad to receive this?"

Peek into the future: a new universal selector?

The CSS working group came up with a new way to select elements matching prefixed classes. You can think of the Class Prefix Selector (.prefix-*) as a new way to select btn-primary, btn-secondary, btn-whatever, and whatever btn- class comes next.

See what's coming

I like it, but many are skeptical, too. Here's Anselm with a whole list of questions and feedback.

Well-known `change-password` URLs

Quick reminder, if you're working on a SaaS product that requires a login, please check if you've defined the well-known URL to change passwords. Password managers will check /.well-known/change-password to offer a quick way to change passwords. It's a tiny thing, but it makes life easier for everyone.

Check the spec

Interop proposals for next year

Interop for 2026 is in full swing, but do you remember what was included? Let me show you my favorites and where we are at right now.

Container Style Queries: 100% interop
CSS contrast-color(): 100% interop
CSS anchor positioning: 99.4% interop
CSS attr(): 99.7% interop
Custom highlights: 98.8% interop
Media pseudo-classes: 100% interop

I know there's some criticism about Interop, but I still think it's a great initiative. Not surprising, but still cool to see: Chromium is leading and has almost finished all its 2026 promises. We're in September, so that's cool. Firefox and Safari aren't that far behind, though.

But what should be included next year? What features are you missing on the web? We can all now propose focus areas for Interop 2027 on GitHub. If you want to get involved, now's the time.

Submit a focus area

A new syntax highlighter in town

I'm still guilty of not using "span-free syntax highlighting" on my blog. And now there's a new custom element to get colorful code on your pages with a single import. Dave explained how and why he came up with the microlighter project.

Drop the spans

And if you want to have something to compare microlighter with, check out syntax-highlight which highlights code blocks using the CSS Custom Highlight API, too.

The wonderful weird web – Cows on a roadtrip

I don't know why this exists, but the randomness makes me smile. And no, no cow will be harmed here!

Go on a roadtrip

Module resolution explained

This post covers common footguns when it comes to module resolution. It compares CommonJS and ESM modules, and while CommonJS and the good old require slowly but surely lose importance, it's good to know about live bindings, import hoisting, and general module internals. Highly recommended.

Import all the things

New things coming to HTML

Chris came up with a real banger. Have you seen all these new HTML elements entering the platform? There's , , and , just to name a few. Granted, many of these are Chromium-only, but I like where we're heading here.

Discover the new HTML

And if you want to dive deeper into , our friends at Piccalilli released a deep dive and Chrome has some more new elements already in the making ( and ).

AI;dr

AI remains the stickiest conversation topic I've ever seen. It even tops the recent German state elections. #fckafd It's simply exhausting. Here are some things you might enjoy.

AI;DR (AI; Didn’t Read)
Don't paste the AI, please. (it's a perfect single-URL reply and you know that I love these)
Don't be a meat proxy
No AI Fridays

Things to put into your `head` in 2026

Manuel shared his current HTML boilerplate for new projects, and you can probably borrow some things for your own projects from it.

Set things up

TIL: `@property` changes property computation

:first-child { /* 👇 what's ? */ scale: var(--index); } }">

Well, here's Jake sharing yet another detail about custom properties that I'm sure not many people know about. It's funny how many footguns can show up in a "simple variable system". Years ago, I stumbled over a surprising !important behavior when using custom properties.

Either way, Jake's article is great. Go and read it. I'm sure you'll learn something!

Compute properties

Random MDN – `Server-Timing`

From the unlimited MDN knowledge archive...

If you're monitoring your site's performance and you have some server-side processing at play, you might wonder how much time was spent on a certain task in the backend. The Server-Timing HTTP header allows you to make this time visible in the frontend via a PerformanceObserver.

Track server performance

TIL recap – Hide critical commands from your terminal history

If you're wrangling with critical commands and lots of environment variables, you probably want to avoid all of them entering your shell history. A preceding space character might help you out!

Keep your history clean

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

New on the baseline: `progress()`

With Firefox 155, released September 1st, the progress() CSS function became Baseline newly available.

Classifieds & friends

Polypane hit version 30 and it's a massive release. If you've been on the fence about using a browser built for web development, you should check it out right now.

Give Polypane a try

Three valuable projects to have a look at

vercel-labs/visual-json – The Visual JSON Editor.
pwa-today/pwa-check – Make sure your PWA looks, feels, and behaves like a real app.
nkzw-tech/codiff – A fast local diff viewer.

Thought of the week

Yep, I can confirm this holds. 😅

::: highlight quote

The less you understand, the more you trust AI. But the more you trust AI, the less you understand. :::

Did you learn something from this issue?

❤️ If so, join 57 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 #198

Sun, 16 Aug 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you heard of the new Git history commands? Are you overwhelmed by Chrome's performance profiler? And do you use the inert attribute in your sites?

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

::: song by="Paul" title="Wet Leg — Tiny Desk Concert" youtube="AzUHNjKMeV4" I recently learned about the band Wet Leg when I saw them perform on NPR's Tiny Desk on YouTube. Their album moisturizer has been on repeat often since then. :::

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

I've been cleaning up some tabs the last couple of days and even though I'm no font person, here are some fonts that might come in handy in the future.

Datatype is a variable font that turns text into charts. 🤯 I've got no idea how this works technically, but it can definitely be useful for inline graphics or sparklines. Disclaimer: be aware of accessibility issues. You should probably go with a role="img" and span combination when using it.

Redacted Script is a font that looks like hand-written placeholder text. I'd love to see a skeleton placeholder with it. 😅

And if that's too fancy, Flow Block does the same but without the handwriting.

Maybe I should sit down one day to understand how all this font magic works...

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

This week's summer bag of karma points goes to Nadja and Charles, who started to support Web Weekly financially. This brings the supporter count to the amazing number of 56.

After subtracting the cost of sending and hosting, Web Weekly now makes around $160 per month. Thank you all for supporting this newsletter! ❤️

If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors. It really makes a difference in these hard times of AI slop and low-effort web creation.

Something that made me smile this week

There's nothing to see here, it's just a browser running in your browser.

Spin up Firefox

No code

"The Last Technical Interview" → "Interviewing, it turns out, is a big game of darts. A “do I like you” dating round."
"'Code was never the hard part' is an insult to all programmers'" → "Your role and your responsibilities will be changing. Be willing to invest time and energy into better understanding fields or roles adjacent to yours."
"The Human-in-the-Loop is Tired" → "Yes the code (sorta) writes itself, but the human reviewing, directing, and course-correcting feels worse, not better."

The "No code" section turned out to be rather technical this week. 🫣 If you have good articles outside of the tech bubble, shoot them my way!

The experimental `git history` command

Git ships a new history command that makes it easier to change and fix commits. If you dislike interactive rebasing, you'll really like this one.

Change history

Element states in JavaScript and (!) CSS

{ if (event.target.matches(":focus-visible")) { /* Do something */ } });">

I really liked this one. Daniel put CSS states (:focus-visible, :popover-open, :fullscreen etc) next to possible JavaScript implementations. He also went into the fairly new event-trigger CSS props and that's some fancy stuff!

Tailor to state

New in Edge: network efficiency guardrails

I dig this a lot! Edge now ships an experimental feature that warns you about and monitors network activity that isn't optimized, like uncompressed assets or large images.

Stay fast

Understand the performance profile

If you're intimidated by the Chrome DevTools performance tool, you'll dig this one. Joan put together a nice explainer about all the details you need to know!

Get into it!

The wonderful creepy weird web – cookie-less fingerprinting

I'd say I was pretty aware of all the possibilities and information my browser shares about me, but it's still wild to see all this data in black and white.

Know your fingerprint

On overflowing images

Here's Temani yet again doing Temani things explaining how to tweak and adjust the overflow of individual images using object-fit and object-position.

The element (the HTML element) is the “container”, and the image resource (the actual image) is loaded inside that “container” and becomes the “content”. We have our container-content relation so we can talk about overflow.

It's a great read to understand img fundamentals.

Understand images

View transitions block interactions

Have you ever noticed that "things become unclickable" when a view transition is running? If you're running long animations, Chris shared what you can do about it.

Keep things interactive

Gap decorations are rolling out — some links

Since releasing the Web Weekly redesign, I've been waiting for CSS gap decorations to ship across browsers, because the design includes plenty of borders, and styling everything across viewports caused a mild headache.

CSS gap decorations are shipping in Chromium already. If you want to dive deeper, here are some links.

Gap Decorations Are Now Available, Here’s What’s New (to get started)
Let’s Play With Gap Decorations! (to get very fancy)

Visual design rules

I'm pretty sure I read this post years ago (seems to have been extended since) and I'm still following some of the rules. These easy-to-remember rules will help you out if you don't have an eye for design.

Prettify things

Random MDN – `inert`

From the unlimited MDN knowledge archive...

If you're dealing with elements that shouldn't be accessible or reachable at all, the HTML inert attribute helps out!

Make elements inert

TIL recap – `@keyframe` animations in the CSS cascade

Did you know that keyframe animations have a special place in the CSS cascade? No? Then this post is for you!

Animate

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

New on the baseline

There doesn't seem to be a new feature that recently went on the baseline, so let me share three things that just went baseline widely available! 🎉

I might be getting old, but it still feels like these features landed yesterday.

Three valuable projects to have a look at

overflowy/make-look-scanned – Makes PDFs look scanned.
nubjs/nub – The fast all-in-one Node.js toolkit.
terminal-image – Display images in the terminal.

A new Tiny Helper

The folks behind the TanStack software factory released another tool to compare npm download stats. It's not the first site that does this, but it has some more config options if you want to dive deeper.

Compare

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

Thought of the week

As I'm turning 41 this week, I feel every word of this post. Keeping friendships alive often becomes hard work and "friends for life" can quickly become "people I used to know" if you're not careful.

::: highlight quote

Adult friendship became one of the most emotionally significant and least discussed losses of modern life. :::

Did you learn something from this issue?

❤️ If so, join 56 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 #197

Tue, 04 Aug 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Are you ready for the closedby attribute? Will you measure elements with containertiming? And do you use CSS infinity?

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

::: song by="Paweł" title="GUTS 'METIS'" youtube="8RK6NKTKYUg" This one was recommended to me by Apple Music while driving back home last week. The moment I heard it for the first time I put it on loop and it was playing for the rest of the journey (1hr). Really positive vibe. :::

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

Let's open this issue by looking at two developer surveys worth your time.

First, the State of Devs survey is open for participation. And if you have a moment, you should fill it out. I sound like a broken record, but things are changing. There's a lot of uncertainty and, frankly, occasionally I'm navigating a full-blown identity crisis. I'm very curious about whether I'm alone with these feelings...

And second, the State of CSS survey results are out! 🎉 As always it's a great read to discover new features and get a feeling for how "cutting edge" everybody is out there.

And to everyone who mentioned me in the resources section, thank you! I'm very humbled to be on this list of great people in the web dev community. 🥹

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

Building an AI Workflow UI in React? Start With JointJS

Most teams building AI workflow UIs start with a lightweight node graph library. Quick to a demo, but you hit a ceiling once the product gets real: UX gaps and slowdowns on large diagrams.

JointJS for React starts where that ceiling is. On UX, you get a full diagramming toolkit: a drag and drop canvas with editable nodes, validation, undo/redo, keyboard shortcuts, snaplines, and accessibility. On performance, rendering is optimized to stay smooth as pipelines grow to hundreds of nodes.

The JointJS AI Workflow Builder template gives you ~90% of the app, full source included. Wire up your execution backend and ship. Already trusted in production by teams at UiPath, DocuSign, and Bloomberg.

Start building

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

Web Weekly Housekeeping

This week's summer bag of karma points goes to Zerde, who started to support Web Weekly financially. This brings the supporter count to the amazing number of 54.

After subtracting the cost of sending and hosting, Web Weekly now makes around $150 per month. Thank you all for supporting this newsletter! ❤️

So, if you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors. It really makes a difference for me in these hard times of AI slop and low-effort web creation.

Something that made me smile this week

Guess what you'll find at clickclickclick.click. I can't help it; I just love people who put out silly things on silly domains. ❤️

Click!

No code

Stage Fright. → "There's no way you can go through with this. But you do it anyway. Because it's too late to back out now. Because not doing it would be worse, somehow."
What does "playing politics" mean for software engineers? → "If you have powerful enemies at a company (for instance, the CTO or an influential VP doesn’t like you), quit."
How to Take Feedback without Getting Defensive → "Almost always, defensive behaviors are coping mechanisms for difficult emotions."

Browser Performance Timing APIs

Harry explained the new containertiming attribute, which is currently running as a Chrome Origin trial. If you're not knee-deep into perf topics, the post includes more than one rabbit hole to jump into. For example: Have you used the elementtiming attribute to get render information of image or text nodes? Or, do you use the User Timing API to mark certain render/performance milestones?

Measure!

`Promise.all` but for good old objects

The "Await dictionary of Promises" ECMAScript proposal moved to stage three so that we'll finally be able to await objects. Can't wait!

Wait for the properties

On standards, processes, and specifications

Lea makes a strong case for the usefulness of polyfills. If you want to learn more about the current state of polyfills, ponyfills, and prollyfills (I hadn't heard that one before), this post includes tons of background info.

Fill the platform gaps

CSS Route and Navigation Matching

Bramus is working on new ways to make view transitions easier to handle in an MPA scenario. This is in its very early stages, but look at this funky CSS.

Bramus is looking for feedback!

Peek into the possible future

The wonderful weird web – Dustin's website

Well, that's what I call yet another fancy personal website. 👏

Get to know Dustin

CSS `infinity`

How could you stack on top of an element with the highest possible z-index (2147483647)? Correct! You use CSS infinity to get on top of the highest stack. Adam lists some more creative infinity use cases.

Stack on top!

Follow the OS font size

Back in Web Weekly 182, I included the new text-scale meta element which enables sites to react to OS font size changes. I didn't realize that there's more to this topic.

Apparently, there's also the preferred-text-scale CSS env variable. Josh was involved in the spec and shares how a particular BBC problem led to this new font size approach.

Respect the OS

Scale text automatically

Speaking of text scaling, apparently Chrome 150 shipped the new text-fit property. There are no real MDN docs, and the spec would be the best we've got if it weren't for Krijn, who documented all the options with visual examples.

Scale automatically

Measure SPA navigations

With Chrome 151, soft navigations entered the mainstream. If you haven't heard the term, a soft navigation is anything that:

is initiated by a user action.
results in a visible URL change to the user.
results in a visible paint.

So, we're talking about a new way to monitor and measure classical SPA navigations.

Measure the navigation

Side note: if you're using the web-vitals library, soft navigations are now supported with v6.

Random MDN – `closedby`

From the unlimited MDN knowledge archive...

We're not entirely there yet in terms of browser support, but the new closedby property ships in Chromium, Firefox and is already included in Safari TP, so it's about time to look into it.

Close it with anything

TIL recap – use `Intl` to format and localize units!

Here's a quick party trick: did you know that you can use Intl to format numeric values with their units?

Format with style

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

New on the baseline

The linear() easing function made it into Baseline widely available territory.

And since Firefox 153, all recent browsers support new info methods like getTimeZones, getTextInfo, or getHourCycles on Intl.Locale objects.

Three valuable projects to have a look at

duongductrong/Snapzy – A macOS screenshot and screen recording app.
charmbracelet/glow – Render markdown on the CLI.
gkurt/tegaki – Handwriting animation for the web.

Thought of the week

This is by far my biggest concern with the "new world" we're in. As Koshy says, it's never been so easy to pretend without understanding what's going on.

::: highlight quote

[AI] makes it easy to simulate competence without building competence. :::

Did you learn something from this issue?

❤️ If so, join 54 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 #196

Sun, 12 Jul 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Do you know what shipped in the new JavaScript version? Do you know about all the fancy anchor positioning features yet? And do you use CSS zoom?

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

::: song by="Olivier" title="Connor Price & Nic D - Too Easy" youtube="zOVkU-P3SyA" It's been on repeat in my playlist for the past two weeks since I watched an Android Gemini Intelligence ad... :D :::

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

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

Full-Featured React Event Calendar

SVAR React Calendar brings Google Calendar-style scheduling to your React app — multiple views, drag-and-drop event editing, and a built-in edit form for creating and updating events. Events are easily organized into color-coded calendar groups.

It's built natively in React, with no wrappers or adapters, and includes TypeScript support, easy backend integration, light/dark themes, free core + PRO with timeline, agenda, and resources views.

Start building scheduling UIs in minutes.

Try SVAR React Calendar

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

Web Weekly Housekeeping

This week's bag of karma points goes to Chris, Spike, Dan, James, and Gerrit, who all started to support Web Weekly financially. This brings the supporter count to mind-boggling 53. After subtracting the cost of sending and hosting, Web Weekly makes now a bit under $150 per month.

Thank you all for supporting indie publishing. ❤️

Something that made me smile this week

Aerospace engineer Cauê added a town square to his site (scroll to the bottom) and this brings back strong vibes of when the internet used to be fun. The project is open source if you want to have a place on your site for people to hang out.

Talk to strangers

No code

How to ask for help from people who don't know you → "One of the strongest ways to show that you’re worth helping is to demonstrate that you are a serious person."
Goodbye, forever, probably. → "People aren’t seeking information in the ways we once knew; The Internet and its communities have fragmented."
Memories Can’t Wait—or, How I Learned to Keep Worrying About the Web → "We need to stop pretending that “the cloud” is a place. It’s not a place. It’s a promise"

Anchor positioning

I'm still wondering about anchor positioning (baseline newly available) use cases beyond the tooltip example. Emil explains how multiple anchors help out with creating clickable card overlays. Fancy stuff!

And if that's not enough anchoring, Josh explains how to get started with anchor positioning. But don't be fooled, the post gets into advanced topics like the anchored container query and position-try-fallbacks quickly.

Inaccessible grid lanes

Safari shipped display: grid-lanes. Chromium's working on it. But what does it mean for accessibility when grid items are free-flowing and reordering themselves? Can an adjusted flow-tolerance help? Manuel asks the same questions and cautiously proposes a very interesting solution.

Be aware

The `color-scheme` and `prefers-color-scheme` disconnect

Ollie described a fact that tripped me up big time:

There’s an unfortunate disconnect between color-scheme and the prefers-color-scheme media query. prefers-color-scheme reflects the OS settings — regardless of the color-scheme value. If you’re providing an in-page toggle that implements dark mode, you can’t adopt the prefers-color-scheme media query.

So what do you do about it? The post has some web platform answers.

Use the new and fancy

Linked CSS params 😱

So! If you're dealing with SVG icons you probably know the pain of overwriting colors. Patrick listed missing SVG features and as it turns out there's a new spec in the making that allows controlling CSS variables from "the outside". And I didn't test it, but he says that it's shipping in Firefox already!

Control your SVGs

The wonderful weird web – Roland 50

The music nerds will love this one!

Produce

Deno and Vercel invest in desktop apps?

Honestly, I'm up for opinions here. The new Deno release now supports building desktop apps. When I saw this I was confused. Didn't Deno lay off people and isn't the money in providing hosting and infrastructure? Odd.

But then I also saw Vercel pushing for building Zig and web-based desktop apps with Native SDK?

Honestly, what is going on? Is this about market share? I don't get it.

Wiggly range sliders

What you see above aren't canvas or SVG elements. These three range sliders are classical range inputs with some CSS magic. I've got no idea how Temani comes up with that stuff.

Wiggle

New things in ECMAScript

It's already a tradition and I'm happy to see that Paweł is still summarizing the new JavaScript features. Check out what's coming to JavaScript.

Use the language

Riding the cutting edge of CSS

Jake went on a journey to "improve" the sizing behavior of customizable selects (Chromium-only so far) and oh boy... he goes into anchor positioning, stretch and fit-content, and calc-size. I'm sure you'll find more than one rabbit hole to dive into here.

Select

Rapid fire

TypeScript 7 is out. And yes, that's the Golang rewrite.
The new QUERY HTTP method moved from draft to proposed standard.
Chrome ships a new usermedia element.

Random MDN – Cross-document view transitions

From the unlimited MDN knowledge archive...

Quick reminder, cross-document view transitions can be enabled with a few lines of CSS. Safari and Chromium ship them, so you can add some polish to your static sites. No harm done for Firefox users.

Transition

TIL recap – `zoom`

A while ago I learned about valid use cases for the CSS zoom property. zoom? Yes, exactly. 😅

Scale up

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

Automatic baseline updates

I've got my own tooling for checking baseline updates, but if the Web Weekly updates aren't enough, webstatus.dev now lets you set up baseline notifications.

Stay up to date

Classifieds & friends

My buddy Orçun is building AutoShelf and you should check it out if you want automated file organization.

Three valuable projects to have a look at

ashleydavis/photosphere – A cross-platform application for managing your database of digital media files
duongductrong/Snapzy – An open-source native macOS screenshot and screen recording app.
charmbracelet/glow – Render markdown on the CLI.

A new Tiny Helper

If you've ever wondered what specific analyzer tools, user agents, or browsers execute when they crawl sites, ua-tracer helps out!

Check what's happening

Side note: the last time I mentioned that I'm not really sure about Tiny Helper's future because frankly I'm drowning in vibe code submissions. Some of you replied telling me that you really like this section. So, what should I do with it?

For now, I closed contributions to the project and this section will become optional. I'm annoyed by this because I'm a big fan of consistency, but let's see how this plays out.

Thought of the week

This is a take I can get very much behind.

::: highlight quote

In an ideal world, the only AI-generated content I want to consume is the one I request myself. :::

Did you learn something from this issue?

❤️ If so, join 53 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 #195

Sun, 21 Jun 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Did you check out the new WebKit grid-lanes resources already? Do you "view transition" with match-element? And have you heard of HTML streaming maybe becoming a thing?

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

::: song by="Pablo" title="GENER8ION - STORM starring Yung Lean" youtube="x6_mbnsh6VU" I loved the cinematography, choreography and the whole bad-boys-from-high-school vibe. :::

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

Let's open this week with some fancy CSS grid stuff!

Peter-Paul explained how the grid layout algorithm works. For most cases you don't need to think about the internals, but it's good to know how things work. If you don't know what grid-auto-flow does, this post is for you!

And speaking of the grid algorithm, things get more and more complicated when you consider the new display: grid-lanes (Safari-only so far). Our friends at WebKit released a new cheatsheet with a built-in configurator and lots of examples. It has strong vibes of the CSS-Tricks materials back in the day!

And if all this isn't enough, Patrick published a tutorial explaining alignment in the new masonry world.

That's some funky new CSS we'll be able to use eventually! 🎉

If you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 LinkedIn

A quick "repost" really helps this indie newsletter grow. Thank you! ❤️

::: highlight sponsored

Turn your component tests into visual coverage

The new Chromatic plugin for Vitest’s Browser Mode adds visual tests and collaborative UI review with no changes to your existing test suite. Tests run in a stable, parallelized cloud infrastructure for reduced flake and accelerated shipping.

Early access includes hands-on support from the Chromatic team and free usage while the plugin is in beta.

Get early access

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

Web Weekly Housekeeping

A huge bag of karma points goes to Caspar, Den, Marco, Savio, and Zoe this week. 50 people now support Web Weekly financially, thank you all! ❤️

If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors.

The state of content creation is rough these days, and while I have let go of the idea of making this newsletter a sustainable income, every tiny support helps me keep going.

Something that made me smile this week

You know that I'm a sucker for single-purpose URLs and this one is right up my alley.

Don't do it

No code

We have a communication problem → "I'm convinced that many of society's problems come from how we communicate online."
If You are Asking for Human Attention, Demonstrate Human Effort → "If you are requesting human attention, demonstrate human effort."
Why DIY Software Is Great Until It Is Not → "When you build for others, you are working with someone else’s idea of what the product should do, not yours."

Web development trivia

Here's something for you to shine at nerdy dinner parties. Did you know that history.pushState has a parameter that's "officially" unused? Alex gives a nice history lesson.

Don't use the unused

TIL — there's three ways to ignore files in Git

So, I've been using global Git ignores since forever (bye bye .DS_Store), but I didn't know .git/info/exclude is a thing.

Ignore

`view-transition-name: match-element`

I can't be the only one not realizing match-element works across browsers these days, can I? Bramus explains when to use match-element or go for the advanced attr() CSS function.

Match it!

Streaming HTML?

I've got no idea how I could have missed that, but Ollie shared that streaming HTML might become a thing. Granted, it's very early days still but this is exciting. It's yet another example of framework patterns entering the web!

Stream

The wonderful weird web – Clues by Sam

I've seen multiple people talk about the logic puzzle game "Clues by Sam". And I must admit, it's a lot of fun!

Solve some puzzles

MDN now has an MCP server

I know that many Web Weekly readers aren't big AI fans. However, the new MDN MCP server is very useful to access docs and browser support data.

Ask MDN

There's a prop for that...

Adam released a new JS library that transforms JS runtime values into CSS custom properties. Just like that? Yes, if you want to use form values, pointer positions or even the current time in CSS, prop-for-that will make that possible without writing custom JS.

Use props

Side note: Adam also spoke at CSS Day and presented a MEGA LIST of the ways CSS can enable highly adaptive, contextually relevant components. This slide deck is very well worth your time. Trust me.

Good to be aware: contrast themes

You're probably checking light and dark mode when writing your CSS. But do you check contrast, too? Here's a quick explainer telling what to watch out for.

Be aware

HTML in canvas demos

HTML in canvas is still a long way off, but of course people are going wild with it already. I also wonder how useful this all will be, but hey... I'm always game for some eye candy.

Check the future

Random MDN – `overscroll-behavior`

From the unlimited MDN knowledge archive...

Overscroll behavior is one of those CSS properties that aren't used enough. I'm using a Mac and way too often do I accidentally swipe the history, just because a horizontal scroller wasn't containing the scroll. Let's fix that!

Container

TIL recap – orientation in container size queries

Did you know that container size queries can detect landscape and portrait ratios? Now you do!

Detect

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

New on the baseline

I've mentioned CSS field-sizing plenty of times here and with Firefox supporting it now with version 152, it's finally baseline newly available.

And it feels like yesterday, but native CSS nesting is now widely available. Time flies!

Three valuable projects to have a look at

webstonehq/tuxedo – A TUI for todo.txt
raphaelsalaja/audio – Declarative audio synthesis for the web.
useplunk/plunk – An open source email platform.

A new Tiny Helper

With more and more throwaway tools being generated, I started to question Tiny Helper's usefulness. The project is also "under fire" with lots of useless vibe code submissions.

What do you think? Should we keep it? If 50 people reply and let me know that it's valuable, I'll keep going. Otherwise, I think it's time to "finish" this project.

Thought of the week

Yep.

::: highlight quote

Paying for software isn't paying for a solution. It's paying for someone else to own a problem. :::

Did you learn something from this issue?

❤️ If so, join 50 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 #194

Mon, 15 Jun 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Did you keep track of the new Safari features? Do you know how to style CSS gaps? And do you worry about the future of the web?

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

::: song by="Paweł" title="Djrum - Waxcap" youtube="jQtvKD-h7bs" Wifey doesn’t like when this one is playing loud, but this one meant to be listened loud. Djrum is not for everyone, but you may like it if you’re into experimental garage and dnb. :::

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

You might have noticed that I took a two week newsletter break after sharing my concerns about the state of content publishing in the last edition. Many people reached out and a good bunch started to support Web Weekly. The newsletter now has 47 supporters. ❤️

A huge bag of karma points goes to Marco, Roman, Dave, Dieter, Carlos, chrillek, and Bernd for supporting indie publishing. Thank you! Karol and Steve also gave some nice testimonials for the Web Weekly site. A big thanks goes to all of you!

But let me be transparent and share some numbers: finding the "good stuff" and writing Web Weekly easily costs me 8-10 hours a week. And thanks to your support I make roughly 150 dollars a month. After subtracting hosting and email costs, this makes 100 dollars for 40h of work.

Obviously, you know that I include sponsors. In a good month this makes 500 - 600 dollars on top. This is all pre-tax and in total, this simply isn't a very good deal. I'm also exhausted from the weekly "pressure" to deliver.

I always loved learning and sharing but with the current state of the web / industry / community, I simply wonder where I'm heading with this "little side project". I also turned 40 and that's definitely not helping.

Where am I going with this? This edition is Web Weekly 194. I have a thing for numbers so I'll definitely push forward to edition 200. And I don't want to sound overly dramatic, this is just a newsletter hitting your inbox after all, but yeah... I'll need to sit down and really think about what to do. I'll keep you posted!

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

Something that made me smile this week

I've been waiting for the first "major AI fu** up" for a while, but even Instagram account takeovers seem to be "fine".

Don't worry!

No code

Making a New Plan → "Admitting when your opinion has changed, and why, is an underrated leadership skill."
Do Things You’ll Love Yourself For → "You can iron your shirt because you “have ironing to do,” or you can iron it because you love the person who will be wearing it tomorrow."
The quiet grief of adult friendship → "Adult friendship became one of the most emotionally significant and least discussed losses of modern life."

Safari 27 Highlights

Did you notice this year's WWDC26? I must say that it was fairly quiet in my circles. Apple released their new Safari 27 beta.

It comes with "58 new features, 525 fixes and 4 deprecations". Here are my two favorites.

First, Safari joins Chromium and will support "customizable selects" soon. This means , appearance: base-select, ::picker-icon and ::checkmark are slowly worth looking at!

WebKit joins the club and will start to support sizes=auto for images! This means we'll enter baseline territory for easier image loading!

Other than that, this release post is loooooong and unfortunately I can't play with things right away because I can't install new TechPreview versions unless I update my OS. That means "bye-bye" Sequoia and "hello" Tahoe, I guess. More rounded corners here I come! How bad is the liquid glass world these days?

Check the new Safari

Do we need a new perf metric?

Harry explains the Total Blocking Time, First Contentful Paint, and Time to Interactive perf metrics and argues that we need yet another metric: the TBT window. It's a good explainer on how many metrics influence each other and I had no idea how time to interactive can influence the total blocking time.

Build a fast web

Fun with the new `image()` CSS function

Ollie looked into the future and shared how the super new image() function will enable some handy CSS-only background effects! image() seems to be so new that there's no real compat data yet, but it works in Chrome Canary and will ship in 150.

Add some color

Gap decorations in CSS

Chromium started to roll out gap decorations with v149 two weeks ago. And boy, am I excited about this. The Web Weekly site includes a lot of solid and dashed gaps and making this work was quite painful.

Brecht explains everything you can do and it's quite a lot!

Style the gap

The wonderful weird web – `personalsit.es`

If you're missing the "old web", I occasionally love browsing this collection of personal websites.

Discover the good stuff

That said: maybe one day I'll build a stunning site like Elle's.

The State of CSS

The State of CSS survey is open for another two weeks! Go take it if you have a moment. I just finished it, and it took around 10 minutes. It's an important data point for spec makers and browser vendors, so let's get this all done.

Give some insights

The future of Firefox and the web

So far I've only listened to half of this Syntax episode but it's always good to hear Jake talk and it's still weird to see him in the Firefox team. 😅

Be aware

Will we finally have context-aware headings?

Granted, we're looking into the future here and the following only works in Firefox Nightly after enabling a flag. Still, this is super exciting. After two decades of struggling with properly grouped and structured headings, headingoffset might finally be a way to make things more manageable. Manuel gave a quick overview.

Level your headings

And if you prefer a quick video, here's Jake explaining the new attribute as well.

Speaking about web security...

Since the robots are scanning and exploiting all possible code out there, web security becomes more important than ever. The upcoming npm release will finally harden what's possible when you run npm install. Install scripts will become opt-in. Hallelujah!

And if you want to be really safe, Nick shared in his wonderful "One Tip a Week" newsletter how to set up the free Socket firewall so that malicious code isn't even entering your machine!

And lastly, it's always good to stay ahead and check common best practices. Liran maintains npm-security-best-practices and it's worth a look!

Random MDN – `import with`

From the unlimited MDN knowledge archive...

Here's a quick reminder that you can use with in static and dynamic imports to load JSON. More types like CSS and text are on their way. 🤞

Import the fancy way

TIL recap – ARIA roles can change children semantics

Did you know that incorrectly applied ARIA roles can nuke semantics entirely? The standard rule applies: if you're reaching for ARIA, make sure you know what you're doing.

Be aware of ARIA

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

New on the baseline

Widely available .prose { margin-block: 1lh; scroll-padding-block: 2rlh; }">

Friends, we made it! With Firefox 151 container style queries working with custom properties entered the baseline. And it's funny, according to caniuse.com, Firefox is now the only browser supporting the full functionality? What a funny world!

And on the widely available side, the lh and rlh units are now very safe to use!

Three valuable projects to have a look at

oddbird/show-when – Shows or hides an element based on provided conditions.
yousifamanuel/terraink – Create unique and customizable map posters.
andremichelle/openDAW – Next-generation web-based Digital Audio Workstation.

A new Tiny Helper

If you're fighting the web font fallback game to reduce layout shifts, Fontastic Space might be able to help out!

Compare fonts

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

Thought of the week

I use AI because I'm too scared of being left behind, but certainly I'm not sure if that's the job I fell in love with.

::: highlight quote

But [using AI] is different because it is not asking engineers to learn a new way of doing what they do. It is asking them to stop doing the thing that made them engineers in the first place and become something else entirely. :::

And if you now wonder if this newsletter is generated, it definitely is not.

Did you learn something from this issue?

❤️ If so, join 47 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 #193

Fri, 22 May 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you heard of BEMoji? Do you know what a CloseWatcher is for? And how confidently do you use aria-label?

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

::: song by="Mike" title="Dandy Livingstone - Suzanne Beware of the Devil" youtube="Z1oKcitiKKU" I've been on a big Jamaican ska kick lately and I can't get enough of this song. It's a great way to start the day, dancing to this while making your breakfast. :::

Do you want to share your favorite song with the Web Weekly community? Hit reply; there is only one more song left in the queue.

I must say that last week hit me. And not in a good way.

If you've been in the game long enough, you probably know Dr. Axel's blog 2ality. It went offline because of shrinking income and increasing hosting costs due to AI scraping. This is a common trend. Humans consume less individual content, AI bots on the other hand happily slurp in even more. For creators it's a lose-lose situation.

People like Josh, who produces high-quality materials, started to question whether the creator model will remain sustainable. Honestly, I'm struggling too, and I don't know anymore.

I've been blogging for a very long time and here's what's going on traffic wise.

This isn't the full graph but my blog traffic is down to a quarter from what it used to be. Web Weekly subscribers are stagnating at around 6.4k since the beginning of the year. Frankly, many others and I struggle and question if all this education, curation, writing, and speaking actually matters. And I honestly don't have an answer to that.

ChatGPT, Claude, and friends already changed the game but now Google Search will also go all-in on chat mode. Matthias phrased it on point:

The search engine no longer says “here, go read what this person wrote.” It now says “here, I’ve already read it for you.” The contract is broken.

What's the deal when everyone can just access anything without caring about where it's coming from?

I, for one, enjoy a human touch. I enjoy craft and care. I enjoy the tiny details. I like the idea of a human putting in the work. Regardless of whether it's writing, speaking, recording... I'm online for seeing "the good stuff". And I agree with Mat's take.

why should anyone care about reading something nobody cared enough to write?

If everything is low effort, what's the point of it? If everything becomes generated, there's no need for creation. And maybe that's just the next era and I'm sentimental about the good old times, but there's another thing that doesn't make sense.

When we talk about gen AI things, the "creators" are looking for recognition and celebration. It doesn't trigger anything in the people consuming, though. There's now a strong divide that's hard to unsee once you realize it's there.

Nobody will congratulate anyone for assembling an IKEA Billy shelf. Yet, people feel proud. Here's the thing: nobody will think of them as woodworkers, though. Yet, everybody has become a writer, artist, or builder. Generated things might matter for the "creator" but everybody else literally doesn't care because there's no effort. There's no love, care, or drive in most of the "new things".

Side note: I still fail to recognize a prompt as craft.

But where will this bring us? More and more things are created. More articles. More videos. More everything. Yet, the majority cares less about anything. Things are changing, I get that, but I can't imagine a world where music, education, or art are all low-effort. A world in which "real work" isn't valued. I still care about the good stuff (I hope Web Weekly reflects this) and I wonder if there are enough people left feeling the same.

It became clear to me that the people who care will keep the lights on for all the creators and this year feels like a turning point for whether creation survives. It's on you, me, and us as a community.

Kevin phrased it nicely this week.

Now, more than ever, I think the best thing you can do is reach out to someone who makes content that you appreciate, and let them know about it.

Honestly, reach out, support, give back as much as possible. Of course, this includes Web Weekly, but whenever you have the feeling that something was made with care and can't imagine the effort that has gotten into the creation, let the people know. Share the heck out it on social media, tell your friends, and, if you can, support your favorite creators financially.

It's very rough out there right now but I'd really love to keep seeing some good stuff in the future. It's on us, the people who care, to make that happen.

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

React Gantt Chart Built for Developers

A 100% React Gantt chart component for modern apps. SVAR React Gantt handles large datasets, complex project visualizations, and smooth interactions for tasks and dependencies — no JS wrappers, full TypeScript support.

Plan, schedule, and track projects with drag-and-drop editing and flexible timelines. The core is MIT-licensed and free. PRO unlocks critical path, baselines, auto-scheduling, and more.

Explore React Gantt

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

Something that made me smile this week

BEMoji can't be real. Or can it? 😅

Unify styles

Short vs long hands

While reading this post I discovered that I very rarely (read never) use the grid shorthand. The syntax just never made it into my muscle memory and I'm a big believer in more explicit code anyways.

Do you write your CSS as short as possible?

Be explicit

Centering things in 2026

Temani says that centering things with absolute positioning is like using floats for layouts. And it might sound a bit harsh, but we have fabulous new tools to center elements. This post goes into the standards but also covers the upcoming text-box property, anchor positioning, and quick and fancy two-liners like the one above.

Be at the center

And if the recommended modern ways aren't enough, here's a gigantic list of 100 ways to center elements.

`Temporal` goes stable in Node.js

Luckily I haven't had to deal with date handling for a long while. If you need to right now, you're probably excited about Temporal, which goes stable in Node.js. Luciano described what's new in Node.js 26 and the date section is excellent. I didn't know that Temporal clamps dates!

Fiddle with dates

The wonderful weird web – Mechanical Pencil

This is absolutely beautiful and so well done: if you want to understand how a retractable pen (or lighter or candy dispenser) works mechanically this site will explain it to you.

Get it?

And if you enjoy this: here's an absolute internet classic explaining how mechanical watches work.

Evaluate your `aria-label`s

If you're quick with using aria-label or aria-labelledby, Manuel explains when you should not use it. He also highlights that it's sometimes ok to label sections and popovers.

Label correctly

Side note: forms benefit from additional labeling, too.

View Transitions gotchas

{ event.viewTransition.finished.then(() => console.log("Transition completed ✅")).catch((err) => { console.error("Transition killed:", err.name, err.message);});});">

Durgesh struggled with cross-document view transitions and published the article that he wished existed. It includes lots of hands-on tips and tricks like the view transition timeout of four seconds (well, today I learned), blocking=render and the pagereveal or pageswap events. Highly recommended.

Swap!

Google IO updates

I haven't had the time to watch and read about all the things being talked about at this year's I/O and I'll untangle things in the upcoming weeks, but there are two links that you can check out today.

Scroll-driven animations explained

Josh does what Josh always does and published a post explaining how scroll-driven animations work. They still lack support in Firefox, but if you want to get going you know what you'll read here. A high-quality blog post with lots of demos.

Scroll!

Random MDN – `CloseWatcher` and `requestClose()`

{ chosenValue = picker.querySelector("input").value; picker.remove(); };">

For certain UI elements closing behavior should be built in. Think of a modal that closes on ESC. But what about mobile interfaces? On Android, for example, a native gesture to close things can also be a swiping gesture. How do you catch these and don't let the browser jump back into history. That's what the CloseWatcher is for.

Here are some resources if you want to dive into the topic:

TIL recap – new lines in `href` URLs

Did you know that the HTML parser removes line breaks from URLs when they're part of href? Now you do!

Break URLs

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

New on the baseline

With Safari 26.5, the :open pseudo-class now works across browsers. The cool thing: it works for

and but also elements.

And when it comes to Baseline widely supported, the User Activation API works across browsers since November 2023.

Classifieds & friends

A quick recommendation: if you like Web Weekly you'll enjoy HeyDesigner, too. It's a daily reading list and weekly newsletter for product people, UXers, PMs, and design engineers.

Three valuable projects to have a look at

rexa-developer/tiks – Procedural UI sounds for the web. Zero audio files.
codepen/slideVars – UI for Updating CSS Custom Properties.
taigrr/spank – Slap your MacBook, it yells back.

A new Tiny Helper

a11ysupport.io gives a quick idea if certain features work across browser / screenreader combinations. Of course, it's still best to test things yourself but for a quick look this will come in handy.

Check support

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

Thought of the week

Writing code is often not the bottleneck.

::: highlight quote

If you want to ship faster, look at where things are waiting. :::

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 #192

Sun, 17 May 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Have you heard of the new HTML element? Do you use round() in your CSS? And do you cancel requests with AbortSignal.timeout?

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

::: song by="Steven" title="Humanity's Last Breath - Godhood" youtube="4QEA3FpqKUE" Truly heavy music doesn't need high BPM, blast beats and millions of notes. Sometimes all it takes is one heavy AF riff and a perfectly fitting music video. :::

Do you want to share your favorite song with the Web Weekly community? Hit reply; there is only one more song left in the queue. 😱

This week I learned that Firefox and Safari sometimes behave differently depending on the site you're on. I honestly had no idea. How can this be possible?

It's because of Chromium's dominant market share. Developers test in Chrome. Other browsers are often forgotten, and if something doesn't work in other browsers, users won't blame the site. They will blame the browser. Safari and Firefox simply try to provide a good experience.

Den got into the specifics in a fabulous investigation post. Here are some quotes.

Apparently, Firefox and Safari ship "quirks files" that are publicly accessible in version control.

The quirks files aren’t just fixing broken sites; they’re often compensating for Chrome’s control over what “working” means in the first place.

And Chrome doesn't need one because, frankly, it's the standard.

Chrome doesn’t need quirks because Chrome’s interpretation of web standards is the version that everyone else works to.

What can we do about it? Testing in multiple browsers!

Open your site in Firefox and Safari. Not occasionally, not before a big launch, regularly. The quirks files exist because developers didn’t do that.

It's a great read. Thanks, Den!

And if you want to dive deeper into the topic of web compatibility: here's a handy map with all the resources.

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

Wonderful websockets, pusher-compatible

Vask is a managed websocket platform for modern developers. It speaks Pusher, so you can switch in 3 minutes, but it runs on the edge close to your users for low-latency. Use coupon WEBWEEKLY for 20% off for life.

Try Vask free

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

Something that made me smile this week

The University of Waterloo has a problem: geese on campus. And the problem got so out of hand that students need to take different paths to class to not get attacked. How do they know where it's safe to walk? Of course, someone built an app for that. 😅

Watch out!

No code

It's 2026 and women are still asked to teach others to think a little bit and not be a prick → "In male dominated fields, [...], the bad apples are there and they make your life a living hell."
Prepare your “no” and keep it handy → "I took an hour to write a really nice “no” in advance."

When the `O(n^2)` trap hides in plain sight

I rarely deal with Big O notation. Aral explains how to discover overly complex code and provides quick fixes. I love it!

Clean up

How to build mobile-safe layouts

Kilian explains how safe-area-inset-* can give you that extra bit of polish for mobile UIs. The post includes interactive demos, too. Nice!

Respect the device

What are constructable stylesheets?

This post covers many internals of Lit and explains how the framework handles styles shared across components. But the beginning alone is golden if you want to understand what new CSSStyleSheet() is about.

Ship with style

More declarative HTML:

There's a new declarative HTML element in town. It's experimental, but hey, I'm all game for these new elements. renders a trusted install button for you, which then provides a web app installation flow without JavaScript required. Nice!

Play with install

What do you think of these new elements? Chromium also ships and there's in the making.

The wonderful weird web – Some rain for your second screen

If you like rain and are looking for a soothing image on your second screen, you'll dig this!

Look out of the window

Unicode, emojis and surrogate pairs

George shares his favorite bug of all time and explains how unicode and emojis work internally. I love it!

Any code that does str.slice(0, 1) or str[0] to get "the first character" is potentially broken.

Split safely

Do we need `round()` in CSS?

I was a bit skeptical about whether I really needed to adopt round() when I started reading Ahmad's post, but I think he convinced me because seeing floating values (23.2px etc) always bugged me and there are some more cases when rounding values comes in handy.

Round, and round, and round...

The `web-features-cli`

Short'n'sweet: if you live in the terminal and want to access browser support, bugs, baseline status, and specs right there, the W3C WebDX Community Group released a new CLI! 🎉

Query web features

Random MDN – `AbortSignal.timeout`

From the unlimited MDN knowledge archive...

Did you know that you can pass AbortSignal to your fetch calls? And even cooler, did you know that AbortSignal supports a timeout method? Well, now you do! 😎

Cancel requests

TIL recap – alternative text for generated content

When you're using content, you must always be careful because this content can also make it into the accessibility tree. For a while now, you can define alternative text right in CSS and that's pretty cool! Learn more about it on the blog.

Define an alternative

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

New on the baseline

Since April, the search element is Baseline widely available! And if you're on the cutting edge, ::highlight() is Baseline newly available since March.

Classifieds & friends

Sara is running a sale on her Practical Accessibility course right now to honor this year's Global Accessibility Awareness Day. It's a whopping 25% off. If you want to level up your accessibility game, now's your chance!

Three valuable projects to have a look at

erictli/scratch – A minimalist, offline-first markdown note-taking app.
joseph/mud – A perfect markdown viewer for macOS.
aarongustafson/form-saver – A web component that stores (and restores) values within the form it wraps.

A new Tiny Helper

Just because I just checked the Web Weekly feeds, if you're shipping RSS feeds on your blog (which I hope you do), here's the official W3C validator. Let's keep things valid, shall we? 🫣

Validate

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

Thought of the week

Truth to that.

::: highlight quote

Reducing the team [because of AI] does not reduce the number of things that can go wrong. It reduces the number of people available to own them. :::

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

Sun, 10 May 2026 22:00:00 GMT

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.

Try Upwatch for free

Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do! :::

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 ( or ) 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.

`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

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.

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

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

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

::: 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 #190

Sun, 19 Apr 2026 22:00:00 GMT

Guten Tag! Guten Tag! 👋

Do you use image-set for background images in CSS? Have you used Wakamai Fondue to analyze your variable fonts? And do you know that field-sizing isn't only about textareas?

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

::: highlight quote Jesper listens to Yttling Jazz — "Illegal Hit" and says:

This is a song that helps me keep my head up during winter and look forward to spring! :::

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

Let's kick things off with some quick-to-read accessibility resources that didn't fit elsewhere!

Not new, but still relevant: Adrian shared Where to Put Focus When Opening a Modal Dialog. It comes with the banger opener:

Blanket statements about where to put focus when opening a modal dialog are wrong, including this one.

I also discovered Steve's post explaining that hidden content still makes it into the computation of an element's accessible name. This fact is important when you're connecting error messages with aria-describedby and hiding a possible error with display: none. The error won't be visible, but it'll still be part of the accessible name computation. Not good.

And lastly, Manuel reminds us all that box-shadow isn't an alternative to a proper outline! Let's stick to the defaults.

I'll share some more accessibility resources next week. Is there anything great I should include?

A big thank you and a huge bag of karma points go to Daniel who provided a new testimonial! If you have something nice to say about Web Weekly or want to support indie publishing in the times of cheap AI slop, reach out.

You can support Web Weekly on Patreon or GitHub Sponsors. We're currently at 40 supporters, and I'd love to hit the magical 50. ❤️

And if you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

A quick "repost" really helps my indie newsletter out. Thank you!

::: highlight sponsored

Build any web layout, with confidence.

The Layout Maestro is a written, interactive CSS course that teaches you how to think, build, and debug layouts, not just memorize properties. It covers flexbox, grid, :has(), and container queries. Use the coupon code WEBWEEKLY for $50 off.

Level up your layout game

Side note from me: I plug Ahmad's interactive blog posts from time to time, and looking at all the outstanding resources he's published over the years, I'm sure this course is more than worth it! :::

Something that made me smile this week

Jack learned that there are "only" 84k Firefox extensions out there and thought "Challenge accepted. I'm gonna install them all!" while documenting his journey.

YOU CAN (barely) RUN FIREFOX WITH ALL 84 THOUSAND EXTENSIONS.

Who would have guessed. 😅 Man, I love the internet.

Install them all

No code

The unwritten laws of software engineering → "It took me embarrassingly long to learn that when production breaks and you recently deployed anything, you shouldn’t spend an hour proving your change is innocent..."
What, then, are we paying for? → "Paying for software isn’t paying for a solution. It’s paying for someone else to own a problem."

Analyze your font's features set

You know, I'm no font or typography nerd but occasionally I need to inspect what features are included in a font. Font features? Yes! There are variable font axes controlled via font-variation-settings or open type features controlled via font-feature-settings.

But how can you inspect a font and know what you can do with it? Well, Wakamai Fondue just hit v1.0, and it looks great!

Get nerdy about fonts

More view transition tools and resources

After plugging Bramus' View Transition Toolkit two weeks ago, people pointed me to the "View Transition Bag". It includes plenty of resources and yes, view transition tools are included, too!

Level up your transitions

Modern features misbehaving in the shadow DOM

Granted, it's been a minute since I've used the shadow DOM with web components, but today I learned that there are quite a few issues with modern web features when crossing the boundaries.

For example, cascade layers, container queries, @scope, and @property can behave differently between light and shadow DOM.

The team behind Adobe Spectrum started documenting some common issues.

Know what works

`sizes=auto` requires `width` and `height`

elements have width and height attributes.">

Here's a quick addition from last week's sizes=auto update. I'm still super excited about it and Eric reminds us that you need to define width and height attributes. You probably do that anyways, but I thought it'd be good to share that with you!

Help the layout

Smart: using fallback values to work around layer clashes

David uses cascade layers and has run into a problem. The style requirements were colliding with the defined layer order. He used a smart trick to work around clashing layers.

Keep things flexible

Side note: David also shared that !important works across layer boundaries. Can someone explain that to me?

The wonderful weird web – Train Jazz

Unfortunately, the Train Jazz doesn't work for Berlin (does it work for your city?). The site plays jazz music depending on a city's train/subway data. Is this very useful? Probably not, but I love everything about this! ❤️

Listen to some trains

A nifty flexbox trick

Granted, the title of this blog post is a bit misleading (container queries using break points still use... breakpoints), but I enjoyed this little flexbox snippet! 👆

Flex!

Squashing and stretching animations

Josh published a new post, and we all know what this means. There's a new high-quality post available including lots of demos and eye candy. I must admit I've forgotten about the ability to overwrite the SVG d attribute in CSS and am still on the fence about whether that's a good idea. 😅

Apply animation principles

Make interfaces feel better

Granted, everything in this post is also packaged up as an AI skill, but the advice on building good-looking UIs is solid. I wasn't aware of this little outline trick at the end.

Polish your interfaces

Why do some images look brighter than the rest?

Tom came out of nowhere and finally explained to me why some images on my Mac are glaring on my screen. There are chances you haven't seen what I'm talking about, but for me on my MacBook Pro using the Signal App (it must be Electron-based), sometimes I receive a photo and it almost feels like the rest of the screen is getting darker because the image is so bright. Turns out, some hardware/software combinations simply display HDR images. Wow!

Understand images

Random MDN – `transition-behavior`

From the unlimited MDN knowledge archive...

Everybody was talking about transition-behavior a year ago. Do you use it? The CSS property allows you to finally combine property transitions including display. And the best thing, it's been on the baseline since 2024!

Change the behavior

TIL recap – `field-sizing` doesn't only work for `textarea`s

field-sizing enables textareas to automatically grow. And that's great, but do you know that it works for "normal" inputs and select boxes, too?

Resize your elements

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

New on the baseline

After including baseline updates for quite a while here, I realized I'm riding pretty much on the cutting edge. And many folks are also interested in the baseline "widely available" updates. So here we go!

Do you know that you can use image-set to serve different background images right in CSS? Now you do and image-set is "widely available" since last month! 🎉

Be responsive

And I'm sorry but I can't help it and I know you're also waiting for some cutting-edge stuff: the team over at Mozilla added container style queries support to Firefox Nightly, which means it's slowly time to start looking into them. Bam!

Three valuable projects to have a look at

thoughtfulllc/gridland – Terminal apps that run anywhere - even the browser!
getelena/elena – A simple, tiny library for building Progressive Web Components.
meodai/heerich – An engine for 3D voxel scenes rendered to SVG. 👈 That one's very fancy!

A new Tiny Helper

Now, I'm not sure if it's a good idea to have complex vector graphics like the above in CSS, but hey. Temani updated his SVG to CSS tool and it now supports multiple path elements. So if you ever wanted to transform SVGs into clip-path (or the new border-shape) properties, this tool is for you!

Clip all the paths

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

Thought of the week

Ezhik's post really hit a nerve with me. The world is changing. Heck, our entire industry and profession might be completely turned on its head. I'm beyond scared. What puzzles me the most is that quality might become less important.

Many builders, designers, and [insert whatever digital profession you like] slowly lose the desire to create high-quality "things". Many are totally fine with generating something quickly. Done is better than perfect, right? And this approach might be alright. For many teams and companies it's always been like that. In the end, everybody can build whatever they like. It is how it is.

However, what scares me is the other side. And of course, that's not true for everybody, but does the majority out there care about a stellar product that took months to build? Do people care about a well-researched article? Does it matter if someone actually put in the work?

I know this is a downer to close this Web Weekly, but I'm honestly not sure anymore.

::: highlight quote

I'm terrified of the good enough to ship — and I'm terrified of nobody else caring. :::

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

Web Weekly #199

Guten Tag! Guten Tag! 👋

Web Weekly Housekeeping

No code

Peek into the future: a new universal selector?

Well-known change-password URLs

Interop proposals for next year

A new syntax highlighter in town

The wonderful weird web – Cows on a roadtrip

Module resolution explained

New things coming to HTML

AI;dr

Things to put into your head in 2026

TIL: @property changes property computation

Random MDN – Server-Timing

TIL recap – Hide critical commands from your terminal history

New on the baseline: progress()

Classifieds & friends

Three valuable projects to have a look at

Thought of the week

Did you learn something from this issue?

This is all, friends!

Web Weekly #198

Guten Tag! Guten Tag! 👋

Web Weekly Housekeeping

Something that made me smile this week

No code

The experimental git history command

Element states in JavaScript and (!) CSS

New in Edge: network efficiency guardrails

Understand the performance profile

The wonderful creepy weird web – cookie-less fingerprinting

On overflowing images

View transitions block interactions

Gap decorations are rolling out — some links

Visual design rules

Random MDN – inert

TIL recap – @keyframe animations in the CSS cascade

New on the baseline

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Did you learn something from this issue?

This is all, friends!

Web Weekly #197

Guten Tag! Guten Tag! 👋

Building an AI Workflow UI in React? Start With JointJS

Web Weekly Housekeeping

Something that made me smile this week

No code

Browser Performance Timing APIs

Promise.all but for good old objects

On standards, processes, and specifications

CSS Route and Navigation Matching

The wonderful weird web – Dustin's website

CSS infinity

Follow the OS font size

Scale text automatically

Measure SPA navigations

Random MDN – closedby

TIL recap – use Intl to format and localize units!

New on the baseline

Three valuable projects to have a look at

Thought of the week

Did you learn something from this issue?

This is all, friends!

Web Weekly #196

Guten Tag! Guten Tag! 👋

Full-Featured React Event Calendar

Web Weekly Housekeeping

Something that made me smile this week

No code

Anchor positioning

Inaccessible grid lanes

The color-scheme and prefers-color-scheme disconnect

Linked CSS params 😱

The wonderful weird web – Roland 50

Deno and Vercel invest in desktop apps?

Wiggly range sliders

Well-known `change-password` URLs

Things to put into your `head` in 2026

TIL: `@property` changes property computation

Random MDN – `Server-Timing`

New on the baseline: `progress()`

The experimental `git history` command

Random MDN – `inert`

TIL recap – `@keyframe` animations in the CSS cascade

`Promise.all` but for good old objects

CSS `infinity`

Random MDN – `closedby`

TIL recap – use `Intl` to format and localize units!

The `color-scheme` and `prefers-color-scheme` disconnect

TIL recap – `zoom`

`view-transition-name: match-element`

Random MDN – `overscroll-behavior`

Fun with the new `image()` CSS function

The wonderful weird web – `personalsit.es`

Random MDN – `import with`

`Temporal` goes stable in Node.js

Evaluate your `aria-label`s

Random MDN – `CloseWatcher` and `requestClose()`

TIL recap – new lines in `href` URLs