Sunday, December 16, 2007

Creating My Strange Cat @ EmilyStrange.com--Adventures in AJAX, JSMX, and ImageCFC

My latest scripting project was My Strange Cat, a feature of EmilyStrange.com . Essentially, I was tasked with creating an app that would allow people to upload pictures of their cats, add captions directly to the image, AND add Emily the Strange artwork as "watermarks" on top of the image. I also had to implement a "5-paw" voting system, user-suggested keyword "tags", and a dynamic RSS feed that would accept url sorting variables.
By far, my biggest hurdle was conquering the image processing. I needed functions that would resize images, add text to images, and add images on top of images. Sure it would have been POSSIBLE to write it all from scratch, but luckily I found Image.cfc, a free open-source Coldfusion component. It contained all of the above functionality and more. This code probably cut my development time in half! In less than one day I was able to provide the boss with some basic image editing functionality and a taste of what the app would become.
My next hurdle was implementing the image editing functions in such a way that didn't require the end-user to reload the page every time they made a change. How is that possible? AJAX!
I'm new to AJAX, so I needed something really simple and easy to use. After some google searching, I found JSMX. JSMX is neat because the javascript is incredibly easy to understand and works well with Coldfusion. Plus I was able to easily customize it to fit my own twisted needs...
Next up was the "5-paw" voting system. This is another AJAX based idea that should have been easier than it was. I went through so many different free downloads I honestly don't even remember whose open-source AJAX code I ended up using. And after I finally got it working, lo and behold, the code I found conflicted with JSMX. Bah! In the end I kept JSMX for the image editing page but used the other AJAX script for the gallery pages. Not as elegant as I usually like things to be, but it did save time (and thus money.)
Next up, keyword "tags". By Tags, I am referring to user-generated search terms--the sort used by Flickr, YouTube, and other user-generated content sites. Again, I wanted this feature to post information to the server without refreshing the page. AJAX to the rescue! The AJAX for this was so simple that I just wrote it myself. I was also a little burnt out on searching for free code after my experience with the "voting" code. The most interesting part of this code was the "most popular tags" portion at the bottom. I had to write some tricky SQL to return the TOP 30 tags with the most hits, a sub-query to sort the results by alphabetical order, and then I had to calculate what font size to display the tags at. I did so by figuring out what percentage of the maximum number of hits each tag had, then simply multiplying that percentage by the max font size I wanted to display. To keep font from being unreasonably small, I wrote an IF tag in the loop: IF the calculated font of this tag is smaller than 8px, set it to 8px.
Next up was the dynamic RSS feed. I wanted users to be able to save RSS feeds of whatever record "views" they wanted. For example, if they wanted their RSS feed to contain only the 5 most recent posts with the keyword "stupid cat", they could have that. This is easy to do by writing your RSS with coldfusion. You may be saying, "But wait, I thought RSS feeds had to be .xml files?" Wrong! Turns out you can name them anything so long as the file contains a proper RSS feed. This is good for us because that means we can name them with a .cfm and have our server process the page with Coldfusion.
For the project the way that I implemented RSS was that by simply adding a url parameter "rss=true", the main index.cfm page will generate RSS content instead of HTML. This way I don't have to rewrite any processing code AND any future changes to processing will be automatically reflected in the RSS feed. Quick, elegant, and functional. I love it ;) Essentially, the code works like so: IF url.rss IS 'true', include the RSS template and abort further processing. Then the RSS page contains a cfoutput tag that loops over the same query as the HTML page would have.

Well anyways, hope that ramble was interesting and informative!

2 comments:

Anonymous said...

"The AJAX for this was so simple that I just wrote it myself"

Framework police - does that mean you used jQuery or some other package, or hand-coded ajax calls? jQuery kicks AJAX butt.

The app looks good and organizes a ton of stuff on the page.

Russ said...

For the "tags" part I used jQuery to do the AJAX calls. What I meant to say was that I wrote the rest of the script that handled the tag submission myself.

And you're right, jQuery is better than JSMX. I've since been using jQuery for all my javascript needs.