Hot Spec Summer is back

Today’s issue: The many faces of undefined, the return of the Rust symbols, and the worst best place to write long-form technical content.

Welcome to #303.

---

Hot Spec Summer is back

ECMAScript 2024 was officially approved last month, which means it’s time to welcome some new features to the JavaScript family.

To celebrate, we’re hosting our fourth annual Hot Spec Summer™️ – a friendly celebration where we consume enough sour candy to kill a horse, drink a patriotic cocktail of red-white-and-blue Red Bull, then go on a vision quest in my garage to predict which new JS features will be the most helpful.

We’ll keep score by rating each new ES2024 feature on a hotness scale of 1-5 🔥. Let’s dive in.

Promise.withResolvers() is a new promise method that makes it easier to defer a promise’s resolution. Previously, if you wanted to defer a promise, you’d have to do something like this:

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

But the new spec makes things a little easier:

let { promise, resolve, reject } = Promise.withResolvers();

🔥 Rating: 4.1/5. You can never have too many promise methods, and even though this one is pretty minor, there’s a good chance you might actually use it.

This next feature is a two-for-one. ArrayBuffers can now be resized in place like this:

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
console.log(buffer.byteLength);
// Expected output: 8

buffer.resize(12);

console.log(buffer.byteLength);
// Expected output: 12

And SharedArrayBuffers have a new .grow method:

const buffer = new SharedArrayBuffer(8, { maxByteLength: 16 });

if (buffer.growable) {
  console.log("SAB is growable!");
  buffer.grow(12);
}

🔥 Rating: 2/5. Not life changing, but this should help projects that rely on these objects (like Web Containers) use less memory and improve performance.

And finally, Object.groupBy and Map.groupBy now allow you to add a callback function to transform your data. This is useful for a few different things, including organizing data to display in a table view like so:

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

🔥 Rating: 3.5/5. It’s probably not something you’ll use every day, but it’s always nice to have more options for organizing your data.

Bottom Line: Lee Greenwood was right. I am proud to be a JavaScript dev, where at least I know I’m free.

---

✂️ Cut your QA cycles down to minutes with automated testing

Are slow test cycles bottlenecking your team’s release velocity? With QA Wolf, your org can run entire test suites in minutes, giving you faster feedback and less bugs.

QA Wolf takes testing off your plate. They can get you:

• 80% test coverage in just four months – not years
• Unlimited parallel test runs
• 24-hour maintenance and on-demand test creation
• Zero flakes, guaranteed

No more manual e2e testing. No more slow QA cycles. No more bugs reaching production. Think about all the engineering time you’ll save 🥹.

See how QA Wolf has helped AutoTrader’s team of 80+ engineers reduce QA cycles from days to 15 minutes, saving $600k+/year on QA engineering.

Schedule a demo to learn more.

---

1. Tim Neutkens wrote a full essay in the form of a GitHub comment to answer the question, Why did Vercel create Turbopack when Vite already exists? I do most of my best long-form writing in the form of irrationally angry YouTube comments, but to each their own.

2. Jamie Turner made this cool 8-minute video on How Convex handles cache invalidation to give you the best of both worlds – no more jank and a simple DX that just works. You’ve got to see it to believe it 🥹. [sponsored]

3. Phil Eaton wrote an article about how a write-ahead log is not a universal part of durability.

4. Ilya Gurevich wrote about how their team Enhanced the New York Times web performance with React 18. Now I just need some help boosting my performance on Connections and the rest of the NYT’s daily mini games, so I can finally beat my 9-year-old nephew without cheating.

5. James Kerr wrote about The 3 types of CSS utility classes.

6. Philip Walton wrote an article on the Chrome blog about How to use container queries now.

7. Sentry gathered a panel of backend GOATs for their upcoming Live backend fireside chat. Taylor Otwell (Founder of Laravel), Paul Copplestone (Founder of Supabase), and Søren Schmidt (CEO of Prisma) will discuss and debate topics like the future of databases, what emerging backend frameworks they believe in, and lots more. RSVP here.

8. Edaqa Mortoray wrote about The many faces of undefined in JavaScript, which is the name of the one-person, live-action anime show I’m performing at SXSW next year.

9. Ben Nadel wrote about Exploring randomness in JavaScript

10. Shriram Balaji wrote about Resolving Rust symbols, and I am yet again forced to restrain myself from making a Salad Fingers joke every time we include something about Rust.