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:
/* ---------------------------------------------------------- */ | |
/* */ | |
/* A media query that captures: */ | |
/* */ | |
/* - Retina iOS devices */ | |
/* - Retina Macs running Safari */ | |
/* - High DPI Windows PCs running IE 8 and above */ | |
/* - Low DPI Windows PCs running IE, zoomed in */ | |
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
/* - Android hdpi devices and above */ |
{ | |
"scripts": { | |
"eslint": "LIST=`git diff-index --name-only HEAD | grep .*\\.js | grep -v json`; if [ \"$LIST\" ]; then eslint $LIST; fi" | |
}, | |
"devDependencies": { | |
"pre-commit": "0.0.7", | |
"eslint": "~0.5.1" | |
}, | |
"pre-commit": [ | |
"eslint" |
(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.
var express = require('express'); | |
var webpack = require('webpack'); | |
var httpProxy = require('http-proxy'); | |
var proxy = new httpProxy.createProxyServer(); | |
var config = require('./webpack.config'); | |
var app = express(); | |
var compiler = webpack(config); | |
app.use(require('webpack-dev-middleware')(compiler, { |
Examples here use the default settings, see the VidStab readme on GitHub for more advanced instructions.
Here's an example video I made
brew install ffmpeg --with-libvidstab
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<button id="heybutton" onclick="clickme()">Update</button> |
[ignore] | |
.*/node_modules/immutable/.* |
import { BehaviorSubject, Observable } from 'rxjs'; | |
/** | |
* Observes the specified property and returns a stream that emits all values which are assigned to the property. When subscribing to the | |
* resulting stream it will always first emit the current value of the property, followed by all new values that are assigned to it. | |
* | |
* @param target Object containing the property. | |
* @param key Key of the property that is to be observed. | |
* @returns A stream of all values that are assigned to the specified property, starting with the current value of the property. | |
*/ |