Colin Brooks colinrobertbrooks

tmux shortcuts & cheatsheet

start new:

tmux

start new with session name:

tmux new -s myname

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

Sublime Text 3 - Useful Shortcuts (Windows)

General

Shortcut	Description
`Ctrl`+`Shift`+`P`	command prompt
`Ctrl`+`Alt`+`P`	switch project
`Ctrl`+`P`	go to file
`Ctrl`+`G`	go to line

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

Adding Sinon to WebPack

Open your project (if you're using WebPack, obviously)
npm install sinon --save-dev
You should now have Sinon in your node modules and listed in your package.json file
In your tests, require Sinon: var sinon = require('sinon');

	var express = require('express');
	var cookieParser = require('cookie-parser');
	var session = require('express-session');
	var flash = require('express-flash');
	var handlebars = require('express-handlebars')

	var app = express();
	var sessionStore = new session.MemoryStore;

	// View Engines

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	##
	# add this to your provision.sh
	#
	# [!] run as 'vagrant' like this:
	# su vagrant -c "source ${PROVISION_DIR}/provision-node.sh"
	#
	# [!] please keep the echo messages. those actions could take some more time without any output, so let the user know.
	##

	# install latest nvm