Stefan's Web Weekly #26
Tags: webdev
Published: 2021-07-05 10:37:35

---
title: Stefan's Web Weekly #26
published: true
description: Visualized tabbing order, surprising return values in JavaScript `try/catch/finally` and resources on gender-neutral language. 
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-26/
---

## Welcome to Web Weekly #26!

God dag, friends!

Guess what?! I'm on my way to Amsterdam for three chilled days right now. The weather won't be super great, but I'm excited about the sea, some wind, and good food either way. 

And to my surprise, the provided wifi on my train works reasonably well, which means that I can write and send this week's Web Weekly. 🎉 Thank you Deutsche Bahn!

Before we jump into web stuff and valuable resources, [remember, the year is 50% done](https://twitter.com/year_progress/status/1410931277499441156)! Time flies at an incredible speed... 🙈

![Tweet showing that the year is 50% done](https://images.contentful.com/f20lfrunubsq/6hwXv3dYr9hoj7vpQtHLZL/76200fe2473f42cd9f00967d18a6faa8/Screen_Shot_2021-07-05_at_11.44.56.png)

This week's Web Weekly includes:

- visualized tabbing order
- surprising return values in JavaScript `try/catch/finally`
- resources on gender-neutral language

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

Ready? Steady. Go!

## "Show tabbing order" in Firefox

![Firefox DevTools with an Open Accessibility panel that includes the "Show Tabbing Order" checkbox](https://images.ctfassets.net/f20lfrunubsq/sZpqqx0CQl6OgM1KUkhon/c62211f78761be1cf25a3fe0a719c71f/Screen_Shot_2021-07-04_at_23.43.56.png)

[I rediscovered Firefox's "show tabbing order" functionality last week](https://twitter.com/stefanjudis/status/1409442447218860032). The accessibility feature visualizes the order of focusable elements on a page.

And while sharing it on Twitter, I also learned that Chrome will soon ship a feature that looks similar ("show source order") but works differently. Learn more about it on the blog.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-visualize-the-tab-order-without-using-an-extension-in-firefox/">Display your focus order</a>

## The optimal desk setup

![Four different office setups and desks](https://images.contentful.com/f20lfrunubsq/3hapBu24Jpa3sTJdxQ1Ykz/87a2386e93d31ae44fb21a9c43042bd4/Screen_Shot_2021-07-05_at_09.41.50.png)

With us all working from home, it's essential to have a good office setup. I sat on a crappy chair for the last two years, and well... I should have invested in a proper chair right when I stopped going into an office.

James Fleishmann shared many tips about chairs, keyboards, and monitors to level up your home office game.

👉 <a class="btn btn__small" href="https://www.indiehackers.com/post/the-optimal-desk-setup-how-to-create-a-minimalist-desk-and-other-office-setups-1d10c8d13e">Display your focus order</a>

## `return` in `finally` overwrites previous returns

![In JS functions, the "last" return wins](https://images.contentful.com/f20lfrunubsq/7I7BEGQF8ccZoZ2atWlcCF/053cfbcd150d31e3d4dad13a5e93517d/Screen_Shot_2021-07-05_at_10.45.17.png)

I discovered [that `return` in `finally` overwrite previous returns](https://www.stefanjudis.com/today-i-learned/finally-in-a-try-catch-statements-really-goes-over-everything/) a few years ago. 

Let's look at an example:

```javascript
function g() {
  try {
    throw new Error( 'Foo' );
  } catch( e ) {
    return 'A';
  } finally {
    return 'B';
  }
}
```

What do you think is the return value of `g()`? It's `B`. 😲 

Jake Archibald, who's publishing a ton lately, wrote about this behavior, too. As usual, his articles are worth a read. 👇

👉 <a class="btn btn__small" href="https://jakearchibald.com/2021/last-return-wins/">Learn about finally return values</a>

## How to trick email/website auto-detection

![Bold headline: Zero-width space](https://images.contentful.com/f20lfrunubsq/6GvpioVgL2UB3jVhfDPu3h/3d947e01c454494900ef9c75fdf02c1a/Screen_Shot_2021-07-05_at_09.47.33.png)

Maybe you know the situation: you write a Tweet or email, and after sending, some words became clickable URLs (even though they're not). A zero-width space can help to prevent auto-linking. Chris Coyier explained how.

👉 <a class="btn btn__small" href="https://css-tricks.com/zero-width-space/">Zero-width space all the things</a>

## "Just run with it"...

![11 Mental Tricks to Stop Overthinking Everything. Stop worrying and start growing.](https://images.contentful.com/f20lfrunubsq/3FEnh51T5V5Twtc0YjI9aL/ded1ee3829973b7afba5d1ef2625dc1c/Screen_Shot_2021-07-05_at_09.52.10.png)

I'm guilty of overthinking plenty of things. Sometimes situations and thoughts are just running in circles in my mind. Scott Mautz shared welcome tips to stop ruminating. 

**Running with something is almost always better than replaying situations a thousand times in your head.**

👉 <a class="btn btn__small" href="https://www.inc.com/scott-mautz/11-mental-tricks-to-stop-overthinking-everything.html">Stop overthinking</a>

## Have you seen `:scope` in CSS or JavaScript?

![Source code: var context = document.getElementById('context'); var selected = context.querySelectorAll(':scope > div');](https://images.contentful.com/f20lfrunubsq/44eTeCdTaOUL42iErJPWxs/47cd78457421259ce914d90fd405a1f7/Screen_Shot_2021-07-05_at_11.05.30.png)

Me neither. 😆 It turns out you can use the pseudo-class in CSS or DOM methods such as `document.querySelectorAll` to retrieve elements that relative to other elements. 

👉 <a class="btn btn__small" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:scope">Read about :scope on MDN</a>

## Drop the unnecessary roundtrip in chat communication

![Don't ask to ask, just ask](https://images.contentful.com/f20lfrunubsq/5SkJkB4fwVWsrm3Ighr2n1/4ee3fa87983d684c6a3d3b3f184dc599/Screen_Shot_2021-07-05_at_10.52.06.png)

I love micro-sites. 🙈 

`dontasktoask.com` aims to explain how to better communicate in chats. If you're stuck and are looking for help, ask your question right away and don't ask if someone is around who could help you.

👉 <a class="btn btn__small" href="https://dontasktoask.com/">Don't ask to ask</a>

## Interviews should be structured

![The same can apply to an interview. You know you have asked the right questions when your interviewees have to pause and think about the response!](https://images.ctfassets.net/f20lfrunubsq/7DBhAnmUWPcrU21FuZQXAo/ee84970849535b5a5e0ff2121eab894d/Screen_Shot_2021-07-05_at_11.11.25.png)

I participated in many unstructured interviews over the years (as an interviewee and interviewer), and I discovered that it's essential to have a clear goal for every hiring conversation. You can't just "wing it"!

Yenny Cheung's article "How do you identify great engineers when hiring?" is an excellent example of well-defined goals and structured questions.

👉 <a class="btn btn__small" href="https://leaddev.com/hiring-onboarding-retention/how-do-you-identify-great-engineers-when-hiring">Structure your interviews</a>


## The hidden book of knowledge

![The book of Secret Knowledge – Knowledge is powerful, be careful how you use it.](https://images.contentful.com/f20lfrunubsq/1KHkyXnZH5ZhqXwdoqxydd/4f47ff0681d97b31d4f67f07e87c8295/Screen_Shot_2021-07-05_at_09.58.24.png)

Michał Ży collects all sorts of interesting information in "his hidden book of knowledge". The repo includes tools, shell functions, one-liners, and much more!

Michał maintains this resource for his use, but he keeps it in public and puts it on Github. This approach offers value for everyone who discovers it! 

I love everything about this GitHub repository – public lists and knowledge FTW! 💪

👉 <a class="btn btn__small" href="https://github.com/trimstray/the-book-of-secret-knowledge">Discover random things</a>

## Get started with gender-neutral language

![If you don't know someone's gender or when talking about a group use gender-neutral language.](https://images.contentful.com/f20lfrunubsq/2t8tUhzPXhyQI2uNZ4utY0/ed895116cad9c12dfa2678976183b189/Screen_Shot_2021-07-05_at_11.13.59.png)

I make an effort to speak and write gender-neutral English (and German) for a few years now. Many sayings, terms, and tutorials default to a masculine version, and that's not inclusive. Read Maanushi Rana Joshi's article "Gender-inclusive design is the only way" to learn more about inclusive language.

👉 <a class="btn btn__small" href="https://uxdesign.cc/gender-inclusive-design-is-the-only-way-968494d5afc2">Use inclusive language</a>

## Three valuable projects to have a look at 

- [vercel/pkg](https://github.com/vercel/pkg) – Package your Node.js project into an executable.
- [wtsxDev/reverse-engineering](https://github.com/wtsxDev/reverse-engineering) – List of awesome reverse engineering resources.
- [awesome-selfhosted/awesome-selfhosted](https://github.com/awesome-selfhosted/awesome-selfhosted) – A list of Free Software network services and web applications which can be hosted on your own servers.

## A new Tiny Helper

![Screenshot of screensizes.app showing various iphone screen resolutions](https://images.contentful.com/f20lfrunubsq/6cH1TJ2cASaO8W6ay6HRSS/74c279db73cbbc126af712f4794575fe/Screen_Shot_2021-07-05_at_11.26.45.png)

Did you ever wonder if there's a single place to find and compare all apple devices' resolutions? Say hello to this week's tiny helper – `screensizes.app`. 

👉 <a class="btn btn__small" href="https://www.screensizes.app/">Compare screen resolutions</a>

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

## A quote to think about

If you want to start writing blog posts and tutorials but are afraid that you don't know the technology well enough, remember... 👇

> "The best technical tutorials are written by engineers who don't know the technology before writing them."

([Source of the quote](https://twitter.com/NTTL_LTTN/status/976177983302991872))

## A song that makes you stop coding

![Screenshot of the video "Candy" from Iggy Pop showing a woman singing](https://images.ctfassets.net/f20lfrunubsq/3bUkF0FmaGhAII16gdE84L/41c28acd63f414fb5ac4229a854c4697/Screen_Shot_2021-07-05_at_12.25.56.png)

This week's song is a rock classic from Iggy Pop. "Candy" is one of these songs that gives me goosebumps no matter what. 🙈

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=6bLOjmY--TA">Listen to "Candy"</a>

## Thank you for reading!

And that's a wrap for the twenty-sixth 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%20because%20...&url=https://www.stefanjudis.com/blog/web-weekly-26/).
- 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/).