Why jQuery Rocks

As a lazy developer, I love jQuery. I'll try to enumerate my top reasons:

1. It's among the smallest of the full featured javascript libraries. So I don't have to worry about adding a lot of overhead to my pages to use it. For example, minified and gzipped, jQuery is about 15k. Dojo is about 24k, which, I admit, it still pretty impressive.
2. jQuery does tons of cool stuff out of the box and doesn't require me to understand complex extension packages (moo tools and the Yahoo! User Interface Library are the most extreme examples I can think of).
3. I can call functions as soon as the DOM is ready. (What's the DOM?)
4. Simple, CSS style syntax for selecting elements combined with chainable functions allow me to write in 1 to 5 lines what used to take 12 to 50.
5. jQuery's also got some great plug ins.

Of course, not every plug in available is amazingly awesome or even a good fit for every project. In fact, some of the best, in my opinion, have a very narrow, targeted application. Today I was asked to create an image gallery from a collection of 50 shots taken at the graduate awards ceremony Friday night. In the past, we've used Flash to make our image galleries. I suck at Flash, so I'm sure it would take me all week to recreate something like that, even if I had a basic template to go by. I have no idea how long it took Ken (former webmaster, current director of public relations and therefore my boss) to generate something like that. But I figured I could whip up something similar in jQuery in an afternoon.

There are lots of image gallery plug ins for jQuery. I wanted one that looked impressive while being easy to navigate and not so flashy as to distract from the images themselves. I also wanted something that required nothing but a list of images identified by an ID or class. The idea there is, if someday move to a CMS, the end users could build a gallery by simply adding the class (or ID) to a list of images. That's the sort of thing we could easily cover in training. It helps that as of right now my favorite CMS is Drupal, which comes pre-packaged with jQuery.

I looked at slideViewer, but I like thumbnails. I looked at jqGalViewII but for this particular application I don't want to spend time generating my own thumbnails. Then I looked at Galleria and this seemed to be the best fit for my immediate needs.

It took about 15 minutes of code work to repurpose the key elements from the demo page for our needs. That includes time spent minifying the javascript and uploading the external files to the server. I changed a few color values in the CSS, altered the fonts slightly, linked in our images, and had a fully functional image gallery in less time than it took to crop the images. The only snag I ran into was the preloading function wasn't working properly in IE (curse you IE!). But updating the core jQuery library to the latest version fixed this bug pretty quickly. I should have done that earlier, but I've been focusing on the development server, not the “live” server.

I hope to incorporate some standard implementations of things like this into the redesign. I'm keeping the possibility of a future move to a CMS in mind, but there's plenty of other benefits to having a few well documented solutions like this. It saves me time. That's a good start. I also occasionally take a vacation or occasionally get sick. If something comes up and I'm unavailable, a quick HowTo on implementing a cookie cutter image gallery like this could be a real life saver. I need to experiment with managing a mix of image sizes and maybe port the auto-thumbnail feature from Galleria into jqGalViewII and then offer up both options in a tidy package. Since it's all open source, I can easily do that.

Here's hopin' I don't automate myself out of a job some day. :)

Random stuff collected on the net

First, a couple of new heroes.

This guy is so awesome. He's the antithesis of what the media tells us a “rock star” should be. But he doesn't care. His joy and enthusiasm about, not just his music, but the whole concept of music, is downright infectious.

Here in the south, religion tends to earn itself a reputation for discouraging critical thinking. But I know it doesn't have to be that way. I've met a few true religious scholars for whom I have great respect, even when we (often) disagree. I love seeing stuff like this, not because it's putting a Faux News reporter in his place, but because this guy's firm in his convictions, can back them up quite reasonably (with or without scripture), does not push his beliefs, but does call shenanigans on the reporter for trying to use the power of his position to distort reality. “Just because you say he is a racist doesn't make it so.” I'm paraphrasing there, but that's the gist of it.

Speaking of the social construction of race, I found a very cool quote from Tay Zonday (the Chocolate Rain guy):

I live in Minneapolis. I'm 25 years old. I'm not sure what you mean by "background." Is that a code word for "race?" The straight-faced answer is that I'm Martian. They don't have a box for me on the census form. I'm the write-in candidate that the government leaves no space for when you have to choose your race.

Seriously, is race something you choose? The whole point is that I don't choose it. It is somebody else's shortcut to my soul. So journalists ask "what's your background?" like I'm supposed to retell someone else's story about me as though it's a fact of who I am and where I come from. As long as I talk about myself in fiction that someone else wrote, I might as well write my own fiction: I'm from Mars. Most believe the story that I'm a black mulatto.

That's from this interview by way of Tay's Wikipedia entry. From that, I also learned that he's a graduate of The Evergreen State College. Evergreen is one of my favorite schools ever. Their curriculum overview page explains why I feel that way better than I can myself.

I discovered Evergreen in the book “Colleges That Change Lives”. Out of the 40 or so schools in that book, Evergreen and The New College of Florida were my favorites. At various points in my academic path, I've considered attending both. If I have any academic passions left after I'm done with MACT and move on to doctorate level work (my only current lead is the PhD in Digital Media from Georgia Tech), I think I'd be pretty happy teaching at one of those schools since I never got a chance to attend.

Curse my Lack of Focus

Quite a while back, I took a couple of days to play with the Google Maps API. I knew things were getting dangerous when I discovered the ability to add custom overlays to the map and immediately started imagining all the cool stuff that could be done with that. With all the redesign work that still needs to be done, I just can't spare the time to essentially play with a new toy, no matter how work related that toy may be. I experimented just enough to produce a sort of proof of concept and then moved on to other things.

But now I'm kicking myself 'cos at least 3 other schools have explored just how much awesome can be distilled from these tools:

• Boston University
• Michigan State University
• Oregon State University

Oregon State is using the Jquery Google Maps plug-in, or at the very least they're using Jquery with Google Maps, with or without the plug-in. I'm interested in that 'cos I'm already using Jquery. The coolest thing I've found so far digging around in the source code is from Boston U. It doesn't seem to have anything to do with the map function specifically, but there's a function that sets all external links to open in a new window/tab and it's declared like this:

function l337() {
  if (document.getElementsByTagName) {
    var elements = document.getElementsByTagName('a');
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].getAttribute('rel') == 'external') {
        elements[i].target = '_blank';
      }
    }
  }
}

How cool is a function called l337()? I don't even care what it does at that point.

And just so you know, FF3 has no problems rendering form elements within the baseline grid, so I can not worry about it and eventually that particular problem will take care of itself. Pixel perfection through apathy. Gotta love it.

Yesterday I got <sup> and <sub> tags working without screwing up the baseline grid too. It even seems to work cross browser. That's got just about everything I can think of except for images, and I know how that should work in pseudo code. Javascript has a MOD function, right? Right.

Damn, It Feels Good to be a Gangsta

But not so good to be a web developer working on a major rebuild. At least not right this moment.

I want to launch this summer, so incoming freshman get a fresh start (HA!) on our website. But that apparently worries the faculty and staff, who rely on the website to find answers to the various questions these same freshman bring with them. In my mind, the needs of the many outweigh the needs of the few. Students outnumber employees by about 10 to 1. Realistically, this problem is as much political in nature as anything else.

Another problem I'm having is the unstable landscape of browser releases. Safari 3 just came out. Opera 9.5 should be out soon, followed by Opera 10 in the not too distant future. The Firefox team is making sure not to name specific dates, officially stating Firefox 3 will be out “When it's ready”. I've been looking at the minutes from the status meetings and it's obvious the “blockers” (bugs that need to be fixed before the beta can be considered a release candidate) are on a pronounced downward trend. But is that trend linear, meaning the remaining 52 blockers (looks like 62 is the current number of official bugs as of today at 11:28AM PDT) will be out of the way in 2 or 3 short weeks? Or are we in a Zeno's arrow (as opposed to Xenu's arrow) sort of situation where the last few remaining blockers take up more and more time as we near the finish line? There's even talk of seeing IE8 by the end of this year. The IE8 Beta is Vista only, does that mean the final release will be Vista only? And how quickly will people “upgrade”?

I can't really do much but speculate on the future. Maybe the code I write today will continue to work, maybe it won't. Maybe a feature I spend hours implementing in my design will be rendered obsolete with a new browser feature (like Opera's awesome zoom feature, a less awesome version of which made its way into IE7)?

IE6 was an alright browser for its time (a definite improvement over IE5.5), but that was August of 2001. I'm glad it's finally falling off the browser support radar, but it's still there. And chances are it'll still be there when IE8 comes along. I'm not looking forward to attempting to support 3 different versions of IE. At least the users of other browsers can be relied on to update their browser on a fairly regular basis. I got the Firefox 2.0.0.14 update last night at home and it was waiting for me this morning here at work. In a week, it'll be interesting to check how our Firefox version numbers break down in Google Analytics. Currently, all versions of Firefox prior to 2.x makes up less than 2% of total Firefox usage. And Firefox is just 8.17% of all usage, so 2% of that is hardly noticeable in the grand scheme of things.

But ultimately I have to worry about these things. Right now I've got a problem in FF2 where I can't get my input fields in a form to align along a baseline grid. There's an odd 2 pixel increase in height that doesn't seem to be coming from borders or padding or margin and I'm even using Eric Meyer's CSS Reset Reloaded which, in theory, greatly reduces the occurrences of such cross browser oddities. I haven't downloaded the FF3 beta yet to know if the “bug” is still present there...

Ok, I just downloaded it and tried to set it up to allow the beta to run in parallel with this install, but it says only one instance can be running at a time. So I'll have to quit this instance before I can check.

Anyway, my point is, I'm not sure that a 2 pixel difference from the baseline grid is worth taking the time to troubleshoot if, by the time we launch, Firefox 2 will make up a tiny percentage of our user base. It's not mission critical in any way. I doubt anyone but me will EVER take a pixel ruler to this layout and check for things like a baseline grid anyway.

In which I explore the depths of my own geekiness

So I've been thinking a lot lately about how video game control schemes relate to basic usability, and how that can be applied to website usability.

For example, I've been playing Zack and Wiki lately. In case you haven't played it, a major game mechanic is you can turn these various animals into various tools, then you use the tools to solve puzzles. The controls for each tool is different and not spelled out for you. You can examine the tools and look for clues as to how to use it. For example, the umbrella has a button with a 2 on it, and if you push the 2 button on the wii-mote the umbrella will open. Some of them are pretty simple, like you just make a forward / back sawing motion with the wii-mote to use the saw. I haven't made it very far in the game yet, maybe half way, but so far the controls are smooth and intuitive for just about everything.

They're so good, in fact, it makes the occasional problem very noticeable. So far I've encountered two rhythm based mini-games that are terrible. I can't do them at all. My wife managed to get through one of them. There's a skeleton with a music box and you use the wii-mote to ring a bell in time with the music he plays. It should be dead simple, but apparently I swing my wii-mote too hard, or too soft, or something because he's never happy with my performance.

Seeing what I'm talking about may work much better. Behold the power of the internets:

Do you want to know something sad? Just hearing that music right now grates on my nerves. That's how scared I am by my poor user experience.

There's another point where you have to try to catch this huge fish. The controls for the fishing pole were easy enough, but I kept thinking I was screwing up 'cos I'd get the fish about half caught and the fish would spit out the bait. It turns out this is just part of the game and you're supposed to go get another worm and try again. It generally takes 2 or 3 attempts to catch the fish (maybe it's possible to do it on the first try, but I certainly couldn't do it). The problem here was there was no feedback mechanism to let me know that my progress on my first attempt would be saved for subsequent attempts. Considering the other times Wiki interjects an inane comment to point the player in the right direction, this would have been an excellent opportunity to offer some encouragement to try it again. In the absence of any encouragement or feedback that I was at least on the right track, I found myself feeling cheated. How could this not be what I'm supposed to do? Even the first time I got a 2nd worm and gave it another try, the fish's energy bar wasn't emphasized in a way that made it obvious to me that he was still tired from my 1st attempt. I eventually figured it out, and I guess that's part of the point of the game, but for a while my experience was flipped from quite fun to very frustrating.

I can't find a video with just the fishing part, but here's the whole puzzle. The fishing bit starts around 2:30 and at around 3:45 this guy fails at his first attempt too. The little grumble and black squiggles in a thought balloon is the same feedback you get when you do something wrong.

Apparenty you can also just blow him up, which is something I tried but I was attempting to lure the frog the wrong direction.

This all just serves to remind me how important user feedback is to a positive user experience. Even the most intuitive of interfaces involves a certain level of uncertainty, particularly in complex, multi-step processes. Providing a means of letting the user know s/he is on the right track can really help. In the mini-game, the example in the top right corner of the screen could show how to swing the wii-mote rather than just how to hold it (although some may argue this gives too much away) and that would save me a lot of grief on the mini-games. Since the mini-games are option, I really don't have an interest in "discovering" the proper method through experimentation. I'll quickly get frustrated and move on to more fun elements of the game (which includes virtually everything else). When the fish spits out my first worm, Wiki could easily offer some sort of feedback along the lines of "Aww, he got away! But he looks pretty tired." Instead, we get Zack giving us the same reaction we get when we do something totally off track.

Then I found this blog entry: Ramblings of a Colorblind Gamer. And now I'm thinking about how all these things tie back into web accessibility as well as usability.

Browser Upgrade Campaign

As I move into the redesign of VolState.edu redesign, I'm using Dean Edwards IE7.js to get older versions of IE to behave almost like IE7. This means people using older versions of IE with scripting disabled will get a sub-par experience. I'll do my best to allow for graceful degradation, but things will probably look noticeably "off".

I'd like to offer a quick paragraph explaining why things look odd and take the opportunity to gently encourage them to upgrade to a modern browser, displayed only for those users who need to see it, like the old WASP Browser Upgrade Campaign. If that modern browser happens to be IE7, at least that's an improvement over previous versions of IE. I figure not providing a plug for IE7 in some way will result in an overall lower conversion rate. We're also dealing with a population that already use Microsoft products and may be paranoid about security (if you'll allow me the luxury of stereotyping people based on their browser settings). Sending them somewhere like GetFirefox.com may just get me dismissed as a “fanboy” or “cultist”.

I figure my options are:

1. Link to the IE7 download page and be done with it.
2. Link to both the IE7 download page and Browse Happy.
3. Link to Save the Developers and let the various browsers fight it out there.

It may be useful to look at some recent browser info for our site in Google Analytics. IE users make up 89.57% of our visitors over the past month. Of those, 57.59% are using IE7. That leaves 42.41% using some other version of IE (including 17 visitors using IE8 somehow, but we can ignore numbers that small at the percentage level). That means that roughly 38% of our visitors are using older versions of IE. Getting accurate figures on people with scripting disabled because by definition these folks don't show up for javascript based analysis tools (like Google Analytics). Other sites report this info based on server log analysis but have skewed audiences and probably don't reflect a representative sample.

In the absence of any scientifically reliable data, let's make something up!

Ok, let's at least make something up in a range. We'll use 2% as our lower bound and 35% (the highest claim I've found so far) as our upper bound. That would mean somewhere between 0.8% and 13.3% of our visitors fall into the category I'm dealing with. Anything below 1% might not be worth troubling myself over, but anything that exceeds 10% certain is. I have now used fuzzy math to justify taking the time to write this post.