Monday, October 12, 2026
HomeJavaScriptNet Weekly #200

Net Weekly #200


Guten Tag! Guten Tag! 👋 

Have you learnt that fetch has two phases? Are you wishing for a greater approach than CSP to manage outgoing community connections? And do you have to ship import maps in your websites?

Activate the Net Weekly tune and discover some solutions beneath. Take pleasure in!




Ellen says:

The primary time I heard it, I laughed out loud. The second time, I laughed quietly. The third time, I acquired up and frolicked the laundry that had been sitting within the drum since Friday and had, by then, developed a worldview of its personal. Give the music a hear. Ideally whereas folding laundry. Or, let’s be trustworthy, whereas watching another person fold it.

Do you need to share your favourite music with the Net Weekly neighborhood? Hit reply; there are three extra songs left within the queue.


I requested you to take part within the State of Dev survey in Net Weekly 197. The outcomes are in, so let’s take a look at how the 5,463 respondents really feel concerning the trade. 🤞

The intro covers all of the subjects that I and possibly you felt during the last 12 months. I do not need to begin this electronic mail with a downer and solely have a look at one stat on this subject space. The present feelings concerning the tech trade within the intro summarize issues pretty effectively for me.

Which emotions best describe how you currently feel about the tech industry? 1. Exhausted 2. Disillusioned 3. Curious 4. Overwhelmed 5. Anxious

That is fairly wild: for those who embody the oldsters that mentioned that staying and leaving tech are about as possible, 50% of the contributors assume that not working in tech in 5 years is an actual risk. I additionally joke round that I’ll do one thing “actual” ultimately, however I am shocked that it is so many people. Let’s all meet within the forests to cut some wooden then!

Within the next 5 years, how likely do you think it is that you will have to change careers due to reasons beyond your control? Very unlikely: 23%, Somewhat unlikely: 27%, Equally likely/unlikely: 24%, Somewhat likely: 18%, Very likely: 8%

28% of the individuals kind on the “not so nice” Apple keyboard? Wow! If that is you, care for your wrists and be a part of #teamSplitKeyboard! It actually does make a distinction.

What kind of keyboard do you typically use for work? Apple keyboard: 28%, Mechanical keyboard: 25%, Logitech 15%.

And to shut this small spotlight part: the favourite online game is Clair Obscur: Expedition 33, and the most-read e book is Dungeon Crawler Carl. I have never heard of both. Are they that good? Ought to I strive them? I will get a brand new PlayStation for GTA 6 in any case… 🫣

Usually, I might say that the survey outcomes are extra constructive than I believed they might be. And that makes me joyful, as a result of I are likely to doom spiral once in a while. Not at present, although, so let’s get into some good net stuff!


In case you get pleasure from Net Weekly, share it together with your family and friends.

A fast “repost” actually helps me out. Thanks! ❤️


Net Weekly Housekeeping 

You may need observed that I despatched out the final Net Weekly 4 weeks in the past. What occurred to the “weekly”?

To start with (and I discussed that a few instances already), doing one thing each week is approach more durable than you would possibly assume. Operating Net Weekly prompted me a variety of stress and nervousness over time, and I wanted to be taught that the world will not finish if I skip per week or two. Surprising, I do know.

And second of all, I’ve been very busy. I reentered the convention sport and spoke at two occasions within the US and Greece. And on high of that, I participated in two “kinda extremely” biking marathons (for the Strava bike nerds, let’s join!). And with these occasions lined up, there was frankly no time to learn the information or write the publication. However right here we’re once more. So let’s get to it! 🎉

This week's bag of karma points goes to Daniel and David.

An enormous shoutout this week goes out to Daniel and David! Thanks a lot for supporting Net Weekly. 58 individuals now assist me out with just a little bit of cash. Thanks all!

These small gestures actually maintain me getting in these robust instances of limitless slop grenades. In case you additionally need to help indie publishing, you are able to do so on Patreon or GitHub Sponsors.

One thing that made me smile this week 

My website destroyed by a tiny character.

I had a tough time capturing this website’s awesomeness, however, truthfully, this is superb!

In case you ever wished to destroy an internet site, at present’s the day as a result of you may instruct this little “humorous orange man” (not the president) to shoot at parts. The leaping round on headings and pictures may be very sensible, too.

Destroy parts

No code 

  • Typically it is higher to not say something → “[Social media dialogue] is a variety of saying and never a lot listening. Which is why it usually degrades into the bottom types of communication: the name-calling, the ridiculing, the mocking, the shouting, the insulting.”
  • On being pleased with doing the work → “Folks acknowledge what you probably did after they see (or perceive) how a lot work went into it.”
  • I do not need the main points → “I realised that ‘I do not need the main points’ wasn’t being dismissive.”

From the longer term: linked parameters in SVG 

Three different ways to use linked parameters

I already shared hyperlink parameters in Net Weekly 196. What are they about?

You in all probability know the issue: you load some SVGs from someplace exterior and want to move in some colours or variables. That hasn’t actually been doable till now. Firefox Nightly has now shipped the primary components of the brand new Linked Parameters Module spec.

Ollie printed a TL;DR on it if you wish to be taught extra, however for a extra sensible instance Vadim has you coated. 👇

Hyperlink some values

The 2 phases of fetch 

const response = await fetch(url) // awaits the headers const body = await response.json() // awaits the body

Did you ever marvel why you should await twice to entry the response physique utilizing fetch? I did not however was truthfully irritated by it. Nonetheless, after studying Gabor’s put up, issues make extra sense. The primary await will await the response headers to return in. The second await waits for the response physique. And customarily, I did not know that response.physique is a ReadableStream.

If you wish to nerd out about fetch and JS internals, you will dig this text.

Perceive fetch

Cell zoom ideas 

Snippet: <meta name="viewport" content="width=device-width, initial-scale=1.0">  with a highlight telling the "initial-scale" isn't needed anymore.

I simply redeployed my website as a result of Vale jogged my memory that I am utilizing a relic of the previous. Right this moment I discovered that initial-scale is not wanted to forestall iOS from doing bizarre zoom issues anymore.

Clear up

.button {   touch-action: manipulation; }

And talking of zoom actions, have you ever ever used the touch-action CSS property? Andy defined when it may be useful.

Ignore the double faucets

A brand new method to management the community 

Connection-Allowlist: ("https://api.example.com/*" response-origin)

Do you ship a content material safety coverage (CSP) in your website? Be trustworthy, I will not decide.

I do on stefanjudis.com, and it is fairly one thing. CSP has at all times been highly effective but additionally appeared approach too sophisticated. And what do you do when an previous commonplace is just too sophisticated? Right, you invent a brand new one. On this case (as at all times) it feels okay, although. I like having a fast method to block/permit connections. What do you assume?

Keep in management

It sucks, although, that there are not any actual MDN docs for this but… It looks like the online platform docs are slowly slipping…

The fantastic bizarre net 

A colorful scene with a zebra.

I shared many bizarre net issues over time, however this website is certainly within the weirdness high three. I am unable to even describe (or perceive) what’s going on right here however man… I really like the bizarre web.

Accumulate issues?

Issues with bidirectional textual content 

<p>   He opened the gift and said <bdi>چه قشنگه!</bdi> and then started crying. </p>

I’ve by no means needed to construct websites transport in languages which can be learn right-to-left. That is gotta be robust for positive. Mojtaba explains what it takes to combine and match left-to-right and right-to-left textual content. Be prepared, there will be dir=auto (which I have never seen earlier than), the bdi aspect, and the U+200E / U+200F Unicode characters.

Hold the best order

Named breakpoints with out media queries 

@container style(--viewport: 'mobile') {   /* Styles for the mobile bucket */ }

I am not gonna lie, I am nonetheless bummed about @custom-media going nowhere, however now that container type queries have reached Baseline, you should utilize them to call your breakpoints with just a little trick.

Title your breakpoints

Bramus’ {custom} parts tour 

HTML snippets for the "show-keystrokes", "rich-input" and "mermaid-element" custom elements.

Bramus was busy extending the online platform the final couple of weeks. In case you’re in want of any of those parts, give him a excessive 5 whenever you see him!

CSS-only {custom} parts 

my-card {   display: grid;   grid-template-areas:     "header"     "body"     "footer";    [slot="header"] { grid-area: header; }   [slot="body"]   { grid-area: body; }   [slot="footer"] { grid-area: footer; } }

I’ve combined emotions about Burton’s CSS-only method to {custom} parts. However the best way he makes use of slots may be very sensible! What’s your take?

Type with {custom} parts

Random MDN – importmap 

<script type="importmap">   {     "imports": {       "circle": "https://example.com/shapes/circle.js",       "square": "./modules/shapes/square.js"     }   } </script>

From the limitless MDN information archive…

Ollie mentioned the necessity for construct instruments in 2026 and I am nonetheless amazed that importmap is broadly baseline accessible nowadays.

Import

TIL – Escape CSS selectors in JavaScript 

console.log(`.${CSS.escape('a:b')}`);      // ".a:b" console.log(`[href=${CSS.escape('@')}]`); // "[href=@]" console.log(`.${CSS.escape('[jooo]')}`);  // ".[jooo]"

This is a cool studying from a few years in the past: are you aware that there is a CSS namespace in JavaScript that features a methodology to escape CSS selectors? Why?

I explored some use circumstances on the weblog.

Escape

New on the baseline 

Widely available: "checkVisibility" / Newly available: "text-box"

With Firefox 154 the new text-box CSS shorthand entered baseline newly accessible. If you wish to management the scale of textual content containers and do away with all this font-specific white area, it’s best to test it out. It was about time…

And on the entrance of latest broadly accessible net options: are you aware that the checkVisibility() methodology is a factor? Now you do, and you should utilize it safely all over the place!

Three helpful tasks to take a look at 

A brand new Tiny Helper 

Make your logo brighter than white — Upload a logo, choose which colors should glow, download an HDR JPEG. On HDR screens the chosen parts shine up to 7.5× brighter than #FFFFFF. Everywhere else it's a perfectly normal JPEG.

Now that is cool! You may need seen these photos which can be “whiter than white” in Chromium or Safari. This impact is predicated on some fancy HDR picture tips that I shared in Net Weekly 190. If you wish to make your logos pop, too, here is a fast web site to take action!

Brighten your day

Considered the week 

My checklist of excellent quotes retains being dominated by AI issues as a result of it is the stickiest subject ever. I promise there will not be an AI quote subsequent week, however this one is simply sooooooo true and value declaring anytime.

The additional away a subject is out of your experience, the smarter an AI will sound.

Did you be taught one thing from this subject? 

❤️ In that case, be a part of 58 different Net Weekly supporters and provides again with a small month-to-month donation on Patreon or GitHub Sponsors.

That is all, pals! 

Liked this electronic mail? Hated this electronic mail? I need to hear about it!

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


And with that, care for 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