🧢 Stefan's Web Weekly #30
Tags: webdev
Published: 2021-08-02 07:30:33

---
title: 🧢 Stefan's Web Weekly #30
published: true
description: The order of CSS transformations, predictable scrollbar spacing and the state of Safari.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-30/
---

## Welcome to Web Weekly #30!

Buna ziua, friends!

It's the 30th Web Weekly today, and this newsletter also passed 1500 subscribers. 🎉 Thank you for reading along and replying to the newsletter with resources and feedback. 💙

Before we jump into web stuff, [let me share some "typo stickers" that made me smile this week](https://www.lavieencode.net/shop/stickers/javascropt-laptop-sticker/).

![JavaScropt sticker](https://images.contentful.com/f20lfrunubsq/52o43uJkR83sLPnhWTiQB8/71268b027ae89768c6335f6919c07fc0/Screen_Shot_2021-08-01_at_23.28.32.png)

This week's Web Weekly includes:

- predictable scrollbar spacing
- the order of CSS transformations
- the state of Safari

... and, as always, GitHub repositories, a new Tiny Helper and some music.

Ready? Steady. Go!


## Safari's current state – it's complicated

![Three headlines: Safari 15 opinions; Safari isn't protecting the web, it's killing it; One-offs and low-expectations with Safari](https://images.contentful.com/f20lfrunubsq/5J1EiFhURQ7WAne80SarHN/1f492cccd99ecc35102bac3e2d93ef66/Screen_Shot_2021-08-01_at_22.13.30.png)

[Jen Simmons, CSS expert and Apple evangelist, asked for Safari feedback on Twitter recently](https://twitter.com/jensimmons/status/1418920407642656775). Her Tweet sparked many conversations about Safari and its (lacking) feature set. More and more developers say "Safari is the new IE" these days. 

The following posts include valuable opinions about Safari and list many web platform features and bugs you want to have on your radar.

- ["One-offs and low-expectations with Safari" by Dave Rupert](https://daverupert.com/2021/07/safari-one-offs/)
- ["Safari 15 Opinions" by Chris Coyier](https://css-tricks.com/safari-15-opinions/)
- ["Safari isn't protecting the web, it's killing it" by Tim Perry](https://httptoolkit.tech/blog/safari-is-killing-the-web/)

## Predictable scrollbar spacing

![Example showing the behavior of `scrollbar-gutter: stable both-edges` which leads to content margins left and right.](https://images.contentful.com/f20lfrunubsq/2uy5NLiqnYqGnNoDu0HcVW/a1e303f999d3ff777944cc0ea23f0d90/Screen_Shot_2021-08-01_at_22.22.10.png)

If you had the pleasure to debug a CSS bug caused by scrollbars, you know that scrollbars and particularly the layout space they take, can be surprising. Bramus had a look at the new `scrollbar-gutter` CSS property which is a tiny but exciting web platform addition! 👏

👉 <a class="btn btn__small" href="https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property/">Learn about scrollbar-gutter</a>

## Open source alternatives

![Open Source Alternatives ❤️ – Hello, 👋 We’ve curated 200+ open source alternatives to tools that businesses require in day-to-day operations.](https://images.contentful.com/f20lfrunubsq/3CbP32wdjr5f6qfLQ9qIgO/61ab6ddcdaaee1505330a6bddf77ae77/Screen_Shot_2021-08-01_at_16.20.25.png)

Short'n'sweet: if you're looking for open source alternatives to popular Saas products, this site is for you!

👉 <a class="btn btn__small" href="https://www.btw.so/open-source-alternatives">Find open source alternatives</a>

## Tools, tools, tools!

![A set of free webtools for your daily usage](https://images.contentful.com/f20lfrunubsq/1wFE4HkKyDr4QTRiSUNj2g/b4224a63f216016f6deaa77bf0b33dc8/Screen_Shot_2021-08-01_at_23.02.27.png)

Rachid Daoudi maintains `toolb.dev`. It's a collection of many self-made tools for developers. That's one for the bookmarks!

👉 <a class="btn btn__small" href="https://www.toolb.dev">Find more tools</a>

## The order of transformation functions and properties

![Source code: div {   /*      You define the order of operations!     These transform functions are applied from left to right.   */   transform: translate(50%, 0) scale(1.5); }  div {   /*      The order of operations is pre-defined!     translate -> rotate -> scale   */   translate: 50% 0;   scale: 1.5; }](https://images.contentful.com/f20lfrunubsq/6mKcneniiUIhvhFCKmxBWW/0f794e69d5acf914e509c15b0a7f8a75/Screen_Shot_2021-08-01_at_22.28.34.png)

Soon, we'll have individual CSS properties to transform elements: `scale`, `rotate` and `translate`. They allow you to untangle your `transform` properties. 

But before you go all in and change all your CSS, be aware that not every `transform` declaration can be changed to individual transform properties. Read more about CSS transformation order on the blog. 

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/blog/order-in-css-transformation-transform-functions-vs-individual-transforms/">Order your CSS transformations</a>

## A shell trick to run EcmaScript modules in Node.js

![Source code: ":" //#;exec /usr/bin/env node --input-type=module - "$@" < "$0"  import process from 'process'; const { argv } = process console.log(argv)](https://images.contentful.com/f20lfrunubsq/5clTyLXMfAxDm0BbSqi94D/9da4829d301373ba95099efb99d660a4/Screen_Shot_2021-08-01_at_17.58.45.png)

Node.js allows you to run JavaScript on the command line. Use the `node` binary and run the script (`node some-script.js`). 

I prefer shell commands over Node.js scripts and usually add `#!/usr/bin/node` to the top of my scripts to make them executable. `node some-script.js` then becomes `./some-script`.

This approach works great unless you want to use ECMAScript modules in your scripts. Bramus explains how to use ECMAScript modules on the command line with some fancy shell magic.

👉 <a class="btn btn__small" href="https://www.bram.us/2021/07/28/execute-es-modules-on-the-cli/">Start writing module scripts</a>

## A CLI script to extract text from images

![Terminal output: extract-text-from-image /tmp/text-in-image.png / Tesseract Open Source OCR Engine v4.1.1 with Leptonica Warning: Invalid resolution 0 dpi. Using 70 instead. Estimating resolution as 177 🎉 Text copied to clipboard!](https://images.contentful.com/f20lfrunubsq/1CZ0HfO2FjJceS7iVRATRn/1bd6106b099c14df569ed2549dd0606c/Screen_Shot_2021-08-01_at_19.25.58.png)

I fiddled with shell scripting again. This time I added a new shell command to my environment to extract text from images. I don't think that I'll use it very often, but hey – there can't be too many fancy shell commands.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/snippets/how-to-extract-text-from-an-image-via-the-cli/">Extract text from images</a>

## A surprising fact about the `html` element and `background`

![In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.](https://images.contentful.com/f20lfrunubsq/3qryqujKAsah8rkeao6pHj/3a565148ba300a907f8f89644989bd0a/Screen_Shot_2021-08-01_at_22.35.01.png)

Oldie but goldie; did you know that a background color on the `body` element will cover the whole page if the `html` element doesn't have an applied background color. Holy moly, that's some odd behavior, and we're now stuck with it. 🙈 Chris Coyier wrote about this years ago.

👉 <a class="btn btn__small" href="https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/">See some weird CSS behavior</a>

## TIL – CSS media queries can have a boolean context

![Source code: /* evaluates to true for `less`, `more` and `custom` */ @media screen and (prefers-contrast) { }](https://images.contentful.com/f20lfrunubsq/5ROikuegd8dUzOki1lx982/90ac314d03b0134e711c333efc2675d6/Screen_Shot_2021-08-01_at_22.55.12.png)

This week I learned about boolean contexts in CSS media queries. Boolean contexts are applied when you use a media query's shorthand (`@media screen and (prefers-reduced-motion)` instead of `@media screen and (prefers-reduced-motion: reduce)`). 

The CSS spec defines what values are falsy when you use shorthands. All these years, and I just learned about it! 🙈

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/user-preference-feature-queries-have-a-boolean-context/">Discover media query boolean context</a>

## AbortController and AbortSignal

![Source code: const http = require('http');  const ac = new AbortController(); const signal = ac.signal;  http.request('https://example.org', { signal }, (res) => { /** … **/ });  // Cancel the request! ac.abort();](https://images.contentful.com/f20lfrunubsq/6C6UX6GN69PVmsckkLIZgo/503acfd15241d64f1c5a16845018e1c9/Screen_Shot_2021-08-01_at_22.59.19.png)

Our friends at Nearform published an excellent article on `AbortController`, `AbortSignal`, and the reasonably new promise-based timers in Node.js (`timers/promises`). It's a great read to learn more about promise cancellation!

👉 <a class="btn btn__small" href="https://www.nearform.com/blog/using-abortsignal-in-node-js/">Learn more about AbortSignal</a>

## Three valuable projects to have a look at 

- [lowlighter/metrics](https://github.com/lowlighter/metrics) – An infographics generator to display stats about your GitHub account.
- [nocodb/nocodb](https://github.com/nocodb/nocodb) – The Open Source Airtable alternative.
- [bubkoo/html-to-image](https://github.com/bubkoo/html-to-image) – Generates an image from a DOM node using HTML5 canvas and SVG.

## A new Tiny Helper

![time.lol interface showing a particular time in various formats](https://images.contentful.com/f20lfrunubsq/7pbfgFKiEkTJSl3dTa65iE/e76bbadc9ddc14c1e165acc6d21a9889/Screen_Shot_2021-08-01_at_23.15.42.png)

`time.lol` is a useful tiny utility to find and display a time in various formats. 

👉 <a class="btn btn__small" href="https://time.lol/">Convert times</a>

*Find more single-purpose online tools on [tiny-helpers.dev](https://tiny-helpers.dev/)*. The site lists **396 tools** right now; can we make it to 400 this week? If you use tools that are not listed yet, please reach out! 🙈

## A quote to think about

[Ryan Holiday takes a critical look at his life](https://ryanholiday.net/everything-you-say-yes-to-is-saying-no-to-something-else/) and describes how he set the wrong priorities. 

The post reminds us that everything we do, whether binge-watching Netflix or attending too many pointless meetings, is a decision for something and, most importantly, **against something else**.

> Everything you say “YES” to in this life means saying “NO” to something else.

## A song that makes you stop coding

![Oasis music video: Don't look back in anger](https://images.contentful.com/f20lfrunubsq/2kjXEKf9mTuWD07ZIAl95g/7da53796ff1e0c3fcb70c5891e17e29a/Screen_Shot_2021-08-01_at_23.22.37.png)

I was a huge Oasis fan back in the days. "Don't look back in anger" came on the radio this week, and what shall I say? I could only get up, sing along and celebrate the good old Britpop days.

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=r8OipmKFDeM">Listen to "Don't look back in anger"</a>

## Thank you for reading!

And that's a wrap for the thirtieth Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️

- [Share it on Twitter](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter%20because%20...&url=https://www.stefanjudis.com/blog/web-weekly-30/).
- Forward it to someone who might like it.

If you're not a subscriber, [you can change that](https://www.stefanjudis.com/newsletter/)! 😉

---

**Stay safe, and I'll talk to you next week!** 🎉 👋

PS. I heard the cool kids use RSS. You can find [multiple feeds on my site](https://www.stefanjudis.com/feeds/).