Web Weekly #96

Written by Stefan Judis
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! 👋

Have you ever used the @counter-style CSS at-rule? Or did you know that there's a new HTML element in town? Or that align-items: last baseline is a thing now?

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

How many HTML elements are out there today? A while ago, folks were playing this little game, and it's surprisingly hard to name the 114 possible answers.

HTML Tags Memory Test How many HTML tags can you remember? 114 to recall…

And now there's one more! My friend, let me introduce you to the search element! 👏

<search> <label for=s>Site</label> <input type=search id=s> <button>Go!</button> </search>

I still need to look into the specifics, and it's implemented nowhere yet, but if you want to get ready, here's the updated spec, and Scott O'Hara also explains what it's about.

Yay, HTML just got better! 👏

Something that made me smile this week

A mansion built on top of a fence

What would you do when you discover that a frog lives in your fence? Easy, build a mansion. 😅

Make frogs your friends

Responsive images in a component world

sizes is supposed to give the browser early layout information to load images as quickly as possible. But if loading is delayed and happens after layout anyways, why do I have to be bothered with typing up this info for every image?

Four months ago, I went on a journey to find out how responsive images would work with container queries. Of course, it's complicated.

But there's news: Simon Pieters came up with a new sizes="auto" attribute value, and all three engines agree that it's worth a try!

Dive into image loading

Modern CSS

Chris Coyier live streaming

I love casual and low-key CSS walk-throughs. If you want to catch up with native CSS nesting, logical properties, OKLCH or text-wrap: balance, Chris Coyier has your back.

Adopt fancy CSS

Speeding up your Node.js scripts

// in exit-handler.js const log = require('./log-shim.js') - const errorMessage = require('./error-message.js') - const replaceInfo = require('./replace-info.js') const exitHandler = err => { //... if (err) { + const replaceInfo = require('./replace-info.js'); + const errorMessage = require('./error-message.js') //... } };

It's commonly known that you shouldn't include all the code in your frontend bundle because everything needs to be downloaded, parsed and executed. But what about the server side?

Marvin Hagemeister continues his Node.js performance improvement series and explains why you shouldn't require all your modules on top of each file.

Don't require everything

The problem with slash commands

In other words: do not use keyboard shortcuts that are just a one letter character (or multiple of those). After the quoted part, exceptions are listed where such a keyboard shortcut would be ok, we'll get to those later.

I discovered that GitHub supports / commands now. I'm a big fan of these power user features, but Hidde de Vries pointed out that they come with accessibility implications. As always, computers are hard.

Keep your shortcuts accessible

The wonderful weird web – Blob opera

Singing comic blobs

Oldie'but'goldie: do you remember the blob opera Chrome experiment? 😆

(It works in Firefox, Safari and Chromium these days)

Make the blobs sing

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

Handy design rules

Two designs: on the left one marked as poorly designed and on the right an improved one.

I'm not a designer. I can create okayish things, but nothing that looks truly great. And that's why I love posts dissecting a design and improving it step by step. 💯

Get better at design

CSS @counter-style is going cross-browser soon

A @counter-style list example showing emoji numbers as list markers

Customizing lists can be cumbersome; and even though I've known the @counter-style at-rule for a while, I never played with it because it wasn't cross-browser supported.

Until now! The new Safari Tech Preview ships it, so it's only a matter of time until we can fine-tune all our list elements in all browsers.

User @counter-style

Check this CodePen for a live demo and discover hundreds of ready-made examples.

The last baseline

A layout example explaining "last baseline"

Do you know what align-items: last baseline; does in a flex container? If not, Rachel Andrew explains what it's about.

Align your items

Why we don't need native visually-hidden functionality on the web

Getting caught up in how to make visually hiding content easier for developers to implement (you know, so they don’t have to copy/paste a class name), imo, is missing the mark on solving the real issue. We “need” to visually hide content because of gaps in the design of the UI, or because of features which are lacking from browsers.

If you're reading Web Weekly regularly, you might say "Hold on, Stefan! Didn't you share that we need visually-hidden functionality in CSS?".

And you're right, but Scott O'Hara argues that hiding elements visually solves a problem rooted elsewhere (poor designs or lacking browser functionality).

And while I don't think it's that easy, Scott makes excellent points. I'd still welcome display: visually-hidden as a last resort, though. 🫣

Don't hide stuff

Random MDN – shape-image-threshold

shape-image-threshold — The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.

From the unlimited MDN knowledge archive...

Did you know you can use shape-outside and shape-image-threshold to flow text around elements? Now you do!

Shape elements

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – Are folks reloading your sites?

if (performance.navigation.type === 1) { // gather metrics after a reload and // tell your monitoring service about it! }

Two years ago, I learned that you can figure out if people are hitting reload on your pages via performance.navigation.type. Fancy!

Track the reloads

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

Three valuable projects to have a look at

A new Tiny Helper

A font analysis showing font sizes, styles and weights.

Suppose you're interested in checking your font usage, Fonty.io is a quick helper to start your analysis.

Analyze

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

Thought of the week

When it comes to tech choices, we all have opinions and preferences on things, but we're all just trying our best to create good stuff and live our best lives.

As Jake Lazaroff says it:

No one wants to feel like they're doing something morally wrong by choosing a framework [...].

A song that makes you stop coding

THYLACINE - Piany Pianino

This week's track is from THYLACINE and comes with a fancy piano sound. 💙

Listen to "Piany Pianino"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.5k 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! 👋

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