Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! πŸ‘‹

Do you know there's a new web component to render browser support stats? Or have you ever used display: flow-root? And what's your take on text fragment links?

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

Pablo listens to "Modeselektor feat. Catnapp - Dating is in China":

I love electronic music and Modeselektor is one of my favorite music groups.

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

I'll keep this week's intro short because I'm currently vacationing in the πŸ‡¨πŸ‡Ώ Czech Republic.

#mountainsAreCool

So, here's a quick mini update: I've been on Mastodon for a while and now entered Bluesky. It feels good but lonely β€” if you're around, come and say hi!

And that's it β€” off to some web goodness!

Something that made me smile this week

A minesweeper game with only one tile

This game by itself is tickling my sense of humor, but the fact that someone built it and then registered a domain cracks me up! πŸ˜…

Play Minesweeper

Open tabs

Using top-level await can become a breaking change in Node

It effectively expands the number of Javascript flavors from 2 to 3: 1. CommonJS 2. ESM 3. ESM but without top-level await.

The newly released Node.js 23 version allows us to require ECMAScript modules (ESM). The feature is also available via the --experimental-require-module flag in v20 and v22 (the current and upcoming long-term support versions).

While this addition looks like it makes ESM and CommonJS more interoperable, it also complicates things because mixing and matching both module systems won't and can't always work.

Evert shares why top-level await now becomes a backwards-incompatible change.

Think of the JS ecosystem

More Node stuff: there are now two (!) experimental TS flags

package.json code showing how to define NODE_OPTIONS to run TypeScript code

It's still early for Node.js to run TypeScript, but have you noticed that there are now two new CLI flags? There's --experimental-strip-types and --experimental-transform-types. Transforming types supersedes stripping types, and features like enums will be supported.

Everything is still experimental, but if you want to play with native Node.js TypeScript, Sam has you covered.

Run TypeScript

The disturbing state of HTML whitespace

HTML snippet resulting in whitespace rendering only on one side of a word.

Disclaimer: this post is very long.

How hard can it be to render whitespaces in the correct places? Well... Doug shares so many examples with questionable whitespaces that I'm surprised we can render readable text on the web after all. πŸ˜…

"HTML Whitespace is Broken" is a great post highlighting all these web quirks you got used to so much that you don't see them anymore.

Learn all about HTML whitespace

The WebDX Community Group

Have you heard of this W3C working group already? πŸ‘†

I signed up for the group (not sure what this means yet), but some fine folks are up for doing very cool stuff to improve the web ecosystem.

For example, if you want to follow what new web features reach cross-browser support, there's now the Web Features Explorer.

The UI of the Web Features Explorer showing cross-browser supported web features.

The best thing about the explorer is that it provides RSS feeds. Subscribe and receive new browser support info right in your feed reader. Massive love from my side.

And for the bloggers...

The `baseline-status` widget showing browser support information for relative colors.

You can now add a baseline-status web component to your blog posts to render up-to-date browser support info.

How. Cool. Is. That?

You're halfway through!

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

The wonderful weird web – Time my meeting

This meeting is longer than "Just a minute"

If you are in a meeting-heavy environment, you should start timing them…

Time it

TIL - Find commits with git log -S

Example showing how to find commit deletions/additions using `git log -S`.

If you're sometimes wondering when and how code entered a code base, Alex Harri shares how to use git log -S to find commits that added or removed code. πŸ’―

Find all the codes

display: flow-root

.container {   display: flow-root; }

To be fair, I can't remember when I used float the last time. But if you've been doing web dev for long enough, you probably remember that you must clear floats with a clearfix hack if the floating element is bigger than the wrapping container.

But there's "news" from 2017: display: flow-root does the clearing for you. Seven years ago, Rachel wrote about this, and I really wonder how I missed this display value and how many people know about it. Unsurprisingly, ChatGPT doesn't know about it when I ask it to clear a float...

Clear floats the "modern" way

The initial containing block in CSS

Comparison of W3C schools and mdn. W3Schools is marked as wrong whereas MDN has it right.

Short'n'sweet: Do you know what the initial containing block is in CSS? I have used it a thousand times (you probably did, too) but didn't know how it works and what it's called. Temani explains what the initial containing block is all about.

Understand CSS

Do you use text fragment links?

A highlight text fragment link with the #:~: syntax

Honest question: do you use text fragment links?

If you haven't seen them before, all modern browsers support linking to a site's text via the #:~:text= syntax. Add this wild combination of characters to your URL, and browsers will do a ctrl+f for you.

To make it easier, Chrome even includes a "Copy Link to Highlight" context option, so you don't have to fiddle with the URL.

But I don't know: linking to text that could change at any time feels brittle, and I'm really no fan of the syntax. What's your take?

Learn about text fragments

Random MDN – structuredClone

// Create an object with a value and a circular reference to itself. const original = { name: "MDN" }; original.itself = original;  // Clone it const clone = structuredClone(original);

From the unlimited MDN knowledge archive...

Do you know that there's a native method to clone JavaScript objects? And guess what β€” this method can also clone maps, sets and even resolve circular references!

Clone like a champ!

TIL recap – requestSubmit

document.querySelector('form').requestSubmit();

There are two methods to submit forms in JS β€” submit and requestSubmit. One does what you expect, whereas the other one doesn't.

Submit forms

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

Three valuable projects to have a look at

A new Tiny Helper

An input field with the placeholder "paste the link here"

You know the problem: sometimes, you just want to download an image, song or video for offline use. Or maybe you just want to do a backup of your favorite things because content disappears from the internet all the time.

Unfortunately, it's incredibly hard to download media these days. But Cobalt tries to help out here.

Save what you love

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

Thought of the week

I don't have anything to add to Chris's take on global browser support statistics.

"Global support percentages" for browser features mean literally nothing other than fun dinner party conversation.

Did you learn something from this issue?

πŸ’™ If so, join 16 other Web Weekly readers and give back with a small monthly donation on Patreon or GitHub Sponsors.

A Big thank you goes to Falk for becoming the most recent supporter!

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! πŸ‘‹

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Web Weekly β€” Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles