Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
7min
Web Weekly keeps you up to date, teaches you web development tricks and covers all things working in tech. If you like it, subscribe below.

Hello, hello party people! πŸ‘‹

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 considering 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.

CSS working group wiki – Incomplete List of Mistakes in the Design of CSS

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!

CSS code from the remedy project

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!

πŸ’™ πŸ’™ πŸ’™

Something that made me smile this week

Tweet from Maddie showing a dog with pilot glasses.

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! πŸ‘¨β€βœˆοΈ

A previous sibbling selector with :has()

Here’s the selector I ended up writing:  `p:has(+ hr) a:only-child {`

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

Writing things down for your future self

Jake Archibald Tweet: What article / blog post did you write that you refer back to the most?

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

Important job interview questions

Disclaimer: These questions are direct, but a company that reacts badly to them may not be a good place to work. There are also a lot of questions here - think of them as themes, and you don't need to ask them all. Prioritize based on what you hear through the process.

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

If you're currently interviewing for a job, find more job hunting resources on my blog.

Supported and modern JS class features

A JavaScript class static and private properties.

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

If you wonder about browser support specifics, MDN has you covered, and things look pretty green across the board.

Smart flex-grow usage

A grid with three element that have specific aspect ratios

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

How custom loaders enable new Node.js tooling flows

// redirect.mjs  export function resolve(specifier, context, nextResolve) {   let redirect = 'app.prod.mjs';    switch(process.env.NODE_ENV) {     case 'development':       redirect = 'app.dev.mjs';       break;     case 'test':       redirect = 'app.test.mjs';       break;   }    return nextResolve(redirect); }

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

Holy snap!

Slide from Adam's talk on scroll snapping

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!

Track how much you speak in meetings

Example showing the "unblah" app. I displays a distribution explaining how much you spoke in a meeting.

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

Random MDN – Event.composedPath()

Event.composedPath() – The composedPath() method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked.

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

TIL recap – scrollIntoView options

document.querySelector('.some-elem').scrollIntoView({   behavior: 'smooth', // 'auto' or 'smooth'   block: 'center',    // 'start', 'center', 'end' or 'nearest'   inline: 'center'    // 'start', 'center', 'end' or 'nearest' });

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

Scroll things into view

If you learned something new, whether small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

A new Tiny Helper

#HEXWORDS  Why bother with a random green when you can choose to be a #BADA55!

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

Be #BADA55

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

Thought of the week

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

The most important thing in communication is hearing what isn’t said.

A song that makes you stop coding

A colorful painting in which you can't recognize anything but colors.

"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"

Thank you for reading!

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. β™₯️

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! πŸ‘‹

Related Topics

Related Articles