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:
// Sets the view's background to the given image | |
// prior to call, you may need to execute: `view.wantsLayer = YES` | |
void SetBackgroundImage(NSView *view, NSString *imageName) | |
{ | |
view.layer.contents = (id)[NSImage imageNamed:imageName]; | |
} |
var proto = Element.prototype; | |
var slice = Function.call.bind(Array.prototype.slice); | |
var matches = Function.call.bind(proto.matchesSelector || | |
proto.mozMatchesSelector || proto.webkitMatchesSelector || | |
proto.msMatchesSelector || proto.oMatchesSelector); | |
// Returns true if a DOM Element matches a cssRule | |
var elementMatchCSSRule = function(element, cssRule) { | |
return matches(element, cssRule.selectorText); | |
}; |
$( function () { | |
$( '[data-image]' ).each( function ( i, elem ) { | |
var $elem = $( elem ), | |
url = $elem.attr( 'data-image' ); | |
if ( url == null || url.length <= 0 ) { return; } | |
if ( !Modernizr.svg ) { | |
url = url.replace( /\.svg$/, '.png' ); | |
} |
State machines are everywhere in interactive systems, but they're rarely defined clearly and explicitly. Given some big blob of code including implicit state machines, which transitions are possible and under what conditions? What effects take place on what transitions?
There are existing design patterns for state machines, but all the patterns I've seen complect side effects with the structure of the state machine itself. Instances of these patterns are difficult to test without mocking, and they end up with more dependencies. Worse, the classic patterns compose poorly: hierarchical state machines are typically not straightforward extensions. The functional programming world has solutions, but they don't transpose neatly enough to be broadly usable in mainstream languages.
Here I present a composable pattern for pure state machiness with effects,
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Three.js Morph</title> | |
<style> | |
body { margin: 0; } | |
canvas { display: block; } | |
</style> | |
</head> | |
<body> |