Catherine Farman cfarm

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

Open Source code doesn’t always come in big complex packages. At ProPublica we sometimes share small, simple snippets of using GitHub "Gists." These Gists range from single-byte file delimiters to an entire JavaScript framework for making stepper graphics. They rarely have documentation and don’t even always have names, but they can be super-useful. Here are some we’ve shared over the past few years:

A simple way to grab remote template elements in your Rails app (after Brian Boyer's RemoteSnippets) https://gist.github.com/1664329
A single byte gist that contains ASCII character 28, which the FEC uses as a field delimiter. https://gist.github.com/2191300
A [quine](http://en.wikipedia.org/wiki/Quine_(computing) in Ruby https://gist.github.com/523940
Check links on a page using JavaScript [https://gist.github.com/

Download SourceGear DiffMerge: http://sourcegear.com/diffmerge/index.html

Add the following to your global .gitconfig file:

 [diff]
     tool = DiffMerge
 [difftool "DiffMerge"]
     cmd = 'C:/Program Files/SourceGear/Common/DiffMerge/sgdm.exe' "$LOCAL" "$REMOTE"
 [merge]

tool = DiffMerge

MySQL

Getting started

Workflow for Git and Github

Create a new branch from master:
git checkout master or git status to confirm you're working on master
git branch my-new-branch
Check out the new branch!!!

git checkout my-new-branch

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

	/*

	SCSS Color Methods for Accessibility
	================================================================================

	Adjust given colors to ensure that those color combination provide sufficient
	contrast.

	@version 0.1
	@link http://eye48.com/go/scsscontrast

	jQuery(document).ready(function($) {
	$('#notepad').click(function(e) {
	tag = e.target.tagName;
	if ( tag != 'TEXTAREA' && tag != 'INPUT' ) {
	contents = $(this).html();
	$(this).html( '<textarea style="display:block;width:98%;height:100px;">' + contents + '</textarea><input type="submit" class="save" style="position:relative;z-index:99" />' );
	}
	});

	$('#notepad input.save').live( 'click', function() {

	var gulp = require('gulp');
	var cp = require('child_process');
	var del = require('del');
	var concat = require('gulp-concat');
	var shell = require('gulp-shell');
	var express = require('express');
	var livereload = require('gulp-livereload');
	var plumber = require('gulp-plumber');
	var notify = require('gulp-notify');
	var less = require('gulp-less');

	# custom login link
	RewriteRule ^login$ http://localhost/whitelabel/wp-login.php [NC,L]