🧢 Stefan's Web Weekly #20
Tags: webdev
Published: 2021-05-24 08:39:30

---
title: 🧢 Stefan's Web Weekly #20
published: true
description: Free live-captions, Node.js running in the browser and Puppeteer scripts 
tags: webdev
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.stefanjudis.com/blog/web-weekly-20/
---

## Welcome to Web Weekly #20!

Hello friends! Do you remember last week? I was so proud of sending this tiny newsletter to 1000 people for the first time. In the previous seven days, 200 more people signed up. 😲 I'm so grateful and excited to have you all read along! __A big welcome to all the new subscribers!__

Before we jump into web stuff, let me share what with you made me laugh this week. Check out [this URL lengthener](https://aaa.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com/) (yes, you read that right!): the idea, the URL, the wording... I love everything about this random project. 🙈

![Are you tired of your URLs being just too darn short? Worry no further, as aaa.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com has got your back. No need to be anxious about people thinking the size of your URL is too small, as it will guaranteed be the largest one around. So what are you waiting for? Give it a go!](https://images.ctfassets.net/f20lfrunubsq/2J0rbrIzrSKNDzMi6qb0H8/c150d33fcebc5c9b258d42ba503ffaa8/Screenshot_2021-05-24_at_09.14.34.png)

This week's Web Weekly includes:

- a free live-caption service
- automation with Puppeteer
- Node.js running natively in the browser

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

Ready? Steady. Go!

## A tool to find the RSS feeds of the people you follow on Twitter

![Discover feeds of your followings – Login with twitter to show URLs and feeds](https://images.ctfassets.net/f20lfrunubsq/2hx6f1l5Bs8biDsq9cbQ1X/06ae80a22659a89be1da3198a63b99e5/Screenshot_2021-05-23_at_18.37.21.png)

[It looks like Google is considering bringing RSS support into Google Chrome](https://blog.chromium.org/2021/05/an-experiment-in-helping-users-and-web.html). RSS is the perfect technology to stay up to date with new resources created by the people you like. You can discover things on your own time without relying on some algorithm tricking you into doing something. 

Luca Hammer wrote a tool to export RSS feeds based on the people you follow on Twitter. Wonderful!

👉 <a class="btn btn__small" href="https://opml.glitch.me/">Use RSS instead of Twitter</a>

## On the topic of privilege

![Cover slide of the talk "Lending privilige"](https://images.ctfassets.net/f20lfrunubsq/5b3OwtqGnS4Rb0iTuIHWVW/a93eb33eb104517beff3dec47ef697ab/Screenshot_2021-05-24_at_08.32.19.png)

I am a white cis guy working in tech. I have a lot of privilege. I have privilege I don't even realize I have. Anjuan Simmons' explains how lending privilege to others leads to a fairer, better, and friendlier world. I recommend watching it.

👉 <a class="btn btn__small" href="https://anjuansimmons.com/talks/lending-privilege/">Watch "Lending Privilege"</a>

## Live-captioning in your browser

![webcaptioner.com showing an example sentence](https://images.ctfassets.net/f20lfrunubsq/4apZhEyM19n3BElWTOdPXT/1e8d2af4f76faac8efc5d3754173f008/Screenshot_2021-05-24_at_08.24.22.png)

I found out about `webcaptioner.com` this week. The site creates captions right in your browser window and it's impressive! Unfortunately, it's also Chrome-only. :/ I still will give it a try for my future live online activities, though.

👉 <a class="btn btn__small" href="https://webcaptioner.com/captioner">Try out Web Captioner</a>

## Plans to get rid of the `user-agent` string

![const isMobile = navigator.userAgentData.mobile;](https://images.ctfassets.net/f20lfrunubsq/5L9JmvIDOYXtavacZf39GS/f5389c99081dd16a0460ac258e3bd5df/Screenshot_2021-05-22_at_13.28.45.png)

It's been a while since the Chrome folks started talking about their plans to deprecate the `user-agent` header so that everybody forgot about it. But now there seems to be some movement! Rowan Merewood explains their motivation and the proposed solution – User-Agent client hints.

What's worrying is that [according to chromestatus.com](https://www.chromestatus.com/feature/5995832180473856) only Chromium browsers are open for that change. Let's see where this goes!

👉 <a class="btn btn__small" href="https://web.dev/migrate-to-ua-ch/">Learn about User-Agent client hints</a>

## Automate and monitor all the things with Puppeteer

![Generate a Lighthouse report for a URL and output it to a local HTML file. For more details, see the official guide to using Puppeteer with Lighthouse.](https://images.ctfassets.net/f20lfrunubsq/2SybRyOU5aYgiyqcPjbpXd/783e69646db3994c566f22aae6e2f12d/Screenshot_2021-05-22_at_13.44.24.png)

One for the bookmarks: A year ago, Addy Osmani published 20 Puppeteer (a Node.js library to control Headless Chrome) scripts for tasks such as Lighthouse report generation or filmstrip generation. This handy post helps you level up your automation game!

👉 <a class="btn btn__small" href="https://addyosmani.com/blog/puppeteer-recipes/">Automate all the things!</a>

## Workshops from my lovely friends at Smashing

![Online workshops from Smashing Conference](https://images.ctfassets.net/f20lfrunubsq/1oEEEnJjpinZh2rCYQbnCx/ae903f6f09bf36cd13850df6dcf82e26/Screenshot_2021-05-23_at_18.46.57.png)

Since starting web development, I’m a big fan of Smashing Magazine! They publish countless resources, and I learned so many things thanks to Smashing! There are many Smashing Books on my bookshelf. 🙈

Smashing runs online workshops with Frontend experts such as Brad Frost on Design Systems, Stephanie Eckles covering Modern CSS and Vitaly Friedman ([find all workshops online](https://smashingconf.com/online-workshops/workshops)). The workshops are broken into 2.5h long live sessions, span across weeks, and you can directly ask all your questions.

And the best thing; they sent me a friendly link to share with you to save $50 on all workshops! Have fun!

👉 <a class="btn btn__small" href="https://ti.to/smashingmagazine/online-workshops/discount/smashingloveswebweekly">Use the friendly link</a>

## Holy moly! Will we run Node.js in the browser soon?

![Again, these environments are not running on remote servers. Instead, each environment is completely contained within your web browser. That’s right: the Node.js runtime itself is running natively, inside the browser, for the first time ever.](https://images.ctfassets.net/f20lfrunubsq/xcAp1esG9Jj7E777a1a3O/2aa532aebfb337236cf584b833aa3810/Screenshot_2021-05-23_at_18.50.35.png)

Online editors leveled up big times over the last few years. I started with [CodePen](https://codepen.io/) years ago, and I occasionally use [CodeSandbox](https://codesandbox.io/) these days. But honestly, I still stick to my local machine for most of my development work. It just feels "better".

The online editor StackBlitz released a new feature called "WebContainers". WebContainers allow you to run Node.js in the browser using WebAssembly. 🤯 And if these containers hold StackBlitz' promise, we're about to enter a new era of fast online editors that even work offline.

👉 <a class="btn btn__small" href="https://blog.stackblitz.com/posts/introducing-webcontainers/">Learn about WebContainers</a>

## I wrote a shell auto-completion function! 💪

![dev command with auto-completion](https://images.ctfassets.net/f20lfrunubsq/2bdAR4KI5oz1n9E0cAYKO7/5cfbdae7d588edb830abfbe6f95054e4/Screenshot_2021-05-24_at_07.09.55.png)

I went down the deep rabbit hole of shell scripting this week – my mission: a new `dev` command. The command should navigate me into a project directory, run `npm run dev`, and open VS Code. 

The tricky part: I wanted it to support auto-completion. It took a while, but I succeeded. 🙈

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/snippets/a-custom-dev-command-with-auto-completion/">Auto-complete all the things</a>

## DOM events visualized

![Dom events visualised interface](https://images.ctfassets.net/f20lfrunubsq/2KbeQhV1RdwomY8APVtpdq/c2add6d2b1d028d492e8297ca9aae0fd/Screenshot_2021-05-24_at_07.22.17.png)

JavaScript events seem to be "easy" at first sight. I still remember my confusion when I realized how much functionality is included when using a "simple" `onClick`.  It took me ages to understand the event `capture` phase. Alex Reardon builds `domevents.dev`; it's a fantastic resource to visualize and explain DOM events. Well done, Alex!

👉 <a class="btn btn__small" href="https://domevents.dev/">Visualize DOM events</a>

## New web features need clear migration paths

![Feature detection support table](https://images.ctfassets.net/f20lfrunubsq/1ROBTWL5abfwkmfqIJ3jGi/5b7206db103b85e71ba7c98acf4f9d2e/Screenshot_2021-05-24_at_07.29.30.png)

I still can't believe that we might be able to [use container queries eventually](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries). Miriam Suzanne wrote an insightful article that doesn't describe the functionality of new feature but takes a look at what it will take to start using container queries. 

It's an excellent article on progressive enhancement, feature queries and approaches to evolve the web.

👉 <a class="btn btn__small" href="https://www.oddbird.net/2021/05/14/support-unknown/">Learn about feature queries</a>

## Reader shout out 💙

![Aman's Blog – Curated list of Newsletters to level up your coding skills](https://images.ctfassets.net/f20lfrunubsq/1xqeuB7YMBniFU8byIe5XL/08017fafeec1dbae420030272f302abf/Screenshot_2021-05-16_at_20.58.53.png)

Amandeep Singh published [an extensive list of web development newsletters that help you level up your coding skills](https://www.amanexplains.com/a-list-of-newsletter-subscriptions-to-level-up-your-coding-skills/). I'm honored that Web Weekly is listed next to these famous publications. 😊

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

## A new Tiny Helper

![Open source illustration kit – Designed 100 awesome illustrations during 100 days of illustration challenge (Now added more than 120+ illustrations). You can download all illustrations completely free and use these to design awesome - landing pages, mobile app or presentations.](https://images.ctfassets.net/f20lfrunubsq/537MCVEU6Yzx5gUHRXIA5j/755b52c1e66b786b3b0696c1d797eeba/Screenshot_2021-05-24_at_07.50.21.png)

[Vijay verma](https://vijayverma.co/) published `illustrations.co`. The site offers gorgeous illustrations to download for free. 

👉 <a class="btn btn__small" href="https://illlustrations.co/">Find illustrations for your next project</a>

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

## Three valuable projects to have a look at 

- [JanVanRyswyck/awesome-talks](https://github.com/JanVanRyswyck/awesome-talks) – Awesome online talks and screencasts.
- [BurntSushi/ripgrep](https://github.com/BurntSushi/ripgrep) – `ripgrep` recursively searches directories for a regex pattern while respecting your gitignore
- [schappim/macOCR](https://github.com/schappim/macOCR) – Get any text on your screen into your clipboard. 

## A quote to think about

[This week's quote from Jakob Cosoroabă](https://twitter.com/jcsrb/status/1392459191353286656) is not completely serious but highlights the importance of good documentation. 🙈 

> 6 hours of debugging can save you 5 minutes of reading documentation.

## A song that makes you stop coding

![Music video screenshot: The Kooks - Sofa Song](https://images.ctfassets.net/f20lfrunubsq/49LhQNaKR07MfM2uTz4knF/0eead624eddc1f06b5099506f3944e2f/Screenshot_2021-05-24_at_08.07.07.png)

I discovered [a new indie classic playlist on Spotify](https://open.spotify.com/playlist/37i9dQZF1DWYJeWl6ior4d?si=cb20f3c674234490). It is so good! I was a massive "The Kooks" fan back in the days and "Sofa Song" was just what I needed this week.

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

## Thank you for reading!

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