Two words: React fatigue

Issue #101.May 23, 2022.2 Minute read.
Bytes

This week, we’ve got blessings from the platform, math being a very cool thing, and yet another existential crisis.

Welcome to #101.

Dog as a gift meme

The Chrome team presenting new platform features

Google I/O Goodies

While y’all were busy watching the Johnny Depp—Amber Heard trial (sickos), “One take Jake” and the rest of the Google team just wrapped up another I/O. This year they were able to (mostly) avoid getting our hopes up, and then crushing us with the inevitable “it’s available behind a flag 🥲,” thanks to the Interop initiative (which might be the biggest thing no one is talking about).

TLDR: Browser vendors set aside their differences back in 2019 to start working together on fixing deficiencies in the web platform. So far, it’s resulted in an explosion of new features and fixes that are supported across all major browsers. It turns out, Google DevRels have been listening to your subtweets feedback after all.

Let’s break down some of these cool, new, (mostly) non-flagged features from I/O 2022.

HTML & CSS:

  • Dialog element lets you create accessible modals that work with forms out of the box. Noice.
  • You can now style checkboxes, radios, and more with accent-color
  • Container queries — they’re like media queries but for container elements (still needs a polyfill, but otherwise huge W)
  • :has and :is selectors — so useful (go look them up)

JavaScript:

  • Top level await (no more async function closures) — LFG!
  • Private class methods for all you class-loving heathens
  • Accessing the last item in an array got easier with arr.at(-1) (also works for strings)
  • New utilities like structuredClone & createImageBitmap

Things we can’t have yet, but have been promised:

  • The navigation and page transition APIs
  • Select Menus that we can style 🙏 (we’ve only been waiting our whole lives)
  • CSS anchor positioning (will save appx. 1 million lines of JS in every app)

Bottom Line: If the goal of I/O was to get us hyped about the future of the web platform, mission accomplished. The only thing missing was a Google Devrel version of (Tech) Celebrities Read Mean Tweets. There’s always next year.

Skeleton admiring some silk

“You set this up in 5 minutes? Incredible.” [sponsored]

FusionAuth made my job fun again

I got into this industry for one reason — my burning passion for building complex authentication solutions.

Ok, that’s a lie.

Call me old fashioned, but I’m just a little more interested in building features that users *actually* care about — instead of worrying about crap like SSO, MFA, user management, and all the security headaches that come along for the ride.

That’s why we’re huge fans of FusionAuth.

They handle all of the messy auth and security stuff for you, and make it super easy to integrate with your app in 5 minutes or less (no matter how weird your tech stack is).

They’re also way more flexible than most other auth tools — you can deploy anywhere, you can self-host, and you can easily customize whatever you want with their straightforward APIs and webhooks.

Check it out — and never worry about hand rolling auth again.

Kermit on acid

Do you have a minute to talk about our fearless leader, Solid.js?

What’s behind the Solid.js hype?

If you’ve spent any time on tech Twitter recently, you’ve probably noticed two things:

  1. There’s been a lot of love for Solid.js over the past few weeks
  2. Your level of happiness is perfectly inversely correlated with the amount of time you spend on tech Twitter

But since we all know that coRreLaTioN != cAuSaTiOn, let’s ignore point #2 and dive into the hype behind Solid.js — or as its friends like to call it, “React: the good parts.”

Just like React, you build Solid apps with components, which (for both frameworks) refers to JavaScript functions that return JSX. Solid also borrowed a bunch of other React features like SSR & Hydration, Concurrent Rendering, Context, and more.

But unlike React, there’s no Virtual DOM and no Hooks rules. Instead, Solid uses a compiler (similar to Svelte) that converts your JSX into vanilla JS. This makes Solid a lot simpler than modern React and a lot faster.

But Solid’s been around for a while (2018-ish). So why are we hearing so much about it now?

Two words: React fatigue.

It’s no secret that even die-hard React fans are starting to get a little disillusioned by the growing complexity around Hooks. So it’s probably no coincidence that we started hearing lots of great things about Solid’s simplicity right after the React team posted an RFC for a new hook, useEvent, which received… mixed reviews. (Yes, I am still aware that coRreLaTioN != cAuSaTiOn, thanks for checking.)

Bottom Line: This is definitely still the honeymoon phase for Solid (they just released v1.4). And it’s easier for a framework like Solid to preach the virtues of speed and simplicity from the earlier stages of the development and adoption lifecycle, than it is for a more mature and popular framework like React.

That said, Solid does look awesome. It combines the best parts of two beloved frameworks (React and Svelte) to make a new framework that’s simple, fast, and powerful. And we can always appreciate a good mash-up.

🔬 Spot the (TypeScript) Bug — Sponsored by Courier

This livestream shows you how to add Slack as a transactional notification channel with Courier’s super simple API.

function addTriple(inputs: number[]): number {
  return inputs[0] + inputs[1] + inputs[2];
}

Cool Bits

  1. Speaking of Solid.js, Ryan Carniato (Solid’s creator) just announced that he’s leaving his job at eBay and joining Vercel Netlify! The funding OSS by tricking VCs into investing in hosting providers trojan horse is alive and well!

  2. Chromatic lets you automate all your workflows for Storybook — gathering UI feedback, visual testing, and documentation — so you can iterate faster with a lot less manual work. [sponsored]

  3. Jay Hoffman wrote about the history of the web apps vs. web sites debate. Is there really a difference between them? Does it matter? Does anything? Does my life have meaning? Read to find out.

  4. Flutter v3 was released at Google I/O with stable support for Linux and MacOS. That’s cool, but don’t call yourself a true “cross-platform framework” until you start supporting Palm OS.

  5. Malte Ubl (Chief Architect at Vercel) wrote more than you ever wanted to know about font loading on the web. It’s a lot like when Shaq told us more than we ever wanted to know about his crush on Tom Brady.

  6. Mithril.js just released its first new version in three years. Don’t call it a comeback.

  7. Fastly just acquired Glitch. We didn’t read the whole press release, but it did talk about “the edge” a lot, so I guess it sounds promising?

  8. Math expressions can now be rendered in Markdown on GitHub. Because Math is a wonderful thing. Math is a really cool thing. So get off your ‘ath let’s do some Math. Math, math, math, math, math.

🔬 Spot the (TypeScript) Bug Solution — Sponsored by Courier

function addTriple(inputs: number[]): number {
  return inputs[0] + inputs[1] + inputs[2];
}

TypeScript will warn us if we pass anything but an array of numbers to that function, but if the array has less than 3 items in it, the third item will be undefined and our function will return NaN. TypeScript can’t know how many items are in the array, so it can’t warn us.

There are many solutions to this. One would have us change our type signature to be a tuple type instead of an array. TypeScript can then warn us if our array doesn’t have enough options.

function addTriple(inputs: [number, number, number]): number {
  return inputs[0] + inputs[1] + inputs[2];
}

Another option is to enable the noUncheckedIndexedAccess TypeScript compiler option, which will force us to check that each item isn’t undefined.

function addTriple(inputs: number[]): number {
  if (
    inputs[0] === undefined ||
    inputs[1] === undefined ||
    inputs[2] === undefined
  ) {
    throw new Error("Invalid input");
  }

  return inputs[0] + inputs[1] + inputs[2];
}