Cloudflare Developer Week field notes

Issue #189.May 22, 2023.2 Minute read.
Bytes

Today’s issue: Astro (the framework), Astro (the K-Pop boy band), and slightly more religious imagery than I was originally intending but we’re just gonna roll with it.

Welcome to #189.


Eyeballs logo

The Main Thing

two racoons praising a giant racoon in the sky with a cloudflare logo

The rapture is upon us

Cloudflare Developer Week field notes

For some people, Cloudflare’s annual Developer Week is a spiritual experience.

I’m not one of those people — but I still climbed to the top of Cloudflare Mountain last week to gather with the believers and receive all the new CF releases and announcements.

The whole week is still a blur (and my clothes still smell like ayahuasca), but here are the highlights:

Database Integrations now make it super easy to connect Cloudflare Workers (aka serverless functions) to the DB of your choice with a new “Integrations” tab. It currently supports Neon, PlanetScale, and Supabase, but they’re building out support for others, along with an integrations platform that’ll let anyone add their own DB.

LangChainJS now supports CF Workers. We’ll probably write a full story on LangChain in the future, but just know that it’s a framework that helps you build sophisticated, Large Language Model apps that can switch between multiple LLMs and chain prompts together. And now you can build those apps on CF Workers.

Cloudflare has also released their own AI product, Constellation — which lets you run pre-trained machine learning models and inference tasks on the CF network. This should make it easier to safely build and deploy AI applications for sentiment analysis, text-to-speech, image classification, and more.

Thankfully, Cloudflare’s also made big improvements to the local dev experience with the v3 release of the Wrangler CLI. This is the first version of Wrangler with “local-by-default” development, thanks to integrating CF’s fully-local simulator for Workers directly into Wrangler.

Bottom Line: Cloudflare smartly seems to be focused on selling picks and shovels to AI gold miners (plus the rest of us still building boring web apps). But I can’t help but wonder — how much money is Vercel going to make by putting a pretty wrapper around this stuff?

        

Appwrite logo

Our Friends
(With Benefits)

Baby praying

Praying for the private beta to open up

Appwrite Cloud finally hits public beta

And it looks like a gamechanger for the beloved open-source backend server (31k GitHub stars 😱).

Quick review: Appwrite is great because it abstracts away the worst parts of building a backend with a set of simple REST APIs.

But it always required you to be self-hosted — until now. Developers were fighting like crazy to get their hands on private beta invites to Appwrite Cloud, but it finally just went public. Let’s zoom in:

  • Fully managed backend infrastructure – No more worrying about machine configuration, security, maintenance, etc.

  • Auto scaling – So your app can easily handle traffic spikes without tanking performance.

  • Built-in security – Advanced security features like DDoS protection, WAF rules, and lots more come standard.

Check out the public beta to get early access. No invite required 🙏.


Tip logo

The Tip

Sponsored by Snyk

Gain control over your code with this article on what dependency injection is, when you should use it, and what popular JavaScript frameworks it’s implemented in.

How can we improve the performance of this code?

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <!-- ... this is a really long list -->
</ul>

<script>
let listItems = document.querySelectorAll('li');

listItems.forEach(function(item, i) {
  item.addEventListener('click', () => {
    item.style.backgroundColor = 'lightblue';
  });
});
</script>

Cool Bits logo

Cool Bits

  1. Astro 2.5 comes with a bunch of new features like data collections and references, experimental hybrid rendering, HTML minification, and more. TIL if you search “Astro” on Twitter, you’ll only find fan tweets about a K-Pop boy band. “Blue Flame” does kinda slap tho.

  2. CarbonQA provides high-quality QA services for dev teams, so you’ll never have to do it yourself again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

  3. Addy Osmani wrote about React Server Components, Next.js App Router and Examples. Out of respect for Addy’s original title, I didn’t add an Oxford comma there - even though it nearly killed me.

  4. Shane O’Sullivan wrote about his experience Using the new Bun.js bundler. Sadly, he didn’t address the elephant in the room – how many bundles could a bun bundler bundle if a bun bundler could bundle bundles?

  5. jQuery v3.7 was just released. If that has a meaningful impact on your day-to-day work, I’m very sorry. But also, I respect you.

  6. Jasper de Moor wrote about how the CodeSandbox team improved Sandpack performance by 2x by rewriting the transpiler in Rust. But are they even using the Bun.js Bundler yet? Do you all even care about your users?

  7. Shadcn just released a new Form component for building accessible forms using with react-hook-form and Radix UI. It’s one of very few things that seems to have a unanimous approval rating on Twitter.

  8. Javy (Shopify’s tool for compiling JavaScript to WebAssembly) just joined the Bytecode Alliance. We also applied to join, but they just told us (in a Dana Carvey voice), “You’re not Byte-y enough for the Bytecode Club.”


Tip logo

The Tip

Sponsored by Snyk

Instead of adding an event listener to each list element, we can use “event delegation” to add a single event listener to the parent element (ul) and check if the event target is a list item. This has a few advantages:

Memory Efficiency: Event delegation conserves memory by reducing the number of event listeners, since one parent listener replaces multiple child listeners.

Handling Dynamic Element: Event delegation smoothly manages dynamically added or removed elements, as the parent listener remains consistent, without needing to re-bind.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <!-- ... this is a really long list -->
</ul>

<script>
  let ul = document.querySelector('ul');
  ul.addEventListener('click', (event) => {
    if(event.target.tagName === 'LI') {
      event.target.style.backgroundColor = 'lightblue';
    }
  });
</script>