Skip to content

Instantly share code, notes, and snippets.

@goldhand
goldhand / render.js
Last active September 8, 2016 18:19
React render app (mount)
// Vendor
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {Provider} from 'react-redux';
import routes from './routes';
import configureStore from './store/configureStore';
import {loadState, saveReduxStore} from './store/localStorage';
@goldhand
goldhand / PageApp.js
Last active September 8, 2016 18:22
React content delivery model
import React, {Component, PropTypes} from 'react';
import connectContent from 'components/ConnectContent';
// import container components
// import ExampleApp from 'components/ExampleApp';
// map imports to strings so they can be selected with data
const sectionTypes = {
// example: ExampleApp,
@goldhand
goldhand / accrueMiddleware.js
Created July 20, 2016 14:59
Redux midddleware for accruing interest before dispatching an action
import {Map} from 'immutable';
/**
* Accrue redux middleware will only return actions that have accured enough interest
*
* change in accrued interest is calculated by interest += (next - prev)
* Math.abs(interest) >= resistance for action to recieve accrued flag
*
* To opt into this functionality add {meta: {resistance: <value>, accrue: <field>}} to the dispatched action.
@goldhand
goldhand / offset.js
Created July 13, 2016 14:42
Get the absolute offsetTop
/**
* Get the offset of an element relative to another element (body by default)
* @param {element} elem - DOM element to use
* @param {element} relativeElem - DOM element to compare against
* @returns {object} - {top, left}
*/
export default function offset(elem, relativeElem = document.body) {
const
elemRect = elem.getBoundingClientRect(),
@goldhand
goldhand / SVGPath.React.js
Created July 12, 2016 20:42
An svg <path> react component
import React, {Component, PropTypes} from 'react';
const DEFAULT_STROKE_WIDTH = 0.15;
const DEFAULT_STROKE_COLOR = '#e1e1e1';
/**
* SVGPath is an svg <path> element with utitlities
*
* @param {object[]} points - Array of Point objects - {x, y} - to plot this path
* @param {string} color - stroke color of path
@goldhand
goldhand / nthloop.less
Created July 12, 2016 17:15
Just a loop in less XD
circle {
.nthloop(8);
}
.nthloop(@counter) when (@counter > 0) {
.nthloop((@counter - 1));
&:nth-of-type(@{counter}) {
animation-delay: (@counter * .1s);
}
}
@goldhand
goldhand / LinkedList.js
Last active July 7, 2016 18:13
(Doubley) Linked List
/**
* Double Linked list
*/
export default class LinkedList {
constructor() {
this.head = null;
this.tail = null;
this.size = 0;
}
@goldhand
goldhand / rootReducer.js
Created June 30, 2016 17:40
Redux root reducer that uses webpack's require.context to create a rootReducer that dynamically imports reducers in a directory
// this file should actually be in reducers/index.js
import {combineReducers} from 'redux';
const rootReducer = combineReducers(
allReducers(require.context('.', false, /^\.\/(?!index)\w+$/))
);
export default rootReducer;
@goldhand
goldhand / spawn.js
Last active January 8, 2019 22:18
Use a generator to make async stuff look sync.
/**
* Turns generators into async demons
*
* Within the generator function, any "yield" operator becomes enhanced with async powers
* allowing them to yield promises.
*
* @example
* spawn(function *() {
* const data = yield fetch('/foo.json'); // will be resolved and assigned to "data" var
* console.log(data); // write like its sync but its acually async ;)
@goldhand
goldhand / ConnectResize.js
Created June 15, 2016 19:29
Flexbox Grid with enhancements implemented in React + Redux.
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as resizeActions from 'actions/windowMonitorActions';
import * as styleOptions from 'constants/styleOptions';
/**
* High order component for connecting components to resize events