May 14, 2012

Techbits #15: Bookmarklets


Provided in this Techbit are shortcuts - no, not to happiness! - known as "Bookmarklets" that you could create and use to better your productivity. They're also referred to as "Favelets" sometimes.

I know what a bookmark is but what is a Bookmarket?

Bookmarklet is an enhanced form of bookmark. While a bookmark is static in nature and can be used to visit a fixed URI, a bookmarklet is dynamic and can be used to visit URIs constructed on various inputs. The input can either be based on a textbox prompted to the user or what you've selected on the webpage or even constructed automatically based on the context of the current webpage.

How to create Bookmarklets?

If you're a user of Firefox or Chrome, it's very simple; all you need to do is add a bookmark, name it appropriately and specify the Javascript code in the "Location" or "URL" part of it.

If you're a user of IE, it is time to start using either Firefox or Chrome :)

Are there some examples that I can use?

Yes, given below are few examples to serve as illustration; you can build much more complex ones. If you've selected any text, then the bookmarklet uses it; otherwise, it prompts you to provide the input.

<code>Dictionary</code> - This can be used to search for the words on dictionary.com. You can just drag the link to your Bookmarks bar. If it's IE, you can right-click on the link and choose "Add to favorites".

Here is the code used to create the bookmark:

javascript:void(q=getSelection());if(q%20==%20'')%20void(q=prompt('Enter%20word:',''));%20if(q)%20window.open('http://dictionary.reference.com/browse/'%20+%20escape(q));void(0)

<code>To English</code> - Thanks to www.labnol.org - This can be used to translate text using Google Translate. You can just drag the link to your Bookmarks bar. If it's IE, you can right-click on the link and choose "Add to favorites".

Here is the code used to create the bookmark:

javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=auto|en&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=auto|en&tbb=1&ie='+e;};

What more?

There's quite a lot of information available on the net in this regard. The aforementioned samples are just a tip of the iceberg. Apart from these, there're lot more general bookmarklets that can be used to effectuate better productivity during your browsing. Few links are provided below for further reading:

http://marklets.com/
http://www.mvps.org/dmcritchie/ie/bookmarklets.htm
http://www.labnol.org/internet/guide-to-useful-bookmarklets/7931/

No comments: