Malphurs

Article 2 of 4 in a series covering utilities that are a “must-have” for any web developer.
(Read Part 1)

Introduction

In part one of this series, we covered System Utilities… The items we use every day at Malphurs Interactive that both increase our productivity and improve our work.

In part two, we will take a look at browser-related utilities, including plug-ins, extensions, and bookmarklets. Without further ado…

Part Two: Browser Plug-ins, Extensions and Bookmarklet

BETTERSOURCE | Safari
www.awarepixel.com

BetterSource does just one thing… and it does it well. By displaying a clean view of a document’s original source in Safari (one that includes syntax highlighting and line numbers) this plug-in makes it much easier to track down certain pieces of code or dissect a document’s mark-up.

Be sure to also check out BetterSource’s alternative view “Show Generated Source”. This options displays a document’s source after all scripts and extensions have been run. Neat!

INSTAPAPER | Multiple Browsers
www.instapaper.com

Simply stated, Instapaper is a “simple tool to save web pages for reading later”. No more worrying if an article or web page will disappear or change… No need to stop the task at hand to read what was just sent to you by a friend of colleague… And better yet, no need to worry about lost pages you want to reference later. Internet connection or not, you will have access to your saved pages anytime you want – or need – them.

Other great features include:

• A bookmarklet for easy saving
• A great iPhone app that allows synching with your online account
• The saving of pages in both an easily-readable “text-only” document and as the page originally appeared in your browser
• A great selection of “Editor’s Picks” for suggested reading

FFFFALLBACK | Multiple Browsers
www.ffffallback.com

If you are a web developer that works with web fonts, chances are this handy tool is for you. This oddly named bookmarklet scans your page to identify any web fonts in use. Then “using magical unicorns and javascript rainbows”, ffffallback clones the page and gives you a tool for testing different fallback font options. Time to start degrading gracefully!

FIREBUG | Safari/Firefox
www.getfirebug.com

No list of developer’s tools is complete without the venerable FireBug extension. Though available for Safari, the FireFox version of this extension takes the cake with an expended feature set. Listing all of FireBug’s features would fill up a War and Peace sized tome, but lets highlight a few favorites:

• Inspect any web page element by simply highlighting its source or moving your cursor over it on the page itself.
• Modify CSS styling in real time to get just the right page design
• Check out your pages network usage and performance
• Debug your page with FireBug’s visual editor
• Use javascript to send message to the console right through your webpage

W3C VALIDATE CSS | Multiple Browsers
www.speckyboy.com

Don’t want to install a full extension (like FireBug) or laboriously visit the W3C.org site to perform your validation tests? SpeckyBoy’s validation bookmarklets give you instant access to HTML, CSS and link checking and save you time in the process.

WEB DEVELOPER | Firefox/Chrome
www.chrispederick.com

This powerful extension provides developer’s with a myriad of development tools built right into their browser toolbar. From disabling caches, images and cookies to more complex features such as editing source HTML, this extension rivals FireBug in its scope of functionality.

Other great features include:

• Plain source or generated source views
• Validation tools
• Window resizing presets
• Document outlining
• Ruler and grid display

Have a useful plug-in, extension or browser-based tool to add to the list? Let us know by commenting below!

Check back soon for part three, focusing on the top applications for web developers!