React for Billionaires

Issue #322.September 12, 2024.2 Minute read.
Bytes

Today’s issue: The diverging paths of two GitHub co-founders, a hot new CLI tool you might actually use, and a glitchy dating experience.

Welcome to #322.

Eyeballs logo

The Main Thing

Toby from the office taking a selfie with a stack of cash

When that RedwoodJS funding hits

React for Billionaires

What would you do with $1.2 billion?

If you said, “pledge my undying support to a highly opinionated, full-stack React framework,” your name is probably Tom Preston-Werner. He’s the GitHub co-founder who helped create RedwoodJS, and has been single-handedly funding the project for over 5 years now.

We last wrote about Redwood when they launched v1.0 back in April 2022, and they were back in the news again last week with a hot new v8.0 release. Yes, that’s a lot of major versions in 2.5 years – but since Tom also invented SemVer, we won’t question it.

Quick review: Redwood’s goal has always been to “help you grow from side project to startup” by providing a Rails-like experience for React that weaves together “the best parts” of React, GraphQL, Prisma, TypeScript, Jest, and more.

That goal hasn’t changed, but the implementation has gotten a little bit of a makeover in v8.0:

  • Redwood is shifting from GraphQL to RSC-by-default in order to improve performance, security, and DX. This v8.0 release comes with a simpler RSC setup, and it makes Redwood the third React framework (after Next.js and Waku) to support RSC.

  • A new background jobs system lets you easily send emails, process images, and complete other tasks that don’t need to be done immediately.

  • New docker support lets you deploy your Redwood app anywhere that supports Docker. This helps support one of Redwood’s big value props of allowing you to choose where you deploy, without all the complexity of doing it from scratch.

Bottom Line: Redwood is still searching for mainstream adoption, but it’s nice that they have the runway to experiment.

And if Tom’s reading this, I’d just like to point out that JavaScript newsletters are also a great place to store your wealth. Warren Buffet even called them “the new gold” [citation needed]. Think about it.

        
bucket-logo.png

Our Friends
(With Benefits)

Pennywise the clown smoking under an umbrella

When you spend 8 weeks building a feature and no one uses it.

Feature flagging for B2B product engineers with realtime customer feedback

So instead of shipping features you hope your customers will use, you can gradually and confidently roll out features based on customer satisfaction.

Bucket gives you a single feature key that lets you:

  • Gradually release features safely with company-level feature flagging

  • Then, get out-of-the-box feature adoption metrics and qualitative feedback that are automatically shared to Slack.

  • Iterate faster, save time on evaluation, and make better features, faster.

Try it for free – it’s a better way to release features.

Spot the Bug logo

Spot the Bug

Presented by Sentry

They’re hosting a free workshop called Fix your Frontend: JavaScript edition. And judging by the janky frontend code that plagues most websites, I’m gonna encourage you to check this one out.

<html lang="en">
  <body>
    <h1>Upload and Preview Images</h1>
    <input type="file" id="fileInput" multiple accept="image/*" />
    <div id="preview"></div>

    <script>
      function uploadFile(event) {
        const previewImage = document.getElementById("preview");
        previewImage.innerHTML = "";
        const files = event.target.files;

        files.forEach((file) => {
          if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
              let img = document.createElement("img");
              img.src = e.target.result;
              img.style.display = "block";
              previewImage.appendChild(img);
            };
            reader.readAsDataURL(file);
          }
        });
      }

      document
        .getElementById("fileInput")
        .addEventListener("change", uploadFile);
    </script>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. Ryan Atkinson wrote about how Svelte 5 signals fix its glitchy and inconsistent reactivity. “Glitchy and inconsistent?” Sounds like my online dating attempts in the mid 2000s.

  2. Bramus built a CLI tool for Can I Use.

  3. JetBrains JavaScript Day is back for year four, and it promises to be the best one yet! Explore an impressive agenda featuring top community experts, and don’t forget to register for free today. [sponsored]

  4. The first Vite 6 beta just dropped with a new Environment API.

  5. Goxygen lets you generate a new web project with Go as the backend and Angular/React/Vue on the frontend. Not to be confused with Goxycodone – a new D2C startup in Santa Monica that lets the rich and famous get access to their “medicine” without needing to contact a “licensed medical professional.”

  6. TanStack Router now comes with Virtual File Routes, which is their own version of Remix’s Routes.ts.

  7. Snyk is thrilled to announce DevSecCon 2024, Developing AI Trust on Oct 8-9 – a FREE virtual summit designed for developers, DevOps engineers, and security pros of all levels. Hear from John Hammond & Daniel Miessler on critical strategies and prescriptive DevSecOps approaches needed to build and maintain trust in the age of AI-powered development. [sponsored]

  8. Nadia Makarevich wrote about Replacing React code with the CSS :has selector.

  9. Zach Leatherman just announced that Eleventy is joining Font Awesome and will continue to receive ongoing support and maintenance.

  10. Another GitHub co-founder, Scott Chacon, wrote an insightful piece on Why GitHub actually won. But to my knowledge, he has invested in precisely zero React frameworks so far so take everything he says with a grain of salt.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by Sentry

The files property of the input element is not an array. It is a FileList object. The FileList object is similar to an array, but it does not have array methods like forEach. To convert the FileList object to an array, you can use the Array.from method.

<html lang="en">
  <body>
    <h1>Upload and Preview Images</h1>
    <input type="file" id="fileInput" multiple accept="image/*" />
    <div id="preview"></div>

    <script>
      function uploadFile(event) {
        const previewImage = document.getElementById("preview");
        previewImage.innerHTML = "";
        const files = Array.from(event.target.files);

        files.forEach((file) => {
          if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
              let img = document.createElement("img");
              img.src = e.target.result;
              img.style.display = "block";
              previewImage.appendChild(img);
            };
            reader.readAsDataURL(file);
          }
        });
      }

      document
        .getElementById("fileInput")
        .addEventListener("change", uploadFile);
    </script>
  </body>
</html>