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

Howdy, party people!

What new CSS features are you most excited about? It's hands-down the :has() pseudo-class for me, because :has() flips CSS around, and content will finally be able to influence styling!

Dave Rupert published a post including this :has() selector to style the first element but only if it's included in an odd-numbered list.

CSS Code: .items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { 	grid-column: 1 / -1; }

But there's a surprise: you don't even need :has() for this. Temani Afif shared that you can do it with nth-last-of-type, too.

.item:first-of-type:nth-last-of-type(odd) {     background: #f0f0f0;     grid-column: 1 / -1;   }

And while we're at it, do you remember this snippet? It's a CSS quantity query to select li elements, but only if there are three or more list elements. ๐Ÿคฏ

li:nth-last-child(n+3), li:nth-last-child(3) ~ li {   color: red; }

I'm blown away by all this CSS magic, but I wonder how wild and complicated future CSS will become. We're in the :has() discovery phase right now, and we'll have to find out what's possible, but I have to admit that CSS selectors with three pseudo-classes and over sixty characters don't feel great. Maybe I'm just not used to it yet; we'll see. ๐Ÿคทโ€โ™‚๏ธ

And with this, today you'll learn about:

  • JavaScript import maps
  • Coding interview challenges
  • The future of web development

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

Lastly, welcome to the 65 new subscribers! I'm super excited to have you around! ๐Ÿ‘‹

Something that made me smile this week

An ape with the headline "holy shit"

I won't spoil the fun, but this Gorilla video really made me laugh.

JavaScript import maps

<script type="importmap"> {   "imports": {     "lodash/": "/node_modules/lodash-es/"   } } </script>

A new script type is waiting for prime time. JavaScript import maps will make frontend tooling easier to handle!

Ayooluwa Isaiah explains what they're about! But before you only skim the article, watch out for the caching section! I didn't realize that import maps will improve cacheability of hashed files, too. ๐Ÿ‘

Shorten your imports

Problematic abbreviations

HTML code: <p>     <abbr title="Not gonna lie">NGL</abbr>, I was a little overwhelmed when I sat down to write this article.     <!-- the rest of the paragraph --> </p>

Am I the only one struggling with abbreviations? Sure, there's lol (laughing out loud), lgtm (looks go to me) and imo (in my opinion), but every other short character combination forces me to go for a meaning hunt.

Martin Underhill shares my struggles and explains why abbreviations harm accessibility.

Don't use abbreviations

Build your own react

Interactive tutorial: Code on the left and an explanation on the right.

Oldie but goldie; Rodrigo Pombo created a visual and interactive tutorial explaining how one could build their own version of React.

Just read along and watch the code unfold. It's beautiful!

Learn interactively

On that note, Rodrigo also works on Code Hike. The project makes building interactive coding tutorials easier and I'm beyond excited about it!

The direction of web development

Lauri on stage next to a "Serverless adoption is over 50% in 2022" slide.

We had jQuery, Backbone, Angular, React, Vue and continued with Next, Nuxt, Svelte and [enter Hipster JS Framework here]. We also moved from hard-metal servers to the cloud only to then ship things onto the edge.

But what's next?

I can't answer this question, but Laurie Voss shared predictions based on pure data. Disclaimer: you might not like it.

Predict the future

TIL โ€“ em and strong are not announced by assistive technology

And yet here I am after all these years of advocating for using strong (strong importance, seriousness, or urgency) and em (stress emphasis) instead of b (bold) and i (idiomatic text โ€“ italic), only to learn that screen readers don't announce strong or em.

I learned that assistive tech is not announcing the semantically correct elements em and strong. And this is a real bummer because I've been advocating for semantic and meaningful HTML for a long time. ๐Ÿ˜ข

See how VoiceOver ignores semantic markup

Coding challenge with Dan Abramov

Dan and Theo performing a coding challenge on YouTube.

React core-team member Dan Abramov seemed to have been on a YouTube tour last December. The challenge: Dan has to pass a fake coding interview.

I love these videos because they show how everybody struggles in interview situations and what matters is thinking out loud and finding a solution.

Here are two interviews:

All these promises...

Primises Interview Questions โ€“ Five interview questions to help you revise promises quickly.

Speaking of interviews, if you want to double-check your JS promises knowledge, this article includes helpful questions and answers!

Check your promise knowledge

Random MDN โ€“ The fieldset element

The fieldset HTML element is used to group several controls as well as labels (label) within a web form.

From the unlimited knowledge archive called MDN...

Do you know that the fieldset element has superpowers and can disable multiple input elements simultaneously? More on MDN. ๐Ÿ‘‡

Learn more about fieldset

TIL recap โ€“ [ is an actual bash command

What's that? I rarely do bash scripting so I'm always happy to learn more about it.

Did you know that [ is an actual command in shell scripting? Now you do!

Explore bash/zsh conditions

Three valuable projects to have a look at

A new Tiny Helper

Application to create clamp statements.

This clamp generator will help you find the best values if you're using fluid CSS typography.

Clamp it!

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

Thought of the week

Nat Friedman (former GitHub CEO) shares his beliefs on his website. It's worth a read, and the following stuck with me.

A week is 2% of the year.

A song that makes you stop coding

Dude singing from within a pipe.

I went to a summer rock party and "Can't stop" made me dance my shoes off! Are music videos still a thing? Because I'm barely watching any, but I just love this video's style!

Listen to "Can't stop"

Thank you for reading!

And that's a wrap for the seventy-third Web Weekly! If you enjoy it, I'd love you to support me on Patreon or 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! ๐Ÿ‘‹

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
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