Web Weekly #72 (#blogPost)

Have you ever wondered why it's currentColor and not current-color in CSS? Or why it's border-radius and not corner-radius? Or why we have to put * { box-sizing: border-box; } into every stylesheet?

The answer is simple: designing a programming language is incredibly hard. And it's even harder when you consider that every addition will stay on the web platform forever.

Once a feature is out there, people start using it, and that's it then. Removing or changing functionality would break the web, and we can't do this!

Every few months, I come across the Incomplete List of Mistakes in the Design of CSS. The list includes confusing CSS features that are just that: confusing mistakes.

But what should you do about these mistakes?

This week I discovered Jen Simmons' "CSS Remedy" project, a collection of CSS rules that fix parts of CSS' technical debt.

Contrary to reset or normalize stylesheets trying to unify user agent styles, "Remedy" focuses on correcting CSS mistakes. It's an interesting approach!

Go through the CSS files; they're a well-documented read, and I'm sure you'll learn something new!

And with this, today you'll learn about:

• A previous sibling selector
• Well-supported JS class features
• Custom loaders in Node.js

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

Lastly, welcome the 19 new subscribers and the first two people who decided to support this newsletter on Patreon! I'm humbled and touched by the support! 😊 💙

Nothing cute or funny passed my way this week, but luckily Maddie helped out. Here's a stellar dog pilot performance from the weird corners of the internet! 👨‍✈️

• describe and it are available in newer Node versions.
• I asked people about their favorite podcasts and received great recommendations.
• Git 2.37.0 now allows to push and create new remote branches automatically.

The CSS pseudo-class :has() is on its way. Safari shipped it in 15.4 and Chrome will support it beginning of August with version 105.

I always thought it's mainly a "parent selector" and was blown away when I learned that you can use it to select previous siblings, too. 🤯

Jim Nielsen explained how this works on his blog.

Select previous elements

Jake Archibald asked on Twitter which self-written post people refer back to the most. The replies are a goldmine of evergreen posts.

Find valuable posts

How do you evaluate if the company you're interviewing with is a good fit? It's tough!

James Hawkin collected direct but essential questions for your possible future employer.

Here are some examples:

• "What's your revenue? What was it a year ago?"
• "What are the things or behaviors that would cause a person in this role to fail?"
• "How do you attract and retain really strong hires?"

Be direct

I don't remember when I wrote a JavaScript class the last time. But I learned this week that private fields and static methods are well supported.

Kyle Simpson aka @getify shared a gist with as many new class features as possible.

See classes in action

Nils Bender had a problem: he wanted to lay out elements in a grid and match specific aspect ratios. And while this seems easy, it wasn't.

His solution includes flex, aspect-ratio and custom properties, and he was so kind to share it with the world. 🙇‍♂️

Be creative with flex

Node.js v18.6 comes with a new --experimental-loader command line flag. Jacob Smith shared when and how you can use the new loaders.

I don't want to look too far into the future, but this Node.js addition could change how we import files in Node.js entirely!

Import files with style

Adam Argyle dropped some serious CSS scroll knowledge at CSSDay. I haven't seen the recording yet, but the slides speak for themselves.

The best thing: the entire slide deck is a huge scrollable website implementing all the demos!

Snap it!

Giving everybody enough space in a remote meeting is tough. If you're struggling with giving people time to speak up, "Unblah" is a Mac app that analyzes your meeting participation.

Find out how much you speak

From the unlimited knowledge archive called MDN...

Kilian Valkhof shared the event.composedPath(), which allows traversing the parent elements of an event target.

Traverse the DOM

Do you know that you can scroll DOM elements into specific viewport areas? Now you do!

Scroll things into view

• jcsalterego/jqq – An interactive wrapper around jq.
• Gruntfuggly/todo-tree – A VS Code extension displaying your project's TODO and FIXME comment.
• onceupon/Bash-Oneliner – A collection of handy Bash One-Liners and terminal tricks.

I'm always impressed when people demo CSS likes #B055E5 and use all these hexword colors. #HEXWORDS is a list of all these hex CSS color words.

Be #BADA55

In the spirit of meetings and communication; this week's quote comes from Peter Drucker.

"Breathing" from Ben Böhmer, Nils Hoffmann & Malou is a nicely rolling electro track with a beautiful chorus voice. It's a perfect track to focus and get into the zone.

Listen to "Breathing"

And that's a wrap for the seventy-second Web Weekly! If you enjoy this newsletter, I'd love you to tell others about it. ♥️

• Share it on Twitter.
• Forward it to someone who might like it.

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

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