Net Weekly #134 | Stefan Judis Net Growth


Guten Tag! Guten Tag! 👋

Does the brand new React compiler repair all of the bugs in our code? Do you have to self-host your customized fonts? And is CSS slowly however certainly changing JS animation libraries?

Activate the Net Weekly tune and discover all of the solutions under. Get pleasure from!

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

Certainly one of my favourite tracks, the beat is simply so easy 👌 I can totally advocate The Demise of Adam (the album this monitor comes from) as nicely!

Do you need to share your favourite track with the Net Weekly neighborhood? Hit reply; there are three extra songs left within the queue.

What are your methods for entering into the zone? I haven’t got any, and I want I might be that man who places on headphones and will get straight into it. That is simply not how I roll, or is it?

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

Leave tasks unfinished — I can’t overstate how much this one helps me. I try to leave a task 90% finished at the end of a working session. It feels slightly worse than closing out the work, but it makes starting the next day 10x easier. Having a quick win when I start coding is a massive boost, and it immediately gets me into the flow state. It can’t be too easy though, if all I have left is to run git commit, that’s not enough. Ideally it’s something where I know exactly what I need to do, that will take 5-10 minutes.

Beginning with a not-too-easy fast win — sounds cheap. I’d give it a attempt. Do you have other tricks? I might like to share a number of Net Weekly neighborhood methods subsequent week.

How one can at all times use the proper bundle supervisor

Usage Error: This project is configured to use pnpm

I exploit good previous npm, as a result of I am unable to be bothered by attempting one other bundle supervisor. I additionally do not suppose it is terribly sluggish. However once I leap throughout tasks, there could be one which makes use of pnpm. What then?

Would not it’s nice in case your command line routinely picked the proper bundle supervisor? Node’s corepack does this for you.

Mix and match your package managers

A brand new strategy to animate top

.item {    height: 0;  }  .item.open {    height: calc-size(auto); }

It is nonetheless early for the brand new calc-size() CSS perform, however if you wish to know what’s cooking… 👇

Use the new and fancy

Do you have to 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 however goldie: Barry investigated whether or not utilizing Google Fonts straight or self-hosting them is healthier. Fonts can drastically decelerate your websites, so it is at all times good to tweak and monitor their affect carefully.

Speed up the web

A have a look at Chrome’s new hypothesis guidelines

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 brand new Chromium Hypothesis Guidelines API means that you can prerender pages. Now you can drop in a script factor into your pages and let Chrome/Edge do the magic.

<script kind="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/wp-admin"}},
        { "not": &)add-to-cart=*"},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

The Chrome developer blog article is excellent, so you must begin there.

After this, Stoyan performed round with the brand new API, and it is an ideal hands-on.

Prerender pages

You are midway by!

Wowza! Would you get pleasure from getting Web Weekly straight to your inbox?

The fantastic bizarre net – A JavaScript Quine Clock

A clock rendered out of JS code.

That is wild. In “solely” twelve hours, Martin wrote some JS to render its personal supply code as a ticking clock. I’ve no phrases and do not even know the way I’d begin debugging this.

Watch the time

When do you have to title 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 components ought to have an accessible title.

Trust the context

Can CSS do what Framer Movement 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 really like Matt’s closing right here. 😅👆

However in all seriousness, the put up discusses how all the brand new browser stuff (@​starting-style, view transitions, scroll-driven animations) impacts animation JS libraries and when native platform options are ok.

Nice learn! 💯

Make things fancy

A have a look at the brand 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 may need heard React now comes with a compiler (or transpiler or “factor that’s supposed to unravel all of the bugs and optimize all of the render loops we have put into our React codebases”™).

Nadia took a deep dive to see how/if it really works. The abstract: It really works for easy code, however the true world is messy, and creating silver bullet software program is hard.

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 am such an Intl fanboy, so it is onerous to withstand not together with it right here. When you’re nonetheless utilizing Second or date-fns, you may need to examine when you can drop some JS code as a result of the browser can do a lot of the date formatting for you.

Format dates

Random MDN – overflow-wrap

Interactive MDN demo explaining overflow-wrap

From the limitless MDN data archive…

Have you ever used overflow-wrap already? No? Then you must test it out!

Control the overflow

TIL recap – Non-capturing teams

A regular expression using non-capturing groups

When you’re wrangling common expressions, you may want seize teams (()) to outline that you simply’re in search of mixtures of various character sequences. However typically, you do not want them in your matching consequence. This example is when non-capturing teams ((?:)) assist.

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 (delivery in 3 days), new JavaScript Set strategies are coming to cross-browser city: intersection, union, distinction, symmetricDifference, isSubsetOf, isSupersetOf, and isDisjointFrom.

These are some fancy names, however all of the strategies are documented on MDN if in case you have questions. And if you wish to undertake these strategies as we speak, so far as I see, polyfills are available in core-js.

  • HTMLrev is a group of over a thousand free HTML templates to present your subsequent venture a headstart.

Three beneficial tasks to take a look at

Preview of a programming font.

When you’re in search of a brand new editor font, you will in all probability discover it right here.

Pimp your editor

Max is a clever man and shared methods to undertake new net options step-by-step in Old Dogs, new CSS Tricks.

Studying new architectural approaches is less complicated if we take present patterns and evolve them, slightly than begin from scratch.

Did you be taught one thing from this concern?

💙 If that’s the case, assist the e-newsletter; small donations massively fill up my motivation tank.

Beloved this e-mail? Hated this e-mail? I need to hear about it! Reply to this email because I want to know more!

And with that, handle your self – mentally, bodily, and emotionally.

I will see you subsequent week! 👋

Leave a Reply

Your email address will not be published. Required fields are marked *