🧢 Stefan's Web Weekly #12 
Tags: webdev
Published: 2021-03-30 09:24:18

---
title: 🧢 Stefan's Web Weekly #12 
published: true
description: WebPerf audits, container queries and @counter-style in CSS.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-12/
series: Web Weekly
---

## Welcome to Web Weekly #12

I just returned from a relaxing bike ride and a long walk around [Berlin's Tempelhofer Feld](https://www.google.com/search?q=tempelhofer+feld+berlin&safe=active). 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](//images.ctfassets.net/f20lfrunubsq/3hzSQlxLjp3XIHImfsIAzH/1b338ffbfafd7118350bcbe22754b82c/Screenshot_2021-03-27_at_18.17.46.png)

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!

👉 <a class="btn btn__small" href="https://jakearchibald.com/2021/f1-perf-part-1/">Learn more about web performance</a>

## The new and shiny – Rust-based CLI tooling

![Rewritten in Rust: Modern Alternatives of Command Line tools](//images.ctfassets.net/f20lfrunubsq/75iezSrRFWI2Rj759ZWElS/0e6a27d314c0996063fb3ecee88fc79e/Screenshot_2021-03-28_at_21.09.38.png)

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!

👉 <a class="btn btn__small" href="https://zaiste.net/posts/shell-commands-rust/">Find great CLI tools</a>

## Let the robots create your regular expressions for you

![Example showing the tool grex](//images.ctfassets.net/f20lfrunubsq/7tjEoN7T181a8Qwgw7bH4i/6ec698e9a80cd329871bdb342ca642b8/Screenshot_2021-03-28_at_21.13.04.png)

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](https://twitter.com/stefanjudis/status/1373633611254104068), and it really took off. 🤯

👉 <a class="btn btn__small" href="https://github.com/pemistahl/grex">Use grex to create regular expressions</a>

## Is it true? Will we get container queries?

![Source code showing the container queries syntax](//images.ctfassets.net/f20lfrunubsq/1HPv5T6vEwW9X3rCKO40T2/8fb81c426e5686d8c88c6fb93b3cf422/Screenshot_2021-03-28_at_21.03.02.png)

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

👉 <a class="btn btn__small" href="https://twitter.com/Una/status/1375419967718449155">See Container queries in action</a>

## 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:](//images.ctfassets.net/f20lfrunubsq/4GqegaCzEL806rhllWsdkn/8a255742ccacc12d39b0426fe552c868/Screenshot_2021-03-28_at_21.25.29.png)

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.

👉 <a class="btn btn__small" href="https://ethanmarcotte.com/wrote/au-revoir-mon-ampmour/">Should you use AMP?</a>

## Blogging tips in a sentence

![Tinkering with your blog's tech stack or design is a way to avoid what matters: writing.](//images.ctfassets.net/f20lfrunubsq/4SZLWsubudrKoIPEK0CYgH/e8f7bfbd1f87ef8c4e42c79c9aa048d0/Screenshot_2021-03-27_at_20.23.20.png)

I enjoy Josh Spector's work. He runs [the "For the interested" newsletter](https://fortheinterested.com/subscribe/). I recommend checking it out, if you blog or create content online. His article about blogging is worth your time, too.

👉 <a class="btn btn__small" href="https://joshspector.com/one-sentence-blogging-tips/">Read 40 blogging tips</a>

## Build your custom VSCode theme

![Application to configure VSCode theme colors](//images.ctfassets.net/f20lfrunubsq/xqiKuYeRZjJhYkZccdwSL/030037119adf025591b30786271686a5/Screenshot_2021-03-27_at_20.32.42.png)

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. 

👉 <a class="btn btn__small" href="https://themes.vscode.one/">Create your custom VSCode theme</a>

## 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.](//images.ctfassets.net/f20lfrunubsq/3mTyyUWy4Vh0erlqWAYsZh/f8082b707d2058b1fda3b43d43adbbc4/Screenshot_2021-03-28_at_21.35.04.png)

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.

👉 <a class="btn btn__small" href="https://des.wtf/whos-the-best-engineer-youve-worked-with/">Ask about best engineers</a>

## 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.](//images.ctfassets.net/f20lfrunubsq/6r8KpU97OaLhCawQNfh1bh/0eb65a6694e39c0109f5580a8a5e5646/Screenshot_2021-03-28_at_21.39.28.png)

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.

👉 <a class="btn btn__small" href="https://yakim.nl/articles/voiceover-testing/">Get started with VoiceOver testing</a>

## 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.](//images.ctfassets.net/f20lfrunubsq/20UOpciRFUsBViYPRipLB1/1de8c1da98b2018c8760df04cb422b1f/Screenshot_2021-03-28_at_21.51.51.png)

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](https://twitter.com/search?q=%23devsheets) sharing details about it on Twitter.

👉 <a class="btn btn__small" href="https://twitter.com/stefanjudis/status/1376237726933073920">Learn more about @counter-style</a>

## 💙 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:](//images.ctfassets.net/f20lfrunubsq/7pCTOmrdBgJTvAdJKYC8Sl/2b0d4d6176847441fb91998c60723158/Screenshot_2021-03-28_at_21.55.34.png)

[Chris Ashton shared that he learned something from this newsletter on Twitter](https://twitter.com/ChrisBAshton/status/1374783653507645447). Thanks so much, Chris!

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

The additions to [Tiny Helpers](https://tiny-helpers.dev/) are slowing down. I wonder if I should remove this section from the newsletter in the future... [Reply to this newsletter](mailto:stefanjudis@gmail.com) and let me know if all these tools are valuable (or not).

## Three useful projects to have a look at 

- [mattermost/focalboard](https://github.com/mattermost/focalboard) – ocalboard is an open source, self-hosted alternative to Trello, Notion, and Asana.
- [matryer/xbar](https://github.com/matryer/xbar) – Put the output from any script or program into your macOS Menu Bar.
- [microsoft/codetour](https://github.com/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](https://twitter.com/traf/status/1359262574085345284).

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

## A song that makes you stop coding

![Cover: Glenn Astro – Throwback ](//images.ctfassets.net/f20lfrunubsq/29qEGlmf0aGIF394tStwDs/2f210ca041906a89b5df44968562f310/Screenshot_2021-03-28_at_22.06.02.png)

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. 🤷‍♂️

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=7bJYEAhZhT8">Listen to Glenn Astro</a>

---

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](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter&url=https://www.stefanjudis.com/blog/web-weekly-12/). ♥️

**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/).