WTF is e18e?

Today’s issue: The battle of phantom leaks, CSS spring easing, and a more insane filesystem than usual.

Welcome to #312.

---

wtf is e18e?

There’s nothing worse than feeling out of the loop about a hip new numeronym. It took me way too long to catch onto a11y and l10n – and I’m still 60% sure that i18n translates to “IAmLordVoldemort.”

So when I first noticed people casually mentioning e18e earlier this summer, I knew I had to get myself up to speed before it was too late. Here’s what I learned.

e18e stands for “Ecosystem Performance,” and like the a11y movement, it’s a community-driven initiative that’s working to unite developers around a common goal – improving performance in the JavaScript ecosystem.

That sounds great, but if you take a brief-yet-terrifying look at your dependencies, you’ll realize this is kind of like saying, “We’re going to clean up the Great Pacific Garbage Patch.” It’s a noble cause, but where do you start?

Thankfully, the e18e crew has defined three tangible areas of focus:

• Clean up – Remove or replace redundant dependencies in popular JavaScript packages
• Speed up – Improve the performance of widely used packages and frameworks
• Level up – Build modern, lighter alternatives to outdated packages

And they’re already making real progress. It started with their replacements project repo, which provides a community-driven list of alternative packages that are more modern and active.

This list is consumed by a few different tools, including an ESLint plugin that makes suggestions to reduce your dependency bloat and a set of codemods that automatically migrates your code to a replacement package or native functionality.

The e18e crew is also making lots of perf-based contributions to popular JS packages and publicly recognizing other developers who do the same.

Bottom Line: By providing some direction and simple tools for doing the right thing, e18e looks like our best hope yet for finally cleaning up all the microplastics in the JS ocean.

---

Identify every site visitor with Fingerprint

Fraud prevention is a sneaky UX problem: you need to protect your users from attacks, but you also don’t want to degrade their experience by forcing them to jump through tons of different auth steps.

That’s why 6,000+ companies use Fingerprint. It helps you identify every single site visitor with 99.5% accuracy – so you can block the bad guys, and seamlessly reduce friction for good users.

Here’s how it works:

• Fingerprint collects 100+ signals across devices and browsers to uniquely identify all visitors, even if they’re using VPNs, bots, or incognito mode

• It automatically triggers additional security when necessary to prevent credential stuffing, brute force attacks, and phishing attempts

• It accurately recognizes your existing users and gives them a frictionless login experience, only triggering verification when needed

Sign up for a free trial – and see why companies like Dropbox, Western Union, and US Bank use Fingerprint to protect and delight their users.

---

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
}

function Dog(name) {
  Animal.call(this, name);
}

const dog = new Dog('Rex');

dog.speak();

---

1. Maciek wrote about his battle with a phantom memory leak in his Rust app. Don’t worry Maciek, phantom leaks are common in men over 40.

2. Puppeteer now has first-class support for Firefox.

3. The Clerk team created this step-by-step guide to Building a React login page template from scratch, complete with authentication, input validation, and styling. [sponsored]

4. Yongseok released Part 4 of their React Compiler deep dive series. This one covers the theory and implementation of SSA transformation, so you might want to put on your thinking cap before diving in. And by “thinking cap”, I mean adderall patch.

5. Pines is a new UI library of copy-paste elements for Alpine + Tailwind projects.

6. tschema is a tiny utility to build JSON schema types that is definitely e18e-approved.

7. Sentry is hosting a free workshop on How to solve frontend issues with backend tools with Salma Alam-Naylor. It’ll be highly interactive, and you’ll get a lot of practice finding, debugging, and fixing performance issues in a Next.js app. [sponsored]

8. Alex Kondov wrote this deep dive about how he refactored a messy React component for a consulting client. Whatever you got paid, it wasn’t enough, Alex.

9. Kevin Grajeda created this CSS spring easing generator that lets you design dynamic, spring-based animations and copy the code straight into your project.

10. Lukas is a mad lad who created WhenFS, a “harder drive” that turns your Google Calendar into a FUSE filesystem – where all the files, directories, reads, and writes are entirely based on manipulating Google Calendar events. Definitely not e18e-approved.

---

In order to inherit the prototype methods from Animal, we need to use Object.create to create a new object that inherits from Animal.prototype and assign it to Dog.prototype.

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);

const dog = new Dog('Rex');

dog.speak();