I received an e-mail Yesterday from Plaxo:

This was a fun project that allows you to tell this year’s fortune for your friends. When you combine it with the new holiday borders you’ll have a pretty cool card!

It’s completely free so try it out.

[More about how the page was made after the jump.]

How the Fortune page was built

At work, a lot of people have been telling me how cool the site is. What do you think?

The funny thing is I am the least responsible team member for this project. All the hard work was done by the product manager, Hong, the graphic design team: Michael, Tiffany, and Martin, and the Wendy’s QA team which found a zillion Internet Exploder bugs (of course) which I killed on the following Wednesday. Literally my creative input amounted to Michael asking me things like “Can you do make the cards slide down in Ajax?” and me saying, “I don’t know. Just tell me what you want it to do when you give me the assets and I’ll find some way of making it work.”

I came in over the weekend before Christmas and started coding it up. That’s all I did. Everything else was them.

You may be wondering how I got various parts working. The answer was, I just hacked it together from the Yahoo UI Animation library. For instance, the card flip are simply just a visual effect of shrinking the horizontal dimension of the card while sliding it to the right at half the shrink rate; I then just change the card image and reverse the process. “Being clever” meant just remembering to update the z-index after the card flip to place it in front of the other cards and adding the fade functionality when the cards are sliding (in Firefox and Safari, not Exploder 7 which has a broken routine.)

Deal a new hand for more Ajaxian fun. 😉

Learning from this site

Just two years ago this would have taken me weeks. The big thing is excellent libraries now empower me to write whatever a designer dreams up in a single makeup day. That Saturday actually began with some time at the driving range and coffee with my friend, Dave, before saying, “You know I should probably get in to work and write that new year’s page.” That’s how easy it was! (By the way, Dave just had his first child so send him, Rebecca, and Ethan a congratulations fortune card! Look at the URL to see some other undocumented eCard site features.)

Lessons learned: being a team member. As an engineer my job was simply to stay out of the way of the graphic and product designers. Before Ajax, you were always telling them what to do. Now we can finally let them think outside the box. (It’s also more fun for me to write as an engineer to figure out how you can hack together what crazy things they think up.)

Lessons learned: Ajax development process. I no longer want cut Photoshop comps or extensive wireframes. These are secondary documentation that now gets in the way of producing a finished Ajaxified web page.

Instead I just recommended how I’d like each asset and how those assets would stack graphically (for instance, make a full background checkerboard as a GIF but a dropshadowed PNG card, or a single long GIF/PNG pair for the button which I’d clip to fit and inject with whatever text I’d need to make it i18n ready.). Assets are more logical than before. The entire graphic design handoff consisted of a printed mockup of how it would look with Mike’s handwritten positions of the elements on the page, and a link to the fileshare with all the assets.

The product design handoff consisted of a story of must haves and “nice to haves” of the working page. My return handoff was showing Hong the Javascript file and directory structure that allowed him to add more fortunes as they came in. (Yeah, that’s right. All I did was bug fixes and feature requests. All content changes are managed by a capable product design manager.)

Bugzilla was still the best way to track all the bug fixes and the last minute feature requests.

Lessons learned: Being an engineer. Don’t over-architect. Fill the requirements first instead of changing them. Choose the right framework for the level of the problem: I used YUI instead of Dojo Toolkit. If you want to have fun, just do the entire “nice to have”’s and blow everyone away with the simplicity of an actual working product when they come to work on Monday.

I did get to use a fun approach of late-binding prototyped functionality and properties directly to the the HTML entity. But it was so simple, I explained all the pieces to other engineers in passing. Since content is managed by product design and graphics are layed out logically, I could leave the company and the whole page can be maintained and improved forever. 🙂

How I’ll be using the fortune site

I’ve already started sending some fortunes to my friends and I’ll be doing that as the mood strikes for the rest of you throughout the year. One subtle feature Hong got me to add is that you can click on the fortune you got sent to jump to the page to send one to your friends.

Check it out!