🧢 Stefan's Web Weekly #2
Tags: webdev, html
Published: 2021-01-17 20:26:29

---
title: 🧢 Stefan's Web Weekly #2
published: true
description: Running a TIL blog, a game that lets you master 2020 and a creative CSS gradient trick.
canonical_url: https://www.stefanjudis.com/blog/web-weekly-2/
tags: #webdev, #html 
//cover_image: https://direct_url_to_image.jpg
series: Web Weekly
---

## Welcome to Web Weekly #2!

This week I'm sharing why I'm writing down my web development learnings, a game that lets you master 2020 and a creative CSS gradient trick. 

Sounds good? Let's dive right in!

## Write down what you learn

Last week [my blog's Today I learned section](https://www.stefanjudis.com/today-i-learned/) made it into [the Smashing Magazine newsletter](https://www.smashingmagazine.com/the-smashing-newsletter/smashing-newsletter-issue-283/). I couldn't believe my eyes when I saw all these new subscribers coming in. Hello everyone and thank you so much for reading along!

![6. Never Stop Learning  Learning never stops. And since it’s often the little insights, code tidbits, and tips that turn out to be the most useful, Stefan Judis started “Today I Learned”.](//images.ctfassets.net/f20lfrunubsq/3ds0dPm9ltaMvuameOOVov/6e5744e2583007a8bd8a2148d7f711b6/Screenshot_2021-01-17_at_18.24.49.png)

February 22nd 2017, I started the habit of writing down quick notes to my future self. Whenever I had the thought "Huh! I didn't know that.", I wrote it down. The whole purpose of these notes is to remember facts and articles in the future. Once I have written down something, it's more likely that I'll remember it. And if not (I forget a lot), chances are high that I recall that it's on my blog somewhere.

If you want to get into writing, I recommend starting a TIL blog. Write down notes for yourself. Share your learnings with friends, [learn in public](https://www.swyx.io/learn-in-public/). Always remember, when you learn something new, you're usually not alone.

__Do you have a TIL blog? Let me know, I'd love to share a few blogs next week!__

## Being creative with web technology

Since watching Matthew Rayfield's [Animating URLs with Javascript and Emojis](https://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/), I'm a fan of his videos and projects. His videos make me laugh, and he builds wonderful creative things with web technology.

[Last week he released another pop-up experiment](https://twitter.com/MatthewRayfield/status/1348638796741541889), and [you should play around with the Matryoshkas](https://matthewrayfield.com/projects/popup-experiments/popup-matryoshka/)!

![Popup Matryoshka pop up example](//images.ctfassets.net/f20lfrunubsq/51N2DnKJoxUsuT6ajGNLR3/88b5bed341a83022f921f99507d85565/Screenshot_2021-01-17_at_18.51.08.png)

## Email inputs can accept multiple emails addresses

[Thanks to Bramus](https://twitter.com/bramus/status/1334770108036771840), I learned that email input fields could accept multiple emails. Amazingly, learning HTML never stops. There's always more tiny details to discover.

![HTML form including an email input accepting multiple email addresses](//images.ctfassets.net/f20lfrunubsq/VmtFyA1HJb0XQSr0Wo2NS/dfdf3e127b46760b32a0c6f5eabcb902/Screenshot_2021-01-17_at_19.00.09.png)

If you want to learn more, [I wrote down my thoughts of this feature](https://www.stefanjudis.com/today-i-learned/email-inputs-can-accept-multiple-email-addresses/). But headsup, unfortunately, I wouldn't recommend using it. 🙈

## The state of PWAs in 2021

Over the last few years, I primarily built websites and haven't had the chance to build web apps. That's why I stopped paying attention to all the things happening in the PWA (progressive web app) space. Maximiliano Firtman's post [Progressive Web Apps in 2021](https://firt.dev/pwa-2021) is excellent for catching up!

![Screenshot of "Progressive Web Apps in 2021" article showing the headline and author (Maximiliano Firtman)](//images.ctfassets.net/f20lfrunubsq/3qLS2t8FMCcGwttXfquvrx/6ff8822ab85aaf00401d82a9ac14371b/Screenshot_2021-01-17_at_15.46.25.png)

## AVIF is around the corner

[Last week I learned that Firefox supports the new AVIF image format soon](https://twitter.com/stefanjudis/status/1349264167056912384). I haven't had the chance to play around with it yet, but it looks like it beats all existing image formats in file size.

![Caniuse.com table showing avif support in Chrome, Opera and Firefox](//images.ctfassets.net/f20lfrunubsq/4UcvXYpIPrOqcEn8vgRjgA/0754fcf372f07e3a7515e136a7def520/Screenshot_2021-01-17_at_19.25.37.png)

If you want to learn what it's about, read Jake Archibald's post [AVIF has landed](https://jakearchibald.com/2020/avif-has-landed/), and if you're looking for [the picture element snippet to load AVIF or webp you can find it on my blog](https://www.stefanjudis.com/snippets/a-picture-element-to-load-correctly-resized-webp-images-in-html/).

## A smart CSS gradient snippet

[Matthias Ott shared a useful CSS snippet to create multiline backgrounds](https://twitter.com/m_ott/status/1069741458641600513). It includes [box-decoration-break](https://www.stefanjudis.com/today-i-learned/box-decoration-break-helps-to-define-how-elements-should-be-rendered-across/) and [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).

![Headline with a multi-line gradient](//images.ctfassets.net/f20lfrunubsq/1ypee6vwUVZDKSSIvLSzx3/02bf946f976e12a7326f90ee8fabfae1/Screenshot_2021-01-17_at_19.29.54.png)

Check out [his example CodePen](https://codepen.io/matthiasott/pen/aQxBOB) if you want to dive into the code.

## The year 2020 as a game

I'm just going to leave [the 2020 game](https://2020game.io/) here. Have fun!

![Splash screen 2020 game](//images.ctfassets.net/f20lfrunubsq/5YbC4dUcjPjbdloYh79y4e/02a239c2cf29156688d428705c8fce95/Screenshot_2021-01-17_at_19.32.27.png)

## A good read about running a startup

I finished the book [Anything you want](https://amzn.to/2NhiTkx) written by [Derek Sivers](https://sive.rs/). It's a quick read (I finished it in two days) about what it means to run a fast-growing startup. Derek founded and later sold [CD Baby](https://cdbaby.com/). The book includes many learnings, entertaining stories and lots of advice for building a product or company.

![Cover of "Anything you want" by Derek Sivers](//images.ctfassets.net/f20lfrunubsq/6nJrlFO7LZRXkduTTcgGis/21a2c5671e1871801c4ffd7b26f52165/Screenshot_2021-01-17_at_19.42.33.png)

## Three useful projects to have a look at

- [sdushantha / tmpsms](https://github.com/sdushantha/tmpsms) – A temporary SMS utility right from your terminal
- [11ways / janeway](https://github.com/11ways/janeway) – A Node.js console REPL with object inspection and many other features 
- [cloudfour / lighthouse-parade](https://github.com/cloudfour/lighthouse-parade) – A Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page

## A quote to think about

> Live chat is for the things that can get lost.

Mike Crittenden wrote the article [If it will matter after today, stop talking about it in a chat room](https://critter.blog/2021/01/12/if-it-matters-after-today-stop-talking-about-it-in-a-chat-room/) and it's a good read when you're struggling with chat communication at work. 

## A song that makes you stop coding

[In December, I shared my discovery of Grandbrothers](https://www.stefanjudis.com/blog/monthly-digest-december-2020/). They produce wonderful piano tracks paired with smooth electronic sounds. [Gonçalo gave me a hint that they released a new album](https://twitter.com/gnclmorais/status/1350036844197494784) and what shall I say...

"All the unknown" might be my album of 2021. ["What we see"](https://www.youtube.com/watch?v=Pgd6NBuctYw) is another track that gave me goosebumps. I can't wait to see them live once this whole madness is over!

![YouTube screenshot showing abondend rails](//images.ctfassets.net/f20lfrunubsq/1ZrJSB4ihVdLKLE4FeMhFZ/a525298592199faf82df6e2322a8a191/Screenshot_2021-01-17_at_19.50.33.png)

__I'm always looking for new songs. What are your tracks of 2021 so far?__

---

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

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