Bytes.dev - Bytes: Why Web Components Lost

Bytes banner (Turn on images 😘)

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 Torvalds' 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

  1. 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.

  2. Unlayer created this drag-and-drop email editor, page builder and popup builder that you can easily embed in your SaaS app. [sponsored]

  3. William Kennedy wrote a passionate defense of single page applications. It’s a little wordy, but it makes some great points.

  4. 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.

  5. Component Party lets you compare the syntax for similar components in React, Vue, Svelte, and Angular. Created by some guy named Rod.

  6. 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.

  7. 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.

  8. 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.


Share Bytes

ui.dev banner
 

We work hard to make Bytes something you'd want to share with your developer friends. And to make it a little easier, we'll give you free stuff when you do.

20

Your bits

Your Referral Page

Your shareable link

https://bytes.dev?x=1697807915
 

Have a product you think our developers will love?
Advertise in Bytes

youtube icon youtube icon twitter icon instagram icon

50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101

Unsubscribe from Bytes

Key phrases

Older messages

Bytes: making FTP cool again

Tuesday, May 3, 2022

“WTF is this?” First off, watch your language. The RWD Weekly newsletter (of which you were subscribed) has merged with Bytes (this newsletter) to bring you our educational, yet delightful dose of

Bytes: The Edge is just a spicy CDN

Tuesday, May 3, 2022

This week, we're experimenting with our runtime features, learning about The Edge™️, and (hopefully) avoiding accidental tax fraud. Welcome to #97. Some experiments pay off Node gets experimental

You Might Also Like

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 410 - Node.js TSC Confirms: No Intention to Remove npm from Distribution

Thursday, March 28, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 410 - JSDoc as an alternative TypeScript syntax

Thursday, March 28, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular JavaScript news, articles

📱 Issue 404 - Dependency Injection for Modern Swift Applications Part II

Thursday, March 28, 2024

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 404 Release Date Mar 28, 2024 Your weekly report of the most popular iOS news, articles and projects Popular