d’bug update — down and dirty with jQuery

I recently made an update to d’bug, which finally gave me a good reason to load in the jQuery JavaScript framework. I wanted to share it as example of how much time and effort a client-side framework can save you if you are willing to break a few “rules” (the first of which is a lack of accessibility).

In the sidebar I feature six books that link off to Amazon.com. Clicking through and purchasing a book benefits this blog because I get a small percentage of the profit. After viewing the order history though, I noticed that none of the books I was actually featuring were being chosen. Most did not focus on a language at all, but generic programming paradigms.

Wanting to offer Web developers a broader selection based upon the decisions of other experienced Web developers, I included more books. However, I did not want the books to expand the sidebar considerably. So, I created an XML file, populated it with the necessary information, and I use jQuery to browse the new book selections six at a time.

The XML is not pretty, and the interface is not as sexy as some carousels. Yet, when my baby daughter wants her daddy to play, I am perfectly willing to make some sacrifices with an agile update. Because of jQuery the development time was only an hour, and then another hour to populate the XML and modify the product image sizes.

I plan to make modifications, as this certainly can be considered a beta update. The images do not preload, and there is no previous/next functionality. The “view more” link will simply rotate back to the beginning of the book selections. If you view the source, you can see how easy this was to create. Feel free to take and modify the code to your liking.

[ Update ] I have decided to remove the books widget altogether, as well as Google advertising, and our hosting company referral. You could say I am eliminating the noise.

  • Posted by Brian
  • April 29th, 2008

Leave a Comment

Comments are moderated. No profanity. Only <a>...</a>, <blockquote>...</blockquote>, and <code>...</code> are allowed.

Seperate paragraphs by pressing the "Enter" key twice, or press it once to break to a new line.

4 Comments

#01, Apr 29 2008

Dan Shields

Pretty cool and unique. I don’t think it matters if this is accessible or not. I don’t imagine to many programmers who need assistive are reading your blog.

#02, Apr 29 2008

Brian

Thanks for the feedback Dan!

#03, May 02 2008

zetxek

When you click in the “view more” link, and it has not loaded the images yet so it has an empty space where the images will be, the space reserved to the books list gets collapsed, so the “comments” form goes up. This lasts very little, maybe a portion of a second.

Then, when the images get loaded, the comments form goes down again. So, as it happens so quickly, looks like if there has been a “flicker”…

Appart from that, the sidebar widget looks pretty light and nice enough :)

#04, May 02 2008

Brian

Hi zetxek,

Thanks for the feedback. I noticed the same thing myself. For the next iteration I plan on preloading the images, and hopefully that will eliminate the flicker.

It should be up in the next few days — I’ll post another update when it is.