Skip to content

Instantly share code, notes, and snippets.

@nihlton
nihlton / useHistory.js
Created March 29, 2022 22:09
state hook, with history methods (set/undo/redo)
import { useState } from 'react';
const useHistory = (initialState) => {
const [history, setHistory] = useState([initialState]);
const [historyPos, setHistoryPos] = useState(0);
const canUndo = historyPos;
const canRedo = historyPos !== history.length - 1;
const value = history[historyPos];
@nihlton
nihlton / useKonami.js
Last active June 7, 2022 22:08
useKonamiCode
const code = [
'ArrowUp', 'ArrowUp', 'ArrowDown',
'ArrowDown', 'ArrowLeft', 'ArrowRight',
'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'
];
const useKonami = () => {
const [isActive, setActive] = useState(false);
@nihlton
nihlton / longPressEvents.js
Created October 25, 2020 03:51
long Press hook-like
export default function longPressEvents(callback, ms = 500) {
let timeout = null
const start = () => (timeout = setTimeout(callback, ms))
const stop = () => timeout && window.clearTimeout(timeout)
return callback ? {
onMouseDown: start,
onMouseUp: stop,
onMouseLeave: stop,
@nihlton
nihlton / use-local-storage.js
Last active March 3, 2022 19:42
useLocalStorage React Hook
import { useState, useCallback, useEffect } from 'react'
const customEvent = 'myMagicalStorageHook'
export default function useLocalStorage(
key,
initialValue,
lifeSpan = Infinity
) {
const [storedValue, setStoredValue] = useState(() => {
@nihlton
nihlton / getContrastColor.js
Created July 23, 2020 23:18
get the color (black or white) with the best contrast for the given color.
export const getContrastColor = function (bgColor) {
var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor
var r = parseInt(color.substring(0, 2), 16) // hexToR
var g = parseInt(color.substring(2, 4), 16) // hexToG
var b = parseInt(color.substring(4, 6), 16) // hexToB
var uiColors = [r / 255, g / 255, b / 255]
var c = uiColors.map((col) => {
if (col <= 0.03928) { return col / 12.92 }
return Math.pow((col + 0.055) / 1.055, 2.4)
@nihlton
nihlton / pruneClosePoints.js
Created May 20, 2020 19:57
Simplify SVG path points
export const pruneClosePoints = function (points, factor = .7) {
const culled = new Set()
const pointsWithD = points.map((point, i) => {
const nPoint = points[i + 1] || points[i]
const xDist = points[i][0] - nPoint[0]
const yDist = points[i][1] - nPoint[1]
return [...point, Math.hypot( xDist, yDist ), i]
}).sort((a, b) => b[2] - a[2])
@nihlton
nihlton / LazyImage.js
Last active December 28, 2020 10:26
Minimal Lazy Loading Image Component
import React, { useEffect, useRef, useState } from 'react'
import './LazyImage.scss'
const LazyImage = (props) => {
const [ isLoaded, setIsLoaded ] = useState(false)
const [ isVisible, setIsVisible ] = useState(false)
const { src, alt, width, height, className } = props
const placeHolderStyle = {paddingBottom: `${(height / width) * 100}%`}
const imageRef = useRef()
@nihlton
nihlton / images.py
Last active December 28, 2020 10:26
Python: Serve Images + thumbnails list as JSON. Generate missing thumbnails on the fly.
#!/usr/bin/python
from urlparse import urlparse, parse_qs
from PIL import Image
import os
import json
print "Content-Type: application/json"
print ""
@nihlton
nihlton / persisted-timeboxed-redux-store.js
Last active July 2, 2020 13:50
Persist Redux in localStorage, with an expiration schedule for each store key.
import { getInitialState, syncLocalStorageWithRedux } from './util-localStorage'
const reduxStorageKey = 'my-application:'
const ONE_SECOND = 1000
const ONE_MINUTE = ONE_SECOND * 60
const ONE_HOUR = ONE_MINUTE * 60
const ONE_DAY = ONE_HOUR * 24
const ONE_YEAR = ONE_DAY * 365
// create a white list. key is the redux store key, and lifeSpan is