RIP CRA

Issue #370.February 25, 2025.2 Minute read.
Bytes

Today’s issue: Using my component library to pick the Oscar winners, big Rust moves, and Deno’s most noble lawsuit yet.

Welcome to #370.


Eyeballs logo

The Main Thing

A horse with a woman's hand and closed eyes with makeup

The React Team whenever someone mentions Vite

RIP CRA

If you’re too old to know who Doechii is, you probably felt a little sting of nostalgia when you heard that create-react-app is being deprecated by the React team.

CRA helped usher in the glory days of React when it first launched back in 2016 – because it abstracted away the pain of Gulp and Browserify Webpack and Babel and gave us sane defaults in a single package.

But it turns out that React has evolved a lot over the past 9 years, and CRA wasn’t quite able to keep up. It lacked good support for modern React features like SSR, its Webpack-based setup was painfully slow for modern apps, and it hadn’t been actively maintained for years.

So it wasn’t a surprise to hear that CRA was finally being put down sent to the great config in the sky earlier this month. But it was a surprise to see the drama that erupted over the next 72 hours.

Here’s a quick recap:

  • The React team’s initial blog post recommended that current CRA users migrate their apps to frameworks like Next.js and React Router or “build their own framework from scratch” – while barely mentioning Vite as an option at all.

  • This upset a lot of developers because Vite’s React plugins are incredibly popular, and they provide arguably the simplest migration path for most CRA apps. Critics accused the React team of being biased against Vite, out of touch with developers, and bought and paid for by the Big Framework™️ lobby.

  • This produced a couple days of mildly entertaining Twitter beef, but thankfully, cooler heads prevailed. The React Team worked with Evan You (plus the creators of Parcel and Rsbuild) to update the blog post with more balanced recommendations and clearer instructions for building with non-framework tools like Vite. And a tenuous peace was restored.

Bottom Line: We’ll miss you create-react-app, but at least you died doing what you love – starting online culture wars and watching developers fight it out from a safe distance. Oh wait, that’s actually what I love doing.

        

idx-logo.png

Our Friends
(With Benefits)

The bad guy from The Mummy smiling

Me deploying to Firebase from my gas station pump screen

Project IDX is a Google Swiss Army Knife

The web-based development platform integrates a bunch of different Google services to give you a one-stop shop for building, testing, and deploying projects – without ever leaving your Chrome tab.

Here’s how:

  • Instant dev environments – Spin up projects with zero setup on a virtual machine that’s powered by Google Cloud.

  • AI-powered everything – Gemini gives you code suggestions and an AI-powered chat you can ask to perform tasks like “run my unit tests” or “add Tailwind CSS to this project.”

  • Google Docs-style collab – Share your project like a Google Doc, so teammates can jump in without needing to configure their local env.

  • One-click deploys to Firebase – Or easily spin up your own DB with Postgres, MySQL, or others.

Start a new project for free – and see how it stacks up against your current setup.


Tip logo

The Tip

Sponsored by Datadog

Their ebook on Cloud-scale monitoring with AWS & Datadog shows how to monitor your entire serverless architecture in one place and how to track every stage of your migration to AWS.

Did you know that you can make your typography responsive without using a media query?

h1 {
  font-size: clamp(2rem, 8vw, 4rem);
}

The clamp function takes three arguments:

  1. A minimum value: 2rem - This means the font-size won’t go below 2 times the root element’s font-size, 32px (assuming the root element’s font-size is 16px).

  2. A preferred value: 8vw - This sets the preferred font-size to 8% of the viewport width. As the viewport width changes, the font-size will scale accordingly.

  3. A maximum value: 4rem - This sets the maximum font-size to 4 times the root element’s font-size (64px).

You can see this technique in action on 🕹️ react.gg.


Cool Bits logo

Cool Bits

  1. These Neobrutalism components are based on shadcn/ui and are a good premonition that Adrien Brody will win Best Actor at the Oscars 🔮.

  2. TanStack Router just released support for Solid.js, and I can’t wait to see where this lands in Ryan Carniato’s tier list.

  3. Lazar Nikolov is hosting a hands-on debugging session where you’ll build a Next.js app, watch it break, debug it, and fix the issues – all in one go. It’s like speed-running a 2-week sprint at your normal job, but actually fun. [sponsored]

  4. Rust 1.85 stabilizes the 2024 version of Rust, introduces async closures, and gives you yet another reason to pretend you’re going to learn Rust this year.

  5. Geoff Graham wrote an article called Toe Dipping into View Transitions, which I was really excited to read – until I realized there weren’t any pictures.

  6. Armin Ulrich created this React performance guide to shame help you improve.

  7. Pinia 3.0 comes with no new features and it drops support for Vue 2 – but other than that, it’s a super exciting release.

  8. How to build session-based authentication into a Next.js application from scratch is a new guide from the Clerk team that walks through how to build the sign-in and sign-up pages, how to protect routes, and every other step in the process. [sponsored]

  9. The e18e squad wrote about Bundling dependencies (and when not to do it).

  10. Deno 2.2 comes with a built-in OpenTelemetry integration, linter updates, and a brand new lawsuit. This one is against all the dev-fluencers on Twitter who are trying to ruin Severance with their terrible Ms. Casey memes. Praise Kier.