10 Bookmarklets For Front End Web Development

Bookmarklets are small web apps, usually written in Javascript. They can load the applet on top of, or using data from the website you are currently viewing. As Javascript is synonymous with web development, some clever developers have created some extremely helpful bookmarklets that can improve your day to day work. Here are ten of the best available.

HTML_CodeSniffe

HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.

firefox-boomarklet-1

FFFFALLBACK

Web fonts are here, sparking an exciting new era in web design. Ffffallback makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

firefox-boomarklet-2

Wirify

Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click. Wirify is free, easy and fun to use.

firefox-boomarklet-3

Fount

Fount will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style. After adding the bookmark:

firefox-boomarklet-4

Viewport resizer

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

firefox-boomarklet-5

DOM Monster

DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you’re on, and give you its bill of health.

firefox-boomarklet-6

Visual Event

Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. Visual Event to help track events which are subscribed to DOM nodes.

firefox-boomarklet-7

Subtle­Patterns

This bookmarklet lets you preview all those background patterns directly on your website very quickly. This makes selecting a background for your website even easier!

firefox-boomarklet-8

MIN

MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

firefox-boomarklet-9

kern.js

A super-simple bookmarklet for designers that finally puts you back in control of your website’s typography.

firefox-boomarklet-10

0 Comments

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.