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

Guten Tag!

Let's start the week with some very creative work by Vincent Bal. He's a filmmaker that uses shadows in his short scenes. 😲

A shadow forming a thirsty dog

This week's Web Weekly includes:

  • A better history search CLI tool
  • Writing confident emails
  • Native page transitions

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

Ready? Steady. Go!

McFly – a reverse search replacement

McFly terminal session

Many people use ctrl + r to navigate their shell history. I never really used this functionality and usually went for a history | grep .... After discovering McFly (a reverse search replacement), I now love using ctrl + r to find previous commands.

Fly through your shell history

Today I learned – viewport units trigger overflows

In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow.

I rarely use viewport units in my CSS. This week I learned that 100% and 100vw behave differently, and that can lead to overflows. Learn more about it on the Polypane blog.

Learn about strategies dealing with overflows

Build resilient Frontend applications

Do not assume users turn off CSS or JavaScript – You should not assume the reason for designing a service that works without CSS or JavaScript is because a user chooses to switch these off.

Due to their massive audience, the folks working on gov.uk are known for building highly accessible websites. I came across their guidance document outlining how to build resilient Frontends and loved their focus on progressive enhancement and take on unavailable JavaScript.

Build resilient websites

Be more confident when writing emails

Chart showing phrases to sound confident in emails.

As a non-native English speaker, I'm often uncertain how to phrase replies. I tend to be too apologetic, too. Dani Donovan collected valuable phrases and examples to write more confident emails.

Write confident emails

How to build a CSS switch – an incredibly detailed CSS tutorial

Building a switch component – A foundational overview of how to build a responsive and accessible switch component.

Adam Argyle is on fire lately. He published various incredibly detailed CSS tutorials. This article on CSS switch components is very long, but oh boy... there are so many gems in it! Highly recommended!

Build a CSS switch

Start using singular "they"

What's up with singular "they"?

Do you use "they" when talking about a single person? This quick and cute video from Savvy Ally Action explains why you might want to adopt it.

Adopt the singular "they"

Import CSS from JavaScript

CSS Modules-in-CSS Module Scripts

The Chrome folks started pushing a new way of importing CSS in JavaScript.

import sheet from './styles.css' assert { type: 'css' };

That's... well... something (it's borrowing the syntax to import JSON in ESM). The WebDev community is not happy about this approach. Dave Rupert sums up this week's drama nicely.

Is this the way to import CSS in JS?

How to "hack" Spotify

Quote: "We're afraid that it's not currently possible to remove these recommendations. Rest assured, we'll let the right folks know this is something you'd like to see soon."  So yeah… I won't be holding my breath.  This to me, falls within the right to repair (which I really don't understand or agree with the push back) - so I fixed it myself.

Remy Sharp got annoyed by Spotify recommending him too many podcasts and shows. Unfortunately, the tech support could not help him and he was stuck with all these useless recommendations. He took the matter into his own hands and started "fixing" Spotify. It's a great story with many nicely nerdy details!

Learn how to "hack" Spotify

Consume less, create more!

This psychopath was sketching. She had a charcoal pencil and was sketching a human figure. She didn’t look happy exactly. But she looked engaged. She looked intent. And all of a sudden my smugness fled. I realized that reading a book was really just like reading Reddit—both were consumptive activitives.

TJCX described how they stopped consuming media and content, and started creating instead. I loved reading this story!

Start creating

💯 excitement: Chrome starts a page transitions origin trial

if ('documentTransition' in document) {   // Feature supported }

On another note: Chrome also started an origin trial for page transitions, and I'm overly excited about it. Page transitions allow you to define a beautiful visual transition from one page to another. The catch here: it works without all the heavy lifting in CSS and JS, and you don't need to build a Single Page Application to make your website look smoother.

I'm planning to set it up this week and will keep you posted!

Play around with page transitions

Three valuable projects to have a look at

A new Tiny Helper

View source interface: Drop in a URL and view the source

Did you ever want to view a website's source but were on your phone or didn't have developer tools available? This situation is when View source as a service can help. :)

View all the sources

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

A quote to think about

I listened to the JSParty episode on CLI tooling, and Amal Hussein said this week's quote. It's such a beautiful sentence!

The terminal is the most intimate conversation you're gonna have with your computer.

A song that makes you stop coding

Palm trees and the text "Sub soul"

This week's track is a bouncy house track with some rolling lyrics. Format:B produces such danceable tracks!

Listen to "Chunky"

Thank you for reading!

And that's a wrap for the thirty-third 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.

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