Dan Motzenbecker


recent works

OriDomi

Pozaic

ChainCal

HexaFlip

Maskew

TuringType

stream-snitch

ear-pipe

statmap

Commune

Express SPA Router

Monocat

×

OriDomi

Fold the DOM up like paper.

The web is flat, but with OriDomi you can fold it up. Open-source paper-folding library with animation queueing, touch support, and zero dependencies.

CoffeeScript / JavaScript, CSS3

Pozaic

Capture one second moments as animated gif mosaics.

Pozaic uses WebRTC to connect friends (or strangers) in live video compositions you can turn into animated gifs. The medium captures a single second in time across geographic gaps.

Node.js, WebRTC, WebSockets, web workers

ChainCal

The simple habit building app for iPhone.

Set daily goals and visualize your progress in an intuitive and visual way. Motivate yourself to adopt new positive habits one day at a time.

CoffeeScript / JavaScript, Apache Cordova, CSS3, Objective-C

HexaFlip

Visualize arrays as cubes.

Transform arrays of any length into cubes that can be rotated infinitely. Originally developed as the time picking interface for ChainCal, I expanded it to visualize arbitrary arrays and wrote an article detailing the process on Codrops.

CoffeeScript / JavaScript, CSS3

Maskew

Add some diagonal rhythm to your elements.

Skew the shapes of elements without distorting their contents. Maskew creates a parallelogram mask over the element and supports touch/mouse manipulation of the skew amount.

CoffeeScript, CSS3

TuringType

A naïve human typing simulation effect.

I wrote this quickly just for fun, but it can be convincing enough. Take a look at the demo link below.

CoffeeScript / JavaScript

stream-snitch

Event emitter for watching text streams with regex patterns.

stream-snitch is a tiny Node module that allows you to match streaming data patterns with regular expressions. It’s much like ... | grep, but for Node streams using native events and regular expression objects. It’s also a good introduction to the benefits of streams if you’re unconvinced or unintroduced.

Node.js

ear-pipe

Pipe audio streams to your ears.

ear-pipe is a duplex stream that allows you to pipe any streaming audio data to your ears (by default), handling any decoding automatically for most formats. You can also leverage this built-in decoding by specifying an output encoding and pipe the output stream somewhere else.

Node.js

statmap

Output recursive directory stats as JSON for visualization and analysis.

statmap’s JSON output will contain a recursive representation of the directory and all children. Each key is a file or directory name with a corresponding value containing a stats object and a children object if it is a directory. Directories also are also given a sum property which reflects the size of all children recursively, unlike the typical size property of directory’s stats object.

Node.js

Commune.js

Web workers lose their chains: Easy threads without separate function files.

Commune.js makes it easy to run computationally heavy functions in a separate thread and retrieve the results asynchronously. By delegating these functions to a separate thread, you can avoid slowing down the main thread that affects the UI. Think of it as a way to leverage the web workers API without ever having to think about the web workers API.

Using straightforward syntax, you can add web worker support to your app’s functions without the need to create separate files (as web workers typically require) and without the need to change the syntax of your functions. Best of all, everything will work without problems on browsers that do not support web workers.

CoffeeScript / JavaScript, web workers

Express SPA Router

Internally reroute non-AJAX requests to your client-side single page app router.

Let’s say you have a modern single page web application with client-side URL routing (e.g. Backbone).

Since views are rendered on the client, you’ll likely use RESTful Express routes that handle a single concern and return only JSON back to the client. The app’s only non-JSON endpoint is likely the index route (/).

So while /users might return a JSON array when hit via the client app’s AJAX call, you’ll want to handle that request differently if the user clicks a link from an external site or manually types it in the address bar. When hit in this context, this middleware internally redirects the request to the index route handler, so the same client-side app is loaded for every valid route. The URL for the end user remains the same and the client-side app uses its own router to show the user what’s been requested based on the route. This eliminates the tedium of performing this kind of conditional logic within individual route callbacks.

Node.js

Monocat

Automated asset inlining.

Monocat is a small utility ideal for deploying small, static, single-page sites where you want to minimize the number of http requests. Monocat compresses and writes the contents of external assets into the html source for an easy speed optimization.

Node.js