Skip to content

Instantly share code, notes, and snippets.

Avatar

Jon Catmull JonCatmull

View GitHub Profile
@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 18, 2020
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 6, 2020
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]
@JonCatmull
JonCatmull / file-size.pipe.ts
Last active Jul 18, 2020
Angular2 + TypeScript file size Pipe/Filter. Convert bytes into largest possible unit. e.g. 1024 => 1 KB
View file-size.pipe.ts
/**
* @license
* Copyright (c) 2019 Jonathan Catmull.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
View harlem-konami.js
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
kkeys.push( e.keyCode );
if ( kkeys.toString().indexOf( konami ) >= 0 ) {
$(document).unbind('keydown',arguments.callee);
You can’t perform that action at this time.