Skip to content

Instantly share code, notes, and snippets.

Avatar

Jon Catmull JonCatmull

View GitHub Profile
@JonCatmull
JonCatmull / split-array.ts
Created Dec 18, 2020
Split an array based on predicate function.
View split-array.ts
/**
* Splits array when splitOn function returns true. Matched item will kept and be first in the subsequent child array.
* @param items
* @param splitOn
*/
export const splitArray = <T>(
items: T[],
splitOn: (item: T) => boolean,
keepSplitItem = true
): T[][] => {
@JonCatmull
JonCatmull / truncate-nesting.ts
Created Dec 18, 2020
Limit the amount of recursively nested child arrays on an object.
View truncate-nesting.ts
/**
* Takes menu structure limits the number of levels of nesting.
* @param menuItems
* @param maxLevels
* @param level
*/
export const truncateNesting = <T extends { children?: T[] }>(
menuItems: T[],
maxLevels: number,
level = 1
@JonCatmull
JonCatmull / auto-reload-jwt.ts
Last active Jun 24, 2020
RxJs operator to reload a JWT when it expires
View auto-reload-jwt.ts
import { MonoTypeOperatorFunction, BehaviorSubject, Observable } from 'rxjs';
import { switchMapTo, tap, shareReplay } from 'rxjs/operators';
import JwtDecode from 'jwt-decode';
/**
* Replays a JWT observable stream. If the JWT's exp passes then the source observable
* will be re triggered automatically to get a new token.
* This replays last value so the token will only update when it expires or because of an
* upstream event, regardless of new subscriptions. Look up shareReplay() for more details.
* @requires exp Token's must contain a exp to be used with this.
@JonCatmull
JonCatmull / rxjs-localstorage-replay.ts
Last active May 10, 2021
RXJS operator function to store a stream in localStorage, then replays from localStorage when provided BehaviourSubject is true. This is helpful if you need to replay a complicated set of observable streams after a browser redirect.
View rxjs-localstorage-replay.ts
/**
* Stores last emitted value in localStorage and replays if usStore$ is set.
* If usStore$ is truthy then switches stream to use stored value.
* If usStore$ is undefined then stream will emit as normal.
* @param storageKey unique key to use in localStorage
* @param useStore$ controls if the localStorage value is used
*/
export default function localStorageReplay<T>(storageKey: string, useStore$: BehaviorSubject<boolean>): MonoTypeOperatorFunction<T> {
return (input$): Observable<T> => {
@JonCatmull
JonCatmull / rxjs-debounce-after-first.ts
Created May 18, 2020
RxJS custom operator to debounce a stream for set time after first value is emitted.
View rxjs-debounce-after-first.ts
/**
* Debounce after first emit.
* This operator will debounce all requests apart from the first for a set duration.
* @param ms time to wait in milliconds.
*/
const debounceAfterFirst = <T,>(ms: number) => (source: Observable<T>) => {
return source.pipe(
map((val: T, index: number) => ({ val, index } as { index: number; val: T })),
debounce(({ index }) => timer(index === 0 ? 0 : ms)),
View lighthouse-compose-import.sh
curl -o lightsail-compose.sh https://raw.githubusercontent.com/JonCatmull/docker/master/lightsail-compose.sh
chmod +x ./lightsail-compose.sh
./lightsail-compose.sh
@JonCatmull
JonCatmull / line-height.plugin.js
Last active Nov 26, 2018 — forked from aaerofeev/line_height.js
Froala Editor line-height plugin
View line-height.plugin.js
/*!
* Froala Line Height plugin
* froala_editor v2.7.1 (https://www.froala.com/wysiwyg-editor)
*/
!function (a) {
"function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof module && module.exports ? module.exports = function (b, c) {
return void 0 === c && (c = "undefined" != typeof window ? require("jquery") : require("jquery")(b)), a(c), c
} : a(jQuery)
}(function (a) {
@JonCatmull
JonCatmull / ordinal.pipe.ts
Last active Aug 19, 2021
Appends ordinal (st, nd ,rd ,th) to number or turns number into ordinal. Typescript Angular2 Pipe
View ordinal.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
const ordinals: string[] = ['th','st','nd','rd'];
/*
* Append ordinal to number (e.g. "1st" position)
* Usage:
* value | ordinal:keepNumber
* Example:
* {{ 23 | ordinal}}
@JonCatmull
JonCatmull / smart-date.pipe.ts
Created Dec 21, 2016
Relative date Pipe for Angular2 + TypeScript . Convert date or timestamp into relative date string e.g. "5 days ago" or to local date string e.g. "11/12/2016"
View smart-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
import { RelativeDatePipe } from './relative-date.pipe'; // https://gist.github.com/JonCatmull/e00afb1c96298a4e386ea1b5d091702a
const secondsInAday = 86400;
/*
* Turn Date into realtive date (e.g. "5 days ago") unless date is
* more than relativeMax days ago.
@JonCatmull
JonCatmull / relative-date.pipe.ts
Created Dec 21, 2016
Relative date Pipe for Angular2 + TypeScript . Convert date|timestamp into relative date string e.g. "5 days ago", "1 minute ago" etc.
View relative-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
// Epochs
const epochs: any = [
['year', 31536000],
['month', 2592000],
['day', 86400],
['hour', 3600],
['minute', 60],
['second', 1]