BRAMUS.IN.SPIRE.US – Bookmarklet to visualizing your’d sites

del.icio.usI myself am a huge fan … the handiness of tagging sites I’ve seen over at work and checking back that list at home just does it for me. Above that it’s darn handy to finding back a site by just typing in some keywords (that flash site with the green background most likely will be tagged “flash background”).

About two weeks ago, while working on a design for My Master Plan, I took a look the list of sites I tagged ‘inspiration” (public list isn’t that long … always tagging stuff as private now) to – quite obviously – get some inspiration. Opening each link page by page just made a bit nervous … so I decided to speed things up and knock up a small bookmarklet that allows me to see screenshots next to each site (as automatically does with tagged flickr photos).

Bookmarklet you say?

The bookmarklet is plain easy: loop all tagged links (thank you flickr for making them all h4 elements!), and place a thumbnail next to the link. But where to get the thumbnail from?

Whilst checking out a few services that provide these screenshots I first came up with websnapr as main source of thumbnail-leeching. When running the bookmarklet created the first few tagged links showed up nice (viz. the thumbnail or “Thumbnail has been queued“-message) … but after a few I got some “Forbidden Request”-messages. - websnapr
D’oh! Apparently websnapr does some IP checking 🙁

Bye bye websnapr

Other provider the images could easily be snapped from was, but that service sucks big time imo. Most of the images return “Soon” and only the .tld’s are generated. When having a group tagged on flickr, you’ll see a thumb of (the thumb is outdated, not?) … lame! - getting it all wrong…

What now?

Finally ended up over at’s website thumbnails service and found it good. Images are generated from the correct URL, no errors on getting 100 pics at a time.Did however find that sometimes the screenshot will to totally wrong layout-wise … but that happens only once in a blue moon (see third thumb in pic and compare that to the one from websnapr). See next post for update -
Yay, thumbs! Somes are sk(r)ewed though.

I don’t know how long the service will hold as it does not appear to cache the thumbnails and doesn’t do any checks. And the rendering issue that happens every now and than also bothers me a bit (although I’m already happy to seeing the colors of a site). However, this cannot be an excuse to not posting this lovely bookmarklet, so here it is. See next post for update

BRAMUS.IN.SPIRE.US – The Javascript

(wanted to post draggable bookmarklets, but looks some plugin is f*cking something up, so here’s the code instead. Just create a new bookmark and paste in the code as URL.)

BRAMUS.IN.SPIRE.US (websnapr edition)

javascript:function preview() { var tags = document.getElementsByTagName('h4'); for (i = 0; i < tags.length; i++) { tags[i].parentNode.childNodes[5].innerHTML = '%22%22'; } }; preview();

BRAMUS.IN.SPIRE.US (artviper edition) See next post for update

javascript: function preview() { var tags = document.getElementsByTagName('h4'); for (i = 0; i < tags.length; i++) { tags[i].parentNode.childNodes[5].innerHTML = '%22%22'; }}; preview();

And yes, those bookmarklets are Firefox-friendly 😉

Final note

Now, if only I knew how to leech them pics from Alexa or any other service that uses some sort of hashing (didn’t even bother researching that … had to start working on that design as mentionned in the first second paragraph ;))


And no, isn’t available anymore 🙁

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.