Alzheimer’s Angels JS Shop
I wrote a little jquery shopping cart-ish thing for a project recently that I’m very happy with - viewable at http://alzbrant.ca/angel/ (It’s live, don’t submit test orders.)

There’s three elements to this site, all of which I’ve been working on for quite some time:

1. JsGal. I wrote a js gallery script for GrieveArt a little while back, and this is partly based on that.
   Why my own gallery script and not one of the dozens of pre-existing? I wanted something that a user could bookmark and come back to at a later time, and could be populated quickly from a standalone javascript array.

   Also, I just wanted to learn how to do it.

   The new script for the Alz Angels is an exponential step forward - the old script changed the current image by changing the “src” attribute of the image, which had the side effect of sending the image to the client every time. The new one transfers it once, then tags on a variable to the images array letting it know not to waste the user’s bandwidth.

   There’s also some cool animate{} functions in there to resize the image window as you click next, but I found those impossibly unreliable when ajaxing new images in.
   If I preloaded every image, you could resize the image div with jquery’s width() command, but if it’s not preloaded, the variable it’s going to return is often random, and almost always wrong.

   Too much uncertainty, so I nuked that effect. I see other people rolling very well with it in other scripts, so I’m going to have to do some more research the next time I do this.

2. ImageAPI. I wrote an imageAPI to ape the functions of Drupal’s imagecache (especially the ‘resize to outside borders’ feature - amazingly handy.) for Primal Roar. Ignore the terrible flash intro, that’s a) placeholder b) not mine c ) will be fixed.

   I effectively used some other chap’s resizing class and wrote a handler that a normal human could use - I can’t find the link right now, but I’ll link that when I get back to work, because dude deserves recognition. It came amazingly in handy on that site and others, and taught me a lot about managing other folk’s code and also profanity, especially where math was concerned.

   I had to extend it here for Alz Angels because, the site being js only, I couldn’t exactly call a php function. I created a standalone php file called img.php that would be called from the js, with all the paramters for the resizing in it’s $_GET string. It then displayed it with a Content-type: image/blah header - it turned out to be both more complex and more simple than I’d thought it would be.

   Working with this taught me a lot of respect for the writers of imagecache - there’s an amazing amount of complexity that the casual user will never see or recognize.

3. FormAPI. I also wrote a formAPI after I got incredibly, incredibly sick of wading through other employee’s form code, trying to figure out which uncommented nested if statement made which randomly named field necessary. I just wanted something that would handle validation and required fields for me.

   It was also important that non technical users be able to understand it, as this thing will need to be maintained by folks with no php experience.

   My first attempts at a form api (for https://ontariogreenhouse.com/hhhm2007/ ) were a miserable failure - I just didn’t understand the necessary sequence of events in making validation happen before submission. I didn’t build an array of values, I just went stone-to-stone slogging through the form, hoping things would somehow work out. I ended up having two copies of the validation/submission code on each end - and lots of other terrible rookie mistakes.

   Honestly, it’s painful to think about how long it took me to accomplish so little.

   It was only after I worked with the drupaldojo’s input forms that I really saw how drupal did it - by having an array of form values, running validation and submit on that array, modifying the array with the results, and then displaying the fields based on that. It’s obvious in retrospect, but it was a revelation to me.

   Despite that, I’ve deliberately stayed away from using arrays in the same way drupal does - simply because new php users find arrays intimidating and confusing. My systems use the format of
   
<?php $form .= input('fieldname', 'Display Name', 'type_of_text_field', is_required_fieldTRUE/FALSE, custom_callback);?>


   The people I ran it by responded better to that - it doesn’t give you anywhere as much freedom as Drupal’s does, but it’s often enough for quick casual forms.

   In many ways, my formAPI is a shallow copy of Drupal’s - it’s locked into a two column layout, it doesn’t support a heck of a lot of fields, and there are still bugs. But at the same time, I’m very proud of it - I learnt a lot about how things *should* be done by doing it wrong, getting advice from other programmers, and coming back to it. I’d love to release it to the community so people can stab it with pointy words until it’s actually a respectable solution - but it might be hard to sell my boss on that. =D

   For the curious, here’s what the code that calls the formAPI on Alz Angels looks like - you can get a sense of it’s advantages/weaknesses from that. process() calls both validation and input sanitization, so that all happens invisibly offscreen.

I apologize if this is painfully banal to any readers with more than five minutes of knowledge with php, but this stuff is still very fresh and exciting to me; I’m still no real programmer, but just last year I didn’t know a line of php, and had never worked with any coding language since GWbasic. Maybe I’m not as dumb as I always believed, or maybe PHP is pretty dang easy. =D

I don’t think I’m doing all that bad for a paint fumes-addled pencil junkie. I suppose in the end, both skillsets involve problem solving, and when it gets right down to it, what parts of life don’t?

Things that are awesome:

• Thickbox - I had never realized full-screen image views could be this easy. I’ll never write a popup window again.
• LiveQuery - invaluable for Ajax-related sites; it allows newly created items to have the same pre-defined js binds affect them.
• Jquery Fields - because sometimes jquery can get confused about form values, especially with fields created through ajax.