View bling.js
1 2 3 4 5 6 7 8 9
/* bling.js */
window.$ = document.querySelectorAll.bind(document)
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn)
NodeList.prototype.__proto__ = Array.prototype

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

View debugger.js
1 2 3 4 5 6 7 8 9 10
var Chrome = require('chrome-remote-interface')
chooseTab: function(tabs) {
var idx = 0
tabs.forEach(function(tab, i) {
if (tab.url === 'http://localhost:9966/')
idx = i
return idx

Keybase proof

I hereby claim:

  • I am paulirish on github.
  • I am paulirish ( on keybase.
  • I have a public key whose fingerprint is 41BE F531 2AD3 FC63 D87B 9598 49E4 5F08 1ABE E562

To claim this, I am signing this object:

1 2 3 4 5 6 7 8 9 10
# Read the !
# Configuration
View how to screencapture and make animated gifs or

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

View gist:6732048

Con$ole Bling

Before I get into this, I should point out that if you have jQuery on your page, when you type $ in your console it's indeed jQuery, otherwise, it's defined by your developer tools.


A bit ago, someone on SO asked where does $$() come from? Alex Russell called this "the bling-bling function", and it's part of the Command Line API and will return an array of elements to match a CSS selector. Why the double $$? Well, the single $ was already taken: the pioneer of developer tools, Firebug, assigned the $() to getElementById and so it has remained.

But.. let's be real though, ID's? Who is using ID's anymore? Using $ and $$ I often tho

View gist:5842309

I wrote this in early January 2012, but never finished it. The research and thinking in this area led to a lot of the design of Yeoman and talks like "Javascript Development Workflow of 2013", "Web Application Development Workflow" and "App development stack for JS developers" (surpisingly little overlap in those talks, btw).

Now it's June 2013 and the state of web app tooling has matured quite a bit. But here's a snapshot of the story from 18 months ago, even if a little ugly and incomplete. :p

In the beginning…

  • Intro to tooling
View gist:5558557

A timeline of the last four years of detecting good old window.localStorage.

Jan Lenhart, bless his heart contributed the first patch for support:

October 2009: 5059daa

View gist:5537058
1 2 3 4 5 6 7 8 9 10
// starting with current element, look up the DOM ancestor tree to see if anything matches the given selector
// returns element if found
// returns false if not found
function closest(elem, selector) {
var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;
while (elem) {
Something went wrong with that request. Please try again.