Skip to content

Instantly share code, notes, and snippets.

View tobiasahlin's full-sized avatar
🐙
🐱

Tobias Ahlin tobiasahlin

🐙
🐱
2.5k followers · 19 following
View GitHub Profile
@eupston
eupston / .html
Created May 9, 2023 15:09
morphing particle effect
<!DOCTYPE html>
<html>
<head>
<title>Three.js Morph</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
@andymatuschak
andymatuschak / States-v3.md
Last active April 12, 2024 16:06
A composable pattern for pure state machines with effects (draft v3)

A composable pattern for pure state machines with effects

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,

@jede
jede / preload.js
Created February 26, 2015 16:27
Preload images in a semi fancy way
$( 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' );
}
@ZER0
ZER0 / gist:5267608
Last active April 26, 2023 17:26
Find all the CSS rules applied to a specific element; and check if a CSS property for a specific element is defined in the stylesheet – not inline style. Notice that is not like `getComputedStyle`, that returns the calculated properties for a specific element.
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);
};
@dergachev
dergachev / GIF-Screencast-OSX.md
Last active April 19, 2024 11:00
OS X Screencast to animated GIF

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.

Screencapture GIF

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

@cbess
cbess / gist:1393058
Created November 25, 2011 08:36
Set NSView layer background image
// 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];
}