Are you a hardcore JavaScript/AJAX programmer who knows no bounds? Do you spend meticulous hours perfecting your code so it works on all browsers? I used to be like that. I still am, but the only difference is that I now don’t spend hours testing my code. This is mostly attributed to the Prototype framework. Today I’m going to go through a few features and benefits of using a JavaScript framework over writing custom code yourself which may require testing and re-testing. Of course there is still the need for testing even when using a framework, but the difference is that there will be a lot of cross-browser compliance which is no longer needed.

There are other frameworks out there like jQuery and MooTools, but today we’ll start with what I’m more familiar with and with what I first started with. The documentation for Prototype is very thorough and I don’t want to explain everything, so I’ll start off with the major items which will change your JavaScript programming life!

JavaScript Framework? Double you tee eff?

You’re asking the right question. For the longest time I was always stuck in my own little JavaScript world where everything I coded was job-specific, customized, and with my own techniques. There were also little quirks which JavaScript had when rendering/running under different browsers/operating systems–these too were also solved using my own super secret techniques. What Prototype does, as well as other JavaScript frameworks, is give you the simple building-blocks which solve those quirks without you even needing to address them specifically. For example, if you want a div element to show or hide, you simply select the element and program the action. Sounds simple, but selecting that element requires some browser detection and compatibility verification. Let’s make a couple comparisons..

Make your life easier

Continuing on with the previous example, let’s select that div element given the following markup:

<div id="copy">
	<p>Lorem ipsom dolor sit amet</p>
</div>

We’re not going to think of any invokers right now, let’s just try to hide the div. Here is what the JavaScript may have looked like prior to using Prototype:

var objDivId = 'copy';
objDiv = document.layers ? document.layers[objDivId] : document.all ? document.all[objDivId] : document.getElementById ? document.getElementById(objDivId) : null;
objDiv != null ? objDiv.style.display = 'none' : '';

Obviously this isn’t the most efficient way of doing this, ideally I would create a function, but this is the shortest of shorthands to select and hide the div element while respecting all web browsers. Now let’s have a look at how this would look using the Prototype framework:

var objDivId = 'copy';
objDiv = $(objDivId);
$(objDivId) ? $(objDivId).style.display = 'none' : '';

For this example, the difference is quite apparent. By using the $() utility method we can quickly select that div element without the worry of what browser is being used. Now, let’s see what happens when we try to hide more than one element. First here’s the HTML markup:

<div id="copy">
	<p>Lorem ipsom dolor sit amet</p>
</div>
<div id="button">
	<p>This is a button</p>
</div>
<div id="preview">
	<p>This is a preview section</p>
</div>

I’m going to create a function to hopefully help the cause of the traditional JavaScript code and see how it compares to using Prototype. First the oldschool method:

function getObject(id) {
	return document.layers ? document.layers[id] : document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;
}
var objDivIds = new Array('copy','button','preview');
for (var i=0; i<objDivIds.length; i++) {
	objDiv = getObject(objDivIds[i]);
	objDiv.style.display = 'none';
}

And now the code for doing the same thing using Prototype:

$('copy','button','preview').invoke('hide');

Say what!? Yeah, it’s that easy. The traditional method utilizes a function which will return the object instance. We then iterate through the three div elements and update each one individually.

In the Prototype version, we’re using a couple of included extensions. First, the selector $() utility method returns an Enumerable list of objects, and the hide function is invoked across all of those objects. Easy fo-sheezy.

There are also other ways of selecting multiple elements within a page. You can do this by applying some CSS knowledge. For example, let’s attach a tracking script to all of the links within a page. We want to first select all of the A elements, then iterate through them by adding a short querystring tag to it’s href attribute.

var _TAG = '?source=buyco.ca';
$$('a').each(function(objA) {
	var url = objA.getAttribute('href');
	objA.setAttribute('href',url+_TAG);
});

This time I’m using the $$() utility method which will select a collection of elements. It takes in CSS-style selectors, such as: ‘a.external’ (select all a elements with the classname external), or ‘div#nav ul li’ (select all list items in the div with the id of ‘nav’). The full documentation on this can be found on the Prototype API documentation website.

Post face?

These are two short examples of a few things you can do (quicker) by utilizing a JavaScript framework. You will spend less time focused on browser compliance and more on the functionality and interactivity of your websites. It’s not a quick transition, but practice does make perfect! The documentation on the Prototype website is awesome, and I still find myself going back to learn new things. The main point I’m trying to get across here is that there are tools out there to make our lives (as web developers) a whole lot easier. Don’t get stuck in a place where you’re too comfortable or you’ll end up writing IE6-compliant code forever. Spend your time on more important things like user-experience, and wicked-awesome-flashy-effects. Your site visitors will thank you:)

In Part 1 of Optimizing with Image Sprites and CSS for Beginners I went through an explanation of what sprites are, how they work, and why to even bother. This time around we’re going to jump into some implementation of these sprites. I am still calling this Beginner stuff (only so that I can hit everyone with some hardcore code in the future), but if you happen to get confused follow me on Twitter and ask away!

What am I going to use the sprite for?

First let’s figure out what we’re even going to use the sprite for. When you’re ready to start slicing up your design, use your intuition and think of the graphical elements which will be used and reused on your site; this usually includes your navigation and maybe some buttons. In this example I’m going to use a sprite to create a “close” button and a textual navigation bar (SEO FTW). Here’s what I’ll be working with:

Let’s open with a close

This is the close button which I want sprite-ized:

Close

Your processes may be different, but I always start off with the HTML markup. The reason is because I want it as clean as possible and easily accessible for our search crawler friends. With a few quick keystrokes and a little touch of magic, this is what my markup for the close button looks like:

<a href="/close" title="Close this badboy" id="close">Close</a>

That was easy! Now let’s fancy this up with a bit of CSS magic and add the graphical close icon:

a#close {
	display: block;
	height: 14px;
	line-height: 14px;
	font: 11px 'Verdana','Arial',sans-serif;
	padding-left: 20px;
	background: url(sprites.gif) -32px -100px no-repeat;
}
a#close:hover {
	background-position: -32px -114px;
}
a#close:active {
	background-position: -32px -128px;
}

Wait.. what?

I skipped about 20 steps there, so let’s go through this line by line:

	display: block;

We need to give our link element layout so the graphic doesn’t get cropped. Display as block, kablammo problem solved! Almost..

	height: 14px;

The close button consists of a 14×14 area on our sprite map. We need to set the height so we don’t get any cropping.

	line-height: 14px;
	font: 11px 'Verdana','Arial',sans-serif;

This part is a bit arbitrary. I set the line-height just so the text is vertically positioned evenly, and the font is a tribute to Ikea (don’t hurt me ).

	padding-left: 20px;
	background: url(sprites.gif) -32px -100px no-repeat;

The fun part! The padding is there so that the text for “close” is shifted to the right and not disturbing the space for the graphic. But where the hell did I get the -32px -100px from? It’s the sprite’s position! 32 pixels from the left, and 100 pixels from the top. An easy way of finding your graphic positions in your sprite map is to open up the file in Photoshop, use the rectangular marquee tool (M), then start a selection from the top left of the document and end at the topmost and leftmost of the graphic. Check your Info window (F8) and take note of the width and height of your selection– and there are your positioning coordinates!

a#close:hover {
	background-position: -32px -114px;
}
a#close:active {
	background-position: -32px -128px;
}

These modifiers are just added to give a hover and click effect to the button. The only style changing here is the position of the background which then points to the coordinates of the hover and active states. Put this all together and you have yourself a close button!

I obviously geared the markup for this single example, not taking into account that you may want to reuse the code. With just a small change to select the class of the elements instead of styling based on ID, you can have multiple instances of this button:

a.close {
	display: block;
	height: 14px;
	line-height: 14px;
	font: 11px 'Verdana','Arial',sans-serif;
	padding-left: 20px;
	background: url(sprites.gif) -32px -100px no-repeat;
}
a.close:hover {
	background-position: -32px -114px;
}
a.close:active {
	background-position: -32px -128px;
}

For you newbies: it’s the dot.

Navigation Sprite’ing

This may seem a bit more advanced, but I am using very similar techniques as the example above. Once again, I’ll start off with the markup:

<div id="navigation">
	<ul title="Jon's awesome navigation">
		<li><a href="link1" title="link 1"><span id="nav-first"></span><span>Link 1</span></a></li>
		<li class="splitter"></li>
		<li><a href="link2" title="link 1"><span>Link 2</span></a></li>
		<li class="splitter"></li>
		<li><a href="link3" title="link 1"><span>Link 3</span></a></li>
		<li class="splitter"></li>
		<li><a href="link4" title="link 1"><span>Link 4</span></a></li>
		<li class="splitter"></li>
		<li><a href="link5" title="link 1"><span id="nav-last"></span><span>Link 5</span></a></li>
	</ul>
</div>

Wow that looks like some dirty code. Forgive me for the empty span tags, it’s getting late. I’m assuming everyone’s navigation markup looks pretty similar to this, so it shouldn’t be much of a stretch to update your style sheets. Speaking of which, here they are for this example:

div#navigation {
	font: 11px 'Verdana','Arial',sans-serif;
}
div#navigation ul {
	margin: 0;
	padding: 0;
	height: 50px;
	background: url(sprites.gif) 0 0 repeat-x;
	float: left;
	list-style-type: none;
}
div#navigation ul li {
	float: left;
	display: block;
	width: 50px;
}
div#navigation ul li.splitter {
	width: 2px;
	height: 50px;
	background: url(sprites.gif) -7px -100px no-repeat;
	float: left;
}
div#navigation ul li a {
	display: block;
	height: 50px;
	line-height: 50px;
	color: #606;
	text-decoration: none;
}
div#navigation ul li a:hover {
	background: url(sprites.gif) 0 -50px repeat-x;
	color: #404
}
div#navigation ul li a span	{
	display: block;
	padding: 0 5px;
}
div#navigation ul li a span#nav-first {
	display: block;
	position: absolute;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) 0 -100px no-repeat;
}
div#navigation ul li a:hover span#nav-first {
	background: url(sprites.gif) -16px -100px
}
div#navigation ul li a span#nav-last {
	display: block;
	position: absolute;
	margin: 0 0 0 44px;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) -10px -100px no-repeat;
}
div#navigation ul li a:hover span#nav-last {
	background: url(sprites.gif) -26px -100px;
}

Quite a bit of styles. It’s okay though, you’ve obviously gone through the first example a million times already, so this should be a breeze.

Now, a lot of the styling is there just for aesthetics so we’ll skip all of that. Let’s just jump to the areas where we’re using sprites:

div#navigation ul {
	margin: 0;
	padding: 0;
	height: 50px;
	background: url(sprites.gif) 0 0 repeat-x;
	float: left;
	list-style-type: none;
}

Here we are actually going to be repeating the sprite as the background in the x direction because I want this navigation bar to expand in the event of new sections. When creating a sprite with the intention of repeating it as a background, keep in mind that they can only be repeated in one direction: x or y. You cannot repeat a slice of a sprite in both directions, otherwise you may have other graphics in the sprite included in the repetition. Looking back at the original sprite, this background can be repeated in the x direction since there are no other slices to the left or right of that area.

div#navigation ul li a:hover {
	background: url(sprites.gif) 0 -50px repeat-x;
	color: #404
}

Skipping all the positioning and font styles, I want to add a hover effect. Once again I’m utilizing a repeating background in the x-direction. The position is found using my marquee technique above.

div#navigation ul li.splitter {
	width: 2px;
	height: 50px;
	background: url(sprites.gif) -7px -100px no-repeat;
	float: left;
}

I thought the navigation bar would look a little weird without having some kind of splitter between each option, so the styles above should take care of that. Here I am actually specifying the width because I do not want the background to repeat.

div#navigation ul li a span#nav-first {
	display: block;
	position: absolute;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) 0 -100px no-repeat;
}
div#navigation ul li a:hover span#nav-first {
	background: url(sprites.gif) -16px -100px
}
div#navigation ul li a span#nav-last {
	display: block;
	position: absolute;
	margin: 0 0 0 44px;
	padding: 0 !important;
	width: 6px;
	height: 50px;
	background: url(sprites.gif) -10px -100px no-repeat;
}
div#navigation ul li a:hover span#nav-last {
	background: url(sprites.gif) -26px -100px;
}

Here I’m just being a little fancy and adding the smooth bits at each end of the navigation bar. Essentially the same techniques used above.

Holy Crap!

Yeah, it’s a lot to take in but I didn’t lie when I said this was a beginner guide because I assume everyone reading this is an expert with CSS.

The examples above are merely examples. I hope no one copy-and-pastes the markup because it won’t work for your site (figuratively speaking). I hope you learn from what was presented above, test out your own techniques, and apply it in your daily web development ventures. The best way of learning is to do it yourself, this guide is only here as a guide and also because I have nothing better to do at 2:00AM on a Wednesday morning

That’s probably the same thought process I had when I first started reading about image sprites. After a few minutes of investigation via Google, I wanted to try to implement this technique every and anywhere possible on my websites. This isn’t necessarily a required method of implementation of a web site but it is still something that every web developer should at least have an understanding of.

In this 2-part series I’ll go over what an image sprite is, when to use them, how to use them, as well as provide a few examples.

What is an image sprite?

Back in the olden days (circa 90s), multiple images were merged into a single graphic file to quickly composite 2D games. Here is an example [source: wikipedia]. Certain parts of this single graphic would be extracted and used to animate objects, characters, etc. We can utilize the same methodology with our websites and optimize load times (as well as provide an easy means of updating graphics when the times come).

How does an image sprite work in the web-world?

One of the greatest things to happen to a web developer / designer is the invention of Cascading Style Sheets. We can use CSS to pick certain coordinates within a sprite and display those areas on our websites. It may sound a bit tedious to have to find the pixel by pixel locations of every sprite you want to use, but in doing this you may be able to shave off precious load times of your web page.

Decreasing load times? Wtf?

When you want to increase the performance of a website, one of your key objectives is to reduce the amount of time it takes for a particular page (or pages) to load. One way is to keep the number of HTTP requests to a minimum. Any time you insert an image, or include a JavaScript file, or any other file for that matter, it is an additional HTTP request. In the nature of a sprite, you are making a single HTTP request for that graphic, then referencing different parts of it to be displayed on a web page. This works great granted that the size of the single graphic is less than the size of all it’s containing graphics individually (we’re talking bits and bytes here, not lengths and widths).

Another potential advantage is browser caching. Take, for example, this navigation bar:

In this case we assume that this navigation bar is split up into 8 images: 4 for the “default state”, and 4 for the “hover state”. When the user hovers their mouse over a particular image, the “hover state” image is loaded on the fly. That’s a single HTTP request for that extra image. If a user does not hover over all the graphics, not all of them will load, so basically this page will only load the additional images if it *really* needs to. But still not the best situation…

Each graphic is around 1.097Kb – 0.997Kb totaling 8.11Kb. In actuality, I used a single sprite totaling 3.292Kb. By loading even only the “default state” images, we are still reaching a size larger than the single sprite.

Applications

That is only one situation where you can really utilize the benefits of using a sprite. Using them for navigation bars with hover states is probably the most common use, but some sites have taken it a step further.

Take Google for example. Shaving off a single millisecond of load time of their site can translate into some amazing results (probably because they get millions of hits a day). You may not see this type of traffic, but in either case you still don’t want to have a slow website.

Back to my point, lets have a look at a screenshot of my iGoogle homepage:

Looks like a simple logo right? In actuality, the logo is a part of an image sprite:

All those smaller icons are used as elements within the page. With some fancy CSS code-work, only a single image is used on this page! (That’s actually a lie since I have multiple gadgets running with external image sources).

Other high-volume sites like Yahoo and eBay also use image sprites so why don’t you!?

Tune in next time as I go through a few implementation examples: Optimizing with Image Sprites and CSS for Beginners (Part 2)

In this article I am going to pick on GoDaddy, but I want to be clear that they’re not the only offender, VeriSign, arguably the largest CA, has the same problem!

Warning: many reference to the word “certificate” to follow!

Okay, lets first start by looking at the issuer contents of a certificate signed by GoDaddy:

# openssl x509 -in signed_cert.crt -issuer -noout
issuer= /C=US/ST=Arizona/L=Scottsdale/O=GoDaddy.com, Inc./
OU=http://certificates.godaddy.com/repository/
CN=Go Daddy Secure Certification Authority/serialNumber=07969287

The problem with the above is not that it was signed incorrectly, but that it was signed by an intermediate certificate and not the CA’s root certificate. Now, in most cases simply adding the respective intermediate certificate to your web server config (see apache example below) will be sufficient for browsers to now “trust” this certificate, however, Firefox and IE7 are notorious for not (more on that below).

SSLCACertificateFile    /path/to/certs/gd_intermediate.crt

In the case of Firefox (and sometimes IE7), the browser doesn’t always have a trust chain back to the root CA with the intermediate issuer and thus reports the certificate as “untrusted.” There are two options here: 1) you can import the CA’s intermediate certificate into each users browser, which obviously doesn’t scale. Or (2) create a pkcs7 certificate that includes the certificate chain back to the CA’s root certificate:

# openssl crl2pkcs7 –nocrl <ssl_public_crt> /
–certfile <intermediate_crt> -outform PEM –out <new_pkcs7_crt>

Using method #2, will result in an updated certificate which will need to be assigned to your respective web service rather than the certificate returned from your CA (apache example below):

SSLCertificateFile    /path/to/certs/<new_pkcs7_crt>

You should no longer have certificate trust issues. happy times

There are many ways to do this, but in this example we’re just going to do a simple image replacement on mouseover. We’ll start off with the code for the image:

<img src="/images/how-to/javascript/button-inactive.gif" id="button" />

For your SEO enthusiasts and W3C fiends, I know there are missing attributes. We’re going to go as minimalist as possible to simplify this process. One attribute to note of is the “id” which we’ll be using to select this particular image. This is very important so that we can select this image element based on it’s id (DOM FTW!).

Next we want to apply an event handler to that object so that when the user moves the cursor over it, the image will change into something pretty! Internet explorer uses a different type of event handler code than other browsers (because if it didn’t, this would be way too easy). So we will ensure we do a little browser detection:

var isMoz;
window.addEventListener ? isMoz = true : isMoz = false;

The window.addEventListener method is not used by Internet Explorer, so here we just single those browsers out. Next we want to create the code to attach a function to the mouseover (or onmouseover) event of the button. We haven’t created the image swapping functions yet, but keep in mind that we’ll call them imgOver and imgOut. That being said, lets create the event listeners and put them in a function called initMouseOver:

function initMouseOver() {
 var objImage = document.getElementById('button');
 if (isMozilla) {
  objImage.addEventListener('mouseover', imgOver, false);
  objImage.addEventListener('mouseout', imgOut, false);
 }
 else {
  objImage.attachEvent('onmouseover', imgOver);
  objImage.attachEvent('onmouseout', imgOut);
 }
}

Now you see why the image’s ID is important (remember: DOM FTW!). In the above snippet, when the function is called, event listeners are added to the image object. In addEventListener and attachEvent, the first value passed in is called the event type. For a mouse over event, these are valued at mouseover and onmouseover. The second value is the function to be associated with the event. In addEventListener the last value taken in is a boolean value which indicates whether or not to bind the event as it propogates to the image or as the event bubbles upwards from the image. This is usually set to false.

Next we need to create the functions to swap the images in and out as the object captures the events:

function imgOver(e) {
 var eMoz = 'target';
 var eIE = 'srcElement';
 var objImgOver = new Image();
 objImgOver.src = '/images/how-to/javascript/button-active.gif';
 e[eMoz] ? e[eMoz].src = objImgOver.src : e[eIE].src = objImgOver.src;
}
function imgOut(e) {
 var eMoz = 'target';
 var eIE = 'srcElement';
 var objImgOut = new Image();
 objImgOut.src = '/images/how-to/javascript/button-inactive.gif';
 e[eMoz] ? e[eMoz].src = objImgOut.src : e[eIE].src = objImgOut.src;
}

In both functions, we’re initializing the new image, then swapping it. This is not the most efficient way to do this since we’re recreating a new image object every time an event occurs. So let’s clean up all the code and put it into a separate javascript file. Here’s how it should look:

var isMoz;
window.addEventListener ? isMoz = true : isMoz = false;
var eMoz = 'target';
var eIE = 'srcElement';
var objImgOver = new Image();
objImgOver.src = '/images/how-to/javascript/button-active.gif';
var objImgOut = new Image();
objImgOut.src = '/images/how-to/javascript/button-inactive.gif';

function initMouseOver() {
 var objImage = document.getElementById('button');
 if (isMozilla) {
  objImage.addEventListener('mouseover', imgOver, false);
  objImage.addEventListener('mouseout', imgOut, false);
 }
 else {
  objImage.attachEvent('onmouseover', imgOver);
  objImage.attachEvent('onmouseout', imgOut);
 }
}
function imgOver(e) {
 e[eMoz] ? e[eMoz].src = objImgOver.src : e[eIE].src = objImgOver.src;
}
function imgOut(e) {
 e[eMoz] ? e[eMoz].src = objImgOut.src : e[eIE].src = objImgOut.src;
}

*Deep breath* still with me? That’s essentially it! All you need to do now is to include the javascript file in your HTML and ensure the initMouseOver() function is called when the page loads. Simply add onload=”" to your body tag and it should look a little something like this:

<body onload="javascript:initMouseOver();">

That’s it! No wait–that’s only for one image. What if we need to set this up for multiple images? Well, glad I asked because there are several ways of accomplishing this. If you think you can take more of this, carry on to one of the next tutorials or download all the work files for this one:

Example: Unobtrusive Image Rollover

Next step: multiple buttons, preloading, and optimization