Nine Must Have JavaScript Tools For Every Web Developer

Almost all major web development projects include some javascript. Developing Javascript may be easy for some but working around various browsers’ incompatiblities makes it a bit more tedious chore. As a developer I always welcome the opportunity to use development tools that may help in the development process. Following is a list of some useful Javascript tools that I believe every web programmer should have at his or her disposal.

  • Javascript Frameworks:

    • Ext JS

    ExtJS is a client-side, JavaScript framework for building rich web applications.

    Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

    * High performance, customizable UI widgets
    * Well designed and extensible Component model
    * An intuitive, easy to use API

    Ext JS supports all major web browsers.

    SproutCore

    SproutCore is another Javascript framework for developing thick-client web applications in JavaScript. The development team of this cross-browser framework claims that their SproutCore offers best performance for web applications. They have incorporated Steve Souders’ recommendations for building high performance websites into the framework that makes any web appliacation developed with this framwork perform much better.

    JavaScriptMVC

    As the name implies the JavaScriptMVC framework is based on the popular Model-View-Controller (MVC) software architecture. The framework is built using jQuery and offers best practices in software development making it easy to develop and maintain the code for a large project.

    JavascriptMVC is an open source framework that incorporates software-development best practices in javascript code. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

  • Documentation:

    I know how much all developers love the documentation part of a project. But documentation is an integral part of software development, to ease the pain of the documenation you can use JSDoc Toolkit.

    JsDoc Toolkit

    Similar to Javadoc, that creates documentation from Java comments, JsDoc can generate documentation from comments in Javascript source code.

    Jsdoc-Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

  • Image Manipulation

    Pixastic

    If you need to do image manipulation in your web application Pixastic mya help you. Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
    “Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more. For the full list, see the documentation page.”

    Pixastic works by utilizing HTML5 Canvas elemtent, so it does not work well with IE that does not support Canvas.

  • Debugging

    Firebug

    : Firebug is my favorite debugging tool for Javascript based web applications. It is feature riched JavaScript debugging tool.

    Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

    DamnIT

    You can debug your web application only that much. With several different browsers you can never be sure that you have caught and fixed all the bugs in your Javascript code. This is where DamnIT can help. DamnIT is a Javascript error reporting service that can email you detailed error report when a user encounters a Javascript error on your website. It is a free service which can be really useful for debugging large web applications.

  • Javascript Widgets

    LivePipe

    LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications. It is built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed and actively maintained. It employs event oriented programming concepts that introduces a mechanism to create and observe events on any object, not just DOM elements. This is used by all controls, and allows for fine grained control of your user interface.

    Roar-Notifications

    Have you ever visited a website that displays pop-up alerts reminding you of their services? Those pop-up alerts of the past were annoyning and I don’t encounter them anymore. But sometimes there is a legitimate reason to display some information to your websitev visitors without innterupting their browsing pleasure. Roar widget is the alternative to those annoying pop-up alerts. This Javascript widget (worked with MooTool Javascript) allows you to display your messages in an unobtrusive way. You can customize the appearance of the widget and control the positions of the messages. The messages are interactive, user can click them to visit other pages on your website or hover over them to read them at their own pace.

Have you used any of these tools? Do you have your favorite Javascript tool?