Posts Tagged ‘bookmarklet’

HTML_CodeSniffer is a bookmarklet to check if a web page validates for the selected standard.

The bookmarklet is open source, has a slick interface and currently comes with a set of 3 standards that enforce the Web Content Accessibility Guidelines (WCAG) 2.0.

HTML_CodeSniffer Bookmarklet

It displays the errors, warnings + notices and their details can still be viewed within the bookmarklet.

The standards and their rules are hosted in the GitHub repository, so, once a new standard or rule is added by the developer, the bookmarklet will auto-update.

Reading codes in websites can be challenging if no syntax highlighter is used (check 11 Syntax Highlighters To Beautify Code Presentation).

Language specific tags, functions, etc. will be hard to recognize specially in long pieces of codes.


Syntaclet is a bookmarklet which can automatically highlight codes on web pages that are not already highlighted.

The bookmarklet auto-detects the language used and applies syntax coloring with line numbers to all the code on the page.

Simply drag it to your bookmarks bar and press it whenever you see any hard-to-read codes on any web page.

It is usually a good idea to share your thoughts about a website visually in order to make the details clear.

MarkUp is a free web application that, with the help of a bookmarklet, enables you to draw on any web page.


Once the bookmarklet is clicked, the menu with the options of shapes (circle, rectangle, free drawing, etc.) appears and it becomes possible to draw + take notes (with the color you prefer).

And, once the drawing is complete, you can select it to be published which is actually a unique URL generated -that displays the output-  to share.

FontFriend is a bookmarklet for easily & instantly changing the fonts + styles used on a website without code editing or refreshing.

Once clicked, it overlays a menu with web fonts, font-variants, weights, text-transform properties, size/height entries & an element selector to target specific elements.

At this point, every clicked property instantly updates the selected element.

FontFriend Bookmarklet

The overlay screen also has an @font-face support which makes it possible to test non-standard fonts by simply drag'n dropping them.

To sum up, the bookmarklet is very functional for any web designer by removing the standard code editing + refreshing process.