Thursday, November 14, 2024
HomeJavaScriptNet Weekly #143 | Stefan Judis Net Growth

Net Weekly #143 | Stefan Judis Net Growth


Guten Tag! Guten Tag! 👋

Have you learnt function detect @container, @layer or @starting-style? Are you excited in regards to the new CSS brand? And are you enthusiastic about Interop 2025?

Activate the Net Weekly tune and discover all of the solutions beneath. Get pleasure from!

Mario listens to “Röyksopp – Oh, Lover”:

Oh Lover makes me at all times really feel like floating and dancing whereas sitting on my workplace chair. It´s the right tune for me to return down and it really works each time.

Do you wish to share your favourite tune with the Net Weekly neighborhood? Hit reply; there are two extra songs left within the queue.

One thing that made me smile this week

Stack Exchange issue: Why does man print "gimme gimme gimme" at 00:30?

The man command, which you should utilize to entry a applications handbook, comes with an ABBA-themed easter egg printing out gimme gimme gimme. I like it!

ABBA all of the issues

get began with a display reader

How to get started with VoiceOver (Mac) and NVDA (Windows)

Checking accessibility is required to ship good things for the net. However how do you get began?

Accessibility is a big subject, however realizing management a display reader is a precious first step. Martin gives some guides to get you began on Home windows and Mac.

Aspect be aware: should you’re on the lookout for a quick-to-use accessibility guidelines, Moritz’s cheatsheet is nice.

Great convention talks

Video Archive — Conference talks from eight years of XOXO.

To date, I’ve watched three newly launched XOXO conf talks:

Depart Netflix alone tonight and watch these inspiring talks as a substitute!

promise.attempt entered ECMAScript proposal Stage 4

JS Code: Promise.try(someNastyFn) 	.then((value) => { 		console.log(value); 	}) 	.catch((error) => { 		console.error(error); 	});

You most likely know the Promise strategies resolve and reject. The 2 static strategies simply bought firm — Promise.attempt. In case you should deal with features that might return errors, values or different guarantees, Promise.attempt is a useful addition to keep away from some attempt/catch blocks.

To date, solely Chromiums ship it, however now that we’ve got reached Stage 4, it will be applied shortly.

Be taught extra about “Promise.attempt”

The 2 competing masonry CSS requirements

Examples of the two competing masonry. One integrates in CSS grid the other one is independent.

If you test the “Grid Format Module Stage 3” spec, you may be stunned to find Masonry layouts.

And also you may be much more stunned to study that the editor’s draft consists of two competing requirements. One will combine Masonry layouts into the prevailing CSS grid performance (grid-template-rows: masonry;) whereas the opposite is grid-independent (show: masonry).

Each proposals include good arguments, and Geoff summarizes the dialogue completely.

Be taught extra about Masonry

You are midway by way of!

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

The fantastic bizarre internet – Is my blue your blue?

Is my blue your blue?

Give it a attempt — I am a real impartial with a hue boundary at 174. 😅

Determine!

function detect CSS @-rules

Multiple CSS at-rules (@container, @counter-style, @starting-style,...) and their visualized browser support

With the CSS evolution in full swing, many new at-rules are coming into the net. We have already got baseline-supported @container, @property and @layer. However we nonetheless have to attend for some at-rules to achieve basic assist. @view-transition or @starting-style instantly come to thoughts.

How may you function detect these at-rules and wager on progressive enhancement?

@support-at-rule doesn't work yet

Theoretically, you would use @helps at-rule(). Sadly, the CSS at-rule operate is not supported wherever but.

However there is a trick to evaluating at-rule browser assist. CSS at-rules usually include “regular” CSS properties. @container comes with the container-type property. @position-try allows position-try: flip-block. Juan explains use this data to detect all of the juicy new CSS guidelines.

Characteristic detect the brand new’n’fancy

And if you wish to dive even deeper, Bramus is on a function detection world tour currently and covers the at-rules Juan missed.

Think about all of the trade-offs

Why GOV.UK’s Exit this Page component doesn’t use the Escape key

The Gov.uk staff applied a brand new “Exit this Web page” element to supply guests a fast keyboard-only strategy to go away a web page. They usually supply this function by urgent shift 3 times.

Shift? Thrice? beeps explains in fabulous element all of the concerns for constructing JS performance with the fewest trade-offs.

Assume issues by way of

Node.js v23 comes with node --run, however …

Examples showing that `node --run` is slightly faster than `npm run` but also doesn't execute npm life cycle scripts.

Node.js v23 was launched final week and ships a brand new and secure node --run flag. The flag permits working bundle.json scripts with out npm. It is barely sooner than npm run (we’re speaking a few hundred ms) however would not run life cycle scripts (e.g. prestart). So, npm --run just isn’t an npm run alternative.

Will you employ it? I will stick to npm run on this case… 🤔

The state of Interop 2025

Interop focus areas sorted by number of emojis. JPEG XL, Scrolling on mobile devices and @custom-media are leading.

Somebody requested me the opposite day the way it’s determined what browser options make it into Interop, and I did not have a solution. So, I researched a bit, and it would not appear to be the voting and resolution course of is documented wherever. Do the browser makers determine in secret the place the net is heading?

The Open Net Advocacy group filed a problem demanding extra transparency. And I agree — all I do know is that some people will decide the Interop focus areas earlier than December nineteenth, 2024. I’ve no concept how choices will likely be made… Ouch.

However within the meantime, should you’re interested by what function requests obtained probably the most neighborhood upvotes, the labeled GitHub points present a fast concept of internet function demand.

Random MDN – light-dark()

CSS: :root {   color-scheme: light dark; } body {   color: light-dark(#333b3c, #efefec);   background-color: light-dark(#efedea, #223a2c); }

From the limitless MDN data archive…

Do you know that the light-dark CSS coloration operate means that you can type gentle and darkish mode in a single declaration and in addition is baseline supported? Now you do. 🫵

Take away some media queries

TIL recap – the begin and worth attribute

Code example showing how to apply the li item "start" attribute.

This is a fast HTML get together trick: do you know you’ll be able to apply a begin worth to ordered lists and even give particular values to record entries?

Management your lists

ECMAScript news — Stay up-to-date on JavaScript and tools

The ECMAScript information publication is one in every of my favourite methods to remain up-to-date with the fast-moving JS ecosystem. It is brief, very well-curated, and to the purpose. It’s best to test it out!

Three precious tasks to take a look at

Screenshot of VTracer vectorizing the Web Weekly header.

In case you’re on the lookout for a fast strategy to vectorize photos to SVG, it’s best to try VTracer. I attempted the Net Weekly header, which did a good job of SVGing it.

Vectorize

I loved this fast article on self-reflection lots.

In case you do what everybody does, you are gonna grow to be what everyone seems to be.

Did you study one thing from this subject?

💙 In that case, be a part of 15 different Net Weekly readers and provides again with a small month-to-month donation on Patreon or GitHub Sponsors.

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

In case you assume one thing wants enchancment or one thing sparked some pleasure, reply to this e mail as a result of I wish to know extra!

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

I will see you subsequent week! 👋

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments