Stefan Judis

@stefanjudis.com

3303 Followers 319 Following

Freelance dev sending Frontend news to 6k people over at webweekly.email. Sharing lots of tips'n'tricks on the way. Google Dev Expert, former Microsoft MVP and Playwright Ambassador

Code snippet: .custom-select::picker(select) { min-block-size: calc-size(fit-content, min(size, 12em)); }

Code snippet: img { link-parameters: param(--color, green); } and .foo { background-image: url("image.svg", param(--color, green)); }

Code snippet: <usermedia id="media-ctrl"> wrapping a button labeled "Enable camera and microphone".

Code snippet: @container style(--dark: false) { .card { box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); } }

Code snippet: .card { anchor-name: --card; anchor-scope: --card, --card-actions; } with a nested .secondary-actions rule setting anchor-name: --card-actions.

Code snippet: .grid-lanes { display: grid-lanes; grid-template-columns: repeat(3, 1fr); flow-tolerance: 0; }

Different border radius of overlapping apps.

Web Weekly 196

ECMAScript 2026
- Anchor positioning tricks
- Customizable selects
- <usermedia>
- TypeScript 7 is out!
- Linked CSS parameters

More than your regular Frontend newsletter.

An interactive component showing an image frame and a handle telling you to resize its container.

Claude conversation asking for browser support of container style queries.

Code snippet: 'Newly available' card with `input, textarea { field-sizing: content; }`, and 'Widely available' card with CSS nesting.

Code snippet: <div> <?start name="another-placeholder"> Loading… <?end> </div> ... <template for="another-placeholder"> Here is some <em>HTML content</em>! </template>

What JS knows, now CSS knows.

Code snippet: .card { view-transition-name: match-element; view-transition-class: card; }

Masonry grid example with controls and source code below.

Web Weekly 195

The grid algorithm explained
- field-sizing going baseline
- HTML streaming
- display: grid-lanes
- HTML in Canvas
- match-element

Code snippet: const data = await import("./data.json", { with: { type: "json" } });

More than your regular Frontend newsletter.

Code snippet: <h1>Museums</h1> as heading level 1, and a <section headingoffset="1"> containing <h1>Free entry to the museum</h1> as heading level 2.

Code snippet: a "Newly available" @container style(--theme: dark) block setting .card { background: #1e1e2e; color: #cdd6f4; }.

Code snippet: .hero { background-image: image(alpha(from black / 50%)), url('/mountains.avif'); }

Widget showing that an incorrectly applied role=menu removes listitem semantics.

Code snippet: .shelf { column-rule-width: 1px; column-rule-style: solid; column-rule-color: oklch(70% 0.14 235); rule-inset-cap: 10px; rule-inset: 130px; }

Code snippet: an HTML select that includes selectedcontent and more HTML in the options elements.

Web Weekly 194

- Safari 27 beta
- The future of Firefox and the web
- CSS gap decorations
- headingoffset
- Breaking changes in npm v12
- Container style queries

Firefox session typing "color" in the URL bar to open the color picker.

> Newly available

@container style(--theme: dark) {
.card {
background: #1e1e2e;
color: #cdd6f4;
}
}

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

More than your regular Frontend newsletter

It is not acceptable to bounce users on old browsers, users with bad network connections, users using assistive technologies. Certainly not from a monopoly public service. A lot of hype and noise is pressing us to extend the cowboy, wild-west phase of the software industry's expansion. We should set that aside, and take ourselves seriously as a mature industry. Build a web application that works on a playstation portable on a 3G connection - if you do, it will work for all your users, and it will still work 30 years from now.

Code snippet: short: .selector { grid: auto-flow dense 40px / repeat(3, 1fr); } vs long: .selector { grid-auto-flow: dense; grid-auto-rows: 40px; grid-template-columns: repeat(3, 1fr); }

Code snippet: const watcher = new CloseWatcher(); const picker = setUpAndShowPickerDOMElement(); let chosenValue = null; watcher.onclose = () => { chosenValue = picker.querySelector("input").value; picker.remove(); };

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

The progress of a scroll container explained while scrolling.

Three illustrations: a retractable pen, a zippo and a pencil

Code snippet: Don't do this: <div aria-label="News"> … </div>

<link rel="alternate" type="application/rss+xml" href="" title="RSS Feed">

Code snippet: const today = Temporal.PlainDate.from('2026-01-31'); const inOneMonth = today.add({ months: 1 }); console.log(inOneMonth.toString()); // 2026-02-28

Code snippet: <div class="🃏__📝"> <h2 class="🃏__🔠">Card Title</h2> <p class="🃏__💬">Card description text</p> </div>

Code snippet: Newly: :is(select, input):open { background-color: pink; } Widely: if (navigator.userActivation.isActive) { // proceed to request playing media, for example }

Distance 306km
Total time: 11:25:49
Avg Speed 26.8

A white gravel bike.

Web Weekly 193

- Using aria-label correctly
- Short vs long hand syntax
- How to center things properly
- CloseWatcher
- Temporal goes stable
- View Transition gotchas

Web Weekly — More than your regular Frontend newsletter.

Code snippet: .new-item::before { content: "★"; content: "★" / "Highlighted"; content: "★" / ""; }

Code snippet: .title { font-size: round(down, 15px, 2px); }

Code snippet: try { const res = await fetch(url, { signal: AbortSignal.timeout(5000) }); } catch (err) { if (err.name === "TimeoutError") { console.error("It took more than 5 seconds to get the result!"); } }

Code snippet: .chat-button { position: fixed; right: calc(env(safe-area-inset-right) + 16px); bottom: calc(env(safe-area-inset-bottom) + 16px); }

Code snippet: <install installurl="https://awesome-app.com/"><a href="https://awesome-app.com/">Launch Awesome App</a></install>

Code snippet: Baseline widely available: the "search" element. Baseline newly available: the "::highlight()" pseudo-element.

Web Weekly 192

- An experimental <install> element
- Constructable stylesheets
- round()
- AbortSignal.timeout()
- Alternative text for content
- ::highlight()

wf cli demo showing how to query for data of "user-invalid"

More than your regular Frontend newsletter.

Muting a playing tab with typing sssh, shush and mute.

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

Web Weekly 191

- Combined keyframe animations
- HTML in canvas
- The No-Vary-Search header
- sizes=auto
- A new Git version
- RegExp.escape()

More than your regular Frontend newsletter

Visualization: The server's `no-vary-search` header signals that param order doesn't matter, params are ignored by default, and only `colour` and `size` actually affect the cache key.

That means `/products/42?colour=red&size=L`, `/products/42?colour=red&size=L&utm_source=newsletter`, and `/products/42?size=L&colour=red` all get served the same HTML from the browser cache without an extra fetch.

npm: `min-release-age=7` in your `.npmrc`. That's 7 days.

pnpm: `minimumReleaseAge: 10080` in `pnpm-workspace.yaml`. 7 days in minutes.

bun: `minimumReleaseAge = 604800` under `[install]` in `bunfig.toml`. 7 days in seconds.

Code snippet: .btn:hover .shaft, .btn:focus-visible .shaft { d: path("M 5,12 h 17"); }