🧢 Stefan's Web Weekly #27
Tags: webdev
Published: 2021-07-11 15:08:10

---
title: 🧢 Stefan's Web Weekly #27
published: true
description: A guide to accessible components, new CSS viewport units and unnecessary browser functionalities.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-27/
---

## Welcome to Web Weekly #27!

Ciao, friends!

I'm back from my vacation! It was full of tours on "shitty bikes" and long walks in Amsterdam. I really like the vibe of the city! It was perfect trip to relax and decompress. And in the meantime I got my first vaccine shot, too! Normality is approaching! 🎉

Before we jump into web stuff, [let me share some wisdom I saw on Twitter](https://twitter.com/WholesomeMeme/status/1409889403191894021?s=20).

!["Some stranger somewhere remembers you because you were kind to them" written on a sign with chalk](https://images.contentful.com/f20lfrunubsq/2xjGKRNY9XxOutg1dueh2I/b9e10d46d4f522b7912dcdf4968e7250/Screen_Shot_2021-07-11_at_15.54.08.png)

This week's Web Weekly includes:

- an extensive guide to accessible components
- new CSS viewport units
- maybe unnecessary browser functionalities

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

Ready? Steady. Go!

## Feedback for better native elements

![Visualisation of a viewport boundary showing a custom select box](https://images.contentful.com/f20lfrunubsq/38I9tQBZqaeq0rmb9C3t9C/1cdf4ebbd402403a19718dc15151342b/Screen_Shot_2021-07-11_at_15.30.16.png)

Wouldn't it be great if we could style `select` elements? Astonishingly, there's still no easy way to do that without reimplementing an entire component. But there's movement, and Melanie Richards asks for feedback on ongoing proposals such as the `popup` element and anchored positioning in CSS.

👉 <a class="btn btn__small" href="https://melanie-richards.com/blog/anchor-pos-use-cases/">Give feedback</a>

## All the things browsers can do today

![The web browser I'm dreaming of – Mon 17 May 2021](https://images.contentful.com/f20lfrunubsq/4dOKvnQahMtX4TZRotUreW/8a396772bb10436c543cca0e025cd64e/Screen_Shot_2021-07-11_at_13.42.19.png)

The initial purpose of the web was to access and view documents. That's a long time ago. Julien Voisin wrote a somewhat snarky piece on essential browser features and potentially unnecessary browser functionality. While I don't think everything is as useless as Julien describes, the blog post provides a valuable overview of what's possible with the web today.

👉 <a class="btn btn__small" href="https://dustri.org/b/the-web-browser-im-dreaming-of.html">Learn about browser features</a>

## Scan your lego pieces and get instructions on new things to build

![Screenshot of the Brickit app showing scanned lego pieces that result in building instructions](https://images.contentful.com/f20lfrunubsq/5gbANn3bQvJf83F5rl24fE/6cbf65b974d8d277d82f12eeec2d1025/Screen_Shot_2021-07-11_at_13.56.30.png)

[Brickit](https://apps.apple.com/us/app/brickit-rebuild-your-lego/id1477221636) is an iPhone app that scans all your LEGO pieces and generates instructions to build new things with all your pieces. I'm not a LEGO person, but if that works as promised, that'd be really cool.

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=Z2etwJpiuvw">See Brickit in action</a>

## Another Mac setup guide

![My 2021 Mac Setup](https://images.contentful.com/f20lfrunubsq/VHSriMkePugs9rSV3GT89/ffc64341a7c4f614177058c3abca9dd8/Screen_Shot_2021-07-11_at_14.21.05.png)

Swyx shared and updated his Mac setup guide. I love reading these lists to learn more about what other people use. Unfortunately, Swyx' setup is not automated (there are few things more satisfying than setting up a new computer by running a script), but there are many good things in the guide!

👉 <a class="btn btn__small" href="https://www.swyx.io/new-mac-setup-2021/">Find new tools</a>

*(If you wonder how to automate VS Code extension handling, [I have a post about that on my blog, too](https://www.stefanjudis.com/snippets/a-vs-code-extensions-manifest/))*

## A global `$` command to run copied commands

![Terminal command: $ echo "hello world"](https://images.ctfassets.net/f20lfrunubsq/3838kYG1QbxzBHNAszJnFO/6d294a79248e70bde7ddfb65983c444f/Screen_Shot_2021-07-10_at_21.36.31.png)

While going over Swyx' setup, I discovered that [he's using the undollar npm CLI package](https://www.npmjs.com/package/undollar). The package's purpose is "to eat" leading dollar signs so that you can run copied commands easier.

Using a third-party package or even Node.js is too much used technology for such a simple feature. I shared how you can implement a `$` command with two lines of shell scripting.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/blog/how-to-run-commands-with-a-leading-usd-sign/">Add a dollar command</a>

## How process leads to improvement

![A better way to solve problems and make consistent progress is to build a workable or healthy system for the many areas of your life.](https://images.contentful.com/f20lfrunubsq/55wmpvT1LYbQRvc6StPjQ6/cf0be4a7a6f851b416aacb6756bdea77/Screen_Shot_2021-07-11_at_15.11.34.png)

My habit game is not very strong these days, but I'm still convinced that healthy habits and structure lead to a better life. Thomas Oppong shared how processes lead to progress.

👉 <a class="btn btn__small" href="https://medium.com/personal-growth/how-systems-thinking-can-simplify-your-life-1bf4808d8741">Establish life processes</a>

## Will we get new viewport units?

![Comparison of two different viewport units. 100vh showing the complete height of an iphone display whereas 100svh subtracts the control bar](https://images.contentful.com/f20lfrunubsq/3mBJ4bAPHKi4A6HlhKTI7A/2e18a5c7ef5f52aa72e3f2453e0cc7d1/Screen_Shot_2021-07-11_at_14.44.35.png)

I haven't heard of small, large and dynamic viewports before, but apparently, there's [a new proposal aiming to clean up the messy viewport unit handling on its way](https://drafts.csswg.org/css-values-4/#viewport-percentage-lengths). Bramus had a look and explained what units such as `svh` and `dvh` can do.

👉 <a class="btn btn__small" href="https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/">Learn about dynamic viewport units</a>

## Thoughts on averages

![80% of participants thing they're smarter than average.](https://images.contentful.com/f20lfrunubsq/4TFhr953cSIZMZWzWkBiF6/d4b5014cfd8a7b99e516a6ff5eb4c804/Screen_Shot_2021-07-11_at_15.04.04.png)

I played around with `thanaverage.xyz` a reasonable amount of time. It's a fun little site with lots of moving "wibbly wobbly blobs".

It asks you simple YES/NO questions. The catch: it shows you the average of other peoples' answers. It's fascinating that 78% of the people think that they have fewer friends than the average.

👉 <a class="btn btn__small" href="https://thanaverage.xyz/">Check if you're average</a>

## Is `npm audit` broken?

![The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling.](https://images.contentful.com/f20lfrunubsq/1Xnr8JT2b1KU5xOLeGSVhK/36b3443be9bb6df66f24c1eac23fba65/Screen_Shot_2021-07-11_at_13.45.30.png)

You might have noticed that whenever you run `npm install` today, npm greets you with a scary "You're project is vulnerable!" message. I just ran it for my website, and that's the prompt I see.

```
found 9 vulnerabilities (1 low, 1 moderate, 7 high)
```

Seven high vulnerabilities? Holy moly – I should drop everything I'm doing and fix these right away! But wait, it's a static site built on my local machine or Netlify's servers. Is it really that urgent? Should I care about these at all? 

Dan Abramov shared his opinion on `npm audit`, and I agree, the way `npm audit` works today is indeed broken.

👉 <a class="btn btn__small" href="https://overreacted.io/npm-audit-broken-by-design/">Reconsinder npm audit</a>

## 🔖 An extensive list of accessible components

![In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. ](https://images.contentful.com/f20lfrunubsq/5FF4f2lFIWD6DbI0R08Rj4/31fabc55f096163d183a40d7806bf054/Screen_Shot_2021-07-11_at_14.01.37.png)

One for the bookmarks; if you're looking for patterns to build accessible frontend components, Vitaly Friedman from Smashing Magazine published a massive article collecting hundreds of resources (I didn't count 🙈)! 

👉 <a class="btn btn__small" href="https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/">Build an accessible web</a>

## Open source shout out 💙

![Web vitals react hook. Bring web vitals quickly into your react project](https://images.contentful.com/f20lfrunubsq/6yT3NAz53JuDlk0zdFmQe8/a0285212c7dc0a743ccd68662a47ee6f/Screen_Shot_2021-07-11_at_15.59.42.png)

If you visited my blog, you might have seen that [I show the site's web vitals in the footer](https://www.stefanjudis.com/#web-vitals).  Nils Schönwald took [my `web-vitals` custom element](https://github.com/stefanjudis/web-vitals-element) and ported it to React. Great work!

👉 <a class="btn btn__small" href="https://github.com/schoenwaldnils/web-vitals-react-hook">Show Web Vitals in your React project</a>

## Three valuable projects to have a look at 

- [mongodb-js/boxednode](https://github.com/mongodb-js/boxednode) – Ship a JS file with Node.js in a box.
- [nosarthur/gita](https://github.com/nosarthur/gita) – Manage many git repos with sanity.
- [ripienaar/free-for-dev](https://github.com/ripienaar/free-for-dev) – A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev.

## A new Tiny Helper

![SVG Favicon Generator Favicon for the modern web 🤟  Why you should use a SVG favicon generator instead of the SVG icon you already have: Embed two versions of your icon, for light and dark themes; See how your icon looks like, in browser tabs and Google result pages; Add contrast in seconds](https://images.contentful.com/f20lfrunubsq/4AWmk1IW2Smq7nCkduuht6/1b89e81b0ce19b340600ced0235bb805/Screen_Shot_2021-07-11_at_15.45.48.png)

You probably know about the [RealFaviconGenerator](https://realfavicongenerator.net/). This week I discovered that the site also includes a tool to generate SVG Favicons. 😲

👉 <a class="btn btn__small" href="https://realfavicongenerator.net/svg-favicon/">Generate SVG Favicons</a>

*Find more single-purpose online tools on [tiny-helpers.dev](https://tiny-helpers.dev/)*

## A quote to think about

Chris Coyier is turning 41 soon and [he published a list of lessons learned in 40 years](https://chriscoyier.net/2021/06/04/40-for-40/). The post includes this week's quote.

> Every decision we make, big and small, short-term and long-term, is an effort to improve our mood.

## ~~A song~~ Sets that makes you stop coding

![Chris Luno dj'ing in front of a background that looks like Mars](https://images.contentful.com/f20lfrunubsq/6FkK89b0Qg7njU0UXQymKT/2266bb693aca56cf7210557cca0bc4d6/Screen_Shot_2021-07-11_at_15.39.33.png)

I discovered Chris Luno recently. Almost every week, he publishes a house DJ set standing in front of a beautiful location. I really like his style!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=im2DetQWs24">Listen to "Deep house from Mars"</a>

## Thank you for reading!

And that's a wrap for the twenty-seventh 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-27/).
- 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/).