Wednesday, January 5, 2011

My 13 Web Development Tools

1. Firebug

A detailed info of what is Firebug can already be found at http://getfirebug.com/whatisfirebug but some of its features i enjoy the most are:


Javascript debugging: Javascript debugging has never been so easy as its with firebug you can add breakpoints. Do line by line debugging of code.

Javascript Logging: Firebug provides a console object. So whenever we write in our javascript code.

console.log(“the value of var is:” + i);
it will log it to the console tab in firefox.

Firefox Extendibility: Yes you got it right. Firefox can be extended to add further functionality in it Jan Odvarko talks about this in his blog http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/



2. YSlow
The major challenge in your web project is your sites performance. YSlow is a tool from yahoo that analyses web pages and gives you suggestion on the basis of http://developer.yahoo.com/performance/rules.html which is a set of rules highly effective for improving your sites performance. Remember that YSlow is a firebug addon so you need to first first have firebug added into your Firefox browser to add YSlow. Another Tool of the same category is pagespeed from google.



3. Debugbar
Debugbar is a IE plugin. Which has features like DOM Inspector, HTTP Inspector, Javascript Inspector and Javascript Console and much more read it at http://www.debugbar.com/. The feature of debugbar i enjoy the most is its javascript console.



4. www.jsfiddle.net
JSFiddle contrary to others is a online tool which they prefer calling as online tool for web. The most wonderful thing about JSFiddle is that it allows you to include various javascript libraries in the code you are writing and test your code alongside. The other beautiful thing is you can save your fiddles and share them with others.



5. Browsers
Mozilla Firefox, Internet Explorer, Netscape Navigator and Google Chrome are the browsers which i have installed on my machine and I like playing with the various DOM Models and CSS releases they support. One piece of code which works on Mozilla wouldn't necessarily work on IE and i keep referring to http://www.quirksmode.org/compatibility.html for browser compatibilities.


6. GIMP 2
GIMP is the best freeware image editing tool that i have few of the things i use gimp for is Scaling, Cropping, rotating, rotating, adding text on a image, joining two or more images etc. Its a wonderful tool with lots of basic capacities like layering, conversion from one format to another, adding alpha channels etc.


7. Editplus
Editplus is a wonderful text editor which can be used for purposes like editing of html,php, java files as well it has powerful search and replace functionality and allows you to make search based on your regular expressions.


8. Eclipse Europa
Eclipse is my favorite IDE for years. What i like most about it is if i want to write java or php i need not to switch between IDE’s. Its connection with CVS and numerous plugins make me a fan of it.


9. Http Analyzer
Http Analyzer is a IE Plugin. It helps me anaylse web traffic. Read cookie and header information, request response post data etc.


10. Beyond Compare
In a distributed team when people are working on a single file. Modifying it for different functionalities what you need to do have is a tool handy where you can merge your code with fellow developers code. There are several tools available for that but the one that i use is beyond compare for its functionalities like comparing files and folders. Showing line by line differences.


11. CVSNT
This is again a tool very useful in a distributed team although not a perfect fit to be categorized in web development tool. But i wanted to mention it as most of the web development occurs in distributed teams only. My love for it increase for the fact that its client can be easily configured with my Eclipse IDE and i need not to switch from my IDE to synchronize my files to the CVS Server or get a update or merge my changes. Other similiar products are SCCS Subversion etc.


12. CSSTidy
CSS Tidy is a parser and a optimizer. It helps you optimise you css page to gain faster loading times of your Styled Web Pages and it helps you in also formating your CSS source code.



13. YUI Compressor
YUI compressor is used to compress the javascript files and is used to retrieve a minified version of the file the compressed JS files help acheive performance benifits as size of the data transeffered from the webserver is much less than before. Its a java based tool developed by yahoo.

5 comments:

  1. Its a perfect collection of tools which makes the web developer life so easy. These tools helps the developer at each steps like layout designing, code debugging, performance tuning etc. Without these tools, we can't imagine the web development.
    Thanks Sushil for sharing informations about all these useful tools.

    ReplyDelete
  2. Thanks Sushil for sharing you tools list. I would like to hear your thoughts on how to induct a fresher into UI/Web development area. What are the concepts/tools they should focus on first and other advices to continue their journey in this growing field? May be a blog post on the same topic will help.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Great tools Sushil, I consistently use Firebug it is a great tool. You should also check out https://addons.mozilla.org/en-us/firefox/addon/tamper-data/ and http://www.fiddler2.com/fiddler2/ and for a good free SVG to PNG or PDF it is executable but also accepts CMD LINE parameters http://inkscape.org/

    ReplyDelete
  5. Thank you SO much. I could not be more flattered. love your blog- and I am in such great company here!
    web design company

    ReplyDelete