Tuesday, November 24, 2009

5 Useful Bookmarklets

It's been a while since I wrote about my favorite web "technology" ... bookmarklets. Despite the huge collection I have, I'm constantly coming across some awesome-written bookmarklets. I've also had the opportunity to write a couple for personal use (to help with blogging, etc.), and I wanted to share 5 useful everyday bookmarklets.

To learn more about bookmarklets and what they are, I invite you to read this past post. To summarize, a bookmarklet is a a term that may have originated as a result of the merge between "bookmark" and "applet." Browser-independent, bookmarklets add functionality to any web browser. Consisting primarily of JavaScript code, bookmarklets can be stored in the bookmark/favorite bar of any browser and used from there to perform useful tasks affecting (in most cases) the current page.

Bookmarklets Folder

In short, bookmarklets allow you to temporarily modify the current page to do something you need. Once you refresh the page, or revisit it, it will be back to the way the web page designer intended it. For a more permanent solution, using the very same JavaScript solutions you find or write, you basically need that JavaScript to run on the specified page all the time ... automatically --And that's exactly what Greasemonkey is and does.

With services like Xmarks, which give you access to your bookmarks from practically any where there's an internet connection, bookmarklets are an excellent cross-browser way of performing some tasks without the need for toolbars (which can be a security risk). Here are 5 bookmarklets, which I'm hoping you find useful:

1. Linkify

My mother sends me all kinds of emails, which are usually links she's come across or forwards from other people. I guess Yahoo! Mail doesn't automatically convert links into ... well ... links. Instead, it keeps them as non-clickable text. That's where Linkify comes in. When I click on the bookmarklet while I've got her email up on the page, it makes what was once a non-clickable link into one that is.


Simply drag the "Linkify" link above to your browser toolbar. Alternatively to dragging and dropping, you could right-click the link and click "Bookmark This Link" in Firefox (my browser of choice), or "Add to Favorites..." in IE. Of course, IE will present you with some blocks to running them, which's why most serious-net-browsers do not use IE.

2. List All Links

Sometimes it's handy to list all the links on a page. I use it on pages where music is listed, but don't want to fiddle with all the nonsense. I also use it to test pages and ensure that all the links work instead of scrolling or finding out if an image is a link or not. You get the idea.

List All Links

Like the "Linkify" bookmarklet above, drag the "List All Links" link above to your browser toolbar.

3. Edit Current Website

This bookmarklet turns the current page into a lite WYSIWYG, and helps me with productivity/blogging, but can also be for fun. Imagine changing the headlines at a major newspaper website with your own words, taking a screen shot, etc. Its best use, however, comes with altering text on the fly allowing for easier copy & paste.

Edit Current Page/Website

4. Favelet Suite

The Favelet Suite bookmarklet is the Swiss Army knife of the web design bookmarklet world. It includes the following features:
  • Color List
  • Document Tree Chart
  • HTML Attribute Viewer
  • HTTP Header Viewer
  • Hidden Field Modifier
  • Javascript Object Tree
  • MODIv2
  • Mouseover DOM Inspector
  • Object Dimensions
  • Page Info
  • Remove Children
  • Resize Fonts
  • Ruler
  • Show Source
  • Style Sheet Tweak
  • Style Sheet Viewer
Favelet Suite

5. Linearize

Reformats a page so that the entire contents is in a single column. It's great when you want to copy a lot of text from a page. I use it to more easily grab text from long articles with complex layouts, which you can dump into a text-to-speech reader when your eyes are tired (geeky, right?). (originally by Jesse Ruderman)



Here's an extra tip, which builds on the same principle as bookmarklets but is not really one. Still, you may find this simple tip handy if you always have a web browser running on your desktop screen in maximized mode, which most of us do.

There are instances when you need to access program shortcuts and files placed on the desktop.

Now instead of minimizing the browser to access these files, you can simply create a shortcut in the bookmarks toolbar of your browser that points to the desktop folder. Click this bookmark and you’ll be able to browse through desktop content within the browser.

To create a bookmark pointing to the desktop, open this address file:///c:/Users/ (probably easier to copy & paste it instead) inside a new tab in your browser (Firefox?). Click your user name and then drag-n-drop the "desktop" folder to your bookmarks toolbar. I do this with my Desktop and with my My Dropbox folders.

Click here to see Tuesday-only posts.

No comments: