what exactly are the differences between JSC and V8?

This week, we’ve got robots, engines, and minions.

Welcome to #109.

---

When you finally give GitHub Copilot your credit card

Love, Death & (Coding) Robots

Last year, GitHub introduced us all to Codepilot, aka T9Word for developers.

It’s trained on OpenAI’s Codex, which is made up of billions of lines of open-source code, so it can suggest code and entire functions in real time inside your editor as you write code.

Over 1.2 million developers used it during its 1-year “technical preview” stage, which just ended last month when GH made it generally available. Oh, and it also costs $10 a month now (surprise!) — but more on that later.

Copilot is definitely a polarizing tool, so let’s do the responsible thing your mom always told you to do, and write out a list of the pro and cons.

Copilot Pros:

• It makes writing code easier and faster. (Copilot writes almost 40% of the code in the files where it’s enabled.)

Copilot Cons:

• The open-source code it was trained on was written by *human* developers who never specifically consented to their code being used for this purpose.

• Copilot sometimes recommends larger code snippets that are copy-pasta’d directly from the training set.

• It can potentially recommend code with bugs and insecure/out of date coding patterns.

• It costs money now, and $10 is my exact monthly budget for Flamin’ Hot Mtn Dews.

Ok, that’s a lot of cons, but in the interest of adding a little nuance (gasp), here are some counterpoints to consider for each con:

• Copilot isn’t committing copyright infringement. Training ML systems on public data falls under fair use (at least for now), with the output belonging to the operator, similar to a compiler — as Nat Friedman argued last year.

• It only recommends snippets from the training set that are longer than 150 characters 1% of the time. And you can turn on a filter to make it so those results don’t ever get shown to you, if you want.

• You write code with bugs and insecure/out of date coding patterns literally every day.

• It costs a lot of money to run the racks on racks of GPU’s that are required to power a high-quality AI at scale. Giving away Copilot for free forever probably isn’t sustainable, even for Microsoft.

Bottom Line: Love it or hate it, the robots aren’t going away anytime soon. Jeffrey B’s old squad just launched a preview of Amazon CodeWhisperer last month, and other tools like Tabnine and Kite continue to pick up momentum.

Let’s just hope that the code the AI’s write isn’t as cursed as the images that Dall-E creates.

---

When you get analytics working after 12 weeks of SQL hell [sponsored]

PostHog cracked the code

For centuries, product managers and philosophers have tried to solve The Analytics Dilemma: “The more engineering time you spend building product analytics, the less time you can spend on *actually building* your product.”

But PostHog has finally cut the Gordian Knot and set us all free.

They built an open source (8,000 GH stars with 280+ contributors) and fully-featured product analytics platform that you can self-host.

The best parts:

1. You don’t have to write SQL 🤮

2. You can build anything — heatmaps, user paths, session recordings, funnel analysis, feature flags, split tests in production, and lots more

3. You get real-time analytics with their event pipelines and simple API

Hasura, SpaceX, and 10,000 other companies have built their entire data stack on PostHog.

That’s because they’re smart enough to realize that engineers should spend their time making the actual sausage, not building random tools to try and figure out if the customer likes how it tastes.

Check it out. Say goodbye to SQL.

---

You’re a long way from home

Fast and the Furious: Engine Wars

We wrote about Bun last week when it was hot out the oven, but it’s still the only thing people are talking about — so we wanted to take a peak underneath the hood to see what makes it so insanely fast.

Yes, this is a lot like going to Jack in the Box and asking, “what exactly do you put in your tacos that makes them so delicious,” but we’re doing it anyway.

The Need for Speed: One of the biggest differences between Bun and competitors like Node and Deno is that it uses JavaScriptCore instead of V8 as the engine for its runtime. These two JS engines have been competing for a while now, but it’s worth noting that React Native chose JSC over V8 seven years ago because it was faster (before they built Hermes).

So what exactly are the differences between JSC and V8?

When we’re talking about speed, we’re actually talking about types of speed (since there are lots of tradeoffs for JS engines to consider). Lets look at some 🌮 meat:

• JSC prioritizes faster start times, while V8 prioritizes fast execution (that’s a semi-hand-wavey generalization 👋)
• JSC has 3 optimizing compilers (more complex, but faster), while V8 has 2 optimizing compilers (less complex and easier to use, but not as fast)
• JSC’s architecture uses less memory (great for battery life on the devices Apple is selling you), but it executes the code a little bit slower
• V8 does more runtime optimization, but that takes more memory — which is why your laptop is on fire when you have more than 3 Chrome tabs open
• Here are a few more tradeoffs from Jarred Sumner, CBO (Chief Bun-Boi Officer)

Bottom Line: Vin Diesel needed Dwayne “The Rock” Johnson to activate his nostril flare game, just like V8 needed JSC to give it a run for its money (with lil’ Bun riding that wave). The winner: JavaScript developers — salute mi familia.

---

Spot the Bug — Sponsored by Raygun

Raygun is the best tool for catching and resolving bugs before they crash prod. We use it at ui.dev and it’s been super helpful.

import { useRef, useEffect } from 'react'
import {Modal, ModalHeader, ModalBody, ModalFooter} from '../components/Modal'

export default function InputModal({isOpen, close}) {
  const inputRef = useRef(null)

  useEffect(() => {
    if (isOpen) {
      inputRef.focus()
    }
  },[isOpen])

  return (
    <Modal isOpen={isOpen}>
      <ModalHeader>
        <h3>What is your name?</h3>
      </ModalHeader>
      <ModalBody>
        <input name="name" ref={inputRef} />
      </ModalBody>
      <ModalFooter>
        <Button onClick={() => close()}>Close</Button>
      </ModalFooter>
    </Modal>
  )
}

---

Cool Bits

1. Vite 3 was just released with new docs, new create-vite starter templates for most major frameworks, new CLI improvements, and lots more as it continues to take over the web dev ecosystem. Vini, Vidi, Vite-chi.

2. CarbonQA provides QA services geared for dev teams. They’ll boost your team’s morale sky-high by… breaking your code repeatedly. But the good news is that you’ll never have to waste time on testing again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

3. Klint Finley wrote about how Functional programming is finally going mainstream for the GitHub ReadMe project. No word yet on how much of the article was written by Copilot.

4. The creator of Scrum said we should all stop breaking up stories into estimated tasks. Looks like your manager is going to have to get another job.

5. Node-RED 3.0 was just released, making it easier than ever to program IoT devices with their no-code UI. One day, we’ll use it to build a smart grill that’s so smart that it’ll automatically turn on whenever you start singing this banger about grillin’ on the roof.

6. Scroll is a small function for creating scroll-linked animations. Now, every website can feel like the website for one of those boujee, Brooklyn-based “creative agencies” where no one understands what they actually do (including the people who work there).

7. Jake Archibald and Cassie Evans chatted about Demystifying SVG Paths in this 17-minute video. Now if only someone could demystify this TikTok trend for me where teenagers dress up in full suits to go see the new Minions movie.

8. Release is a minimalistic, opinionated, and predictable release automation tool that’s like Prettier for automated releases. Sweet Release is the name of a package I created to get myself out of a toxic job by deleting my team’s entire codebase and sending an automated Slack message to my manager letting him know that it was me who did it, so that I would be instantly fired (with severance). Sweet, sweet release.

---

Spot the Bug Solution — Sponsored by Raygun

React treats the ref as a “box” that can hold a mutable value in it’s .current property, including DOM elements. Since React needs a way to update the ref’s value without completely overriding it, the ref itself is an object with a mutable .current property that can be changed any time without changing the object reference.

The bug happens when we try to .focus() the inputRef. The input DOM element is stored in the .current property, so the correct way to focus the input is to call inputRef.current.focus().

Here’s the solution -

export default function InputModal({isOpen, close}) {
  const inputRef = useRef(null)

  useEffect(() => {
    if (isOpen) {
      inputRef.current.focus()
    }
  },[isOpen])

  // ...

}

Refs can store more than just DOM elements - they can store any value a component needs to hold on to without causing a re-render whenever the value changes.