The first rule of HTML First Club

Issue #239.November 13, 2023.2 Minute read.
Bytes

Today’s issue: The first rule of HTML First Club, why Web Components don’t act like React components, and a generous bounty offered by Vjuex, Guillermo Rauch, and a mysterious anonymous donor that may or may not be your favorite JavaScript newsletter.

Welcome to #239.


Eyeballs logo

The Main Thing

skeleton decorations bowing to another skeleton decoration

Type nerds welcoming the newest TypeScript release

TypeScript 5.3 gets an interesting wrinkle

You know those seminal moments in technology, when you see something so mind-blowing that you just stand there in awe at the innovations humans are able to produce?

Well, this upcoming TypeScript 5.3 release isn’t that. But it does introduce a few noteworthy new features you should probably know about. Let’s dive in:

  • Import Attributes — While still a Stage-3 proposal for JavaScript, TypeScript 5.3 adds support for import attributes, which ensure that the module type and the resource’s MIME type match. This makes importing remote modules significantly more secure.

  • Improved Type NarrowingMateusz Burzyński apparently got sick of TS not working for things like switch(true) and Boolean comparisons, because he contributed fixes for both of those (OSS ftw).

  • DX Improvements — This release also added new inlay hints for types, a setting to prefer type auto imports (import { type Person } from "./types";) and performance optimizations for the JSDoc truthers.

Bottom Line: While we’re excited about TypeScript adding new language features like import attributes, it does raise an interesting question about TypeScript’s power to tacitly endorse specific JavaScript proposals — kind of like a SuperPAC for the TC39 committee.

Thankfully, niche language features aren’t quite as big of a concern as actual politics, and it seems like everyone here is simply trying to make things easier for developers.

        

Nylas logo

Our Friends
(With Benefits)

Medieval painting of a magician performing

Me showing my team the easy way to get training data

Learn about “the uncharted goldmine for LLMs” with Nylas

Email and calendar data can be valuable training assets for LLMs, and potentially profitable for your app.

But accessing this data securely, privately, and at scale can be incredibly complex.

That’s why Nylas’ SVP of Engineering, Troy Allen, and Granica CEO/Co-founder, Rahul Ponnala will be hosting this free fireside chat on Nov 15th about how teams can leverage calendar and email data to train LLMs.

They’ll walk you through navigating the challenges of securely accessing and scrubbing this data for long-term success, and help you get a better idea of how to utilize it effectively.

And if you want to dig deeper, you can check out Nylas’ Developer’s Guide to Generative AI that’s based on data collected from over 1,000 developers.


Spot the Bug logo

Spot the Bug

Sponsored by Datadog

Their free Kubernetes Cheatseet walks through how you can easily keep track of important Kubernetes health and performance data.

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 1) {
      evenNumbers.push(numbers[i]);
    }
  }

  return evenNumbers;
}

getEvenNumbers([1,2,3,4,5,6])

Cool Bits logo

Cool Bits

  1. Have you ever been frustrated that Web Components don’t work like React components? Well, in HTML Web Components, Jim explains why you’re dumb (our words).

  2. Netanel Basal wrote this Comprehensive Guide to Angular’s Defer Block, an impactful new feature in Angular 17.

  3. Convex is a type-safe backend that can replace your database, server functions, and glue code. It’s pretty much the 2023 version of Firebase. [sponsored]

  4. Sun Tzu said “If you know the enemy and know yourself, you need not fear the result of a hundred battles.” Since I assume you already know yourself, a new Honeypot documentary just dropped on Ruby on Rails.

  5. Do you make $150k+ dollars a year to build websites on the internet and still don’t know the difference between a URI, URL, URN, and URC? Yeah, me neither. But in URL Explained, other people who don’t know those terms can learn them.

  6. Steve Ruiz wrote about Refreshing the Next.js App Router When Your Markdown Content Changes.

  7. Cheng Lou created Pure CSS Shaders Art, which they describe as being “at the intersection of art and bad performance.” That’s exactly how I describe my first experience with community theater.

  8. Callstack are some of the most trusted and experienced React Native experts in our industry. They’ve helped companies like PWC, Evernote, and Ticketmaster build applications from scratch, extend functionality, train developers, and lots more. They could probably help your team too. [sponsored]

  9. The first rule of HTML First Club is: you do not talk about HTML First Club.

  10. In a flashback to the ZIRP days of 2021, Vjuex put up a $10k bounty for rewriting Prettier in Rust. Guillermo quickly matched making the total $20k. We’re also willing to throw in another $5 – making the combined total between all three of us an impressive $20,005.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Datadog

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 1) {
      evenNumbers.push(numbers[i]);
    }
  }

  return evenNumbers;
}

getEvenNumbers([1,2,3,4,5,6])

Our logic is a little off. n % 2 will return 0 if n is an even number. The bug is that our code checks if it returns 1 (which would be an odd number).

To fix this, we can change that line to see if it evaluates to 0, not 1.

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
      evenNumbers.push(numbers[i]);
    }
  }

  return evenNumbers;
}

getEvenNumbers([1,2,3,4,5,6])