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:
| class AlertMyFriends | |
| class AlertMyFriends::Show | |
| constructor: -> | |
| alert "Hello Friends" | |
| amf = new AlertMyFriends | |
| al = new amf.Show() |
| ul | |
| { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } |
| // ************************************************************** | |
| // password validation | |
| // ************************************************************** | |
| function checkPassword(pass) { | |
| var numbers = pass.match(/\d+/g); | |
| var uppers = pass.match(/[A-Z]/); | |
| var lowers = pass.match(/[a-z]/); | |
| var special = pass.match(/[!@#$%\^&*\+]/); |
| var myCanvasView = new View({ | |
| x:100, y:100, | |
| width:200, height:200 | |
| }) | |
| // Add a nice background color so we see it | |
| myCanvasView.style.backgroundColor = "rgba(255,0,0,.5)" | |
| // This is the tricky bit, we create a canvas element (so we have a reference to it) and insert it into the view |
| // Get device pixel ratio | |
| function getDPR() { | |
| var mediaQuery; | |
| // Fix fake window.devicePixelRatio on mobile Firefox | |
| var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; | |
| if (window.devicePixelRatio !== undefined && !is_firefox) { | |
| return window.devicePixelRatio; | |
| } else if (window.matchMedia) { | |
| mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\ | |
| (min--moz-device-pixel-ratio: 1.5),\ |
| var gulp = require('gulp'); | |
| var stylus = require('gulp-stylus'); | |
| var autoprefixer = require('autoprefixer-stylus'); | |
| gulp.task('stylus', function () { | |
| return gulp.src('./styl/style.styl') | |
| .pipe(stylus({ | |
| use: [autoprefixer('iOS >= 7', 'last 1 Chrome version')] | |
| })) | |
| .pipe(gulp.dest('./css')) |
| var saveJson = function(obj) { | |
| var str = JSON.stringify(obj); | |
| var data = encode( str ); | |
| var blob = new Blob( [ data ], { | |
| type: 'application/octet-stream' | |
| }); | |
| var url = URL.createObjectURL( blob ); | |
| var link = document.createElement( 'a' ); |
| var writeTextToFile = function(text, filePath) { | |
| var t = [NSString stringWithFormat:@"%@", text], | |
| f = [NSString stringWithFormat:@"%@", filePath]; | |
| return [t writeToFile:f atomically:true encoding:NSUTF8StringEncoding error:nil]; | |
| } | |
| var readTextFromFile = function(filePath) { | |
| var fileManager = [NSFileManager defaultManager]; | |
| if([fileManager fileExistsAtPath:filePath]) { | |
| return [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil]; |