DEV Community

Stefan Judis
Stefan Judis

Posted on • Originally published at stefanjudis.com

๐Ÿงข Stefan's Web Weekly #19

Welcome to Web Weekly #19!

Hello friends! This week was exciting. I was invited to the "Mission Control" podcast, 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. 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.

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.

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.

๐Ÿ‘‰ Read the "social contract of open source"

Why open source is about community

Matteo in front of a slide titled "Successful Open Source"

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!

๐Ÿ‘‰ Discover the importance of community

fit-content and fit-content() in CSS

Interactive widget showing how fit-content() works in CSS grid.

I wrote about the CSS width values min-content, max-content and fit-content a while ago. 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.

๐Ÿ‘‰ Learn about fit-content

How to work responsibly

Work Responsibly โ€” A collection of resources for a healthy and balanced approach to work.

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.

๐Ÿ‘‰ Work responsibly

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.

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!

๐Ÿ‘‰ Get ready for reader mode

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 โ™ฅ๏ธ"

Did you know that you can define alt text for Open Graph and Twitter cards? I learned that from Feli 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.

๐Ÿ‘‰ Define your social image alt text

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

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.

๐Ÿ‘‰ Learn about inset

A guide to ES modules in Node.js

Source code: import data from "./data.json"; // TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"

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.

๐Ÿ‘‰ Learn all about ES modules

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.

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.

๐Ÿ‘‰ Install alias-tips

๐Ÿ‘‰ See it in action

Things I could never do: mountain biking

takearidewith.me โ€“ Video of a mountain biker in front of beautiful mountains

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.

๐Ÿ‘‰ Take a ride

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

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

Katherine Peterson maintains readme.so. If you're looking for an easy-to-use Readme generator, that one's for you!

๐Ÿ‘‰ Generate your next Readme

Find more single-purpose online tools on tiny-helpers.dev

Three valuable projects to have a look at

  • ikatyang/emoji-cheat-sheet โ€“ A markdown version emoji cheat sheet.
  • google/zx โ€“ A tool for writing better scripts. (You should definitely check this one out!)
  • awslabs/git-secrets โ€“ Prevents you from committing secrets and credentials into git repositories.

A quote to think about

I read a random Reddit thread, 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

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

๐Ÿ‘‰ Listen to "Youth"

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. โ™ฅ๏ธ

If you're not a subscriber, you can change that! ๐Ÿ˜‰


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.

Top comments (0)