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

It's been a while, friends! ๐Ÿ‘‹

You might have noticed that the last Web Weekly hit your inbox 35 days ago. It's the longest break since I started Web Weekly, and I can't say that this doesn't bug me, but I needed the break. Life was super busy; I moved, traveled countries to speak at a conference, and then got sick for a few days. It's been a ride...

But it's all good, and I'm back! Thank you to all the people who checked in with me. ๐Ÿ’™

Let's get back to business!

Should HTML allow us to ship responsive videos? How can you optimize your fetch calls? And is there an easy way to escape CSS classes in JavaScript?

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

People were raving about barrel files this week. What's a barrel file? Here's one.

Barrel file example: // feature/index.js export * from "./foo"; export * from "./bar"; export * from "./baz";

The idea behind barrel files is to import all your dependencies from a single index.whatever file.

import { foo, bar, baz } from "../feature";

Instead of hunting down all the module file paths, you just get the code from this one barrel file sitting in a folder. Neat! There's only one gotcha with this: barrel files are evil!

These convenient index files lead to the loading of all modules all the time. And unfortunately, there's little a bundler can do about it.

A few barrel files might be alright, but if one imports another one, which then loads another barrel file, things add up quickly, and you load your entire codebase with a single import.

Cost of loading modules showing that loading 50k modules can take 50s.

Marvin Hagemeister went deeply into the topic if you want to learn more.

So what should you do instead? Easy, don't use barrel files, and import only what you need.

Or wait for frameworks to fix this problem for you. This is what the latest Next.js version does. You define a module path, and the Next compiler will transform your barrel file imports to single imports. Fancy!

I'm unsure how I feel about even more Next.js Framework magic, but let's see how this plays out.

Something that made me smile this week

Pixel art, A lion looking at a flying fan.

An absolute frontend classic that will never get old: help out this lion with some fresh air!

Chill the lion

A strong case for multiple tsconfig files

You should have as many TypeScript configurations as there are layers in your project: source code, Node.js testing, in-browser testing, third-party tooling, etc.

Artem Zakharchenko got into the nitty gritty details of TypeScript configuration and argues your project should have tons of TS config files. This post is for you if you have only one tsconfig.json in your project.

Split your TS configs

TIL โ€” How to 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\]"

There's the CSS namespace in JavaScript. Apart from CSS.supports(), I don't use it. But I learned there's also CSS.escape(), which is handy when dealing with funky HTML attributes.

Escape your CSS selectors

Optimize the network

A `fetch` call that includes a `priority` configuration field.

Dave Ramsey explains how to prioritize network calls using priority hints and look at this. โ˜๏ธ Apparently, fetch supports them, too (working in Chrome and future Safari).

Prioritize

The beauty of copywriting

A modal: "Cancel Add Service, Select `Continue` will loose all the settings added so far."

Words in UI interfaces matter a lot. Yet, in my experience, microcopy is done between doors as an afterthought. The following post explains how to improve the used words in small interactions.

Rethink all this juicy copy

The wonderful weird web โ€“ Be a detective

A strong and bold headline: "TIMEGUESSR"

The task is easy: look at a picture and guess when and where it was taken.

And let's pretend I just didn't spend an hour googling and reverse-engineering where the TIMEGUESSR pictures were taken. ๐Ÿ˜…

Find the correct time and location

What are your favorite internet corners? Send them my way, and I'll include them in Web Weekly!

Things you didn't know about custom properties

An arrow pointing at the CSS color property asking "What's color?"

You probably use custom properties daily. But do you know how they really work, especially when it comes to the cascade and inheritance?

Stephanie Eckles published an absolute banger. I learned not one, not two, but three nerdy CSS details from it!

Understand computed value time

More nerdy CSS details

html {   -moz-text-size-adjust: none;   -webkit-text-size-adjust: none;   text-size-adjust: none; }

Remember CSS resets? I'm more or less good without them since browsers are somewhat consistent. Andy Bell released his take on a modern CSS reset, and Chris Coyier did what he does โ€” he commented and blogged about it.

Both posts include more nerdy CSS details. Like text-size-adjust, do you use it? Right, me neither.

Should responsive videos be a thing? (YES!)

After a bit of tinkering with the code, I was pleased to see that responsive video seemed to be working in my local build!

This story is wild! Years ago, Scott Jehl figured that the video element should work like the picture element. We're talking about choosing the best format (webm vs mp4) and, of course, the best size. It seems obvious, so what can you do about it?

Scott filed a spec change, and after it landed, he moved on to implement the change in Firefox by himself. Major Kudos, Scott!

Ship the best videos

Random MDN โ€“ globalThis

 JavaScript Demo: Standard built-in objects - globalThis

From the unlimited MDN knowledge archive...

How do you reference the global this object in browser JS? It's window, easy. But what if your script also runs in web workers, or Node?

globalThis rescues the day by always referencing the, well..., global this object.

Don't use too much globals

TIL recap โ€“ String replacement patterns

JavaScript snippet explaining replacement patters with `$&`

Do you know that String.prototype.replace() comes with characters that have special meaning? $& for example, inserts the matched substring. What?

And there are more patterns!

Let's all hope we won't run into a bug caused by these replacement patterns. It may take a while to resolve this bug.

Replace with caution

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

New to the platform

There's so much going on lately; let's look at the highlights.

Subgrid landed in all browsers! And with it, it's almost time to drop all these margin-top: auto hacks on card components and finally lay out children on their parent grid!

.grid > .subgrid {   grid-column: span 2;    display: grid;   grid-template-columns: subgrid; /* 20ch 1fr */ }

The :user-invalid pseudo-class will land in Chrome 119 (supported in Firefox and Safari for a while), so we can finally style invalid form elements only after someone interacted with them.

input:user-invalid {   border: 2px solid red; }

And hot of the press: the search HTML element landed in Chrome 118, Firefox 118 and Safari 17. ๐Ÿ˜ฒ

HTML that includes a "search" element

Let's look at more platform updates next week.

Three valuable projects to have a look at

A new Tiny Helper

CSSstats analysis showing different colors and font size.

Slowly but surely, I reached the point of wanting to rewrite the CSS on my blog. Because it's just me working on it, I mostly went with quick'n'dirty CSS instead of investing in a proper architecture.

And CSS Stats shows me that I used 26 unique font sizes. That's too many!

Analyze your CSS

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

Thought of the week

Dave Rupert argues that easy information access makes us all "experts". And there's some truth to it.

Let's recognize that a quick Google search (or conversation with a LLM bot) doesn't mean we know what we're talking about.

I feel the Internet and these pocket computers created a world of expert idiots.

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 4.3k emails. If you enjoy it, consider supporting me on Patreon. โ™ฅ๏ธ

Or tell your friends about it:

If you're not a subscriber, change it! ๐Ÿ˜‰

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 14 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