JavaScript, let's party

Issue #181.April 24, 2023.2 Minute read.
Bytes

Today’s issue: AI code buddy battle royale, blindfolded Whac-a-Mole, and the Rust Foundation strikes back.

Welcome to #181.


Eyeballs logo

The Main Thing

Paris Hilton DJing

vibes when I build collaborative applications

Let’s party

Last week, we had the developer equivalent of a gender reveal party when Sunil Pai got on stage at React Miami and announced that his project, PartyKit, was going open source.

Thankfully, there were no blue/pink pyrotechnics, but this was still a pretty exciting announcement for a couple reasons:

  1. PartyKit looks really cool. It’s an SDK for building real-time, collaborative apps (more on that later).

  2. Sunil has built great stuff in the past. He created Glamor, a popular CSS-in-JS lib; built CloudFlare’s Wrangler CLI from scratch, and worked as a member of the React Core Team.

Why PartyKit? Web Sockets first landed in Chrome back in 2009, but relatively few real-time, multiplayer apps have been built since then. According to Sunil, that’s because 1) it’s operationally difficult and very expensive to run these apps, and 2) it’s technically difficult for developers to build these apps because of distributed systems problems.

Thanks to edge computing, Cloudflare and other companies have been able to solve the first problem — making it way cheaper and easier to run these apps. But it’s still tricky to build them… until now.

PartyKit wants to be the Next.js/Vercel of real-time, multiplayer apps on the edge. That means they want to give you a batteries-included platform for spinning up real-time apps. Let’s zoom in:

  • You bring the fun parts (your code, JS or WASM), PartyKit brings the boring parts (infra, deployed on the edge).

  • You get helpful platform goodies like environment variables, preview URLs, admin APIs, and more. PartyKit openly admits to stealing lots of good ideas from Vercel, Cloudflare pages, and Heroku — and I, for one, am here for it.

  • You get first-class integrations with popular collaboration frameworks like Y.js, automerge, and replicache.

Bottom Line: PartyKit wants you to be here for a good time, and a long time.

        

progress kendo ui logo

Our Friends
(With Benefits)

A bunch of tangled chords and headphones

When you stitch 15 UI libraries together for your app.

Is it worth paying for KendoUI’s JS libraries?

We all know that building certain UI components from scratch is a huge PITA.

Open-source libraries can help, but they never work quite like you want them to — and they can really jack up your app’s security and performance.

That’s why thousands of developers use KendoUI: a bundle of premium JavaScript UI libraries with hundreds of enterprise-quality components.

Each library is fast, accessible, easy to customize, and written from the ground up for the most popular JS frameworks — like React, Angular, and Vue. So you get all the benefits of native components, without having to build them yourself.

But isn’t it lame to pay for JavaScript components that I could just build myself? Hey, I could probably make a Mexican Pizza myself, but I’d much rather pay Taco Bell to do it for me. It’s faster, and way less messy.

👉 Check out Kendo UI’s free trial to see for yourself.


The Job Board Logo

The Job Board

Senior or Staff Front-end Engineer
100% Remote
React

Close.com is looking for an experienced React developer to help design and implement major user-facing features. Close is a 100% globally distributed team of 70 happy people, dedicated to building a product our customers love.

Have a job you want to fill?
Spot the Bug logo

Spot the Bug

Sponsored by Snyk

Check out Snyk’s step-by-step guide to building a secure API gateway from scratch using only Node.js and a couple of open-source packages.

function calculateAverage(arr) {
  let sum = 0;
  let count = 0;

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] && typeof arr[i] === "number") {
      sum += arr[i];
      count++;
    }
  }

  return sum / count;
}

Cool Bits logo

Cool Bits

  1. Adam Argyle just launched gradient.style — a modern CSS gradient and color picking tool for next-gen gradients. Back in the good ol’ zero-interest-rate days, just opening this website would guarantee you 3 emails from Stripe recruiters 🥲.

  2. Are you tired of doing QA testing yourself? Check out CarbonQA’s high-quality QA services for dev teams, so you’ll never have to do it yourself again. [sponsored]

  3. Aiden just released Million.js for Next.js. It’s like that weight loss pill at 7-11, but without the constipation and jitters.

  4. The Slack Team wrote about How they trace notifications in Slack - which I imagine probably feels like playing Whac-a-Mole blindfolded.

  5. Wes Bos made a 13-minute video comparing Amazon Code Whisperer vs Github Copilot. But he failed to answer my one big question: Which AI will be nicer to me when I am nothing more than their human proxy in the end times?

  6. TypeScript Decorators: A complete guide will make you know more about decorators than 90% of your coworkers.

  7. The new Chrome 113 DevTools just launched. One highlight: a new and exciting way to locally experiment with HTTP response headers. (H/T Addy Osmani 🐐)

  8. Josh Mo wrote an article called, Can Rust Beat Javascript in 2023? Sadly, he’ll never see this because he’s already been taken in for questioning by the Rust Foundation’s secret agents. Godspeed, brother.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Snyk

function calculateAverage(arr) {
  let sum = 0;
  let count = 0;

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] && typeof arr[i] === "number") {
      sum += arr[i];
      count++;
    }
  }

  return sum / count;
}

If we pass calculateAverage an array that contains a 0, because we’re filtering out falsy values (of which 0 is one), our calculation will be wrong.

To fix our function, we can get rid of our truthy check (arr[i]) and just verify the element is a number.

function calculateAverage(arr) {
  let sum = 0;
  let count = 0;

  for (let i = 0; i < arr.length; i++) {
    if (typeof arr[i] === "number") {
      sum += arr[i];
      count++;
    }
  }

  return sum / count;
}