.

Thursday, January 11, 2007

How to Make Your Firefox Sing (for Web Application Developers) #

This post is a follow up to my former "top 10 Firefox Extension That I Cannot Live Without" article. You can have a look at it for a more brief list.

For the lazies out there you can immediately donwload all the extensions mentioned in this article as a bundle.

...

There are tons of (official and unofficial) extensions you can install to your Firefox. Some of them are valuable time savers and organizes, and some are simple nothing but junk.

For those who want to be more productive and separate gold from trash, I have compiled a list aimed specifically for Web Application Developers.

But, why not use M$IE ?

Well, if you are one of those who still associate an "is a" relationship between the "e" letter on your desktop with "the Internet".
That little e is not "the Internet". Nor it is the only way to access to the Internet. There are many alternatives around. And, as a web developer, you should be well aware of the fact. Even being aware is not enough, you should evangelize about it.

If you still do not get it, I suggest you go away and so away from the community of web developers.

Don't be so pushy, I pretty well know about browsers, but why Firefox?

What I really like about Firefox can be boiled up to
  • vast majority of extensions,
  • standards compatibility,
  • and speed.
Needless to say the tabbed browsing interface is a great time saver. And I particularly like the "session saver" extension, in case of a power brownout, system outage all my sessions (and tabs) are restored as soon as I restart Firefox.

I'll introduce you 30 invaluable extensions which will make your Firefox work like a charm. Please note that my list is specifically optimized for front end Web Application Development and design. So if you are an average Joe, or especially specialized in back end services you may not find the list that useful.

Enough chit chat, let's begin:

Get an up to date Firefox version first

Most of the versions I present here work best with Firefox version2.x.x and above. So spare some time and update your Firefox if you have not done already.

Install Noia Extreme theme

There are many many themes around. But Noia Extreme Theme is the best one imho, which combines eye candy and productivity together.

install noia extreme to your Firefox

Get Firefox Extension Backup Extension

I know, it's name is sorta funny. But what it does is priceless. With FEBE not only you can back up your extensions, you can back up your entire user profile (along with bookmark, preferences, cookies, plugins, history and more)

Moreover it compiles a nice HTML list of extensions when you perform a back up. (I use that list to write this post list now ;) )

FEBE is half a FEBE if it's without CLEO (compact library extension organizer). CLEO is a Firefox extension that works with FEBE to package any number of extensions/themes into a single, installable .xpi file.

install FEBE to your Firefox

install FEBE-CLEO combo to your Firefox

Ultimately Necessary Extensions for Your Web Development Needs

Meet Aardvark

Things you can do with aardvark
  • Clean up unwanted banners and surrounding "fluff," especially prior to printing a page
  • See how the page is created, block by block
  • View the source code of one or more elements
install Aardvark to your Firefox

Also while you're there, check Platypus. It has similar extensions and more (thanks Sarah). Platypus is a Firefox extension which lets you modify a Web page from your browser -- "What You See Is What You Get" -- and then save those changes as a Greasemonkey script so that they'll be repeated the next time you visit the page. Editing pages to suit your needs is dandy -- but making those changes "permanent" is the real payoff.

Some of the things you can do with Platypus include:

  • Remove parts of the page you don't wish to see.
  • Move a part of the page to a different location.
  • Change the style and format of page elements.
  • Modify all the links on the page using a regular expression.
  • Insert your own HTML code.

install Platypus to your Firefox

Get Firebug

Simply get it. I cannot explain how a valuable resource it is. You shold see it for yourself. One can write a separate article on how to use Firebug. It's more than a debugger. It's a framework by itself.

install Firebug to your Firefox

Web Developer Toolbar

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

If you are a standards-aware web developer you must have the web developer toolbar in your arsenal. If you are not I suggest you re-read the beginning of this post.

install Web Developer Toolbar to your Firefox

Html Validator

HTML validator is a nice Tidy and OpenSP based extension. It validates the (X)HTML of your pages as you browse. it's a great time saver.

As far as my experience is concerned, having a strictly valid page, or at least knowing which parts of it are left intentionally invalid prevents you from sleepless nights, extra dose of caffeine and headaches in the morning.

Sarah says:
I've always just used the validators in the Web
Developer toolbar, but this is pretty freakin' sweet!

install HTML Validator to your Firefox

Link Checker

Do you have a dozen of pages on your site and each page has tens of links in it, and you want to check for dead links, bad links and good links. Then link checker is your only savior.

install Link Checker tou your Firefox

Extensions to Enhance Your Web Development Experience

Colorzilla - your embedded color picker


Simple and easy to use. No need to create a screenshot, load it into photoshop and get the color code. If what you simply need is a color code, why shoot the fly with a rocket launcher? Just use colorzilla
Alternatively you can use Pixie (not an extension) it gives me a colour picker you can use
anywhere, not just in Firefox, and it's very small: http://www.nattyware.com/pixie.html
install Colorzilla to your Firefox

Measure it

Measure it does what it says: it d raws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
Also check out the Miscellaneous button on the Web Developer
Toolbar, it has line guides and a ruler.
install Measure it to your Firefox

Screen grab

It, in case you hadn’t guessed, saves webpages as images by scrolling around and stitching the result together. In particular it also will save just a frame as an image.

install Screen grab to your Firefox

IEView

IE View is a simple Mozilla and Mozilla Firefox extension (for Microsoft Windows systems), which allows the current page or a selected link to be opened in Internet Explorer. I use Firefox 99.99% of the time, but there are those moments -- particularly when testing new pages, or when viewing that rare IE-only page that's actually interesting -- when I need to see what things look like in IE.

install IEView to your Firefox

OperaView

If you like IEView, why not try out OperaView ?

install OperaView to your Firefox

LiveHTTPHeaders

This is sorta advanced but extremely useful extension. It allows you to change the header information of any web request on the fly.
LiveHTTPHeaders may be of some help for the following:
  • Help debugging web application.
  • See which kind of web server the remote site is using.
  • See the cookies sent by remote site.
install LiveHTTPHeaders to your Firefox

Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.

Trace and time http response/requests.

Security test web applications by modifying POST parameters.

FYI current version has conflicts with some plugins like Google Web Accelerator and HTML Validator. Shut them off while using Tamper Data, else your browser will crash.

install Tamper Data to your Firefox

Flash Tracker

While running any .swf Flash file in your browser you can see all the output generated by the "trace" flash functions in this sidebar component.
You NEED the flash player debug version to run this extension correctly

install Flash Tracker to your Firefox

Extensions as Embedded Applications

FireFTP

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

Why need an external FTP client if you have FireFTP at hand? Moreover, it's totally free.
If you find FireFTP inconvenient, or unreliable for some reason FileZilla (not an extension)
is an excellent open source FTP client (an server) with an intuitive interface.

Thanks Kasimir
install FireFTP to your Firefox

ChatZilla

Contrary to popular belief IRC is not just a time waster. It's an ultimate time saver that joins developer communities together. If you have something in mind, go to a proper IRC channel and ask a question. You'll get immediate feedback. Especially RubyOnRails developers have a very active IRC community.

install ChatZilla to your Firefox

SpiderZilla

Spiderzilla is an easy-to-use website mirror utility, based on Httrack.

install SpiderZilla to your Firefox

Usability Extensions to Enhace Your Firefox Experience

Firefox Showcase


Showcase provides a new way to manage your Firefox tabs and windows by showing them as thumbnails in a single window, tab or sidebar. Includes a find bar that will filter the thumbnails, and the capability to select the thumbnails in the same way you would select files in your system.

install Firefox Showcase to your Firefox

Scrapbook

ScrapBook is a Firefox extension, which helps you to save Web pages and manage the collection. Key features are lightness, speed, accuracy and multi-language support. Major features are:
  • Save Wep page
  • Save snippet of Web page
  • Save Web site
  • Organize your collection
  • Full text search
  • Text edit feature resembling Opera's Notes.
install Scrapbook to your Firefox

TabMixPlus


Tabmixplus is the best way to customize your tabbed navigation experience.

(note that if you have installed TabBrowserPreferences extension, it does not cooperate well with this one, so better uninstall or disable it if you want to use this)

install TabMixPlus to your Firefox

PermaTabs

Adds the ability to turn tabs of your choice into permanent tabs ("permaTabs"). PermaTabs can't be closed accidentally (even when closing multiple tabs at once), and will stick around between sessions.

Useful for keeping URLs you use often, always one tab away. Also, useful for picking up articles where you left off during a previous session.

Just for fun, installs three random "permatabs" (from a built in list) on installation. So maybe you'll discover a useful site you never even knew about.

install PermaTabs to your Firefox


FaviconizeTab

It simply does what it says.

install FaviconizeTab to your Firefox


Target Alert


TargetAlert is an extension for the Firefox web browser that provides visual cues for the destinations of hyperlinks.

If a hyperlink points to a something that is not a web page, then TargetAlert will try to append an icon to the hyperlink that represents its destination. For example, a hyperlink that points to a PDF document would look like this when using TargetAlert:

Sample Link to a PDF

This has two main advantages over plain hyperlinks. First, it makes links to PDF documents easier to find on a web page. Second, if you do not enjoy the "surprise" of clicking on a hyperlink and discovering that it links to a PDF document, you can use TargetAlert as a visual warning.

install Target Alert to your Firefox

Linkification

Linkification converts text links into genuine, clickable links.

Sarah says:
Another option is just to select a plain text link and
drag it to the tab bar or address bar, which will open the link - in a
new tab if you drag it to the tab bar, in the existing tab if you drag
it to the address bar. Seems like a lot of people don't know about this.
install Linkification to your Firefox

PDF Download

PDF Download is a Firefox extension that solves the problems everyone has about handling PDF files with Firefox. PDF Download is not a PDF plugin: you still need to have installed the Adobe or the FoxIt PDF plugin if you want to open a PDF inside Firefox.

install PDF Download to your Firefox

Image Zoom

If you have ever had an image that was too large to fit on your screen or too small to see the finer detail in your browser or email, then image zoom can help. Image zoom gives you complete control of the size of most images displayed in mozilla based software. Both individual images or whole pages of images can be zoomed.
Alternatively, using the Images button on the Web Developer Toolbar, you
can show all images full-size; also, using the Resize button there is a
zoom option (for the whole page, though, not just images) and using the
Miscellaneous button there is a page magnifier tool.
install Image Zoom to your Firefox

Séparé

Séparé is a Firefox extension that helps you keeping tabs tidy by introducing a new kind of tab: the separator. Séparé motto is "Divide et impera!"

install Séparé to your Firefox

Download Manager Tweak

The Download Manager Tweak extension streamlines the current Firefox download manager. The extension allows the Firefox download manager to be opened in a separate window, the sidebar, or a tab. The extension also modifies the default appearance of the download manager to make it more concise and intuitive.

install Download Manager Tweak to your Firefox

Download Status Bar

Download Statusbar
is a browser extension that allows you to keep track of ongoing and completed downloads in a hide-away statusbar.

Features:
  • Auto-hides when not in use
  • Single-click pause and resume
  • Pause all, Resume all, Cancel all, and Remove all finished - available from the context menu of the bar itself
  • ... and more.
install Download Status Bar to your Firefox

Miscelleneaus

Restart Firefox Extension

Lazy joe's way to restart firefox after an extension update.
(p.s. the download link below has some other useful extensions)

install Restart Firefox to your Firefox

Forecast Fox (Enhanced)

Yet another extension for the lazy user; Forecast fox will tell the weather report of today and the next couple of days along with satellite images.

install Forecast Fox to your Firefox

Tab Effect

Beautify your tab transitions. Tab Effect is an ActiveX based firefox extension.
Normally I don't like IE's fancy transitionsç But strangely I liked the way Tab Effect works.
Tab Effect simly attaches effects when the current tab changes.

install Tab Effect to your Firefox


Extensions YOU cannot live without

Inspect This

Sarah from DesignShift cannot live without Inspect This.
Inspect adds an entry to the context menu to open the DOM Inspector on the selected element.

install Inspect This to your Firefox
(you can contribute to this list by sending me a comment in any means: by adding a comment directly, sending me an e-mail, IM, whatever method you find convenient)
Keeping an Eye on...

All in one sidebar was an extension I loved to use, keeping everything organized. It is also in my former top ten firefox extensions list. However it does not install on my Firefox 2.0.0.1. I'm looking forward to their new release.

IEView Lite is smaller than IE view, it is cross-platform and it can do everything IE view does.
Unfortunately I was not able to install it to my Firefox 2.0.0.1.

...

That's it. Hope you find this compilation useful.

If you have any other extensions that you cannot live without, I'd be happy to enlarge this list.

Labels: , , , , , , , ,


 bu yaziyi sevdin mi?  hemen una ekle!
 


5 Coments

Kasimir said...
Hi Volkan,

first about LiveHTTPHeaders - does it really allow modifying the headers? I haven't found that feature - but for monitoring the headers it's the best IMO.

But Tamper Data allows modifying the requests, highly recommended.

Recently I've had to do some Flash work, and as I can't really test the results in the authoring tool (app uses external data) I haven't been able to enjoy trace. Untill Flash Tracer, which displays trace output in a side panel.

One more not mentioned here: Spiderzilla for downloading complete sites - sometimes very handy.

Then a -1 for FireFTP - tried that, but I found it incredibly unreliable. I'm still using FileZilla and WinSCP.

And finally a big +1, nay, make it +10e6, for Firebug! With the new version I've dumped something like half a dozen other extensions as Firebug does their jobs better. And practically every day I learn a new (and good) feature. Wouldn't do web developement without it anymore!

.k
11:45 AM  
Volkan Ozcelik said...
Thanks Kasimir for your valuable input.

I'll have a look at the extensions you provided and update the list accordingly.

#
# And finally a big +1, nay,
# make it +10e6, for Firebug!
#

I do agree. I don't know how on earth have I been developing web applications without it.

Cheers,
Volkan.
7:23 PM  
Volkan Ozcelik said...
This post has been removed by the author.
7:28 PM  
Volkan Ozcelik said...
I'd also like to send my special thanks to Sarah from thelist for her comments, thoughts and suggestions.
7:29 PM  
Volkan Ozcelik said...
@Kasimir

Thank you for your contributions.

It's documented on their site that LiveHTTP headers can actually modify header information. But I've only used it for sniffing headers.

I used to like HTTrack, which means I'll love to use SpiderZilla

+1 for Tamper Data
I was formerly an enterprise architect (before I quit my day job and grab my free lance) and part of my job definition was to protect the firm from external threats. You cannot believe how many sites you can crack by simply injecting stuff (header injection, sql injection, cross-site script injection)
bottom line
never trust client-side validation, never-ever trust any single thing client sends to you. validate everything on the server
8:43 AM  


Post a Comment

Links to this post:


Create a Link

<< Home




Recent Posts

RSS

RSS register icon

Other Blogs

Various

Sponsor

Profile Information

Browser I Suggest

Sponsor

Dikkatimi Çekenler