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:
| var flattenObject = function(ob) { | |
| var toReturn = {}; | |
| for (var i in ob) { | |
| if (!ob.hasOwnProperty(i)) continue; | |
| if ((typeof ob[i]) == 'object') { | |
| var flatObject = flattenObject(ob[i]); | |
| for (var x in flatObject) { | |
| if (!flatObject.hasOwnProperty(x)) continue; |
| <!DOCTYPE html> | |
| <head> | |
| <title>Stay Standalone</title> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <script src="stay_standalone.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <ul> | |
| <li><a href="http://google.com/">Remote Link (Google)</a></li> |
| /*! | |
| * isVis - v0.5.5 Aug 2011 - Page Visibility API Polyfill | |
| * Copyright (c) 2011 Addy Osmani | |
| * Dual licensed under the MIT and GPL licenses. | |
| */ | |
| (function () { | |
| window.visibly = { | |
| b: null, | |
| q: document, |
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
| // MIT license | |
| (function() { | |
| var lastTime = 0; | |
| var vendors = ['ms', 'moz', 'webkit', 'o']; |
| (function addXhrProgressEvent($) { | |
| var originalXhr = $.ajaxSettings.xhr; | |
| $.ajaxSetup({ | |
| xhr: function() { | |
| var req = originalXhr(), that = this; | |
| if (req) { | |
| if (typeof req.addEventListener == "function" && that.progress !== undefined) { | |
| req.addEventListener("progress", function(evt) { | |
| that.progress(evt); | |
| }, false); |
Built with D3js and Cartogram.js. Province and territory data obtained from the Government of Canada's Open Data Portal.
| if (window.navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function (position) { | |
| var lat = position.coords.latitude, | |
| lng = position.coords.longitude, | |
| latlng = new google.maps.LatLng(lat, lng), | |
| geocoder = new google.maps.Geocoder(); | |
| geocoder.geocode({'latLng': latlng}, function(results, status) { | |
| if (status == google.maps.GeocoderStatus.OK) { | |
| if (results[1]) { | |
| for (var i = 0; i < results.length; i++) { |
(by @andrestaltz)
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.
| /** | |
| * The width and height to which our graphic assets are designed for | |
| * Keep in mind retina resolutions and remember to provide 2xWidth 2xHeight assets for them | |
| */ | |
| var targetWidth = 1024; | |
| var targetHeight = 768; | |
| /** | |
| * The main (root) container on the stage | |
| * You should always have a master container on your stage |