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.

A line graph showing a constant decline.

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

React-Native Gantt Chart — No wrappers. Built for real React apps.

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.

<a class="btn btn__small" href="https://svar.dev/react/gantt/?utm_source=webweekly&utm_medium=newsletter">Explore React Gantt</a>

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

Something that made me smile this week

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

<a class="btn btn__small" href="https://tomhayes.github.io/BEMoji/">Unify styles</a>

Short vs long hands

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); }

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?

<a class="btn btn__small" href="https://thoughtbot.com/blog/when-to-use-and-not-use-css-shorthand-properties">Be explicit</a>

Centering things in 2026

.centered { inset: 0; place-self: center; }

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.

<a class="btn btn__small" href="https://css-tricks.com/the-state-of-css-centering-in-2026/">Be at the center</a>

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

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

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!

<a class="btn btn__small" href="https://nodejsdesignpatterns.com/blog/whats-new-in-nodejs-26/">Fiddle with dates</a>

The wonderful weird web – Mechanical Pencil

Three illustrations: a retractable pen, a zippo and a 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.

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

Evaluate your `aria-label`s

Dont do this: div aria-label=News … /div

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.

<a class="btn btn__small" href="https://matuzo.at/blog/2026/aria-label-generic-elements">Label correctly</a>

Side note: forms benefit from additional labeling, too.

View Transitions gotchas

window.addEventListener("pagereveal", (event) => { 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.

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

The progress of a scroll container explained while scrolling.

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.

<a class="btn btn__small" href="https://www.joshwcomeau.com/animation/scroll-driven-animations/">Scroll!</a>

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

const watcher = new CloseWatcher(); const picker = setUpAndShowPickerDOMElement(); let chosenValue = null; watcher.onclose = () => { 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

HTML example showing that tabs and line breaks are removed from an href URL

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

<a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/new-lines-are-removed-from-whatwg-urls/">Break URLs</a>

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

New on the baseline

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

With Safari 26.5, the :open pseudo-class now works across browsers. The cool thing: it works for <details> and <dialog> but also <select> and <input> 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

Accessibility support — Will your code work with assistive technologies?

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.

<a class="btn btn__small" href="https://a11ysupport.io">Check support</a>

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