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

Frohe Feiertage!

Would you animate the display property if you could? Have you heard of the new renderblockingstatus webperf property? Or did you already inject DOM elements with before() and after()?

All the answers and much more are included in this week's Web Weekly. 🫣

Before we go into this week's favorites...

Last week I asked for a reply to this email to signal email providers that I'm not spamming and well... I DOS'ed myself. Way more of you replied to the email, and it was a good challenge to reply to all the emails. 🫣

Sending this newsletter sometimes feels a little lonely, but I'm humbled that so many people are reading along! And I can't tell you how much getting all these kind words and replies motivate me.

I'm all ears when you have something to share or want to provide feedback. 💙

Thank you, and happy holidays!

Let's get to nerdy stuff, though!

1) Auth.js – Authentication for the web 2) TanStack Query v4 — Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte 3) TanStack Router Beta — Modern and scalable routing for applications

Implementing an app's authentication can be a huge pain... Years ago, I used next-auth and had an Okta-driven login flow working in not even an hour. It worked out of the box! 💯

The project rebranded last week and became Auth.js. The goal — solve authentication for multiple frameworks. Does this goal include solving authentication for the web?

I don't know, but there's definitely a push towards vanilla tech not being bound to a framework. And I love it!

But to continue the thought: are we putting another level of abstraction into our daily work?

Example graphic showing a font's top, ascent, meanline, baseline, descent and bottom .

Lydia Hallie greatly explained how to optimize font delivery for a minimal layout shift. In the end, the article plugs the @next/font module doing all this hard work for you.

And while at the forefront, it's not only the React ecosystem abstracting more things away. Image manipulations are abstracted away by most of the frameworks out there — eleventy-img anyone? 😉

The definition of low-level coding changes and moves up the stack. When did you manipulate the DOM by hand the last time? Do you get into all the design system components to understand how they're built? Is it important to know how client-side routing deals with rendering and state?

There's no answer to these questions, but it's funny: do I consider understanding auth flow crucial in everyday web dev work? No — I was happy that next-auth took this burden off my shoulders.

But is it important to know how images and fonts work? Absolutely — that's fundamental knowledge, right? 🫣

Web development is ever-changing and let's see what the new fundamentals will be in 2023!

Something that made me smile this week

Tweet: Beware of the dog

From my always-growing dog collection...

Watch out!

A mixed bag of interactive websites

Four websites showing a graph, a comic carton, a watch and a box in a grid.

The Pudding is a publication focusing on interactive articles. "On upward mobility" shares how the area you live in impacts your life. It includes data and animated graphs; I love it!

And while we're at it — here are more interactive websites:

I love the internet!

Tailwind tradeoffs

These issues don't mean Tailwind is bad. They're just some of the tradeoffs you inevitably encounter when using a tool.

I'm still somewhat skeptical about Tailwind, but I'm slowly leaning in. The fact that it prevents CSS from growing is still a huge argument. But Tailwind is not only about utility CSS classes; it's also a set of design tokens that prevent 42 shades of gray from ending up on your site.

No tool is perfect, though, and Jake Lazaroff collected some of Tailwind's tradeoffs.

Consider Tailwind's tradeoffs

border-radius magic

Visual explanation of "border-top-left-radius: 8rem 5rem"

Michelle Barker went into the border-radius CSS property and shared that you can do more than define a single value. 👏

And if you're looking for a tool to create custom shapes based on border-radius, Fancy Border Radius is excellent!

Make your corners more interesting

Doing things in public

It’s time to grow with my work. Less documenting for the sake of documenting and more documenting because I have something interesting to say.3 More bigger swings. Probably more devastating failures. More growth.

You might know that I work in developer relations, meaning I do many things in public by default. It's a great way to understand technical topics, be accountable and receive support from the community.

But when is creating things in public too much? When does sharing become bragging? Cory Zue shared why he stopped building everything in public. Great read!

Do fewer things in public

AI vs. human

Two 3d images of cats (one is generated by a human and one isn't – but you can't tell that from looking at the images)

With all this recent AI stuff surrounding us, it's hard not to be skeptical and scared. Are robots finally taking over (and our jobs)?

Alena Kirdina and Travis Turner shared their experience of generating 3D blog post images with a dedicated designer and AI. 👏

What do you think? Which of the images above has been created by a human?

See who wins

Modern webperf features

I think it’s nice to spend a moment in appreciation of where we’re at now. So pour a cup of ${beverage}, settle by the fire, hoist your feet and let’s enumerate what’s new-ish and cool in the world of Web Performance APIs.

Stoyan Stefanov collected newish performance APIs and features in this year's web performance calendar. If you haven't heard of renderblockingstatus, offscreen canvas, fetch priorities or early hints, this post is for you!

Level up your perf game

How to have good conversations

Talking to another person is like rock climbing, except you are my rock wall and I am yours. If you reach up, I can grab onto your hand, and we can both hoist ourselves skyward. Maybe that’s why a really good conversation feels a little bit like floating.

I've added this article to the collection of my timeless articles because I've rediscovered it for the third time, and it sparked thoughts every single time.

In conversations, are you the listener or the talker? Or rephrased: are you the giver or taker? My introverted self is definitely more of a listener that thinks "Man, ask me a question!". "Good conversations have lots of doorknobs" made me reconsider my behavior once again.

Evaluate how you talk to people

On the horizon: display animations

.hide {   transition: opacity 200ms, display 200ms;   display: none;   opacity: 0; }

Wouldn't it be great if we could animate the display CSS property? Or at least somehow control when an element switches from display: block to display: none?

The CSS Working Group has some news and is finally considering making animations easier to work with! 👏

Look into the future

Random MDN – before() / after()

let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p);  p.after("Text");  console.log(container.outerHTML); // "<div><p></p>Text</div>"

From the unlimited knowledge archive called MDN...

Did you know that there are DOM methods to append or prepend elements next to another element? Now you do!

Use before() and after()

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – a directory-dependent shell history

# write all commands and the directory they've been run in to `.zsh_history_ext` function zshaddhistory() {   echo "${1%%$'\n'}⋮${PWD}   " >> ~/.zsh_history_ext }  # filter commands by the current working directory function jog() {   grep -v "jog" ~/.zsh_history_ext | grep -a --color=never "${PWD}   " | cut -f1 -d"⋮" | tail }

A year ago, I learned how to access previous commands that were run in a specific directory in ZSH and implemented an lc ("last commands") command. If you're juggling multiple projects with very different commands, this script will help!

Revisit old commands

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

Three valuable projects to have a look at

A new Tiny Helper

Don’t you hate it when you find that perfect, supposedly background-less Image, and download it, but when you go to use it, the dreaded checkerboard appears? Our AI tool can turn those annoying fake.png 
into true, unfake.png. — free to use.

We all have been there: you find an image online that looks perfect. You download it, and when you want to use it, you'll discover that the transparency-hinting grey squares aren't transparent but rather part of the image. What a scam!

But don't worry, use unfake.png instead of cursing the internet.

Remove all these squares

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

Thought of the week

I'm a nitpicky person but here's some truth: only some nitpicks will be helpful and criticism is often based on insecurity.

Helpful criticism is about making the world a better place. Unhelpful criticism is about making yourself feel better.

A song that makes you stop coding

"MOSS - Video games" cover

The band Moss covered the Lana Del Ray classic "Video games", and it's a beautiful indie track!

Listen to "Video games"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.3k 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 time! 👋

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 9 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