Web Weekly #102 (#blogPost)

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.

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().

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.

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

Do silly things

• Trufflehog is a Chrome extension to guarantee you're not leaking API credentials on your sites.
• New on the blog: Resumability, compilers and event delegation.
• Safari 16.5 is out and comes with native CSS nesting and :user-invalid.

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

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

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.

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!

• system6.app
• system7.app
• macos8.app
• macos9.app

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

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

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

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

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.💙

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

• 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.

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

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.

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"

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:

• Share it on Twitter.
• Forward it to someone who might like 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! 👋