rixth / zappenstein

Zappenstein

This is my "artists statement" to go along with Zappenstein.

Technical notes

Broadly, the system is comprised of three things. Data sources ("models"), controllers and the slide UI ("view"). I tried to genericise as much code as I could between the three discrete data sources (Zappos, Flickr and Twitter).

The code for fetching data (and more when we run out), handling no results, etc is all abstracted away from the controllers. They only run DataSource.purchases.getItem; the rest is handled elsewhere. This helped keep the code cleaner and more readable.

The controllers make originally made extensive use of setInterval for timing the rendering of new slides. However, due to the fact that this is worse performance wise compared to setTimeout, and does not provide the ability to modify the interval, I switched to setTimeout.

The items are currently rendering using a couple helpers and string concatenation. I decided that using a full blown JS templating language like mustache or jQuery's tmpl would have been overkill.

Technologies used

Javascript frameworks

I originally used jQuery in the project, seeing as I am most familiar with it. I then stripped that out and used Zepto (a tiny, Webkit only library). However, this was missing some of jQuery's custom event management which I wanted. I also considered using native DOM methods, but as this was quick prototype, I finally settled back on jQuery 1.6.

Sinatra

Sinatra is a lightweight web server with many plugins. I chose it for this project as I needed a simple, deployable (Heroku) backend. I learnt about making rack configuration files too, which was great.

haml & scss

I used these Ruby DSLs to make my HTML and CSS. Some of the CSS generated by scss/sass could be a little cleaner, but the nesting in-file and syntax checking increased my development speed.

CSS3 3D transforms

This is probably the area which I feel I learnt most about through making Zappenstein. I tried several approaches early on, trying to achieve this effect. I was originally inspired by Safari's "Top Sites" feature. 3D transforms were touched on at a meetup I attended a few weeks back, and I had been itching to use them.

Miscellany

• LAB.js was used for loading the javascript required by the application.
• Web fonts were used. Bebas from FontSquirrel and Merriweather from the Google Font Library.
• Shotgun is awesome tool for reloading rack-based ruby apps when you change a file.
• Heroku for hosting
• I'm using a custom build of Modernizr that detects if the browser can do 3d transforms or not to provide appropriate messaging.
• John Resig's prettyDate function for tweet times

Issues encountered

Google Maps API

It only allows you to get so many static maps in a certain time period, so every so often, the app will, rather than displaying a map, display a speedometer. This speedometer indicates that the app has hit this threshold.

CSS3 3D transforms

Originally, I had wanted to have the tiles flip backward, revealing the Zappos logo, then back with new content. However, I found some weird issues when animating the -webkit-transform property. It'd show garbled tiles and sometimes they'd stick in the flipped state. It's for that reason I opted for transparency based transitions.

Safari bugs

The recent purchase slides show a static map. In Safari, when an image fully loads, if it has been 3D-transformed, it flickers white for a moment. I resolved this by implementing the slideContentReady event, which allows the slide renderer code to tell the UI that everything is loaded, and to display the slide.

Furthermore, when mousing over a 3d transformed element, mousemove events do not have a reliable layerX/layerY value. They'll randomly bounce back to other incorrect values for a tick here or there. For this reason, I moved to calculating the them manually, based off the clientX/Y values, and the offset of the stage.

It can be very difficult to click links that have been transformed.

Zappos API

I was counting on using the Statistics/topStyles method in the API, however, I found that often it would not return any data. It appears the time window that it looks at is far too small. For this reason, I subbed in the Flickr API for photos.

I also found that the recent purchases method would often have several results with the same zip code (presumably from the same order). This made for a boring map display, so I implemented a filter that only displays a zip every 60 seconds.

Flickr API

Photos can be all shapes and sizes. This was an issue for because I need them to cleanly fit a slide shape. For that reason, I took the medium sized images from Flickr, and used CSS background images to center them in the slide. I also wish there was a random sort but it appears this is not offered. Finally, users seem incorrectly tag their photos. There are many non-Zappos items (I think) returned in a search for Zappos.

Modernizr

Chrome on Mac does not currently support CSS3 3D transforms. 90% of the time, Modernizr correctly sets the "no-csstransforms3d" class on the html element. The other 10% of times, it reports that it does support 3d transforms. This is a known issue.