🧢 Stefan's Web Weekly #7
Tags: webdev
Published: 2021-02-21 21:43:57

---
title: 🧢 Stefan's Web Weekly #7
published: true
description: DevTools tricks, the power of storytelling and metaphors, strict Node.js versions and bar sounds.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-7/
series: Web Weekly
---

## Welcome to Web Weekly #7

I hope you're all safe and sound! From my side, nothing major happened this week, and the biggest highlight was that I learned there is a 🪤 emoji (that's a mousetrap). 🙈

This week's web weekly includes DevTools tricks, the power of storytelling and metaphors, strict Node.js versions, and, as always, GitHub repositories, new Tiny Helpers and some music.

Shall we? Let's do it!

## DevTools productivity tips

![Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)](//images.ctfassets.net/f20lfrunubsq/3HPL8WwsuSKl7UN3oYy4ib/373ff4abf6865e156936e15fd416b1b5/Screenshot_2021-02-21_at_20.05.28.png)

Vitaly from Smashing Magazine published an extensive article on tips and shortcuts in the browser developer tools. It covers Chrome, Edge and Firefox. It's full of tricks and worth a read!

👉 <a class="btn btn__small" href="https://www.smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/">Learn all about DevTools shortcuts</a>

## How you tell a story is as important as the story itself

![From "Draw the box smaller": a Dramatic reenactment of the revised new way diagram.](//images.ctfassets.net/f20lfrunubsq/CQ6UYggqdJ1R66A4LmGQQ/7d35bc163293c01af089ffc893e3deb6/Screenshot_2021-02-21_at_20.11.04.png)

It doesn't matter if you're giving a presentation, writing an article, or are having a conversation. If you want to make your point clear (and maybe convince someone), it's all about how you convey your message and what metaphors you use. Jason Lengstorf wrote an excellent article on how he first failed but later convinced his team to use new software.

👉 <a class="btn btn__small" href="https://www.jason.af/draw-the-box-smaller">Read "Draw the Box Smaller"</a>

## A digital decline letter

![Chris Coyier's decline letter making clear that he's not offering things without compensation](//images.ctfassets.net/f20lfrunubsq/2Ayx5xcYuJCiJBZ0JhIRmI/75bf3d18dfd27614194c652512310ef9/Screenshot_2021-02-21_at_21.16.18.png)

A while ago, I discovered that Chris Coyier from CSS-Tricks has a side blog – "Email is good". On this blog, he shares his thoughts on emails and communication in general. [He recently shared his thoughts on nohello.net](https://www.stefanjudis.com/blog/web-weekly-4/) (I included it in [Web Weekly #4](https://www.stefanjudis.com/blog/web-weekly-4/)) and also came up with the idea of a digital decline letter to respond to emails.

👉 <a class="btn btn__small" href="https://email-is-good.com/2021/02/15/2656/">Write your decline letter</a>

## Tools for responsive web design

![Screenshot of responsively showing a website in multiple device sizes](//images.ctfassets.net/f20lfrunubsq/2UK07EweC7ZrYl85SEGXL0/739023c274af2e32160b0095d35fd813/Screenshot_2021-02-21_at_21.18.49.png)

It feels like we're entering a phase of new tools for web development. Products such as [Polypane](https://polypane.app/) and [Sizzy](https://sizzy.co/) are browsers built to make responsive web development more straightforward. This week I learned about Responsively, and the browser extension looks like a massive help when building responsive websites.

👉 <a class="btn btn__small" href="https://responsively.app/">Try out Responsively</a>

## Making password fields be friends with password managers

![Making password managers play ball with your login form ](//images.ctfassets.net/f20lfrunubsq/1Rf8iJ3335BS0unRtb4mi0/14930417ee3c0a875df9312de2202caf/Screenshot_2021-02-21_at_21.39.18.png)

If you're using a password manager (and I hope you do), you might have noticed that sometimes password fields are not detected and aren't filled out. I came across Hidde de Vries' article on the topic. It explains how to build great password fields.

👉 <a class="btn btn__small" href="https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form">Make your password fields go well with managers</a>

## Minimal snippets for modern CSS layouts and components

![Example from smolcss showing a sidebar layout](//images.ctfassets.net/f20lfrunubsq/1oOwRGAGOKpHU311w0t8dz/49222a2d76f7dce929a8edd32d2a887e/Screenshot_2021-02-21_at_21.37.35.png)

Stephanie Eckles maintains a site including small CSS snippets for everyday problems. Great work!

👉 <a class="btn btn__small" href="https://smolcss.dev/">Check SmollCSS</a>

## What are your domain sins?

![Twitter wes bos: What are the best/dumbest domains that you are holding onto?](//images.ctfassets.net/f20lfrunubsq/2YfX1NIdbRmlmBfBTjtYfH/a6d6ea75a7c55732b77f29d796da6a2d/Screenshot_2021-02-21_at_21.08.24.png)

Wes Bos' Twitter thread made me smile. Developers have a well-known low barrier when it comes to buying domains. I'm still proud that I own `my-links.online` for sharing URLs. Have fun reading all these beautiful domain purchases.

👉 <a class="btn btn__small" href="https://twitter.com/wesbos/status/1362767382234677248">See all these creative domains</a>

## Why you should not open spam emails

![Why you should never hit 'unsubscribe' on an illegal spam email ](//images.ctfassets.net/f20lfrunubsq/4FATjd8q5bsrtXXXLuHbKH/13940f7e984119fd3da9a455b6dc5a95/Screenshot_2021-02-21_at_21.04.18.png)

I don't get much spam, and if I do, I'm super quick with hitting the spam button. I never realised, though, that opening a spam email already confirms that a person monitors it. I'll be even quicker with the spam button in the future.

👉 <a class="btn btn__small" href="https://www.good.is/why-you-should-never-hit-unsubscribe-on-an-illegal-spam-email">Stop opening spam</a>

## Developers building tools

![Yokels GitHub profile showing all their tools](//images.ctfassets.net/f20lfrunubsq/19XOnnWn5iKekYNpyJWOYV/31cb45b890808b0ee403581224fc19bd/Screenshot_2021-02-21_at_21.33.17.png)

While maintaining Tiny Helpers, I didn't notice that many included tools are from one developer – Yoksel. I love that we, as developers, can sit down and build the tools we need. I ♥️ computers!

👉 <a class="btn btn__small" href="https://github.com/yoksel">Have a look at Yoksel's tools</a>

## A collection of beautiful link hover styles

![Examples of beautiful hover styles](//images.ctfassets.net/f20lfrunubsq/79Bf2IXgTdtHTZkzjeUikX/5176d15b8e6f6eacdbaa71954a92ddd7/Screenshot_2021-02-21_at_21.02.03.png)

You might know [the Codrops blog](https://tympanus.net/codrops/). I always loved their collections of beautiful and creative Frontend examples. This week I came across a collection of hover styles and adjusted my blog navigation.

👉 <a class="btn btn__small" href="https://tympanus.net/Development/LineHoverStyles/">Hover all the links</a>

## Enforce a correct Node.js version in your projects

![A cli log of a failed npm install due to Node.js version mismatch](//images.ctfassets.net/f20lfrunubsq/4cXGUElkbhNgXVAQAWfA1B/9f03d4de9525386b00a03e05e4ab51a1/Screenshot_2021-02-21_at_20.46.18.png)

This week I did some housekeeping and updated an article describing how to prevent people from running `npm install` in your project when they're not running the correct Node.js version. 

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/prevent-npm-install-for-not-supported-node-js-versions/">Restrict your Node.js versions</a>

## Log objects and stack traces with `console.trace`

![Example showing console.trace to log objects and stack traces](//images.ctfassets.net/f20lfrunubsq/EYRQ5aeGfBA4AUrFCFO5q/57d765b87679ef69311f9fb93db55714/Screenshot_2021-02-21_at_21.45.32.png)

This week I learned that you could use `console.trace` to log out stack traces and(!) objects.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-log-javascript-stack-traces-using-console-trace/">See console.trace in action</a>

## Quality settings of the new Avif format

![If you usually encode JPEGs with quality setting 60, then encode AVIF with quality setting 50 and WebP with quality setting 65. You should expect your AVIF files to be on average 36% smaller and your WebP images 15% smaller than the equivalent JPEG image.](//images.ctfassets.net/f20lfrunubsq/4AIPjCS8OpaVSIUPbhj1Uv/a21412ba2b6bcfb9b0dcd3f283c4f49f/Screenshot_2021-02-21_at_21.42.54.png)

You probably know that I'm excited about the new Avif image and video format. Malte Ubl shared some guidance on how to approach the quality levels when converting images into different formats.

👉 <a class="btn btn__small" href="https://www.industrialempathy.com/posts/avif-webp-quality-settings/">Learn about Avif quality settings</a>

## If you're missing your favourite bar...

![Screenshot of imissmybar showing some noise faders](//images.ctfassets.net/f20lfrunubsq/5k7GGiFNvWS13biu8HQBjV/010e1e7f9e8394c8faf33e91ee3973ad/Screenshot_2021-02-21_at_21.24.14.png)

Today I listened to this playlist paired with bar noises while reading some articles. I have to admit that I miss the chatters and sounds of people enjoying a good night out.

👉 <a class="btn btn__small" href="http://imissmybar.com/">Get some bar feelings</a>

## New tiny helpers

![Screenshots of Ray.so, GraphQL Voyager and online gif tools](//images.ctfassets.net/f20lfrunubsq/3UcJqNQhP2ngMZkKTPgFH6/27e08a42aa24d8d2daf8b0645bd56288/Screenshot_2021-02-21_at_21.55.40.png)

- [Ray.so](https://ray.so/) – Create and share beautiful images of your source code.
- [Online gif tools](https://onlinegiftools.com/) – Create, edit and convert GIFs.
- [GraphQL Voyager](https://apis.guru/graphql-voyager/?ref=tiny-helpers) – Represent any GraphQL API as an interactive graph.

## Three useful projects to have a look at 

- [postui/esm.sh](https://github.com/postui/esm.sh) – A fast, global content delivery network for ES Modules. 
- [google/eleventy-high-performance-blog](https://github.com/google/eleventy-high-performance-blog) – A high-performance blog template for the 11ty static site generator.
- [malgamves/CommunityWriterPrograms](https://github.com/malgamves/CommunityWriterPrograms) – A list of Developer Community Writer Programs.

## A quote to think about

I found this week's quote in Austin Kleon's article ["Pointing at things"](https://austinkleon.com/2021/02/16/pointing-at-things/). Austin included [a quote from Robin Rendle](https://buttondown.email/robinrendle/archive/connections/), who you might know from CSS-Tricks.

> Blogging is pointing at things and falling in love.

## A song that makes you stop coding

![Screenshot of "SBTRKT - Pharaohs ft. Roses Gabor"](//images.ctfassets.net/f20lfrunubsq/SXqkVbr9aeGDVjlsPfPDo/90f7da38a76855dc88f4b88c2c02861d/Screenshot_2021-02-21_at_22.01.45.png)

SBTRKT's funky electro track with a great singers voice made me bounce around this week.

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

---

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

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