🧢 Stefan's Web Weekly #18 
Tags: webdev
Published: 2021-05-10 06:18:47

---
title: 🧢 Stefan's Web Weekly #18 
published: true
description: Glue work in tech, facts about the `display` CSS property and "body-ok" in HTML.
tags: webdev
//cover_image: https://direct_url_to_image.jpg
---

## Welcome to Web Weekly #18!

Hello friends! The increasing number of vaccinations and today's 25°C made it a perfect weekend. It slowly feels like we get a hold of all this madness here in Germany. 

Before we jump into web stuff, look at this badass gang of friends taking a selfie! 👇 I had a good laugh about [this Twitter thread](https://twitter.com/JoaquimCampa/status/1386030529250832388).

![Badass animal selfie on Twitter](https://images.ctfassets.net/f20lfrunubsq/lv0rwNvVdUmO9vmyGDleD/dea3f7efc10b268249cb3c2206bb9373/Screenshot_2021-05-09_at_22.30.16.png)

This week's Web Weekly includes:

- Glue work in tech
- Facts about the `display` CSS property
- "body-ok" in HTML

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

Ready? Steady. Go!

## What's "Glue work"?

![Sketch note about Talk "being glue"](https://images.ctfassets.net/f20lfrunubsq/nswSeWAZUgcYlxTn8f5ov/3e6e5a86d1a45e14d75c9a0c3f9f6621/Screenshot_2021-05-09_at_22.22.52.png)

Glue work is activities that enable teams and make them successful. It can include coordinating activities, writing docs or helping out new team members. And while there's nothing wrong with glue work, people are often not recognized for their time-consuming work. Glue work can literally harm your career. 

If you're not familiar with the concept, check out Tanya Reilly's fantastic talk on the topic. 👇

👉 <a class="btn btn__small" href="https://noidea.dog/glue">Learn about "Glue work"</a>

## All things #webperf – the new WebPageTest blog

![WebPageTest Blog by Catchpoint](https://images.ctfassets.net/f20lfrunubsq/3FvI30zTgMPbBt7WF2WiCe/85c2f00210caf6280173124a6d91dc50/Screenshot_2021-05-09_at_20.25.32.png)

Tim Kadlec recently joined the team working on the web performance monitoring service WebPageTest. And he didn't waste any time and published multiple excellent articles on the WebPageTest blog right away:

- [Diving Into the New Cumulative Layout Shift](https://blog.webpagetest.org/posts/understanding-the-new-cumulative-layout-shift/)
- [Why First Contentful Paint Doesn't Work As a Cross-Browser Metric](https://blog.webpagetest.org/posts/why-first-contentful-paint-doesnt-work-as-a-cross-browser-metric/)
- [Extending WebPageTest with Custom Metrics](https://blog.webpagetest.org/posts/extending-webpagetest-with-custom-metrics/)

Luckily, [the blog has an RSS feed](view-source:https://blog.webpagetest.org/feed.xml) to keep up with all this web performance education.

👉 <a class="btn btn__small" href="https://blog.webpagetest.org/">Check the new WebPageTest blog</a>

## A bunch of handpicked personal websites

![A list of 100+ handpicked personal websites](https://images.ctfassets.net/f20lfrunubsq/5qFaSfqJCsFGzVELYO1nq5/35635298bc4cfeb2235ca51a517187b0/Screenshot_2021-05-09_at_22.12.52.png)

The following resource is one for the bookmarks: if you're rebuilding your website and need some inspiration, `personalwebsites.top` lists many good-looking sites.

👉 <a class="btn btn__small" href="https://www.personalwebsites.top/">Check personal websites</a>

## How do you use CSS custom properties?

![We had a period of a few minutes where we were talking past one another, because, as it turns out, we have completely opposite ideas about the use of CSS custom properties. I had never considered his approach, and I found it interesting enough to write this quick post.](https://images.ctfassets.net/f20lfrunubsq/24cxg5zxuy2dCEYNHDCzX0/b8313cd959fcac3407ca8fd39711608f/Screenshot_2021-05-09_at_22.01.25.png)

I chatted with Peter-Paul Koch about CSS this week. He's working on a book that teaches CSS for JavaScript developers. It turned out that Peter and I approach and use CSS custom properties differently... 😆 It's a very subtle difference and shows the power and flexibility of CSS! 💪

👉 <a class="btn btn__small" href="https://www.quirksmode.org/blog/archives/2021/05/two_options_for.html">Read about the two approaches</a>

## Celebrate what you learn!

![The bar for a TIL is literally “did I just learn something?”—they effectively act as a public notebook.](https://images.ctfassets.net/f20lfrunubsq/3LHzNg9NsdXwoGjeNkuMX/505a79575553d8025b5a673d12481f22/Screenshot_2021-05-09_at_20.39.41.png)

A year ago, Simon Willison started publishing TIL ("Today I learned") posts. He looked back and shared his motivation for writing down all these short notes. If you want to start blogging, I highly recommend kicking it off with writing TIL posts. 

([I document my learnings since February 2017](https://www.stefanjudis.com/today-i-learned/), too. 🙈)

👉 <a class="btn btn__small" href="https://simonwillison.net/2021/May/2/one-year-of-tils/">Learn why TIL blogging is great</a>

## HTML and password managers – when input names matter

![Substack's UI and 1Password just cost me $2,023](https://images.ctfassets.net/f20lfrunubsq/5m9HtX1BiPkq5UqQLOMwSk/d37d0673119f1398be09833515e76287/Screenshot_2021-05-09_at_21.09.58.png)

How do password manager browser extensions work? One might think that there's a standard to define what input fields should be filled, but often these extensions scan the DOM and try to populate the correct fields depending on their name. Timmy O'Mahony shared how an HTML input name led to a 2k$ charge he didn't even notice.

👉 <a class="btn btn__small" href="https://timmyomahony.com/blog/substacks-ui-and-1password-just-cost-me-2023-dollars">Find out what happened</a>

## The big benefits of little changes

![I recently shipped two things at GitHub that had an impact beyond my wildest dreams. The amount of gratitude and love that spilled out of the community is like nothing I’ve seen before. But the things I shipped weren’t these huge, meaty projects. They were tiny.](https://images.ctfassets.net/f20lfrunubsq/1uQsgLSLNlN8Xioqa5GHIt/2ee7c19be0484397fb277ca35f1a80bb/Screenshot_2021-05-09_at_21.01.09.png)

Oldie but goldie: Joel Califa wrote a post about tiny feature releases and how they make a difference in product perception. Often it's not the "big bang release" but rather a tiny feature addition that gets people excited. Joel shares examples from GitHub and Netflix. The post is golden, not only for product managers.

👉 <a class="btn btn__small" href="https://joelcalifa.com/blog/tiny-wins/">Implement Tiny Wins in your product</a>

## What's "body-ok" in HTML?

![Twitter Poll: #HTML quiz! What is “body-ok”? Content is king – 20.6%, You may omit body tags – 7.4% link's okay in body – 10.9% There’s no such thing – 61.1%](https://images.ctfassets.net/f20lfrunubsq/46rlPAbU9oStmt3et3rXBn/957c6e3e0f54a5f0aac53114cf73a229/Screenshot_2021-05-09_at_21.27.21.png)

Jens Oliver Meiert asked the Twittersphere if the term "body-ok" is a thing in HTML. I haven't heard of it, and he explains what it's about on his blog.
  
👉 <a class="btn btn__small" href="https://meiert.com/en/blog/html-body-ok/">Learn about body-ok</a>

## Pro tip: how to get sites you use daily out of your browser

![Chrome -> More Tools -> Create Shortcut " ☑️  Open as Window" turns any website into a Desktop app and it is glorious! (Accessible via Dock/CMD+TAB or whatever your OS jam is) I have no idea why it is called "Create Shortcut".](https://images.ctfassets.net/f20lfrunubsq/492LqakmgH6Ztko4woBqVv/ba5ad4564707818350139085ea5e76b5/Screenshot_2021-05-09_at_21.54.22.png)

Malte Ubl shared a Chome trick that helps you deal with your most-used apps. In Chrome, you can create "Shortcuts" for a particular website (it doesn't need to be a PWA). I use separated Gmail and Google Calendar windows (shortcuts) for a while now and it works great. 

Give it a try!

👉 <a class="btn btn__small" href="https://twitter.com/cramforce/status/1385369724662403072">Check Malte's Tweet</a>

## Understanding CSS display

![Understanding Display – Rachel Andrew](https://images.ctfassets.net/f20lfrunubsq/HzL2k1MHw0yid83xL85Qy/f3ca3be0b4366d3c628b6d6ccc52a6fe/Screenshot_2021-05-09_at_22.39.52.png)

Rachel Andrew is one of these speakers that can teach you an incredible amount of knowledge in a single talk. I haven't had the time to go over all the 113 slides of Rachel Andrew's talk "Understanding Display" yet, but I'm sure it's fantastic!

👉 <a class="btn btn__small" href="https://noti.st/rachelandrew/VeraEX/understanding-display">Go over Rachel's slides</a>

## Reader shout out 💙

![If you’re looking for interesting newsletters, here’s one. I rarely read newsletters, but  @stefanjudis  here always seems to have a very interesting list of topics](https://images.ctfassets.net/f20lfrunubsq/25ZifSMNQHxZwuumAGjF6K/5076e5f15de5a2ceb413fa8f177f9e22/Screenshot_2021-05-09_at_22.43.25.png)

[Jules Kulcsar shared this newsletter on Twitter](https://twitter.com/Jules_K/status/1389176782549622785). When these Tweets enter my notifications, they make my day! 

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

## A new Tiny Helper

![grep.app screenshot](https://images.ctfassets.net/f20lfrunubsq/4dNB9CfwaseMHzrTqmXgAp/bafd88fb4316d1e4b4ccacd127d6cfc8/Screenshot_2021-05-09_at_22.46.44.png)

`//grep.app` searches code from over a half-million public repositories on GitHub. And it's very speedy!

👉 <a class="btn btn__small" href="https://grep.app/">Search GitHub</a>

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

## Three valuable projects to have a look at 

- [github/github-elements](https://github.com/github/github-elements) –  GitHub's Web Component collection.
- [arzzen/git-quick-stats](https://github.com/arzzen/git-quick-stats) – A simple and efficient way to access various statistics in git repository. 
- [impressivewebs/frontend-feeds](https://github.com/impressivewebs/frontend-feeds) – An up to date list of RSS feeds for front-end developers.

## A quote to think about

I read the news over my morning coffee usually, but there might be some truth in [this week's quote from Sahil](https://twitter.com/shl/status/1384870434772946947).

> Read before sleeping, write after waking.

## A song that makes you stop coding

![Cover: Mojjo, Meca, LUISAH - Love The Way](https://images.ctfassets.net/f20lfrunubsq/XCwHDiwG5tIL6IRj3YSJG/c5cd797bc50188c56a78f0b73d06581e/Screenshot_2021-05-09_at_22.53.13.png)

I went out for a run today, and "Mojjo, Meca, LUISAH - Love The Way" entered my headphones. The funky house track sounds like friends, open-airs, and pure summer!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=d61zXt_TtQU">Listen to "Love the way"</a>

## Thank you for reading!

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