cuschk

OSX Tools

Homebrew
- Cask
iTerm2
- set as default terminal, RCDefaultApp via instructions
- my bash devtools
git
- hub
nvm

Tabs and Windows

Function	Shortcut
New Tab	`⌘` + `T`
Close Tab or Window	`⌘` + `W` (same as many mac apps)
Go to Tab	`⌘` + `Number Key` (ie: `⌘2` is 2nd tab)
Go to Split Pane by Direction	`⌘` + `Option` + `Arrow Key`
Cycle iTerm Windows	`⌘` + `backtick` (true of all mac apps and works with desktops/mission control)

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

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

	cask_args appdir: "/Applications"
	tap "homebrew/bundle"
	tap "homebrew/cask"
	tap "homebrew/cask-drivers"
	tap "homebrew/cask-fonts"
	tap "homebrew/core"
	brew "fish"
	brew "git"
	brew "httpie"
	brew "github/gh/gh"

	function logColor(color, args) {
	console.log(`%c ${args.join(' ')}`, `color: ${color}`);
	}

	const log = {
	aliceblue: (...args) => { logColor('aliceblue', args)},
	antiquewhite: (...args) => { logColor('antiquewhite', args)},
	aqua: (...args) => { logColor('aqua', args)},
	aquamarine: (...args) => { logColor('aquamarine', args)},
	azure: (...args) => { logColor('azure', args)},

	console.log(1);
	(_ => console.log(2))();
	eval('console.log(3);');
	console.log.call(null, 4);
	console.log.apply(null, [5]);
	new Function('console.log(6)')();
	Reflect.apply(console.log, null, [7])
	Reflect.construct(function(){console.log(8)}, []);
	Function.prototype.apply.call(console.log, null, [9]);
	Function.prototype.call.call(console.log, null, 10);

	# Pass the env-vars to MYCOMMAND
	eval $(egrep -v '^#' .env \| xargs) MYCOMMAND
	# … or ...
	# Export the vars in .env into your shell:
	export $(egrep -v '^#' .env \| xargs)

	/**
	* Using Operator Mono in Atom
	*
	* 1. Open up Atom Preferences.
	* 2. Click the “Open Config Folder” button.
	* 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
	* 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
	* 5. Tweak away.
	*
	* Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):

	KEYBINDINGS
	byobu keybindings can be user defined in /usr/share/byobu/keybindings/ (or within .screenrc if byobu-export was used). The common key bindings
	are:

	F2 - Create a new window

	F3 - Move to previous window

	F4 - Move to next window