creepy Tim Burton movies

Issue #91.March 14, 2022.2 Minute read.
Bytes

This week, we’ve got a TS/JS family reunion, an extended metaphor for React 18 involving a scary kids movie from the ’90s, and a ShadowRealms trademark battle for the ages. Welcome to #91.

Simpson's TypeScript + React Meme

So, come crawling back, eh?

TypeScript comes crawling back

It’s been 10 years since Microsoft decided they didn’t want to be part of the JavaScript family anymore and create TypeScript on their own instead.

But last week, TypeScript finally came crawling back and submitted an official TC39 proposal that suggests bringing “optional and erasable type syntax to JavaScript” 🤯

Why tho? TypeScript is great, but it still requires a build step to remove those pesky types so that JS engines can actually run the code.

This “types as comments” proposal (aka “it’s not me, it’s you”) would allow TypeScript-style annotations in JavaScript but have JS engines ignore them entirely. IDEs and tsc could still use the types to make sure your code works, while the same code could run in a browser or NodeJS without any modification.

This proposal would solve one of the most requested JavaScript features — but we knew you’d have questions, so we made you this FAQ:

  • So is JavaScript getting static types? Nope, this just adds a fancy way to write comments that engines ignore but IDEs and tsc can use for type checking.

  • Won’t this bloat my JS bundles? Minifiers can strip out the type annotations for production code. This proposal is most helpful during development or for smaller sites.

  • But I hate TypeScript! Not a question, but fair. These type comments are totally optional, so your old JavaScript code will run just fine.

  • Aren’t you a little worried that Microsoft could be up to its old tricks to try and exert even more influence over the web dev ecosystem? Well damn, I am now.

The Bottom Line: I haven’t seen this many opinions on something since my Crossfit loving, vegan Uncle came over for Thanksgiving.

People smelling armpits

The jank is… inevitable [sponsored]

Clerk.dev — user management, now with less pain!

There’s only one lesson I hope my kids learn from me: “the best code is the code that you don’t have to write/maintain.” (“Be a good person” was a close second place.)

So if any of my offspring ever builds an app, they better use Clerk.dev for all their user management stuff.

Clerk has all the front-end components and back-end logic you need to quickly set up all types of auth, session management, user profiles, B2B features, etc.

It also integrates super smoothly with React, Expo, Next, and Gatsby to save you even more time.

Your users don’t care how your user management system works — they just want it to work, so they can get busy losing money on NFTs, gambling on virtual horses, or whatever your app does.

👉 Check out Clerk.dev’s free tier and stop worrying about the boring code nobody cares about.

People smelling armpits

I’m not afraid of you anymore!

Facing the React Rhino

Here’s a hot take for all the ’90s kids who were raised on creepy Tim Burton movies: React 18 has basically become the giant rhino from James and the Giant Peach.

Let’s take a look at the evidence:

  1. It’s big, powerful, and a little scary
  2. It’s taken a really long time to get here, but is somehow always looming in the background
  3. It’s becoming an elaborate metaphor for our early childhood traumas (ok, maybe that’s just me)

But after months of waiting, it’s almost time for us to face the beast. The first React 18 RC came out last week, which means we’re only (checks notes) “at least several weeks away” from the general release.

What to expect:

  • Concurrent Mode Features — Highlights include SSR with selective hydration (helps your app load and become interactive faster) and startTransition (keeps your app responsive during large screen updates).

  • Suspense — Here’s to hoping this kills all the “thE sUSpenSe iS KIlliNg mE” puns. I can’t take anymore. OK let’s continue. Wtf does <Suspense> *actually* do? Tl;dr — it lets your components “wait” for something (like data) before rendering. React 18 will provide stable support for all Suspense functionality, including exciting new stuff like data fetching (!!).

  • New Root API — ReactDOM.createRoot will replace ReactDOM.render() as the way to “kick off” your React app. When you switch to createRoot, you’ll get all of the new features of React 18 by default. Nice.

But there’s good news: the React 18 upgrade shouldn’t actually be that scary, even with all the big new features. That’s because the React team has smartly chosen to avoid an all-or-nothing Concurrent “Mode” approach. Instead, they’ve gone with a gradual, opt-in adoption process for Concurrent “Features.”

This means you can upgrade your apps to React 18 with minimal or no breaking changes, then start introducing the fancy new features whenever you want — eating the elephant rhino one bite at a time ftw.

Botton Line: Lots of frameworks and libraries fall into the trap of thinking that good developer experience simply means, “add more features as fast as possible” (*cough* Vue *cough*). But it’s cool to see the React team being just as thoughtful about how they introduce new features as they were with the creation of the features themselves.

Has it taken a long time? Yes. Will it be worth it? I wasn’t totally sure at first — but then I saw that React 18 is also killing support for IE, and now I’m 100% on board.

🔬 Spot the Bug — Sponsored by WorkOS

_WorkOS gives you Lego bricks for adding enterprise features to your app. You can use their modern API’s to add stuff like Single Sign-On (SAML) and SCIM user provisioning in a few minutes, instead of a few months.

function addAndSort(array, element) {
  return array.push(element).sort();
}

Cool Bits

  1. We spent way too long creating a Complete Guide to React Router: Everything you Need to Know. Even though you probably use Next.js now, it still makes for a great bed time story for your kids. Puts them right to sleep.

  2. The folks behind FusionAuth wrote a guide on how they use OAuth in the real world. It covers topics like the eight common OAuth modes, how to use the Authorization Code grant, and why you should never use the implicit grant. [sponsored]

  3. Matthew Phillips created Corset — a “new approach to declarative DOM binding” that basically replaces the JavaScript parts with CSS instead. It seems fitting (get it) that Spanx and Skims are the only GitHub sponsors so far.

  4. Safari apparently has woken up from its decade long slumber with a new “go getter” attitude. Safari 15.4 comes with 70+ new features including lazy loading, dialog, :has(), Cascade Layers, svh/lvh/dvh, focus-visible, accent-color, display: contents fix, scroll-behavior, Manifest icons, BroadcastChannel & more.

  5. Shader Park is a cool JavaScript library for creating interactive procedural 2D and 3D shaders. It’s also a perfect name for the Tony Hawk Pro Skater “create a park” I’ve been working on since I was 12.

  6. An empty, one-figure npm package called - has over 700k downloads and is a dependency in more than 50 other packages. And I’m pretty sure that’s the best argument I’ve heard for why the metaverse won’t work.

  7. Maxime Heckel wrote Everything about Framer Motion layout animations — and he means everything.

  8. Johnny Simpson wrote about ShadowRealms — a Stage 3 JavaScript proposal with a fun-and-spooky name. Unfortunately, “Shadow Realms” is also the name of a film script that I’ve been co-writing with Will Smith about a hero who defends the metaverse from evil, time-traveling aliens (with just a tiny bit of Scientology propaganda sprinkled in along the way). TLDR — the TC39 Committee will be hearing from my trademark lawyers soon.

🔬 Spot the Bug Solution — Sponsored by WorkOS

When you call array.push on an array, it doesn’t return the updated array, but rather the length of the array with the new item. That means you can’t chain the .sort() call to the end, since the result of .push is a number.

There are two ways to fix this. One option is to call array.sort() after the .push call.

function addAndSort(array, element) {
  array.push(element)
  return array.sort();
}

The second option appends the item to a new array with array.concat() and then sorts the new array.

function addAndSort(array, element) {
  return array.concat(element).sort();
}