Using Web Components responsibly

Today’s issue: How to use Web Components responsibly, how improving your Lighthouse score will make you $30 million, and how I learned that blog-cells is not a blog for incels (thank goodness).

Welcome to #216.

---

Updates from Chrome-Land

I’m not sure what they’re putting in the boxed coconut water over in Mountain View, but it’s clearly pushing the Chrome team to a whole new level of productivity.

The past few Chrome releases have been all-bangers-no-skips, so if you haven’t visited Chrome-land for a while, here are five new features worth checking out:

• The new CSS subgrid value allows a child element to inherit the columns and rows from its parent. Here’s an example of how that can help simplify complex layouts.

• text-wrap: balance and text-wrap: pretty let the browser create a more “balanced block” of text and makes sure none of your text blocks have the widow/orphan problem. Instead of focusing purely on performance, these help optimize your layout for readability and general prettiness 💁‍♀️ (see demo).

• The Document Picture-in-Picture API makes it possible to open a floating window that can be populated with any HTML content, not just video. Great news for my online casino ads business.

• Chrome 117 DevTools now come with a more streamlined local overrides feature. Addy Osmani demoed how you can use this to override the content of Fetch/XHR requests and mock APIs without having to wait for backend changes.

• Bonus: CSS Sticky State Container Queries will let you use container queries to style descendants of sticky positioned containers. This just entered the Intent to Prototype phase, so it’s still probably months away, but it gives a cool preview of the more advanced functionality we’ll eventually get with CSS container queries.

Bottom Line: This just in. Apparently the fancy coconut water at Google HQ comes pre-loaded with 5mg of prescription-grade Adderall and just a “splash” of Ozempic. It all makes sense now.

---

Flatfile makes it easy to build your ideal file import experience

You thought your app’s file importer was working fine, until one of your users uploaded a rogue CSV with terrible formatting. Then all hell broke loose.

Thankfully, Flatfile’s Data Exchange Platform can save you.

It gives you a simple and secure way to build your own ideal solution for importing CSV, Excel, or other data files, without compromising on flexibility. Here’s how:

• Their API-first, event-driven architecture lets you build fully customizable workflows for any data import use case you need. (See the docs.)

• It’s easy to embed in your app and provides a highly intuitive experience for end users.

• It comes with enterprise-scale support and security, and is already used by tons of Fortune 500 companies.

Try it out free — and never wrestle with file imports again.

---

function stressTest() {
  console.time('Total Stress Test Duration');

  const arraySize = Math.pow(2, 32);
  let largeArray = new Array(arraySize).fill(0);

  console.time('Populate Array');
  largeArray = largeArray.map(() => Math.floor(Math.random() * 1000));
  console.timeEnd('Populate Array');

  console.time('Sort Array');
  largeArray.sort((a, b) => a - b);
  console.timeEnd('Sort Array');

  console.time('Filter Even Numbers');
  const oddArray = largeArray.filter(num => num % 2 !== 0);
  console.timeEnd('Filter Even Numbers');

  console.time('Square Numbers');
  const squaredArray = oddArray.map(num => num * num);
  console.timeEnd('Square Numbers');

  console.time('Sum of Numbers');
  const sum = squaredArray.reduce((acc, num) => acc + num, 0);
  console.timeEnd('Sum of Numbers');

  console.timeEnd('Total Stress Test Duration');
}

stressTest();

---

1. Tim Neutkens wrote this Deep Dive on Caching and Revalidating with the Next.js App Router. I’m not exactly sure what makes him qualified to write about Next.js, but it’s a great read.

2. Are you staying secure across your CI/CD pipelines? 8 Tips for Securing Your CI/CD Pipeline is a helpful cheat sheet that covers different types of security scanning and implementation examples with two popular CI/CD platforms – Jenkins & GitHub Actions. [sponsored]

3. Bun v0.8 adds debugger support, SvelteKit support, and a few new CLI tools, as they gear up for the big Bun 1.0 release next month.

4. Richard Ekwonye wrote a cool, visual article about The logic behind Bézier Curves in CSS animations. I’m pretty sure that “Bézier Curves” was the name of the winner from the last season of Ru Paul’s Drag Race.

5. Elan Medoff wrote about React Suspense in three different architectures — CSR, SSR, and server components. Personally I won’t ship Suspense to production until it supports the PEMDAS architecture.

6. blog-cells lets you add code snippets to any blog or website. It’s similar to Jupyter notebooks, but is powered by JavaScript and runs entirely in the browser. AFAIK it works for both incel and non-incel blogs.

7. Product for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. Subscribe for free to get curated advice on building great products, lessons (and mistakes) from building PostHog, deep dives on top startups, and very cute hedgehog illustrations. [sponsored]

8. Nolan Lawson wrote an article called Use Web Components for what they’re good at — which, and I’m learning this for the first time, is more than just making React devs angry on Twitter.

9. useHooks is our collection of 50 modern, server-safe React hooks that we made just for you. No, not for your co-worker sitting right next to you — just you.

10. Addy Osmani wrote about Optimizing for speed on eBay’s website. I’m not sure if reducing the load time on your side project’s website by 95 milliseconds will lead to you making $30 million more per day too, but you’ll never know if you don’t try.

---

function stressTest() {
  console.time('Total Stress Test Duration');

  const arraySize = Math.pow(2, 32);
  let largeArray = new Array(arraySize).fill(0);

  console.time('Populate Array');
  largeArray = largeArray.map(() => Math.floor(Math.random() * 1000));
  console.timeEnd('Populate Array');

  console.time('Sort Array');
  largeArray.sort((a, b) => a - b);
  console.timeEnd('Sort Array');

  console.time('Filter Even Numbers');
  const oddArray = largeArray.filter(num => num % 2 !== 0);
  console.timeEnd('Filter Even Numbers');

  console.time('Square Numbers');
  const squaredArray = oddArray.map(num => num * num);
  console.timeEnd('Square Numbers');

  console.time('Sum of Numbers');
  const sum = squaredArray.reduce((acc, num) => acc + num, 0);
  console.timeEnd('Sum of Numbers');

  console.timeEnd('Total Stress Test Duration');
}

stressTest();

The bug is that the array’s size is too large. The maximum size of an array is 2^32 - 1.

// const arraySize = Math.pow(2, 32);
const arraySize = Math.pow(2, 32) - 1;

In ECMAScript, the length property of an array is a 32-bit unsigned integer, which limits the maximum number of entries an array can have. Because the length property represents the number of entries, and it’s zero-based, the maximum length is Math.pow(2, 32) - 1. #themoreyouknow