Published in Widgets that Work on Wednesday, November 2nd, 2005
I stumbled upon a new site thru my referers, Dark Eye. Entitled a living design showcase, it has a few extras that help it stand out from other showcase sites.
Before I get too far into this, a quick note to say that this is the first in a series of posts in a feature series called Widgets that Work. More details...
A quick word about the site itself, which could be considered yet another design showcase site, except this one not only includes commenting and voting, but also color pattern features - both popular and unpopular - and it allows people to sign up and create their own galleries (example), complete with reviews and ratings.
I'm not sure how popular this site will become, given the amount of other design galleries out there, but I'm certain that this web based application could be applied in other as-yet-untapped areas and perhaps do quite well.
So, the widget that caught my eye on Dark Eye works by calling up a thumbnail image of a site when you hover over a link to that site. (I'm sure this idea has been done/used before, for me it's the concept that counts, not who used it first).
The result is that it allows them to list a bunch of links to sites, without having a whole whack of thumbnails to deal with. This gets more information on the page, something which, if you've seen the new homepage here on Fiftyfoureleven, I tend to like.
Another bonus is that the thumbnails themselves aren't preloaded, but fetched when you hover over them. This is a beautiful concept, as it quickens the download of the original page, and downloads content on demand without reloading the whole page. Nice.
So there you have it. A new member in the Widgets that work series.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Yeah, that is pretty nice. I didn't look to see if they're doing this AJAX-style or not, but you could easily use AJAX to pull up these kinds of thumbnails (as well as other info, if you want) without reloading the page and without preloading the images.
Yeah, I wonder if that is what they are doing on ESPN as well. I think I saw it on the NFL home page, in the links on the right. The delay is too long for them to be getting that info from a title attribute.
As for these guys, they are using Ajax to fetch the images. The Live Headers extension for Firefox indicates that an image is being fetched when I hover (admittedly I didn't venture too far into the source code)...
It’s not strictly ajax. The browser can handle loading dynamic images with just a bit of JavaScript. But they are loaded on hover.
Hey Michael... Right, that is pretty obvious, now that I think about it. Honestly, I had just switched on my computer... (massive d'oh! over here...)
The ESPNers must be using XMLHttp to get the data for the hover, but of course you can just refer to the url of the image...
iStockPhoto does the same thing with their category listings. I checked out their source code and they have a series of JavaScripts that seem to be doing the magic. But is slick that is for sure.
I was really hoping to find that the browser was actually rendering the page in the popup, but it looks like it's just loading a thumbnail that's stored on the server. Bummer.
Yeah, but nonetheless a nice way to get more data on the screen.
Now, rendering the page in the popup would be interesting. A sort of layered i-frame...