Published at
Updated at
Reading time
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 #12

I just returned from a relaxing bike ride and a long walk around Berlin's Tempelhofer Feld. It's so good to be outside, and I hope you had some refreshing moments this week, too!

This week's Web Weekly includes...

  • detailed website performance audits
  • container queries in CSS (are they really coming?)
  • custom CSS list styles using @counter-style

... and, as always, GitHub repositories, new Tiny Helpers and some music.

Shall we? Let's jump in!

A look under the hood of slow websites

Who has the fastest F1 website in 2021? Part 1

I love web performance audits. There's always a lot to learn when experts look "under the hood" of a slow website. With the Formula 1 season's start, Jake Archibald kicks off the webperf analysis for the racing teams' websites. Great learning material!

Learn more about web performance

The new and shiny – Rust-based CLI tooling

Rewritten in Rust: Modern Alternatives of Command Line tools

Jakub Neander listed great Rust-based command-line tools. I use bat (cat with syntax highlighting) and exa (a better ls) myself. If you spend a lot of time on the CLI, you definitely should have a look!

Find great CLI tools

Let the robots create your regular expressions for you

Example showing the tool grex

The post of Rust tools above also includes the tool grex. grex accepts multiple strings and returns regular expression matching these. It's magic! I shared a quick video on Twitter, and it really took off. 🀯

Use grex to create regular expressions

Is it true? Will we get container queries?

Source code showing the container queries syntax

Container queries are high on developers' wishlist for ages. The hope is that we'll be able to style elements depending on their width instead of the viewport's width one day.

And browser vendors started looking at implementing it. Una Kravets shared that Chrome ships container queries behind a flag (enable-container-queries) already. You can play around with the @container syntax today! 😲

See Container queries in action

Is it time to revisit AMP?

I’ll say it again: you don’t need to use AMP for priority placement. You just need a fast website.  This is a very, very good thing. In my very first post on AMP1, I wished AMP had never existed, and that Google had adopted a more open set of standards:

Google's AMP (Accelerated Mobile Pages) is a web framework that promises to make the web faster. I'm all behind this idea, but, unfortunately, Google pushed their invention onto all of us. If you wanted to be included in the top-row mobile search results, you have to follow Google's rules and ship AMP.

Fortunately, this "enforcement" will disappear in May 2021, and the carousel can include "normal" sites then. Ethan Marcotte shares what that means for the web.

Should you use AMP?

Blogging tips in a sentence

Tinkering with your blog's tech stack or design is a way to avoid what matters: writing.

I enjoy Josh Spector's work. He runs the "For the interested" newsletter. I recommend checking it out, if you blog or create content online. His article about blogging is worth your time, too.

Read 40 blogging tips

Build your custom VSCode theme

Application to configure VSCode theme colors

If you always wanted to create your own custom VS Code theme but didn't know how to start. Say Hi to "Theme Studio for VS Code". Log in, adjust colours and call it a day.

Create your custom VSCode theme

Who's the best engineer you've worked with?

 Who's the Best Engineer You've Worked With? I ask this question because it seems to be unheard of enough that most don’t have a canned response and it consistently spurs insightful conversation.

Des Preston shared an interesting approach to interviews (as interviewer or interviewee). He asks the persons in the conversation about the best engineer they worked with. That's a fascinating take, because I can totally see how it sparks valuable conversations.

Ask about best engineers

Getting started with VoiceOver

When I started out trying to use VoiceOver to test websites I was quite intimidated by it. It takes some getting used to. After quite a lot of tinkering with it I found some important shortcuts and features that made it click for me.

To make your websites fully accessible, you have to test them with assistive technology such as screen readers. VoiceOver is the screen reader coming with macOS. If you want to get started, Yakim van Zuijlen wrote an excellent guide to get started.

Get started with VoiceOver testing

Custom list styles with @counter-style

Quick Sunday DevSheet.  πŸ™ˆ  With Chromium v91 `@​counter-style` slowly enters the stage. Soon you can go wild with another option to create custom list styles.

Did you know that there's an at-rule to style list counters – @counter-style. Soon it will be supported in Chromiums and Firefox. I posted a quick #devsheet sharing details about it on Twitter.

Learn more about @counter-style

πŸ’™ Shout outs

Think you know HTML? Think again!  I'm a web developer of around 12 years experience, but I just learned three things from a single issue of @stefanjudis ' excellent newsletter:

Chris Ashton shared that he learned something from this newsletter on Twitter. Thanks so much, Chris!

There's no new tiny helper this week... 😱

The additions to Tiny Helpers are slowing down. I wonder if I should remove this section from the newsletter in the future... Reply to this email and let me know if all these tools are valuable (or not).

Three useful projects to have a look at

  • mattermost/focalboard – ocalboard is an open source, self-hosted alternative to Trello, Notion, and Asana.
  • matryer/xbar – Put the output from any script or program into your macOS Menu Bar.
  • microsoft/codetour – VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor.

A quote to think about

There's a lot of truth in this week's quote. @traf shared that enjoying what you do directly impacts your productivity.

The only productivity hack you need is enjoying what you do.

A song that makes you stop coding

Cover: Glenn Astro – Throwback

I have tickets for the Immergut Festival this year in May. While that's not gonna happen, one of my best friends shared this wonderful bouncy house track from Glenn Astro with me. Apparently, they were in the lineup. πŸ€·β€β™‚οΈ

Listen to Glenn Astro

And that's a wrap for the twelfth Web Weekly! πŸŽ‰

Writing this newsletter takes me three hours every week. If you enjoyed it, a quick share means the world to me. β™₯️

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 4 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