February 18, 2002

Bookmarklets and other useful things for IE’s Links bar

What are bookmarklets (also called favelets)?

Tantek summed it up best: “Combine Internet Explorer’s Toolbar Favorites feature and mini applications (applets) written in jscript, stamped with a 'javascript:' URI scheme, and you have a way to add features built from DHTML to your browser.” Most are self-contained, but some link to other scripts or files on the web. Here’s a tutorial on how to create a bookmarklet.

How do you install them?

Drag the hyperlink onto Internet Explorer’s Links toolbar (View: Toolbars: Links.) (This toolbar changes into a drop-down menu like the one below for all items that don’t fit.) Explorer will warn you that you are adding a link “that may not be safe.” You’ll just have to trust me on this.

Alternatively, for users of IE on PCs, download this ZIP with all the bookmarklets below. Extract it into C:\WINDOWS\Favorites\Links (after first deleting all the default junk in there.)

Not all bookmarklets work on all browsers; refer to the creator’s site for details.

Where do you get them?

This page lists the sources of all the bookmarklets I use. Most of these sites have more bookmarklets besides the ones listed here. Web-graphics.com maintains a list of bookmarklets sites. One of the best selections (for the web developer) is to be found at Jesse Ruderman’s Squarefree.

Alternatives for Mozilla

Most bookmarklets will also work on Mozilla-based browsers (indeed, many are exclusive to it), but many are conveniently bundled into custom toolbars or extensions.

My bookmarklets

Composite screenshot of IE Links menu

  1. Google
    Google search on highlighted word; brings up Search prompt otherwise. Sometimes local scripts on a page prevent it from working. For more functionality, install the Google toolbar, or even better, Dave's Quick Search Taskbar Toolbar Deskbar (unreservedly recommended).
    Source: Google
  2. 800x600
    Resize browser window to 800×600 pixels, at the time of writing still the “average” screen resolution benchmark. (Note that you should subtract 20px if you want to take into account the size of the Windows Taskbar, a given on the majority of home computers.)
    Source: favelets.com
  3. Google current site
    Google search on highlighted word; brings up Search prompt otherwise. Restricts search to the current site.
    Source: centricle.com
  4. TinyURL!
    Generates a short URL pointing to the current page, placing it on the clipboard automatically, ready for pasting (Windows only). Useful with long, messy URLs that'll wrap when pasted into plaintext emails. My favourite over the other three alternatives, Makeashorterlink, Notlong and SnipURL. (The latter lets you customise the shortened URL.)
    Source: TinyURL.com
  5. zap plugins
    Removes java, flash, background music, and third-party iframes. Excellent for intrusive Flash ads. I prefer using this rather than a blanket ad-banning solution, since I occasionally enjoy seeing ads.
    Source: Squarefree
  6. Page Weight & Speed
    Combined weight (in bytes) of all HTML and images on the page, with estimated download speeds. Its main weakness is that it does not measure linked resources, like CSS or scripts. For this, use Q42's GetPageSize (much slower).
    Source: Kindly custom-made for me by Dave Lindquist
  7. Web development
    1. ! (view comments)
      Expose the invisible comments in the code. Sometimes useful to understand the layout.
      Source: endquote.com
    2. Add borders
      Adds a green border around each element on the page.
      Source: Squarefree
    3. ancestors
      Lists the ancestors of any element you hover over in the status bar. One of my favourites.
      Source: Squarefree
    4. Check Links
      Check for broken links on the current page.
      Source: favelets.com
    5. clone slowly
      Clones page several chars at a time (to test incremental rendering). Sheer genius.
      Source: Squarefree
    6. GetPageSize!
      See no.5 above
    7. IE compatibility mode
      Pretty simple: Makes IE report whether it's in 'Quirks' mode or 'Standards' mode. More info on CSS-discuss.
      Source: Accessify
    8. list classes
      Lists classes used in the document (in a new window).
      Source: Squarefree
    9. Show and label divs with classes
      Highlights ALL div tags with a red border and labels each one with an id.
      Source: Accessify
    10. Show and label divs with ids
      Exactly as above, but this time only divs that have a class are labelled.
      Source: Accessify
    11. Show Divs, Spans & P
      Outlines <div> (solid lines, colours indicating depth of nesting), <span> (dotted green) and <p> (dotted blue) tags.
      Source: Started at web-graphics.com, but I later changed it to show nesting and paragraphs. Links to this stylesheet on my server. If you want to use it, copy it to your server and update the bookmarklet.
    12. Show Specific Elements
      Brings up dialog boxes asking for the element, and what colour to highlight it in. Interesting.
      Source: centricle.com
    13. Show Tables
      “Turns on table borders and color codes them to reveal nesting. This script inserts a link node into the current document head, which pulls in a stylesheet I maintain on my server. Feel free to download and adapt this to your own purposes: tableborders.css
      One of my favourites. I recommend you copy the CSS to your own server if you plan to use it.
      Source: sam-i-am.com
    14. View CSS
      Just as useful for web designers as Show Tables, this one pops up a window with links to all linked stylesheets, enabling you to view or download them.
      Source: Liorean’s web coding depot
    15. ViewScripts
      Similar to View CSS, pops up a window allowing you to view the linked and embedded javascript.
      Source: Liorean’s web coding depot
    16. zap presentational HTML
      Removes most presentational attributes and tags while leaving style sheets intact.
      Source: Squarefree
    17. Zoom in
      This pair will zoom in on the current page in 50% increments. Great for pixel level debugging and using with Element Ancestry to click on exactly the element/screen are you are interested in.
      Source: sam-i-am.com
  8. Screen sizes
    Resize the browser window. Useful for testing how layouts fit or reflow at various standard screen sizes.
    1. javascript-resizeTo(800,600) (A text file, as syntax reference)
    2. PocketPC iPaq 240x320
    3. SVGA 800x600
    4. SXGA 1280x1024
    5. TV safe 544x372
    6. UXGA 1600x1200
    7. VGA 640x480
    8. XGA 1024x768
    Source: favelets.com
  9. CSS-related
    Resize the browser window. Useful for testing how layouts fit or reflow at various standard screen sizes.
    1. Choose style sheet
      Adds a feature lacked by IE. Provides users the opportunity to select an alternate style sheet. See the Alternate style sheets example for more information about alternate style sheets.
    2. Toggle CSS style sheets
      See what the page looks like with CSS disabled.
    Source: favelets.com
  10. Zap (cleanup)
    1. Page Color to Grey
      Use this when white web page backgrounds give you eyestrain. Modified from a “Page Color to White” original at bookmarklets.com. Unfortunately this does not work on sites where the background colour is set by the stylesheet. [There are bookmarklets on squarefree for that too.]
      Source: Bookmarklets.com
    2. Remove Background Image
      Use this when arty textured backgrounds behind the text give you eyestrain. Again, this does not work on sites where the background is set by the stylesheet. [Should be fixable.]
      Source: Bookmarklets.com
    3. Statusbar Shows URL
      Prevent those pesky scripts from replacing the destination URL in the browser's Status bar with supposedly helpful descriptions.
      Source: Can't remember! I think it might be from ZDNet, via web-graphics.com
    4. zap cookies
      Removes cookies set by the site, including cookies with paths and domains.
      Source: Squarefree
    5. zap
      Zaps plugins, colors, cheap effects, event handlers, and timers.
      Source: Squarefree
  11. Accessibility
    1. Alt attributes - images missing alt attribute
      Displays all images on the page that do not have any alt attributes - useful accessibility checking tool. Remember, an image such as a spacer gif or an image used as decoration (such as a lined pattern) should use alt=" " (with a space between quotes).
    2. Alt attributes - show all
      Displays all images on the page, alongside their alt attributes - useful for checking that alt attributes match up with image.
    3. Convert abbreviations and acronyms
      Highlight some text on your web page (or perhaps some text that you are entering into a textarea, for example a Blogger or MovableType post), then run this favelet - the highlighted text will be passed through the Acrobot, converting all your acronyms and abbreviations.
    4. Links - titles and hrefs
      Shows all links on the page and the contents of the link (text and/or images). Also shows title attributes of each link (if present - very useful for assessing how accessible your links are.
    5. Show links
      Highlights links on the page in glorious garish lime
    6. Show table headings th
      Highlights table headings (yellow text on black background) - use this to see if table headings really are <th> tags or whether plain old <td>s was used instead.
    Source: Accessify
  12. Validation
    Validate HTML, CSS and HREFs, or all at once using Tantek’s Multivalidator. Also validate XHTML or accessibility (cast.org), or simulate colour blindness. Validation bookmarklets with more options can be found at gazingus.org.
    1. Accessibility ColorBlindnessCheck
    2. Accessibility cast.org
    3. Multivalidator Window
    4. Multivalidator
    5. W3C CSS validator
    6. W3C HREF validator
    7. W3C HTML validator
    8. WDG HTML validator
    9. W3C XHTML validator
    Source: favelets.com, 13thparallel.org (XHTML), gazingus.org (Accessibility), Q42.nl (colour blindness)
  13. Page information
    1. General page stats
      General page statistics, including when the page was last updated, what forms and styleSheets are linked, how many images, how many links and so on.
      Source: Accessify
    2. getContentSize
      Interesting tool for measuring the code:content ratio on a web page. Author's disclaimer: These statistics are good fodder for conversation, and they make you think a bit, but otherwise they're trivia at best.
      Source: Holovaty.com
    3. Read Cookie for Site
      Shows the cookies stored by the page you're viewing.
      Source: Squarefree
    4. Uptime & Server
      Shows a Netcraft report.
      Source: favelets.com
  14. Internet Archive:
    1. Most Recent Internet Archive, Index at Internet Archive
      Turns the clock back on the current page, courtesy of the awesome Wayback Machine.
    2. Go Wayback
    3. Wayback Analyse
    4. Wayback Undo
    Source: Lost the sources for these... Also not sure which are the best. I think the latter three are more robust.
  15. Text:
    1. Google Translate!
      Google automatic translation (to English) service.
    2. Look up a definition at dictionary.com
    3. Look up a definition at m-w.com
    4. Look up synonyms at m-w.com
    5. Look up synonyms at thesaurus.com
    6. Lorem Ipsum
      Not a bookmarklet. Links to this text file on my hard disk, which is the standard “greek” text used by typesetters.
    7. SCRABBLE search (Website: validates words, but doesn't define them.)
    Source: Dictionary/Thesaurus bookmarklets found (and modified by) Aleksandar Nikolic (thanks!)
  16. Utilities:
    1. Download Calculator.. (56K)
      I've had to manually work this out several times in the past (with effort each time), which convinced me of the usefulness of this utility which asks for file size in KB and returns the download time on a 56K modem, in seconds.
      Source: Bookmarklets.com
    2. 216 Standard Colors
      “Displays the 216 “browser-safe” colors along with their hex code numbers. These are the colors that display the same, without dithering, across all platforms (debatable). The page is entirely generated from within the bookmarklet (so you can use this tool offline).
      Tip: If some hex codes are hard to read try choosing ‘Select All’ from the Edit menu. ”
      Source: Bookmarklets.com
    3. Basic ISO Latin Characters
      “Makes a list of the ISO Latin character codes for the international umlaut, circumflex, grave, and acute characters. Helps when you want to add symbols like to your webpage. The page is entirely generated from within the bookmarklet (so you can use this tool offline).
      Note: This list may collapse if you do Back-Forward (so you get is ). Just select the bookmarklet again to rebuild the list. ”
      Source: Bookmarklets.com
    4. MASL, notlong and SnipURL
      Three competitors of TinyURL. MASL was the first; SnipURL has the most features (letting you create your own shortcut name and password-protecting.)
  17. Blogs
    Post to fjordaan
    and Post to web-graphics
    Post to two Moveable Type (excellent weblogging software) blogs I write on.
    Source: www.moveabletype.org
  18. Toggle Images.exe
    Not a bookmarklet, but a little EXE that you can get from Microsoft.

Also make sure you add the following extras — Links List, Images List and Oper Frame in New Window — to IE's contextual (right-click) menu:

Right-click menu with Open Frame in New Window, Links List and Image List

You get them with Microsoft's Web Accessories for IE 5. If you install the Google Toolbar, you get some more useful options in this menu, e.g. Google Search. See also my other tips on customising IE.

Finally, these bookmarklets are mostly only useful to web developers. This is not all they’re good for. Bookmarklets.com especially have bookmarklets for just about anything.

Thank you

Note that I am not the creator of any of the above bookmarklets. I duplicate them on this page as a handy backup for myself, like when I need to customise a new PC. If any of the authors would like their bookmarklets removed from here, and their site linked instead, they need but ask.

Posted by francois at February 18, 2002 12:00 PM

Comments

Post a comment

(HTML is OK. Two linebreaks are converted to a <p>, one linebreak to a <br />. Represent all occurrences of <, >, and & by character or entity references, i.e. &lt;, &gt;, and &amp;.)

Name:


Email Address:


URL:


Comments:


Remember info?