DEV Community: Adam LaCombe

How to sort an array alphabetically

Adam LaCombe — Sat, 24 Oct 2020 00:00:00 +0000

String.localeCompare()

If you're working with a relatively small array, you could use localeCompare().

const arr = [
  {
    name: "Orange"
  },
  {
    name: "Banana"
  },
  {
    name: "Carrot"
  },
  {
    name: "Apple"
  }
];

// [{"name":"Apple"},{"name":"Banana"},{"name":"Carrot"},{"name":"Orange"}]
console.log(arr.sort((a, b) => a.name.localeCompare(b.name)));

Intl.Collator()

If you're working with a large array, I would recommend using Intl.Collator() for performance reasons.

const arr = [
  {
    name: "Orange"
  },
  {
    name: "Banana"
  },
  {
    name: "Carrot"
  },
  {
    name: "Apple"
  }
];
const collator = new Intl.Collator();

// [{"name":"Apple"},{"name":"Banana"},{"name":"Carrot"},{"name":"Orange"}]
console.log(arr.sort((a, b) => collator.compare(a.name, b.name)));

Benchmarks

1,000 strings

Here is a benchmark where we're sorting an array of 1,000 strings. As you can see, Intl.Collator() is 25% faster than localeCompare().

25 strings

Here is a benchmark where we're sorting an array of only 25 strings. In this case, localeCompare() is 13% faster than Intl.Collator().

How to pick properties from an interface

Adam LaCombe — Wed, 14 Oct 2020 22:55:42 +0000

You can use the built-in type Pick. Pick<MyInterface, "prop1" | "prop2"> is a built-in type which allows you to pick specific properties from an interface.

A great use-case would be verifying user credentials. You might have a User interface such as the following:

interface User {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  password: string;
}

Instead of creating a new interface with the email and password properties from the User interface, lets Pick them!

// without Pick
async function verifyLoginCredentials(credentials: { email: string, password: string }) {
  // ... ...
}

// with Pick
async function verifyLoginCredentials(credentials: Pick<User, "email" | "password">) {
  const user = await getUserByEmail(credentials.email);

  if (!passwordMatches(credentials.password, user.password)) {
    throw new BadRequestError('incorrect password');
  }

  return user;
}

verifyLoginCredentials({ email: "example@example.com", password: "123" });

How to convert images to AVIF in NodeJS

Adam LaCombe — Mon, 07 Sep 2020 00:00:00 +0000

What is AVIF and why should I be using it?

AVIF is the latest next-gen image compression format. It offers significant file size reduction for images compared with JPEG ( ~50% ) or WebP ( ~20% ). Chrome recently shipped support for AVIF in Chrome 85 and it can be enabled in Firefox via the image.avif.enabled flag in about:config.

Take a look at this blog post published by Netflix if you're looking for a more in-depth comparison.

How can I convert my images to AVIF?

Squoosh recently shipped support for AVIF if you don't mind manually converting your images.

If you're looking for a more automated method, you could try using Sharp.
Sharp offers support for AVIF although it is currently experimental.

Unfortunately, Sharp's prebuilt binaries do not support AVIF, so you will have to compile libvips with support for libheif before you can start taking advantage of this "experimental" feature.

To simplify this process I created a Dockerfile that I'm using in sharp-image-proxy.

If you aren't familiar with Docker, I suggest you read my post: Introduction to Docker.

Once you have libvips installed and compiled with support for libheif you can start using the Sharp API.

Here's an example of how you can convert a png to avif:



import * as sharp from 'sharp';

sharp('input.png')
  .toFormat('heif', { quality: 30, compression: 'av1' })
  .toFile('output.avif')
  .then(info => console.log(info));