The answer is more JavaScript

Welcome to #118.

Today’s winners of the $100 Amazon gift cards are Jon Le**rd and Tawsif A**m. Happy Festival of Bytes, and congrats on your good karma. We’ll email you both.

On Thursday, we’ll be giving away another pair of Airpods Pro. GLHF.

This week, we’ve got Replit vs. Copilot, Next.js vs. middle schoolers, and WebKit vs. my weekly existential crisis.

---

Replit wants to help you GhostWrite the whip

…if by “the whip”, you mean “the boring code that AI could write for you.”

That’s why they just launched GhostWriter — a new AI-powered code completion tool that claims to be “faster, more powerful, and more accessible” than Copilot, or any of the other robots that will one day replace us all.

How we got here: You probably know Replit as the slick, in-browser IDE that your 12-year old niece and nephew have used to become better programmers than you. But over the past couple years, Replit has shipped an impressive amount of new features that are helping it move up-market and start attracting more professional developers.

GhostWriter (along with the rest of Replit’s new “AI Mode”) is hoping to continue that trend by infusing AI and machine learning into every aspect of the IDE.

Let’s dive in:

• GhostWriter is AI Mode’s flagship feature, and it refers to the AI code completion tool we already mentioned. The biggest difference between it and GH Copilot is that it’s trained on a different dataset (Salesforce’s CodeGen), and it claims to be significantly faster, thanks to some unique optimization tactics.

• Semantic search lets you use natural language to search for open-source functions that you can use in your codebase. And since you’re searching from inside the editor, Replit’s search can be a lot more contextual by basing search results on the code you’ve already written 🔥.

• Transform prompts you to refactor code when appropriate, then does it for you.

• Explain lets you highlight a section of code and get a simple explanation of what it does.

• Generate is a text-to-code feature, where you describe what you want a program or file to do in natural language, and then the AI generates the code to make it happen. (CodeGen’s data set specifically targets uses cases like this.)

Bottom Line: Will GhostWriter be able to entice more professional devs to give Replit a try for future projects? We don’t know, but we do know we’d regret not taking this opportunity to inform you that this video exists.

---

PostHog fixed analytics

The Analytics Dilemma has stumped philosophers for decades: “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 never 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 (metaphorical) sausage, not building random tools to see if the customer likes how it tastes.

Check it out. Say goodbye to SQL.

---

---

We usually try to keep these 🍦 JavaScript, but here’s one for you React devs this week.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>Increment</button>
    </>
  )
}

---

1. Rich Harris gave the Svelte Summit keynote speech and announced that SvelteKit 1.0 has entered the release candidate phase. But we’re still waiting for him to release his hair care routine and finally let us in on what products he’s using.

2. FusionAuth wrote this deep dive on everything you need to know about Multi-Factor Auth. It’ll answer all of your burning questions about MFA — such as, “What is it?” and, “Ok, but what is it really?” and of course, “Ok, I know what it is, but I just want to see if you know.” [sponsored]

3. Parcel CSS just re-branded to Lightning CSS, because it can now be used outside of Parcel, and because it’s (you guessed it…) fast. They also could’ve named it Late Night at a Rural Gas Station CSS, because those are the vibes I get from their new landing page (in the best way).

4. We keep hearing the same thing over and over, “you’re so smart, and funny, and directionally attractive (for JavaScript developers) – why don’t Bytes have a Twitter account” - so fine, if you insist.

5. Next released version 12.3, which includes some updates to Image, hot reloading, and an update on the Layouts RFC. It also appears that the new Routes API was inspired by your friend from middle school who would always type 55378008 on their calculator.

6. Luca Casonato and Deno released version 1.1 of Fresh (Deno’s Preact based meta-framework) which comes with automatic JSX, Twind, and Signals support out of the box. No update on their trademark infringement lawsuit with the original Fresh.

7. Karolina Szczur wrote about How To Improve Largest Contentful Paint for Faster Load Times. I’m really hoping this is finally the time where the answer is more JavaScript.

8. It’s not a new iPhone, but Apple announced that WebKit is now on GitHub. So if you ever find yourself lying awake at night, wondering what the heck we’re all really doing here and if life has any real inherent meaning or purpose or if we’re just specks of dust wandering on a tiny space rock and if we are just specks of dust then shouldn’t we just try to maximize our short term pleasure by selfishly indulging every hedonistic urge or should we try to minimize suffering for our fellow dust specks by giving ourselves over to some greater purpose and also does my first girlfriend from junior high who moved away ever look up pictures of me online and wonder what we could have been? If that happens to you, now you can always go check out the source code for the second most popular browser engine on GitHub.

---

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>Increment</button>
    </>
  )
}

This one comes straight from the new (Beta) React Docs. You might expect that clicking the button would increment our number state by 3, but that’s not how it works. In short, JavaScript creates a closure around the number variables so it’s as if we’re doing

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

which of course will always set number to 1.

Instead, if we want to update the same state multiple times before the next render, we can pass a function to our setter function like so -

setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

Now React will add all these functions to a queue, and during the next render, React goes through the queue passing the result from the previous item in the queue to the next, eventually leading to a number of 3.

0 + 1 = 1
1 + 1 = 2
2 + 1 = 3