Smashing Magazine we smash you with the information that will make your life easier. really.

Bookmarklets, Favelets and Snippets

January 24th, 2007 in Developer's Toolbox | 23 Comments

If you’ve used them once you’ll never be able to work without them. Bookmarklets (or Favelets) are tiny Javascript-Snippets, which are stored within a bookmark and add particular functionalities to the browser you’re using. It doesn’t matter whether you browse, bookmark, look up, search, design or program - depending on your interests, bookmarklets can significantly enhance your efficiency and productivity. However, if you take a look around, you’ll find hundreds of sites, which offer favelets of any possible kinds. Indeed, you’ll find thousands of bookmarklets, many of which you aren’t really interested in. What you eventually are interested in, is a hand-picked choice of the most useful snippets you can directly copy and use from one single page.

We’ve chosen some of the most useful bookmarklets, written new ones and listed them below. You’ll find the source, from which a bookmarklet is copied or modified, or a detailed description of the snippets, in the brackets.

To install the bookmarket just drag’n'drop the JavaScript-Code from the link to the toolbar of your browser. To use the bookmarklet select the text on a page or an address of a web-page and click on the bookmarklet. If you don’t select any text or url and click on the snippet, you’ll get a JavaScript window, in which you can input text manually.

If you use many favelets, you might be willing to check out the Blummy Bookmarklet (The Bookmarklet Management Bookmarklet), a free tool for quick access to your favorite web services via your bookmark toolbar.

Looking up

Acronym & Abbreviation Finder to look up unknown abbreviations and acronyms.
Amazon.com, Ebay.com enable to search for products with one click.
Google Search Bookmarklet [sf], del.icio.us, Wikipedia.com can be used to look up for any information you might ever be interested in.
Cddb.com, Discogs.com and Last.FM to look up CDs information, popular tracks bands, music styles etc.
Internet Movie DataBase (IMDB), EPGuides.com deliver information about movies and TV-series.
Google Translate [sf] translates from 5 languages to English (the language will be detected automatically).
Oxford English Dictionary [kp] and Merriam-Webster Word Lookup (with audio samples) [XHTMLed] explains English words and terms.
myBookmarklets is a collection of useful Bookmarklets you can use every day. You’ll find there all Google-Search-Bookmarks, Look-up-Bookmarklets in different encyclopedias and so called “Multi-Bookmarklets”, which enables you to retrieve the information you’re looking for from many sources - simultaneously and automatically.

Social Networks, Web 2.0, Online-Services

BugMeNot delivers Login- and Password-data for services which require user registration and authentification.
Check PageRank returns the PageRank of the page, you are visiting.
Delicious: Super Fast Bookmarklet, Lazy Sheep For Del.icio.us and posticious let your store your bookmarks in del.icio.us instantly.
Filext.com informs you about unknown data types and file extensions [wb].
Flickr.com: instant search in Flickr.
Microformats Bookmarklet helps to extract existing hCards and hCalendars and can show and store contacts and events on a given page.
MultiSubmit bookmarks one page in 19 social networks - of course, if you are registered in them.
Send To Flickr [vh]: to submit an image from a page to your personal Flickr-Fotostream, just select the image, click on the snippet and confirm your submission.
Similicious lists similar pages to the page you are currently on.
Technorati lets you explore what other users write or talk about in the blogosphere.
TinyURL shortens your web address URL. [el]
Video Bookmarklets lets you download YouTube- and Google-Video-files automatically.

Web-Design, Web-Development

computed_styles lists the computed styles of an element and of its ancestors. [sf]
list_classes lists classes used in the document. [sf]
show_blocks draws borders to show tables (colors indicate nesting), paragraphs, and divs. [sf].
test_styles type in CSS rules to experiment or to create a temporary user style sheet. [sf]. Alternative: edit_styles experiment with changes to the page’s style sheet. [sf].

Color List Favelet creates a color palette which is used on a given page.
Elements inspector offers the same functionality as Aardvark Firefox Extension; it shows the information about Div-Containers, Headers, Paragraphs etc. [Favlets.com]
Favelet Suite is a package of 16 Bookmarklets, which can be used in web-development. Document Tree Chart, Javascript Object Tree, Mouseover DOM Inspector, Ruler, Style Sheet Viewer etc.
Layout Grid Bookmarklet creates a Grid-Overlay of the page; useful, i.e. if you want to calculate the layout size.
SEO Bookmarklets is a collectino of 22 Favelets for SEO-analysis. It uses search engines, social networks and further services.
Web Developer Favelets: 9 simple Favelets a web-developer will use on a daily basis.
string2html converts strings to HTML-Entities [wzb].

Links Functionality

Finds and follows a link to a “print-friendly” version of a page [sf]
click2zap removes elements from the page for printing (remove text/images to save paper/ink) or reading comfort purposes. [s. click2zap]
Set Target-attribute of all links at “new” (open in new window) [Bookmarklets.com]
Set Target-attribute of all links at “self” (open in current window) [Bookmarklets.com]
Show all mailto-Links [bookmarklets.com]
Hide visited Links [sf]
Add sorting functionality to a table [sf]
Search on a page for a keyword and highlight it [sf]; alternative: Highlighter.
Show the data stored in the password fields [sf]
To mark the links of a page and Create a pop-up-windows, which lists all links on a page [stichpunkt].
Show all links as footnotes in printed version [askmefi].

Better Navigation

Jump to the parent-page (abc.com/archive/2006/ -> abc.com/archive) [sf]
Jump to the top-level-page (abc.com/archive/2006 -> abc.com) [sf]

Tools for Bloggers

Show the last archive copy of the current web-site [sf]
Create HTML-Code with a link to the current page [sf]
Send a link to the current web-page [wb]
Send highlighted information from a web-site via e-mail - automatically [wb]
Quote from a Blog copies selected text and pastes it automatically with via-Links in a pre-defined HTML-Code-Template. [b101]
Creates the XHTML code to include the current image. [sf]

Useful Tools

Bookmarklet Crunchinator minimizes the size of bookmarklets and creates Oneline-Links, which are typical for Favelets.
Bookmarklets Builder simplifies the writing of Javascript-Snippets with an integrated Formatter and DOM Browser.
The Bookmarklet management bookmarklet (The Bookmarklet Management Bookmarklet), a free tool for quick access to your favorite web services via your bookmark toolbar.

Further Collections

All the Bookmarklets! a huge bookmarklets collection, in which you’ll find everything you always wanted - or not wanted.
Andy Budd’s Bookmarklets: Andy Budd’s personal choice.
Francois Jordaan’s Bookmarklets: a popular collection with many links.
Opera Bookmarklets and Phil Burns’ Collection presents Favelets for Opera Browser.
Pixy: Let’s Favelets: a collection of Snippets for Web-Development, site presentation and Links functionality. Worth mentioning are List computed (cascaded) styles, Create comparing Windows and Window Resize Bookmarklets.
Squarefree Bookmarklets: a catalog with hundrets of Favelets, with detailed description and in 16 categories.
Tantek Favelets: a collection of Web-Design-Bookmarklets by web-guru Tantek Celik. Multivalidator and Microformats Bookmaklets.
XHTMLed Bookmarklets: an enormous collection of useful Favelets.

Published in Developer's Toolbox, January 24th, 2007
Tags: bookmarklets, tools

1.

Miles (January 24th, 2007, 2:59 am)

Wow, I haven’t heard of almost all of these, I am defiantly going to try and take advantage of some of these. Thanks!
- Comment
2.

soho (January 24th, 2007, 4:39 am)

I just recently discovered the power of bookmarklets and the likes (due to the switch from firefox to shiira to safari, in the need of del.icio.us integration), and so this great post is right on spot.

Thank you for that!
- Comment
3.

Alex (January 24th, 2007, 8:38 am)

A really nice collection. But some of them are only “javascript:q=” for me (one of them is check page rank).
- Comment
4.

Ganesh (January 24th, 2007, 9:58 am)

Man! Do you get paid to do this?!? I am sure even guys who get paid wont do such a good, read _great_, job! Awesome!
- Comment
5.

pierro marie (January 24th, 2007, 1:05 pm)

howdy;
I admire again and again your would list from the Web crate; and: again and again amazingly.
therefore it is interesting to known , which of you favorite would be . . .
- Comment
6.

Jack (January 25th, 2007, 12:53 am)

Great list, thanks. One more for your online services section: Link [www.onlywire.com] - it lets you post to several social bookmarking sites simultaneously.
- Comment
7.

Kathy (January 25th, 2007, 5:37 pm)

Thanks for another great collection of resources!
- Comment
8.

Corey (January 28th, 2007, 9:31 am)

Wow. Blummy looks promising, and this is a great collection of bookmarks. I found that, if you have the Del.icio.us extension enabled for Firefox, bookmarking these with the service and saving them with a tag like “bookmarklets” can make these easily accessible as well.

Alternativly, I keep a “bookmarklets” folder (I moved the Bookmarks Toolbar next to my Firefox menu before enabling Del.icio.us extension; in effect, this gives me two sets of bookmarks, one that syncs with the Del.icio.us server, and one that does not) which also provides easy access for these.

Again, nice list, and an as-always great post!
- Comment
9.

had (February 14th, 2007, 4:55 pm)

MultiSubmit r00x :)
- Comment
10.

marcel (April 3rd, 2008, 7:27 am)

I am curious if there is any way to show the “favicon” for bookmarklets (Firefox)? I always see the ugly “blank page” icon next to my bookmarklets.
- Comment

69737 subscribers

Sponsors
Advertise with us!

Browse all jobs » Post your jobs now!

Smashing Links

All Posts

Marketing Consulting by ACS

Webtips

Sideblog

Footers can be a place where a designer can let his creative juices flow a little more freely. Christian Watson shows 76 excellent footer designs. More footers.

Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.

How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.

A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.

In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.

One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.

Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.

Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.