The Cascadeaissance

Today’s issue: Turning SVGs into McDonald’s Sprite, starting a PHP comeback, and celebrating Chrome’s Cascadeaissance.

Welcome to #214.

---

Is shadcn/ui the new Bootstrap?

Vercel acquired another OSS infinity stone last week when they hired shadcn, the pseudonymous creator of the eponymous collection of React components called shadcn/ui. (SAT prep words ftw.)

Despite its less-than-catchy name, shadcn/ui has been blowing up over the last few months. And one key reason for that is because it refuses to call itself a library. All the components are copy/paste, and they’re not packaged as a dependency or published as an npm package at all.

The docs say that this approach gives you “ownership and control over the code, allowing you to decide how the components are built and styled.” And by not packaging the components in an npm package, you’re able to separate the design of your components from their implementation.

For some of you, this approach might remind you of another set of UI components that, like Carly Rae Jepsen, started taking the world by storm in 2012. It rhymes with Tootstrap.

Technically, Bootstrap was a library that you could npm install, but one of the best parts about it was how you could simply copy/paste the code for a component you needed. After a while, we all got tired of our sites looking the same, because those custom overrides were painful af. That eventually led to the rise of more React-specific UI libraries like Material UI and Chakra.

These CSS-in-JS libraries made customization much easier with dynamic styling and better scoping of styles. But as React has started to shift away from SPAs and towards SSR and RSC, we’ve seen CSS-in-JS start to fall out of favor.

That’s where shadcn/ui comes in. It offers the copy/paste-ability of Bootstrap with the easy customization of Chakra and MUI. And because it’s built on Tailwind CSS, it can play much nicer with modern React than the CSS-in-JS libraries.

The components give you “some sensible defaults,” then make it easy for you to customize them to fit your needs. Thousands of developers have now used shadcn/ui to build their own UI’s or their own full-fledged component libraries.

Bottom Line: It’ll be exciting to see where this component library collection is able to go from here now that shadcn is able to work on it full time at Vercel. It’s got a long way to go to catch up to Bootstrap’s popularity, but the early returns look promising.

---

Multi makes it seamless to work together on code

Are you tired of doing the screen-share dance and trying to describe which lines of code need to change when you’re working with your teammates remotely?

Multi’s free MacOS app can fix all that.

It adds a multiplayer layer to your desktop, which makes it easier to collaborate and build together in real time. Here’s how:

• Teammates can easily share any app, and Multi lets you simply point, draw, and take control of your teammates’ apps.

• You can open your own instance of shared content with automatically shared deep links.

• Best part is, the whole experience feels like a natural extension of macOS.

Even Miško Hevery (creator of Angular) says it’s his “go-to way to collaborate on code.”

Multi is giving Bytes readers a chance to skip their massive waitlist: try it out here.

---

const people = [
  { firstName: "Aaron", lastName: "Smith" },
  { firstName: "Émile", lastName: "Zola" },
  { firstName: "Charlotte", lastName: "Brown" },
  { firstName: "Beyoncé", lastName: "Knowles" },
  { firstName: "Ólafur", lastName: "Arnalds" },
  { firstName: "David", lastName: "Jones" },
  { firstName: "Zoë", lastName: "Deschanel" },
];

function sortAlphabetically(arr) {
  return arr.sort((a, b) => {
    if (a.firstName < b.firstName) {
      return -1;
    }

    if (a.firstName > b.firstName) {
      return 1;
    }

    return 0;
  });
}

sortAlphabetically(people);

---

1. The Chrome 117 beta adds 6 new CSS features, because we are currently living through a CSS renaissance - or as I like to call it, a Cascadeaissance.

2. Cloudflare’s Developer Platform saved us thousands of dollars, and it can probably do the same for you. CF Workers can massively reduce hosting costs, and R2 object storage lets you store data without egress fees — all while improving site performance. [sponsored]

3. Andrei Gătej wrote about React Suspense’s throttling and some of the weird behaviors you get when nesting Suspense components.

4. Daniel Bot wrote an article called How we improved our Serverless API 300x. I’m 98% sure Daniel is a real human.

5. Deno’s Fresh framework just released v1.4 with support for _layout files and faster page loads, thanks to ahead-of-time compilation.

6. Aaron Francis made a 10-minute video about why PHP doesn’t suck (anymore). I’ll take your word for it, Aaron, but thank you for your service.

7. Darius Cepulis wrote an article called Can React Server Actions finally fix forms?

8. AI Town is a “deployable starter kit for building and customizing your own virtual town where AI characters live, chat, and socialize.” Am I still banned from attending city council meetings in here too?

9. Brian Rinaldi wrote Lifting Off with Astro which gives a helpful intro to the “why” and “how” of Astro.

10. Sprite your SVGs lets you paste in your SVG code to generate an optimized sprite for better performance and styling flexibility. Now I’m craving a Sprite from McDonald’s with enough strength to take out a Victorian-era child with one sip.

---

const people = [
  { firstName: "Aaron", lastName: "Smith" },
  { firstName: "Émile", lastName: "Zola" },
  { firstName: "Charlotte", lastName: "Brown" },
  { firstName: "Beyoncé", lastName: "Knowles" },
  { firstName: "Ólafur", lastName: "Arnalds" },
  { firstName: "David", lastName: "Jones" },
  { firstName: "Zoë", lastName: "Deschanel" },
];

function sortAlphabetically(arr) {
  return arr.sort((a, b) => {
    if (a.firstName < b.firstName) {
      return -1;
    }

    if (a.firstName > b.firstName) {
      return 1;
    }

    return 0;
  });
}

sortAlphabetically(people);

By default, string comparison in JavaScript is not language-sensitive (meaning it doesn’t take into account language-specific rules or special characters like accents), which results in the sorted list not being in the correct order.

The solution is to leverage Intl.Collator which enables language-sensitive string comparison.

function sortAlphabetically(arr) {
  const collator = new Intl.Collator("en", { sensitivity: "base" });
  return arr.sort((a, b) => collator.compare(a.firstName, b.firstName));
}