🧢 Stefan's Web Weekly #15 
Tags: webdev
Published: 2021-04-18 21:40:12

---
title: 🧢 Stefan's Web Weekly #15 
published: true
description: JavaScript classes are not just syntactic sugar, a proposal to fix JS date handling and a communication manual.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-15/
series: Web Weekly
---

## Welcome to Web Weekly 15!

[Brian Douglas from JAMstack radio](https://www.heavybit.com/library/podcasts/jamstack-radio/) invited me to talk about Contentful and all things headless CMS' this week. It was good fun (Brian is an excellent host). The show will be released in the upcoming weeks. 

Apart from that, I had a very smooth week. My biggest highlight was that my "Jazz work playlist" was replaced by chilled lofi music. It's so good! Read on to learn more.

This week's Web Weekly includes...

- nerdy facts about JavaScript classes and date handling
- resources about HTML elements and emails
- guidelines to streamline your team's communication

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

Ready? Steady. Go!

## The world's first computer program

![Heroes of computer science](https://images.ctfassets.net/f20lfrunubsq/2fScfbz81W394jw7D7JeXy/cbd4b66b8a6b4f63944392cc531c6d84/Screenshot_2021-04-18_at_20.45.59.png)

Do you know who Ada Lovelace is? I didn't, but it turns out that she was an English mathematician and is responsible for the world's first computer program. One of this newsletter's readers, Gonçalo Morais, started the newsletter "Heroes of Computer Science". 

That's a great idea, and I'm all up for learning more about computer history.

👉 <a class="btn btn__small" href="https://www.heroesofcomputer.science/">Check out "Heroes of Computer Science"</a>

## How to identify pseudo-element selectors in Chrome's DevTools

![How to use DevTools to peek inside <input type="file">](https://images.ctfassets.net/f20lfrunubsq/7gkcrEZM606NjKGngMlvqk/872ccac54df7f5be13ebc5ebd7290811/Screenshot_2021-04-18_at_20.41.52.png)

Last week I learned that [you could style the "Browse" button of file inputs](https://www.stefanjudis.com/today-i-learned/how-to-style-the-select-button-of-file-inputs/). Bramus reacted to this learning and taught me how to inspect native HTML elements and find out which pseudo-elements are available.

👉 <a class="btn btn__small" href="https://www.bram.us/2021/04/15/identify-and-extract-pseudo-element-selectors-from-built-in-html-elements-using-devtools/">Start inspecting native elements</a>

## Things to keep an eye on: Google's FLoC

![This post was written in a hurry in response to some misinformation about Google’s newest Web antifeature, Federated Learning of Cohorts (FLoC). Google’s FLoC is an attempt to track users even when their browsers (rightly) block third-party cookies. The initial blog posts about this issue were quite benign, but online discussions quickly devolved into panic and support for building flawed work-arounds into upstream software. I had to write this before things got out of hand.](https://images.ctfassets.net/f20lfrunubsq/1aRBuUAOyCOyznfQt29hd7/62922dd0df0abfed725da13891ece5c2/Screenshot_2021-04-18_at_21.45.43.png)

I mentioned it in [a previous newsletter](https://www.stefanjudis.com/blog/web-weekly-13/); Google starts rolling out FLoC (Federated Learning of Cohorts). It's Google's newest take to deal with their core business – advertising. FLoC is aiming to replace cookie-based user tracking. I read a few articles about it, but I can't say that I understand the technology yet. Rohan Kumar shares misconceptions about it and goes into technical details of this new technology (`document.interestCohort`).

👉 <a class="btn btn__small" href="https://seirdy.one/2021/04/16/permissions-policy-floc-misinfo.html">Learn more about FLoC</a>

## Save all these screens with `screensaver.js`

![Screensaver.js – Most useful liibrary for your website. Starts a screensaver after a timout of seconds of inactivity on your site.](https://images.ctfassets.net/f20lfrunubsq/2zwthOWospdZQRntqFaRj0/c357fe82aa166bdd0a23d4f9d8401e47/Screenshot_2021-04-18_at_21.34.54.png)

People occasionally sneak into my DMs to tell me that they discovered my site's screensaver. [I made it easier for my visitors to enable it this week](https://twitter.com/stefanjudis/status/1382410427108368387). Here's the code that I use on my site. I still think that it's super funny! 🙈 

👉 <a class="btn btn__small" href="https://github.com/giuseppeg/screensaver">Implement Screensaver.js</a>

*If you implement Screensaver.js, [please let me know](mailto:stefanjudis@gmail.com)! I'd love to share some creative screensaver examples next week.*

## A complete guide to HTML email

![Table of contents: accessibility, bugs, dark mode, editors, feature support, frameworks, getting started, guides and resources, inline CSS, inspiration, mailto link generator, marketing, meta languages, previews, productivity, remove unused CSS, target email clients, templates, tracking blocker, transform HTML](https://images.ctfassets.net/f20lfrunubsq/6EB9TpIO605kqRyKtLobST/487ff7ce5f20bb68361eb16e353631f6/Screenshot_2021-04-18_at_21.09.11.png)

Writing HTML emails is complicated, and I know very few people who like coding emails. Luckily Vitaly Friedman published an extensive list of resources (see the table of contents above) that help dealing with emails. 

Save the link, people! It'll come in handy in the future.

👉 <a class="btn btn__small" href="https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/">Find resources to rock your next HTML email</a>

## Chilled beats with soothing background videos

![lofi.cafe showing a soothing gif while playing some music](https://images.ctfassets.net/f20lfrunubsq/1mOHiQtq6wD0OYgAhVKZtq/fb3fd052cc31477f00fe6c0d33eb4f75/Screenshot_2021-04-18_at_20.59.53.png)

I came across `lofi.cafe` and it replaced Slack on my second monitor multiple times. The site plays lofi tracks with relaxing video backgrounds. Wonderful!

👉 <a class="btn btn__small" href="https://lofi.cafe/">Put some music on your 2nd monitor</a>

## The finished `HTMLElementInATweet` series

![100 days – 100 HTML elements in a Tweet](https://images.ctfassets.net/f20lfrunubsq/5O5qA6DfdQH16JOOXIA1Kx/499057f973e4512cf010b9c0e995a4a1/Screenshot_2021-04-18_at_21.05.08.png)

Michael Scharnagl went on the journey to tweet one HTML element per day for a hundred days. He finished the series and wrapped up `#HTMLElementInATweet` on his blog. 

If you want to level up your semantic HTML game, this post is for you!

👉 <a class="btn btn__small" href="https://justmarkup.com/articles/2021-04-13-html-elements-in-a-tweet/">Discover new HTML elements</a>

## JavaScript classes aren't "just" syntactic sugar

![After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.](https://images.ctfassets.net/f20lfrunubsq/7lBzxEFBm0macsvXzJsokt/1948ebdf45ac41855806cc864e912437/Screenshot_2021-04-18_at_20.55.33.png)

JavaScript classes are around for a while now. I don't use them very often, but I read countless times that "they're just sugar on top of JavaScript's prototypal inheritance". Andrea Giammarchi tackles this assumption and proves that classes are more than just syntactic sugar. 

Get ready; there are many nerdy JS details in this post.

👉 <a class="btn btn__small" href="https://webreflection.medium.com/js-classes-are-not-just-syntactic-sugar-28690fedf078">Learn more about JS classes</a>

## Will JavaScript date handling become easier?

![JavaScript Temporal API](https://images.ctfassets.net/f20lfrunubsq/4RNZcxk8N7O51xDzPsG5Tn/d4011482b645830f0d2b8b60ba8919a1/Screenshot_2021-04-18_at_20.50.47.png)

Dealing with dates is complicated in every programming language. JavaScript dates are extra terrible. But there's hope: an early proposal (stage 2) aims to fix date handling. Nathan Sebhastian wrote down what you need to know about the new `Temporal` API.

👉 <a class="btn btn__small" href="https://blog.bitsrc.io/javascript-temporal-api-a-fix-for-the-date-api-aa8381a4234c">Get excited about easier date handling</a>

## Define how to communicate in your team

![The problem isn’t our communication tools and channels themselves — it’s our misaligned assumptions about how to use them.](https://images.ctfassets.net/f20lfrunubsq/4WHWZIQwNIkTaReMjebCr1/34added81a89dc64e29f048f8b17bc7b/Screenshot_2021-04-18_at_20.22.39.png)

If you're working in a bigger company you know the following problem. 

There are too many Slack messages, your email inbox gave up counting your unread emails and shows `1000+`, the used tools and platforms scream for your attention to tell you about all the things your colleagues are doing, ... it's just too much – too much of everything.

Matt LeMay shared how a communication manual helped them to handle all this overload in their company.

👉 <a class="btn btn__small" href="https://medium.com/on-human-centric-systems/your-team-needs-a-comms-manual-81d13402d165">Define a communication manual</a>

## Reader shout out 💙

![Blogs I love to read](https://images.ctfassets.net/f20lfrunubsq/45wthRT7dTA6cCH47fpS8D/61ace1801c092808845dfa745a75ed45/Screenshot_2021-04-18_at_21.41.50.png)

Victor Ofoegbu publishes weekly web development notes on his blog, and also listed some excellent blogs that you should check. He included my blog in the list. Thank you Victor!

👉 <a class="btn btn__small" href="https://victorofoegbu.com/notes/blogs-i-read">Find great blogs to read</a>

## A new Tiny Helper

![Software licenses in plain english](https://images.ctfassets.net/f20lfrunubsq/48QtWh94qri2LyH8S4Mwip/d041c8ca0dfde5934f171cd7383244a2/Screenshot_2021-04-18_at_21.53.37.png)

You might have been in this sitation: you read the same software license repeatedly but still don't understand what these words are telling you. `tl;drlegal` translates software licences into plain English so that you can find out what you're allowed to do with the source code.

👉 <a class="btn btn__small" href="https://tldrlegal.com">Visit tl;drlegal</a>

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

## Three useful projects to have a look at 

- [calendso/calendso](https://github.com/calendso/calendso) – The open-source Calendly alternative.
- [btford/write-good](https://github.com/btford/write-good) – A naive linter for English prose.
- [nordicgiant2/awesome-landing-page](https://github.com/nordicgiant2/awesome-landing-page) – A series of beautiful and practical landing page templates.

## A quote to think about

I found this week's quote in Sarah Jaffe's article [Against Loving Your Job](https://inthesetimes.com/article/alienated-labor-capitalism-jobs-work). 

> Work will never love us back. But other people will.

## A song that makes you stop coding

![Cover of Roots – Kupla](https://images.ctfassets.net/f20lfrunubsq/nrSawv4qHASEOq1FMFhQy/596076e2b9e6b418f6e932080d755fc7/Screenshot_2021-04-18_at_22.04.53.png)

A friend shared "Kupla – Roots" with me, and I discovered a whole lot of beautiful lofi tracks. The track includes a chilled beat and piano tunes and I'm so here for it!

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

## Thank you for reading!

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