Before you go whining like an impulsive brat about a reliable OS X feature that you believe has been sorely ripped out of Lion, rest assure that there’s probably a preference setting for it.

In my case, my beloved Opt+arrow move-by-word key bindings were not working after I upgraded to Lion. Turns out the default keyboard shortcuts for Mission Control were conflicting with them. Go to System Preferences » Keyboard » Keyboard Shortcuts and disable or change Mission Control: Move left/right a space.

Sorry about that :P

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:

Option + Click on a link in Google Chrome to download the source of the linked page.

Looking under the hood at the Chrome dev tools and user agent styles, I came across some of the source files that power the dev tools

• chrome-devtools://devtools/DevTools.js
• chrome-devtools://devtools/devTools.css

devTools.css is worth taking a look a look at as it has the base styles for the syntax highlighting used in the dev tools. Search for /* inspectorSyntaxHighlight.css */.

If you’re interested in taking a peek, I’d point you to resources.pak located in /Applications/Google Chrome/Contents/YOUR_VERSION/Google Chrome Framework.framework/Resources/resources.pak.

Picking up on a running theme on the dropshado.ws, I gots to have my command line prompts looking fresh. Locally, I’m now using bash-it, with its killer theming engine by John Schulz to make it happen.

Just recently I realized that I can style my prompt on my remote server when I SSH. Here’s what I added to ~/.bash_profile.

PS1="\[\e[0;32m\]\u@\h \[\e[0;34m\]\w \[\e[0;30m\]# \[\e[39m\]"

Which looks like

username@server ~/path/to/dir # writing sweet commands

I like taking a peek at native DOM objects like Element and Node using the console’s dir function.

dir( Element )

Then I crack open prototype see all the base properties and methods that native constructor has.

I discovered Element.contains() this way.

I’ve been using return more to stop logic inside a function. See PPK: Returning to stop the function.

// within conditional
function doStuff() {
  var myCondition = checkCondition();
  if ( !myCondition ) {
    // do
    // lots
    // of
    // stuff
  }
}

// proceed if condition is met
function doStuff() {
  var myCondition = checkCondition();
  // don't proceed if not myCondition
  if ( !myCondition ) {
    return;
  }
  // do
  // lots
  // of
  // stuff
}

The benefit is that the subsequent code isn’t all held within the conditional, thus breaking it out of an unnecessary nest… like an newborn eagle on its first flight.

Get the version of jQuery

jQuery.fn.jquery
// >> '1.6.1'

It’s bizarre that you can get this via a jQuery method. It allows you to get it as a property on any jQuery object.

$(document).jquery
// >> '1.6.1'

Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. WebKit composites the element so that when rendering the transform, it doesn’t have to re-render sub-pixel anti-aliasing for every frame. This feature is a good thing in that vastly improves performance of transitions and transforms in WebKit.

But this affects anti-aliasing when there is no actual transform and hardware-acceleration is active on a element. i.e. banal 3D transforms like translate3d( 0, 0, 0) or scale3d( 1, 1, 1 ).

The solution is the same one for IE’s opacity bug: add a matching background to the affected background.

View fiddle: resolving anti-aliasing with hardware acceleration.

Hover over the image below to see the comparison for TUAW.

See also Webkit Hardware acceleration bleeding into subsequent elements, and how to fix it - The Official Posterous Tech Blog.

whois is a command-line utility.

whois icanhascheezburger.com

I’ve been familiar with jQuery’s data method for a while now. It’s awesome, allowing you to get and set data with a jQuery object.

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });

$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}

It’s especially useful within jQuery plugins, providing a mechanism to save the plugin’s state.

While looking over jQuery UI plugin bridge, I found they were using $.data() instead of $.fn.data. Where as $.fn.data is a method for jQuery objects like $('#elem').data('foo', 52), $.data() is a utility function that uses an element as one of its arguments.

$.data( document.body, 'foo', 52);
$.data( document.body, 'bar', { myType: 'test', count: 40 });

$.data( document.body, 'foo'); // 52
$.data( document.body ); // {foo: 52, bar: { myType: 'test', count: 40 }}

Using $.data() can yield better much performance as you don’t have to wrap an element in a jQuery object. Testing on jsPerf, my results had $.data() performing 5x faster than $.fn.data(). Within Isotope, making this change is boosting performance of sorting by 2x.