![]() 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. ![]() The Main Thing![]() Time to get hyphy 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:
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. ![]() Our Friends |
![]() | Senior or Staff Front-end Engineer | ||
| |||
Close.com is looking for 3 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of ~55 high-performing, happy people that are dedicated to building a product our customers love. |
Their secure, open-source backend as a service gives you all the core CPIs you need to buid any web or mobile app. Time to become a start calling yourself a full-stack engineer.
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>
</>
)
}
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.
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]
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).
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.
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.
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.
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.
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