Dan
Motzenbecker


recent
works

OriDomi

Pozaic

Exif
Exodus

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

ExifExodus

Remove EXIF / geotagging data from your photos before you upload them.

ExifExodus is a small piece of open-source code that runs directly in your browser and strips EXIF / geotagging data out of your photos before you upload them.

You can run ExifExodus whenever you’re uploading photos by using its bookmarklet.

When ExifExodus encounters a JPG file, it will remove the EXIF data by copying the pixels to a new image file, similar to taking a screenshot of something.

Alternatively, you can drop your files in the dropzone on the ExifExodus site and receive versions free of EXIF data. You can then save these new files and upload them wherever you’d like.

CoffeeScript / JavaScript, 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 / JavaScript, CSS3

TuringType

A naïve human typing simulation effect.

I wrote this quickly to scratch an itch, but it can be convincing enough. Take a look at the demo link above.

CoffeeScript / JavaScript

Taxa

A tiny language inside JavaScript to enforce type signatures.

Taxa is a small metaprogramming experiment that introduces a minimal grammar for type annotations to JavaScript (and by extension, CoffeeScript).

Unlike other projects of this nature, Taxa is purely a runtime type checker rather than a static analyzer. When a Taxa-wrapped function receives or returns arguments of the wrong type, an exception is thrown.

Further unlike other type declaration projects for JavaScript, Taxa’s DSL lives purely within the syntax of the language. There is no intermediary layer and no preprocessing is required.

The name derives from the Ancient Greek τάξις (arrangement, order).

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