Absolutely Fabulous Browser Bookmarklet Things

..Or something. Frankly, I just needed an excuse to post these steaming little beauties online. Please note that I don’t lay claim ¹ to most of these browser bookmarklet/favelet tricks, but I do find them extremely useful. They are posted here for the sake of convenience and for reference purposes, so use at your own risk (i.e., I am not responsible if they crash your browser). Although I use most of these bad boys with Firefox, I wouldn’t be terribly surprised if they also functioned properly in other modern browsers. Nonetheless, along with each bookmarklet/favelet thing, I try to provide as much relevant information as possible, because sometimes you just feel like you’re from another planet. Happy head-scratching!

What are these things?

“Bookmarklets,” “Favelets,” “Browser Enhancement Things” — whatever you want to call them — help increase productivity and simplify tasks executed from within your browser window. Basically, these things are stored as bookmarks and perform some task — such as resize the browser window — when they are clicked. Hmm, perhaps I should check Wikipedia for the “Official” definition .. — nah.

How do I install them?

Installation of these lil’ miracles could not be easier. In most modern browsers, simply drag and drop the bookmarklet link onto your shortcut toolbar (Firefox, Safari, et al) or right-click and “Add to Favorites” (Internet Explorer). Pretty easy. There is a more complicated method as well. Create an empty bookmark or Favorite and copy & paste the bookmarklet source code into the URL field. Either way, these things are pretty common and you shouldn’t have too much trouble. So, without further ado..

El Bookmarklet Collection Royale

Universal Element-Tweak Thing

Perhaps my favorite bookmarklet thing that I never use, this handy little Universal Element-Tweak Thing enables users to modify any/all (X)HTML element(s) on the page.

Hardcore CSS-Toggle Thing

This handy little nugget says what it does and does what it says. Throw it down toolbar-style, and enjoy uber-easy, on-demand toggling of any/all applied CSS styles on virtually any CSS-styled web document.

Alternate Version of the CSS-Toggle Thing

Another fine version of the CSS Toggler. Like before, a click of this bookmarklet automatically removes/restores styling on any (X)HTML document. A must-have for any self-respecting web designer.

Complete Mint-Refreshment Thing

For those of you using Mint to track your site’s statistics, this next bookmarklet thing is absolutely priceless. Just slap the following code into a toolbar and enjoy one-click updating of every panel in your Mint Admin screen. Works great for freshening up stale Peppermint panels with a single click, simultaneously and instantaneously. Presto! You really must experience the bliss for yourself — words just don’t do it justice. So, just who on earth is responsible for such wonderful madness? Why, Jonathan Snook, of course!

Email URL Bookmarklet Thing

This sweet little number enables you to email your associates the URL of whatever page you happen to have loaded in your browser. Simply bookmark the link and click whenever you have a page that you would like to share. Nothing would be easier!

Background Layout-Grid Thing

This handy bookmarklet is a must for serious website designers and developers. With a simple click of the bookmarklet, a layout grid is instantly applied to the body element of the document. The layout grid greatly simplifies the process of lining up elements, aligning div’s, and checking dimensions. Plus, the grid itself is completely customizable. Simply replace the repeating layout image with one that suits your needs, and then edit the bookmarklet by replacing any/all instances of http://www.andybudd.com/images/layoutgrid.png with the URL of your own image file. Thanks to Andy Budd for sharing this essential design tool.

Background Layout-Grid Toggle Thing

For a layout grid that toggles on and off with each click, be sure to snatch a copy of this excellent bookmarklet by Marcus Breese (via Andy Budd). This is the layout-grid tool of choice around here. Highly recommended. As before, the layout grid is customizable, and you may either leech bandwidth from Andy Budd, or download and tweak the image and upload to your own server. After uploading the image, simply edit the bookmarklet by replacing any/all instances of http://www.andybudd.com/images/layoutgrid.png with the URL of your own image file.

Highlight All nofollow Links

Quickly determine which links on a page are sporting link condoms with either a rel="nofollow" or rel="external nofollow" anchor attribute. Works great on any web page. Simply bookmark the following link:

Automatic Form-Completion Thing

Here is an automatic form completion bookmarklet that will save you time when leaving comments on your favorite blogs. With the click of a button, this bookmarklet will automatically populate the comment form fields with your name, email address, and website address. To use, bookmark the following link and edit the “YOURNAME” and “DOMAIN” strings to reflect your information. That’s it — go ahead and give ‘er a spin during your next blog response!

Automatic Google-Translation Thing

This bookmarklet enables you to quickly translate any page via Google’s free translation service ². Simply bookmark the link and click to translate whatever page you happen to have loaded in your browser window.

XRAY Box-Model Display Thing

This fine bookmarklet displays (X)HTML/CSS information for any box-model element on the page. To use it, load a page, click the bookmarklet link, and let the page reload again. After that, simply click on any page element for which you would like to “XRAY.” According to the official XRAY site, the XRAY bookmarklet works on almost every major modern browser except Opera. Note: this bookmarklet loads an external JavaScript file from the developer’s site.

Syncotype Baseline-Grid Thing

The Syncotype bookmarklet enables on-the-fly creation and adjustment of baseline grids, which are very useful in aligning text during the design process. After activating the Syncotype bookmarklet, simply enter your line-height and offset values (in pixels) and click the “Syncotype it” button to overlay the adjustable baseline grid. To adjust the grid, enter new values and click “Redraw”; to clear the grid, click “Clear.” Note: this bookmarklet loads an external JavaScript file from the developer’s site.

View Cookies of any Host or Domain

Here is a great tool for examining the cookies used by any web host or domain. Simply save the bookmarklet link to your bookmarks/favorites and click when visiting any website to display any associated cookie information.

Outline all div containers

For layout and web design purposes, this bookmarklet is an excellent tool that will definitely save you time. With a simple click every div on the page will be immediately outlined with a nice dashed border. Then, with every div outlined, designers may quickly determine alignment, spacing, and so on. Definitely worth a shot!

Automatic Word-Count Thing

Quickly and easily determine the total number of words on any web page with this excellent bookmarklet thing.

Linking Sites via Google

Easily assess which sites are linking to any given web page according to Google.

Indexed Pages from this Site on Google

Easily check which pages from any given site have been indexed by Google.

Automatic Web Page-Validation Things

Here is an excellent collection of web development bookmarklets that enable on-the-fly validation of your web pages. Simply bookmark any of the following links and enjoy super-easy validation for your pages. Thanks again to Andy Budd for sharing his collection!

• Color Filter
• Web Page Analyzer
• W3C CSS Validation
• W3C (X)HTML Validator
• Bobby Accessibility Check [AAA]
• Vizcheck: Red/Green Color Deficit Check
• Lynx view of current document
• Keyword Density Check

Automatic Browser-Resize Things

These handy bookmarklet things say what they do and do what they say! Add any of the following bookmarklets to your browser’s bookmarks (favorites, whatever), and enjoy instant browser-resizing functionality at your fingertips. Simply grab, gulp, and go!

• Resize width to 800 pixels
• Resize width to 1024 pixels
• Resize width to 1280 pixels
• Resize width to 1440 pixels
• Resize width to 1680 pixels
• Resize width to 1920 pixels
• Resize to full screen
• Resize browser to 640x480
• Resize browser to 800x600
• Resize browser to 1024x768

Here is the (generalized) code:

javascript:self.resizeTo(x,y);self.moveTo(x,y);

To customize the resize bookmarklet, edit any of the following parameters to suit your needs:

• Edit: resizeTo(x,y) → the x sets the width of the resized browser
• Edit: resizeTo(x,y) → the y sets the height of the resized browser
• Edit: moveTo(x,y) → the x sets the horizontal position of the browser
• Edit: moveTo(x,y) → the y sets the vertical position of the browser

Bookmark-This-Page Thing

Well, okay, technically this next bookmarklet thing isn’t a bookmarklet at all. But it is a neat little JavaScript function that is super easy to use. Plus, it is an official “thing” and even contains the word “bookmark” in it’s name. What exactly is it? The following code creates a “Bookmark Us!” link on your web page that enables visitors to easily add your site to their Bookmarks or Favorites. To use, simply copy & paste into the body of your (X)HTML document. Visitors with capable browsers will enjoy the JavaScript functionality, while those without will figure it out via obligatory link text (Ctrl+D).

<a href="#" onclick="javascript:window.external.AddFavorite('http://your-domain.tld/','Your Domain Name');" return false>
   	Bookmark us! (Ctrl+D)
</a>

And there you go!

Footnotes

• ¹ If you happen to know the original source of any of these hot little numbers, please let us know by dropping a comment or hitting the contact form. Thanks. [ ^ ]
• ² Learn how to add an automatic translation feature to your blog [ ^ ]