Florian Reuschel loilo

Sort by Samples

A sorting function that takes an array of samples. All sortable items which occur in the samples will be arranged in the order they occur there, all other items will be appended to the end in their original order or sorted with an optional provided comparision algorithm.

This can be useful when the items to sort are not completely known, but there are some well-known ones that should come first:

const pages = [ 'About', 'Products', 'Home', 'Contact', 'Carreer' ]

// No idea what pages exist, but if "Home" and "About" exist, they should come first

Promise Wrapper for FileReader

This is a simple wrapper for the FileReader API. It allows converting a Blob (and therefore a File as well) to either a plain text string, a data URL or an ArrayBuffer with a nice and clean Promise API.

Signature

This is the TypeScript signature of the readBlob function:

/**
 * Read a blob or file and convert it to another data type

Vue Global Keyboard Shortcut Mixin

This is a Vue.js mixin (or rather, a mixin factory) for simple keyboard shortcuts.

Features:

Tiny (<0.5 KB minified & gzipped)
Super easy to use
Proper restrictions (does not trigger when modifier keys don't match exactly or when an element has focus)

Note that this mixin targets modern browsers. If you need legacy browser support, you need to use a transpiler like Babel with the according polyfills.

Regular Expression Template Tag in TypeScript

I liked this gist enough that I made it a full-blown npm package. Check it out here.

After having used regular expression escape functions for years, it just crossed my mind that this might be way easier to achieve with a tagged template literal.

This is how to use this gist:

import rx from 'https://unpkg.com/@loilo/rx/dist/rx.mjs'

Tiny Reactive Store

This is a tiny (≈250b minzipped) implementation of a reactive store. It's heavily inspired by Svelte's store, but it's even leaner than that (no write-protected store, no asynchronous derived data):

import { value, computed } from 'store.mjs'

const bytes = value(4300)
const kbNum = computed(bytes, bytes => bytes / 1024)
const kbStr = computed(kbNum, kbNum =&gt; `${kbNum.toFixed(2)} KB`)

	/*
	* These are some types I found useful during some tricky TypeScript programming.
	* Many of them are not too common or intuitive to come up with, this is why I'm writing them down here for future lookup.
	*
	* Note: Be careful when copy-pasting, some of these types depend on others.
	*/


	/**
	* Various utilities for working with classes

	/**
	* Export all data from an IndexedDB database
	*
	* @param {IDBDatabase} idbDatabase The database to export from
	* @return {Promise<string>}
	*/
	export function exportToJson(idbDatabase) {
	return new Promise((resolve, reject) => {
	const exportObject = {}
	if (idbDatabase.objectStoreNames.length === 0) {

	/**
	* Convert between Uint8Array and Base64 strings
	* Allows for any encoded JS string to be converted (as opposed to atob()/btoa() which only supports latin1)
	*
	* Original implementation by madmurphy on MDN
	* @see https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_1_–_JavaScript%27s_UTF-16_%3E_base64
	*/

	function b64ToUint6(nChr) {
	return nChr > 64 && nChr < 91

	/**
	* Fixates JavaScript's Date
	* This is useful for snapshot testing data which refers to the current time
	*
	* Losely based on https://github.com/facebook/jest/issues/2234#issuecomment-324868057
	*/

	/**
	* Keep a reference to the original date
	*/

	function getLocalISOString(date) {
	const offset = date.getTimezoneOffset()
	const offsetAbs = Math.abs(offset)
	const isoString = new Date(date.getTime() - offset * 60 * 1000).toISOString()
	return `${isoString.slice(0, -1)}${offset > 0 ? '-' : '+'}${String(Math.floor(offsetAbs / 60)).padStart(2, '0')}:${String(offsetAbs % 60).padStart(2, '0')}`
	}