webapp

in response to air's comment, here's a video version (select the HD version if your screen is big enough!) of the penmachine barcode which hopefully is more fun and more self-explanatory:

If you can't play the above YouTube video e.g. perhaps because your platform doesn't support flash, try the original quicktime version of the penmachine dodging buses barcode video

What the video displays

Boring tech stuff:

1. In the middle, 4616 of derek's photos (75x75 pixel thumbnails of all photos >= 720 pixels high from flickr) are displayed
2. while at the bottom their 1 pixel wide by 720 pixel high "barcode slice" is displayed.
3. Finally at the top, a red dot shows where the latest 1 pixel slice is being displayed.

 All three lines wrap-around after 900 pixels.

Cool People in the video:

• miller family-o-sphere
• vancouver tech-o-sphere (if you are in Vancouver and you are in tech, you probably are in the video!)
• gnomedex-o-sphere (chris, ponzi, etc)
• northernvoice-o-sphere

Their is also a webapp version but due the network not being infinitely fast and zero latency it falls behind and out of sync

Here's the webapp version: http://dl.dropbox.com/u/361757/pm-bc-video/html5-barcode/drawbarcode.html

It's a pity zero latency and infinite bandwidth networks don't exist :-)

In order to create the video, I ran the webapp on my localhost to eliminate bandwith and latency problems!

Colophon:

photos by derek k miller:
http://www.flickr.com/photos/penmachine
music "dodging buses by derek k miller:
http://www.penmachine.com/podcast/2009/06/dodging-buses.html
4616 barcode images of derek's flickr photos generated by:
https://github.com/rtanglao/barcode
html5 web app code to generate the video :
https://github.com/rtanglao/html5-barcode/blob/master/drawbarcode.html

video made using: Snapz Pro X from ambrosia software

Known Bugs:

(tested on Mac OS X Safari,  Chrome 12 and Firefox Aurora and Firefox Mobile on Nexus S)

1. the white space on the right side of the video
2. The red dot should skip by 75pixels instead of 1pixel or perhaps we need a separate indicator pointing from the slice to the 75x75 thumbnail
3. The red dot should be erased when it wraps around

Lessons Learned

I need to work more with cool music from people like Derek. Music + code indeed music + anything is fantastic

ajaxWrite is u*ly but it is faster and appears to work as well as Writely. I must be tired but I can't break it using the nested lists and the Roland and Troy test. Troy, I know you can break this!

From www.ajaxwrite.com.:

QUOTE

The look, feel, and functionality of Microsoft Word, in a completely web-based AJAX platform. Try ajaxWrite today, and experience first-hand how AJAX applications are changing the way the web works, and redefining the software industry.

UNQUOTE

Just had a great time collaboratively editing over the internet a document using Writely. And it was great until we started using nested ordered lists. Of why oh why can't we have WYSIWYG editors in 2005 that can cope with nested lists properly without b*rking the HTML? Guess we really need a robust collaborative Web Outliner (I know Marc et al are working on it!) Please can I have it yesterday?

From Writely - The Web Word Processor FAQ's.:

QUOTE

Writely allows you to edit documents online with whomever you choose, and then publish and blog them online.

What exactly can I do with it? You can:

• Upload Word documents, HTML or text (or create documents from scratch).
• Use our simple WSIWYG editor to format your documents, spell-check them, etc.
• Invite others to share your documents by e-mail address.
• Edit documents online with whomever you choose.
• View your documents' complete revision history and roll back to any version.
• Publish documents online to the world, or to just who you choose.
• Download documents to your desktop as Word, HTML or zip.
• Post to your documents to your blog.

UNQUOTE