🧢 Stefan's Web Weekly #11
Tags: webdev
Published: 2021-03-20 23:54:12

---
title: 🧢 Stefan's Web Weekly #11
published: true
description: CLI tricks and snippets, rarely used HTML elements/attributes, and tips to deal with interruptions at work.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-11/
series: Web Weekly
---

## Welcome to Web Weekly #11

How's everybody doing? I had a super unspectacular week, and my biggest highlight was that [I bought myself some new slippers](https://images.ctfassets.net/f20lfrunubsq/3Dry48RKRtcfPpt5c7iTT1/1fbced97d0aa9e9cb2f59213d6d3dc6d/Screenshot_2021-03-20_at_22.58.06.png) (don't judge 🙈). They made me laugh every day. 

But next week, I'll be speaking at [the CityJS conference](https://cityjsconf.org/). The lineup is fantastic, and I'm so excited to be part of it. Tickets are still available.

![CityJS Logo](//images.ctfassets.net/f20lfrunubsq/6HdGVJOB0hFMOKY6D1qLUn/b2189c58818bd12805dfe859dfaaf6f9/Screenshot_2021-03-20_at_23.39.35.png)

This week's Web Weekly includes nifty CLI tricks and snippets, rarely used HTML elements/attributes, tips to deal with interruptions at work, and, as always, GitHub repositories, new Tiny Helpers and some music.

3, 2, 1, let's go!

## Zsh tips and tricks

![ZSH tricks to blow your mind](//images.ctfassets.net/f20lfrunubsq/1Sc01onDHIevvMjSMyuWtG/690f30f65fb5bebf0c3d21b54fc16134/Screenshot_2021-03-20_at_13.06.42.png)

I use Zsh for years now and I'm very pleased with [my terminal setup](https://www.stefanjudis.com/blog/declutter-emojify-and-prettify-your-iterm2-terminal/). Lizzie Siegle wrote an insightful article that includes many useful Zsh tricks. I learned quite a lot!

👉 <a class="btn btn__small" href="https://www.twilio.com/blog/zsh-tricks-to-blow-your-mind">Level up your Zsh skills</a>

## What's in your `<head>`?

![A free guide to HTML5 head elements](//images.ctfassets.net/f20lfrunubsq/1aZr83N6rruvq8JaDrcXDm/d155d5b45134cc57bc28b6c2af7a3f4f/Screenshot_2021-03-20_at_23.08.13.png)

The `head` element plays an essential role in every website. If you're wondering what should be included in your `head` or want to see an extensive list of options, Josh Buchea maintains the wonderful resource `htmlhead.dev`.
  
👉 <a class="btn btn__small" href="https://htmlhead.dev/">Check out htmlhead.dev</a>

## How to leverage search engines to make your client-side search work without JavaScript

![Source code: <form method="get" action="https://www.google.com/search">   <input type="text" id="search" name="q" />   <button type="submit">Search</button> </form>](//images.ctfassets.net/f20lfrunubsq/4pLKDpTy8N7eYleSqRLD8k/7b7cb4500ba2fd6ef9a06a4e51ee5629/Screenshot_2021-03-20_at_23.13.55.png)

The idea of including a search on my blog is on my mind for quite a while. What's holding me back from using a service such as Algolia is that I want to provide a functional search even when JavaScript fails or is still loading. Jim Nielsen shared a great trick that leverages search engines to provide an acceptable search experience even when JavaScript fails.

👉 <a class="btn btn__small" href="https://blog.jim-nielsen.com/2021/progressively-enhanced-search/">Enhance your JavaScript search</a>

## Be prepared when asking for help

![When you see advice, first write down everything you tried.](//images.ctfassets.net/f20lfrunubsq/2G1u1u6QD5XJunbD2xGYz1/6da6821de2ad7193bbe758f0bc52eb51/Screenshot_2021-03-20_at_00.19.10.png)

I'm not the biggest fan of this whole "never get a developer out of their zone" topic. But I do think that asking for help in a structured way helps everybody. Ian Miell's describes how to figure out when to ask for help (the included formula is maybe a bit much 🙈) and advises to write down what you tried before interrupting. I love that approach!

👉 <a class="btn btn__small" href="https://zwischenzugs.com/2021/03/15/when-should-i-interrupt-someone/">Be prepared when asking for help</a>

## Today I learned – there's a native `ping` attribute

![Source code: <a href="https://www.stefanjudis.com/popular-posts/"     ping="https://www.stefanjudis.com/tracking/">Read popular posts</a>](//images.ctfassets.net/f20lfrunubsq/2M3XZgVN7neis5PvtY7Qjz/d63335d2d2547083cbe9fa7e3235ee64/Screenshot_2021-03-20_at_23.19.31.png)

Did you know that HTML provides a way to track users clicking links? I didn't and had a look at the `ping` attribute.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/html-defines-a-ping-attribute-on-anchor-elements-links/">Learn more about the ping attribute</a>

## A life without a smartphone and social media

![Then something socially curious happened: everybody started speaking to each other on Facebook and WhatsApp to try to figure out what was wrong. Some of them even contacted my family multiple times. They all had my phone number, email address and other ways of contacting me. However, none of them did.](//images.ctfassets.net/f20lfrunubsq/5fgusNMzRqPFXDyahfO2nC/8a9d4847454afb17ae9bfdbeb75fd7ce/Screenshot_2021-03-20_at_00.11.57.png)

Gregory Alvarez shared his journey when quitting social media. I don't plan to follow his path, but I can relate to everything he shares.

👉 <a class="btn btn__small" href="https://www.alvarez.io/posts/living-like-its-99/">Are you ready to quit social media?</a>

## Today I learned – the `output` element is an ARIA live region

![Example showing the functionality of the output element which announces changes to screen readers](//images.ctfassets.net/f20lfrunubsq/20TLBx50HvHH5k1n0EHJE7/4bba3459598b4843782f7b394b09964f/Screenshot_2021-03-20_at_23.21.54.png)

ARIA live regions play an essential role in communicating DOM changes to assistive technologies such as screen readers. This week I learned that you could use the `output` element to make DOM changes more accessible.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/the-output-html-element-is-an-aria-live-region/">Learn more about the output element</a>

## The false promise of scripts claiming to make your site accessible

![No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk. ](//images.ctfassets.net/f20lfrunubsq/40kZ4VIgg29LKHtIr2vfcu/c109c1cda207afc8244c4df54b37fac4/Screenshot_2021-03-20_at_00.58.20.png)

There's been a lot of discussion in the accessibility community around a new company that promises to make websites accessible using JavaScript. That's nonsense, and Karl Groves shared why.

👉 <a class="btn btn__small" href="https://overlayfactsheet.com/">Learn more about overlay products</a>

## Safety at conferences

![I don't feel safe at conferences](//images.ctfassets.net/f20lfrunubsq/2INe4xEqupNMO4rY8ViXgf/df1babe4cfceef52019d6516ac19fd8f/Screenshot_2021-03-20_at_23.41.13.png)

I've been at many web development conferences over the years, and let's face it, I never felt unsafe at an event. Laura Kalkbag shared her experience at conferences. It's a required read for everybody organising/attending events.

👉 <a class="btn btn__small" href="https://laurakalbag.com/safety-at-conferences/">Learn about better events</a>

## How to highlight columns in HTML tables

![ The author adds a class to the col element, which does nothing with the col element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.](//images.ctfassets.net/f20lfrunubsq/aFzzxJY9f1e5UoOzi7Rmk/71f86b4928d39b1e9ae60af4144b3948/Screenshot_2021-03-20_at_23.49.33.png)

Manuel Matuzovic shared a nifty CSS detail about tables. If you apply styles to a table's the `col` element, the styling will be applied to the complete row. 😲 Manuel describes how to leverage this behaviour to highlight table columns.

👉 <a class="btn btn__small" href="https://www.matuzo.at/blog/highlighting-columns/">Highlight your table columns</a>

## Interactive pull request handling on the command line

![Interactive pull request selection on the command line](//images.ctfassets.net/f20lfrunubsq/2xIoTbdd1i25ZJuXsVwNiq/0f123865731a34b6bbcf2309648e1b01/Screenshot_2021-03-20_at_23.52.11.png)

Do you handle your version control on the command line? If so, I found a handy snippet to check out pull requests quickly on the command line. Enjoy!

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/snippets/how-to-list-all-open-github-pull-requests-and-select-one-on-the-command-line/">Check out all the pull requests</a>

## New tiny helpers

![Screenshots of CSS Duotone Generator, CSS Grid Cheatsheet and Moiva](//images.ctfassets.net/f20lfrunubsq/q0KTQeOYNYWpky8taSHR5/9081ed296d8ff6d8dbde72a3583bcb67/Screenshot_2021-03-21_at_00.11.11.png)

- [CSS Duotone Generator](https://cssduotone.com/) – Create duotone image effects.
- [CSS Grid Cheat Sheet ](https://alialaa.github.io/css-grid-cheat-sheet/?ref=tiny-helpers) – Visualise your CSS grid.
- [Moiva](https://moiva.io/) – Compare JS libraries with ease.

## Three useful projects to have a look at 

- [twhite96/js-dev-reads](https://github.com/twhite96/js-dev-reads) – A list of books and articles for the discerning web developer to read. 
- [goabstract/Awesome-Design-Tools](https://github.com/goabstract/Awesome-Design-Tools) – The best design tools and plugins for everything.
- [css-doodle/css-doodle](https://github.com/css-doodle/css-doodle) – A web component for drawing patterns with CSS.

## A quote to think about

Often I find myself asking the question if another tool or app can make me more productive. Here's the thing, though; productivity rarely depends on the tools you use, it's always about you and your commitment. That's why [@rands tweet](https://twitter.com/rands/status/1371533325257428993) is this week's quote of the month.

> Blaming a tool for your productivity is like blaming a pencil for your bad writing.

## A song that makes you stop coding

![Cover of the African Dream](//images.ctfassets.net/f20lfrunubsq/6ZK3JIJFbBtYpJCDnsWrN4/b1f2d0f884eb9d731c630d95a32ba0b2/Screenshot_2021-03-21_at_00.23.45.png)

This week's track is a housy remix from "The African Dream". I love the vocals, and I can't wait for the time we're allowed to dance outside again.

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=BeRUx0npkbo">Listen to The African Dream</a>

---

And that's a wrap for the eleventh Web Weekly! 🎉

Writing this newsletter takes me three hours every week. If you enjoyed it, [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-11/). ♥️

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