If you want to apply a pink highlighting effect to your table rows, you can do that easily!

I want to show you a very simple example and, yes, probably some of you are going to laugh when you see it because, like it said, it’s simple and a bunch of people are already using it so we’re not breaking new ground here but I’m going to include it anyway since it might not be an obvious addition to some. Data-driven applications tend to have large tables containing many columns and rows of data. Adding a simple highlighting effect when the cursor hovers over a row can make sifting through that data easier on the user. Think of the case where we have an employee table with 10 columns and a table width that stretches the full width of a user’s monitor. The “Employee’s Name” column is on the far left of the screen and a link to update the employee’s information on the right-most column. Highlighting the row the user’s cursor is over will easily identify to the user the edit button they are about to click is truly the one associated with the employee they want to edit.

Using the :hover pseudo-class is easy. Take a look at the CSS example below:

And that’s really all there is to it. Now we just apply the “hiliteTbl” class to any table we want rows the users hovers over to change color and it will automatically be applied. Take a look at the demo page I created showing the :hover effect on table rows in action and then try it out for yourself. If you have a web site with lots of data grids, using this effect will make your users’ lives easier. They’ll be able to digest the information you feed them faster because you’re giving them helpful guidance.

As you’ve already seen on this site, there are plenty of examples of HTML5 support out in the wild right now so there’s no use waiting to innovate later! Your users’ browsers should already support a whole host of features so get using them.

• Web Hosting – The connection to your web server(s), the speed of those servers and how quickly they can process web requests are all big factors in your web site’s performance. Obviously the more you pay, the more powerful a server you’re going to get. You are in control of this just based on how much you’re willing to spend.
• Server-side Code – If you’re using server-side code (and which web site isn’t these days) and your code is poorly developed, that’s going to effect how quickly server requests are processed.
• Client-side Resources – Image, CSS and JavaScript files your clients need to download also contribute to web site performance. We talked earlier about minifying your JavaScript and CSS files so that’s one option. Now I’ll give you another tip to speed up page loads by using Content Delivery Networks or CDNs.

Content Delivery Networks Explained

What is a Content Delivery Network you ask? Very simply, it’s a system of web sites that host common JavaScript APIs cached on high performance web-servers. Such APIs would be jQuery, jQuery UI, Prototype, etc. just to name a few. Both Google and Microsoft offer up CDNs and you can reference these libraries in your own code.

Why would we want to reference APIs on a CDN instead of hosting it on your own server? There’s a few of reasons you would want to do this. First off, it’s one less file your web server needs to host and therefore, one less HTTP request the server needs to process. Even if the request only takes a couple hundred milliseconds to process, it’s still adds up. Depending on the traffic on your web site, milliseconds can add up to a huge performance loss over time.

Secondly, because CDNs are utilizing high-performance servers with a big pipeline for requests, chances are their servers are going to process a request and send the response much quicker than most hosts you’re using. As I said earlier, your hosting plan is definitely going to way in on this argument. If you spend a lot you’re going to get faster hosting so this might be a moot point but for those of us without bottomless wallets, I’ll show you some examples in a little bit of how my shared hosting plan just doesn’t offer the same performance as Google’s or Microsoft’s CDN.

Finally, the more web sites start using CDNs to reference libraries the more it’s going to improve page load times across the board. Say we take an example where web site A and B are both referencing the latest jQuery library on Google’s CDN.

1. A user visits web site A.
2. The browser downloads the jQuery library referenced on Google’s CDN.
3. The user then visits web site B, which references the same URL on the CDN.
4. The browser sees it already has that resource downloaded locally and can skip downloading the JS file again.

Now in this particular example, web site B would really be the one to see the page load time decrease but honestly other users will visit B before A, thus A would get the load decrease and it would all even out in the long run. The point is the more web sites start reference CDNs the better since it will boost load times across the board.

CDN performance in action

To show you the benefits of using a CDN on your site I took a scenario where I had a web page referencing the same jQuery library on my web server and both Google’s and Microsoft’s CDN. The HTML for the page looks like this:

I cleared all the cached files from my browser (Chrome) before loading this page so that each file would have to be downloaded. I then used the Chrome developer tools to look at the download times for each resource:

As we can see, Google really has the advantage on the CDN download.

Wow, my hosting server is slow to send data!!

Google has incredible response time for their hosting servers

Microsoft has great response time as well though their send time is a little behind Google's

As we can see from these response times, Google is far and away the fastest at serving up files from their CDN. This really shouldn’t come as a surprise since their web sites generally are some of the fastest around. Microsoft comes in at second place and while their response time was quick, the downloading of the content kept their time from being close to Google’s. I’m not certain what would be causing that though. Perhaps Google is compressing their content? Finally we have my poor hosting plan coming up in last place. Though we’re still under 1 second, keep in mind this is just for a single JavaScript file. What if we start adding additional functionality that spans 3 or 4 additional JS files and they take the same time to download? Instead of a page loading in under a second, we’re up to 4-5 seconds and that will dramatically increase the frustation levels users would have with my site. Maybe it’s time I look for a better hosting plan!

Load times of cached resources

For the first request, my browser had to download each of the JS files since I didn’t have them stored locally. Now lets refresh the page and see how long it takes to load each cached file. One thing to keep in mind with this scenario is that the web servers are still going to be contacted to see if the JS files have been updated since our last request.

Cached versions take much less time to load

Ugh, connecting and waiting still take a good amount of time compared to the other two

Google still takes the edge for cached CDN files

In the race of cached versions, Google still takes the edge but Microsoft’s CDN is a very close second. After the first download we can see that the gap between the two providers are reduced big time where the difference between the two is negligible. My server is taking up the rear so it looks like the obvious choice for me is to use Google’s CDN for the jQuery API.

If you were to use Microsoft’s CDN instead, since it is built into MVC development now, that’s a completely safe option too. Bottom line is the better your page load time, the better the user experience you can offer. Take advantage of CDNs for common libraries so that you can offload some of the hosting work to the big guys’ servers and you can have your server concentrating on processing your important application requests.

I wanted to take a moment to remind all you developers out there, even those of you who are burning the midnight oil after work on hobby projects, how important it is to use some sort of source version control for your code. I would hope this would be a no brainer for those of you working in a team environment. If you’re not already using version control (i.e. – Team Foundation Server, SourceSafe, Subversion, etc) in that scenario then you better set something up immediately because you’re in a world of hurt if you lose code from a computer crash or an accidental file copy. Not only is it bad for you but it could be detrimental to the team and the company.

Ok, now, since source control is so important for teams, the question then becomes how is it important for solo projects? My response to that is easy. The reasons an individual would want to use source control are the same reasons a team would want to use it:

• Code repository/backup
• Version history
• Rollback code changes
• Feature branching/merging

The list could go on and even though you might think, “But Derek, I’m just working by myself. Why would I even bother going through the hassle of using source control?” know that the first time you lose a vital piece of code because of a hard drive failure or want to find out what the code looked like for a method a year ago that’s since been changed, you’re going to be swearing up a storm.

Free Hosted Source Control

We’ve got the reasons for source control out of the way lets figure out how we can add it to your current project. Think it’s a difficult process? Absolutely not! Not only is it easy to start using versioning, the best part is there are so many source control hosts which don’t cost you a penny! Below I’ve listed just a couple of the many web sites offering free source control hosting. As an added bonus project management abilities too so you track requirement documents, work items and bugs! You can host your project online so that you can work on code from multiple locations and/or with multiple people from all over the world.

• Codeplex (http://www.codeplex.com) – this site offers source control with Team Foundation Server, Mercurial or Subversion. Great for Visual Studio developers and now that TFS has a plug-in for Eclipse, many languages not native to Visual Studio such as PHP, Java, Python, etc can be integrated with ease.
• Project Hosting on Google Code (http://code.google.com/hosting/) – project hosting has been offered by Google for quite some time and is very popular in the open source community. They support Subversion and Mercurial version control.
• Gitorious (http://gitorious.org/) – Git is a relatively newish source control system that the developers claim is extremely fast. I haven’t had a chance to use it but I’ve read good things about it.

So those are just three hosting sites of the many existing solutions out there. Bottom line, if you’re not already using source control, sign up for one of those sites and give it a try. You can also download a version control application such as Git or Subversion and run it off your local computer. Either way you choose, you’ll find out pretty quickly all the benefits you’ve been missing.

Thankfully, Joss over at cssreset.com has posted an easy tutorial on using CSS to keep the your web site footer at the bottom of the browser window regardless of the page’s content. Give it a try and let me know if it works for you!

Note: I have this categorized under CSS3 but really that’s only because I don’t really have a CSS category. You don’t need CSS3 to use this feature.

Cookies are like the floppy disks of the web. Old, out-dated and don't offer much storage.

The designers of the HTML5 specification have included a few different storage mechanisms that blow cookies out of the water (or should I say milk? heh, heh)! They have introduced two storage objects call sessionStorage & localStorage as well as client-side SQL database capabilities. This article will talk about the first two storage features and we’ll leave the database talk for another time.

The Storage Interface

In order to understand sessionStorage and localStorage we need to know more about the Storage interface they both implement. Below is the interface written in no particular language, just a pseudo-language most developers would be able to understand by reading it over.

It’s easiest to think of this interface as a “Dictionary” or “Hashtable” object that contains key/value pairs and has basic get/set/delete operations on its collection. There is also a length property which tells us how many items are currently in the collection as well as a clear function which will remove all items from our collection.

There is one important thing to note about this interface. Even though the setItem allows us to pass in objects, it’ll actually store the value as a string. Essentially it uses the value’s “toString” function and stores that. This means that if we’re saving a number, the value returned by the getItem function will need to be sent to the parseInt or parseFloat function afterwards.

Note: Mark Pilgrim over at diveintohtml5.com has a great piece of JavaScript to detect if localStorage is available on a client’s browser. Make sure you’re detecting if your clients have this capability or, if you’re like this site, you can just tell everyone to get with the times!

Storing Arrays And Objects

Using basic data types such as strings and numbers with the storage objects is straight forward. It gets a little more tricky when we want to put an array or an object into storage. Since using the “toString” function on each of these data types doesn’t return a good representation of that data type, we’re going to get some unexpected results. Take a look at the example below.

As you can see, storing our arrays and objects in their toString representations isn’t very useful to us. We can’t really use the string the getItem function returns and recreate our objects directly from it. Instead, we’re going to want to convert our objects into JSON and store that instead. Using the browser-native JSON object, we can accomplish this feat.

Using the JSON.stringify function, we can easily convert our variables into their JSON string representation and later convert them back to their original data type form with JSON.parse. This is a very handy feature that should work on most of the latest browsers. One thing to keep in mind when using the stringify and parse functions is that it doesn’t not support objects which contain functions. It’ll throw exceptions if you try to stringify objects with functions. Be sure to use this only on data objects that contain properties only. If you need to use this on more complex objects, you’ll need to create your own custom serialization solution.

Difference between sessionStorage and localStorage

Now that we’ve reviewed the basics of the HTML5 storage mechanisms, lets talk about why there are two different storage objects available to develop with. Each top-level window context has its own instance of sessionStorage per domain. What this means is that you can have two separate tabs or windows open running the same code on the same site and each window will have its own separate storage container.

Think about the case where you are pricing out a vacation on Orbitz.com (or the travel site of your choice) and you have two tabs open. With tab A you pick Las Vegas for your destination and in tab B you pick Disney World. In tab A, you click a link to confirm your flight selection, move to tab B and click a link to confirm your hotel preference, go back to tab A and refresh your Vegas price but suddenly the site think’s you’ve selected a hotel in Orlando for your Vegas trip! Well that’s not right. Even though both tabs are using the same web server session, to the user it should be two complete different sessions. Using sessionStorage, we can keep data that is unique to each tab separate while still maintaining a single session on the web server! One thing to keep in mind though with this type of storage is that once the user closes the top-level window/tab that sessionStorage instance gets destroyed so don’t expect the same session data to always be there.

For persistant data storage we turn to the localStorage object. Unlike sessionStorage, localStorage is shared across all sessions the client has on a single domain. It’s very similar to domain cookies with a couple of major differences:

• Data doesn’t expire – Unlike cookies, we cannot set an expiration date on a particular value. The browser may offer a way to delete all locally stored data for a given domain but there is no way to have data automatically expire. Keep in mind though, in scripts we could also use the Storage.clear function at any time to delete everything from our storage container.
• Greater storage capacity – Officially, localStorage allows for a whopping 5MB of space, and that’s just the recommended size. Some browsers may offer more if browser developers choose to do so.

Did you hear that? Something changed!

The final part of the new storage containers in HTML5 is the ability to listen for when data changes. The “storage” event fires off any time data has changed in the sessionStorage or localStorage containers. We can then register an event handler that’ll get called on every change. There’s no way to prevent the data from changing though as it’s more of an FYI to the rest of your application.

The storage event has attributes that tell us what the old and new values are, what key the change happened to as well as what storage container contains the changed key/value pair. For more information about this event, you can read more at W3C’s storage specification.

I hope this article has helped give you a better idea of the new storage features in HTML5. The best part is that this is just the beginning! In a later article, we’ll talk about the client-side SQL capabilities browsers are starting to implement, which will really open up web applications’ ability to store data.

In previous articles, I have preached the benefits of using jQuery. Its powerful API gives us the ability to create drop down menus and make asynchronous server requests, just to name a few, without needing to write many lines of code. Today I’m going to talk about how easy it is to hook up event handlers with DOM elements using jQuery.

Event handlers the ordinary JavaScript way

Normally when we want to listen for an event on an HTML element, say the “click” event on an input button, we would attach some JavaScript code to the “onclick” attribute of the button that either performs an action inline or calls a function.

This way of using event handlers is perfectly fine and should work in (most) all browsers. But what if we wanted to register more than one event handler? Say we have a handler that keeps an incremental counter of button clicks and a different handler that changes the color of an element every time a button is clicked.

This isn’t really the most useful example but it does demonstrate what I was talking about. We created a helper function called “callBothHandlers” which calls both handlers. We could have also just called both handlers inline from the “onclick” attribute but I feel that’s a little sloppy. In general, I always like to have my events call a single function and from there do what I need to do.

Event handlers the jQuery way

In our example above we have two event handlers being called by a helper function. What happens when we need to be a little more dynamic? Over time one event handler might not be needed any more or a third handler might need to be added. Our example can’t really handle that well because we’ve hard-coded our helper function to only work with the two handlers. It would be great if we could dynamically register N event handlers with an element. Using jQuery and its events functions we can do exactly that. Using the “click” function we can dynamically register event handlers for an element. Lets take the example above and modify it to use jQuery:

Notice a couple of thing we’ve changed. First off is at the bottom of the JavaScript, we’ve added an anonymous function to be called once the page finishes loading. This function will look for the button and then register our two event handlers. Thanks to the power of jQuery chaining we can register both handlers all on one line of code (though I’ve spread it out over a few lines to make it easier to read). Secondly, the “changeColor” function will now set the element’s color using the jQuery “css” function (which modifies the “style” collection by passing it an attribute and value to change it to) and it’s text value on one line instead of taking up two lines as in the first example. Now our example is a more elegant way of getting the results that we want.

Removing event handlers when necessary

Earlier I mentioned the possibility of no longer needing an event handler. You can easily remove a handler with the “unbind” function. You pass to the function the name of the event whose handlers list you want to modify and the function to remove. If we wanted to get rid of the incremental function in our example above we would just call the following code:

It’s as simple as that! The increment handler is now gone but our “changeColor” handler is still in tacked! This really opens up a lot of highly dynamic scenarios without the overhead of needing to write the management logic yourself. In addition to the “click” event, jQuery has event functions for many of the DOM events available. Some useful ones are:

• onfocus
• onblur
• onmouseover
• onmouseout
• onscroll
• onsubmit

Each one of these can be called like our examples above. Just remove the “on” and you have the appropriate name to use in your code. I’ve created a jQuery events demo page that shows you how you can use the focus, blur, and click events plus another demonstration of multiple event handlers registered to a single DOM element. Give it a try and let me know if any other fun examples you can come up with!

First off, I’m shocked that MVC has progressed already to the beta stages of version 3. It seems like yesterday that they just introduced the idea of MVC into ASP.NET development. Secondly, it’s also great to hear that ASP.NET MVC uses jQuery as its standard JavaScript library instead of using the ASP.NET Ajax. This doesn’t mean that your old code is obsolete, the old framework still works. It’s just nice to know that Microsoft can adopt others work as standard, especially in today’s web development. Writing and reading code is easier when everyone is on the same page.

FoodNetwork.com uses mega menus to make it easier for people to find what they need.

Navigation for web sites is an ever evolving topic. It seems like every year or two there is a new and popular way to direct users around your site. The latest craze in site nav is “mega menus”. These menus are similar to file menus found in desktop applications that everyone is familiar with (ie: the toolbar at the top of an application with options File | Edit | View…). File menu-type navigation has been around the internet for a while but what makes mega menus unique is that they flatten out your site so that more options are available to the user. Instead of taking two or three clicks to get the information they need, your users can get it with a single click. While it might look pretty complicated, creating drop down horizontal menus are incredibly easy to make thanks to jQuery.

Start with the HTML

Using a simple unordered list and some CSS, we can create the basic elements of a menu. Take a look at the following example:

The above HTML and CSS uses list items and the inline display CSS property to make our menus appear horizontally instead of the default vertical layout unordered lists normally take on. Each list item also contains a very basic child list with 3 items a piece. If you were making a mega menu, your child items could contain much more advanced HTML than what we’re using here but for our purposes, a simple list will do.

Hooking up events with jQuery

Here’s where the fun begins. What we want to have happen is every time a user rolls over one of our main menu items, it’ll display that item’s children elements. A couple of years ago this would have taken a fair amount of code to accomplish this task but thanks to jQuery we can make a drop-down list effect with a couple of lines of JavaScript.

The “mouseenter” and “mouseleave” events are Internet Explorer specific events but the jQuery framework actually makes it possible to handle this event across all major browsers. We’re using these two events instead of the standard “mouseover” and “mouseout” events because the latter two events can have unexpected behavior leading to our event handlers firing more than we’d like them to. I’m not going to go into the full details of these issues so if you want to know more, read more under the “examples” section of the jQuery documentation.

Anyway, back to our example. The JavaScript above, once the document has loaded, it’ll fetch each of our menu items and register event handlers on both the mouseenter and mouseleave events. The “enter” handler looks for the child list and makes it visible while the “leave” handler looks for that same child list and hides it. It’s a very quick and elegant solution for making a drop down menu. Take a look at the drop down menu demo page to see this effect in action.

With only a few HTML elements, some CSS and a couple of lines of JavaScript, you can very easily add a drop down menu to your web site. You should find doing so will make your navigation both simpler and more robust since you’ll be giving your users more ways to get to the content they really need instead of having to know your site’s layout by heart.

(Image courtesy Food Network)