Feasting at the Cloudflare buffet

Issue #327.September 30, 2024.2 Minute read.
Bytes

Today’s issue: Benchmarketing, earning karma points from the OSS gods, and testing millions of lines of Palantir code (and living to tell the tale).

Welcome to #327.

Eyeballs logo

The Main Thing

a buffet

Me reading Cloudflare release notes at 2 am

Feasting at the Cloudflare buffet

Legally speaking, I’m no longer allowed to be within 500 feet of my local Golden Corral Buffet because the manager says I “create a health risk for the other patrons by monopolizing the meatloaf station.”

But thankfully, I’m always welcome at the Cloudflare Buffet. And at last week’s Builder Day 2024, they served up 18 big updates to the Workers serverless platform that left me feeling fat and happy.

Here’s a quick breakdown of the three most impactful updates:

1. Improved Node.js compatibility – Workers now support twice as many Node APIs, so you can use a lot more npm packages to build a much broader range of JavaScript apps.

2. Open betas for Static Asset Hosting and CI/CD workflow – You can now upload and serve HTML, CSS, and client-side JavaScript directly as part of your Worker, which means you can use frameworks like Next.js and Remix to build dynamic SSR apps on Workers.

Their new CI/CD workflow lets you build and deploy everything from full-stack applications to static sites. Previously, you could only deploy Workers using the command line, so this should be a big deal for teams (and for Cloudflare’s bottom line, once they start charging for it).

3. Deploying Next.js apps to Workers – Cloudflare joined OpenNext, an initiative that’s working to provide a way to self-host Next.js apps across platforms besides Vercel.

They also just launched the @opennextjs/cloudflare npm package, an official adapter that Cloudflare is maintaining to let you deploy Next apps on Workers. It’s powered by the new Node.js compatibility layer and the Static Assets hosting feature for Workers that we mentioned earlier.

Bottom Line: Cloudflare is taking the moral high ground here, saying that cloud providers like Vercel “shouldn’t lock you in,” and that “open source frameworks should be portable.”

They’re not wrong, but they also stand to make a lot of money if they can convince a meaningful percentage of Next.js developers to start deploying their applications on CF Workers. Just like how Golden Corral stands to make a lot more money if they can get off their high horse and let me consume my endless meatloaf in peace.

        
Uploadcare logo

Our Friends
(With Benefits)

Homer Simpson about to hit Bart with a chair while he's not looking

The janky file uploader in my app preparing to betray me again

Uploadcare just launched a next-gen file uploader

And it’s everything we’ve dreamed of – simple to set up, zero effort to maintain, and more affordable than doing it yourself.

Here’s how it works:

  • They give you highly customizable components and code snippets for every framework (see this Next.js tutorial, or explore the source code)

  • It comes with out-of-the-box support for 14 different upload sources, and it works seamlessly on every browser and device (see the docs)

  • You keep full control of file uploads, so you can filter offensive content, protect against malware, and accept files from authorized users only

Check out their free live demo to see it in action – and you’ll be automatically entered to win a Keychron Q3 Max mechanical keyboard.

Pop Quiz logo

Pop Quiz

Sponsored by StackBlitz ⚡️

ViteConf is only 4 days away! Make sure to grab your (free) ticket, so you can watch the 24-hour marathon of talks live.

What gets logged when you click the inner div?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>What gets logged?</title>
    <style>
      #outerDiv {
        background-color: lightgrey;
        padding: 50px;
        border: 2px solid black;
        text-align: center;
      }

      #innerDiv {
        background-color: lightcoral;
        padding: 20px;
        margin: 20px;
        border: 2px solid black;
        text-align: center;
      }
    </style>

  </head>
  <body>
    <div id="outerDiv">
      Outer Div
      <div id="innerDiv">Inner Div</div>
    </div>

    <script>
      const outerDiv = document.getElementById("outerDiv");
      const innerDiv = document.getElementById("innerDiv");
      outerDiv.addEventListener(
        "click",
        (e) => {
          console.log("Outer div clicked!", e.target);
        },
        true
      );

      innerDiv.addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
          console.log("Inner div clicked!", e.target);
        },
        false
      );
    </script>

  </body>
</html>
Cool Bits logo

Cool Bits

  1. Last issue I wrote a very clickbaity enticing cool bit about all the WordPress drama… and I shared the wrong link. I’ve already atoned for my mistake (by responding to ~100 emails letting me know 🫶). So here it is for real this time – my b.

  2. Take the new, shorter version of Developer Nation’s global survey to help shape key trends in web dev and win some amazing prizes. You’ll also get a free virtual goodie bag that’s packed with helpful resources. [sponsored]

  3. Quentin Spencer-Harper wrote about lessons learned from testing over 1 million lines of TypeScript code while working as a frontend lead at Palantir for 10 years. I didn’t realize that former Palantir employees were allowed to speak after leaving the company, so this was a pretty interesting read.

  4. mitata is a powerful JavaScript benchmarking library with ascii visualizations, automatic garbage collection, and built-in confirmation bias 🥰.

  5. The two Convex co-founders made a YouTube video called Why Convex Sucks, where they take turns… crapping on their own product? And then they paid us to mention it in Bytes? Now that’s a big-brain marketing strategy I can get behind. [sponsored]

  6. Right after we wrote about Declarative Shadow DOM last week, Ryan Carniato wrote a slightly more opinionated article called Web Components are not the future.

  7. Lydia Hallie wrote a visual JavaScript primer to Durable Functions.

  8. Sentry created an Open-Source Pledge, where companies can sign up to pay OSS maintainers a fixed amount per year, self-report on it annually, and hopefully win some good karma from the software gods.

  9. Mat Marquis wrote this guide to destructuring in JavaScript.

  10. Erik Bernhardsson wrote an article called, It’s hard to write code for computers, but it’s even harder to write code for humans. I could’ve sworn that was a song title from the first Fall Out Boy album.

Pop Quiz logo

Pop Quiz: Answer

Sponsored by StackBlitz ⚡️

What gets logged when you click the inner div?

// Outer div clicked! <div id=​"innerDiv">​Inner Div​</div>
// Inner div clicked! <div id=​"innerDiv">​Inner Div​</div>

Even though stopPropagation() is called in the child’s event handler, the parent’s event handler still executes because it’s set to capture, and it executes before the event reaches the child in the capturing phase.

If the parent’s event handler was set to bubble, then the child’s event handler would execute first, and the parent’s event handler would not execute at all because the event would have been stopped in the child’s event handler.

Lastly, the target property of the event object is always the element that the event was dispatched to, which is the inner div in this case.