This post is a starting point of the collective effort of NUS-HCI to build a map for open source tools and code libraries. We will slowly enrich this post to make it a useful guide for essential resources for open source tools.

Client side web development

  • Client side DOM manipulation and CSS selector: JQuery
    • JQuery tutorial (excellent tutorials from Simple and intuitive, easy to learn.)
    • A visual JQuery interaction editor: IxEdit. It looks quite amazing, but …
      • I tested it with the following code in Test.html. IxEdit does not work with my Chrome browser on Windows 7.

        <!DOCTYPE html>
        <script type="text/javascript" src="jquery/jquery-plus-jquery-ui.js"></script>
        <script type="text/javascript" src="ixedit/ixedit.packed.js"></script>
        <link type="text/css" href="ixedit/ixedit.css" rel="stylesheet" />

        <link type="text/css" href="sample-style/ui-sui.css" rel="stylesheet" />


        <p>If you click on me, I will disappear.</p>


  • Client side MVC framework:
    • To learn more about the different JavaScript MVC frameworks, check out this page: It provides examples for each of the frameworks mentioned in the previous post.
  • Ajax framework
    • Sajax is a tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call ASP, Cold Fusion, Io, Lua, Perl, PHP, Python or Ruby functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.
  • Regular Expression for Lazy People (a fantastic tool that can save you a lot of time in figuring out the right syntax for a regular expression)

Written by Shengdong Zhao

Shen is an Associate Professor in the Computer Science Department, National University of Singapore (NUS). He is the founding director of the NUS-HCI Lab, specializing in research and innovation in the area of human computer interaction.