Paul Irish paulirish

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) {
1 2 3 4 5 6 7 8 9 10
// relies on which has been supported everywhere modern for years.
// as Safari 6 doesn't have support for NavigationTiming, we use a timestamp for relative values
// if you want values similar to what you'd get with real, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed
// prepare base perf object
View gist:4158604

Learn JavaScript concepts with the Chrome DevTools

Authored by Peter Rybin , Chrome DevTools team

In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.


Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:

View gist:3910471
1 2 3 4 5 6 7 8 9 10
// this is the least sucky way i could think of to
// detect and deal with a cross-browser impl of the page visibility api
// forks welcome.
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
if ('hidden' in document) return 'hidden';
View gist:3098860

Open Conference Expectations

This document lays out some baseline expectations between conference speakers and conference presenters. The general goal is to maximize the value the conference provides to its attendees and community and to let speakers know what they might reasonably expect from a conference.

We believe that all speakers should reasonably expect these things, not just speakers who are known to draw large crowds, because no one is a rockstar but more people should have the chance to be one. We believe that conferences are better -- and, dare we say, more diverse -- when the people speaking are not just the people who can afford to get themselves there, either because their company paid or they foot the bill themselves. Basically, this isn't a rock show rider, it's some ideas that should help get the voices of lesser known folks heard.

These expectations should serve as a starting point for discussion between speaker and organizer. They are not a list of demands; they are a list of rea

View gist:2968928
1 2 3 4 5 6 7 8 9 10
"window.Array -> (constructor)",
"window.ArrayBuffer -> (constructor)",
"window.Attr -> (constructor)",
"window.Audio -> (constructor)",
"window.AudioProcessingEvent -> (constructor)",
"window.BeforeLoadEvent -> (constructor)",
"window.Blob -> (constructor)",
"window.CDATASection -> (constructor)",
"window.CSSCharsetRule -> (constructor)",
View gist:2926904
1 2 3 4 5 6 7 8 9 10
"// my options for SublimeLinter " : "//",
"jshint_options" : {
"boss": true,
"browser": true,
"curly": false,
"devel": true,
"eqeqeq": false,
"eqnull": true,
Something went wrong with that request. Please try again.