🧢 Stefan's Web Weekly #21
Tags: webdev
Published: 2021-05-31 07:49:57

---
title: 🧢 Stefan's Web Weekly #21
published: true
description: A massive CSS feature overview, the requestSubmit method and address HTML element.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-21/
---

## Welcome to Web Weekly #21!

Hello friends! I'm a few hours late because I had such a lovely weekend. I saw some friends, listened to music and read an entertaining book. 😊 It felt like the first "somewhat normal" weekend for ages here in Berlin. I hope this madness is getting to an end where you live, too!

Before we jump into web stuff, let me share with you what made me smile this week. If you're into dogs (or trampolines), [this video is just too cute](https://twitter.com/humorandanimals/status/1393258375291473923).

![A dog on a trampolin](https://images.ctfassets.net/f20lfrunubsq/4jeRKGiEHMn0CM6b8fIqtp/4eef3b67b330f9d83377c7b414f8c369/Screenshot_2021-05-30_at_23.02.31.png)

This week's Web Weekly includes:

- cutting-edge CSS features
- the soon-to-be cross-browser supported `requestSubmit` method
- the `address` HTML element

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

Ready? Steady. Go!

## Things to not do yourself – email address validation

![1. Email addresses can contain multiple '@'s.](https://images.ctfassets.net/f20lfrunubsq/4RndwCBVYx1cWa1phGqJKj/0d679a841e7d16487a4d395d3ff38b83/Screenshot_2021-05-30_at_21.09.18.png)

When doing web development, you might have learned that there are things that you don't want to implement from scratch. Email address validation is one of these things. Jan Schaumann wrote a nicely nerdy post sharing many details of valid/invalid email addresses. Enjoy!

👉 <a class="btn btn__small" href="https://www.netmeister.org/blog/email.html">Learn some email address trivia</a>

## How to get the most out of the things you read

![One of the benefits of reading is that it allows you to master the best of what other people have already figured out. This is only true, however, if you can remember and apply the lessons and insights from what you read.](https://images.ctfassets.net/f20lfrunubsq/2KjkrULzUNhDfRgh3xc1eD/6e4031a5048d2745c760c53f4aeebac7/Screenshot_2021-05-30_at_21.45.04.png)

I make an active effort to get away from a screen and to read more books right now. To get the most out of my reading, I highlight and reread valuable paragraphs. The article "Reading better" inspired me to write (and maybe publish) book summaries, too. 

Let's see how this goes; I'll keep you posted. 🙈

👉 <a class="btn btn__small" href="https://fs.blog/reading/">Get more out of your reading</a>

## How to combine CSS animations

![Source code: element.animate({   transform: ['translateY(0vh)','translateY(90vh)'] }, {   duration: 2000,   easing: 'ease-in',   iterations: Infinity,   direction: 'alternate',   composite: 'add' });](https://images.ctfassets.net/f20lfrunubsq/6ZGPJyd0aqYWf5DqgYgJHc/00542fb178a234f99287ea5888e75fd1/Screenshot_2021-05-30_at_20.57.23.png)

I had this tab open for several months (yeah... I'm that kind of person). Dan Wilson shared that you can use the Web Animation API to combine animations (that's not possible using CSS). It's a handy trick for sure!

👉 <a class="btn btn__small" href="https://danielcwilson.com/blog/2020/10/additive-css-animations/">Combine your animations</a>

## If you want to start blogging but don't know what to write

![Instead, when I learn something that helps me, I write about it so that it can help other people too. For example, one specific thing I struggled with in Rust was understanding references, and so I wrote what’s a reference in Rust? about what I learned.](https://images.ctfassets.net/f20lfrunubsq/582ucn0yvvr0G4K8JFTiKd/c95a8ba5f4f7210a4b412670afec1430/Screenshot_2021-05-30_at_21.01.06.png)

As you might have noticed, [I'm a big fan of writing down what I learned](https://www.stefanjudis.com/today-i-learned/). Writing things down helps me formalizing my thoughts but also makes my progress visible. And the best thing about TIL posts (Today I learned) is that they don't have to be super long or polished. They're for me! Short'n'sweet does the job just fine.

Julia Evans shared her approach to blogging; it's an excellent read with more good advice!

👉 <a class="btn btn__small" href="https://jvns.ca/blog/2021/05/24/blog-about-what-you-ve-struggled-with/">Write about things you learned</a>

*And if you're running a TIL blog, please send it my way! I love reading TIL posts.*

## The dark magic of JavaScript

![Source code: www.baidu.com.then(response => {     console.log(response.status);     // ==> 200 })](https://images.ctfassets.net/f20lfrunubsq/2UzDWytjoHZoQDaDxylokB/4d72017c606a4fd1b5671a8647048b22/Screenshot_2021-05-30_at_21.14.52.png)

The above snippet came my way, and it's quite "something", isn't it? You probably shouldn't implement and use it, but I must admit it's somewhat beautiful. It uses `Proxy` and `Reflect`, and you can find the code on GitHub.

👉 <a class="btn btn__small" href="https://github.com/justjavac/proxy-www">Inspect the www proxy</a>

## Well-meant but harm causing actions 

![But also understand that I have as much of a right to personal space as anyone else. You don’t know what kind of trauma a person lives with, or whether they have other disabilities, or if they’re just an introvert who doesn’t enjoy physical contact. If you wouldn’t like to be blindfolded and have people grab you out of nowhere, please don’t do it to me.](https://images.ctfassets.net/f20lfrunubsq/19x5BUk8z9Zv5MZcHFmmwe/1bb417935557c6a654f5b83d718e18dc/Screenshot_2021-05-30_at_22.57.39.png)

Disability rights activist Holly Scott-Gardner shared her experience of living in this world while being blind. The article "I’m Tired of Begging Strangers to Stop Touching Me Wherever I Go" is an insightful read on personal space and how to offer help in general.

👉 <a class="btn btn__small" href="https://catchthesewords.com/im-tired-of-begging-strangers-to-stop-touching-me-wherever-i-go/">Learn how to offer help</a>

## TIL – `document.hasFocus()` is a thing

![Source code: document.hasFocus(); // true](https://images.ctfassets.net/f20lfrunubsq/7c7MdWfGtDATLIs2rDyUaZ/edc46fe9ef0b03ddb64d7857cb869d1f/Screenshot_2021-05-29_at_17.05.56.png)

Lea Verou shared ways to figure out if a browser tab has focus. Surprisingly, Lea ruled out the solution (`document.hasFocus()`) at first. If you prototype code in the JS console regularly, be aware that some methods might behave differently in this environment. Her article explains why.

👉 <a class="btn btn__small" href="https://lea.verou.me/2021/05/is-the-current-tab-active/">Check if tabs are focused</a>

## New features coming to CSS

![ 31 Features, Rapid Fire  from: risky and never in any browser to: stable and available in many browsers!](https://images.ctfassets.net/f20lfrunubsq/4gRY8YVS2v3zyIO0JWROaC/1d3f2ca071ac9392381a1627b7cb4ce2/Screenshot_2021-05-30_at_21.51.23.png)

You'll need a little bit of time to go over all the resources coming now. 🙈 Adam Argyle shared a massive overview of upcoming CSS features and exciting things that are coming our way.

👉 <a class="btn btn__small" href="https://2021-hover-conf-new-in-css.netlify.app/">Check what's new in CSS</a>

## TIL – an `address` HTML element exists

![HTML code: <p>Contact the author of this page:</p>  <address>   <a href="mailto:jim@rock.com">jim@rock.com</a><br>   <a href="tel:+13115552368">(311) 555-2368</a> </address>](https://images.ctfassets.net/f20lfrunubsq/78Oox7b3N6KGmvvlwgIZGO/2e1207bc8a561d8a52cd324c01c7191f/Screenshot_2021-05-30_at_20.40.38.png)

This week I found out about the `address` HTML element! 😲 You can use it  to provide contact information. Interestingly, according to MDN, there's no implicit ARIA role defined for the `address` element. I believe that makes it useless for assistive tech (please correct me if I'm wrong!). 

I wonder if Google gives this element some special treatment. **If you know more about this topic, I'd love to learn more about it!**

👉 <a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address">Learn about the 'address' element</a>

## `form.requestSubmit` is entering Safari Tech Preview

![DevSheet explaining HTMLFormElement.requestSubmit()](https://images.ctfassets.net/f20lfrunubsq/EQCpedTJRB9L5Hz6CCXTt/1e7a360c1a1d20a9b577212dcf9b0561/Screenshot_2021-05-30_at_20.22.42.png)

If you're using RSS, I recommend following the Webkit blog because it includes [the Safari release notes](https://webkit.org/blog/11680/release-notes-for-safari-technology-preview-125/). New Safari-supported web features have high chances of cross-browser support because Safari is often "late to the party" these days. 

`FormElement.requestSubmit` is one of these features that's soon available in all major browsers. Read about the much-needed form handling feature on the blog.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/requestsubmit-offers-a-way-to-validate-a-form-before-submitting-it/">Learn about 'requestSubmit'</a>

## Reader shout out 💙

![# Originally created by Stefan Judis. See # https://www.stefanjudis.com/snippets/a-custom-dev-command-with-auto-completion/ # # Creates a `dev` command for the shell (zsh) including autocompletion to # provide a UI for selecting a dev project in (aka git repository cloned into) # `$__DEV_ROOT_DIR_PATH`. #](https://images.ctfassets.net/f20lfrunubsq/yeJxaQdgO7OM7edupgCdn/647601a6ca6b0c10d38a82428b7066a5/Screenshot_2021-05-30_at_22.15.43.png)

I shared [a tutorial for my custom `dev` terminal command last week](https://www.stefanjudis.com/snippets/a-custom-dev-command-with-auto-completion/). It navigates into the correct working directory, opens VSCode and also runs `npm dev`. Christoph Wanja took my approach as an opportunity to come up with a way more sophisticated script. [It's available on GitHub and it's super well-documented](https://gist.github.com/iwan-uschka/09445b4d94b45458cd43e266983a6f1f)!

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

## A new Tiny Helper

![SVG Filter UI with a prview window](https://images.ctfassets.net/f20lfrunubsq/6G6fSEhNGUkk70Vf94Zy9x/be45e11b970611d52670ea32c9536059/Screenshot_2021-05-30_at_22.19.34.png)

If you have tried writing SVG filters by hand, you know that this is not easy. The "SVG Filter Builder" is a visual tool to create and combine SVG filters. It looks super cool!

👉 <a class="btn btn__small" href="https://svgfilters.com/">Create SVG filters</a>

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

## Three valuable projects to have a look at 

- [utterance/utterances](https://github.com/utterance/utterances) – A lightweight comments widget built on GitHub issues.
- [pluja/awesome-privacy](https://github.com/pluja/awesome-privacy) – A curated list of services and alternatives that respect your privacy because PRIVACY MATTERS.
- [boringdesigners/boring-avatars](https://github.com/boringdesigners/boring-avatars) – A JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

## A quote to think about

I couldn't find out who's responsible for the quote of this week, but the following line is very true for coding, writing, speaking, and maybe even life in general. 🙈

> Clear is always better than clever.

## A song that makes you stop coding

![Beatsteaks concert](https://images.ctfassets.net/f20lfrunubsq/1osux6E9I2mG8UnQm1xGs8/1ece173cf660ef26b426509aa6a5f4f7/Screenshot_2021-05-30_at_22.34.57.png)

For the Berlin folks: I just bought (literally two minutes ago) tickets for Berlin's best live band. I've seen the Beatsteaks play live many times and can't wait to stand in front of a stage singing my favorite songs again.

Until then, here's the legendary song "I don't care as long as you sing", which makes my morning right now!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=iqlVPaZYOzQ">Listen to "I don't care as long as you sing"</a>

## Thank you for reading!

And that's a wrap for the twenty-first 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-21/).
- 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/).