Paul Irish paulirish

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)

Launch quicktime player
do Screen recording

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.

History

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

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

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

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.

Closures

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:

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

	# Build arguments for the gn build
	# You can set these with `gn args out/Default`
	# ( and they're stored in src/out/Default/args.gn )
	# See "gn args out/Default --list" for available build arguments

	# component build, because people love it
	is_component_build = true

	# release build, because its faster
	is_debug = true

	// 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) {

	// @license http://opensource.org/licenses/MIT
	// copyright Paul Irish 2015


	// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
	// github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
	// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

	// if you want values similar to what you'd get with real perf.now, 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

	// 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';