Web Weekly #30

Written by Stefan Judis
Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

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.

JavaScropt sticker

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

Jen Simmons, CSS expert and Apple evangelist, asked for Safari feedback on Twitter recently. 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.

Predictable scrollbar spacing

Example showing the behavior of `scrollbar-gutter: stable both-edges` which leads to content margins left and right.

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! 👏

Learn about scrollbar-gutter

Open source alternatives

Open Source Alternatives ❤️ – Hello, 👋 We’ve curated 200+ open source alternatives to tools that businesses require in day-to-day operations.

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

Find open source alternatives

Tools, tools, tools!

A set of free webtools for your daily usage

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

Find more tools

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; }

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.

Order your CSS transformations

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)

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.

Start writing module scripts

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!

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.

Extract text from images

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.

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.

See some weird CSS behavior

TIL – CSS media queries can have a boolean context

Source code: /* evaluates to true for `less`, `more` and `custom` */ @media screen and (prefers-contrast) { }

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! 🙈

Discover media query boolean context

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();

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!

Learn more about AbortSignal

Three valuable projects to have a look at

A new Tiny Helper

time.lol interface showing a particular time in various formats

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

Convert times

Find more single-purpose online tools on 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 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

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.

Listen to "Don't look back in anger"

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. ♥️

If you're not a subscriber, you can change that! 😉

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.

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