cuschk

THIS GIST WAS MOVED TO TERMSTANDARD/COLORS REPOSITORY.

PLEASE ASK YOUR QUESTIONS OR ADD ANY SUGGESTIONS AS A REPOSITORY ISSUES OR PULL REQUESTS INSTEAD!

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

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

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)

OSX Tools

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

	<?php

	/*
	When updating from Contao 2 to Contao 3, you must not rename the tl_files folder to files!
	If you want to rename the folder, you have to take the following steps:

	· Complete the version 3 update in the install tool
	· Then rename the upload folder in the back end settings to files
	· Last run the modified version of Tristan's script

	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

	/**
	* 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):

	# 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)

	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);