Monday, August 1, 2011

Toolkit for web development

Following the interesting startup survey infographic about The Web & Business Tools Startups Use Most, I would like to state my toolkit when it comes to web development.

Mocking and wireframe:
Balsamiq - not doubt about this one. I have tried several mocking tools including one which plugs into FF, however Balsamiq is the most simple, extensible, configurable tool for wireframe. Great for agile development since it makes you focus on functionality.
Gliffy - Online diagram tool that support UML. Very easy to start with, very clean and clear outcome.

Project documents sharing: DropBox - enable you to seemlessly share documents cross computers and cross team members.

Page design:  crocodoc - Great tool to provide feedback ( inputs... :) - internal joke... ) for designer. You can post feedbacks in certain places on the design page (like sticky notes - but better) and have offline review. Really cool.

Assembla - Manage your code repository (I use SVN) and support development activities such as planning tasks (tickets), daily meetings, wiki, code diff and much more. Installing and Configuring SVN always seemed to be an exhausting task which even was a highly important development infrastructure tool, does not bring added value to the customer and not the core of application development, therefore an ideal candidate to outsource.

IDE: Eclipse / STS - In not so far past, STS was very slow, but now it is much faster and all the bundled apps make it an easy choice for Java development.
IDE plugins:
ResourceBundle Editor: Useful to track and edit multiple i18n files in Java. (extract it and drag the folder into the eclipse/plugins folder)

Gimp - I don't want to encourage developers to handle UI design themselves (so this would be under the section of productivity killer..)

Testing - BadBoy UI recording tool, most intuitive recording and testing tool I know. Provide also an advanced mode, if required, for testing and verification.

Web pages usability - crazyEgg - demonstrate and visualize where in the page users click.
A very good tool to identify design pitfalls. Helped me see what users think and actually identify that users tried to click on a section which wasn't clickable.

Development OS : Windows
Deployment OS: Ubuntu Server
I found it very useful to use windows to boost development productivity and then deploy it on the Ubuntu server, via remote access. This portability forces me to write better code.

Remote access:
Remote command line control: SSH
Transfer files to server: FileZila

General productivity tools:
Firefox - For me, still the ideal browser for development.
Firebug - The ultimate FF plugin and the reason I don't use Chrome (I know Chrome has alternative, but still..) . No additional word is needed.
ReloadEvery - FF plugin that enable reload of pages automatically. Useful for load test or profiling.
JSONView - FF plugin to view json in clear way.
Cookie manager - Manage cookies (edit, clear, view..)
RoboForm - password management tool, also came in the flavor as a FF plugin. Enable you to have (different) strong password for each site. If you are still using your single "strong" password cross sites, then give it a try, you will be able to sleep better. I have the paid version. Worth every cent.
Notepad++ - Great for adhock file editing.
jsfiddle - Test small scripts / css online
skitch - similar to snagit.
I'll keep updating this list if I will come across further interesting tools.


  1. Very good read, I also like Axure for prototyping.

  2. You might want to use GIMPshop instead of GIMP,
    "GIMPshop was a modification of the free and open source graphics program GNU Image Manipulation Program (GIMP), with the intent to replicate the feel of Adobe Photoshop"