Published at
Updated at
Reading time
7min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! πŸ‘‹

What's the most common viewport size? When will native CSS nesting land in browsers? And how could you maximize your future job salary?

This week's Web Weekly includes all the answers and much more. Enjoy!

There were some newsletter discussions on Twitter last week (I still refuse to call it "X" πŸ˜…), and multiple people plugged Web Weekly.

Boris, Jeremias, Nick, and Carlos, thank you! πŸ’™

Let's get to web stuff, shall we?

Something that made me smile raise an eyebrow this week

Empty user package with 85k npm downloads

How can you "maintain" a package with over 80k downloads that does exactly nothing? Well... give it a name that people accidentally confuse with an npm command. Yet the empty user package's download numbers are rising monthly. It's wild and just another example of the insecure JavaScript ecosystem. 😒

Don't accidentally install this user

Tough to realize interview tips

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: before reading the following, negotiation advice is tough to put into practice. The standard advice is always to delay talking about money. But whether it's a conversation with a recruiter or a potential teammate, not answering questions about salary expectations is incredibly challenging because you want to please the person in front of you.

I once tried to postpone talking about money and got the reply, "Well... we don't do that here". Case closed, I leaned in. πŸ˜…

So, I can't say I'm particularly good at negotiating β€” but the tips in "How to sabotage your salary negotiations efforts before you even start" make sense!

Get the most out of your next job

Yet another beautiful and interactive post

Blog post header displaying "Bezier Curves" with vector tools

Richard Ekwonye's post header alone is worth a look, but that isn't it. The post includes videos, animations and interactive components explaining bezier curves! πŸ’―

Understand bezier curves

Beautiful hover effects

Hover effect with disappearing circles.

This hover effect (☝️) is only done with box-shadows; what a beauty!

Level up your shadow game!

Use the platform β€” the JavaScript infra edition

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

I guess, we're both in the same boat and won't build our own JavaScript-based SaaS service soon. But if we were, we should avoid adding "cute features". πŸ˜…

Steven Krouse shared why smart ideas like a console.email() method or custom Language extensions such as @stefanjudis/fetch() quickly become a maintenance nightmare.

Bet on standards

The downside of cross-document view transitions

View Transitions Break Incremental Rendering

As a Web Weekly reader, you must have noticed how excited I am about View Transitions across HTML navigations. The web won't be the same when these land across browsers.

However, transitioning from one HTML document to another comes with multiple challenges.

What should happen if the target document takes ages to load? Should we show a janky transition to nothing? Should we delay rendering? And if so, for how long?

Eric Portis gets into possible solutions!

Be aware of the downsides

Also, I learned that <script blocking="render"> is a thing. 😲

ESLint rules to write better 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 still have to investigate why there's a problem with the first snippet (☝️), but nevertheless β€” understanding why certain linting rules are in place is always good for avoiding footguns. And we all know JavaScript has plenty. πŸ˜…

Write better JavaScript

What's the ideal viewport?

A circle chart visualizing 10 common mobile viewports.

Okay, that's a trick question. Our friends at Set Studio gathered 120,000 data points with over 2,300 unique viewport sizes, and this research is worth a bookmark for your next "Nobody uses this screen size!" argument.

Analyze viewport data

Random MDN – A native way to generate IDs

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

From the unlimited MDN knowledge archive...

Did you know that you browsers provide a handy method to generate random IDs? Now you do!

Generate IDs

TIL recap – divs in dl elements

divs in a dl element

First, I can't be the only one who has learned to call dl elements "definition lists", or? πŸ˜… Apparently, they are description lists, but even more exciting is that divs are valid in dl elements!

Structure lists

Find more short web development learnings in my "Today I learned" section.

New to the platform

It's not a platform feature, but cool nevertheless. Suppose you want to use scroll-driven animations with ScrollTimeline; there's now a JavaScript polyfill for it! πŸ‘‡

ScrollTimeline polyfill

πŸŽ‰ As the last missing browser, Chromium 118 will finally get the :user-invalid pseudo-class. (Chrome bug ticket)

πŸŽ‰ And as another Chrome goodie β€” relative CSS color 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 big news. Firefox 117 is rolling out today, and with it, native CSS nesting enters the holy cross-browser support land!

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

Three valuable projects to have a look at

A new Tiny Helper

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

I rarely have to deal with PDFs, but when I do, I always wonder how to make these huge files smaller. PDF Tool offers many actions and (!) there are no uploads or anything. It all works in your browser. πŸ’ͺ

Fiddle with your PDFs

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

There's nothing more to add to Addy Osmani's take on teaching! 🫣

Sometimes the gaps in our knowledge only become clear when explaining things to others.

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 4.1k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, change that! πŸ˜‰

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles