Changing minds – using Yahoo’s JavaScript event library in anger

Published on 7 December 2006 in ,

Over the last few weeks, I’ve slowly been migrating some of my JavaScript to use the Yahoo! JavaScript event library after discovering that my own attempts at event handling, weren’t working quite as well as I’d planned.

The cause, as ever, was caused by browser inconsistencies whereby Internet Explorer was doing something completely different to everyone else. What a surprise.

Now I’ve encountered such problems in the past, and have always been able to hack my way around them, but this time I couldn’t.

The problem came in on some popup code I had written for Transdiffusion. The URLs for the links include widths and heights, and look a little like this:

<a href="/path/to/popup.php?width=200&amp;200" class="popup">open popup</a>

The JavaScript spots that there is a class called “popup” and uses the supplied width and height to open a popup window of that size. Before you cry “Popups! Evil!”, they’re used for little standalone video players (my personal preference was to have them full screen, but popups they became).

My original code – hand cranked the hard way and created after much gnashing of teeth – worked fine, until (Transdiffusion’s chief editor) Richard decided to try putting one round an image instead of just putting it round text.

This, of course, works fine in most browsers. But not Internet Explorer. I tried every trick I could think of, but no joy.

Popping to the library

So it was with great reluctance that I went elsewhere and found Yahoo’s event library which solved the problems for me.I must say, is rather good.

There was, however, more of a psychological battle. You see, I’ve always taken pride in writing all my own JavaScript from scratch. I’ve never used anyone else’s code – whatever I’ve wanted to do, I’ve written my own version of.

So psychologically it was a bit of a hurdle to suddenly use someone else’s.

The excuses

There were many excuses going round in my head – the main one being that my original code was about 4k – three times smaller than the code I was looking at using instead. This was generally followed up with a bit of a reluctance just to use anyone elses code – that it was somehow wrong.

Given that most programming languages use libraries, that might sound a little odd. Later on, when I thought about it, I decided that my objections on that level were pretty much due to the fact that most JavaScript provided by others, was, to be frank, pretty naff. It was either bloated, inflexible, or wasn’t cross browser compatible in any real way. I am, after all, a perfectionist. I want my website to work on as many browsers – the web is not just Firefox and IE after all. Libraries have never been something a true JavaScript writer would ever use, because frankly, they were just bad.

The download size was the first one to be thrown out of the window. I just decided, well stuff it. 12k isn’t exactly much these days of broadband and given a webpage on my site normally came in at less than 30k anyway (unless there were photos), so no one would notice a huge difference. After all, the BBC homepage is something like 70k, and MSN UK comes in at a whopping 330k. I believe in optimised websites, but we’re talking one 12k JavaScript file that will get downloaded once then cached.

Go on then, impress me

However, the excuses really started to disappear once I started to actually use Yahoo!’s event library. I fought valiantly to find a browser issue, but found none. I tried as hard as I could to mess it all up, I really couldn’t. After about ten minutes working out how to use the library, I had some working code. About an hour later, all Transdiffusion’s JavaScript was ported over to use the new library. Not long after, I’d converted a huge chunk of this site’s JavaScript too (although to be fair, much of the JavaScript is shared between the two sites anyway).

In short, it was a doddle. This is, for my money, some wonderful code. Someone (probably a few people) has put some serious thought and effort into it, and has made it work well.

And that’s what you want from a library piece of code – someone to do the hard work for you, so that you can get on with it and do what’s actually important for your website.

That’s why most programming languages use libraries. My objections to doing that were based pretty much purely on the fact that no one had ever made anything worthwhile for JavaScript before, so I always had to do it the hard way.

Of course in the early days, JavaScript wasn’t that hard so it didn’t matter. However as the ability to do more, in cleverer ways, increases with JavaScript, so will the need for libraries. Some people enjoy battling against the chaos caused by Internet Explorer. Some of us just can’t be bothered, and just want our nice little script to work.

To be frank, I never even got close to arguing about my third potential problem with using the library – Yahoo have released the library under a BSD license, meaning you can do pretty much anything you want with it.