Tibofix Bookmarklet

This bookmarklet could be called a bugmarklet or a hintmarklet as it was made to mark bugs and write hints on web pages before taking a screenshot.

How does it look? The following image shows tibofix in dark colors:

What you can do with tibofix

• Click your bookmark to release tibofix on a web page: text and drawing layers are loaded as overlays.
• Draw a nice arrow with shadow from mouse click to button release.
• Write a hint, edit if necessary.
• The text box is positioned next to the arrow automatically.
• Draw a rectangle after switching to rectangle mode.
• Draw in light or dark colors to have good contrast on different backgrounds.
• Metadata is displayed in the text layer – show even more if you click the (+) link.
• Collapse the drawing overlay using the (–) link to the right of the word tibofix.
  This makes the page accessible again and erases the drawings.

Good to know

• To get rid of tibofix, reload the page.
• Use at your own risk ;–)

I am sure you will find tibofix easy to use. Just hover over the links to see what they do. – Have fun and let me know if you like it and how you use tibofix.

What tibofix can’t do

• It does not work on touch devices (tablets, smartphones).
• It does not work in Internet Explorer.

Note: Tibofix works in most modern browsers but it is not tested in all browsers. If you run into problems, please send me a bug report.

Save the Bookmarklet

Drag the following link to the bookmarks bar of your browser: tibofix
– or click the link to try it first.

About the Tibofix Bookmarklet

To be serious, tibofix is an artificial word created by the project name generator of jsbin.com, where the first version of this little tool was developped. The author liked it and got stuck with it. In the meantime he came up with this far-fetched explanation:

tibofix

this is both an arrow and a square drawing fix for websites.

How it works: the magic of tibofix

• import a js file and a css file from my server (so I can update it)
• append 2 divs to the body of web pages: one for the drawing canvas, one for text (both with very high z-index)
• resize the canvas according to the browser window size
• the first text in the text layer is contenteditable
• show metadata as reported by your browser (not perfect!)

An early alpha version can be found and analyzed on jsbin.

Tibofix Roadmap

I have some ideas for improvements but time is precious. Be patient or send money ;–)
Thomas

Credits

There’s a lot of great stuff on the web. But these were the most valuable resources for my project:

• Michel Buffa and the team from the great course HTML5 Part 1: HTML5 Coding Essentials and Best Practices by W3C on edX
  All my knowledge of HTML5 canvas and drawing comes from this course. And I followed Michel’s advice to use a script derived from HTML5 outliner for Chrome to generate the table of contents here.
• The Bookmarklet tutorial on tutsplus.com was a good starting point for bookmarklet development.
• The tiny script for browser labelling comes from here: cube3x.com.

I would like to thank everyone who contributed to my project and to my knowledge of HTML, CSS and JavaScript. I do not list you here, there are too many of you. Please go on teaching, publishing and linking – thank you very much!