2021 Week 51,52 — Exa, CSS :has selector, Inspirations, you need a journal

Weekly tutorials and resources collected for Web Design and Development

Dec 31, 2021

Hi there,

This is the end of 2021. Happy New Year! Thanks for being my readers along the year. I am successful in keeping this weekly email active, sort of. At the same time, I'm writing more, in Chinese, on matters.news. In next year, I’ll migrate those posts into English one on makzan.blog. It was not updated enough. So, I will keep this momentum and write more, in both Chinese and English in 2022. Look forward to reading your comments.

Stay safe.

→ Tool / Exa—a modern replacement for ls
https://the.exa.website/

You may also create alias to make it default.

alias ls="exa --git --header"

→ CSS Drawing / Single div Sierpinski triangle
https://yuanchuan.dev/single-div-sierpinski-triangle

The first time I know this type of triangle. It is a remarkable one-div effect.

→ CSS Drawing / <css-doodle />
https://css-doodle.com/

From the same creator of the above effect. This tool create a custom-element that allows shapes and patterns rendering

→ CSS / :has selector implemented in Safari TP
https://caniuse.com/css-has

After several years of discussion, :has selector is first implemented. Latest Safari Technical Preview release implements this "parent" selector.

I also created a test, some works, some doesn't.

https://codepen.io/makzan/pen/GRMyzxQ

→ Rails / Why Hotwire in 2021
https://www.bearer.com/blog/why-hotwire

Right now, many of the Hotwire best practices are still up for debate.

→ Chrome / Ato dark-mode rendering
https://css-tricks.com/auto-dark-theme/

It may hurt readability when the layout is complex with the auto-generated dark theme.

If we don't build our own dark-theme, we will need to validate with this option to see if our website still readable in the auto-generated dark-theme.

→ Inspirations / Dusty.domains
https://dusty.domains/

I like the 3D website card slots effect.