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! 👋

Do you want to know why the new .zip domains are a security thread? Or what the passwordrules HTML attribute is about? Or want to see some stunning view transition examples?

All the answers and much more are included in this week's Web Weekly. 🫣

Let's kick things off with some web platform updates!

Firefox 113 was released this month, and with it, two major web features went into cross-browser territory.

First, the :nth-child() pseudo-class got an upgrade and now supports the fancy pany of syntax.

tr:nth-child(even of :not([hidden])) {   background-color: lightgrey; }

The new syntax is on my long list to blog about, but until I get to it, Bramus has you covered on web.dev.

And second, new colorspaces and CSS functions are entering the web: color(), oklab(), oklch(), and color-mix().

A visualized color space.

Your websites can now show colors redder than #FF0000. Sounds confusing? It sure is, but if you want to learn more, Adam Argyle's post is a good start.

Something that made me smile this week

A man pumping air into his mouth

The holy algorithm brought this internet classic into my feed, and it's never getting old.

Do silly things

How to "fix" the most annoying macOS feature

Cut and paste finder files. 1. select some files in Finder 2. Press Command+x to cut 3. Navigate to the destination 4. Press command+v to paste

I'm a very happy macOS user, but the fact that a simple action like cut&paste behaves differently than in any other tool always bugged me. Sindre Sorhus published a free tool that streamlines this behavior.

Cut and paste

Speeding up JS on a massive scale

Use event delegation.  Event delegation is a powerful technique that lets us attach a single event listener to an element that is the common ancestor of many elements. Using event delegation is often more efficient when dealing with user-generated content that could add any number of elements.

Few people work on sites of the scale of Wikipedia. And there's nothing better than a good technical case study. Nicholas Ray shared how they made certain UI interactions 50% faster. 💯

Make your JS faster

New dangerous top-level domains

Evil: https://github.com∕kubernetes∕kubernetes∕archive∕refs∕tags∕@v1271.zip      Legitimate: https://github.com/kubernetes/kubernetes/archive/refs/tags/v1.27.1.zip

Google rolled out some new domains this month: .dad (apparently, there's also .mom 😅), .phd, .prof, .esq, .foo, .zip, .mov, and .nexus. And the community isn't happy about it. This post explains why .zip and .mov are dangerous additions.

Be aware of new threats

Side note: Firefox seems to be the only browser warning for malicious URLs like https://google.com∕gmail∕inbox@bing.com. Let's hope the others will follow.

You are about to log in to the site “bing.com” with the username “google%2Ecom%E2%88%95gmail%E2%88%95inbox”, but the website does not require authentication. This may be an attempt to trick you.  Is “bing.com” the site you want to visit?

The wonderful weird web – macOS versions running in your browser

Screenshot of a pretty old macOS

I've to admit that I'm not paying attention to the WebAssembly space, but having old versions of macOS running entirely in the browser is pretty cool!

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

Why you might not need a modal

Modal windows are hard to get right. The "final boss of accessibility". If you have access to "dialog", it's easier — if you need to support older browsers, good luck. There's a very good chance the modal window you have in production has dealbreaking bugs.

I love a nice single-purpose domain. 💙

youdontneedamodalwindow.dev shares reasons why popping up a modal window isn't always the best way to do things.

Build more pages

Advanced quantity queries with :has()

@container style(--layout-4: true) {     .card {         flex-direction: column;     }      .card__thumb {         flex: 1;         width: 100%;         aspect-ratio: 4 / 3;     } }

Wouldn't it be great if we could lay out elements differently depending on the number of children?

Quantity queries make this possible today already. Unfortunately, they're very cryptic and hard to read CSS, but hey, they do the job.

But now that we're close to having :has(), things become way more exciting. Ahmad Shadeed shared how you can lay out elements differently depending on the number of child elements. This post comes with many practical examples. 💯

Count and style

TIL — the passwordrules attribute

<input type="password"    passwordrules="minlength: 8; required: lower; required: upper; required: digit; required: [_];">

I learned something controversial today: Safari and 1Password support the passwordrules HTML attribute. I'll let you decide if that's good or bad.

Fiddle with passwords

Page view transition examples

Website with an expanding image on full page navigation

I couldn't agree more with Chris Coyier. View transitions on the navigation level will change how the web looks and feels.

He's collected some stunning examples to see what's possible.

Put some sparkles on the web

Random MDN

This App has violated Twitter Rules and policies. As a result, it can no longer be accessed. For assistance, submit a support ticket.

You might know I've been maintaining the @randomMDN Twitter account. The bot posted random MDN pages and was a perfect tool for discovering web features.

And now it looks like it's over.

I loved having it, but I am still trying to figure out what to do now. I could port it to Mastodon, but the platform isn't really sticking for me. Should I port it over to RSS? Build a website?

Let me know if you're up for working on something with me. I'd love to have some help.💙

TIL recap – stylesheets delay JS execution

<link rel="stylesheet" href="app.css" />  <script>   var script = document.createElement('script');   script.src = "analytics.js";   document.getElementsByTagName('head')[0].appendChild(script); </script>

When will the above inline script run? A while ago, I learned that stylesheets also block inline script execution. That's why you should always have a look at the head of your documents.

Don't delay your scripts

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

Three valuable projects to have a look at

  • webpro/knip – Find unused files, dependencies and exports in your JavaScript and TypeScript projects.
  • rviscomi/capo.js – Identify which head elements are out of order.
  • ascorbic/unpic-img – A multi-framework responsive image component.

A new Tiny Helper

AI Image enlarger UI prompting to select images

It's not perfect, but if you're looking for a quick way to make photos bigger, the AI Image enlarger is worth a try.

Make photos bigger

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

Thought of the week

If you're wondering if you should blog or speak at your local meetup but worry that you're not an expert, Nathan Barry puts it beautifully.

People don't teach because they're experts. They're seen as experts because they teach.

A song that makes you stop coding

The Hives — Hate to say I told you so

I bought tickets for The Hives last week and can't wait to see them live. It's been a couple of years. 😅

Listen to "Hate to say I told you so"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.7k emails. If you enjoy it, consider supporting me on Patreon. ♥️

Or tell your friends about it:

If you're not a subscriber, change that! 😉

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 12 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.