Javascript

toSlug

Creating this site I used this snippet so much that it became a util function. Super simple and an absolute godsend when it came to working with Remix.

export const toSlug = (title: string) =>
  title
    .toLowerCase()
    // remove any spaces from the beginning and end of the string
    .trim()
    // replace any spaces with a dash
    .replace(/ /g, '-')
    // replace any characters that aren't numbers letters dashes or slashes
    .replace(/[^a-z0-9-\/]/g, '')
Updated: 17 March 2022

toReadableDate

I hate having to think about converting dates into a human readable formate so I created a quick util function.

export const toReadableDate = (date: Date) => {
  const dateOptions: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }

  return new Date(date).toLocaleDateString('en-US', dateOptions)
}

In the future something like this will become even easier using JavaScript's proposed Temporal API

Updated: 18 March 2022

Chunk an array

Because sometime you just need to chunk some stuff.

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );
Updated: 6 February 2022

Flatten an array

Introduced in ES6 we can now easily flatten multi dimensional arrays. Gone are the days of having to create our own solution (taken from stackoverflow).

// This method accepts one argument to choose the depth of the flattening
const multiDimensionalArray = [
  [1, 2],
  [3, 4],
  [5, 6],
];

const flattenedArray = multiDimensionalArray.flat(); // [1, 2, 3, 4, 5, 6]
Updated: 6 February 2022

Remove a property from an Object

A pretty neat solution, by leveraging ES6 Object destructuring assignment we can immutably remove properties.

const item = {
  id: 1,
  price: 50,
  image: 'item.jpeg',
};

const { id, ...item2 } = item;
// now item 2 doesnt have an id property
console.log(item2);
Updated: 6 February 2022

Optional Chaining

More than anything it's going to save you some heaps of typing, it's a neat solution for something that has plagued developers sanity for a while now. If the expression short circuits (the values doesn't exist) then undefined will be returned.

// Instead of something like
const city = user && user.address && user.address.city;
// We can do
const city = user?.address?.city;
Updated: 6 February 2022

Get a single value from an array of objects via id

Simple, elegant and it will save you a bunch of time. No more mapping or filtering involved.

myArray.find((x) => x.id === '45').author;
Updated: 6 February 2022

Decode HTML entities

Sometimes when using API's or text from the document special characters are encoded into HTML entities. We can take advantage of the textarea tag to decode these strings for us!

export const decodeHtmlEntities = (html) => {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = html;
  let decodedHTML = textArea.value;
  textArea.remove();
  return decodedHTML;
};
Updated: 6 February 2022

Dedupe an Array

Need to easily remove duplicate values from an array? Use this performant one liner:

const dedupedArray = [...new Set(myArray)]
Updated: 8 March 2022

Check if an Object is empty

Sometimes you need to know whether an Object is empty or not. This lil` snippet will sort you right out, and it's pretty simple too!

function isEmpty(object) {
  for (const property in object) {
    return false;
  }
  return true;
}
Updated: 23 March 2022

Splitting Text

Sometimes it's easier to use a library. In this case we can use the splt library.

import splt from "https://cdn.skypack.dev/spltjs@1.0.8";
// any element with a class of 'splt' will be targeted by the script
splt({});

Splt also provide a useful example

Updated: 29 April 2022