🧢 Stefan's Web Weekly #6
Tags: webdev
Published: 2021-02-14 22:25:38

---
title: 🧢 Stefan's Web Weekly #6
published: true
description: Beautiful illustrations, a smiling battery, npm lockfiles and CSS-only masonry grids.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-6/
series: Web Weekly
---

## Welcome to Web Weekly #6

I can't say that I've been outside much this week. Berlin is still buried under snow. My biggest highlight was all the children with their sledges in front of my balcony. There's a little hill (I wouldn't even call it "a hill") and everybody is enjoying their thrilling three second rides. 🛷

This week's web weekly includes beautiful illustrations, a joyful battery display app, npm lockfiles, CSS masonry grids and, as always, GitHub repositories, new Tiny Helpers and some music.

Enjoy!

## More beautiful Twitter illustrations

![An Illustration showing a good and bad day in a graph](//images.ctfassets.net/f20lfrunubsq/5w98RJBQv2U5oSknZMfkJl/46f8c94c1923bf60c37a59519b9fdd6b/Screenshot_2021-02-14_at_20.33.43.png)

[In a previous newsletter](https://www.stefanjudis.com/blog/monthly-digest-december-2020/), I shared the @dinosaur Twitter account with you. It posts beautiful illustrations that make you think about your life. 

This week I found @lizandmollie. They're posting similar graphics and illustrations (without dinosaurs though) and are much welcome in my timeline!

👉 <a class="btn btn__small" href="https://twitter.com/lizandmollie/">Follow @lizandmollie</a>

## Listen to radio stations from all around the world

![Radio garden playing a station from London](//images.ctfassets.net/f20lfrunubsq/64kENqAhnwxREs5sQqPOmb/578f2d268a329f4966043b2ac2e9d3f7/Screenshot_2021-02-14_at_20.42.49.png)

I love Spotify, but I have to admit that it's not great for discovering new music. Recently, I found myself listening to the Berlin radio more frequently. I discovered `radio.garden` which lets you play hundreds (thousands?) of radio stations from all around the world! It's perfect for discovering new music!

👉 <a class="btn btn__small" href="http://radio.garden">Listen to random radio stations</a>

## My new joyful battery display

![Battery buddy apps that shows the battery app with a smiley](//images.ctfassets.net/f20lfrunubsq/5gXJqRTryR7YpLzQelfWOO/48b06ef852f06bf0c25f2835918036c4/Screenshot_2021-02-14_at_20.45.46.png)

I installed a new menubar app. It replaces the default mac battery icon with a smiling one. What shall I say? A happy battery makes my day. Interfaces should be more fun!

👉 <a class="btn btn__small" href="https://batterybuddy.app/">Install battery buddy</a>

## @randomMDN is back!

![Tweet of randomMDN](//images.ctfassets.net/f20lfrunubsq/2oabwORTDpWixHAD9zyyRr/dbf412aa91ed28163a5ff0e38b6615bf/Screenshot_2021-02-14_at_20.52.32.png)

Two years ago I set up the @randomMDN Twitter bot. It shares random MDN pages several times a day. And in January it broke! MDN changed how they serve their sitemap. `sitemap.xml` became `sitemap.xml.gz`, yes that's right, the sitemap is now a gzipped file and this change broke my bot.

You can find [a snippet explaining how I now fetch and unzip the sitemap in Node.js](https://www.stefanjudis.com/snippets/how-to-download-and-unzip-gz-files-in-node-js/) on my blog.

👉 <a class="btn btn__small" href="https://twitter.com/randomMDN">Follow @randomMDN</a>

## Are spacer gifs coming back?

![JSX with a spacer component](//images.ctfassets.net/f20lfrunubsq/1tcpcUhwweSewQPng0nmT1/2410d005092756c45e91c5b870634b71/Screenshot_2021-02-14_at_20.59.41.png)

Josh Comeau publishes an incredible amount of in-depth content, and his website is a beautiful experience. I don't want to know how much time he spends on it. If you haven't had a look at his work yet, you should!

In a recent article, he describes how spacer components can help with building pages and layouts. Instead of adding classes to define spaces between elements, he advises using spacer elements instead. It's a fascinating approach for sure.

👉 <a class="btn btn__small" href="https://www.joshwcomeau.com/react/modern-spacer-gif/">Read "Let's Bring Spacer GIFs Back!"</a>

## Browse GitHub repositories with style (and VS Code)

![github1s.com showing a repo in VS Code](//images.ctfassets.net/f20lfrunubsq/1LqeOaNT7eALlcTd1YZaJk/c6fbdb52d13ddc393908e477eab74daa/Screenshot_2021-02-10_at_20.19.33.png)

Did you know that there is a service out there, that lets you browse public GitHub repositories in VS Code? Change the URL of the repo that you want to inspect from `github.com/someone/something` to `github1s.com/someone/something`, and you'll find VS Code right in your browser. `CMD+p` to jump into files is a bit "funky", but it's a great project for sure!

## Copy property path in Chrome DevTools 

![Copy property path in chrome devtools](//images.ctfassets.net/f20lfrunubsq/4eEw8lmmUgDwOc7kjH2jHh/b47b4f084493d4c4505df6951fadc152/Screenshot_2021-02-14_at_22.23.05.png)

A while ago [my friend Khaled](https://khaledgarbaya.net/) showed me that when you're prototyping in the Chrome DevTools console, you can copy the path to a nested property! If you like to test things out in the console, that one's for you!

## Advanced Google search queries

![Use Google like a pro by Marko Denic](//images.ctfassets.net/f20lfrunubsq/bOV5pIaDY17eMkOy2yRBd/13d6923d1454078fa78d23d0aec030a1/Screenshot_2021-02-14_at_21.11.49.png)

Being good at googling is a very underrated skill. I wanted to believe that I'm pretty good at it, but when I read posts that show me all the available queries, it becomes clear, that I'm not good at googling. I mean, did you know that and/or clauses are supported in Google search: `(javascript OR python) free course`, I didn't!

👉 <a class="btn btn__small" href="https://dev.to/denicmarko/google-like-a-pro-5cf6">Level up your Google skills</a>

## Masonry grid layouts, feature detects and confetti cannons

![Confetti with the message "Looks like your browser support masonry grid layout"](//images.ctfassets.net/f20lfrunubsq/4rNefgpEtostvB15LR3bOM/1e9cf244d9028bdef58e94ee08ad0b55/Screenshot_2021-02-14_at_21.29.13__2_.png)

I added a CSS-only masonry grid layout to [the Today I learned section of my site](https://www.stefanjudis.com/today-i-learned/)! 🎉 If you want to learn about masonry layouts, feature detection in CSS and(!) JavaScript and how you can throw confetti into your pages using SkyPack (an ES module CDN), this post is for you.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/blog/how-to-use-and-feature-detect-css-grid-masonry-layout/">Learn more about masonry CSS grids</a>

## Lockfile changes in the new npm `v7`

![npm - Catching Up with Package Lockfile Changes in v7](//images.ctfassets.net/f20lfrunubsq/4icC5DvLKxR3wBjfOyhYJv/a0871e7a3e7a960bcf950de28cdc1c53/Screenshot_2021-02-14_at_22.35.41.png)

npm is coming with a `package-lock.json` file for a while now. The file format changes with `v7`. Nitay Neeman describes in great detail what's new.

👉 <a class="btn btn__small" href="https://nitayneeman.com/posts/catching-up-with-package-lockfile-changes-in-npm-v7/">Learn about the new lockfile format</a>

## Licensing and the problem with open source

![If you're using husky in a commercial project, your support would be extremely helpful (husky 5 is free to try for 30 days).](//images.ctfassets.net/f20lfrunubsq/3DIYEQWa9gaV21nt8pdGXo/7b859973ea6cfba2101cb9221619f6a7/Screenshot_2021-02-14_at_21.49.25.png)

The popular husky package (4.5 million weekly npm downloads) is a tool to automate git hooks in your projects. Husky's new version 5 comes with a licence change. It now includes, wait for it... the "License Zero Parity 7.0.0 and MIT (contributions) with exception License Zero Patron 1.0.0.". 

I'm not a lawyer, but as far as I understand the license allows free usage when you're doing open source, but if you're building a commercial product, you have to donate to Husky. In my opinion, that's a good move. There are too many people maintaining open source without getting anything back.

👉 <a class="btn btn__small" href="https://dev.to/typicode/what-s-new-in-husky-5-32g5">Read the Husky release notes</a>

## New tiny helpers

![New tiny helpers including Iconduck, Color hunt and glyphs.fyi](//images.ctfassets.net/f20lfrunubsq/2tC9onGHq8lOuFzxREY7l7/31b557d7e6d08121bca25dc2be681fcc/Screenshot_2021-02-14_at_22.15.30.png)

- [Color Hunt](https://colorhunt.co) – Get color inspiration with hand-picked color palettes.
- [glyphs.fyi](https://glyphs.fyi/) – Find open source icons.
- [IconDuck](https://iconduck.com/) – Find free and open source icons and illustrations.

## Three useful projects to have a look at 

- [JonnyBurger/remotion](https://github.com/JonnyBurger/remotion) – Create videos programmatically in React 
- [LeCoupa/awesome-cheatsheets](https://github.com/LeCoupa/awesome-cheatsheets) – Awesome cheatsheets for popular programming languages, frameworks and development tools
- [privatenumber/minification-benchmarks](https://github.com/privatenumber/minification-benchmarks) – JS minification benchmarks: babel-minify, esbuild, terser, uglify-js

## A quote to think about

I came across this quote from programming pioneer [Grace Hopper](https://en.wikipedia.org/wiki/Grace_Hopper). There's much truth in it!

> One accurate measurement is worth a thousand expert opinions.

## A song that makes you stop coding

![Screenshot of I can't do without you from Caribou](//images.ctfassets.net/f20lfrunubsq/6H7Y6zIVjUv97GDJeylC95/4e41ea29e86d8ab8cea2f23f11c99542/Screenshot_2021-02-14_at_22.26.52.png)

Caribou's soft and electronic "Can't do without you" is a perfect track to forget the winter, take a breather and think of the great summers!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=sdwXDAitXGs">Listen to Caribou</a>

---

And that's a wrap for the sixth Web Weekly! 🎉

If you enjoyed this edition, [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-6/). :)

**Stay safe and warm, 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/).