Chrome's sneaky new API

Today’s issue: Why React Query is used in ~1/6 of React apps, StackBlitz’s new CORS Proxy, and a new social network for web platform absolutists.

Welcome to #287.

---

Chrome’s sneaky new API

The Chrome team recently announced some updates to the Speculation Rules API – which TIL was not created to help you flip NFTs and Digimon cards for profit, but to help you easily pre-render an HTML page.

You might be thinking, “Isn’t that what <link rel="prerender" href="/next-page"> does?”, but that API was poorly adopted and has since been deprecated. So the Chrome Team created the Speculation Rules API as a second attempt to give developers the ability to tell the browser which URLs they want to pre-render.

If you use Chrome, you’ve already experienced this functionality. When you type a website into the address bar, it will either preconnect to the domain or prerender the page, based on their confidence in you selecting that option from the menu. This is what makes Chrome’s page loading feel “instant” – and now it’s available for the rest of us.

But how do you prevent a page from over-fetching and wasting a bunch of data? It turns out, that’s the exact question this API is designed to answer. Here’s how:

• Insert instructions: By adding a <script type="speculationrules"> tag to your page, you can define JSON instructions for which URLs to pre-render.

• Define conditions: In the latest version of the API, you can use CSS-like selectors to target certain links on the page to have greater control over which links should get pre-rendered.

• Set the eagerness level: immediate will pre-render immediately, moderate will make it based on an interaction (200ms hover), or conservative to pre-render on pointer or touch down.

Bottom Line: When combined with View Transitions, these new APIs can deliver instant navigation with beautiful transitions. But the real question is, will other browser vendors jump on board, or will this be yet another solo expedition for the Chrome team?

---

Stream is how smart developers build chat apps

Building a chat app from scratch is like trying to make Pop-Tarts from scratch — overly complex and completely unnecessary in the year 2024.

That’s why most developers just use Stream. It’s the #1 chat-messaging and activity feed platform in the world, because it gives you reliable infrastructure, feature-rich SDKs, and a flexible API that’s easy to work with.

bUt WilL iT SCaLe? I knew you’d ask that. Well maybe you should ask Match Group – they use Stream to help the 39 million users of their dating apps send each other heartfelt messages like, “You up?” every day night.

Adobe, Imgur, SoundCloud, and a bunch of other companies have built apps with Stream too. Chances are, you’ve probably already used a Stream-powered application without even realizing it 🤯.

Try their free trial – and see how you can build enterprise-ready messaging in days, instead of months.

---

Sometimes you need to remove a key/value from an object. Using the power of JavaScript™ (and ES6’s rest operator), you can accomplish that with something like this.

const user = {
  name: 'Tyler',
  age: 34,
  date: 1715290486155,
  funny: true
}

const { funny, ...updatedUser } = user

console.log(updatedUser) // {name: "Tyler", age: 34, date: 1715290486155}

---

1. We just released a highly interactive article called Why React Query? It’s the first post in our upcoming React Query course, and it dives deep into what problems React Query solves and why it’s now used in ~1/6 of all React apps 🤯.

2. Astro 4.8 comes with experimental support for Astro Actions, which let you easily define and call backend functions with full type-safety from your client code.

3. Lavanya Chockalingam wrote about How to optimize your AI application with New Relic’s AI monitoring platform. She walks through how to use 30+ features in a simple AI chat app to improve performance, code quality, and cost. [sponsored]

4. Figma wrote about How and why they migrated to TypeScript from their own custom programming language. Feel free to forward this to that one person on your team who insists on building everything from scratch.

5. esbuild v0.21 comes with an implementation of the upcoming JavaScript decorators proposal that even Evan Wallace & Co. describe as “very complex.” So buckle up.

6. Artem Zakharchenko wrote about Why patching globals is harmful.

7. OneSchema automates CSV import for your messiest customer spreadsheets. Replace brittle scripts and Excel macros and free up the eng team to accelerate your roadmap. [sponsored]

8. Expo SDK 51 comes with support for React Native 0.74 and bridgeless mode.

9. Nx 19 just launched with a new first-party plugin for the Gradle build tool, Atomizer enhancements, and lots of other new features.

10. Dhravya Shah created Markdowner, an open-source tool for converting any website into LLM-ready markdown data. Not to be confused with DebbieDowner, a new social network I’m building for web platform absolutists to complain about how much they hate JavaScript and React.