v0 to hero

Today’s issue: A Harry Styles-inspired syntax highlighter, new React alternative that’s stealing slogans from my bicep tattoos, and a reducer library that admits to abusing PEDs.

Welcome to #223.

---

v0 to hero

In today’s episode of Our Startup is Actually an AI Company Now, Vercel just launched v0, which they describe as “Midjourney for React.”

No, that doesn’t mean it can compose cursed images of half-Shrek-half-Donkey people. But it does allow you to use natural-language prompts to generate copy-and-paste React components that are based on Tailwind CSS and shadcn/ui.

v0 is still in private alpha, but early results look promising for contact forms, testimonial cards, pricing pages, and other example components we’ve seen so far.

At this point, you might be thinking, Wait a minute, that’s 90% of what I do for my job.

Yes, but I also have good news: when the Otis Elevator Company started selling automatic elevators in the early 20th century, it made all of the elevator operators’ jobs way easier… for a few months 🥴.

Ok, I’m (mostly) joking. Like most generative AI tech, v0 isn’t spitting out pixel-perfect end products on the first try. For now, it seems most useful for solving the blank canvas problem to help you get started and iterate faster.

Here’s what a v0 workflow might look like for building a trendy landing page:

• Type an initial prompt like, “Trendy, Stripe-inspired landing page for my boring SaaS product”, and v0 returns three different UI options with the accompanying code.

• Choose the one you like the best and continue iterating by giving additional prompts. You can prompt changes to specific elements or to the entire UI. v0 keeps a version history and creates links you can share with your team.

• Once you’ve gotten as close as you can with the AI prompting, you can copy and paste the React code and continue working on it yourself.

Bottom Line: I’ve heard a rumor that you can skip the waitlist by carrying a pig up a mountain, making it drink water from a stream, and singing it this very specific song:

“If only, if only,” the engineer sighs,
“I could make slick components by prompting AI.”
So she waits on the waitlist, hungry and lonely.
And cries to the moon, “If only if only.”

---

Kinde gives you powerful auth — free up to 7,500 MAU

There’s only one thing worse than building auth from scratch: building your own hacky auth features on top of an auth platform you’re already paying for — because it doesn’t have what you need.

As Don Draper would say, “That’s what the money is for!”

Next time, try using Kinde. Their auth platform is simple to set up, but it comes with everything you need to build a powerful auth solution:

• Passwordless auth, social/dev logins, and multi-factor auth help reduce friction for your users.

• Out-of-the-box enterprise features like custom roles & permissions and enterprise SSO help you sell your product to the big dogs.

• Best-in-class security protocols help you (and your enterprise customers) sleep well at night.

Kinde has one of the strongest free tiers we’ve seen, and their simple setup makes it easy to try it out for yourself.

Check it out.

---

We usually try to keep these 🍦 JavaScript, but here’s one for you React devs this week.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>Increment</button>
    </>
  )
}

---

1. Remix v2 just launched last week, and they’re promising a “nearly seamless upgrade” for Remix v1 users. That’s why they used to call Michael Jackson “Nearly Seamless Nick” in high school.

2. Break the internet, not your wallet, by getting low prices on domain names and powerful hosting solutions from Porkbun. Save $1 off your next domain name with code BYTES23, and choose from over 500 domain extensions, including .dev, .ai, and .tech. Because we both know you can never have too many domains. [sponsored]

3. Crystallize.js describes itself as “a reducer on steroids, but if reducers had undo/redo and time-travel.” That does sound fun, but watch out for that steroid bacne.

4. Nicholas Yang from the Turborepo core team wrote about Using Zig in our incremental Turborepo migration from Go to Rust and “cross-compiling a Rust-Go-Rust sandwich to 6 platforms.” The Rust-Go-Rust sandwich has always been my #1 order at Jimmy Johns.

5. Stephanie Eckles wrote about How Custom Property Values are Computed in CSS.

6. In The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript, the 2018 version of myself breaks down what I believed to be “the most important and fundamental concept to understanding the JavaScript language”. The 2023 version of myself would tell the 2018 version of myself to chill out.

7. 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]

8. Phil Nash wrote about two new array grouping methods in JavaScript, Object.groupBy and Map.groupBy, which will make grouping easier and save us time or a dependency.

9. Sugar High is a super lightweight syntax highlighter for JSX that now has me craving Sour Patch Kids and singing Harry Styles. Dammit.

10. Nue is a powerful React, Vue, Next.js, Vite, and Astro alternative that calls itself a “Frontend Troublemaker.” And I demand to know which Nue developer directly copied that slogan from my left bicep tattoo without my permission.

---

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>Increment</button>
    </>
  )
}

You might expect that clicking the button would increment our number state by 3, but that’s not how it works. In short, JavaScript creates a closure around the number variables so it’s as if we’re doing

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

which of course will always set number to 1.

Instead, if we want to update the same state multiple times before the next render, we can pass a function to our setter function like so -

setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

Now React will add all these functions to a queue, and during the next render, React goes through the queue passing the result from the previous item in the queue to the next, eventually leading to a number of 3.

0 + 1 = 1
1 + 1 = 2
2 + 1 = 3