Type-Maxxing with Effect

Issue #286.May 6, 2024.2 Minute read.
Bytes

Today’s issue: Hono’s new (Cheesecake) Factory Method, the bleeding edge of Angular, and getting a yellow belt in text manipulation kung fu from the dojo at my local strip mall.

Welcome to #286.


Eyeballs logo

The Main Thing

Drake looking confused

When you can't remember what half your dependencies do

Type-Maxxing with Effect

Have you ever woken up on a beautiful Sunday morning, rolled over to look at your significant other, and thought, “I just wish I could figure out a way to make TypeScript yell at me more”?

No? Well, that’s the difference between you and the type-maxxing sickos who created Effect – “the missing standard library for TypeScript” that recently launched its first stable release.

The Effect team argues that TypeScript lacks some key features for larger production apps, which forces developers to fill in the gaps with a bunch of npm packages and funky code.

So they spent the last five years building a foundation of data structures, utilities, and abstractions to address these pain points, including:

  • Built-in error handling primitives that give you strongly typed errors as values, APIs for retry and recovery, and tools for logging and tracing

  • Built-in tools and abstractions for concurrency, data validation, streams, and lots more – which lets you replace lots of one-off dependencies

  • Next-level composability that makes your entire codebase more reusable and testable

But with great power, comes great tradeoffs. And because Effect has a lot going on, it means there’s a lot to learn.

With over 500 functions, an extensive API surface, and a distinct programming style, some have argued that it feels more like learning a whole new language than a library or framework.

But thankfully, Effect is actually a TypeScript framework. That means you can incrementally adopt it, aka find a few functions you immediately like and never bother learning what the rest do.

Bottom Line: If Drake can force Kendrick to consistently release new music for the first time in almost a decade, maybe Effect can finally help us all become the type lords we were always destined to be.

        

speakeasy logo

Our Friends
(With Benefits)

Jay-Z cringing

When your team actually ships the SDKs you built with that random OSS tool

Speakeasy makes it easy to build great SDKs

SDKs are a great way to grow API revenue, but they’re incredibly difficult to do well.

You either use an OSS generator to create mediocre SDKs that leave users unhappy, or you dedicate 10-15 engineers to build and maintain them yourself, which is expensive af.

Or you could just use Speakeasy. They’re the only solution that generates SDKs you’ll be proud to give your users – because they’re easy to read, easy to customize, and come with powerful features:

  • True end to end type safety with Zod validation for both user inputs & server responses (see TypeScript SDK example)

  • Runs on the browser & server with support for runtimes like Node.js, Bun, Deno, and React Native

  • Support for polymorphic types and any other complex data types in your API

Create your first SDK for free – and see why an engineering leader at ConductorOne said that “it saves our team hundreds of hours, without a doubt.”


Spot the Bug logo

Spot the Bug

Sponsored by Raygun

Their brand new AI Error Resolution tool uses GenAI to resolve issues faster and more accurately – helping you catch bugs like this one 👇 before they break prod.

function removeElement(array, elementToRemove) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === elementToRemove) {
      array.splice(i, 1);
    }
  }
}

let myArray = [1, 2, 3, 2, 4];
removeElement(myArray, 2);

Cool Bits logo

Cool Bits

  1. If you want to dive deeper into Effect, Johannes Schickling (the founder of Prisma) gave this conference talk on how Effect works with production-grade TypeScript apps.

  2. Hono 4.3 just came out with better React compatibility, improved RPC mode, and a new factory method – not to be confused with my new Cheesecake Factory method of skipping the bread and ordering a piece of appetizer cheesecake instead.

  3. Sonar is hosting a live webinar on how to amplify Clean Code with SonarQube Enterprise Edition on May 16th that will demonstrate how you can improve code quality by leveraging features like pull request analysis and advanced security detection. (Sign up for EMEA time zone here.) [sponsored]

  4. You can now run a full AnalogJS app inside StackBlitz to see what the bleeding edge of Angular feels like.

  5. Reid Barber wrote about Creating a pointer-friendly submenu experience with the new React Aria release.

  6. Layer Cake is a graphics framework for Svelte. And while not everybody likes onions, everybody loves cake (and parfaits).

  7. QA Wolf can get your web app to 80% automated end-to-end test coverage in 4 weeks and save your team hundreds of thousands of dollars in engineering time. It’s a no-brainer. [sponsored]

  8. Tommy D. Rossi created Remix for Next.js Developers, which gives 25 side-by-side code snippets of fundamental concepts in Remix and Next.

  9. Deno 1.43 (aka the ILY release) speeds up Deno’s Language Server, improves Node and npm compatibility, and comes with lots of other minor improvements.

  10. Joseph Lyons wrote about Text manipulation Kung Fu for the aspiring black belt, which is perfect timing, because I still only have a text manipulation yellow belt from doing a free trial at the my local strip mall dojo.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Raygun

function removeElement(array, elementToRemove) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === elementToRemove) {
      array.splice(i, 1);
    }
  }
}

let myArray = [1, 2, 3, 2, 4];
removeElement(myArray, 2);

This solution isn’t ideal since it doesn’t account for the fact that the array is being modified as it’s being iterated over. When the element at index 1 is removed, the element at index 2 is shifted to index 1.

There are a bunch of ways to make this better, all with varying tradeoffs. This is probably the best one, which uses JavaScript’s filter method to return a new array after filtering out the elementToRemove.

function removeElement(array, elementToRemove) {
  return array.filter((element) => element !== elementToRemove);
}