Better Browsing (On The iPhone Too) With Bookmarklets

Today's unusually late post comes after a lot of tossing and turning over how to approach this vast topic: Bookmarklets.

I've briefly talked about bookmarklets on a few posts right here on ahmadism.com. Given that this topic is one of personal interest & passion, I literally wanted to cover it in its entirety. This included a brief description of what bookmarklets are, how they work, a quick tutorial on creating one, how they could improve the life of everyday browsers, how to significantly enhance one's iPhone, etc. The topic grew out of hand so quickly that I even started to record a video screencast that was going to illustrate the whole thing and talk about it; in hopes of saving a lengthy article.

I quickly realized, albeit at this very late hour, that I need to break this up into several topics; a series, if you will.

Let me get right to it. Bookmarklets are little pieces of JavaScript code that can be saved as ordinary bookmarks (or "favorite" for you IE folks) in your web browser.

Written in Javascript, they are designed to work with just about any browser, though there are a few browser-specific bookmarklets. Bookmarklets help you do whatever you do on the web with your Internet browser – and do it better. There are life-saving bookmarklets for web development and web page design. There are bookmarklets for tagging, posting, dictionaries, searching, references, Wikipedia, writing programming code, and tons more tasks you do with your browser.

Bookmarklets are a nice alternative to browser add-ons and toolbars, which limit (if not down-right eliminate) viruses and bugs that come from such add-ons. Bookmarklets, since they are JavaScript calls, are relatively easy to figure out and change to fit your own need. There are a lot of bookmarklets out there, and most should fit your need exactly as they are without you having to change a thing.

So, let's talk a bit about how bookmarklets can help you in your day to day browsing. Here's an example:

Personally, I come across quite a few pages where the links are not, well, links. A URL would be listed as such: http://www.ahmadism.com And as such, is not a clickable link. That's where Linkify comes in.

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.

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, you basically need JavaScript to run on the specified page all the time --And that's exactly what Greasemonkey is and does.

This particular post is aimed at what are bookmarklets, and not the bookmarklets themselves. With that, it's worth mentioning that bookmarklets run indifferently on all the main browsers such as Internet Explorer (IE), Chrome, Safari, Firefox, etc. That's because most browsers support JavaScript; which by the way is required for bookmarklets to run (it must be enabled). Other benefits from using bookmarklets include:

1. No need to update them if your browser gets an upgrade.
2. No installation required!
3. Very well optimized for all browsers. This mean that they won’t slow any software down.

Best of all, with a browser sync tool like Xmarks, it's easy to have them everywhere you need them --Whether that be on multiple browsers, multiple machines, at a friend's house, at a net cafe, on your phone, etc.

Bookmarklets can interact with other web technologies like AJAX, talk to a PHP page, etc.; but most are creative manipulations of the Document Object Model (DOM). To access a page's title, for example, you need the following call: document.title. To make that pop up in a small window, otherwise known as an alert window, you simply type the following in the browser's URL field (the space where you type the www.something.com):

javascript:void(alert(document.title));

Now you can make things hide, move, pop-up, etc. None of these bookmarklets talk to a server; not typically anyways, but they all interact with the current page you're on.

Over the next few weeks I will go into other bookmarklet topics, examples, etc. So please come back and visit. Upcoming topics include (in no particular order) iPhone enhancing bookmarklets, YouTube bookmarklets, mp3 bookmarklets, web developer bookmarklets, reference bookmarklets, Flickr ones, Blogger ones, Google ones, and much much more. Needless to say, I have the largest collection of bookmarklets I know, and I continually write my own when I can't find one that does what I need.

Be sure to continue this series by visiting next week's post here.

Looking for a specific bookmarklet? Let me know in the comments and I'll see if I can help.   ▣


Click here to see other Tuesday posts (including the current one).