solidhex.com

JavaScript has become much easier to write over the past two years with the help of top notch libraries such as Prototype and jQuery. Before getting my feet wet with either of the two aforementioned heavy-weights, I spent my time slugging it out with tedious DOM methods and ‘vanilla’ loops. It was certainly time consuming, but I knew exactly what my code was doing and would still know what it was doing six months from then.

Now, much like the rest of the world, I can’t seem to get by without jQuery or Prototype to do most of the heavy lifting for me. This is all well and good, but if/when the occasion arrives when you can’t rely on a library to plug all the holes for you, you might be surprised how much plain ole JavaScript you’ve mis-remembered.

I certainly was. I had to lean pretty heavily on the ole Rhino book - which by the way, is a book no serious JS scripter should be without - because I had forgotten stuff I used to be able to do in my sleep.

So, as a healthy exercise, I think it’s a good idea to try and write some scripts without using one of the fantastic libraries and frameworks out there, so you can spend some quality time reacquainting yourself with JavaScript. In fact, if you have some time to kill, you might want to run through Chris Heilman’s JavaScript course and work on the demos. Though the course is a few years old by now, the exercises are still worth taking a shot at to keep your skills in check. It’ll force you to think a little bit differently once you can’t rely on CSS selectors to whiz up and down the DOM tree for you.

Don’t worry - I am not suffering from a fit of dementia in which I want to do away with libraries and frameworks - quite the opposite. Why, I even helped debug a famous jQuery plugin. I just think it’s healthy to approach code from a different angle every once in a while and realize how good these libraries make our lives as developers.

A tried and true use of JavaScript is to open external links in a new window (or tab, depending on your preferences). I’ve come across countless scripts written to do this task, and even though some are using jQuery or Prototype, they are not making the most out of the library or framework they are using.

Basically, there are three ways to open an external link in a new window:

1. Give the a tag a class of ‘popup’, or something to that effect, iterate through the links and open those with class of ‘popup’ in a new window.
2. Set the rel attribute to external, and again, iterate through the links in the document, find the ones that contain this attribute and value pair and open the links in a new window.
3. Iterate through all the links in the document, check to see if the href contains the current site’s URL and if it doesn’t, pop it open in a new window.

For this example, I am going to assume my links are marked up like so:

<a href="http://google.com" rel="external">google.com</a>

With jQuery, there’s no need to iterate through each link and test for the rel attribute, and it exists, test for the value external. You can simply use CSS selectors to grab only the links you need without having to loop over them, then simply apply the Click Event Helper directly to those links like so:

$(function(){
	$('a[rel=external]').click(function(e){
		open(this.href);
		e.preventDefault();
	});
});

That’s what I like about jQuery - you get in, get what you need and get out.

Co-worker and friend Kristina has launched brockandkristina.com - a website dedicated to her ceremonious wedding later this year. Not enticed by most of the free wedding template sites, she cranked out a custom motif that draws its inspiration from the desert landscapes of Palm Springs, California.

As it turns out, not only is the site a good way to learn the back story of how she and her fiance Brock met, but it’s also a damn good resource for hotel and activity information for those planning a trip to Palm Springs.

All the coding was handled by yours truly. jQuery helped keep the Ajax call simple and also allowed me to use nyroModal, the highly customizable and flexible jQuery plugin from monsieur Cédric.

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design. The big problem I experienced with every plug-in I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not true. The default CSS works fine, but most of time it’s a mix between required elements and optional. This mean you have to be very careful when editing it. The other problem is the animation. That’s the worst point. I never found one plug-in allowing to redefine easily the animations.

And with that, Cedric has relased nyroModal.

The seeds for this idea were planted as he and I continued to work on large sites utilizing many modal windows. Once you stop using them for simple login pages and image galleries, they can become quite a mess to customize.

Cheers to him for solving our problems and making it available for others to use.