Top ten tips for setting up your PC for Web UI development

27 Apr, 2007
Xebia Background Header Wave

If your job role involves activities like "web page scripting, AJAX, interactive user interface development, HTML content rendering, rich content website development and whatever that you do to get the webpage up and showing", then you might find this blog entry handy while setting up your PC for web application/UI developments.
This blog entry is not about web layout or image design & development.

  1. Test with Firefox

    No matter what, this is a must tool for you. While I personally I surfing with IE, Firefox stays ahead of many browsers when its comes to testing your web page. Lots of plugins developed around this make Firefox useful everyday. Continue reading this blog, you will see yourself why it is so.

  2. Add Web Developer

    Imagine a tool that can help you view/edit/list css of a webpage and that too dynamically ?. Imagine a tool that can help you to trace & inspect attributes of a html object just by placing the mouse over it ?. Imagine a tool that can show your webpage on various screen resolution.. Yes its all there in Web Developer. Want to see exactly it looks like, click this
    which shows the screenshot of a webpage in firefox with web developer activated.

  3. Add Venkman / SeaMonkey

    At one point, you might require a tool where you need to debug your javascript line by line and/or method by method. Add watch to a variable, simulate a script and so on. Yes this kind of debugging tool is available for javascript and the best one that works quite well with Firefox2.0 is Venkman.

  4. Add Microsoft Script Editor – Javascript Debugger for MS IE

    Getting it working is little difficult, but atleast the tutorial at helps us to do so. This helps if you want to fix bugs that works in Firefox but not in IE.

  5. Add FireBug

    This is as powerful as Web developer. The unique features of this is the ability to sniff the messages that was sent using XMLHttprequest/AJAX. This helps you to see what exactly your request/response carries. Particulary useful for tracing JSON datas sent while using AJAX

  6. Add Scriptaculous

    If you do lots of javascripting for your page (and or AJAX), then it is advisable to use Scriptaculous – Prototype capability. Dont waste your time by writing codes that do the DHTML magics. Everything that your rich web UI expects to have is defined in it. Includes funtionality like Array manipulations, JSON, Drag & drop and so on. Dont reinvent the wheel ?

  7. Use a prebuilt Javascript library for AJAX operations

    Dont write your code unless you want to make less than 2 ajax calls for your application. Javascript libraries like Dojo, DWR, Ajax tags works very will leading web apploication frameworks. For instance DWR with Spring makes AJAXing extremely easy.

  8. Use Xeno Link sleuth

    Dont publish your website without checking for the broken links. Even if you happen to remove a webapge from your directory, do provide a re-redirect option for that page. This will help your customer stay tuned to new changes in your site. Xenu link sleuth does a great job on finding and listing broken links.

  9. Use Selenium

    The best testing breeed that can test and tell things like Browser compatibility checking and System functionality testing. A nice tool for writing test cases on javascript as well.

  10. Add HTML Validator

    A tool that will help to confirm your html code to W3C XHTML specifications. It is important to get your web page to xhtml complaint as you will never know what user-agent will be? It can be a mobile or pda or webtv and so on. XHTML atleast helps to keep the content layout stable.

These are just top 10 tips and if you found some more tools useful at everyday of your web development, please kindly add that as a comment.

Balaji D Loganathan
Working as a Senior Consultant at Xebia India IT Architects Private Limited, Gurgaon, India.

Get in touch with us to learn more about the subject and related solutions

Explore related posts