Friday, October 17, 2025
HomeJavaScriptInternet Weekly #159 | Stefan Judis Internet Growth

Internet Weekly #159 | Stefan Judis Internet Growth


Guten Tag! Guten Tag! 👋

Have you ever heard of the brand new reading-order CSS property? Do you continue to marvel when to make use of JavaScript mills? Or must you test when to make use of the translate HTML attribute?

Activate the Internet Weekly tune and discover some solutions under. Get pleasure from!

James listens to “Neil Cicierega – 300MB”

Here is a remix of a pc business from 1992, by the man who sang “The Final Showdown of Final Future”.

Do you wish to share your favourite music with the Internet Weekly neighborhood? Hit reply; there are three extra songs left within the queue.

For those who take pleasure in Internet Weekly, share it with family and friends.

A fast “repost” actually helps this indie publication out. Thanks! ❤️

One thing that made me smile this week

Yoga conditions: "if (5 == count)". Using if(constant == variable) instead of if(variable == constant), like if(4 == foo). Because it's like saying "if blue is the sky" or "if tall is the man."

This publish, which is 13 years previous, nonetheless makes me chuckle with some programming phrases I have never heard earlier than. My favorites:

  • yoda situations
  • ninja feedback
  • refuctoring

Set up some jargon

JS mills are underrated

async function* fetchAllItems() { let currentPage = 1; while (true) { const data = await requestFromApi(currentPage); if (!data.hasMore) return; currentPage++; yield data.items; } } for await (const items of fetchAllItems()) { // Do stuff. }

Alex argues that ECMAScript mills (perform* fn) and async mills (async perform* fn) are nice for cleansing up code. And what ought to I say? Ignore the bizarre yield assertion for a second; for particular duties, they’re nicer to learn than callbacks, customized loops, or recursion.

Clear up some code

Wild’n’wobbly CSS backgrounds

A spotlight effect with wobbly edges

I’ve nonetheless to digest this text as a result of it is a bit over my head. Do you discover the wobbly borders on this highlight impact above? 👆 I’ve at all times thought that these results are achieved with canvas magic, but it surely seems that that is CSS.

The one JS working on the web page is for updating the mouse place. The remainder is a mix of filter, mix-blend-mode and a few background methods. #wat

I am going to need to play with this extra!

Be amazed!

Do Not Publish Your Designs on the Web with Figma Sites…

So. Figma launched a brand new product at their flagship convention — Figma Websites. The thought is to take a Figma design and convert it into an internet site. Sounds promising, proper?

The outcomes, nevertheless, weren’t “fairly” with unsemantic markup, div soup, and random ARIA utilization. Adrian examined the generated websites and picked up the neighborhood suggestions.

Create a greater internet

Quickly to reach: responsive clip-path 🎉

An angle shape that adjusts responsively on resize.

To create customized CSS shapes, you could have used the clip-path property. Possibly it is simply me, however creating complicated clip-path guidelines with the path() perform is a) very difficult and b) not responsive.

There’s now a brand new, responsive, and CSS-friendly clip-path perform: form().

div {   clip-path: path("M100 0 L200 200 L0 200 Z"); }  div:last-of-type {   clip-path: shape(from 50% 0, line to 100% 100%, line to 0 100%, close); }

With form(), you may outline customized paths with CSS percentages and even customized properties!

By way of form() browser help, Firefox will be a part of Webkit and Chromium in just a few months!

If you wish to study extra, our buddies at Apple have you ever lined.

Form the net

And when you’re on the lookout for a fast option to convert your difficult path coordinates to CSS form() features, Temani has constructed a useful “SVG to CSS” converter!

You are midway via!

Wowza! Would you take pleasure in getting Internet Weekly straight to your inbox?

The fantastic bizarre internet – a phenomenal private website.

A 3d pixel space showing a person standing in a room.

I do not bear in mind when or how I found elle’s website, however man, do I really like this. It is bizarre, stunning, artistic! It is how the web used to and ought to be! ❤️

Say hello!

PS. Do you know there’s an Web Cellphone e book?

Graph highlighting the monthly questions asked on StackOverflow showing a steady decline.

Years in the past, I used to reply Stack Overflow questions to assist out individuals and study new and random issues. In fact, the built-in gamification and ensuing karma factors have been welcome, too. Over time, I’ve answered 128 and requested 2 questions.

At the moment, I do not reply or open StackOverflow fairly often. And I aren’t alone with that. Stack Overflow utilization is declining. Who’s guilty? In fact, it is AI.

Here is Gergely’s prediction:

In January, I requested if LLMs are making Stack Overflow irrelevant. We now have a solution, and sadly, it is a “sure.” The query appears to be when Stack Overflow will wind down operations, or the proprietor sells the positioning for comparative pennies, not if it’ll occur.

Now, Stack Overflow wasn’t the friendliest place on earth, but it surely absolutely was each nerd’s finest buddy after they have been in a debugging disaster. Seeing it disappear is unhappy.

Possibly say goodbye!

The brand new reading-order property

.box {   reading-flow: flex-flow; }

You in all probability know that you may visually reorder components utilizing flexbox or grid. And when you’re coping with tough responsive designs, reordering components with CSS is useful. Nevertheless, there’s an issue with grid/flex reordering.

For those who shuffle components round with CSS, the visible order not displays the supply order. Then, individuals seeing your website will expertise one thing completely different from these utilizing a keyboard or a display screen reader.

Chrome 137 has now shipped new CSS properties that may assist with this very previous drawback: reading-flow and reading-order. For instance, a fast reading-flow: flex-visual; will help hold the main target and studying order intact no matter whether or not you reverse your rows or columns.

I am into this! It is unlucky that Apple and Mozilla nonetheless want to present an announcement on a property delivery already Chromium. Let’s hope all engines agree on this being a good suggestion.

Repair the studying order

A wise CSS-only Minecraft clone

A Minecraft UI including various controls.

I am often not enthusiastic about these wild CSS-only tasks. Do not get me fallacious, the tasks are sometimes spectacular, however technically, they’re primarily primarily based on checkbox hacks or wild field shadows.

This CSS-only Minecraft sport isn’t any exception; nevertheless, the buttons additionally can help you rotate, zoom, and regulate the digital camera place. It is utilizing a intelligent trick to do it. Can you work it out?

Debug CSS-only websites

Possibly do not ask “why?”…

While "why" questions may be commonly used to express curiosity, many folks have been culturally conditioned to interpret them as rhetorical challenges: Why didn't you do your homework? Why are you getting home so late? Why won't you eat your vegetables?

Do you turn into unsure and insecure when somebody asks you why you are doing one thing? In fact, it is determined by the scenario, however generally a easy why? can completely put me off-balance. To illustrate my boss writes me an electronic mail asking “Stefan, why did you …”, I am going to instantly react to this single phrase pondering I’ve achieved one thing fallacious.

Mandy describes methods to ask questions with out difficult individuals like me.

Do not problem individuals

Random MDN – Clear-Web site-Knowledge

Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"

From the limitless MDN information archive…

Have you learnt there’s an HTTP response header to manage and clear the browser cache? Now you do!

Clear all of the caches

TIL recap – use translate to keep away from damaged content material

Website of "Cory House" which changes his name to "Cory-Haus" when translated.

Have you ever ever thought-about individuals studying your website with translation instruments? Right here in Germany, I do know many individuals who use Chrome’s translate button; heck, I generally hit it myself. However how do these translation instruments know what to translate? They do not, and if you wish to keep away from damaged content material, it’s important to give some steering. You’ll be able to learn extra about it on the weblog.

Management translations

New on the baseline – dialog.requestClose()

The requestClose() method of the HTMLDialogElement interface requests to close the "dialog". An optional string may be passed as an argument, updating the returnValue of the dialog.

For those who’re counting on native dialogs, you may admire this one. requestClose is a cancellable option to shut dialog components, and it simply went into the baseline.

Request a detailed

Three helpful tasks to take a look at

Harmonizer interface showing APCA contrast and OKLCH colors.

Our buddies from the Evil Martians (the oldsters behind oklch.com) launched a brand new shade palette generator. What’s cool about it?

It makes use of the APCA distinction ratio as a substitute of the WCAG one and supplies colours in oklch. Good!

Use trendy colours

Over the past months, I discovered that I will be deeply offended when somebody dumps a half-assed LLM response on me. It disappoints me as a result of this habits reveals an absence of respect. It is no shock I deeply agree with Tim right here.

If all you do is dump the output of a immediate on somebody, higher ship them the immediate […] or do nothing in any respect.

Do you take pleasure in Internet Weekly? | Did you study one thing from this difficulty?

❤️ If that’s the case, be a part of 23 different Internet Weekly supporters and provides again with a small month-to-month donation on Patreon or GitHub Sponsors.

Beloved this electronic mail? Hated this electronic mail? I wish to hear about it!

For those who suppose one thing wants enchancment or one thing sparked some pleasure, reply to this electronic mail as a result of I wish to know extra!

And with that, care for your self – mentally, bodily, and emotionally.

I am going to see you subsequent week! 👋

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments