🧢 Stefan's Web Weekly #22
Tags: webdev
Published: 2021-06-08 08:03:49

---
title: 🧢 Stefan's Web Weekly #22
published: true
description: JSON modules in JavaScript, Lighthouse updates and CSS Font descriptors.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-22/
---

## Welcome to Web Weekly #22!

Hello friends! **It's summer here in Berlin!** I mean, almost... 🙈 And I might have made it to get a slight sunburn today. [I also started working on a new custom element for my blog (`<web-compat />`)](https://twitter.com/stefanjudis/status/1399838581582176256?s=20) to show always-up-to-date browser support information in my blog posts. It was a good week!

Before we jump into web stuff, let me share something fascinating with you, [this video shows the creation of a beautiful animation without using a computer](https://twitter.com/EngineMarvelous/status/1394808945282207748).

![Running cat with a house on its back](https://images.ctfassets.net/f20lfrunubsq/6HcmOnh0ojglJF0jaWfne/08e61b0cabe36115bcc4be93c5af01e0/Screenshot_2021-06-06_at_20.23.30.png)

This week's Web Weekly includes:

- JSON modules in JavaScript
- Lighthouse updates
- CSS Font descriptors

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

Ready? Steady. Go!

## The benefits of asynchronous communication

![Graphic comparing communication via chat and async writing](https://images.ctfassets.net/f20lfrunubsq/6EmrNgQs5Z4YRuhyOUECD9/7f14e9ead9b540b570a9f87d3c6bf6eb/Screenshot_2021-06-06_at_19.01.11.png)

Oldie gut goldie – I'm working from home for more than two years now, and I don't miss going into an office every day. I enjoy saving the commute while having the flexibility to work where I want. That said, it's challenging to establish a remote-first culture in a team or company because you need to adjust many processes to make it work. 

If you're considering remote work, Snir David compares synchronous and asynchronous communication in this evergreen blog post.

👉 <a class="btn btn__small" href="https://snir.dev/blog/remote-async-communication/">Learn why written communication rocks</a>

## `aria-hidden` and focusable elements

![4th Rule of ARIA Use – Do not use role="presentation" or aria-hidden="true" on a focusable element .](https://images.ctfassets.net/f20lfrunubsq/60BzkFcPXdcrI2eTplpoCt/e7c66863de2af03d04ea74264b728f40/Screenshot_2021-06-06_at_11.36.57.png)

You might know that you can use `aria-hidden` to hide elements from assistive technology. But what happens when you use `aria-hidden` in combination with focusable elements? The article "The hidden world of aria-hidden" explains these cases in great detail!

👉 <a class="btn btn__small" href="https://html5accessibility.com/stuff/2021/05/31/the-hidden-world-of-aria-hidden/">Check for focusable elements</a>

## Video encoding in the browser

![AVPress interface showing various controls and a video preview](https://images.ctfassets.net/f20lfrunubsq/2Oby0UVGXUylSiBRdAD1tG/14ca666a3d43b4b533973f8db0669b87/Screenshot_2021-06-06_at_11.19.23.png)

Optimizing videos is difficult and complex! [Years ago, I set up a shell command that leverages `ffmpeg` to make video files smaller](https://github.com/stefanjudis/dotfiles/blob/ded305fbced623fd3dcc5f74baab6ececc4d5131/config/oh-my-zsh/functions.zsh#L16-L24), but don't ask me how I came up with this script because `ffmpeg` is a challenge by itself.

Addy Osmani released AVPress, an online tool to encode and optimize your videos, last week! It uses [WebAssembly](https://webassembly.org/) and `ffmpeg`, and everything runs right in your browser! It's impressive what the web can do today!

👉 <a class="btn btn__small" href="https://avpress.zaps.dev/">Optimize your videos</a>

## Learn coding by teaching

![Study Groups – I organize weekly study groups that center around learning JavaScript and computer science.](https://images.ctfassets.net/f20lfrunubsq/3tQ542r2uvR9UxKXp7HBPx/0e357cec09fa5fdb5c993e91f769bffb/Screenshot_2021-06-06_at_10.29.28.png)

I had the pleasure to join [the first 2-hour long includeJS mini conf](https://includejs.dev/notes/mini-conf/) two weeks ago. includeJS is a study group where people get better at programming by teaching each other. And let me tell you, **that was a lovely and welcoming bunch of people at this mini conf**! I had a great time, and if you want to connect with other developers and learn together, reach out to Eva Dee!

👉 <a class="btn btn__small" href="https://includejs.dev/about/#heading-study-groups">Join the includeJS study group</a>

## Lighthouse updates and resources on CLS (Cumulative Layout Shift)

![Lighthouse score calculator showing metrics FCP, SI, LCP, TBT and CLS](https://images.ctfassets.net/f20lfrunubsq/7i6z9EvjOgt6WCw7xu33Px/02814d8eaf0353c10519c87b87403e5a/Screenshot_2021-06-06_at_12.13.56.png)

Chrome's Lighthouse will get a major update (`v8`) in Chrome 93. It comes with new features such as [a JavaScript bundle explorer](https://twitter.com/stefanjudis/status/1400539679569612805), but most importantly, the overall performance score and CLS calculation will be adjusted. 

Here are some resources to learn more:

- [Evolving the CLS metric](https://web.dev/evolving-cls/)
- [Evolving Cumulative Layout Shift in web tooling](https://web.dev/cls-web-tooling/)
- [How To Fix Cumulative Layout Shift (CLS) Issues](https://www.smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/)
- [v8.0 Performance FAQ](https://github.com/GoogleChrome/lighthouse/blob/master/docs/v8-perf-faq.md)

**Do you only want to see how the changes affect your performance score?** 

No problem, the handy Lighthouse performance calculator has been updated to reflect the upcoming weighting changes, too.

👉 <a class="btn btn__small" href="https://googlechrome.github.io/lighthouse/scorecalc/">Calculate your Lighthouse score</a>

## A new way to minimize font-triggered layout shifts

![Source code: @font-face {     font-family: "Lato-fallback";     size-adjust: 97.38%;     ascent-override: 99%;     src: local("Arial"); }](https://images.ctfassets.net/f20lfrunubsq/fmEoXBS7Nxgb2tPD4Nj5J/8f05f299f5d413ff2decf009ac6cbb1d/Screenshot_2021-06-06_at_12.26.43.png)

Speaking of layout shift, the loading of custom fonts often contributes to jumpy pages. And while there are practices to minimize font-triggered layout shifts (using `font-display` or `FontFace.load`), they always felt like workarounds to me. Luckily, CSS Font descriptors are on their way. Barry Pollard looked at how they improve font loading.

👉 <a class="btn btn__small" href="https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/">Learn about CSS Font Descriptors</a>

## What should you tell your manager?

![Being good at telling your manager the right information at the right time and asking for what you need is a superpower. It makes you way more valuable to have on a team (because your manager knows they can trust you to give them the information they need), and it’s more likely that you’ll get what you want (because you’re making it easy for them to do that!).](https://images.ctfassets.net/f20lfrunubsq/7z8A541Zak4l0gBpiZ1VEj/abad54beffd4b114a8835dc1448966da/Screenshot_2021-06-06_at_10.50.33.png)

Julia Evans, [who you might know from her programming zines](https://wizardzines.com/), publishes insightful coding content and shares excellent team work advice. "Things your manager might not know" is a very relevant article that will help you make your manager better at managing you.

👉 <a class="btn btn__small" href="https://jvns.ca/blog/things-your-manager-might-not-know/">Tell your manager what's up</a>

## TIL – CSS provides system colors

![CSS code: :root { background-color: Canvas; color: CanvasText; }](https://images.ctfassets.net/f20lfrunubsq/2rO3RPuUDBJAu7NAea4Oki/9fd2d37137fb2e47ca6e3b9265d6bb7f/Screenshot_2021-06-06_at_18.45.30.png)

Jim Nielsen shared a surprising little CSS gem. I learned that CSS provides system color values, and (theoretically) they react to user color preferences changes (light/dark mode).

👉 <a class="btn btn__small" href="https://blog.jim-nielsen.com/2021/css-system-colors/">Learn about CSS System colors</a>

*If you want to see system colors in action, [I published a demo and thoughts on my blog](https://www.stefanjudis.com/today-i-learned/css-defines-color-values-that-follow-system-preferences/).*

## Confusing terms in git

![Confusing terms in the git terminology](https://images.ctfassets.net/f20lfrunubsq/2zhEEJSgdJ6hywX3d6s6Up/bb95d3f4b81fb082541c8afc19ff169c/Screenshot_2021-06-06_at_10.58.24.png)

Do you know the difference between `git fetch` and `git pull` or `git checkout` and `git switch`? After working with git for almost a decade, I still have to say it: git is very confusing! I have to look up such details all the time. Pragati Verma explains git's confusing parts in this article.

👉 <a class="btn btn__small" href="https://dev.to/pragativerma18/confusing-terms-in-the-git-terminology-1578">Learn about confusing git terminology</a>

## JSON Modules landed in Chrome 91

![JavaScript code: import data from "./data.json" assert { type: "json" };  console.log(data);](https://images.ctfassets.net/f20lfrunubsq/3ORThM6txXIwln4AC6rIaw/8bcd7625612b7ad2a3ec5ff8ed3b910a/Screenshot_2021-06-06_at_19.46.49.png)

Here comes some big news! JSON modules landed in Chrome 91. I haven't had a detailed look at it yet, but this syntax is something I haven't seen before. 😲

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/">Find more resources on the blog</a>

## Reader shout out 💙

I shared [my discovery of the `address` HTML element](https://www.stefanjudis.com/blog/web-weekly-21/#til-%E2%80%93-an-%60address%60-html-element-exists) last week and asked if one of you is using it. [Jens Grochtdreis](https://www.grochtdreis.de/) enlightened me and told me that the `address` element doesn't offer much value today. He shared [this old html5doctor.com article with me](http://html5doctor.com/the-address-element/), and it made it clear.

Thank you for sharing, Jens! And thank you all for reading along. 💙

## A new Tiny Helper

![Screenshot of waterfaller.dev](https://images.ctfassets.net/f20lfrunubsq/14qUdeRAecPLJNW2Ws7ne8/25d19ebef831c363ba4e862529d71a4d/Screenshot_2021-06-06_at_20.01.18.png)

Analyzing waterfalls to find performance bottlenecks is not an easy task. `waterfaller.dev` loads your website and provides tips and tricks on how to make it faster. Very useful!

👉 <a class="btn btn__small" href="https://waterfaller.dev/">Analyze your waterfalls</a>

## Three valuable projects to have a look at 

- [microsoft/monaco-editor](https://github.com/microsoft/monaco-editor) – the browser-based code editor that powers VS Code.
- [pmndrs/racing-game](https://github.com/pmndrs/racing-game) – An open source racing game developed by everyone willing.
- [ryanoasis/nerd-fonts](https://github.com/ryanoasis/nerd-fonts) – A project that patches developer targeted fonts with a high number of glyphs.


## A quote to think about

I haven't done "serious pair-programming" in a while, and now that I think of it, I miss it. Putting the heads together to solve something challenging is terrific and, as [Jason Gorman points out, leads to better results](https://twitter.com/jasongorman/status/1399111079544954883).

> Pair programming isn't 2 people doing the work of one. It's 2 people avoiding the rework of 7.

## A song that makes you stop coding

![Video screenshot of "Naked and Famous – Young blood"](https://images.ctfassets.net/f20lfrunubsq/3c6Dy3xSDaez6gXahsgvrp/61ce50f275bbc46885150e500850a021/Screenshot_2021-06-06_at_20.13.26.png)

I warned you a while ago that I discovered an excellent Indie playlist on Spotify. This week's song is the "Young Blood" from the "The Naked And Famous" that perfectly matched Berlin's summer vibe.

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=0YuSg4mts9E">Listen to "Young Blood"</a>

## Thank you for reading!

And that's a wrap for the twenty-second Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. ♥️

- [Share it on Twitter](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter%20because%20...&url=https://www.stefanjudis.com/blog/web-weekly-22/).
- Forward it to someone who might like it.

If you're not a subscriber, [you can change that](https://www.stefanjudis.com/newsletter/)! 😉

---

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