Esa thevangelist

⛩️

~ 1 AU

Not your average designer.

thevangelist / redux-tree-connector.js

Last active July 13, 2017 19:47

Redux Tree Query HOC with Fallback Values

	import { connect } from 'react-redux';
	import _ from 'lodash';

	function reduxConnected(reduxTreeQuery, fallbackValue, propName) {
	return connect(state => ({
	[propName]: _.get(state, reduxTreeQuery, fallbackValue)
	}));
	}

	export default reduxConnected;

thevangelist / IIFE-avoidance-in-ES6.js

Created May 4, 2017 14:50

IIFE-avoidance in ES6

thevangelist / tree.sh

Last active March 15, 2017 16:09

tree 3 levels without node_modules

tree -I 'node_modules' -L 3

thevangelist / redux-in-nutshell.js

Last active March 15, 2017 12:35

Redux stores initialization, dispatchers and reducer in a nutshell

	const userReducer = (state={}, action) => {
	switch(action.type) {
	case 'CHANGE_NAME': {
	// Immutable way
	state = {...state, name: action.payload}
	break;
	}
	case "CHANGE_AGE": {
	state = {...state, age: action.payload}
	break;

thevangelist / index.html

Created January 7, 2017 13:43

Use :target for alternate layouts

	<!DOCTYPE html>
	<html lang="en" id="dark">
	<head>
	<meta charset="utf-8">
	<title>:target for alternate layouts</title>
	<style>
	#dark:target body {
	background: black;
	color: white;
	}

thevangelist / method-method.js

Created January 4, 2017 17:41

Douglas Crockford's method method

	Function.prototype.method = function (name, func) {
	this.prototype[name] = func;
	return this;
	};

	/*

	http://stackoverflow.com/questions/3966936/method-method-in-crockfords-book-javascript-the-good-parts

	*/

thevangelist / flexbox-product-grid.html

Last active December 13, 2016 15:36

Flexbox Product Grid Blog Post (2016/11)

	<div class="flex">
	<section>
	<img src="img.jpg" alt="description" />
	<h2>Product</h2>
	<p>Description</p>
	<aside>
	<ul>
	<li>Spec</li>
	<li>Spec</li>
	</ul>

thevangelist / flexbox-product-grid.css

Last active December 13, 2016 15:35

Flexbox Product Grid Blog Post (2016/11)

	.flex {
	display: flex; /* Make products flex in row direction (default) */
	flex-wrap: wrap; /* Make products overflow on new row */
	justify-content: center; /* Or space-between or space-around */
	}

	.flex > section {
	flex: 1 1 0; /* Prevent the extra space around content */
	text-align: center; /* Align text on center */
	display: flex; /* Display as flex */

thevangelist / init.css

Last active November 25, 2016 23:07

thevangelist / resize.sh

Created October 28, 2016 07:24

Resize Image With One Max Dimension and Maintain Aspect Ratio