Some tools and technologies greatly help the developer’s work, like code quality control, automatic formatting utilities and browser’s developer tools.

Text Editor

One need a decent text editor with at least those features :

  • Syntax coloration
  • Templates Snippets
  • Linter (sea later)
  • Formatter
  • (opt) Minifier

Some good editors

  • IDE: Netbeans, Eclipse, Aptana, WebStorm
  • Windows only: NotePad++, UltraEdit, Dreamweaver
  • Mac only: TextMate, Coda, Textwrangler
  • Linux only: Gedit
  • :cloud: Cloud Based: Cloud9, Codeanywhere, Koding
  • :heart: The ones you should use ;-): Sublime Text, Brackets, Atom, Visual Studio Code

Web Browser Developer tools

A good project has to be tested on all major browsers. It is however difficult to do it during development. Tip: change your default browser every week or so.

Dev-channels and Developer-dedicated browsers

Main browsers provide versions of browser with latest features and/or tuned for developers.

Developer tools

Mostly same features in all browsers (without plugin)

  • DOM/CSS analyzer/explorer
  • Network status (per request)
  • Profiler
  • Code Explorer
  • Javascript Console
  • Debugger…

Server-side Javascript

Appart from JS console in browsers, several interpreters are available. Node.js is a JS runtime build on Chrome’s JS engine (V8).

The node (or nodejs) command is a command line interactive interpreter a.k.a. a REPL (Read–eval–print loop):

$ node
> var oh = {my: 'dear'}

The node command can also run scripts (node my_script.js).

Node.js is associated with NPM (Node Package Manager). The NPM project manages packages written for Node.js, resolves dependencies between packages and help building new projects. NPM is also a repository where all the Node.js packages are registered at

mkdir myProject && cd myProject
npm init # initialize your project!
npm search lodash
npm install --save lodash

Install Node.js

On préférera l’installation via le gestionnaire de paquet de votre OS ou bien via nvm.

  • On Ubuntu
sudo apt-get install curl build-essential
curl -sL | sudo -E bash -
sudo apt-get install -y nodejs

Code Quality Control

JavaScript is an interpreted language. No compilation. Errors are raised at runtime. A syntactic analysis usually helps. Several tools help controlling your code quality:

Most editor can include such tools.

Code Formatting

Quickly Test and exchange code

  • General Purpose: Github’s Gist
  • Specific to Web Development:

Code Versioning

Any project should be hosted on a versioning system. Free services like Github, BitBucket, GitLab, etc., are used to:

  • host public/private projects source code
  • launch automated tests
  • host projects public web sites
  • build your own portfolio

Support des TP pour le cours de WEB-IHM

Le TP de ce cours sont hébergé sur un gestionnaire de projet GIT. Les TP sont a faire en clonant le dépôt d’origine. Le dépôt se fait en faisant un pull/merge request sur le dépôt d’origine.

On utilise la forge de l’université du Havre (c’est une instance Gitlab):