ToolsOne of the things that can be very useful for developers and designers alike are the various bookmarklets that have been created. For those that don’t know what bookmarklets are, they basically are applets, small computer applications, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. They are simple tools that extend the surf and search capabilities of Firefox and Explorer web browsers.

For web designers and developers they can good for many different things. There are so many bookmarklets available on the internet, and many people probably don’t even know they exist. In the past few weeks I have collected some I have found to be really useful for what I do, and I’ve made a list below. The title of each bookmarklet contains the code snippet that follows as the link, which is essentially the program.

Bookmarking Bookmarklets

To save these, simply drag the linked title of the bookmarklet to your Bookmarks Toolbar or Links Bar, or right click the links and select Bookmark this Link or Add to Favorites.

While viewing a page you want to use the bookmarklet on, click the bookmarklet from your Bookmarks Toolbar and it will perform the task that it is programmed to do.

Press This

Collect and share bits of the web easier and faster than ever with Press This, the new WordPress bookmarklet. With this you can automatically write a blog post about something you find online. You can even post just the text you want to share by highlighting it first.

1
javascript:var%20d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='http://tweeaks.com/wp-admin/press-this.php',l=d.location,e=encodeURIComponent,g=f+'?u='+e(l.href)+'&t='+e(d.title)+'&s='+e(s)+'&v=2';function%20a(){if(!w.open(g,'t','toolbar=0,resizable=0,scrollbars=1,status=1,width=720,height=570')){l.href=g;}}setTimeout(a,0);void(0);

jQuerify

This is a nice little tool that allows you to play around with jQuery on a page that doesn’t already have jQuery loaded and see the results immediately. Find it on LearingjQuery.com.

1
javascript:%20(function(){var%20el=document.createElement('div'),b=document.getElementsByTagName('body')[0];otherlib=false,msg='';el.style.position='fixed';el.style.height='32px';el.style.width='220px';el.style.marginLeft='-110px';el.style.top='0';el.style.left='50%';el.style.padding='5px%2010px%205px%2010px';el.style.zIndex=1001;el.style.fontSize='12px';el.style.color='#222';el.style.backgroundColor='#f99';if(typeof%20jQuery!='undefined'){msg='This%20page%20already%20using%20jQuery%20v'+jQuery.fn.jquery;return%20showMsg();}else%20if(typeof%20$=='function'){otherlib=true;}%20function%20getScript(url,success){var%20script=document.createElement('script');script.src=url;var%20head=document.getElementsByTagName('head')[0],done=false;script.onload=script.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;success();}};head.appendChild(script);}%20getScript('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',function(){if(typeof%20jQuery=='undefined'){msg='Sorry,%20but%20jQuery%20wasn\'t%20able%20to%20load';}else{msg='This%20page%20is%20now%20jQuerified%20with%20v'+jQuery.fn.jquery;if(otherlib){msg+='%20and%20noConflict().%20Use%20$jq(),%20not%20$().';}}%20return%20showMsg();});function%20showMsg(){el.innerHTML=msg;b.appendChild(el);window.setTimeout(function(){if(typeof%20jQuery=='undefined'){b.removeChild(el);}else{jQuery(el).fadeOut('slow',function(){jQuery(this).remove();});if(otherlib){$jq=jQuery.noConflict();}}},2500);}})();

960 Gridder

960 Gridder is an excellent tool for any web developer / designer that wants to easily align, match and/or lay out websites.

1
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://gridder.andreehansson.se/releases/latest/960.gridder.js';})();

ReCSS

NOTE* The title of this links to the source of the bookmarklet. For some reason I am not able to embed the link in the page.) This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.

1
javascript:void(function(){var%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i=0&&s.href)%20{var%20h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new%20Date().valueOf())}}})();

FontFriend

This is a bookmarklet made for web designers who want to rapidly check how different fonts and font styles look on their screen without editing code and refreshing pages.

1
javascript:(function()%20{if(typeof%20jQuery=='undefined'){var%20jqit=document.createElement('script');jqit.type='text/javascript';jqit.src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(jqit);}%20_my_script=document.createElement('script');_my_script.type='text/javascript';_my_script.src='http://font-friend.googlecode.com/svn/trunk/font-friend.js';document.getElementsByTagName('head')[0].appendChild(_my_script);})();

Share on Facebook

I think this is pretty much self-explainatory. If you don’t know what Facebook is, then you should turn off your computer right now, and smash it with a baseball bat. And if you don’t know what Facebook Share is either, then after you smash your computer, take it to a field somewhere, and light it on fire, because you live in the stone-age. Too harsh? Oh well, no one is reading this anyways so who cares.

Why don’t you just go ahead and click the "Share on Facebook link and give it a go. The more you share the more you know!

1
javascript:var%20d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1263480631&u='+e(l.href)+'&t='+e(d.title);1;try{if%20(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z)%20{a=function()%20{if%20(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0);

Google Backlinks

With this bookmark, you can quickly and easily do a Google search of all the sites linking to the page you are currently on. There are several other bookmarklets like this, but I think this was the most useful to mention.

1
javascript:location%20=%20'http://www.google.com/search?q=link:'%20+%20escape(location);

Blend This!

With this you can easily submit a link or website you like to TheWebBlend.com. You do need an account in order to sumbit your links.

1
javascript:q=(document.location.href);t=(document.title);s=(document.getSelection());void(open('http://thewebblend.com/submit?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&body='+encodeURIComponent(document.getSelection()),'',''));

If you know of any more extremely cool or useful bookmarklets post a comment and share them with me. I’m always interested in anything I don’t already know about!

Don’t forget to bookmark this page!

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!