IDX Gon' Give It To Ya

Today’s issue: Deno bullies Node, the OSS Gods reveal their will, and I almost learn a valuable lesson.

Welcome to #212.

---

Google wants to make you more productive

And since they aren’t allowed to ship cigarettes directly to your door anymore, they did the next best thing they could by announcing Project IDX earlier this week.

It’s an experimental, new initiative that wants to make your entire app development workflow “faster and more frictionless,” by bringing it all into the cloud.

In a perfectly Googley world, here’s what that would look like:

Step 1: Open a new browser tab on your device of choice (I’m a BlackBerry man myself), and navigate to the IDX online editor. Spin up a new project and just start coding in seconds, without wasting time on setup, permissions, etc.

Step 2: Build your app with any popular framework you want (IDX already supports most of them), but in this hypothetical Google happy-place, you’ll probably want to use Angular or Flutter for maximum vibes.

Step 3: Use Google’s generative programming AI, Codey, to help you build faster. Preview your app across platforms with IDX’s built-in Android emulator, web preview, and iOS simulator.

Step 4: Deploy to the web in a few clicks with Firebase hosting.

Step 5: Wake up tomorrow and do it all again. #RiseandGrind.

Ok, so how is IDX different from its brother-from-another-mother, Codespaces? Or its sister-from-another-mister, Stackblitz? Or its cousin from another dozen, Replit? Or its sibling from another nibbling, Codesandbox? OR JSFiddle, lol

We haven’t gotten to try IDX yet, but they all feel pretty similar on the surface. Similar to Codespaces, IDX is built on Code OSS, and the Codey AI will probably feel similar to using Copilot.

But for IDX, the online IDE itself is only one part of the story.

David East, the lead DevRel on the IDX team, told us that the project’s long-term plan is to cohesively weave together Google’s developer tools and platforms to “fill in all the common gaps” of building cross-platform apps. They want to make it faster to get started, faster to build, faster to test and preview, and faster to deploy on multiple platforms.

Bottom Line: IDX is an ambitious project that could radically simplify the end-to-end experience of building apps.

Will that be enough to help it avoid being #KilledByGoogle in a year? Let’s hope so 🙏.

---

Axiom gives you all your event data, all the time, all in one place

If you read enough programming newsletters, you’ve probably seen hundreds of ads for the same logging solutions.

But Axiom is different. Because their storage is significantly more affordable, they let you store all your app’s data (instead of just a sampling).

How tho? Because their datastore decouples its stateless ingest pipeline from its querying pipeline, which means it requires minimal compute to store and query tons of data. (See the docs.)

That’s a big deal because it lets you:

• Query all your data quickly and easily, without having to move data from cold/archive to “hot.”

• Never worry about deleting any of your data from any source — logs, events, frontend, backends, etc.

• Get better insights, quicker debugging, and less hassle for your team.

Check out the free-forever plan to try it yourself.

---

This one is for the React heads.

React’s useRef hook allows you to persist values between renders, without triggering a re-render of the component. Using only React.useState, can you ~re-create the functionality of React.useRef.

---

1. Vite Conf 2023 is happening on October 5th, and if you click that link you can get a cool personalized ticket that has the Bytes logo on it. Everyone will be so jealous of you that Jordyn from junior high will probably hear about it and finally realize they made a huge mistake by letting you get away back in 2003.

2. Darius Cepulis wrote an insightful article called Everything I wish I knew before moving 50,000 lines of code to React Server Components about his team’s experience migrating Mux to RSC. I’ve quit jobs for less daunting tasks than that, Darius.

3. Zero created an easy way to integrate 3rd-party API credentials into your project. Their SDK is available for TypeScript, Rust, Python, and Go. [sponsored]

4. It turns out Stack Overflow’s traffic isn’t down by 50%, and is only down ~5% from last year. This almost makes me think I shouldn’t just blindly trust everything I see on Twitter and YouTube. Almost.

5. The React Docs just added this deep dive on Using TypeScript with React. We featured this a few weeks ago when it was still a preview link, but we wanted to share it again now that it’s Facebook official.

6. Andy Jiang wrote about Node’s Config Hell Problem on the Deno blog. And you’ll never guess which next-gen runtime was able to solve this problem.

7. There’s a new section in the Next.js docs that goes deep on Caching in Next, not to be confused with “Caching in on Next” — which is the working title of Guillermo’s memoir.

8. This free introductory course is designed to help beginners learn the fundamentals of Bitcoin and how to build full-stack decentralized apps on Bitcoin L2s. [sponsored]

9. The Radix UI team just released Radix themes — an open-source component library with hundreds of variants, a handful of simple primitives for layout, and an extensive token system provided via CSS variables.

10. Mark Erikson wrote about His experience modernizing packages to ESM. Mark is living proof that the OSS gods always save their toughest battles for their strongest soldiers. Love you, Mark 🫶.

---

The marketing pitch for React.useState is that it allows you to add state to function components. This is true, but we can break it down even further. Fundamentally, the useState Hook gives you two things - a value that will persist across renders and an API to update that value and trigger a re-render.

const [value, setValueAndReRender] = React.useState(
  'initial value'
)

When building UI, both are necessary. Without the ability to persist the value across renders, you’d lose the ability to have dynamic data in your app. Without the ability to update the value and trigger a re-render, the UI would never update.

Now, what if you had a use case where you weren’t dealing with any UI, so you didn’t care about re-rendering, but you did need to persist a value across renders? In this scenario, it’s like you need the half of useState that lets you persist a value across renders but not the other half that triggers a re-render — Something like this.

function usePersistentValue (initialValue) {
  return React.useState({
    current: initialValue
  })[0]
}

Spoiler alert, the functionality of our custom usePersistentValue Hook is very similar to the built-in React.useRef Hook.

If you want to add state to your component that persists across renders and can trigger a re-render when it’s updated, go with useState (or useReducer). If you want to add state to your component that persists across renders but doesn’t trigger a re-render when it’s updated, go with useRef.