🧢 Stefan's Web Weekly #4
Tags: webdev
Published: 2021-02-01 20:45:34

---
title: 🧢 Stefan's Web Weekly #4
published: true
description: More MacOS menubar apps, too small mouse cursors, a single-div CSS panda and the question if the `img` HTML element is too complicated.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-4/
series: Web Weekly
---

## Welcome to Web Weekly #4!

This week's edition includes more MacOS menubar apps, too small mouse cursors, a single-div CSS panda and the question if the `img` HTML element is too complicated.

Ready? Let's do it!

## An eight-year-old explains how to build a single-div CSS panda

![8 year old explaining how to make a single-div CSS panda](//images.ctfassets.net/f20lfrunubsq/3KMuIYgggaxqiK03YgyXwy/a2b4ef0207f8efb145a6402d02da41f8/Screenshot_2021-01-31_at_20.46.48.png)

I'm always amazed by single-div CSS art, but I'm mindblown when an 8-year-old enters the CSS magic game and explains how it works! 👏

👉 <a class="btn btn__small" href="https://twitter.com/diana_ashktorab/status/1354840337525731328">Watch Diana explain her CSS panda</a>

## Is your mouse cursor too small?

![Scott Hanselmann "Hey friends, your mouse cursor is too small.](//images.ctfassets.net/f20lfrunubsq/2H7TkmxSPIWJm6dmIOBeSS/6470ddefee3c616983d40325eb071dd7/Screenshot_2021-01-31_at_20.16.36.png)

After watching Scott Hanselmann's ode to big mouse cursors, I increased mine (just a bit) and well... It is much better. 🙈 Give it a try!

👉 <a class="btn btn__small" href="https://twitter.com/shanselman/status/1351315661880872962">Join the #BigMouseGang</a>

## More menubar apps

![Menubar apps](//images.ctfassets.net/f20lfrunubsq/5zUYK9dDeBaiJq4jviILAg/482892ebbd57e121554ea181c3d17b9d/Screenshot_2021-01-31_at_20.57.30.png)

Last week I shared [the MeetingBar menubar app](https://github.com/leits/MeetingBar). It shows the time left to your next meeting, and you can enter virtual meeting rooms super quickly! 

This week, I thought, why not share other menubar apps I don't want to miss.

- [BarTender](https://www.macbartender.com/) – Hide all the unimportant icons in the menubar.
- [Netlify Menubar](https://github.com/stefanjudis/netlify-menubar) – I built this. 🙈 The app shows you Netlify build status and notifies you when you're site deployed.
- [MonitorControl](https://github.com/MonitorControl/MonitorControl) – Control the sound and display of your second monitor.

**What are your favourite apps?** I always love to discover new tools!

## Firefox supports `:focus-visible` 

![Explainer video of focus-visible](//images.ctfassets.net/f20lfrunubsq/5j3PcoP52sKE02SO8REtfp/828da119aea9fe522861dce0cf1e937a/Screenshot_2021-01-31_at_20.53.32.png)

Firefox soon supports `:focus-visible`. If you want to learn more about it, I posted an explainer [#devsheet](https://twitter.com/hashtag/devsheets) on Twitter.

👉 <a class="btn btn__small" href="https://twitter.com/stefanjudis/status/1353980110668496896">Watch explainer video</a>

## How to communicate clearly

![Constantly think about audiences  A lot of communication fails because the same thing – a piece of text, or a video clip, or a presentation – is used over and over again to communicate to different audiences.](//images.ctfassets.net/f20lfrunubsq/4050jvyQHelBAdkxTWsXRS/a8491224541a12b281120bc6ef223ab2/Screenshot_2021-01-31_at_21.34.20.png)

The ability to write and communicate clearly is an essential skill when creating content online. "How to be clear" is an excellent read not only for content creators.

👉 <a class="btn btn__small" href="https://gilest.org/2021/how-to-be-clear/">Read "How to be clear"</a>

## Why you shouldn't write only "Hello"

![No hallo. Please don't say just hello in chat](//images.ctfassets.net/f20lfrunubsq/1oMSqUcXNLHFu7dKZTVSs7/13198f3eb3d0cb6d7ea9f2e5d63a5794/Screenshot_2021-01-31_at_20.27.50.png)

I love it when I find "random" sites on the internet. It's amazing that people sit down, buy domains and code websites just to make a point. 🙈 

`nohello.net` explains, why you shouldn't just write "Hello" in real-time chats.

👉 <a class="btn btn__small" href="https://nohello.net/">Check nohello.net</a>

## Complex selectors in CSS `:not()`

![DevSheet explaining complex selectors in CSS not](//images.ctfassets.net/f20lfrunubsq/4w4hrMvdpgxnDG6msgqk1U/08d5f030e2dba0298f2fc250908ceea7/Screenshot_2021-01-31_at_20.38.31.png)

Complex CSS selectors in `:not()` pseudo-classes are now supported in evergreen browsers (Chromium, Safari and Firefox). **CSS becomes more powerful every month!**

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/snippets/how-to-select-elements-that-are-not-children-of-other-elements-in-css/">Learn more about complex selectors</a>

## Don't use functions as callbacks unless they're designed for it

![Source code: // We think of: const readableNumbers = someNumbers.map(toReadableNumber); // …as being like: const readableNumbers = someNumbers.map((n) => toReadableNumber(n)); // …but it's more like: const readableNumbers = someNumbers.map((item, index, arr) =>   toReadableNumber(item, index, arr), );](//images.ctfassets.net/f20lfrunubsq/3I41G37rpJsmMdXfCINMZY/38c6ad25c31e2fb09b7f51c0e21218f3/Screenshot_2021-01-31_at_21.03.42.png)

Jake Archibald published an article about callback handling. I never realised that passing callbacks directly to native functions can break eventually. This post changed how I'll write JavaScript in the future. 

👉 <a class="btn btn__small" href="https://jakearchibald.com/2021/function-callback-risks/">Reconsider your callback code</a>

## Did native image loading become too complicated?

![Example code snippets for Image components in Eleventy, Next and Gatsby](//images.ctfassets.net/f20lfrunubsq/1G8vcSr6ZR5vXfIzIt0xly/cbdb19eec669126dfac847d3af01f6bc/Screenshot_2021-01-31_at_21.20.21.png)

A while back, [I shared a snippet of a complete `picture` element](https://www.stefanjudis.com/snippets/a-picture-element-to-load-correctly-resized-webp-images-in-html/). It covers future image formats, decoding, viewport handling, and many other things. The snippet shows that image handling is complicated in 2021!

That's why more and more frameworks started implementing user-friendly image handling to make our lives easier:

- [the Next.js Image component](https://nextjs.org/docs/api-reference/next/image)
- [the Gatsby.js Image component](https://www.gatsbyjs.com/plugins/gatsby-image/)
- [the Eleventy Image handling](https://www.11ty.dev/docs/plugins/image/)

Are powerful abstractions the future of image loading? I wonder if it's time to rethink the `img` and `picture` element.

## Blogs with week notes

![Screenshots of weekly logs](//images.ctfassets.net/f20lfrunubsq/2xbZewUFk5ANqU9xVC5On4/c5529648d989d5fd266d81420a67cef8/Screenshot_2021-01-31_at_21.53.17.png)

I started following more people that publish regular notes online. These casual notes often include links and resources that are outside of my usual bubble. Here are three blogs that I enjoy reading:

- [Matias writes about coding and what he learned during the week](https://mtsknn.fi/weekly-log/)
- [Jan shares things about his projects, board games, food and books he read](https://janmonschke.com/weeknotes/2021/04/)
- [Jim discusses articles he read](https://blog.jim-nielsen.com/2021/reading-notes-january/)

If you're posting your weekly/monthly notes online, let me know! 

## New tiny helpers

![Three new tiny helpers: Pixelr, Avataaar and SVG Crop](//images.ctfassets.net/f20lfrunubsq/6k9iyxWYc7mM9llamQEvU3/9cbbccdc7e3d6356034dedcc0ff18969/Screenshot_2021-01-31_at_20.05.33.png)

I added more tools to `tiny-helpers.dev`:

- [Pixelr](https://pixelr.art) – Turn any image into pixel art.
- [avataaars generator](https://getavataaars.com) – Create your own personal avatar.
- [SVG Crop](https://svgcrop.com) – Remove blank space from around your SVG.

👉 <a class="btn btn__small" href="https://tiny-helpers.dev/">Find more Tiny Helpers</a>

## Three useful projects to have a look at

- [whitep4nth3r/thingoftheday ](https://github.com/whitep4nth3r/thingoftheday) – A lightweight microblogging site powered by Contentful and vanilla HTML, CSS and JavaScript.
- [fontsource/fontsource](https://github.com/fontsource/fontsource) – Self-hosted Open Source fonts in neatly bundled NPM packages.
- [rgrove/parse-xml](https://github.com/rgrove/parse-xml) – A fast, safe, compliant XML parser for Node.js and browsers. 

## A quote to think about

[Wise words from Wylesha Rachell](https://twitter.com/coleturner/status/1352394781041827841). 👏

> I document purely for selfish reasons because If I'm busy, I don't want anybody to ask me questions.

## A song that makes you stop coding

![Cover: Moneybrother – They're building walls around us now](//images.ctfassets.net/f20lfrunubsq/1V4rqYNWG0uyflZCqLrhUU/5ff93cf58324015d091885535934f78a/Screenshot_2021-01-31_at_21.07.20.png)

This week, our local independent radio station played Moneybrother's "They're building walls around us". I was a huge Moneybrother fan when I moved to Berlin, and I still love this song. It's a classical indie track with lots of strings. 🎻

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

---

And that's a wrap for the fourth 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-4/). :)

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