Web Weekly #134 | Stefan Judis Web Development
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.
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
It’s still early for the new calc-size()
CSS function, but if you want to know what’s cooking… 👇
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.
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.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
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.
Adrian explains when (and when not) your HTML elements should have an accessible name.
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! 💯
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
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.
From the unlimited MDN knowledge archive…
Have you used overflow-wrap
already? No? Then you should check it out!
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
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.
If you’re looking for a new editor font, you’ll probably find it here.
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.
💙 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! 👋