Josh Carr joshcarr

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Tested against the WebKit git repo by entering the repo with 1 file dirty.

git diff --quiet --ignore-submodules HEAD # Will tell if there are any uncomitted changes, staged or not.
0.6 sec

git diff-index --quiet HEAD # Only tracked
2 sec

This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
 // the rest of your code goes here.

	// firefox

	document.addEventListener( 'visibilitychange', function ( event ) {

	if ( document.hidden === false ) {

	lastTime = performance.now();

	}

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
	<key>author</key>
	<string>Jacob Rus</string>
	<key>comment</key>
	<string>Created by Jacob Rus. Based on ‘Slate’ by Wilson Miner</string>
	<key>name</key>
	<string>Cowboy - Presentation</string>

	<!DOCTYPE html>
	<title>Render Queue</title>
	<style type="text/css">
	html, body { background: #f7f7f7; height: 100%; margin: 0; padding: 0; color: #b6b6b6; font-family: Ubuntu, Helvetica, sans-serif; font-size: 15px; line-height: 1.35em;}
	a { color: #6be; text-decoration: none; }
	#canvas { position: fixed; }
	#center { position: absolute; top: 0; left: 0; margin: 40px; width: 520px; padding: 20px; background: #444; background: rgba(0,0,0,0.9); border-radius: 8px;}
	h1 { margin-top:0; padding: 3px 0; font-size: 1.4em; }
	h1, h3 { color: #f9f9f9; border-bottom: 1px solid #333; }
	h3 { font-size: 1em; }

	/* based on http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */

	.cf:before,
	.cf:after {
	content: ".";
	display: block;
	height: 0;
	overflow: hidden;
	}
	.cf:after {clear: both;}

	<!--
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

	/global module:false/

	module.exports = function(grunt) {

	var CSS_DIR = 'src/css/';
	var JS_DIR = 'src/js/';
	var BUILD_DIR = '../build/';

	// Project configuration.
	grunt.initConfig({