Guten Tag! Guten Tag! 👋

Have you heard of the new reading-order CSS property? Do you still wonder when to use JavaScript generators? Or should you check when to use the translate HTML attribute?

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

James listens to "Neil Cicierega - 300MB"

Here's a remix of a computer commercial from 1992, by the guy who sang "The Ultimate Showdown of Ultimate Destiny".

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

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

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

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

Sponsored

Mock APIs & Intercept HTTP Requests—Right in Your Browser

Stuck because an API isn’t ready or keeps breaking? Requestly—now backed by BrowserStack—lets you mock APIs, intercept HTTP requests, and debug without ever touching backend code. No proxy setup. No SSL pain. Just faster development, better testing, and full control—right from your browser.

Get started for 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

This post, which is thirteen years old, still makes me chuckle with some programming terms I haven't heard before. My favorites:

yoda conditions
ninja comments
refuctoring

Establish some jargon

Open tabs

haveibeenpwned.com/ received a nice little redesign, and it's always good to check if your credentials are circulating on the dark net, right?
If you miss the good old "ten blue links" Google search times — the udm=14 query param brings it back.
If you're looking for more "human things" to read, blogroll.org lists over 700 blogs to choose from.

JS generators are underrated

Alex argues that ECMAScript generators (function* fn) and async generators (async function* fn) are great for cleaning up code. And what should I say? Ignore the weird yield statement for a moment; for specific tasks, they are nicer to read than callbacks, custom loops, or recursion.

Clean up some code

Wild'n'wobbly CSS backgrounds

A spotlight effect with wobbly edges

I've still to digest this article because it's a bit over my head. Do you notice the wobbly borders in this spotlight effect above? 👆 I've always thought that these effects are done with canvas magic, but it turns out that this is CSS.

The only JS running on the page is for updating the mouse position. The rest is a combination of filter, mix-blend-mode and some background tricks. #wat

I'll have to play with this more!

Be amazed!

The Figma Sites disaster

So. Figma launched a new product at their flagship conference — Figma Sites. The idea is to take a Figma design and convert it into a website. Sounds promising, right?

The results, however, weren't "pretty" with unsemantic markup, div soup, and random ARIA usage. Adrian tested the generated sites and collected the community feedback.

Create a better web

Soon to arrive: responsive `clip-path` 🎉

An angle shape that adjusts responsively on resize.

To create custom CSS shapes, you may have used the clip-path property. Maybe it's just me, but creating complex clip-path rules with the path() function is a) very complicated and b) not responsive.

There is now a new, responsive, and CSS-friendly clip-path function: shape().

With shape(), you can define custom paths with CSS percentages and even custom properties!

In terms of shape() browser support, Firefox will join Webkit and Chromium in a few months!

If you want to learn more, our friends at Apple have you covered.

Shape the web

And if you're looking for a quick way to convert your complicated path coordinates to CSS shape() functions, Temani has built a handy "SVG to CSS" converter!

You're halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

Email

The wonderful weird web – a beautiful personal site.

I don't remember when or how I discovered elle's site, but man, do I love this. It's weird, beautiful, creative! It's how the internet used to and should be! ❤️

Say hi!

PS. Did you know there's an Internet Phone book?

The end of an era

Years ago, I used to answer Stack Overflow questions to help out people and learn new and random things. Of course, the built-in gamification and resulting karma points were welcome, too. Over time, I've answered 128 and asked 2 questions.

Today, I don't answer or open StackOverflow very often. And I don't seem to be alone with that. Stack Overflow usage is declining. Who's to blame? Of course, it's AI.

Here's Gergely's prediction:

In January, I asked if LLMs are making Stack Overflow irrelevant. We now have an answer, and sadly, it's a "yes." The question seems to be when Stack Overflow will wind down operations, or the owner sells the site for comparative pennies, not if it will happen.

Now, Stack Overflow wasn't the friendliest place on earth, but it surely was every nerd's best friend when they were in a debugging crisis. Seeing it disappear is sad.

Maybe say goodbye!

The new `reading-order` property

You probably know that you can visually reorder elements using flexbox or grid. And if you're dealing with tricky responsive designs, reordering elements with CSS is helpful. However, there's a problem with grid/flex reordering.

If you shuffle elements around with CSS, the visual order no longer reflects the source order. Then, people seeing your site will experience something different from those using a keyboard or a screen reader.

Chrome 137 has now shipped new CSS properties that might help with this very old problem: reading-flow and reading-order. For example, a quick reading-flow: flex-visual; can help keep the focus and reading order intact regardless of whether you reverse your rows or columns.

I'm into this! It's unfortunate that Apple and Mozilla still need to give a statement on a property shipping already Chromium. Let's hope all engines agree on this being a good idea.

Fix the reading order

A smart CSS-only Minecraft clone

I'm usually not excited about these wild CSS-only projects. Don't get me wrong, the projects are often impressive, but technically, they are mainly based on checkbox hacks or wild box shadows.

This CSS-only Minecraft game is no exception; however, the buttons also allow you to rotate, zoom, and adjust the camera position. It's using a clever trick to do it. Can you figure it out?

Debug CSS-only sites

Maybe don't ask "why?"...

Do you become uncertain and insecure when someone asks you why you're doing something? Of course, it depends on the situation, but sometimes a simple why? can totally put me off-balance. Let's say my boss writes me an email asking "Stefan, why did you ...", I'll immediately react to this single word thinking I've done something wrong.

Mandy describes how to ask questions without challenging people like me.

Don't challenge people

Random MDN – `Clear-Site-Data`

From the unlimited MDN knowledge archive...

Do you know there's an HTTP response header to control and clear the browser cache? Now you do!

Clear all the caches

TIL recap – use `translate` to avoid broken content

Have you ever considered people reading your site with translation tools? Here in Germany, I know many people who use Chrome's translate button; heck, I sometimes hit it myself. But how do these translation tools know what to translate? They don't, and if you want to avoid broken content, you have to give some guidance. You can read more about it on the blog.

Control translations

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

New on the baseline - `dialog.requestClose()`

If you're relying on native dialogs, you might appreciate this one. requestClose is a cancellable way to close dialog elements, and it just went into the baseline.

Request a close

Three valuable projects to have a look at

asgeirtj/system_prompts_leaks – Collection of extracted System Prompts from ChatGPT, Claude & Gemini.
noahbald/oxvg – Rust alternative to SVGO and InkScape.
honojs/hono – A Web framework built on Web Standards.

A new Tiny Helper

Our friends from the Evil Martians (the folks behind oklch.com) released a new color palette generator. What's cool about it?

It uses the APCA contrast ratio instead of the WCAG one and provides colors in oklch. Nice!

Use modern colors

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

Thought of the week

Over the last months, I learned that I can be deeply offended when someone dumps a half-assed LLM response on me. It disappoints me because this behavior shows a lack of respect. It's no surprise I deeply agree with Tim here.

If all you do is dump the output of a prompt on someone, better send them the prompt [...] or do nothing at all.

Do you enjoy Web Weekly? | Did you learn something from this issue?

❤️ If so, join 23 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! 👋

Reply to Stefan