The power of layers

Issue #230.October 12, 2023.2 Minute read.
Bytes

Today’s issue: What Phil Collins taught me about dotenv, a new Astro mascot (?), and the exchange rate of Vercel AI credits to Chuck E. Cheese tokens.

Welcome to #230.

Eyeballs logo

The Main Thing

Shrek talking to Donkey, but it's anime

The best UI libraries are like onions

The power of layers

The React Aria team recently released a new library of unstyled components that’s built on top of the existing Aria React Hooks library.

That might not sound like a huge deal, but dig a little deeper, and you’ll see that this takes React Aria to a whole new level. So let’s start digging.

Quick review: React Aria was originally created by Devon Govett as a hooks library that provides helpful UI primitives for your design system. It gives you elements with built-in a11y, i18n, and adaptive interactions (a18s?), then lets you control the rendering and style choices.

But it turns out, that’s just the base layer of the parfait.

By building a component library on top of the hooks library, React Aria now gives you an easy way to build accessible components with custom styles, but also gives you the flexibility to drop down to the hooks and customize anything you want, without needing to start over.

This solves one of the biggest problems that most component libs face, where if a specific component doesn’t fit your company’s design system or provide the functionality you need, you’re SOL and need to build it from scratch.

But React Aria gives you three different ways to use it and avoid that problem:

  1. Use the top-layer components out of the box, and just add styling.

  2. Go down to the React Hooks layer to build your own design system or lower level customizations, so you don’t have to build components from complete scratch.

  3. Mix and match the components and hooks to build custom compositional APIs with contexts, slots, and states.

Bottom Line: Shrek taught us about the power of layers back in 2001, and I’m glad that a young Devon Govett was paying attention.

        
Nylas logo

Our Friends
(With Benefits)

Merlin from Sword and the Stone in a swimsuit and sunglasses

Me omw to Belize after knocking out the email sprint 1.5 weeks early

Email, Calendar, and Contacts ➡ in your app. Build for free with Nylas.

Over 250,000 developers use simple APIs from Nylas to seamlessly integrate emails, calendars, and contacts in their apps.

Why? Because communication features can instantly make your app more powerful, but they can take forever to build from scratch. Thankfully, Nylas lets you quickly:

  • Build in-app calendar views & scheduling tools
  • Enable instant, in-app event booking
  • Power automated one-to-one email outreach that lands in inboxes, not spam

Start building today for free and see how easy it is to connect to 100% of email service providers (Gmail, Outlook, etc).

Spot the Bug logo

Spot the Bug

Sponsored by Bugherd

Still using spreadsheets and email for website feedback? Might be time to switch to BugHerd to better manage web projects. It automatically provides a screenshot, along with the user’s browser, OS, and more so you can pinpoint issues and resolve bugs fast.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Spot the bug</title>
    <meta name="description" content="Gotta spot the bug" />
    <meta charset="ISO-8859-1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <img
      src="https://bytes.dev/images/bytes-banner-rounded.png"
      width="300"
      height="150"
    />
    <p>
      Bottom Line: With a release like this, the Astro hype train rocket
      probably won't be slowing down anytime soon. So we have to cherish moments
      like this while we have them, because your kids always grow up way too
      fast 🥹.
    </p>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. Astro 3.3 just came out with a new <Picture /> component that can be used to generate a <picture> element with multiple <source> elements. Apparently, this was the most highly upvoted PR in Astro history — which is a little disappointing, considering I recently submitted a PR to make this photo of Ben Holmes the official Astro mascot.

  2. Nina Torgunakova and Travis Turner wrote 5 best practices for preventing chaos in Tailwind CSS.

  3. Multi is a slick new way to work on code together with your team. Their free MacOS app lets you point, draw, and take control of your teammates’ apps, so it feels like you’re actually working together in the same room. Click here to try it out, and you can skip the (very long) waitlist. [sponsored]

  4. Adam Argyle wrote an article about CSS relative color syntax. I can’t wait to dress up as Adam for Halloween and finally feel what it’s like to be someone who’s both well-dressed and good at CSS.

  5. Deno just launched Fresh v1.5 with a brand new approach to client-side navigation they call Partials.

  6. As part of his Rails World 2023 Keynote, DHH talked about how Hotwire and ESM Import Maps enable you to build your frontend without needing “any form of real build steps.” And also how everyone who doesn’t use it is stupid. Just kidding (kind of).

  7. Kevin Purdy wrote about How a 23-year-old first-time Firefox coder fixed a 22-year-old bug.

  8. Vercel transitioned v0 from alpha to beta and announced their new pricing plan, where $50/month gets you 10,000 “credits.” I’d like to know how that exchange rate compares to Chuck E. Cheese tokens, because I’m very familiar with that math.

  9. Bramus wrote an article called The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark(), a new CSS utility function.

  10. François Best wrote about how Dotenv is dead now that Node v20.6 brings support for loading environment variable files. dotenv might be gone, but as Phil Collins taught me on the Tarzan soundtrack, it’ll always be here inside my heart.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by Bugherd

Specifying a charset of <meta charset="ISO-8859-1" /> will cause special characters and emojis to not render properly.

In order to properly render emojis, the document needs to use Unicode Transformation Format (UTF), UTF-8 being the most commonly used encoding for web development. Most browsers default the encoding to UTF-8 (or try and detect it automatically), but for older rendering engines (cough email) you will need to explicitly set your charset, or like us, you could be spending hours trying to figure out why your emojis won’t render 😭.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Spot the bug</title>
    <meta name="description" content="Gotta spot the bug" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <img
      src="https://bytes.dev/images/bytes-banner-rounded.png"
      width="300"
      height="150"
    />
    <p>
      Bottom Line: With a release like this, the Astro hype train rocket
      probably won't be slowing down anytime soon. So we have to cherish moments
      like this while we have them, because your kids always grow up way too
      fast 🥹.
    </p>
  </body>
</html>