Bookmarklets-HTMLSource- samples and how-to

Page Comments

NsYta on 2008-01-04

Path // www.yourhtmlsource.com > Accessibility > BOOKMARKLETS

Bookmarklets

by Ross Shannon


Bookmarklets are simple little programs that you can integrate into your browser to make your coding, debugging and researching lives a whole lot easier. Best of all, they're easy to use and modify for your own use.

Page Navigation:

[ Bookmarklets Explained
· How they Work
| Let's see them
· Validation
· Coding
· Writing
· Searching
· Other Resources
]

This page was last updated on 2007-03-20



Bookmarklets Explained

Bookmarklets are a type of tiny, powerful, very clever program, written in JavaScript and added to your browser as the URL of a bookmark. “Bookmarks” (Firefox/Safari) and “Favorites” (Internet Explorer) are equivalent, and most bookmarklets will work in either browser, and across platforms. You just click the bookmarklet, and it can apply filters to the page you're viewing, open prompts for searches, or a host of other helpful features. They look like normal links but are in fact dynamic scripts that can perform different tasks depending on what page you're visiting, what text you have highlighted, etc.

Browser Compatibility Note:

Some of the following bookmarklets will not work in certain browsers. The best thing to do is to test them by clicking their links on the page here before adding them to your bookmarks folder.

How they Work

First, your browser will have to be IE5+, Firefox, Safari or Opera 5+. Then, you need to have JavaScript enabled in your browser.

Then just add these links as favorites like you would any other. You can even add them to your Internet Explorer Links bar or Netscape Personal Bar for immediate access to the most useful ones. You may get a security alert when 'installing' the scripts, but don't worry, these are all perfectly » safe to use and do not change any settings on your computer.

    Once they're added you can use them straight away — just click their name in your bookmarks menu and the script will run.

Let's see them

Ok, I've organised these under headings; bookmarklets can help in a range of tasks. Remember, just click and drag any of the bookmarklet links below into your bookmarks menu.

Validation

Validate Markup with W3C Validator

Opens up the W3C HTML validator with the current page as the subject. Great for simultaneous coding and debugging. The page will open in the same window as the source page.

Validate CSS with W3C Validator

The same as the one above, but this will validate any stylesheets linked or imported into the current document.

Validate Recursive pages with WDG Validator

Much the same as the W3C validator, but the Web Design Group's validator can follow links to other pages and validate them too.

Verify Links with W3C Link-checker

Checks that no links are broken on the page you're looking at. Source: » Favelets.com.

Coding

Toggle CSS Stylesheets

Superb little script that will turn off any linked stylesheet at the touch of a button. Useful as much for coding as it is out of interest. This should really be a feature built-in to most browsers. Click it a second time to enable CSS again. Source: » Favelets.com.

Zoom In / Zoom Out

Zoom in and out of the current page in 50% increments — excellent for fixing pixel-level problems. Source: » Sam-I-Am.com.

Resize to 800x580

A simple code that resizes your window to the dimensions still most common among web surfers. If your page doesn't look good like this, you're boned. You can also resize to 640x460, 1024x748 or any other dimensions you want — just modify the short code. Note that the heights defined here are 20 pixels shorter than the corresponding monitor resolutions to take the Windows taskbar into account. There are more outlandish dimensions at » favelets.com.

216 Websafe Color Chart

Quickly draws a table of the websafe colour palette, in case you've forgotten the HEX codes. The reference page is generated entirely by the bookmarklet.

Basic ISO Latin Characters

Creates and displays a shorthand Latin special character reference. Source: » Bookmarklets.com.

Page Weight

Returns the combined filesize, in bytes, of the HTML file and all of its images. It doesn't include linked CSS code or scripts in the total however. There's also a utility that prompts you for a filesize in KB and returns the download time on a 56k modem. Source: » DanSays.com.

Show Comments

A clever, very cool-looking bookmarklet that adds an icon at each comment in a page's source code. Click the icon to see what the comment contains. Mostly useful out of interest. You need to be online for this to work, as it loads an external JS file. Source: » EndQuote.com.

Choose Style sheet

Since most browsers (most noticeably IE) lack support for choosing alternate stylesheets, this provides an interface for choosing an alternate style yourself, if one exists for a page. Source: » Favelets.com.

Grayscale the Page

Applies a filter over the page that takes all the colour away. Great, quick way of testing your page for legibility. Slows your machine down a fair bit though. Source: » 508 Compliant.

IMGs missing ALTs

Goes through your page checking if all your images have alt attributes. If not, it'll tell you which ones are missing them. Source: » 508 Compliant.

General page Information

Whips up a page of information pertaining to the current document, like the number of scripts, images and stylesheets; the creation and modification dates etc. Source: » Ian Lloyd.

Meta Data

Cleans up a page's meta data into a nice table for easy reading. Source: » Ian Lloyd.

Writing

Count Selected Words

Counts the number of words in a block of selected text. Very useful. Only works in IE. Source: » DooYoo-uk.

Look up word on Dictionary.com

Very handy bookmarklet to have, just select the word you need help with and it'll open the corresponding Dictionary.com definition. There's also a synonym-finder through thesaurus.com. Source: » Blog of Francois.

Page Freshness

When you need to find out when a page was last updated, this bookmark will query the server and return the last modification date. If the server isn't configured right you may get some replies that are clearly wrong. Source: » Bookmarklets.com.

Searching

Google Search

Searches Google for the words selected on the page. If you haven't selected anything, it brings up a prompt box to enter words into. Source: » Google.

IMDb Search

A personal favourite, I got sent this very useful modification of the Google bookmarklet above by a reader. It'll do a search on any words you have selected, or bring up a prompt for your input; and then search the » Internet Movie Database for you.

Other Resources

» Google Toolbar

This isn't a bookmarklet, but a whole new bar for your browser that allows you to search Google from anywhere, and get a lot of information about a page through some great features like what's related, backward-links and cache-viewing. Excellent.

» IE Web Accessories

A really helpful group of new commands for your right-click menu in IE5+. You can generate a links lists (very helpful for checking how your link-text reads out of context), an images list or open frameset pages in a new window. Also there's an Internet Explorer utility that will toggle image loading on and off without having to go into your Internet Options. It's not a bookmarklet, but a small executable program. All in all, some rather essential utilities.

Keep Learning // Custom 404 error page > Go! Go!

Other Accessibility Articles //
Website Navigation >
Content Accessibility >
Logical Style >
Testing your pages >
10 Bad things >
Browser Support >
Non-dithering Colours >
HTML 4 Explained >
XHTML Explained >
The Redesign Process >
Bookmarklets >
Custom 404 error page >

What’s Related //
More Useful Programs >

Bookmarklets-HTMLSource- samples and how-to - The Diigo Meta page

Bookmarklets

Bookmarklets Explained

How they Work

Let's see them

Validation

Coding

Writing

Searching

Other Resources

Would you like to comment?

Top Tags

Check out another URL