Mashup Redo!

My first mashup was way back in 2006 and like everyone else, I did one with Google maps. It was really in vogue to do a mashup with maps. It meant you got to play with AJAX. You were hip! My version looked like this.

I integrated the Google Map API with data from a Zip Realty feed. I wasn't building a competitor to Zillow or Trulia. I was just building a prototype for fun. So, I focused on homes in the Silicon Valley. When you clicked on a city, the list of homes for sale would load and when you clicked on a home, the information on the property would show up on the map in a big bubble pointing to a little house on the map.

I implemented my own drag and drop and asynchronous access to the feed. It all worked OK, but like all things there were things that could be improved. So, I updated it to this. It looks the same, but internally it's vastly different.

I'm using the YUI library. It has all the basic things that any web developer would want and it's free. There are other libraries of course, but with so many, why build your own? I use YUI for event handling, drag and drop and AJAX. Fundamentally, using a library abstracts all the complexity of doing those kinds of things ( and fixing bugs that go along with it! ).

I'm using event delegation. Minimizing the number and attaching events at the highest level of the DOM is important. First, reducing the number of events affords better code maintainability. Second, attaching events at the highest level allows you to make innerHTML swaps without reattaching events ( not that in the mashup I need to do this -- I don't -- , but in other cases, reattaching events is a big headache and not doing that is awesome ). Keep in mind that to do event delegation requires you to use DOM2 event handling. So, I've removed all DOM0 event badness in the updated example. In fact, we attach only one click handler to the entire mashup!

I was "over div-ing". I'm sure "div-ing" isn't a word, but how about "overly marked up"? I removed a number of div elements and instead used list elements. List elements are more meaningful. It looks like a list so it should be treated like a list. Most of these lists contain links.

I'm using the CSS hover pseudoclass. My first mashup handled background changes with JavaScript. We're in 2008 and there's no need to do that because modern browsers all support a:hover ( keep in mind a:hover won't work in IE6 ). So, we've removed a small chunk of JavaScript that's doing something unnecessary and replaced it with a simple CSS selector rule. JavaScript is great, but using it to make background changes is probably overkill. If you can do something in JavaScript that can be done in CSS, take the CSS approach. It's a lot easier to maintain and understand.

So, feel free to study the old versus the new.

Have fun!