Vitaly Friedman

About The Author

Vitaly Friedman Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Bookmarklets, Favelets and Snippets

Design 379 Bookmarklets 3 Tools 164

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...

Make your first API call
Make your first API call

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

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.

    • <li>MultiSubmit bookmarks one page in 19 social networks - of course, if you are registered in them.</li>
<li><a href="javascript:t='';for(var%20n=0;n&lt;document.images.length;n++){t+='&lt;a%20href=/%20onclick='document.f.url.value=document.images['+n+'].src;document.f.submit();return%20false;'&gt;&lt;img%20border=0%20src='+document.images[n].src+'/&gt;&lt;/a&gt;&lt;br%20/&gt;'};if(t!=''){document.write('&lt;p%20&gt;Click%20an%20image%20to%20add%20it%20to%20your%20photostream&lt;/p&gt;&lt;form%20name=f%20action=http://www.flickr.com/tools/sendto.gne%20method=get&gt;&lt;input%20type=hidden%20name=url/&gt;&lt;/form&gt;'+t+'');void(document.close())}else{alert('No%20images!')}">Send To Flickr [</a>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.</li>
<li><a href="javascript:q%20=%20&quot;&quot;%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt(&quot;You%20didn't%20select%20any%20text.%20%20Enter%20a%20search%20phrase:&quot;,%20&quot;&quot;);%20if%20(q!=null)%20location=&quot;http://similicio.us/search.php?url=&quot;%20+%20escape(q);%20void%200">Similicious</a> lists similar pages to the page you are currently on.</li>
<li><a href="javascript:q%20=%20&quot;&quot;%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt(&quot;You%20didn't%20select%20any%20text.%20%20Enter%20a%20search%20phrase:&quot;,%20&quot;&quot;);%20if%20(q!=null)%20location=&quot;http://www.technorati.com/search/&quot;%20+%20escape(q);%20void%200">Technorati</a> lets you explore what other users write or talk about in the blogosphere.</li>
<li><a href="http://1024k.de/bookmarklets/video-bookmarklets.html">Video Bookmarklets</a> lets you download YouTube- and Google-Video-files automatically.</li>

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

Better Navigation

Tools for Bloggers

Useful Tools

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.
  • 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.

More Articles on Design

→ Read more

White Space and Simplicity: An Overview

by Vitaly Friedman

Last year we've seen a lot of simple, even minimalistic designs, which impress not with the amount of presented information but with the way the information is actually presented. Complex layouts are giving way to simple 2-col- or 3-col layouts, which usually have large amount of white space without any content whatsoever. Indeed, the importance of both white space and simplicity...

→ Read more

Fertigo - Free Font Of The Week

by Vitaly Friedman

We continue to collect most beautiful high quality freefonts, which can be used for both private and professional projects without any restrictions whatsoever. They are hard to find, but the search is definitely worth it. Over the last 30 days we've managed to find few oldies such as famous Geo Sans and Mank Sans by Manfred Klein, but also some newbies such as Jos Buivenga's Diavlo. You...

→ Read more