Monday, June 1, 2009

10 Useful Firfox Add-ons for HTML/CSS Web Developers

As i work in web career, i have worked in different kinds of coding platforms, mainly HTML/CSS, ASP.NET, Open Source Content management systems and so forth. So as worked alone different kinds of bug came in different platforms, sometimes different to each other. Hopefully Firefox add-ons has helped me to fix these bugs and continue with my work. So in this post, i have listed some of the great add-ons which i have been used so far.

1. Web Developer

One of developers most wanted tool bar. It hasn’t boxed in to a one feature and it almost got every tool that a web developer wants. You can edit the CSS while you are online and check the changes, view all images and its details, validate CSS and html and other web standards, highlight html elements like tables divs and other miscellaneous stuff you ll be need while converting to HTML.
Most of the time i have used the Ruler, Image information and the Validation options from this toolbar.

2.Firebug

This has a great feature like when you inspect an element using this tool, it will show the HTML and the CSS which you have used for that. Also u can add or remove any style temporally to see what will happen. It also support with JavaScript with the DOM inspector. Actually i stick to this add-on most of the times, so that i can simply hover the element that i want and change the values to see what happens

3.IE tab

Many developers suffers when they convert a site into HTML because of older browsers like IE6 , which still have the old framework, that haven’t updated in years. But sadly still some user’s uses this browsers and developer has to do the coding compatible to IE6, so he has to switch between browsers all the time. IE tab has a great feature that u can straightly open an IE tab, without leaving firefox, and will be able to finish the development quickly.
There are some other browser compatible add-ons like, Safari View, Opera View, Google Chrome View, that will open in a specified blank window. Note that you have to install the browsers to your pc in order to preview on them.

4.Colorzilla

Let’s say you saw a nice attractive color in an image and u wants it somewhere else. What you have to do is save it and import into your favorite photo and eyedrop the color. But with this you can quickly take the code of the color ,rgb, hex code and put in the place you want in your web page.


5.No Script

When you go to a website and you don’t want any unnecessary flash advertisements to load and any other dangerous script to be loaded. So with No flash and No Script add-ons, you can easily skip the load of scripts and flash u don’t want. In this i have used the No script tool, so that i can see what other website have used Javascripts.


6.Font Finder

You can simply highlight some nice font and check what kind of fonts has been used and get an idea of it. I use this all the time :)


7.Link Checker

If you are developing a large site which has lot of links, you have to check all of them one by one to make sure whether they work. (suffering) With this tool, it will show the links that redirected to the 403 error page and highlighted with a warning color.
Pinger so does the same thing but its kind of fast than the link cheacker. And at the end it will shows 2 list of links that working ones and not. Not that the add-on is still under experimental.


8.Aardvark

A use friendly add-on that u can do almost anything to the HTML, even remove items, temporily. With this u can hover the element u want and check its properties or do changes for it. For a example, after u have done completing html part , and still you have some bugs in it, you can remove the elements you think what causing the error, and see.


9.CSS Viewer

With this you can just hover on the HTML elements and check its style under aa nicely order list. This may be useful for the old pc because some browsers and not supported with firebug, and it will crash the browser.


10.FlashBlock

This will simply block all the unnecessary flashy stuff from from a site , saving resources, loading time and all. And it will allow you to play only the flash stuff you wanted. It also a handy tool to check which parts of a site that have been done with flash.


Off the topic

WOT

This not actually a tool bar that helps only for the developers. With this you can avoid unwanted and dangerous site that may harm your pc. Its like a rating system so if some goes to the site and rated as BAD, the other users will be warned about this.


Serach status

A great tool for Search engine optimization purpose. You can check the page rank, google and alexa ranks in of a desired web page and see the techniques they have been used to get their rank

No comments: