Internet Weekly #130 | Stefan Judis Internet Improvement


Guten Tag! Guten Tag! 👋

Are you aware how ARIA reside areas work? Or do you typically wrestle to middle textual content vertically? Or wish to get began with scroll-driven animations however do not know the way?

Activate the Internet Weekly tune and discover all of the solutions beneath. Take pleasure in!

Do you wish to share your favourite track with the Internet Weekly neighborhood? Hit reply; there are 4 extra songs left within the queue.

This Internet Weekly challenge is already beefy sufficient, so I am going to skip a protracted intro and solely open with some single-purpose URLs in your each day web use.

I simply find it irresistible after I can reply somebody with a URL.

<script type="module" async blocking="render">   // vital JavaScript code...   </script>

In uncommon instances like AB testing, you would possibly wish to delay rendering to keep away from format shifts. However how do you do that with out blocking the HTML parser?

I can solely consider a not-so-great opacity: 0 hack, however fortunately, there is a new property on the horizon — blocking: render.

Block rendering*

✱ however provided that you recognize what you are doing.

Bramus explaining scroll driven animations code.

I nonetheless have not made it to play with scroll-driven animations (Chromium-only), however after I do, I am going to positively begin by watching Bramus’ new, free course.

Make it fancy

Specificity misconceptions

However, I also sometimes raise one of my eyebrows as sometimes I, unfortunately, encounter something that’s just outright wrong.  To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS …

And this is Bramus once more: CSS specificity and the cascade are highly effective but additionally complicated.

Three widespread however mistaken specificity ideas are:

  • Specificity is a decimal rating.
  • Utilizing the type attribute provides Specificity.
  • Utilizing !vital provides Specificity.

When you suppose considered one of these is true, this publish if for you.

Refresh your CSS understanding

Scheduled photograph periods in your websites

Screenshots of Alex' website

I simply arrange a GitHub repo that visits my web site, takes screenshots and commits them to the repo. I like to archive issues.

If you wish to doc how your websites change over time, Alex wrote a superb tutorial about it.

Take pictures

You are midway by means of!

Wowza! Would you get pleasure from getting Web Weekly straight to your inbox?

The great bizarre internet – the visualized internet

A map of dots that are all connected to each other. The dot with `stefanjudis.com` is highlighted.

I do not know this map’s information supply, however following all of the Web’s hyperlinks is simply magical.

Inspect the web

How do reside areas work?

Live regions that are already "populated" don't work

When you surprise how ARIA reside areas work and the way it’s best to use them to make your web site’s updates extra accessible, Patrick examined display screen reader / browser mixtures and shares suggestions.

Announce important stuff

HTML example showing that a link without `rel=noopener` is that same as a link without it. This implicit behavior is support since Chrome 88, Firefox 79 and Safari 12.1.

When you’re setting rel="noopener" in your hyperlinks to stop entry to window.opener, cease it and avoid wasting characters.

Use the default

Depart the globals in peace

Being against patching globals doesn't mean being against convenience.

Patching globals would possibly seem to be an affordable strategy so as to add performance to the platform, however normally it fights again rapidly. It puzzles me that JS ecosystem heavyweights Subsequent.js, React and Bun thought it was a good suggestion. This publish explains what to do as a substitute. 💯

Don’t mess with globals

Why vertically centering textual content continues to be horrible

Multiple font render previews with different Asc, Desc and Diff values which leads them to render differently.

I am not normally a fan of those “centering issues in CSS exhausting” jokes, however final week, I desperately tried to align an icon subsequent to a customized font. And what ought to I say? I gave up…

Niki got here alongside simply in time with some font magic in order that I can sort out issues once more subsequent week.

Center all the things

Thanks Simon, for sending this text over!

zoom — the zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

From the limitless MDN data archive…

Here is a enjoyable one: you in all probability know that whenever you scale a component through CSS, it would not have an effect on its format dimension.

Typically, I discover this complicated, however if you wish to scale the precise dimension, zoom does this. And the CSS property is nearly to enter the baseline.

Chrome helps it since model 1 (#wat?), Safari joined the social gathering with model 3.1 (#wat^2)? and now, in 2024, Mozilla determined to prioritize zoom with Firefox 126. 😅

Make things bigger

Let me know if you recognize why this “old fashioned” property was thought-about now. I am tremendous curious!

TIL recap – vital CSS customized properties

An editor example showing that `color: yellow` overwrites a custom property even though it uses "!important"

I attempted to pair !vital with customized properties some time in the past and bumped into a giant shock. If the code above surprises you, this publish is for you.

Learn about the cascade

.card {   transition-property: opacity, display;   transition-duration: 0.25s;   transition-behavior: allow-discrete; }  .card.fade-out {   opacity: 0;   display: none; }

It is nonetheless in progress, however Firefox, because the lacking engine, began engaged on transition-behavior. What’s it good for?

You in all probability know the issue of setting opacity: 0 and show: none in the identical go, making a easy transition unattainable. transition-behavior permits you to transition opacity and flip over show as soon as opacity is about to 0. Magic!

Transition the display property

Three helpful initiatives to take a look at

Preview of SVGViewer open in a browser. The code and a live preview are visible.

When you’re working with SVGs and are annoyed that design instruments aren’t exhibiting you code (no less than I have never found these options), SVGViewer helps you to tweak and preview SVGs with code. That is golden! 👇

Tweak all these icons

💙 When you realized one thing from this challenge, give back and support me with a small donation on Patreon.

These small gestures actually assist me keep motivated. 😊

I exploit a AI each day, however there’s nothing extra so as to add to this quote from Molly White’s article.

[AI tools] are helpful in the identical means that it would sometimes be helpful to delegate some duties to an inexperienced and typically sloppy intern.

Liked this e-mail? Hated this e-mail? I wish to hear about it!

When you suppose there’s one thing that must be improved or one thing that you simply loved, reply to this email because I want to know more!

And with that, maintain your self – mentally, bodily, and emotionally.

I am going to see you subsequent week! 👋

Leave a Reply

Your email address will not be published. Required fields are marked *