Skip to main content

Web Weekly #182

Guten Tag! Guten Tag! šŸ‘‹

Have you had a look at the new Navigation API (baseline newly available) already? Do you know about the formmethod and formaction HTML attributes? And are you as excited about custom invoker commands as I am?

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

Mike listens to "Is It Making You Feel Something?" by Superchunk and says:

One of my all-time favorite bands put out a new record this year, and the title track is a simple instant classic with a fun little chorus.

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

Daniel blogged about highlight pseudo-elements. And if you don't know what they're about, don't worry, I learned a ton, too!

The commonly known one is probably ::selection to style the text someone marks on a page.

p::selection { color: red; background-color: yellow; }

But wait for it, there are also a lot of funkier ones.

There's ::target-text (baseline newly available) which you can use to style highlights defined in the URL (#:~:text=hello):

::target-text { background-color: rebeccapurple; color: white; }

Then there's ::highlight() (almost baseline ready ā€” Firefox has some minor issues) to add custom text highlights to your page. You might now wonder when to use this feature; the <syntax-highlight /> element provides code highlights without the usual span soup.

::highlight(rainbow-color-1) { color: violet; text-decoration: underline; }

There are also ::spelling-error and ::grammar-error. Unfortunately, these two aren't in the baseline yet.

::grammar-error { /* ... */ } ::spelling-error { /* ... */ }

And very new, hot off the press: there's now ::search-text to style "find in page" results, which just shipped in Chrome 144. There are no real docs for ::search-text yet. Check out my quick blog post to learn more.

Screenshot 2026-02-02 at 16.04.52::search-text { background: var(--blue); color: white; } ::search-text:current { background: var(--blue-darker); color: white; text-decoration: currentColor solid underline; }

I keep being amazed by how far CSS has come!

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

A quick "repost" really helps this indie newsletter out. Thank you! ā¤ļø

Web Weekly housekeeping

Web Weekly's open rate is at 48% these days. Marketers would be jealous, but not too long ago it was in the mid-fifties. I'm not really concerned about it (yet), but Cassidy shared that her newsletter stats improved simply by asking people to reply to her emails. Even though I risk destroying my inbox with this ask, if you enjoy my tiny newsletter, could you reply to it? I'd really like to see if more replies will help Web Weekly get into the primary inbox.

Secondly, David reported that Web Weekly doesn't work well in the Spark email client. I'm considering going full-blown custom HTML for a while. Are there more issues? Do you have any troubles reading the email in your client? If so, you guessed it, hit reply and let me know!

And lastly, writing Web Weekly takes a lot of time. And with the AI-volution being in full swing, I sometimes wonder if there's a future for blogging, curating, and indie publishing. If you enjoy Web Weekly, earn yourself a huge bag of karma points and join 33 supporters on Patreon or GitHub Sponsors. It really makes a difference!

And that's it! Now, let's really get into some web stuff. This edition is jam-packed and full of good stuff!

Something that made me smile this week

I've just discovered detail.design, and it's nothing but amazing to look at well-crafted UI examples. That's the stuff I want to see on the web!

Look at eye candy

No code

CodePen 2025 highlights

CodePen 2025 highlights

Our friends over at CodePen released 2025's most popular pens, and, of course, the collection is full of eye candy. I'm always amazed by the quality people put into "fiddling on CodePen" but without surprise, my favorites were the ones coming without three.js or GSAP.

And my absolute favorite is this electrified border; no JS required!

Be amazed

Two handy promise.all utils

import { all } from 'better-all' const { a, b, c } = await all({ async a() { return getA() }, // 1s async b() { return getB() }, // 10s async c() { return getC(await this.$.a) } // 10s (waits for a) }) // Total: 11 seconds - optimal parallelization!

I usually list interesting GitHub projects at the end, but this JavaScript util is such a banger that it deserves its own spot! You know that when you use Promise.all you can wait for promises to resolve in parallel. However, things become interesting when the promises depend on each other.

Usually, you'd then need to untangle everything to get the optimal loading order. better-all does this for you! I love it!

function parallelize<T extends unknown[]>(promises: { [K in keyof T]: Promise<T[K]> }) { return Promise.all(promises) }

If you want to ensure you never await your promises before passing them to Promise.all, use this handy parallelize TypeScript util!

The :only-child view transition trick

::view-transition-old(.filter-item):only-child { animation-name: animate-out; } ::view-transition-new(.filter-item):only-child { animation-name: animate-in; }

Chris blogged about React's new ViewTransition element and dropped a link to a nifty view transition trick.

View transitions make it very easy to morph elements into a new state, but I still struggled creating custom enter/exit animations. Cyd shared how you can use :only-child for this. TIL!

Transition in and out

Custom invoker commands

const d = document.getElementById("d"); d.addEventListener("command", (e) => { if (event.command === "--change-bg") { d.style.backgroundColor = e.source.value; } });

Invoker commands just recently went into the baseline. The command and commandfor attributes let you define interactivity with declarative HTML.

But what about custom functionality? Pawel shares an often overlooked feature, explaining that you can define custom commands with a double-dash (--do-something). Good stuff!

Add custom commands

The wonderful weird web ā€“ Draw a horse

A horse made of icons on a desktop

When I first looked at this "project", I didn't really understand what was in front of me. I've got no idea who made this or why, but I'm fascinated by the ambition to use software to draw a horse in the most ridiculous ways. Chapeau!

Interact incorrectly

A new meta element is coming to town

&lt;meta name=&quot;text-scale&quot; content=&quot;scale&quot; /&gt;

To be honest, I didn't know that most mobile browsers don't pick up when the default OS font size is bumped up. Josh shares the current state and how a new meta element can help make the web a bit more usable.

React to user preferences

Accessibility barriers introduced by text effects

&lt;a href=&quot;https://something.com&quot; aria-label=&quot;link&quot;&gt; &lt;span aria-hidden=&quot;true&quot;&gt; &lt;span&gt;L&lt;/span&gt;&lt;span&gt;i&lt;/span&gt;&lt;span&gt;n&lt;/span&gt;&lt;span&gt;k&lt;/span&gt; &lt;/span&gt; &lt;/a&gt;

First off, if you're not reading Adrian's blog, you definitely should. I'm thankful and amazed by the accessibility knowledge he shares for free and the effort he puts into testing web interfaces.

Now, if you ever wondered whether fancy text effects paired with countless span elements, aria-hidden, and aria-label have an impact on UX or A11y, this post might become a future reference piece!

Keep things accessible

The problem of modern frontend development

Finally, the component also includes a hidden &lt;input type=&quot;radio&quot;&gt; but only if it&#39;s used inside of a &lt;form&gt; element. Weird!

Paul went on the journey to understand how radio buttons are rendered when using a "modern Frontend" (ShadCN and Radix) and well...

To understand how our radio buttons work I need to understand two separate component libraries and hundreds of lines of React.

Keep things simple

Yet another great CSS reset

@layer { *, *::before, *::after { box-sizing: border-box; background-repeat: no-repeat; }

Nothing more to say than I just love reading people's CSS resets. Here's Declan's take, and it includes some smart tricks!

Get inspired

Quick HTML tricks

&lt;fieldset form=&quot;info&quot;&gt; &lt;legend&gt;What is your name?&lt;/legend&gt; &lt;label&gt;Name: &lt;input type=&quot;text&quot;&gt;&lt;/label&gt; &lt;/fieldset&gt; &lt;form id=&quot;user&quot;&gt; &lt;!-- other form content --&gt; &lt;/form&gt;

Quick'n'dirty; do you know that you can place form elements outside of the actual form? Kevin describes how to do it with a fieldset. But it works with input and button elements via the form attribute, too.

&lt;button formaction=&quot;/some-other-endpoint&quot; formmethod=&quot;get&quot; formnovalidate&gt;Submit&lt;/button&gt;

And speaking of buttons, here's another party trick: you can overwrite a form's action or endpoint via formaction and formmethod. This is wild, isn't it?

Anchor positioning isn't just for popups

Comments connected with lines to show parent/child relationships

Anchor positioning entered the baseline last month, and while everyone is talking about popups, Roland shares how to use the feature to draw connections with pseudo-elements. That's some very funky CSS!

Anchor without using popups

FYI: the page widget shows that anchor positioning isn't in the baseline yet. I checked the demo in Chrome, Firefox, and Safari, and it renders fine.

Random MDN ā€“ console.timeStamp

console.timeStamp( "Event with Link", // label performance.now(), // startTime (instant) undefined, // endTime (instant) "Tasks", // trackName "My Extension", // trackGroup "primary-light", // color);

From the unlimited MDN knowledge archive...

Do you know that there's a non-standard console method to add markers to the dev tools performance panel? It's primarily a Chrome thing, but I think that's where we're all debugging perf issues anyway, right?

Mark your timeline

TIL recap ā€“ . doesn't match all characters in regular expressions

/a.b/.test('a\nb'); // false /a.b/.test('a\rb'); // false /a.b/.test('a\u2028b'); // false /a.b/.test('a\u2029b'); // false

Even though I blogged about it nine (!) years ago, I ran into a regular expression "bug" the other day. Do you know that . doesn't match all characters?

Match everything

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

New on the baseline

The Navigation API allows control over all navigation actions for the current window in one central place, including initiating navigations programmatically, examining navigation history entries, and managing navigations as they happen.

With Firefox 147, the Navigation API entered the baseline. It's the successor to previous web platform features such as the History API and window.location. If you want to learn what it's about, Ollie has been secretly blogging about it!

All these posts will definitely get you up to speed!

Three valuable projects to have a look at

A new Tiny Helper

Exposed By Default This is the data your browser hands out automatically, every time!

If you wonder how you're tracked across the internet, "Exposed by default" provides all the information your browser shares about you. And it's a lot!

Understand your fingerprint

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

Thought of the week

Carl shares how friction can sometimes be a good thing, and I agree with every word.

Humans don't operate best at machine speed. We think, hesitate, reconsider, and change our minds. Design that ignores this doesn't make people more efficient ā€” it instead pushes them to move faster than their intent.

Did you learn something from this issue?

ā¤ļø If so, join 33 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! šŸ‘‹