Material Web Components surprised everyone

Deno’s unofficial new slogan, a well-trained llama, and the magic of WebContainers.

Welcome to #206.

---

MWC gets ready for prime time

Google’s Material Web Components surprised everyone earlier this month when they announced that they’re now officially in beta and are planning to launch their first-ever stable release later this quarter.

Why was this surprising? Because MWC’s initial public release was in May 2018, back when Avengers: Infinity War was still in theaters (and we all thought Thanos had won). We haven’t heard much about MWC since then, so here’s a quick refresher.

As the name implies, MWC is a Web Components implementation of Material, Google’s open-source design system that’s on a mission to help every website look the same “implement best UI practices.”

It’s a little confusing because the most popular implementation of Material to date has been a third-party React UI library called Material UI, which has no official ties to Google at all.

But who knows, maybe MUI’s growth helped motivate the Material team to finally release a stable version of their own UI library. And implementing it with Web Components makes a ton of sense because 1) they’re Google, and 2) it allows the library’s components to be used with a wide variety of frameworks and projects.

What can we expect from v1.0?

• Stability for 22 foundational components
• Improved accessibility
• Dynamic color and Material tokens
• Native HTML form support

Bottom Line: Who knows if Material Web will ever become a mainstream library, but if it does, it would be another driving force for the larger Web Components renaissance we’ve been seeing over the past couple years.

---

Cloudflare saved us thousands of dollars

Here’s how: We own a relatively popular site called npm trends, which serves millions of requests a day. Owning a site like that is kind of like doing an Olive Garden eat-the-menu challenge. It’s (mostly) fun and games — until the host brings you the bill.

After months of spending a gluttonous amount on hosting, we finally decided to save some dough and refactored our backend to use Cloudflare Workers instead of [REDACTED] — which made me feel like both a genius and an idiot. A genius because it instantly saved us thousands of dollars and easily scales to our needs, and an idiot for not switching sooner.

One more Cloudflare hack: Using R2 object storage to store and serve user data.

It’s fast, powerful, and way cheaper than Amazon S3 because it has no egress fees and an incredible free tier. And since it’s fully compatible with S3, you can save a bunch of money by using R2 for your object storage.

Try out the free tiers — you’ll thank me later.

---

class ChatApp {
  constructor() {
    this.keywordRegex = /hello|hi|hey/g;
  }

  receiveMessage(message) {
    if (this.keywordRegex.test(message)) {
      this.sendGreeting();
    }
  }

  sendGreeting() {
    console.log("ChatApp: Hello, how can I assist you today?");
  }
}

let chatApp = new ChatApp();

chatApp.receiveMessage("hi, how are you?");
chatApp.receiveMessage("hello, can you help me?");

---

1. Hiroki Osame created pkg-size. It shows you the true size of an npm package by running npm install on that package in the browser, examining the node_modules directory, and bundling it with esbuild — all thanks to the magic of WebContainers. It then shows you all the dependencies that were installed, why they were installed, the bundle + install size of the npm package, and more.

2. Deno’s Fresh framework just released v1.3 with simplified route components, new support for error boundaries, and more. All in favor of Ryan Dahl changing the official company slogan to “Deno: Eat Fresh”, please raise your five-dollar footlongs high where we can see them.

3. Courier just launched Inbox — a set of customizable components and powerful APIs that makes it easy to build an in-app notification experience your users will actually want to use. [sponsored]

4. Lydia Hallie wrote an in-depth article about How React 18 Improves Application Performance.

5. Brian Kihoon Lee wrote an article called Readability: Google’s Temple to Engineering Excellence, which reflects on his learnings during the six years he worked at Google. I’m not sure which level of engineering mage you need to be in order to get invited into the Google Temple, but I plan on finding out.

6. The Vite team is gathering feedback on its experimental features ahead of its upcoming v5 release. So speak now, or forever hold your vite.

7. Matt Kruse created a demo app/tutorial series called Demystifying React Server Components with NextJS 13 App Router. I’m just waiting for someone to mystify server components for a change.

8. Meta just released Llama 2, the latest release of its open-source LLM that was trained on 40% more data than Llama 1 and scores pretty well on most LLM benchmarks. A llama?? He’s supposed to be dead!

---

chatApp.receiveMessage("hi, how are you?"); // "ChatApp: Hello, how can I assist you today?"
chatApp.receiveMessage("hello, can you help me?"); // Logs nothing

In JavaScript, RegExp objects with the g (global) flag retain state between matches due to the lastIndex property, which can lead to unexpected results when reused across different inputs.

The solution is to create a fresh RegExp object for each incoming message, ensuring proper recognition and response to all greetings.

class ChatApp {
  receiveMessage(message) {
    let keywordRegex = /hello|hi|hey/g;
    if (keywordRegex.test(message)) {
      this.sendGreeting();
    }
  }

  sendGreeting() {
    console.log("ChatApp: Hello, how can I assist you today?");
  }
}

let chatApp = new ChatApp();

chatApp.receiveMessage("hi, how are you?"); // "ChatApp: Hello, how can I assist you today?"
chatApp.receiveMessage("hello, can you help me?"); // "ChatApp: Hello, how can I assist you today?"