Web Weekly #90

Guten Tag!

Do you know that you can use CSS Grid to animate an element's height? Have you heard of the new scrollend JavaScript event? Or do you use rel="tag" somewhere?

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

Regarding forms, you should rely on the native form elements because they provide the best user experience, right?

I remember being overly excited when Safari finally started supporting date inputs two years ago.

But are these native elements really always the best choice?

Safari's date-picker is the cause of 1/3 of our customer support issues

Robin Thomas shared multiple reasons why the iOS date picker sucks. And I can relate — filling in a date on mobile sometimes feels like this CodePen.

Date input including the earth circling around the sun.

But what about the other elements? Number inputs also come with quirks and different behavior across browsers. 😢

It seems the inputs we have aren't good enough right now. Maybe the Open UI Group will develop newer, more extensible solutions for dates.

Let's see... Building stellar UIs is hard, and I guess it'll stay that way for a while. 🤷‍♂️

Something that made me smile this week

Tweet: My kid’s teacher made toys for her class based on their drawings. Pay teachers more.

This is just too cute!

Make kids happy

Quick links

TIL – Viewport units can consider writing mode

Interactive widget explaining the vi and vb units.

Have you heard of the vi and vb viewport units? Neither have I! They're pretty fancy and respect writing modes. Learn more about them on the blog!

Use vi and vb

Is CSS selector performance really something to keep in mind?

In practice, does it matter? Maybe. This heavily depends on the web page, the size of the DOM tree, the amount of CSS rules, and whether the DOM changes often. There’s unfortunately no rule around this.

Tweaking CSS selectors for performance is a topic I consider micro-optimization. Most of the time, there are plenty of other things to improve before getting into CSS performance. But maybe I was wrong! 🤔

Patrick Brosset shared a lot of wisdom on the topic and gives detailed quick fixes that can make a difference.

Monitor your CSS perf

Customize your macOS menubar with SketchyBar

A macOS setup with a custom menubar

Could you tell me that the screenshot above shows macOS? But it does, and you don't want to know how much time I spent fiddling with SketchyBar. The CLI utility allows you to create super custom macOS menubars. And the best thing is, it's scriptable so that you can put it into your dotfiles.

Look at all these beautiful setups! 💙

Tweak your menubar

Problems with Yaml

Yaml aims to be a more human-friendly alternative to json, but with all of its features, it became such a complex format with so many bizarre and unexpected behaviors, that it is difficult for humans to predict how a given yaml document will parse.

If you're using YAML, check Ruud van Asseldonk's post on all its hidden quirks. There are quite a few foot guns in the data format.

Avoid YAML problems

View transitions land!

@media (prefers-reduced-motion: no-preference) { html::view-transition-old(replace-effect) { animation: var(--animation-fade-out), var(--animation-scale-down); } }

Chrome 111 (going stable March 1) will ship with enabled View Transitions. And this is huge!

View transitions enable DOM element animations with a minimum of JavaScript and CSS. I'm beyond excited to see what it will unlock!

Adam Argyle shared how to create a text animation effect with it!

Animate all these characters!

The wonderful weird web – zty.pe

An interactive game showing a spaceship and words to be shot.

I'm a big fan of the weird web and love discovering fun websites! Say hi to a new Web Weekly section – the wonderful weird web.

And I'll kick things off with a game where you must type fast to shoot asteroids. 🫣

Type and shoot!

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

New on the web platform

Quick'n'easy: let me share some web platform updates I'm excited about.

Scrollend browser support showing that Firefox supports it and Chromium will soon, too.

Firefox supports the scrollend JavaScript event, and Chromium does soon, too.

Import maps caniuse.com table showing that Safari TP supports it.

JavaScript Import maps are close to cross-browser support. 🎉

Tweet from Stefan Judis: Sometimes it's the tiny things. Firefox 109 now supports ticks in range sliders. 🎉 (only Safari's missing) 🫣 Video alt: example showing a native range slider with added ticks via a datalist element.

Firefox now supports ticks in range sliders.

TIL – rel="tag"is a thing

HTML that includes `rel="tag"`

Álvaro Montoro published a massive guide on the rel HTML attribute. And oh well... there's a lot to learn about it. rel="tag" was news to me! 👏

Use all the "rel"s

How to use CSS Grid to animate an element's height

Interactive element displaying an element's height next to a toggle button.

Animating an element's height from 0 to auto is an unsolved problem since forever. Sure, you could use some max-height trickery or throw JS at the problem, but there's no great solution.

But do you know that you can use CSS Grid to slide elements up and down? It also feels like a hack, but I'll take it until we get something better. 🫣

Animate all the heights

Random MDN – Logical assignments

let a = 1; let b = 0; a &&= 2; console.log(a); // Expected output: 2 b &&= 2; console.log(b); // Expected output: 0

From the unlimited knowledge archive called MDN...

Did you know that &&= and ||= are valid JavaScript? Now you do!

Assign logically

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

TIL recap – Zsh suffix aliases

# "Run" the file to look at its content # $ ./readme.md # -> cat ./readme.md alias -s {js,json,env,md,html,css,toml}=cat

One of my favorite shell tweaks is that I can paste a Git URL such as git@github.com:stefanjudis/dotfiles.git, and my terminal will automatically clone the repo. How does that work? Suffix aliases! 💪

Add file type handling to your machine

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

Three valuable projects to have a look at

A new Tiny Helper

httpstat.us – This is a super simple service for generating different HTTP codes. It's useful for testing how your own scripts deal with varying responses. Just add the status code you want to the URL, like this: httpstat.us/200

httpstat.us is a handy tool for UI testing. For example, do you need an API endpoint that returns 405 – Method no allows to check if your app handles it correctly, no biggie 👉 httpstat.us/405.

Test your UIs

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

Thought of the week

You might have noticed that I took a long Web Weekly break. Life's thrown a massive curve ball at my family and me. 😢

In that sense, here's a quote from Paul Graham's "Life is short".

Relentlessly prune bullshit, don't wait to do things that matter, and savor the time you have. That's what you do when life is short.

A song that makes you stop coding

Man singing into a microphone

This week's track is an absolute indie classic. I'll see "We Are Scientists" live soon, and I can't wait for it!

Listen to "Nobody Move, Nobody Get Hurt"

This is all, friends!

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