Henrik Joreteg HenrikJoreteg

Xchart.com co-founder. Progressive Web App developer, author, educator, and immigrant. Always betting on the Web.

HenrikJoreteg / get-array-sorter.js

Created August 17, 2018 22:07

get an array sort function

	export default (property, ascOrDesc = 'asc') => (a, b) => {
	const asc = ascOrDesc === 'asc'
	const valA = a[property]
	const valB = b[property]
	if (valA > valB) {
	return asc ? 1 : -1
	}
	if (valB > valA) {
	return asc ? -1 : 1
	}

HenrikJoreteg / omit.js

Last active August 9, 2018 15:44

lodash omit() in ~120 bytes lines instead of 2.5k

	// compare to https://bundlephobia.com/[email protected]
	export default (obj, keys = []) => {
	const copy = Object.assign({}, obj)
	keys.forEach(key => {
	delete copy[key]
	})
	return copy
	}

HenrikJoreteg / data.json

Created August 3, 2018 16:03

map with heatmap

HenrikJoreteg / extra-args-bundle.js

Created July 23, 2018 03:55

Light graphQL / redux-bundler example

	import gqlFetch from '../helpers/gql-fetch'
	import config from '../config'

	export default {
	name: 'extraArgs',
	getExtraArgs: store => {
	return {
	gqlFetch: gqlFetch({
	apiUrl: config.apiUrl,
	getToken: () => store.selectAuthToken(),

HenrikJoreteg / index.html

Created October 26, 2017 21:25

WebComponent playground boilerplate (just edit and refresh)

	<html>
	<head>
	<style>
	body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	color: gray;
	}

	badass-list-thing {

HenrikJoreteg / native-virtual-dom.js

Last active December 18, 2020 15:34

Native virtual dom?

	// what if this was something browsers just gave us?
	const { vdom } = document;

	// this is same idea as React.createElement
	// or any of the other similar appraoches
	const newVirtualDom = vdom('div', {className: 'some-class'}, [
	vdom('p', null, 'hi')
	])

	// if preferred, someone could easily use JSX and precompile it

HenrikJoreteg / run-on-main.js

Created January 26, 2017 05:34

serializable functions for running code in unknown context on the main thread

	export default (fn, ...args) => {
	if (typeof window !== 'undefined') {
	fn(...args)
	} else {
	const last = args.slice(-1)[0]
	let argString = ''
	if (typeof last !== 'undefined') {
	argString = args.reduce((accum, val, index) => {
	const type = typeof val
	const isLast = index === args.length - 1

HenrikJoreteg / rollup-plugin-add-import.js

Created January 20, 2017 22:25

Simple rollup plugin to automatically add an import line

	import { createFilter } from 'rollup-pluginutils'

	function assign (target, source) {
	Object.keys(source).forEach((key) => {
	target[key] = source[key]
	})
	return target
	}

	const DEFAULT_HEADER = 'import React from \'react\';'

HenrikJoreteg / switcheroo-blocked-case-reducer.js

Last active August 24, 2016 14:37

reducer pattern with blocks

	import { DO_THING, DO_OTHER_THING, SOMETHING_ELSE } from './actions'

	export default (state, { type, payload }) => {
	switch (type) {
	case DO_THING: {
	// by using blocks in our case statements we can create locally scoped vars
	// and returning early keeps things readable
	const scopedVariable = payload.thing
	return Object.assign({}, state, {do: scopedVariable})
	}

HenrikJoreteg / polyfill.js

Created February 16, 2016 17:31

Polyfill module with callback. Original idea credit: Ryan Florence

	export default (cb) => {
	ensurePromise(() => {
	ensureFetch(cb)
	})
	}

	const ensurePromise = (cb) => {
	if (typeof Promise === 'undefined') {
	require.ensure([], (require) => {
	require('imports?this=>window!es6-promise')