Bytes #99 - Why Web Components Lost

This week, we’ve got React hook turtles all the way down, Jörmungandr trying to take down JavaScript, and a surefire way to get on Linus Torvald’s good side.

Welcome to #99.

Turtles on Turtles

React hooks are causing problems which can only be solved by another React hook which is causing problems which can only be solved by another React hook which is causing problems which can only be solved by another React hook.

React Hooks is turtles all the way down

Using React hooks is kinda like cutting your own hair. Seems easy enough, but in reality you’re a screw up away from a buzzcut and an unhappy spouse (couldn’t be me…). For years now React developers have struggled with the hooks API, specifically with useEffect. Up until now, to avoid issues with useEffect, you’ve probably had to write code you aren’t proud of.

Fortunately, the React core team just posted a RFC (request for comments) for a new hook to solve your problems… or confuse you even more… or both (jury’s still out).

We don’t have space to go into all the details, (that’s what the RFC is for), but here’s the tl;dr. The new hook is called useEvent. It provides a “stable identity” function, that always runs with the latest props/state without needing the dependency array. It’s like useCallback but also not like useCallback. So where does useEffect come in? Well, it’s like useEffect but also not like useEffect.

If that’s confusing, here’s a great tweet that should help.

The React core team is still collecting feedback on the API, so there’s a small chance the name or something else important will change. But we’re confident it will turn out great (given that design by committee typically produces great results 🙂).

The bottom line: Some hooks are confusing. And so more, less confusing hooks will help with the confusing hooks. Don’t worry if you’re confused - you’re not alone.

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.

Samuel L. Jackson holding a snake.. on a plane

I’ve had it with these mother-fricking snakes in my mother-fricking HTML

Python in the browser?

We knew this day would come eventually: Python is coming for the web. This is not a drill.

Wtf? The Anaconda team just announced PyScript — a brand new framework that lets you run Python in the browser and build web apps using Python and “special HTML tags”, which we all know and ~~love~~ mostly ignore as web components.

Why tho? Because just like Jörmungandr, the giant snake child of Loki in Norse Mythology that wraps itself around the entire world, Python is coming for us all.

In a more literal (and less apocalyptic) sense, the PyScript team says they created it to “give users a first-class programming language that is less weird, more expressive, and easier to learn than Javascript.” Ouch 😔

Besides the subtweeting, here’s what else is going on inside PyScript:

A clean-and-simple API and HTML elements with custom components that are “opinionated and predictable.”
A tech stack built on WebAssembly, Emscripten (no we didn’t make that word up), and Pyodide that tries to “strip away most of the complexity of the client/server modern web” by enabling drop-in content, external file hosting, and app hosting that doesn’t rely on server-side configuration.
A simple way to run popular Python packages and the scientific stack in the browser.
Bi-directional communication between Python and JavaScript objects and namespaces, so that everyone can play nice together.

The bottom line: You can keep your fancy new “simplified web platform.” I’ll be over here executing arbitrary code from NPM while I argue on Twitter about a UI library being too low level.

Jobs

Yeti Labs is looking for Frontend (React + Typescript) developers

Yeti Labs is a human-centered frontend studio designing and building web apps for DeFi protocols. We love UI animations, innovative UXs, best practices, reusing our code, improving our workflow and learning new things. Come join our crew as we solve interesting challenges while having fun.

Loops is looking for founding full-stack Next.js engineers

Most email platforms are showing their age — heck, this email was sent via a platform that is 9 years old now! Loops is a modern and beautiful alternative for SaaS companies. Our stack is Next.js, Postgres, and Tailwind. We just wrapped YC and our seed funding raise led by Craft Ventures. Come join our core engineering team!

📝 QUIZ TIME — Sponsored by Retool

Retool’s brand new React component library makes it super easy to build any internal tool you can think of. We use Retool daily and we ❤️ it.

Given this HTML and CSS, what color is the background of the page?

<html>
  <head>
    <style>
      .cool {
        background: red;
      }

      body {
        margin:0;
        background: goldenrod !important;
      }

      @keyframes color {
        to {
          background: rebeccaPurple;
        }
      }

      body {
        animation: color 0s linear;
        animation-fill-mode: forwards;
      }
    </style>
  </head>
  <body class="cool">
    😎
  </body>
</html>

Cool Bits

We made a totally non-controversial video about Why Web Components Lost. It’s similar to Severus Snape in The Deathly Hallows Part II, but - you know, without the redemption arc.
Unlayer created this drag-and-drop email editor, page builder and popup builder that you can easily embed in your SaaS app. [sponsored]
William Kennedy wrote a passionate defense of single page applications. It’s a little wordy, but it makes some great points.
Jack Franklin (from the Chrome team) wrote an article called, Why I Don’t miss React — which reminds me of when I wrote a blog post called “Why I don’t miss my Ex.” It helped me heal too, Jack.
Component Party lets you compare the syntax for similar components in React, Vue, Svelte, and Angular. Created by some guy named Rod.
Ryan Dahl wrote an article about how JavaScript Containers could become a viable alternative to Linux Containers. Rumor has it that if you read it three times out loud, Linus Torvalds will personally show up to your house and verbally abuse you.
Lerna lives! Last Monday, we wrote about how Lerna had declared that it’s no longer actively maintained, and then on Friday they announced that Nrwl would be taking over stewardship of the Lerna project. We don’t want to take 100% of the credit for saving it, but we also definitely do.
Marc-André Giroux wrote about how GraphQL is not a trap — in response to a tweet thread that tried to make the opposite argument last week. Watching him dissect each tweet like a cross-examining trial lawyer felt like a watching the deposition scenes in The Social Network mixed with the Amber Heard—Johnny Depp trial, mixed with… GraphQL.

📝 QUIZ TIME Solution — Sponsored by Retool

<html>
  <head>
    <style>
      .cool {
        background: red;
      }

      body {
        margin:0;
        background: goldenrod !important;
      }

      @keyframes color {
        to {
          background: rebeccaPurple;
        }
      }

      body {
        animation: color 0s linear;
        animation-fill-mode: forwards;
      }
    </style>
  </head>
  <body class="cool">
    😎
  </body>
</html>

The !important overrides any other background colors on the element, but the animation keyframe overrides the background property, even with !important. That means the background color is actually rebeccaPurple.

The bug is using !important in the first place, and using the animation keyframes hack to override it. These are signs your CSS is difficult to maintain and will likely give you problems in the future. A better solution is using appropriate classes and specificity rules to override the background color without resorting to hacks.