Friday, December 1, 2023
HomeJavaScriptInternet Weekly #110 | Stefan Judis Internet Growth

Internet Weekly #110 | Stefan Judis Internet Growth

What’s the commonest viewport dimension? When will native CSS nesting land in browsers? And the way may you maximize your future job wage?

This week’s Internet Weekly contains all of the solutions and far more. Get pleasure from!

There have been some publication discussions on Twitter final week (I nonetheless refuse to name it “X” 😅), and a number of folks plugged Internet Weekly.

Boris, Jeremias, Nick, and Carlos, thanks! 💙

Let’s get to net stuff, we could?

One thing that made me smile elevate an eyebrow this week

Empty user package with 85k npm downloads

How will you “preserve” a bundle with over 80k downloads that does precisely nothing? Effectively… give it a reputation that folks by accident confuse with an npm command. But the empty consumer bundle’s obtain numbers are rising month-to-month. It is wild and simply one other instance of the insecure JavaScript ecosystem. 😢

Do not by accident set up this consumer

Powerful to appreciate interview ideas

These are the two things you must avoid. Both involve how you talk to recruiters at the start of your job search, way before there’s an offer: 1) Revealing information too early in the game 2) Negotiating before you’re ready

Disclaimer: earlier than studying the next, negotiation recommendation is hard to place into observe. The usual recommendation is at all times to delay speaking about cash. However whether or not it is a dialog with a recruiter or a possible teammate, not answering questions on wage expectations is extremely difficult since you wish to please the particular person in entrance of you.

I as soon as tried to postpone speaking about cash and obtained the reply, “Effectively… we do not do this right here”. Case closed, I leaned in. 😅

So, I am unable to say I am significantly good at negotiating — however the ideas in “Find out how to sabotage your wage negotiations efforts earlier than you even begin” make sense!

Get essentially the most out of your subsequent job

Yet one more stunning and interactive publish

Blog post header displaying "Bezier Curves" with vector tools

Richard Ekwonye’s publish header alone is value a glance, however that is not it. The publish contains movies, animations and interactive elements explaining bezier curves! 💯

Perceive bezier curves

Hover effect with disappearing circles.

This hover impact (☝️) is barely finished with box-shadows; what a magnificence!

Stage up your shadow sport!

Use the platform — the JavaScript infra version

let formHandler = (req: Request) => {   let data = Object.fromEntries((await req.formData()).entries()), "New Form Submission"); }

I suppose, we’re each in the identical boat and will not construct our personal JavaScript-based SaaS service quickly. But when we have been, we must always keep away from including “cute options”. 😅

Steven Krouse shared why good concepts like a console.e mail() technique or customized Language extensions equivalent to @stefanjudis/fetch() rapidly turn into a upkeep nightmare.

Wager on requirements

The draw back of cross-document view transitions

View Transitions Break Incremental Rendering

As a Internet Weekly reader, it’s essential to have seen how excited I’m about View Transitions throughout HTML navigations. The net will not be the identical when these land throughout browsers.

Nevertheless, transitioning from one HTML doc to a different comes with a number of challenges.

What ought to occur if the goal doc takes ages to load? Ought to we present a janky transition to nothing? Ought to we delay rendering? And in that case, for the way lengthy?

Eric Portis will get into potential options!

Pay attention to the downsides

Additionally, I realized that <script blocking="render"> is a factor. 😲

ESLint guidelines to put in writing higher JavaScript

// 👎 async () => {   try {     return await getUser(userId);   } catch (error) {     // Handle getUser error   } }  // 👍 async () => {   try {     const user = await getUser(userId);     return user;   } catch (error) {     // Handle getUser error   } }

I nonetheless have to analyze why there’s an issue with the primary snippet (☝️), however however — understanding why sure linting guidelines are in place is at all times good for avoiding footguns. And everyone knows JavaScript has loads. 😅

Write higher JavaScript

What is the excellent viewport?

A circle chart visualizing 10 common mobile viewports.

Okay, that is a trick query. Our pals at Set Studio gathered 120,000 knowledge factors with over 2,300 distinctive viewport sizes, and this analysis is value a bookmark in your subsequent “No person makes use of this display screen dimension!” argument.

Analyze viewport knowledge

Random MDN – A local option to generate IDs

window.crypto.randomUUID(); // "334b59ad-9194-4a94-aed5-171dfee81d31"

From the limitless MDN information archive…

Do you know that you simply browsers present a helpful technique to generate random IDs? Now you do!

Generate IDs

TIL recap – divs in dl parts

divs in a dl element

First, I am unable to be the one one who has realized to name dl parts “definition lists”, or? 😅 Apparently, they’re description lists, however much more thrilling is that divs are legitimate in dl parts!

Construction lists

It isn’t a platform function, however cool however. Suppose you wish to use scroll-driven animations with ScrollTimeline; there’s now a JavaScript polyfill for it! 👇

ScrollTimeline polyfill

🎉 Because the final lacking browser, Chromium 118 will lastly get the :user-invalid pseudo-class. (Chrome bug ticket)

🎉 And as one other Chrome goodie — relative CSS colour syntax landed in Chrome Canary, too!

.something {   --color: red;   /* transform `red` to `hsl` and manipulate its lightness */   background: hsl(from var(--color) h s calc(l - 20%)); }

And lastly — there’s some huge information. Firefox 117 is rolling out right this moment, and with it, native CSS nesting enters the holy cross-browser assist land!

Can I Use table showing that Firefox 117 supports native CSS nesting.

Three useful tasks to take a look at

PDF Tool with actions such as encrypting, optimizing or merging PDFs

I not often need to cope with PDFs, however after I do, I at all times surprise easy methods to make these large recordsdata smaller. PDF Device provides many actions and (!) there aren’t any uploads or something. All of it works in your browser. 💪

Fiddle along with your PDFs

There’s nothing extra so as to add to Addy Osmani’s tackle educating! 🫣

Generally the gaps in our information solely turn into clear when explaining issues to others.

Writing Internet Weekly takes me roughly 5 hours each week, and I pay actual cash for sending over 4.1k emails. For those who get pleasure from it, take into account supporting me on Patreon. ♥️

Or inform your pals about it:

For those who’re not a subscriber, change that! 😉

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

I am going to see you subsequent week! 👋



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments