Skip to content

Instantly share code, notes, and snippets.

View benhorst's full-sized avatar

benhorst benhorst

  • Accolade
  • Seattle
View GitHub Profile
@benhorst
benhorst / simple-server.sh
Created April 27, 2021 18:43
Simple Mock Server (using npx and json-server)
# source: https://twitter.com/zkat__/status/878926190064668672
npx json-server https://raw.githubusercontent.com/typicode/jsonplaceholder/master/data.json
@benhorst
benhorst / useLocalStorage.js
Last active May 24, 2020 02:17
simple localstorage sync script with comments and notes
import { useEffect, useState } from "react";
// a quick example of "enhancing" the localstorage sync
// in order to use it like a specialized store.
// you're obviously going to get worse perf than a regular React.createContext, but you get some benefits.
const validDetails = ["name", "favColor"];
export const usePlayerDetail = (key) => {
// check for valid inputs, ensure we're only using keys we care about.
// potential migration concerns
if (!validDetails.includes(key)) {
// this could definitely be moved out to a helper/util.
// I'd consider this a better and less fallible approach to our previous ideas of using {{token}}.
const defaultValue = '';
// see MDN reference on TaggedTemplates for how the strings&keys work.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
const urlTemplate = (strings, ...keys) =>
// returns a function that accepts a property bag (presumably to fill in the tokens)
(props) =>
// start with the first string, then map each tokenized Key to a tuple of: `Properties[Key], NextString`
@benhorst
benhorst / KeyStoreContext.js
Last active May 24, 2020 02:15
Simple KeyStore React Context (and provider)
import { createContext, useReducer } from 'react';
const reducer = (initialValue) => (state, { type, key, value }) => {
switch (type) {
case 'SET_KEY':
return { ...state, [key]: value };
case 'CLEAR':
return initialValue;
default:
return state;
@benhorst
benhorst / sample-css-switch.html
Created September 20, 2019 17:27
Pure CSS Switches
<style>
.switch {
line-height: 1.5;
font-weight: normal;
font-family: Roboto,Helvetica,Arial,sans-serif;
-webkit-box-direction: normal;
list-style: none;
list-style-type: none;
font-size: .8rem;
{
// react & redux snippets for vscode
"react_component": {
"prefix": "comp",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"",
"const ${1:ComponentName} = ({}) => (",
"\t<div>",
@benhorst
benhorst / pre-push: check for 'only' mistakes
Created December 13, 2017 19:53
We use Mocha for 'describe' and 'it' blocks. Sometimes we use 'describe.only' locally, but we want to be sure not to push it! (also a good pre-commit hook)
#!/bin/sh
# README: remember to chmod +x this file, save the contents to `my-project/.git/hooks/pre-push`
echo "HOOK PRE-PUSH: Checking for describe.only in test files..."
count=$(grep describe.only src/**/*.test.js | wc -l)
if [ "$count" -eq 0 ]
then
@benhorst
benhorst / gist:435d2739e075487a921b2d82ef17f82c
Last active June 30, 2017 21:56
A React boilerplate gist for Atom
'.source.js*':
'react boilerplate':
'prefix': 'rbp'
'body': """
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import './${1:MyComponent}.less';
const ${1:MyComponent} = ({$3}) => (
@benhorst
benhorst / pre-push
Last active September 15, 2016 16:22
#!/bin/bash
master="refs/heads/master"
read local_ref local_sha remote_ref remote_sha
echo $remote_ref
if [ "$remote_ref" = master ]
then
echo "attempting to push master branch, running tests..."
npm run test