Google I/O speed run

Today’s issue: Wasm’s electric slide, fun weekend plans with my DNS, and the TypeScript team learning from Power Rangers.

Welcome to #187.

---

Google I/O speed run

We got lots of big announcements from last week’s Google I/O, or as I like to call it, Coachella for nerds.

Most of the action on the main stage was focused on communicating one thing: “Our AI is actually amazing, so please stop selling our stock now.” But since I’ve always been an indie kid, I was more interested in the stuff happening on the side stages.

In this case, that included a bunch of web dev announcements that fall into three main categories: Firebase updates, web platform updates, and Dart 3 updates. That’s a lot to cover, so here’s a quick rundown to help you feel in the loop.

Firebase updates:

• New AI extensions let you use Google’s PaLM API to add smart features to your app (think ChatGPT type experiences).

• Real-time updates for Remote Config makes it easier to roll out and roll back new features.

• Support for OR queries in Firestore let you combine multiple conditions in multiple fields.

• Some Python and Android stuff that you probably don’t care about.

Platform updates:

• Tons of powerful new CSS features, including Sass-like CSS nesting (with nesting for media queries and container queries too), Cascade Layers, and Scoped CSS.

• Responsive design features like container queries and style queries, the :has() selector to make components more dynamic, and a new popover API.

Dart 3:

• This release is the culmination of a years-long overhaul to make Dart into a “fast, portable, and modern language” with 100% null safety and a solid type system.

• Other major new features include records, patterns, class modifiers, and a developer preview for compilation to Wasm.

• This was definitely Dart’s biggest release yet, so we’ll probably cover this more in the future.

Bottom Line: Sadly, Blink 182 didn’t headline this year’s I/O because they were too busy playing at the actual Coachella. But Sundar and co. still brought the heat.

---

PostHog Session Replays is the best way to learn from users

Hot take: talking to your users is overrated.

I promise you’ll learn 10x more by watching them actually use your product than by doing an awkward Zoom interview that feels like a bad first date.

Thankfully, PostHog’s open-source Session Replays tool makes it easy to watch your users in action and make improvements based on what you see. Here’s how it works:

• Step 1: Drop a quick JavaScript snippet into your codebase to start recording all web and mobile sessions.

• Step 2: Filter your user recordings by page, event type or specific metadata (screen dimensions, device type, location, etc.)

• Step 3: Use PostHog’s built-in console logs to debug issues on the spot.

Over 23,000 companies use PostHog to catch UI bugs, improve support, and get powerful product insights. And the stupidly generous free tier (15k free sessions/month!) makes it a no-brainer.

Check it out — if only because they have one of the cutest landing pages I’ve ever seen 🦔.

---

function addTriple(inputs: number[]): number {
  return inputs[0] + inputs[1] + inputs[2];
}

---

1. The TypeScript team released a new VS Code extension named Deopt Explorer, which can analyze trace logs produced by V8 in order to (in their words) help prevent the “slow creep of megamorphism.” I’m pretty sure the Power Rangers were designed to do the same thing.

2. Deno wrote another installment in their popular series, Roll your own JavaScript runtime, pt. 3. Is this what it felt like when the podcast Serial first came out?

3. Swimm’s free IDE plugins are the best way to create and edit your team’s internal documentation directly from your IDE, with no context switching. Check it out. [sponsored]

4. Julia Evans released a free guide to implementing your own DNS resolver in a weekend. Just in case you have a very different definition than me of what a fun weekend looks like. (Jk, this looks great.)

5. Our friends at Retool just announced a new pricing update with a more generous free tier and lower pricing across all their brands. Like almost every other tech company at this point, we are long-time Retool customers, so this could be a good time to check them out if you haven’t already.

6. Sam Ruby wrote about how The JavaScript Ecosystem Is Delightfully Weird. I’ve been described the same way, just without the word “delightfully.”

7. The HuggingChat team just open-sourced Chat UI, the chat interface powering their app with SvelteKit and various OSS models like OpenAssistant.

8. Dominic Elm wrote an in-depth article on the StackBlitz blog called The Atomic Waltz: Unraveling WebAssembly Issues in V8 and SpiderMonkey. I’m more of an Electric Slide guy, but this sounds cool too.

---

function addTriple(inputs: number[]): number {
  return inputs[0] + inputs[1] + inputs[2];
}

TypeScript will warn us if we pass anything but an array of numbers to that function, but if the array has less than 3 items in it, the third item will be undefined and our function will return NaN. TypeScript can’t know how many items are in the array, so it can’t warn us.

There are many solutions to this. One would have us change our type signature to be a tuple type instead of an array. TypeScript can then warn us if our array doesn’t have enough options.

function addTriple(inputs: [number, number, number]): number {
  return inputs[0] + inputs[1] + inputs[2];
}

Another option is to enable the noUncheckedIndexedAccess TypeScript compiler option, which will force us to check that each item isn’t undefined.

function addTriple(inputs: number[]): number {
  if (
    inputs[0] === undefined ||
    inputs[1] === undefined ||
    inputs[2] === undefined
  ) {
    throw new Error("Invalid input");
  }

  return inputs[0] + inputs[1] + inputs[2];
}