loilo

Not That Tiny Reactive Store

Not as tiny as the Tiny Reactive Store anyway.

This pretty small script (900b/700b minzipped with/without decorators) is a reactive store implementation with dependency tracking instead of explicit dependency declaration.

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

const bytes = value(4300)

loilo

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 => `${kbNum.toFixed(2)} KB`)

loilo

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')}`
}

loilo

/**
 * 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
 */

loilo

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'

loilo

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.

loilo

/**
 * 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

loilo

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

loilo

Back up and restore an IndexedDB database

This gist is an ES module which provides functions to import and export data from an IndexedDB database as JSON. It's based on Justin Emery's indexeddb-export-import package, but applies some adjustments that reflect better on the current browser landscape (i.e. better developer ergonomics but no support for Internet Explorer).

Usage

For each of the provided functionalities, you need a connected IDBDatabase instance.

Export Data

import { idb } from 'some-database'

loilo

/*
 * 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