Web Weekly #73 (#blogPost)

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 w…



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.

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.

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

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

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





JavaScript import maps

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

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

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

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

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

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…

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

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

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

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

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! 👋



Reply to Stefan


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2024-03-28T19:04:27+00:00) » Web Weekly #73 (#blogPost). Retrieved from https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/.
MLA
" » Web Weekly #73 (#blogPost)." Stefan Judis | Sciencx - Monday August 1, 2022, https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/
HARVARD
Stefan Judis | Sciencx Monday August 1, 2022 » Web Weekly #73 (#blogPost)., viewed 2024-03-28T19:04:27+00:00,<https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/>
VANCOUVER
Stefan Judis | Sciencx - » Web Weekly #73 (#blogPost). [Internet]. [Accessed 2024-03-28T19:04:27+00:00]. Available from: https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/
CHICAGO
" » Web Weekly #73 (#blogPost)." Stefan Judis | Sciencx - Accessed 2024-03-28T19:04:27+00:00. https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/
IEEE
" » Web Weekly #73 (#blogPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/. [Accessed: 2024-03-28T19:04:27+00:00]
rf:citation
» Web Weekly #73 (#blogPost) | Stefan Judis | Sciencx | https://www.scien.cx/2022/08/01/web-weekly-73-blogpost/ | 2024-03-28T19:04:27+00:00
https://github.com/addpipe/simple-recorderjs-demo