Re-gifting React components

Most newsletters take the holidays off, but I know that some of you need this issue more than ever right now.

Godspeed, brothers and sisters.

Today’s issue: One small step for Zod, asking Claude to make me hot but approachable, and the reason why my grandma won’t shut up about Signals.

Welcome to #353.

---

Re-gifting React components

Remember when you forgot to get your little cousin a gift for Secret Santa, so you just gave him that Rascal Flatts concert DVD that had been sitting in your childhood bedroom since 2006?

Yeah, he probably still resents you for that – but thankfully, the Material UI team is a little more smooth when it comes to re-gifting.

They just released Base UI 1.0, an unstyled React component library that they extracted from the larger Material UI library and made available as a standalone package.

It comes with pre-built, production-ready components and low-level hooks that give you all the power of Material UI – without having to implement all of Material Design.

And it turns out, that gives you a few nice benefits:

• BYO-CSS – Unlike Material UI, Base UI has no built-in styling solution. This gives you complete control over the CSS layer and full compatibility with Tailwind, CSS-in-JS, or whatever other kinky styling stuff you’re into.

• A11Y best practices – So you can rest easy knowing that everyone can use your app, and no one can publicly shame you for being a bad person.

• Composability – The component APIs are fully open, which gives you direct access to each node. This allows you to easily add or remove parts, or wrap them however you want.

Bottom Line: Base UI gives you all the good parts of Material UI, without locking you into the “Google look.” And that’s the kind of re-gifting we can all get behind.

---

Project IDX brings your entire workflow to the browser

Project IDX is Google’s web-based development platform that gives you a one-stop shop to build, test, and deploy – it’s perfect for your new holiday side project.

Here’s what the workflow looks like:

• Step 1: Instantly spin up a new project (or import an existing one) with the online IDX editor. It supports every popular framework, so you never have to mess with boilerplate or set up a local env.

• Step 2: Build faster with the Gemini AI assistant, and get a live preview of your app with IDX’s built-in web previews and emulators.

• Step 3: Share the project with your team just like you’d share a Google Doc, and collaborate without needing to replicate your local env 🙏.

• Step 4: Deploy your app to Firebase or Cloud Run with one click, or spin up your own DB with Postgres, MySQL, and more.

Sound rad? (it is) – try out the Project IDX beta today.

---

function safeUpdate(obj, key, value) {
  if (!obj.hasOwnProperty(key)) {
    obj.key = value;
  }
}

const user = {
  name: "Alice",
  age: 30
};

safeUpdate(user, "country", "USA");

---

1. Sam Rose created this introduction to Turing machines that’s so interactive, it’ll feel like Benedict Cumberbatch is explaining it to you himself.

2. Waqas Younas created a visual guide to how concurrency works.

3. What’s capturing developers’ attention in 2025? Are you earning what you deserve? Join the *shorter* version of The Developer Nation Survey to influence developer trends while unlocking a free Virtual Goody Bag. Plus, you’ll get a chance to win a bunch of prizes. [sponsored]

4. shadcn/ui just announced monorepo support in the CLI, making it a lot easier to use shadcn/ui in a monorepo. The bad news is that you still work for a company that uses monorepos.

5. Clay is a flex-box style, auto-layout library with declarative syntax.

6. I gave my grandma this Angular Christmas Calendar, instead of her usual advent calendar. She was a little confused by the lack of chocolate and religious imagery – but she’s super into Signals now.

7. Reweb created a visual builder for Next.js, Tailwind, & shadcn/ui that lets you choose from pre-made templates (or generate UI with AI), customize them with a visual editor, and seamlessly export quality Next.js code. It’s used by thousands of developers and has gotten some pretty high praise. [sponsored]

8. Inertia just released v2.0 of its “modern monolith” framework for Laravel. It comes with async requests, deferred props, prefetching, and more Next.js features updates.

9. Zod 3.24 is the first version of Zod to implement the Standard Schema spec. One small step for Zod, one giant step for type nerds everywhere 🫡.

10. This article from the Anthropic team gives some practical advice on how to build effective AI agents. Erik Schluntz and Barry Zhang are listed as the authors – but can you really call yourself an author if all you did was ask Claude to “Write me a 2,000-word essay on building AI agents that makes us seem intelligent, but relatable”?

---

This one was for the beginners.

function safeUpdate(obj, key, value) {
  if (!obj.hasOwnProperty(key)) {
    obj.key = value;
  }
}

Our bug is that we’re adding a literal key property to our object.

console.log(user.key) // "USA"

In JavaScript, if you want to use a variable as the key of an object, you need to use bracket notation instead of dot notation.

function safeUpdate(obj, key, value) {
  if (!obj.hasOwnProperty(key)) {
    obj[key] = value;
  }
}