Cloudflare's big week

Issue #278.April 8, 2024.2 Minute read.
Bytes

Today’s issue: Dipping our toes in the V8 Sandbox, what even is a JSON number, and why it’s never too early to start planning for the next eclipse.

Welcome to #278.


Eyeballs logo

The Main Thing

Ren from Ren & Stimpy reading on the toilet

Me trying to follow everything Cloudflare launched last week

Cloudflare’s big week

Some companies spend months hyping up a Huge Launch Week™️ – only to drop a minor release, a couple blog posts, and a paid tier that no one cares about 🥱.

And then there’s Cloudflare, who just shipped twenty different product launches and announcements during last week’s Cloudflare Developer Week.

That’s a lot keep track of, so here’s a quick breakdown of the three most newsworthy things for JavaScript developers:

1. D1 is ready for prime time. Cloudflare’s serverless relational SQL database is now generally available, and it got a few big upgrades, which help it integrate more seamlessly with full-stack JS frameworks like Next.js and Astro. They also launched a Prisma adapter, so you can enjoy that sweet Prisma DX while running on top of Cloudflare.

2. JavaScript-native RPC added to Cloudflare Workers. The Remote Procedure Call system now enables Worker-to-Worker and Worker-to-Durable Object communication with very minimal boilerplate.

You simply define a class and call it, without needing any schemas or routers, and it just works. This expressive approach lets you seamlessly pass structured clonable types, functions in the params, objects with methods, and more.

3. Party time with PartyKit. Cloudflare acquired PartyKit, the open-source platform for deploying real-time, multiplayer, and local-first applications. This feels like a good fit for PartyKit because its runtime is already built on top of Cloudflare’s workerd runtime, it utilizes CF Durable Objects for stateful serverless functions, and it was founded by former Cloudflare employee and Bytes merch model, Sunil Pai. (Congrats Sunil!)

Why did Cloudflare make this move? That’s the million(s) dollar question, but it seems like Cloudflare was already interested in leveraging its serverless platform to solve the same problems that PartyKit was focused on – i.e, making it easier for developers to build collaborative apps. Acquiring PartyKit should allow them to reach those goals faster.

Bottom Line: In an age where a Big Mac meal costs $18, it’s nice to know we can still count on Cloudflare to give us a metric ton of cloud compute, hosting, and other services for a few pennies.

        

Coherence logo

Our Friends
(With Benefits)

Nicholas Cage being locked in a cage with bees in The Wicker Man

When that vendor lock-in hits

Coherence gives you world-class DX for your cloud infrastructure

That’s because their Platform-as-a-Service lets you easily deploy and scale your cloud infra inside your own AWS/GCP.

This gives you a similar experience to Vercel or Heroku, but with way more flexiblityand no vendor lock-in.

How does it do this? With a minimal yaml file, Coherence is able to spin up full-stack environments with automated build pipelines that use cloud-native services to give you all types of good stuff:

  • Automated branch preview environments for each PR (see docs)

  • A simple UI for deploying to production

  • Managed build pipelines that offer configurable stages like database seeding, migrations, end-to-end tests, and parallelized unit tests

Try it out for free – and start shipping on world-class infrastructure without the cost or hassle.


Spot the Bug logo

Spot the Bug

Sponsored by Sonar

They created this popular whitepaper on Lesser Spotted React Mistakes and How to Avoid Them, so you can catch small-but-common React errors *before* you ship them to prod.

const user = {
  name: 'Tyler',
  age: 32,
  greet() {
    alert(`Hello, my name is ${this.name}`)
  },
  mother: {
    name: 'Jan',
    greet() {
      alert(`Hello, my name is ${this.mother.name}`)
    }
  }
}

user.mother.greet()

Cool Bits logo

Cool Bits

  1. Sam Thorogood built Kuto, “a reverse JavaScript bundler” that lets you reuse code a client already has for shipping updates. If you think about it, we’re all reverse JavaScript bundlers in our own way.

  2. Brian Terlson wrote this deep dive to answer the question that everyone no one is asking, What even is a JSON number?

  3. CarbonQA provides high-quality QA services for dev teams with a team of US-based testers, so you never have to waste engineering hours on QA testing ever again 🙏. [sponsored]

  4. TkDodo wrote a new guide to Render Optimizations in React Query for the TanStack Docs.

  5. The V8 Sandbox is officially open for business, and I’m not talking about a new barefoot juice bar in Miami Beach.

  6. Ildar Sharafeev wrote about Building state machines in React.

  7. faces.js is a new JavaScript library for generating vector-based cartoon faces. And we’re officially one step closer to the Backyard Baseball renaissance I’ve been praying for.

  8. Want to upgrade your security skills? Join Snyk’s free CTF 101 Workshop with live support and a hands-on lab, where you’ll learn how to begin your capture the flag journey. [sponsored]

  9. Jatin Ramanathan and Minko Gechev wrote about the plan to Gradually merge Angular and Wiz over the next few years. Long live Wangular.

  10. Nick Williams just open-sourced Cally, a set of small, feature-rich calendar components. You can use it to build the perfect countdown app for the next solar eclipse on August 22, 2044. See you then 🫡.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Sonar

Yes I plan on single handedly keeping this keyword knowledge alive!

const user = {
  name: 'Tyler',
  age: 32,
  greet() {
    alert(`Hello, my name is ${this.name}`)
  },
  mother: {
    name: 'Jan',
    greet() {
      alert(`Hello, my name is ${this.mother.name}`)
    }
  }
}

user.mother.greet()

When we invoke user.mother.greet, we can tell what the this keyword is referencing by looking to the “left of the dot” of the invocation – in this case, mother.

So inside of greet, it’s as if we had my name is ${mother.mother.name}, which is clearly wrong. Instead, since the this keyword is referencing mother, we can just do this.name.

const user = {
  name: 'Tyler',
  age: 32,
  greet() {
    alert(`Hello, my name is ${this.name}`)
  },
  mother: {
    name: 'Jan',
    greet() {
      alert(`Hello, my name is ${this.name}`)
    }
  }
}

user.mother.greet()