The Laravel–Next.js turf war

Today’s issue: The Patrick Swayze of terminals, cram testing your way to financial freedom, and reclaiming my personal DNA data from the dark web.

Welcome to our last issue of 2024, #355. See you… Thursday.

---

The Laravel–Next.js turf war

You might want to stay off the streets for a few days, because the turf war between Laravel and Next.js is really starting to heat up.

Both frameworks have been steadily moving in on each other’s territory for a while – with Next.js adding more server and backend features, and Laravel adding some familiar features like file-based routing and reusable React Laravel components.

But this month’s Inertia.js 2.0 release takes things to a whole new level.

Wtf is Inertia.js? If you don’t run in PHP circles very often, Inertia is Laravel’s “modern monolith” that allows backend devs to create modern SPAs with frontend JavaScript frameworks like React – without needing to build an API.

And Inertia 2.0 comes with a rewritten request handling layer that unlocks some powerful, never-before-seen features – unless you’ve used Next.js before.

Some of these include:

• Async requests – Provides a more fluid user experience and enables features like lazy loading.

• Deferred props – Lets you load non-critical data after the initial page render.

• Prefetching – Allows you to fetch data in the background for pages that are likely to be visited next with hover prefetch, mount prefetching, and stale-while-revalidate.

Bottom Line: We’ve already written about how most JavaScript frameworks are converging on the same few ideas, but it’s interesting to see backend frameworks like Laravel starting to do the same.

There are many reasons why this could be happening, but it probably has something to do with selling you hosting.

---

Stytch is a new (and better) way to build auth

Their all-in-one platform gives you APIs and SDKs for auth and fraud prevention – and unlike other auth providers (*cough, Auth0, cough*), Stytch’s brand new self-serve pricing is fully transparent and dare we say, pretty reasonable?

Here’s how it’s different:

1. No feature gating – Every Stytch user gets access to every feature, even on the free tier. MFA, SSO, RBAC, and every other auth feature you can think of.

2. No hard caps or hidden fees – You only pay for what you use. The price doesn’t jump to a new tier if you cross an arbitrary cap.

3. Generous free tier – Stytch’s free tier offers significantly more than Auth0’s, and is designed to fully support your business’s first few years of growth.

Check out the free tier – and see why the co-founder of Mintlify said that “with Stytch, we cut time spent on auth to a tenth.”

---

How can you remove the event listeners from this element without calling removeEventListener?

const element = document.querySelector('button');

element.addEventListener('click', () => {
  console.log('clicked');
});

element.addEventListener('mouseover', () => {
  console.log('hovered');
});

element.addEventListener('mouseout', () => {
  console.log('unhovered');
});

element.addEventListener('focus', () => {
  console.log('focused');
});

---

1. Mitchell Hashimoto just open-sourced Ghostty, or as I like to call it, the Patrick Swayze of terminals.

2. Bramus spent his Christmas vacation adding examples of scroll animations to the CSS spec. Live, laugh, scroll.

3. Bun is adding first-class support for S3 that lets you read and write S3 files as if they were part of your local filesystem.

4. Roadmap UI is a collection of composable components for building interactive roadmaps. And like every other component library created from 2022 until the end of time, it’s built on top of shadcn/ui 🙏.

5. Evan Bacon cooked up some new form components for you to use in your next React Native project.

6. David Sancho wrote about a strategy for testing CLIs called “Cram Testing”, which coincidentally, is the same strategy that helped me achieve a respectable D+ in Accounting 101.

7. Astro 5.1 comes with a new experimental sessions feature, better image caching, and more.

8. Roel Nieskens built a fun little tool called Wakamai Fondue (what can my font do), which feels like a font nerd’s version of 23andMe. I’m just hoping it doesn’t leak my personal DNA data onto the dark web – jk, it’s for sure already there.

---

You can use an AbortController to remove all the event listeners at once. When passed a signal as an option, the event listener will be removed when the AbortSignal’s abort() method is called.

const controller = new AbortController();
const { signal } = controller;

element.addEventListener('click', () => {
  console.log('clicked');
}, { signal });

element.addEventListener('mouseover', () => {
  console.log('hovered');
}, { signal });

element.addEventListener('mouseout', () => {
  console.log('unhovered');
}, { signal });

element.addEventListener('focus', () => {
  console.log('focused');
}, { signal });

controller.abort();

Note: Older browsers may not support the options parameter for addEventListener, but it is supported in all modern browsers.