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

A graph from the State of CSS survey showing that anchor positioning is the favorite new CSS feature.

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

The JointJS AI Workflow Builder: a node-based canvas wiring Text Input, Markdown File, AI Agent, Search Reddit, and Formatted Output nodes into a flow.

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.

<a class="btn btn__small" href="https://www.jointjs.com/ai-workflow-builders?utm_source=webweekly&utm_medium=sponsored-ad">Start building</a>

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

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

<a class="btn btn__small" href="https://clickclickclick.click">Click!</a>

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

img elementtiming=product-image ... section containertiming=product-summary ... /section

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?

<a class="btn btn__small" href="https://csswizardry.com/2026/07/meaasuring-component-performance-with-the-container-timing-api/">Measure!</a>

`Promise.all` but for good old objects

const { shape, color, mass, } = await Promise.allKeyed({ shape: getShape(), color: getColor(), mass: getMass(), });

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

<a class="btn btn__small" href="https://github.com/tc39/proposal-await-dictionary">Wait for the properties</a>

On standards, processes, and specifications

IMO ponyfills are just userland libraries with better marketing.

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.

<a class="btn btn__small" href="https://lea.verou.me/blog/2026/polyfills/">Fill the platform gaps</a>

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!

<a class="btn btn__small" href="https://www.bram.us/2026/07/30/styling-the-navigation-declarative-route-and-navigation-matching-in-css/">Peek into the possible future</a>

The wonderful weird web – Dustin's website

A classical operating system dialog showing different programs: blog, click, globe, etc.

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

<a class="btn btn__small" href="https://dustin.works/">Get to know Dustin</a>

CSS `infinity`

.tippy-top-of-stacking-context { z-index: calc(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.

<a class="btn btn__small" href="https://nerdy.dev/css-infinity-use-cases">Stack on top!</a>

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.

<a class="btn btn__small" href="https://www.joshtumath.uk/posts/2026-07-02-lets-fix-the-webs-text-size/">Respect the OS</a>

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.

<a class="btn btn__small" href="https://krijnhoetmer.nl/log/2026/07/playing-with-text-fit">Scale automatically</a>

Measure SPA navigations

const observer = new PerformanceObserver(console.log); observer.observe({ type: "soft-navigation", buffered: true });

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.

<a class="btn btn__small" href="https://developer.chrome.com/docs/web-platform/soft-navigations">Measure the navigation</a>

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.

<a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy">Close it with anything</a>

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

console.log( new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'kilobyte', unitDisplay: 'long', }).format(123456) ); // "123 456 kilooctets"

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

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/intl-can-localize-units-too/">Format with style</a>

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

New on the baseline

Widely available: .something { animation-timing-function: linear(0, 0.25 25% 75%, 1); } Newly available: const german = new Intl.Locale("DE-de"); console.log(german.getTimeZones()); // Array

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