Jquery Tag | Jacob Emerick's Blog

Popular Music Project

Over the last few months I've been working on a fun side project to display what music I've been listening to recently. I decided to break this information down by albums and number of songs played over a period of time. While the data itself is straightforward and could be displayed either as a list or table, I wanted to make something visually interesting that would show the most 'popular' albums in my library.

Note: you can view this project at Jake's popular music site.

Before I could get involved in the display I needed to find a way to grab the data. Luckily, last.fm has a solution for this. Using their 'scrobbler' media plug-in, I am able to upload my music plays from all of the different computers I use (desktop, laptop, work computer) to my profile. They also have an API that returns this information as an XML feed. I query this API with a daily cron to pull the most recent information to my database.

In order to make the display dynamic I needed to do some ...

• Tags:
• dynamic
• jquery
• music
• my site

AJAX Dynamic Template Solution

One issue I've always had with the typical templating methods over the years is the waste of bandwidth. Even with smart functionality on the backend combining the dynamic and static information on each page, you're still sending an entire new html page for each URL requested by the client, with a good portion of it's content duplicated from the last page they were on. If there was a way to only send the new information, the body of the page, it would save on bandwidth and could provide a better user experience.

I had the opportunity to create such a system with one of my previous clients. They had specifically requested a Flash-like loading feature on each of their pages, so I suggested using AJAX to load the data and refresh the page. There were several problems that I had to address with this system, though.

1. Links would be controlled by Javascript, not the browser. Since the address bar wouldn't change between pages, bookmarking and history wouldn't work correctly.
2. Non-Javascript browsers (robots) wouldn't see the
 ...

• Tags:
• ajax
• jquery
• template

Setting up the Hiking Website

Even though my waterfalls site turned out to be a great way to chronicle adventures through wilderness, it has several areas that are lacking. The biggest area is the Google Maps functionality, which is shaky at best. It can only show the end points and major points along the route, but I didn't have enough data to actually upload the suggested route (waypoint by waypoint) for each journey. Also, I didn't have any way of displaying or archiving my other adventures with the waterfalls site, so I decided to make an individual web project: the hiking site.

The layout for this site was fairly simple: a full screen map with removable sidebar containing the hike and view options. Utilizing the jQuery framework would allow me to add the Google Maps pieces easily and use cool animation on different elements. The largest step was the data transfer. I only wanted to return xml, preferably formatted as KML, and use Javascript to parse the data and display it correctly.

Breaking it down to the user's view... A user will visit the main page and see ...

• Tags:
• ajax
• google api
• javascript
• jquery
• kml
• my site

Future Side Projects

In my free time, I try to keep up with web development for my personal sites. Over the last year, the gem of my side work became the 'Waterfalls of the Keweenaw Area' website, a truly complete and detailed project. Due to this project, I learned more about Google Map API, KML files, and general content management then I would have by waiting for appropriate job projects. The waterfalls site involved much more than just making a website - I had to go out and collect the data (photos, directions, GPS points) manually - and now I have several ideas for future projects stacked up.

One project that is mostly completed is a Daylight Tracker. This application will print out calendars and graphs with sunrise/sunset information based on the current latitude and longitude of a user. While it's completely functional, I've decided to overhaul the frontend to utilize jQuery and JSON as an additional hurdle.

The next project on the radar is a full page Google Maps application that I can start linking my photos, hiking trips, and waterfall ...

• Tags:
• flash
• jquery
• kml
• my site