Kevin Donahue nonnontrivial

Redux containers: `mapDispatchToProps`

This document details some tips and tricks for creating redux containers. Specifically, this document is looking at the mapDispatchToProps argument of the connect function from [react-redux][react-redux]. There are many ways to write the same thing in redux. This gist covers the various forms that mapDispatchToProps can take.

Minimum Viable Async with Node 6

With the release of Node 6.0.0, the surface of code that needs transpilation to use ES6 features has been reduced very dramatically.

This is what my current workflow looks like to set up a minimalistic and fast microservice using micro and async + await.

The promise

From zero to microservice with 𝚫 now

The following guide will show you how to deploy a simple microservice written in JavaScript using 𝚫 now.

It uses Open Source tools that are widely available, tested and understood:

Node.JS
NPM
Express

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	#!/bin/bash

	# This installs alacritty terminal on ubuntu (https://github.com/jwilm/alacritty)
	# You have to have rust/cargo installed for this to work

	# Install required tools
	sudo apt-get install -y cmake libfreetype6-dev libfontconfig1-dev xclip

	# Download, compile and install Alacritty
	git clone https://github.com/jwilm/alacritty

	package main

	import (
	"encoding/json"
	"fmt"
	"log"
	)

	// Event to record
	type Event struct {

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	quicksort :: (Ord a) => [a] -> [a]
	quicksort [] = []
	quicksort (x:xs) =
	let smallerSorted = quicksort (filter (<=x) xs)
	biggerSorted = quicksort (filter (>x) xs)
	in smallerSorted ++ [x] ++ biggerSorted

	import React, { PropTypes } from 'react';
	import { TransitionMotion, spring } from 'react-motion';

	/**
	* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
	*
	* Usage is simple, and really only requires two things–both of which are
	* injected into your app via react-router–pathname and children:
	*
	* <RouteTransition pathname={this.props.pathname}>

	1. Build GraphQL server using `express-graphql` package.
	2. Configure `schema.js` file.
	3. Query for data.