Web Weekly #85

Written by Stefan Judis
Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag!

Have you ever used forgiving CSS selectors? Or do you know that not all JavaScript events can be trusted? Or that aria-label can be considered a code smell?

All the answers and much more are included in this week's Web Weekly. 🫣

Enjoy!

It's funny how quickly editor habits change. Rach Smith shared some VS Code tips, and oh boy... I used to fold (⌘k + ⌘0) and unfold (⌘k + ⌘j) code blocks all the time, but I just stopped doing it for some reason. I don't know why. 🤷‍♂️

Folding and unfolding code in VS Code

Obviously, there are thousands of shortcuts I don't use. ⌘⇧k deletes a line, but it's just not making it into my muscle memory.

Usage of ⌘⇧k to delete a line.

On the other hand, some shortcuts just click. For example, I use ⇧⌥↓ to copy lines all the time.

Shortcut to copy an entire line.

Maybe I should start remapping all these commands to make them brain compatible? But this seems like a lot of work...

How do you get the most out of your editor? If you have any tips, hit reply and share the wisdom.

Something that made me smile this week

Additionally, and specifically for prefers-color-scheme, sites by all means want to avoid a Flash of inAccurate coloR Theme (FART).

Let's talk acronyms! You might know about all these flashes:

  • FOIT: flash of invisible text
  • FOUT: flash of unstyled text
  • FOFT: flash of faux text

And now, there's a new flash in town — flash of inaccurate color theme! And what's its acronym? FIACT? FICT? FIAT?

Nope! It's FART — Flash of inAccurate coloR Theme. I have no words... 😆💨

See it yourself on Chrome Status

The sucky WFH goodbye

Maybe we should invent some new rituals. Something to ease our passing from one job into the next.

I've been working remotely and entirely from home for almost five years now, and I enjoy it a lot! I like having no commute and running on my own schedule. But there are obviously downsides to it, too.

You don't bond with your colleagues as much and can sometimes feel pretty lonely. But the absolute worst is saying goodbye. Teren's Eden shares thoughts on changing jobs in a remote-first world, and they speak from my heart!

Think about missing WFH rituals

Forgiving CSS selectors

That's different when you're using :has(), :where() or :is() because they're so-called “forgiving selectors”. They just ignore the invalid selectors and apply the rules to the others.

I've had a draft about forgiving CSS selectors waiting for me for ages, and Manuel beat me to it. 👇

The hidden functionality of :is, :where and :has

UNIX command replacements that are better than the original

Recently there has been a surge of command line tools and utilities written in Rust, and many of them are intended to replace standard Unix commands. They are faster, more user-friendly, and have more features than their standard Unix counterparts.

When I started replacing the native UNIX commands with Rust-based ones, it felt awkward initially, but bat (cat replacement) and exa (ls replacement) are just too good. Deepu K Sasidharan shares more tools!

Pimp your terminal experience

The things your manager might not know

I said this already, but I want to reiterate it: the reason your manager doesn’t know all these things isn’t because they’re not doing their job. It’s literally impossible for them to keep track of every detail about every person’s on their team’s job. It’s normal for managers to rely on their team to keep them informed about important facts they need to know, especially with more senior engineers.

Oldie but goldie: Julia Evans shares how to "manage up" and why it benefits your work life. 💯

Keep everybody informed

How to test if your stuff is accessible

I offer some approaches you can and should take before you set expectations about the accessibility of your thing — code or article or talk or whatever.

Web Development is messy and complicated. Ideally, we test our sites across browsers, devices, networks, operating systems, user settings and much more to be sure that things work.

And accessibility is no different.

But how do you test for it? Do you tab around? Check Lighthouse? Spin up a screen reader?

Adrian Roselli shared a list of things to consider to be sure something's accessible. 🔖

How to check for accessibility

A nifty border-radius trick

A tool to generate the correct border-radius when elements are nested.

Paul Hebert shares a nifty trick to align the border-radius of nested elements visually. Pretty smart!

Improve your nested border radiuses

TIL – out of range clip-path values

Example showing out of range clip-path polygon values.

Short'n'sweet: I haven't used the clip-path property much, but after reading one of Temani Afif's magical CSS posts, I discovered that polygon supports "out of range values". They're perfect for cutting out element corners! 👏

Clip the corners

Is aria-label a code smell?

When I encounter too much, or mis-applied aria-label it makes me take notice. This code smell puts me on alert to investigate things more thoroughly, as it most likely indicates accessibility issues.

Eric Bailey covers a lot of ground in a single article on aria-label usage. 👏 If you want to learn more about accessible names, ARIA support and common pitfalls, this post is for you.

Avoid aria-label?

Random MDN – Event.isTrusted

Event.isTrusted — The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().

From the unlimited knowledge archive called MDN...

Did you know that JavaScript events have an isTrusted property? Now you do!

Trust your events

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – Element.prototype.matches

const elem = document.querySelector('.foo'); elem.classList.contains('bar'); // true elem.matches('.bar'); // true

How do you check if an element contains a particular class? I usually use classList.contains, but I learned that there's also matches! 👏

Match it

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

A new Tiny Helper

Screenshot of the "Show code" app showing a beautiful code preview and a bunch of controls.

Show code is an app to create beautiful screenshots of your best code. It shines with a looooot of configuration options!

Beautify your code

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

Former Heroku CTO Adam Wiggins was on the Changelog podcast and shared his journey of building the company. The excellent episode included poetic and nerdy words about remembering things.

Memory is a lossy format.

A song that makes you stop coding

Pantha du Prince - Blume Bendik HK Edit (Official Video)

My Spotify was dominated by chilled electro tracks this week and Pantha du Prince's "Blume" comes with strong Moderat vibes. Love it!

Listen to "Blume"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.1k emails. If you enjoy it, consider supporting me on Patreon. ♥️

Or tell your friends about it:

If you're not a subscriber, change that! 😉

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! 👋

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 3 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles