Sunday, July 14, 2024
HomeJavaScriptInternet Weekly #73 | Stefan Judis Internet Improvement

Internet Weekly #73 | Stefan Judis Internet Improvement

What new CSS options are you most enthusiastic about? It is hands-down the :has() pseudo-class for me, as a result of :has() flips CSS round, and content material will lastly have the ability to affect styling!

Dave Rupert printed a put up together with this :has() selector to fashion the primary ingredient however provided that it is included in an odd-numbered record.

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

However there is a shock: you do not even want :has() for this. Temani Afif shared that you are able to do it with nth-last-of-type, too.

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

And whereas we’re at it, do you bear in mind this snippet? It is a CSS amount question to pick out li components, however provided that there are three or extra record components. 🤯

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

I am blown away by all this CSS magic, however I’m wondering how wild and complex future CSS will grow to be. We’re within the :has() discovery section proper now, and we’ll have to search out out what’s potential, however I’ve to confess that CSS selectors with three pseudo-classes and over sixty characters do not feel nice. Perhaps I am simply not used to it but; we’ll see. 🤷‍♂️

And with this, right this moment you may find out about:

  • JavaScript import maps
  • Coding interview challenges
  • The way forward for net growth

… and, as at all times, GitHub repositories, a brand new Tiny Helper and a few music.

Lastly, welcome to the 65 new subscribers! I am tremendous excited to have you ever round! 👋

One thing that made me smile this week

An ape with the headline "holy shit"

I will not spoil the enjoyable, however this Gorilla video actually made me chortle.

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

A brand new script kind is ready for prime time. JavaScript import maps will make frontend tooling simpler to deal with!

Ayooluwa Isaiah explains what they’re about! However earlier than you solely skim the article, be careful for the caching part! I did not notice that import maps will enhance cacheability of hashed information, 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 one one battling abbreviations? Certain, there’s lol (laughing out loud), lgtm (appears to be like go to me) and imo (for my part), however each different brief character mixture forces me to go for a which means hunt.

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

Do not use abbreviations

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

Oldie however goldie; Rodrigo Pombo created a visible and interactive tutorial explaining how one may construct their very own model of React.

Simply learn alongside and watch the code unfold. It is stunning!

Be taught interactively

The route of net growth

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

We had jQuery, Spine, Angular, React, Vue and continued with Subsequent, Nuxt, Svelte and [enter Hipster JS Framework here]. We additionally moved from hard-metal servers to the cloud solely to then ship issues onto the sting.

However what’s subsequent?

I can not reply this query, however Laurie Voss shared predictions based mostly on pure knowledge. Disclaimer: you won’t prefer it.

Predict the long run

TIL – em and sturdy will not be introduced by assistive know-how

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 realized that assistive tech is just not asserting the semantically right components em and sturdy. And it is a actual bummer as a result of I have been advocating for semantic and significant HTML for a very long time. 😢

See how VoiceOver ignores semantic markup

Coding problem with Dan Abramov

Dan and Theo performing a coding challenge on YouTube.

React core-team member Dan Abramov appeared to have been on a YouTube tour final December. The problem: Dan has to move a pretend coding interview.

I like these movies as a result of they present how everyone struggles in interview conditions and what issues is considering out loud and discovering an answer.

Listed here are two interviews:

Primises Interview Questions – Five interview questions to help you revise promises quickly.

Talking of interviews, if you wish to double-check your JS guarantees information, this text consists of useful questions and solutions!

Verify your promise information

Random MDN – The fieldset ingredient

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

From the limitless information archive referred to as MDN…

Are you aware that the fieldset ingredient has superpowers and might disable a number of enter components concurrently? Extra on MDN. 👇

Be taught extra 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

Application to create clamp statements.

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

Clamp it!

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”

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



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments