Chrome is coming for React devs

Today’s issue: A new systems language from the Wasm creator, a Flutter crossover that no one asked for, and a new CSS library that tastes like grass juice.

Welcome to #304.

---

Chrome is coming for React devs

I might be a little paranoid from binge-watching every episode of The Jinx Part 2 last weekend, but I think the Chrome team is actively trying to eliminate React developers. Hear me out.

They recently released a new feature called the CSS anchor positioning API, which lets you use CSS to define “anchors” that avoid the limitations of absolute or fixed positioning. Sounds pretty harmless, so what’s the big deal?

Well previously, if you wanted to implement something like a tooltip, you’d probably end up writing thousands of lines of beefy React code to support all the different positioning use cases. But with anchor positioning, you can now do this by just adding a few lines of CSS – without needing to worry about the specific parent/child HTML structures at all.

Here’s how it works. First, you define an anchor element:

.tooltip-trigger {
  anchor-name: --tooltip;
}

Then, you attach your element to the anchor and position it using the new anchor function:

.tooltip-popover {
  position-anchor: --tooltip;
  /* absolutely position the positioned element */
  position: absolute;
  /* position the right of the positioned element at the right edge of the anchor */
  right: anchor(right);
  /* position the bottom of the positioned element at the top edge of the anchor */
  bottom: anchor(top);
}

You can change the position dynamically when the window is scrolled or resized by adding properties like top or flip-block, and you’re able to hide the element once its anchor is no longer in view by using position-visibility like this:

.tooltip-popover {
  position-visibility: anchors-visible;
}

And if you want to get really crazy, you can create multiple anchors for things like drag handles, and dynamically size the content based on where the anchors are located. Here’s a quick example if you want to see it in action.

Bottom Line: I still think some of these new platform APIs could be part of a big conspiracy by the Chrome team to turn us all into CSS developers. But if it lets me build a tooltip with 20 lines of code, you can sign me up.

---

Ship faster with Postgres on Neon

If you’re picking a database for your next project, you can’t go wrong with Postgres – aka the world’s most popular open-source database.

But you also don’t want to waste weeks on complex configs, maintenance, or scaling issues. That’s where Neon can help.

They offer fully managed Postgres with features to help you ship faster:

• Your DB automatically adapts to your app’s workload, eliminating the need for over-provisioning or manual resource allocation.

• Instantly create ready-to-use Development/Preview/Test databases (with both schema and data) that shut down when unused.

• You can restore your database in seconds to any point in the past 30 days, 24 hours, or even 1 minute ago.

Get started with their generous free tier, and provision your Postgres database in under a second – seriously, it’s that fast.

---

class UserProfile {
  constructor(name) {
    this.name = name;
    this.friends = [];
  }

  addFriend(friend) {
    this.friends.push(friend);
  }

  render() {
    return {
      name: this.name,
      friendCount: this.friends.length,
      listFriends() {
        return this.friends.map(friend => friend.name).join(', ');
      }
    };
  }
}

const user = new UserProfile('Tyler');
user.addFriend({ name: 'Lynn' });
user.addFriend({ name: 'Ben' });

const profileData = user.render();
console.log(`${profileData.name} has ${profileData.friendCount} friends.`);
console.log(`Friends: ${profileData.listFriends()}`);

---

1. shadcn just launched Charts – a collection of beautiful, copy-pasteable chart components that are built on top of Recharts. If you thought all SAAS apps already looked the same, buckle up.

2. Eric Allam wrote a deep dive about how he and his team tamed Node.js event loop lag.

3. React Rally is one of the most beloved React confs ever, and they’re offering a 25% discount to all Bytes subscribers through this link. Come to Park City, Utah on Aug 12-14th and learn from Chris Sev, Kent C. Dodds, Shruti Kapoor, and many more. [sponsored]

4. es-toolkit is a new JavaScript utility library that bills itself as a faster, more modernized version of lodash, which is a faster, more modernized version of underscore.

5. matcha.css is a pure CSS library designed to style HTML elements similar to a default browser stylesheet. But as much as I want to like matcha, it always ends up tasting like grass juice to me.

6. React, Visualized is our gentle introduction to React, but visualized.

7. Sentry’s JavaScript error and performance monitoring tools give you max power with minimum effort (my favorite). You get React 19 support, auto-config for dozens of libraries, and a one-line setup that makes it super easy to get started (for free). [sponsored]

8. Flitter is a JavaScript data visualization library that uses Flutter-like syntax – aka the crossover that no one asked for. But it does look a lot more promising than this crossover flop that David Guetta, Madonna, and Lil Wayne made back in 2009.

9. @matry/dom is a new, early-stage UI library for “imperative JSX.” Instead of following React’s declarative model that treats JSX as the source of truth for your UI, it essentially becomes a query interface for DOM manipulation.

10. Virgil is a brand new, lightweight systems programming language created by Ben Titzer (the co-creator of WebAssembly). Really thoughtful of him to name this new project after my great uncle who used to scare us all at family reunions by pulling out his glass eye.

---

The bug is in the listFriends method inside the render method.

render() {
  return {
    name: this.name,
    friendCount: this.friends.length,
    listFriends() {
      return this.friends.map(friend => friend.name).join(', ');
    }
  };
}

When listFriends is called, this no longer refers to the UserProfile instance, but instead to the object returned by render. This object doesn’t have a friends property, so this.friends is undefined. To fix this, you could use an arrow function to preserve the correct this context:

render() {
  return {
    name: this.name,
    friendCount: this.friends.length,
    listFriends: () => {
      return this.friends.map(friend => friend.name).join(', ');
    }
  };
}

or if you’re a sicko, you could use .bind.

render() {
  return {
    name: this.name,
    friendCount: this.friends.length,
    listFriends: function() {
      return this.friends.map(friend => friend.name).join(', ');
    }.bind(this)
  };
}

If you want a more detailed explanation, check out Understanding the “this” keyword, call, apply, and bind in JavaScript.