🧢 Stefan's Web Weekly #3
Tags: webdev
Published: 2021-01-25 00:05:18

---
title: 🧢 Stefan's Web Weekly #3
published: true
description: Using any device with a browser as your second screen, Puppeteer recording and pixelated stickers.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-3/
series: Web Weekly
---

## Welcome to Web Weekly #3!

This week includes a tool to make any device with a browser an additional screen, beautiful stickers, Puppeteer scripting and impressive CodePen demos.

Ready? Let's do it!

## It's all about patience

[I came across an exceptionally polite GitHub conversation](https://twitter.com/gkoberger/status/1351271003989544965) that made me laugh. 

![GitHub conversation where a person asks for an update seven years later](//images.ctfassets.net/f20lfrunubsq/39KaDjfI97kmsO7h4VJun4/af9b7f8d440ffebb390a1a0a0244916c/Screenshot_2021-01-24_at_20.41.26.png)

And the best thing about this conversation; [the maintainer merged the pull request](https://github.com/gkoberger/stacksort/pull/4) with the epic name "FuckIt.js support" after seven years. 🙈

## Record Puppeteer scripts in Chrome Developer Tools

![Chrome devtools with an open "sources" panel to record interactions as a puppeteer script](//images.ctfassets.net/f20lfrunubsq/7qqXmKiUnuphd8uWouc2Jr/4bae631545da54e7da376e0048aef67f/Screenshot_2021-01-24_at_21.41.38.png)

[The Chrome 89 DevTools updates are very extensive](https://developers.google.com/web/updates/2021/01/devtools). The changelog includes many useful additions, but the ability to record Puppeteer scripts right within the developer tools is my highlight.

[👉 Find out how to record Puppeteer scripts](https://www.stefanjudis.com/blog/how-to-record-screen-actions-as-a-puppeteer-script/)

## How many people use alt text on Twitter?

![Source code: div[aria-label="Image"], div[aria-label="Embedded video"] { 	filter: grayscale(1) contrast(0.5); } div[aria-label="Image"]:hover, div[aria-label="Embedded video"]:hover { 	filter: none; }](//images.ctfassets.net/f20lfrunubsq/5NeV410itywwNOwfGNONW9/e5bdbd680c17e08e3532986114c51cd3/Screenshot_2021-01-24_at_21.57.47.png)

I followed Eric Meyers approach to highlight accessible content on Twitter. He advises to set up a custom Twitter stylesheet to display inaccessible images in greyscale. And what shall I say, since I have these settings enabled my timeline is much more grey than I expected... :/

[👉 Read "Highlighting Accessible Twitter Content"](https://meyerweb.com/eric/thoughts/2021/01/01/highlighting-accessible-twitter-content/)

## Beautiful pixelated stickers

![Many pixelated stickers under the headline "Stickers" By Anna Rankin](//images.ctfassets.net/f20lfrunubsq/ZEhJo1Cgl08oCpqVhhk82/c9c5445547f414e64fd49b20d1c3ff91/Screenshot_2021-01-24_at_21.02.55.png)

In March 2020, I ordered a set of wonderfully pixelated stickers from Anna Rankin. You have to check the dog in front of a computer and "You belong in tech"! Anna closed her shop for a while but opened it again last week! 🎉 If stickers are your thing, her Etsy shop is worth going shopping.

[👉 Let's go sticker shopping!](https://www.etsy.com/de/shop/AnnarBananar?listing_id=854497825)

## #HTMLElementInATweet

![Tweet by Michael Scharnagl: Day 22: ruby Represents small annotations   Informationsquelle  The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.](//images.ctfassets.net/f20lfrunubsq/1XF2TnN6zRlWGu5iRtKNu6/6fee6d798f74563a635ddc87ecaaaa9e/Screenshot_2021-01-24_at_21.37.19.png)

Do you wonder when to use the `ruby`, `cite` or `kbd` HTML element? Every day, Michael Scharnagl explains one HTML element in a Tweet. It's worth following along to learn more about HTML!

[👉 Learn more about HTML](https://twitter.com/hashtag/HTMLElementInATweet)

## New Tiny Helpers

![Screenshots of Lighthouse CI Diff, gif2avif and the interactive SVG coordinates explorer](//images.ctfassets.net/f20lfrunubsq/63SzIBkJ2vgnjw8qkDpiaO/a726fc2bfa643e077d9c2fc81217a089/Screenshot_2021-01-24_at_21.52.44.png)

You might now that I'm collecting single-purpose online tools on tiny-helpers.dev. 

My recent favourite additions are:

- [Lighthouse CI Diff](https://googlechrome.github.io/lighthouse-ci/viewer/) – Compare two Lighthouse reports
- [Interactive SVG Coordinate System](https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/) – Interactively explore the viewport, viewBox, & preserveAspectRatio of an SVG
- [gif2avif](https://gif2avif.com/) – Convert GIFs to next-generation AVIF files

[👉 Find more Tiny Helpers](https://tiny-helpers.dev/)

## Most popular CodePen projects in 2020

![CodePen Highlights showing a bike, a tree house, some fun radio buttons and an airplane](//images.ctfassets.net/f20lfrunubsq/3Z7T0i3BdYcb5yQftYlKwt/f2a04f3c58fd0cbf2aee018dda829ac1/Screenshot_2021-01-24_at_21.32.00.png)

CodePen released their most popular pens in 2020, and it's a massive collection of impressive and creative work.

My highlights are:

- [A Pure CSS Game - You Must Build a Lighthouse](https://codepen.io/ivorjetski/pen/OJXbvdL)
- [A beautiful plane animation](https://codepen.io/ste-vg/pen/GRooLza)
- [A pure CSS product card](https://codepen.io/cobra_winfrey/pen/OJXJeod)

[👉 Check the popular pens of 2020](https://codepen.io/2020/popular/pens)

## How I Learned to Stop Worrying and Love the Blog

![Make the time: "Being busy is a choice" – Ann Voskamp](//images.ctfassets.net/f20lfrunubsq/3h9WYIoyFAm1mb0jdgJwV8/862f33dd8bce88c48d33927f5b30b70d/Screenshot_2021-01-24_at_22.12.42.png)

Finn Qiao shared key takeaways after he started blogging. If you want to get into writing, this article is a good primer on the topic!

[👉 Read "How I Learned to Stop Worrying and Love the Blog"](https://towardsdatascience.com/medium-or-how-i-learned-to-stop-worrying-and-love-the-blog-5d6de7a7a20e)

## Three useful projects to have a look at

- [ericchiang / pup](https://github.com/ericchiang/pup) –  Parsing HTML at the command line 
- [pavlobu / deskreen](https://github.com/pavlobu/deskreen) – Turns any device with a web browser to a second screen for your computer 
- [leits / MeetingBar](https://github.com/leits/MeetingBar) – Your next meeting always before your eyes in the macOS menu bar 

## A quote to think about

Framework choices, CSS methodologies, semicolons or the lack of them... we all have opinions on these. Still, just because we have opinions, it doesn't mean that everybody wants to hear them.

[Rachel Andrew brought it to the point](https://twitter.com/rachelandrew/status/1351845137089966081).

> I'd suggest that anyone who feels they have important things to say gets a blog, does some critical thinking on their subject, and writes about it. Rather than feeling the need to convince women on the internet one by one via DM and email.

## A song that makes you stop coding

![Cover of "Laurent Bardainne & Tigre d'Eau Douce - Porsche 944 (Official Audio)"](//images.ctfassets.net/f20lfrunubsq/1iW7beQGpp9VPJgq5DyQOJ/5846303682f9fb70eb02acfa4b0d13eb/Screenshot_2021-01-24_at_22.26.06.png)

This week's track is "Laurent Bardainne & Tigre d'Eau Douce - Porsche 944". It's a funky Saxophone track with a catchy hook line that made me stop looking at my screen to listen to the music.

[👉 Let's get funky!](https://www.youtube.com/watch?v=LF2XpGE78kU)

---

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

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