John Schulz turned me on to the code style of using var for every variable. This goes against most other code styles (see learn.jquery.com and Idiomatic JavaScript), which advise using one var, and listing following variables with commas.

// typically recommend
var firstName = 'Ryan',
    lastName = 'Gosling',
    age = 31,
    isAlive = true;

// multiple vars
var firstName = 'Ryan';
var lastName = 'Gosling';
var age = 31;
var isAlive = true;

At first I gawked at this style, but after using it for two months, I’m sticking with it. Using multiple vars have a couple benefits:

• Easier to add more variables, no need to change any trailing comma or semi-colon.
• Eliminates unnecessary git commit diffs, where a line has changed only because you changed a trailing semi-colon or comma.
• Easier to read (IMO). var is a reserved keyword, so it jumps out when syntax highlighted.
• Eliminates awkward tab spacing underneath the var. It only lines up if your tabs are 4 spaces wide.
• [Per JFSIII] Helps collaboration, other devs might miss the change of semi-colon and accidentally add a global variable.

If you’re worried about bloating your code with all the superfluous vars, that should be taken care of when using a proper minifier.

isFinite() is a top-level function (like isNaN()) that “Evaluates an argument to determine whether it is a finite number.” JFSIII pointed this out to me, debugging my code. I got lazy checking a numeric value was not undefined and had something like this:

// check if value is defined
if ( value ) {
  // do stuff..
}

The problem was that 0 would be a proper value, but it is evaluated as falsey in the above conditional.

!!0
// >> false
isFinite(0)
// >> true

// check if value is numeric
if ( isFinite(value) ) {
  // do stuff
}

isFinite() does not specifically check if the value is a number, as it returns true for booleans.

isFinite('foo')
// >> false
isFinite(function(){})
// >> false
isFinite(true)
// >> true
isFinite(false)
// >> true

Aw yeah, another command-line coloring post!

John Schulz pointed me to this git cheat sheat (via Rebecca Murphey). Right up front it provides the settings in ~/.gitconfig to color git command output like git diff, git status, and git branch. Here’s what I’m rocking:

[core]
  quotepath = false
  whitespace=fix,-indent-with-non-tab,trailing-space,cr-at-eol
[color]
  ui = true
[color "branch"]
  current = yellow black
  local = yellow
  remote = magenta
[color "diff"]
  meta = yellow bold
  frag = magenta bold
  old = red reverse
  new = green reverse
  whitespace = white reverse
[color "status"]
  added = yellow
  changed = green
  untracked = cyan reverse
  branch = magenta

Which looks like:

The Math object has a constant for the square root of 2 AND half root 2

Math.SQRT2
// 1.4142135623730951
Math.SQRT1_2
// 0.7071067811865476

via John Schulz

John Schulz continues to do my job for me.

@desandro re: [putImageData is a complete jerk] I don’t know if this has been suggested already, but use drawImage instead [http://jsfiddle.net/JFSIII/Ga5jf/]

— John Schulz

The thing pulling it all together is converting the canvas into a data URL and using that as an image:

var img = new Image();
img.src = canvas2.toDataURL('image/png');
ctx2.drawImage(img, 30, 10);

Gonna have to give him a back rub one of these days.