I wanted to play with the new CSS transition stuff, to see what all the fuss was about. At the same time I wanted to make something useful, so I thought why not make a little site for my friend Dave, who is one bad ass photographer. I have a rough demo up and it works pretty well. It only works with Safari 4, but the good news is that it also works with Mobile Safari.

It’s really nice that the animation is defined in the CSS and you don’t need any JavaScript to move objects. It was also really simple to implement, most of the work was done in about an hour. The interaction is simple. Click a picture to zoom into it, then a full version loads, click on it and you zoom back out. You can also move the thumbnails around.

I had to violate some ui for the iPad because of the way mobile safari handles events, or more precisely, doesn’t handle events. I wanted to maintain the native gestures of but weirdly enough safari does fire any events when double tapping to zoom in, as stated in their documentation. Why?

I decided implementing my own photo uploading/managing would be too much of a pain in the ass, after all Dave isn’t paying me for this. Yes, this may come as a shock, but I’m not a total asshole. So I decided to use Flickr as a CMS. Since the API allows for a JavaScript callback, there’s no backend proxy work required.

Anyway, here’s a little taste of how it works. You need Safari 4 or iPhone OS 3. Currently, there are three different ways to load photos.

1) Load from a JSON file

Loading a JSON file, don’t pass any query terms: http://mud.mitplw.com/PhotoViewer/

The actual JSON file is: http://mud.mitplw.com/PhotoViewer/index.json

2) Load Photosets from a Flickr user

Pass a photoset=flickr_user_id query, like this (using Luis’s Flickr account)

http://mud.mitplw.com/PhotoViewer/?photoset=75903973@N00

HINT: you can look up user_ids with idGettr.

3) Load Photos from Flickr using tag search

Pass any comma delimited tags like ?drunk,punks

http://mud.mitplw.com/PhotoViewer/?drunk,punks

Finally, I’ll post the source on github when I finally finish Dave’s site. Also, maybe in the near future I’ll add some local storage and HTML5 video support…

The Architecture

An overview of the architecture is shown below:

A POST request from the browser is sent to a Rails Metal URL periodically (as opposed to responding to keystroke events). The Rails Metal method verifies sessions, and request parameters and forwards them over to the MudTyper Server. The MudTyper Server then sends a request to MudTyper Renderer to create either a file that is saved to disk or a base64 encoded string depending on the user’s browser. The browser receives the image as a response and includes the rendered image into the page.

Scalability

With this architecture, it is possible to scale for increased load. We can run multiple instances of MudTyper Server+Renderer, and use mod_proxy to get Apache to handle the load balancing.

Font Rendering

The new Renderer adds a lot of new support, including support for OpenType fonts with full kerning support, as well as many OTF features. For instance, we can now render Galaxie Cassiopeia’s contextual alternates, adding smooth transitions between letters.

Time Machine apparently uses your MAC address to keep track of which machine your backup corresponds to. So of course if you get your logic board replaced, you’ll have a new MAC address and Time Machine will think this is a different computer.

I did some google searching, but this method did not work for me. I had to combine this other method to make it all work. Anyway, here’s the list of what you have to do. First, make sure you go into System Preferences and turn off Time Machine. Then fire up the Terminal and run:


$ cd /Volumes/NameOfTMDrive/Backups.backupdb
$ xattr -p com.apple.backupd.BackupMachineAddress NameOfMac


This should spit out your old MAC address. In the backup drive, you will have a hidden file with the values of this MAC address. Now, look up your new MAC address with:


$ ifconfig en0


Write the new MAC address down. What you will now do is rename the hidden file from the old MAC address to the new one, then tell backupd your new MAC address. In this example, your old MAC address is aa:bb:cc:dd:ee:ff and new address is 00:11:22:33:44:55, and your computer name is My Computer. We also turn off ACL and turn it back on after we make the changes.


$ sudo fsaclctl -p /Volumes/NameOfTMDrive -d
$ cd /Volumes/NameOfTMDrive
$ sudo mv .aabbccddeeff .001122334455
$ cd /Volumes/NameOfTMDrive/Backups.backupdb
$ sudo xattr -w com.apple.backupd.BackupMachineAddress 00:11:22:33:44:55 "My Computer"
$ sudo fsaclctl -p /Volumes/NameOfTMDrive -e


Now, you just need to remove your drive, then remount it. Go into Time Machine, and turn your backup back on. This will start indexing your drive again and for a long while, it will say “preparing…” It took my computer about 20mins to complete the initial backup. If it begins creating a new backup with “My Computer 2″ you did something wrong because it’s starting a new backup.

Apple should probably make this easier since I’m sure a lot of people are going to have their nvidia cards replaced.