Robbie dela Victoria tmbtech

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {

These examples are presented in an attempt to show how each coding styles attempts to or does not attempt to isolate side-effects. There are only 2 semantic elements in a barebone "Hello World" implementation:

Invocation of console.log
Declaration of HELLO_WORLD

Since every coding style can abstract away data into a parameter or variable, there is no point for us to show that. All implementations assume HELLO_WORLD is a constant that is always inlined. This way it reduces the variations we need to present. (To make an anology, if we were to implement incrementByOne, would we need to inline the number 1 or pass it in as parameter?)

CAVEAT/LIMITATION: All implementations also assume console is static. In case of OOP inheritance, Console is assumed to be extendable. In case of functional programming, console.log is asumed to be a function that can be passed around without further modification.

Declarative

What I Wish I'd Known About Equity Before Joining A Unicorn

Disclaimer: This piece is written anonymously. The names of a few particular companies are mentioned, but as common examples only.

This is a short write-up on things that I wish I'd known and considered before joining a private company (aka startup, aka unicorn in some cases). I'm not trying to make the case that you should never join a private company, but the power imbalance between founder and employee is extreme, and that potential candidates would

	class Index extends React.Component {
	componentDidMount() {
	const {branch: branches, location} = this.props;

	const component = branches.filter(branch => branch.childRoutes)
	.map(branch => branch.childRoutes.find(childRoute => childRoute.path === location.pathname))
	.reduce(element => element);

	console.log(component.foo); // LOG: bar
	}

	import React, { Component } from 'react';
	import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
	import { provide, connect } from 'react-redux';
	import thunk from 'redux-thunk';

	const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

	// ------------
	// reducers
	// ------------

	# remove all arcpatch-* branches
	# note that this will checkout all uncommited code
	# and pull latest from master
	function gridiron_clean_branches() {
	git checkout -f
	git checkout master
	git for-each-ref --format '%(refname:short)' refs/heads/arcpatch\* \| xargs git branch -D
	git pull
	}

	import React from "react";
	import ReactDom from "react-dom";

	class App extends React.Component {
	state = {
	loaded: false
	}

	onClick = () => {
	this.setState({clicked: "sure"});

	import React from "react";
	import ReactDom from "react-dom";

	class App extends React.Component {
	onClick = () => {
	this.setState({clicked: "sure"});
	}

	onLoaded = () => {
	console.log("loaded");

	import React from "react";
	import { isEqual } from "underscore";

	/**
	* HOC for diagnosing unnecessary renders and identifying faulty selectors
	*
	* Adds a logger function to a component that lists all changed props
	* Also checks if changed props are deeply equal
	*
	* Usage: Decorate the component you are investigating with renderDoctor:

	// put this at the top of your app
	const setState = Component.prototype.setState
	Component.prototype.setState = function(nextState) {
	console.group(this.constructor.name)
	console.trace()
	if (this.shouldComponentUpdate) {
	console.log('shouldComponentUpdate', (
	this.shouldComponentUpdate(this.props, nextState)
	))
	}