Google I/O Web Goodies

Today’s issue: Making peace with the Laravel crowd, more details on Remix’s naptime, and a blog post that you can probably still read in the state of Florida.

Welcome to #290.

---

Google I/O web goodies

Last week’s Google I/O felt like a fever dream of AI releases, Android updates, and… people on Twitter getting unreasonably upset about a Marc Rebillet DJ set?

But don’t worry, that’s why you pay us the big bucks.

So just sit back, and let us cut through all the monotone speeches from Sundar noise to catch you up on the 5 most interesting web dev announcements from Google I/O.

LLM integration coming to Chrome 126: The Chrome team is working on web platform APIs and other browser features for integrating LLMs directly into the browser. They’re prioritizing their Gemini Nano model, which can run locally and helps you deliver AI features to your users “without worrying about fine tuning, capacity, or cost” (at least for Chrome users).

CSS Anchor Positioning just landed in Chrome 125: This lets you use CSS properties to tether an element that’s absolutely positioned to one or more other elements on the page in a declarative way, without JavaScript. One use case would be to position a tooltip next to the element (or anchor) that invoked it.

3D maps added to the Maps JavaScript API: I’ve often considered myself to be the Magellan of JavaScript, so I was very pleased to see them add the long-requested Photorealistic 3D Maps to the Maps API.

Firebase has SQL now: It’s part of their new Data Connect platform that lets you easily define your data model, queries, and mutations. It then uses that info to generate a Postgres DB in Cloud SQL, strongly-typed SDKs, and an API server that runs on Google’s secure infrastructure. Your move, Supabase.

New Web Platform Dashboard: This maps the entire web platform as a set of features, so you can follow their development, check their interop status, and write a letter to your local congressperson to ask why Firefox is taking so long to support your favorite feature.

Bottom Line: Wait, you are paying us for this, right?

---

Save your team six figures by outsourcing testing to QA Wolf

They helped Regal.io save over $500k in engineering and infrastructure costs (see breakdown), and they can probably do the same for you.

Here’s how:

• They get you 80% E2E test coverage for the cost of a single QA engineer

• They provide all the infra to run thousands of tests in 100% parallel, so you get pass/fail results in 3 minutes

• They reproduce every bug and send a video walk-through to your issue tracker with Playwright trace logs

This saves your team hundreds of hours of engineering time, tons of customer support time, and dramatically speeds up your release velocity. Win-win-win.

Check out their 90-day pilot program – and see why Regal’s CTO said, “What takes QA Wolf 10 minutes, definitely would’ve taken us 2 hours.”

---

What gets logged?

let sharedVariable = "initial";

setTimeout(() => {
  sharedVariable = "updated by first timeout";
}, 500);

setTimeout(() => {
  if (sharedVariable === "initial") {
    console.log("Shared variable not yet updated");
  } else {
    console.log("Shared variable was already updated");
  }
}, 500);

---

1. If you want to dive even deeper on Chrome updates, Una Kravets (🐐) gave a great I/O talk about All the web UI stuff that’s landed in the browser in the last year, and what’s on the Chrome team’s roadmap. And she doesn’t even yawn once.

2. Next.js now has an experimental configuration to enable the React Compiler.

3. In totally unrelated news, Andrew Israel wrote an article called, It’s not just you, Next.js is getting harder to use. I love it when it’s not just me.

4. New Relic just released the 2024 State of the Java Ecosystem, which covers everything you’ve ever wanted to know (and not wanted to know) about Java-Land. [sponsored]

5. Ryan Florence gave more detail on what React Router v7 (fka Remix v2) will look like. Sleep well, Remix 🫗.

6. The Laravel people are fighting with the JS framework people on Twitter (again), so Josh Larson wrote a good article called On Laravel, full-stack JavaScript, and productive frameworks. Hopefully this will lead to a lasting truce and renewed fellowship between the tribes.

7. PostHog created the Product for Engineers newsletter to help engineers like you and me improve their product skills. It includes interesting deep dives on startups, lessons and mistakes from building PostHog, advice for crafting great products, and unreasonably cute hedgehogs. [sponsored]

8. Salma Alam-Naylor wrote about Why we don’t talk about minifying CSS anymore. We also don’t talk about UFOs anymore either, but I guess that’s just a coincidence too?

9. Lightning CSS v1.25 adds more granular options for CSS modules, optimizes the all shorthand, and implements some other CSS properties.

10. Jonathan Beebe wrote about his personal experience living through the evolution of JavaScript in his article, At some point, JavaScript got good. It’s kind of like Charles Darwin’s On the Origin of Species, except you’re still allowed to read it in the state of Florida (I think).

---

What gets logged?

let sharedVariable = "initial";

setTimeout(() => {
  sharedVariable = "updated by first timeout";
}, 500);

setTimeout(() => {
  if (sharedVariable === "initial") {
    console.log("Shared variable not yet updated");
  } else {
    console.log("Shared variable was already updated");
  }
}, 500);

In JavaScript, the execution order for setTimeout callbacks with identical delays aren’t deterministic. This means we aren’t guaranteed that the first timeout callback will execute first (which can be the cause of some nasty and difficult to reproduce bugs). In reality it’s almost always what you’d expect (“Shared variable was already updated”), but it’s best not to rely on that behavior.

Here’s a famous talk by Philip Roberts to learn more about the event loop and how JavaScript handles asynchronous code.