So I’m trying (and have been thinking about this for a long time) on how to do a simple “flip” animation using Javascript.

What I’m after lately, as it relates to my Scrumble project, is the ability to click a sticky-note and have that note flip over (as it does when you’re using the Mac OS X Dashboard widgets). See my quicktime animation (from AfterEffects):

While I’ve been trying to research this, and not coming up with a good solution (beyond image/object swapping in the dom; swap the selected item for a larger div with an animated gif inside), I found World of Solitaire, a Javascript-heavy Web site that is pure beauty.

I’ve spent the last half-hour marveling over the detail, the richness of the display, an the fact that I can’t win a single game of Klondike (turn-three)!

I took a look at the Javascript for this site, and found that it uses a lot of JS libraries (Yahoo! YUI, Mochikit, etc). The animation looks to be handled by slimming the width of a card until it’s 0px wide, then un-slimming the face of the chosen card until it’s 100% of it’s normal width. Not exactly what I’m after (see the video), but it’s closer than I’ve ever seen.

So I’m working on this little test application (mostly for my own sanity; partly because I like post-it based task lists), and I thought I’d share a little video of the progress.

(Mp4 Video)

I’ll describe more about what I’m up to, the technology, and the goals in an update later this week.

Update: 2008-01-31

I’ve added some new features:

1. Tasks retain the proper color
2. Tasks can be deleted
3. Tasks can be reordered (! woot !)
4. Tasks are setup to save using Ajax (Ajax.Update and Ajax.Request via Prototype).

Screenshots and Video:

A new video (better framerate to show animation as well as new features)

I use some Mac-based desktop tools to compress videos for my iPod Touch and my Mac’s at home (Mac Mini to HDTV). I’ve found that a little compression never hurts, and some tools need to be doubled-up to get the job just right.For example, below are two screen shots of the movie Oldboy. I converted the DVD* (I own) to MP4 format using HandBrake. using the iPod Touch/iPhone preset in HandBrake, I was delivered a 944.3MB video file. Not too bad, but I think I can do better. Next, I fired up VisualHub, and also using an iPod Touch/iPhone preset, I further compressed the video, resulting in a 498.8MB video file, which if viewed on the iPod, won’t show much noticeable difference in quality.While the desktop quality can be seen in the screenshots (guess which one is half the file-size?), the iPod’s smaller native screen make the smaller-sized video ideal. I get the filesize I want, and the video plays like a dream.Here’s the spec’s for the two compressed videos:HandBrake:File Size: 940.8 MBDimensions: 480 x 208FPS: 29.97Data Rate: 1083.8 kbits /sFormat: H.264 Decoder, Millions, AAC Stereo @ 48.000 kHzVisualHub:File Size: 485.56 MBDimensions: 480 x 208FPS: 29.97Data Rate: 559.37 kbits / sFormat: Apple MPEG4 Decompressor, Millions, AAC Stereo @ 48.000 kHz* Please do not use the tools I mention above to pirate DVD’s or any other content. You are harming the music and video and entertainment industry of profits that - beyond the private planes and bullshit executives can afford - put food on the table of thousands of grunts (writers, grips, makeup artists, developers, designers, interns…) just like you and me. I’ve always been a staunch believer that personal use is fair use, but distributing pirated materials really hurts - and it’s illegal. I wouldn’t put the link to United Hollywood on my blog if I didn’t believe that people deserve a fare share. You won’t get copies of my iPod videos, so please don’t ask. Torrents count, too, people.

January is “clean your desk” month at my place of employ, and I’ve taken that task to the desktop - digital cleaning to me is just as important (if not more so) to sanity than physical file folders.

That said, I’ve setup my desktop in organized columns.*

As you can see, each column represents a different file type, with the far-right column reserved for immediate-action items and some executables I save for regular use (since this is my work computer, any applications I’ve installed are either stored in the /Applications/CE_Installed folder (permanent), or on the desktop (temporary)). This helps me keep organized as I can now easily find the files I need that are stored for short-term access on the desktop.

* Since creating the screenshot, I’ve added 2 new columns on the right: “This Week” and “To File.” The columns better organize me by focusing on the immediate vs. long-term tasks as they relate to digital files.

Along with my CE_toDo.air application, I’m getting more done, and feeling better about the organization. This system may not be perfect - hell, it might not even be the right way to go about anything - but it works for me.