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.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
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.
Web Weekly is open for sponsorships. When you want to reach 6k developers, you know what to do!
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
haveibeenpwnedreceived a nice little redesign, and it’s always good to check if your credentials are circulating on the dark net, right?.com/ - If you miss the good old "ten blue links" Google search times — the
udm=14query param brings it back. - If you’re looking for more "human things" to read,
blogrolllists over 700 blogs to choose from..org
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.
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!
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.
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.
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!
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! ❤️
PS. Did you know there’s an Internet Phone book?
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.
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.
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?
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.
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!
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.
Find more short web development learnings in my "Today I learned" section.
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.
- 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.
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!
Find more single-purpose online tools on tiny-helpers.dev.
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.
❤️ If so, join 23 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
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! 👋
