Web Weekly #77

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

Guten Tag! 👋

Shell scripting is one of these things that I just don't get better at. And I'm really trying, but I don't recall any syntax and must google every tiny script portion. It's so frustrating. And even when things work eventually, I'm still unsure if I did things "the right way".

Let me tell you about two tools giving me more confidence in mighty shell scripting land.

Screenshots of shellcheck and explain shell

Explain Shell helps to understand CLI commands by showing detailed explanations of every argument.

But what about writing scripts?

A while ago, I discovered ShellCheck, and I couldn't write scripts without it now. It's like ESLint for shell scripting, teaching how to write scripts correctly. Use it online or install an extension for your favorite editor. I highly recommend it!

Today you'll learn about:

  • Style queries
  • iTerm tricks
  • Questionable performance advice

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

Lastly, welcome to the 18 new subscribers! I'm super excited to have you around! 👋

Something that made me smile this week

Tweet: Marmots go curling

To kick things off, here's a marmot curling competition for you. 😆

iTerm2 tricks worth knowing

iTerm2 window highlighting a custom mark, the status bar and multiline command editing

I spend a lot of time in my terminal, and I bet you do, too.

If you're using iTerm2, here are three terminal tricks:

Everybody talks about container queries — but there will be more!

For example, you can use the approach of higher-order variables to group styles (in this example a “highlight” card), with logic based on its intrinsic size: @container (min-width: 420px) and style(--highlight: true) { /* styles for only highlight components at a minmimum width of 420px */ }

Container queries will make the creation of component-based styles so much easier. But they're only the first stage. Una Kravets shares what's following — style queries. And I'm so excited about them!

Query with style

Node 16 comes with build-in CLI argument parsing

import { parseArgs } from 'node:util'; const args = ['-f', '--bar', 'b']; const options = { foo: { type: 'boolean', short: 'f' }, bar: { type: 'string' } }; const { values, positionals } = parseArgs({ args, options }); console.log(values, positionals); // Prints: [Object: null prototype] { foo: true, bar: 'b' } []

Short'n'sweet: after all these years, CLI argument parsing made it into Node.js!

Parse it like a boss

Here's a little fun fact: did you know that modern shells also come with a getopts command?

TIL — GitHub provides saved replies

How to step up your GitHub game with "Saved replies"

Hah! I didn't know that GitHub provides a way to reuse and save replies. The feature is quite hidden in your account settings.

I wonder if project-level snippets would be more valuable, but hey... it's still a helpful feature.

Stop typing the same replies

Bun vs Deno

Deno vs Bun

There's a lot of movement in the JavaScript runtime space lately. Most notably, Deno and Bun make a lot of noise. Swyx shares an outsider's perspective and gives an excellent summary of features, the communities, the quality of docs, and everything else you need to know about the projects.

Learn more about the new and fancy

Weird React references

JS Code: const ref = React.useCallback((node) => { node?.focus() }, []) return <input ref={ref} defaultValue="Hello world" />

Whenever I use useRef, I think "Wow, this is a strange API". Dominik Dorfmeister explains how it works and shares how to use React references differently.

Reference another way

Learn how to make music in your browser

Get started making music — In these lessons, you'll learn the basics of music making. No prior experience or equipment is required; you'll do everything right here in your browser.

The music software company Ableton created a site teaching how to make music. You learn about scales, beats, song structures and many other things... It's fantastic!

Become a musician

The 14KB performance myth

Many web performance experts recommend putting all critical resources in the first 14 KB of your web page. This is based on a bit of understanding of TCP which underlies each HTTP connection – at least for now until HTTP/3 and QUIC come along. But is it really true? In my book HTTP/2 in Action I suggested that this 14 KB statistic was no longer really that relevant in the modern world, if it ever was, and was asked to expand upon this - hence this post. But let me caveat it by saying that web performance is massively important, and there are many, many, many use cases showing this, so I'm not arguing against it and people should optimise this. Just don't get too hung up on this 14 KB number.

Headsup: Hacker News entry approaching. 😉

The article "A 14kb page can load much faster than a 15kb page" was trending on HN this week. And while it's always good to ship less, Barry Pollard explains why you shouldn't get hung up on delivering exactly 14KB.

Build a faster web

Yet another excellent TIL collection

TIL — Today I Learned. A collection of concise write-ups on small things I learn day to day across a variety of languages and technologies. These are things that don't really warrant a full blog post. These are things I've picked up by Learning In Public™ and pairing with smart people at Hashrocket.

As you know, I'm a big fan of writing concise "Today I learned" posts. And while I'm at 200+ documented learnings, Josh Branchaud beats me to it with over a thousand TIL posts on GitHub. 👏

Learn something new

Random MDN – Gone

Tweet: 🦖 Random MDN: 410 Gone 🦖 https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410 The HyperText Transfer Protocol (HTTP) 410 Gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely t…

From the unlimited knowledge archive called MDN...

Did you know there's not only the 404 – Not found but also a 410 – Gone status code? Now you do. :)

Use "410 - Gone"

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

Example HTML including three links with rel "sponsored", "ugc" and "nofollow"

This TIL is for you if you have a comments section on your site. Googlebot understands links that are marked as sponsored or user-generated. Learn more about it on the blog.

Add relationships

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

Three valuable projects to have a look at

A new Tiny Helper

Repo trends for denoland/deno

If you're planning to contribute to open source projects, "Repo Trends" tells you how long it takes maintainers to reply to an issue or review a PR.

Analyze repositories

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

Thought of the week

When talking to people: are you the talker or the listener?

My introverted self is definitely a listener because I want to give folks enough space and don't care much about my own speaking time.

"Good conversations have lots of doorknobs" talks about givers and takers instead of talkers and listeners. Givers offer the space that takers happily take.

Sounds logical, but pairing a giver with a taker doesn't make a great conversation. Both need to offer their counterpart a way to connect to keep the conversation going. These connections alone make conversations pleasant and valuable.

I thought about this idea a lot and will a) try to speak up more (especially in groups) and b) look for hooks to ease conversation flows.

Talking to another person is like rock climbing, except you are my rock wall and I am yours.

A song that makes you stop coding

Cover: Tinush - Struggle (feat Aretha Franklin)

Tinush's track "Struggle" is a nicely-rolling house track with fabulous vocals. 👏

Listen to "Struggle"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending almost 3k emails. If you enjoy it, consider supporting me on Patreon. ♥️

Or tell your friends about it:

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

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! 👋

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 13 days ago.
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