Wangular is born

Issue #273.March 21, 2024.2 Minute read.
Bytes

Today’s issue: Our glorious YouTube comeback, CSS-in-JS gaslighting, and qualifying for the extreme dogfooding Olympics.

Welcome to #273.

Eyeballs logo

The Main Thing

Bobby from the Goofy Movie

Respect the Wiz

Wangular is born

24 hours ago, we had a totally different story ready to go for this issue. But then the Angular team decided to make a big announcement and blow up my whole evening — just like they did on my wedding night a few years ago (don’t ask).

The big news? Depending on who you ask, Angular is definitely or maybe merging with the Wiz framework.

If you’re unfamiliar, Wiz is Google’s internal JavaScript framework that was created by Malte Ubl over a decade ago and currently powers apps like Search, GMail, Photos, and more. Malte now wishes he had open-sourced Wiz, but he “didn’t realize how relatively powerful and unique it was” at the time.

How it happened: Last year, the Angular and Wiz teams were each working on adding Signals to their respective frameworks. So they decided to share code and work synergize together with the goal of getting Wiz + Angular signals primitives adopted into one of the Google’s production apps.

But they didn’t just choose some random application that Google was planning to kill in a year. They went for the big kahuna — YouTube.

Fast forward to today, and Wangular Signals™️ are now being used in production for 100% of YouTube mobile web traffic with some promising results:

  • Better performance by default, including 35% better input latency on low-end devices without developers having to think about it.

  • Simplified framework concepts like memoization, stale closures, and unexpected re-renders.

  • More maintainable code with automatic dependency tracking, automatic cleanups, and dynamic dependencies.

Bottom Line: Like we mentioned earlier, it’s still a little unclear if Angular and Wiz are going to fully merge into Wangular. But it’s been fascinating to watch Angular continue to lean in to Signals for reactivity and continue to reinvent itself. Regardless, good to see

        
Postman logo

Our Friends
(With Benefits)

Michael Cera driving a car shirtless

Omw to POST/CON

Why attend POST/CON?

Here are 5 good reasons to attend POST/CON 24 in San Francisco this April 30 - May 1:

  • Learn from James Q Quick, Shweta, Palande, Kedasha Kerr and other Postman experts in hands-on labs, workshops, and talks to gain new skills for your job.
  • Get a sneak peek at the future of API development, including innovative ways to use AI and next-gen Postman tools.
  • Network with tech leaders and developers from OpenAI, Salesforce’s Heroku, Fortune 500 companies, and fast-growing startups.
  • Shape the future of Postman by giving feedback to their product team and learning more about their plans for the platform.
  • Have fun at the after-party with a live performance by T-Pain, and drinks in downtown SF.

Get 30% off your ticket if you sign up before March 26th.

Spot the Bug logo

Spot the Bug

Sponsored by Datadog

They created this free Mobile monitoring best practices guide, which goes over key metrics for understanding mobile app performance, how to track and diagnose errors, and more.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Sticky footer</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 0;
        margin: 0;
      }

      body > div {
        min-height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }

      header,
      footer {
        background-color: rgb(75, 70, 74);
        color: #fff;
        padding: 20px;
      }

      main {
        padding: 20px;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div>
      <header>This is the header</header>
      <main>
        <p>
          Main page content here, add more if you want to see the footer push
          down.
        </p>
      </main>
      <footer>Sticky footer</footer>
    </div>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. After almost 2 years, we’re back with a new YouTube video called The Story of AstroDB. I’m no doctor, but I’d argue that it’s the best video on YouTube about how a next-gen static site generator built their own database using a forked version of SQLite.

  2. Greg Foster wrote about how his team at Graphite runs a “roulette script” that randomly deletes one of their engineers’ accounts every day, as a way to manually test their product onboarding flow. It might sound insane, but we can’t deny their commitment to dogfooding 🐕. [sponsored]

  3. Node launched a major website redesign and experimental support for require()-ing synchronous ES modules in the same week. Joyee Cheung is the contributor responsible for the second one, and she wrote about Why it took so long.

  4. Dominik Tornow wrote this in-depth article about The Mechanics of Async Await.

  5. Rsbuild, the Rspack-based build tool for the web, just launched v0.5 with a “mostly stable” API that should be ready for a v1.0 release later this year. But you might as well try it now, because good APIs are like roommates — you have the most fun with the ones who are “mostly stable.”

  6. The Clerk team wrote a good deep dive on Comparing Authentication in React vs. Next.js with a real-world project and lots of helpful code examples. [sponsored]

  7. Dan Luu wrote about How web bloat impacts users with slow devices. And you know that everything he says is 100% accurate, because his blog is written entirely in plain, unstyled HTML.

  8. Sathya Gunasekaran has been working on the React Compiler at Meta, and he wrote this article about the details of React Compiler’s type system.

  9. Pigment CSS is an RSC-compatible, zero-runtime CSS-in-JS library that is trying to gaslight convince us that CSS-in-JS never went anywhere.

  10. Million Lint is a VS Code extension created by the Million team that describes itself as “ESLint but for performance.” I was going to make a joke about how it costs “$20 per month for 100 lints”, but after betting $5 on my alma mater just to watch them lose in the very first game of March Madness, I can confidently say that I’ve spent money on dumber things.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by Datadog

By default, the html and body elements behave as block level elements. This means that they will only take up as much space as their content requires. As a result, the footer will not be pushed to the bottom of the page if the content is not long enough. To fix this, you can set the html and body elements to take up 100% of the viewport height.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Sticky footer</title>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        font-family: sans-serif;
        padding: 0;
        margin: 0;
      }

      body > div {
        min-height: 100%;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }

      header,
      footer {
        background-color: rgb(75, 70, 74);
        color: #fff;
        padding: 20px;
      }

      main {
        padding: 20px;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div>
      <header>This is the header</header>
      <main>
        <p>
          Main page content here, add more if you want to see the footer push
          down.
        </p>
      </main>
      <footer>Sticky footer</footer>
    </div>
  </body>
</html>