It's Lit

Today’s issue: Going deeper than the Mariana trench on Remix vs Next, making friends with the ChatGPT DOM, and how we can use npm to lure Rick Moranis out of retirement.

Welcome to #228.

---

Lit 3

Don’t look now, but for the first time, people are finally starting to use Web Components.

That’s a joke — so please put down the pitchforks. Lots of developers have been zealously evangelizing using Web Components for the last decade, but until recently, the tools and libraries for building them were often convoluted and difficult to work with.

Quick review: In 2015, Google released the Polymer library. A couple years later, the Polymer team started listening to a lot of Travis Scott (probably) and released a new library called lit-html to cover some of Polymer’s shortcomings. That was followed by another library called LitElement a year later, and the WC ecosystem felt more fractured and confusing than ever.

Thankfully, in 2021 they ended the madness by sunsetting the Polymer project and combining lit-html and LitElement into one library called Lit 2.0 — which they fittingly released the week of 4/20.

Lit introduced a new foundation for streaming SSR and flexible client-side hydration, but the question remained: would it be able to get web developers to try out Web Components?

So far, the answer has been a big yes.

Today, Lit is getting just under 1.2 million weekly npm downloads, nearly 24x what it was getting two years ago. Its growth curve is such a perfect hockey stick that it should come with an NSFW warning for VC associates.

And now, they’re gearing up for a Lit 3.0 release, which be stable in the next few weeks. It won’t introduce many breaking changes, but it does come with a few exciting new features:

• New support for TC39 standard decorators, which will allow Lit to use a decorator implementation that doesn’t require a compiler.

• New Lit template compiler that uses a TypeScript transform to improve render performance.

• Preact Signals integration with a new @lit-labs/preact-signals package that provides three different ways to use Signals with Lit.

Bottom Line: There’s never been a better time to get Lit.

---

Kinde is the fastest way to solve your auth problems

So stop trying to build custom features on top of your crappy limited auth stack, and consider switching to Kinde.

They make it easy to migrate or to start from scratch, and it comes with everything you need to serve power users and enterprise clients:

• Passwordless auth, social/dev logins, and multi-factor auth

• Powerful enterprise features like custom roles & permissions and enterprise SSO

• Best-in-class security protocols for you and your enterprise customers

Check out the surprisingly generous free tier — and see how much time (and money) they could save your team.

---

What gets logged?

class BankAccount {
  constructor(initialBalance) {
    this.balance = initialBalance;
    this.minimumBalance = 20.00;
  }

  deposit(amount) {
    this.balance += amount;
  }

  withdraw(amount) {
    if (this.balance - amount <= this.minimumBalance) {
      return false;
    } else {
      this.balance -= amount;
      return true;
    }
  }

  getBalance() {
    return this.balance;
  }
}

const myAccount = new BankAccount(150.00);
myAccount.deposit(0.10);
myAccount.deposit(0.20);

myAccount.withdraw(130.30);
console.log(myAccount.getBalance());

---

1. Evan You just announced that Vite is working on Rolldown, a Rust port of Rollup. That’s just a little appetizer from ViteConf, but we’ll have the full smorgasbord for you next week.

2. Meta recently released official docs for StyleX — their CSS-in-JS library that gives you “the DX of using inline styles in JavaScript, combined with the performance of statically generated atomic styles.” Really bold move to use the letter X in the branding too. Never seen a tech product do that before.

3. Kubernetes Cheatsheet by Datadog will help you view all the metrics you need to monitor in your Kubernetes environment in one place, so you can better manage your resources and performance. [sponsored]

4. Jamie Magee wrote an article called Honey, I Shrunk the npm Package. I really hope this post is good enough to get a movie deal, so we can finally get Rick Moranis to come out of retirement for good. No pressure, Jamie.

5. ChatGpt.js is a client-side JavaScript library that allows for easy interaction with the ChatGPT DOM.

6. Maxi Ferreira wrote about Sharing State with Islands Architecture. And now I’m gonna have “Island in the Sun” from Weezer’s Green Album stuck in my head all week.

7. string-ts is a library that provides a set of common functions that work with literal strings at both type and runtime level.

8. WEB UNLEASHED, the ultimate three-day conference for web devs, is coming up on Oct 14-16th in Toronto & online. This year’s event will feature well-known industry folks like Wes Bos, Chris Coyier, Lea Verou, Kyle Simpson, Jen Looper, Jason Lengstorf and many others. Save 50% off an in-person ticket, or grab your free online ticket with code ‘BYTES’. [sponsored]

9. Prateek Surana wrote Next.js 13 vs Remix: An In-depth case study. It doesn’t go quite as deep as the Mariana Trench but it’s close.

10. Vitest 1.0 just hit beta and the way you test your apps will never be the same again. Unless you just don’t test your apps, in which case you probably won’t really notice.

---

Answer: 150.29999999999998

We would expect to see 20.00, but due to floating point arithmetic in JavaScript, we get an unexpected result. To fix this issue, we can represent money as integers (e.g., cents) and use Math.round to avoid the pitfalls of floating-point calculations. Here is the updated code:

class BankAccount {
  constructor(initialBalance) {
    this.balanceCents = Math.round(initialBalance * 100);
    this.minimumBalanceCents = 2000;
  }

  deposit(amount) {
    this.balanceCents += Math.round(amount * 100);
  }

  withdraw(amount) {
    const withdrawalCents = Math.round(amount * 100);

    if (
      Math.round(this.balanceCents - withdrawalCents) < this.minimumBalanceCents
    ) {
      return false;
    } else {
      this.balanceCents -= withdrawalCents;
      return true;
    }
  }

  getBalance() {
    return this.balanceCents / 100;
  }
}

const myAccount = new BankAccount(150.0);
myAccount.deposit(0.1);
myAccount.deposit(0.2);
myAccount.withdraw(130.3);

// Displaying the remaining balance, should be 20.00
console.log(myAccount.getBalance());