2021 Week 50 — State of CSS is out, Ruby on Rails 7 releases, Ideal line length and line height

Hi there,

In recent days, I’m trying to write more. Besides this newsletter, I'm also writing Chinese weekly productivity emails on Revue, and Python and CSS articles, also in Chinese, on Matters.news. Feeling productivity when writing drafts with pens and paper and digitalizing them in VSCode.dev.

→ CSS / State of CSS 2021 is released
https://2021.stateofcss.com/en-US/features

Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided

Now we have a debate on utility classes. In my opinion, I prefer semantics first and a balance of a few utility classes.

→ CSS / Create relative colors
https://blog.jim-nielsen.com/2021/css-relative-colors/

By using calc and custom properties in CSS, we can create colors with relative darker or lighter colors.

It would be perfect if there were function definitions in CSS, then we can even define darken() and lighten() function usage. But no, we don't have functions in CSS.

→ Browser / Safari 15.2 released
https://developer.apple.com/documentation/safari-release-notes/safari-15_2-release-notes

Added support for the File System Access API for creating and iterating files in an origin-specific storage space.

→ Ruby on Rails / Ruby on Rails 7 releases
https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision

This vision wasn’t possible even just a few years ago. We simply didn’t have the core technologies in place. But with advancements in browser support for ES6/ESM, widespread adoption of HTTP/2, and the exciting new standard for import maps, it’s finally possible. Rails 7 takes advantage of all of these advances to deliver a no-Node default approach to the front end – without sacrificing either access to npm packages or modern JavaScript in the process.

→ Fun / CT Scan of AirPods

https://scanofthemonth.com/

This month's scan is AirPods. Be noted that there are no archives on this website yet. That means that when the next scan releases, the current AirPods scan may not be accessible anymore. But of course, there is Web Archive to save us. For example, last scan of the month was LEGO minifigures.

→ Photoshop / Comparing 3 different ways to save PNG files in Photoshop

Cabel@cabel

Let's compare the three — three!!! — totally separate ways to save PNG files in Photoshop. ① "Save for Web (Legacy)" is the classic interface we grew up on, and the only one that supports animated gif. (How legacy? They save as "Adobe ImageReady" files, discontinued in 2005 😅)

11:55 PM · Dec 14, 2021

7 Reposts · 86 Likes

"Save the smallest PNG from over a hundred possibilities!"

"Of course, you should run all PNGs through ImageOptim etc. anyway."

→ SQL / The difference between WHERE and HAVING
https://sql-bits.com/the-difference-between-where-and-having/

Could we use HAVING instead of WHERE? In theory, yes. But in that case we’re telling the database to read all rows, and only return the ones that match the condition. This is unnecessarily slow.

→ Typography / The ideal line length & line height in web design
https://pimpmytype.com/line-length-line-height/

Detailed post explaining different settings of line length and line height.

“Teaching forces us to understand our subject better and to organize it so we can pass on the knowledge.”—Learn, Improve, Master

Until next week,
Thomas Mak