Emily Kauffman kauffmanes

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:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.glint {
	background: radial-gradient(
	transparent 40%,

	<form action="doSomething">

	<label for="birdColor">Bird Color</label>
	<input type="text" id="birdColor" name="birdColor">

	<label for="birdSize">Bird Size</label>
	<input type="text" id="birdSize" name="birdSize">

	<label for="eggColor">Egg Color</label>
	<input type="text" id="eggColor" name="eggColor">

	var app = angular.module('app', []);

	app.controller('FormController', ['$scope', function ($scope) {

	$scope.questions = [];

	//Again, can be fired on a button click, on page load, etc.
	$scope.getQuestions = function (type) {

	var type = type ? type : 'default'; //some kind of validation can go here

	<div data-ng-controller="FormController">

	<!-- click a button to see a form -->
	<button data-ng-click="getQuestions('fish')">New Fish Record</button>
	<button data-ng-click="getQuestions('bird')">New Bird Record</button>

	<form novalidate>

	<p data-ng-repeat="item in questions">
	<label for="">{{ item.label }}</label>

	<p data-ng-repeat="item in questions">
	<label for="">{{ item.label }}</label>
	<input type={{ item.type }} data-ng-model="formData[item.id]">
	</p>

	$scope.submit = function () {

	//Validation/parsing of input could go here

	//Make service call
	$http({
	method: 'POST',
	url: '/forms',
	data: $scope.formData
	}).then(function (res) {

	<!DOCTYPE html>
	<html data-ng-app="app">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.donut-chart {
	font-family: Calibri, sans-serif;
	}