Web Weekly #134 | Stefan Judis Web Development

Guten Tag! Guten Tag! 👋

Does the new React compiler fix all the bugs in our code? Should you self-host your custom fonts? And is CSS slowly but surely replacing JS animation libraries?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Jochem listens to 88-Keys & Kanye West – Stay Up!

One of my favorite tracks, the beat is just so smooth 👌 I can fully recommend The Death of Adam (the album this track comes from) as well!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.

What are your tricks for getting into the zone? I don’t have any, and I wish I’d be that guy who puts on headphones and gets straight into it. That’s just not how I roll, or is it?

I’ve read Marcus’s tips on staying motivated as a solo founder, and he does the following:

Starting with a not-too-easy quick win — sounds reasonable. I might give it a try. Do you have other tricks? I’d love to share a few Web Weekly community tricks next week.

How to always use the correct package manager

Usage Error: This project is configured to use pnpm

I use good old npm, because I can’t be bothered by trying another package manager. I also don’t think it’s terribly slow. But when I jump across projects, there might be one that uses pnpm. What then?

Wouldn’t it be great if your command line automatically picked the correct package manager? Node’s corepack does this for you.

Mix and match your package managers

A new way to animate height

It’s still early for the new calc-size() CSS function, but if you want to know what’s cooking… 👇

Use the new and fancy

Should you self-host your fonts?

Yes it's better to self-host as the performance gains are substantial.Of course your mileage may vary as it will depend on your exact site so test,test,test, but I would imagine it would be the better option, from a performance perspective, for most sites.

Oldie but goldie: Barry investigated whether using Google Fonts directly or self-hosting them is better. Fonts can drastically slow down your sites, so it’s always good to tweak and monitor their impact closely.

Speed up the web

A look at Chrome’s new speculation rules

Imagine if the browser didn’t have to fetch all the resources and render the new page when you click on a link to load a new page. Because… it had already done it! That’s what the Speculation Rules API is all about.

The new Chromium Speculation Rules API allows you to prerender pages. You can now drop in a script element into your pages and let Chrome/Edge do the magic.

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        &)add-to-cart=*",
        { "not": "href_matches": "/*\?*(^},
        { "not": {"href_matches": "/*\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
script>

The Chrome developer blog article is excellent, so you should start there.

After this, Stoyan played around with the new API, and it’s a great hands-on.

Prerender pages

You’re halfway through!

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – A JavaScript Quine Clock

A clock rendered out of JS code.

This is wild. In “only” twelve hours, Martin wrote some JS to render its own source code as a ticking clock. I have no words and don’t even know how I would start debugging this.

Watch the time

When should you name your landmarks?

A nav / navigation on its own needs no accessible name. Stuffed in a header, it still needs none. Add a second nav, but in the footer, no name needed. The context is clear.

Adrian explains when (and when not) your HTML elements should have an accessible name.

Trust the context

Can CSS do what Framer Motion does?

So, do you still need Framer Motion? Thanks to these five new CSS features, the calculus has changed, but my answer is the same as it was five years ago: Go hang out with your loved ones or something.

I love Matt’s closing here. 😅👆

But in all seriousness, the post discusses how all the new browser stuff (@​starting-style, view transitions, scroll-driven animations) affects animation JS libraries and when native platform features are good enough.

Great read! 💯

Make things fancy

A look at the new React compiler

Does it “just work”? Technically, yep. You can just turn it on, and nothing seems to be broken. It won’t memoize everything correctly, though, despite showing it as memoized in React Dev Tools.  Can we forget about memo, useMemo, and useCallback after installing the Compiler? Absolutely not! At least not in its current state. In fact, you’ll need to know them even better than it’s needed now and develop a sixth sense for writing components optimized for the Compiler. Or just use them to debug the re-renders you want to fix.

You might have heard React now comes with a compiler (or transpiler or “thing that is supposed to solve all the bugs and optimize all the render loops we’ve put into our React codebases”™).

Nadia took a deep dive to see how/if it works. The summary: It works for simple code, but the real world is messy, and creating silver bullet software is tough.

Automatically optimize your code

import moment from 'moment'; import { format } from 'date-fns';  const date = new Date(2024, 3, 29, 0);  moment(date).format('M/D/YYYY'); // → 4/29/2024  format(date, 'M/d/yyyy'); // → 4/29/2024  Intl.DateTimeFormat('en-US').format(date); // → 4/29/2024

I’m such an Intl fanboy, so it’s hard to resist not including it here. If you’re still using Moment or date-fns, you might want to check if you can drop some JS code because the browser can do much of the date formatting for you.

Format dates

Random MDN – overflow-wrap

Interactive MDN demo explaining overflow-wrap

From the unlimited MDN knowledge archive…

Have you used overflow-wrap already? No? Then you should check it out!

Control the overflow

TIL recap – Non-capturing groups

A regular expression using non-capturing groups

If you’re wrangling regular expressions, you might need capture groups (()) to define that you’re looking for combinations of different character sequences. But sometimes, you don’t need them in your matching result. This situation is when non-capturing groups ((?:)) help.

Tidy up your regular expressions

const odds = new Set([1, 3, 5, 7, 9]); const squares = new Set([1, 4, 9]); console.log(odds.intersection(squares)); // Set(2) { 1, 9 }

With Firefox 127 (shipping in 3 days), new JavaScript Set methods are coming to cross-browser town: intersection, union, difference, symmetricDifference, isSubsetOf, isSupersetOf, and isDisjointFrom.

These are some fancy names, but all the methods are documented on MDN if you have questions. And if you want to adopt these methods today, as far as I see, polyfills are available in core-js.

  • HTMLrev is a collection of over a thousand free HTML templates to give your next project a headstart.

Three valuable projects to have a look at

Preview of a programming font.

If you’re looking for a new editor font, you’ll probably find it here.

Pimp your editor

Max is a wise man and shared how to adopt new web features step by step in Old Dogs, new CSS Tricks.

Learning new architectural approaches is easier if we take existing patterns and evolve them, rather than start from scratch.

Did you learn something from this issue?

💙 If so, support the newsletter; small donations massively fill up my motivation tank.

Loved this email? Hated this email? I want to hear about it! Reply to this email because I want to know more!

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

I’ll see you next week! 👋