Sun's Out, Bun's Out

If you’ve ever found yourself thinking, “You know, I’d really like to give some of my money to Bytes”, I have great news for you. The launch sale for our new React course (🕹️ react.gg) is going on until tomorrow at midnight.

Today’s issue: Educational fan fiction, Node never says die, and using the Knuckle Puck to configure your own components.

Welcome to #221.

---

My modules don’t want none, unless you got Bun 1

Jarred Sumner has been grinding on Bun for a while now.

That’s why it was great to see that he and the team filmed the Bun 1.0 announcement video from their swanky new apartment full of beautiful Mid-century Modern furniture.

Wait, that’s not actually Bun HQ, but just a nice Airbnb they rented to film in? Well that’s even better, because I still like imagining that the Bun team all works together from an Oakland studio apartment with nothing but a couple air mattresses and a family-sized box of Captain Crunch.

But whatever their setup is, it’s obviously working, because Bun has quickly evolved into much more than just “a faster version of Node.”

The next-gen runtime has built some uniquely powerful DX features that make building software “faster, less frustrating, and more fun”:

• Bun’s ESM and CommonJS compatibility means you don’t need to worry about file extensions, you can use import and require() in the same file, and it all just works.

• Node.js apps and npm packages just work in Bun, with support for Node APIs. It also comes with Bun-native APIs and supports Web APIs, TypeScript, JSX, and even SQLite.

• Building on top of WebKit instead of V8 (like most other runtimes) is the main reason for Bun’s blazingness.

But we should’ve known that Jarred & co weren’t going to stop there. The team seems to have taken a page from the Rome playbook (RIP) and created their own “all-in-one toolchain for the web” — except they actually built it.

Bun 1.0 comes with a ridiculously fast package manager, a Jest-compatible test runner that’s 10x faster than Vitest, and an esbuild-inspired bundler/minifier. Bun moves fast, but the Bun team might be moving even faster 🏃‍♂️💨.

Bottom Line: This is all part of Bun’s plan to “eliminate slowness and complexity without throwing away everything that’s great about JavaScript.” And that combination of ambition and pragmatism has helped it to quickly build a loyal following, even from the most skeptical among us.

---

Prolific is the best way to get AI training data

Everybody and their dog is working on an AI project these days.

But what’s the secret to making yours stand above the rest? Quality training data.

That’s where Prolific can help. They make it super easy to get high-quality human datasets for training and fine-tuning your AI models.

Here’s how it works:

1. Set up a new campaign in 15 minutes and instantly get access to their pool of 120,000 diverse, bot-free participants (all verified with ID checks).

2. Use 300+ filters to create a bespoke and representative group that meets your needs.

3. Get rich and reliable responses within 2 hours, and easily scale/automate the process with Prolific’s API.

Check it out — and see why organizations like Meta, Google, and Yale University trust Prolific.

---

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      const todos = state.todos
      return { 
        ...state, todos: 
        todos.concat(action.payload) 
      }
    case 'REMOVE_TODO':
      const todos = state.todos
      const newTodos = todos.filter(
        (todo) => todo.id !== action.id
      )
      return { ...state, todos: newTodos }
    default:
      return state
  }
}

---

1. Not to be outdone by the Bunnies, Deno just announced native npm support on Deno Deploy (their serverless hosting product). This lets you run Node apps at the edge using npm modules and proves that you can’t kill Node, even if you try.

2. Puck is a self-hosted, drag-and-drop editor for React that you can configure with your own components. It looks really smooth, but just wait ‘til they come out with Knuckle Puck.

3. Using GitHub Actions to automate workflows? Check out Snyk’s Cheat Sheet and learn step by step how to build a secure CI/CD pipeline with GitHub Actions & Snyk. [sponsored]

4. Ben “The Houston Rockets will win the 2021 NBA Championship” Ilegbodu gave a 30-minute talk called 50 Shades of React Rendering with Next.js. It’s not the most titillating 50 Shades fan fiction out there, but it might be the most educational.

5. Ramona Schwering and Jecelyn Yeen wrote an article on the Chrome blog about Four common types of code coverage.

6. Gal Schlezinger wrote an article called My Node.js is a bit Rusty, which is a phrase I am incapable of reading without hearing it in the Salad Fingers voice.

7. It was great to see lots of highly nuanced, fair-and-balanced discussions taking place online about TypeScript last week. Good job, everybody 🙃.

8. New Relic Grok, the first GenAI assistant, is now in preview. It leverages OpenAI’s large language models (LLMs) so that any engineer can use everyday language and a familiar interface to ask questions and get insights, without prior observability experience. [sponsored]

9. Node v20.6.0 just launched with support for loading config from .env files. And with that, I think we’ve all had enough runtime news for one day month.

10. Universal Medusa is a cross-platform React Native ecomm starter that works for Expo and Next.js. I’m pretty sure it’s also the name of one of the harder bosses in the Spartan Total Warrior video game I spent ~27 hours trying to beat back in 2005.

---

The todos variable is being re-declared within the same block. Variables declared with const and let are block-scoped, meaning they don’t exist outside of the block they were called in. Blocks are created with {} brackets around if/else statements, loops, and functions.

There are many solutions, including changing the variable name in the different cases or removing the variable altogether. We can also wrap each of our cases in a block to isolate the variables.

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO': {
      const todos = state.todos
      return { 
        ...state, todos: 
        todos.concat(action.payload) 
      }
    }
    case 'REMOVE_TODO': {
      const todos = state.todos
      const newTodos = todos.filter(
        (todo) => todo.id !== action.id
      )
      return { ...state, todos: newTodos }
    }
    default:
      return state
  }
}