🧢 Stefan's Web Weekly #19 
Tags: webdev
Published: 2021-05-16 18:37:03

---
title: 🧢 Stefan's Web Weekly #19 
published: true
description: Resources on successful open source, a guide to ECMAscript modules in Node.js and fit-content in CSS. 
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-19/
---

## Welcome to Web Weekly #19!

Hello friends! This week was exciting. [I was invited to the "Mission Control" podcast](https://open.spotify.com/episode/3al6W51kNon7POshcA9xWV?si=jadf2F9-STmfmTlRjpQqMQ), but more importantly, __my tiny newsletter hit 1k subscribers__! Thank you so much for reading along! 💙

Before we jump into web stuff, are you up for something thrilling? [Look at this MacBook in danger](https://twitter.com/askipdivided/status/1380295423995301888). I'm not spoiling what happens there, but I love how random it is. 🙈

![Construction around a MacBook and a cup of coffee is almost puring over it.](https://images.ctfassets.net/f20lfrunubsq/7Jsvm88EsQiC5pZAaEkF5g/dea0bcfb5edcfb50bc1cacee748b07ba/Screenshot_2021-05-16_at_20.00.45.png)

This week's Web Weekly includes:

- resources on successful open source
- a guide to ECMAscript modules in Node.js
-  `fit-content` in CSS

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

Ready? Steady. Go!

## Don't yell at people that do open source

![Open source code is like me putting a stack of USB drives with my open source code on them on my front lawn with a sign that says "FREE", and you coming by and taking a USB drive when you want the latest copy of my open source code.](https://images.ctfassets.net/f20lfrunubsq/1mTkNAS4JIV2J83VY3sbJ7/d1b85abcf05c200a1da79a5cd5decab6/Screenshot_2021-05-10_at_22.32.05.png)

I'm not doing much open source work these days, but I used to maintain one popular open source project years ago. When you do that, it's only a matter of time until someone sneaks into your DMs to tell you how terrible you are for doing something that's not working or broke their code. Brett Cannon's article is a must-read for people interacting with maintainers on GitHub.

👉 <a class="btn btn__small" href="https://snarky.ca/the-social-contract-of-open-source/">Read the "social contract of open source"</a>

## Why open source is about community

![Matteo in front of a slide titled "Successful Open Source"](https://images.ctfassets.net/f20lfrunubsq/1xvDgrGNSyCPKG7ZHWhY9h/71d83445248aa36ee29854381b85ac14/Screenshot_2021-05-16_at_16.10.50.png)

Matteo Collina shared his failures and successes in the world of open source. Matteo highlights the importance of community for any successful open source project. If you're working on open source this talk is worth the time!

👉 <a class="btn btn__small" href="https://youtu.be/e0rdy7APH-o">Discover the importance of community</a>

## `fit-content` and `fit-content()` in CSS

![Interactive widget showing how fit-content() works in CSS grid.](https://images.ctfassets.net/f20lfrunubsq/Jvj9BIHFDSkqvw6RHV8XJ/2d473d994be4b8f9130e97a372908cd3/Screenshot_2021-05-16_at_20.01.55.png)

[I wrote about the CSS `width` values `min-content`, `max-content` and `fit-content` a while ago](https://www.stefanjudis.com/today-i-learned/a-use-case-for-css-min-content-and-max-content/). This week I learned that `fit-content()` is also available in CSS grid (notice that it's a CSS function). Peter-Paul Koch wrote about `fit-content` and `fit-content()`, and the post includes many interactive demos to visualize the concepts. 

👉 <a class="btn btn__small" href="https://www.quirksmode.org/blog/archives/2021/04/fitcontent_and.html">Learn about fit-content</a>

## How to work responsibly

![Work Responsibly — A collection of resources for a healthy and balanced approach to work.](https://images.ctfassets.net/f20lfrunubsq/5K6u9sf7QwrLQZdkxlaeIF/163e0ec2cca4e8159bc40191707a0451/Screenshot_2021-05-10_at_22.12.56.png)

Many people struggle with establishing a healthy work-life balance (myself included). `workresponsibly.org` lists many resources going from articles over videos to apps to maintain a healthy work relationship. 

👉 <a class="btn btn__small" href="https://www.workresponsibly.org/">Work responsibly</a>

## Tips for making your content work everywhere

![In order to ensure readers always get a proper reading experience, provide real content in HTML, and leave CSS pseudo-elements for decorational content that is not required for the core reading experience.](https://images.ctfassets.net/f20lfrunubsq/4s1y0h1JQmsEtlblPYMbxN/83d6a0b41d0f8c1e7cba1c3d400cae2a/Screenshot_2021-05-16_at_18.43.34.png)

The beauty of HTML and the web is that it works on a wide range of devices. Sara Soueidan explained how to make content more accessible for tools such as Safari's reader mode. Wonderful!

👉 <a class="btn btn__small" href="https://www.sarasoueidan.com/blog/tips-for-reader-modes/">Get ready for reader mode</a>

## Alternative text for social media previews

![Feli's Tweet: "TIL Open Graph Tags provide alt for images og:image:alt. Thank you @terabaud for letting me know ♥️"](https://images.ctfassets.net/f20lfrunubsq/3Uy58qYA5gaaLlhOZUOqtl/34afe922dfbba152bf1d68a7cdd61729/Screenshot_2021-05-14_at_15.33.52.png)

Did you know that you can define alt text for Open Graph and Twitter cards? [I learned that from Feli](https://twitter.com/kotzendekrabbe) and immediately implemented them on my blog. Unfortunately, I found out that defined image alternative texts don't make much of a difference on Facebook and Twitter. 

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-define-open-graph-twitter-image-alt-text-and-why-it-might-not-matter/">Define your social image alt text</a>

## `inset` is supported across all major browsers

![The logical CSS property inset slide showing that inset is a shorthand for the CSS properties top, right, bottom and left](https://images.ctfassets.net/f20lfrunubsq/WNt8SQMUydAnQT3DHUqbE/74f818a410fd721b0868d4e86c06dc6d/Screenshot_2021-05-16_at_18.27.52.png)

Starting with Safari 14.1, the new CSS property `inset` is supported by all major browsers. 🎉 `inset` is a shorthand for `top`, `right`, `bottom` and `left`. Watch a #devsheet on my blog to learn more about it.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/notes/css-inset-is-supported-across-all-major-browsers/">Learn about inset</a>

## A guide to ES modules in Node.js

![Source code: import data from "./data.json"; // TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"](https://images.ctfassets.net/f20lfrunubsq/1hL7DcaZkAatgjzFJrD5Vj/01cb133a9ae079e1d2043ac47b9b4049/Screenshot_2021-05-16_at_16.04.13.png)

Pawel Grzybek wrote an excellent guide on ES modules in Node.js. He covers all you need to know, and I learned that you can not "just" import JSON files in ES modules.

👉 <a class="btn btn__small" href="https://pawelgrzybek.com/all-you-need-to-know-to-move-from-commonjs-to-ecmascript-modules-esm-in-node-js/">Learn all about ES modules</a>

## Start using all these aliases you once set up

![Terminal session in which the aliases-tips ZSH plugin prints that there is a defined alias to run a particular command.](https://images.ctfassets.net/f20lfrunubsq/13JhWKlTrkapofqPydhT7a/cd884dde7fddabc2345782298435dde4/Screenshot_2021-05-16_at_20.33.20.png)

How many aliases do you have defined in your dotfiles? I have quite a few. And how many are you using? For me, it's only a hand full. 

The ZSH plugin `alias-tips` helps you to save some keystrokes by telling you when the command you ran is available as a short alias.

👉 <a class="btn btn__small" href="https://github.com/djui/alias-tips">Install alias-tips</a>

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/notes/how-to-start-using-all-the-aliases-you-set-up-and-forgot/">See it in action</a>

## Things I could never do: mountain biking

![takearidewith.me – Video of a mountain biker in front of beautiful mountains](https://images.ctfassets.net/f20lfrunubsq/uXOqrtpuwMVqWzUxXqt4w/a317532eff5a820e853262b7ea716fcf/Screenshot_2021-05-16_at_17.19.03__2_.png)

You might have noticed that I'm always looking for things that I can place on my second monitor. And while the videos on `takearidewith.me` (I love the domain) are too thrilling for that, I spent a lot of time watching the mountain bikers going down endless trails.

👉 <a class="btn btn__small" href="https://www.takearidewith.me/rides/ride-6">Take a ride</a>

## Reader shout out 💙

![Tweet from Jochem: @stefanjudis  hi Stefan! Random appreciation tweet coming your way; I’ve subscribed to your RSS a while back and find myself reading every word you publish. My favorite is the Web Weekly, I check every link cause it matches 10/10 to my interests. Thanks and have a great weekend Folded hands](https://images.ctfassets.net/f20lfrunubsq/28YrPHVuKPP9rB7Y4Jluge/7910ce70ab4d9ea0d2b62d5db4bf61aa/Screenshot_2021-05-16_at_18.55.51.png)

I love the idea of "appreciation tweets". Jochem sneaked into my notification with the tweet above. 

If you have a moment, let all the fantastic content creators out there know that you appreciate what they're doing. I promise you, you'll make their day!

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

## A new Tiny Helper

![The easiest way to create aREADME – Our simple editor allows you to quickly add and customize all the sections you need for your project's readme](https://images.ctfassets.net/f20lfrunubsq/5EtgJ2fp0o7MDVYQh43N7h/82076bb8b380439e7198664520ba879d/Screenshot_2021-05-16_at_19.01.39.png)

[Katherine Peterson](https://katherinempeterson.com/) maintains `readme.so`. If you're looking for an easy-to-use Readme generator, that one's for you!

👉 <a class="btn btn__small" href="https://readme.so/">Generate your next Readme</a>

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

## Three valuable projects to have a look at 

- [ikatyang/emoji-cheat-sheet](https://github.com/ikatyang/emoji-cheat-sheet) – A markdown version emoji cheat sheet.
- [google/zx](https://github.com/google/zx) –  A tool for writing better scripts. (**You should definitely check this one out!**) 
- [awslabs/git-secrets](https://github.com/awslabs/git-secrets) – Prevents you from committing secrets and credentials into git repositories.

## A quote to think about

I read [a random Reddit thread](https://www.reddit.com/r/AskReddit/comments/aiv6l6/what_is_the_most_effective_psychological_trick/eeraxui/?context=3&utm_medium=web2x&utm_source=reddit), and the following advice is excellent when you're working in a team!

> Saying "You're right!" instead of "I know." makes you look less like an assh*** and doesn't diminish something someone else may have just found out.

## A song that makes you stop coding

![Music video screenshot: Daughter - Youth](https://images.ctfassets.net/f20lfrunubsq/LHUpJL9ZylHgDJjWbn8LM/9948ac87b2969fe55e382fb9553df771/Screenshot_2021-05-16_at_19.15.08.png)

Daughter's "Youth" entered my playlists this week. Elena Tonra's voice is just beautiful in this old indie track.

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

## Thank you for reading!

And that's a wrap for the nineteenth 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&url=https://www.stefanjudis.com/blog/web-weekly-19/).
- 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/).