Flavio Corpa kutyel

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:

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Python syntax here : 2.7 - online REPL

Javascript ES6 via Babel transpilation - online REPL

import math

	/**
	* Copyright 2012 Akseli Palén.
	* Created 2012-07-15.
	* Licensed under the MIT license.
	*
	* <license>
	* Permission is hereby granted, free of charge, to any person obtaining
	* a copy of this software and associated documentation files
	* (the "Software"), to deal in the Software without restriction,
	* including without limitation the rights to use, copy, modify, merge,

	// Original method
	var object = {
	method: function (x, y) {
	return x+y;
	}
	}

	// Add operations before or after!
	object.method = (function (original) {
	return function (x, y) {

	export function debounce (fn, wait = 1) {
	let timeout
	return function (...args) {
	clearTimeout(timeout)
	timeout = setTimeout(() => fn.call(this, ...args), wait)
	}
	}

	// [B](f: (A) ⇒ [B]): [B] ; Although the types in the arrays aren't strict (:
	Array.prototype.flatMap = function(lambda) {
	return Array.prototype.concat.apply([], this.map(lambda));
	};

	/**
	* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
	*
	* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
	* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
	* the height of element `.foo` —which is a full width and height cover image.
	*
	* iOS Resolution Quick Reference: http://www.iosres.com/
	*/

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };