Skip to content

Instantly share code, notes, and snippets.

View JonCatmull's full-sized avatar

Jon Catmull JonCatmull

View GitHub Profile
@JonCatmull
JonCatmull / file-size.pipe.ts
Last active April 14, 2024 14:27
Angular2 + TypeScript file size Pipe/Filter. Convert bytes into largest possible unit. e.g. 1024 => 1 KB
/**
* @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:
@JonCatmull
JonCatmull / ordinal.pipe.ts
Last active January 12, 2024 16:09
Appends ordinal (st, nd ,rd ,th) to number or turns number into ordinal. Typescript Angular2 Pipe
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 / README.md
Last active January 5, 2024 09:13
List GCP cloud bucket files over a certain size
/**
* Gets the document type from a Firestore DocumentReference
*/
export type DocumentReferenceType<T> = T extends DocumentReference<infer U> ? U : never;
@JonCatmull
JonCatmull / rxjs-localstorage-replay.ts
Last active January 27, 2023 10:51
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.
/**
* 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 / gmaps-example.html
Last active March 8, 2021 19:15
Google maps with class and data attributes
<div id="map-canvas-footer" style="height:300px; width:100%;" class="gMap" data-lat="<?php echo $location['lat']?>" data-lng="<?php echo $location['lng']?>"></div>
@JonCatmull
JonCatmull / split-array.ts
Created December 18, 2020 11:08
Split an array based on predicate function.
/**
* 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 December 18, 2020 11:06
Limit the amount of recursively nested child arrays on an object.
/**
* 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 June 24, 2020 15:51
RxJs operator to reload a JWT when it expires
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-debounce-after-first.ts
Created May 18, 2020 14:46
RxJS custom operator to debounce a stream for set time after first value is emitted.
/**
* 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)),