Ilya Dorman ilyador

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.

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

	# GraphQL query
	mutation batchDelete($a:ID $b:ID $c:ID $d:ID $e:ID) {
	a:deleteItem(input:{ id:$a }) { id }
	b:deleteItem(input:{ id:$b }) { id }
	c:deleteItem(input:{ id:$c }) { id }
	d:deleteItem(input:{ id:$d }) { id }
	e:deleteItem(input:{ id:$e }) { id }
	}

	# Query variables

	import React, { Component } from 'react' // v16.1.1
	import { withStyles } from 'material-ui/styles' // v1.0.0-beta.21
	import { SketchPicker } from 'react-color' // v2.13.8
	import Input, { InputLabel, InputAdornment } from 'material-ui/Input'
	import { FormControl } from 'material-ui/Form'
	import IconButton from 'material-ui/IconButton'


	const styles = theme => ({
	root: {

	/* Originally by Chris Bracco with a few cleanups and fixes http://cbracco.me/a-simple-css-tooltip/ */

	/* Base styles for the element that has a tooltip */
	[tooltip],
	.tooltip {
	position: relative;
	cursor: pointer;
	}

	/* Base styles for the entire tooltip */

	// Writing JS for everything is great and all, but I don't want to see JS
	// inline in my Jade templates. Thankfully, there are ways of abstrating it
	// into mixins!

	// Want some Rails-like helpers?
	mixin link_to(name, href)
	- href = href \|\| "#"
	a(href="#{href}")= name

	// How about a single editing point for a class name?

	<!doctype html>

	<!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ -->

	<html>
	<head>
	<title>iOS 8 web app</title>

	<!-- CONFIGURATION -->

	// early experiments with node had mysterious double requests
	// turned out these were for the stoopid favicon
	// here's how to short-circuit those requests
	// and stop seeing 404 errors in your client console

	var http = require('http');

	http.createServer(function (q, r) {

	// control for favicon