Code style for Sugar HTML development

General

Javascript

The js-beautify tool can be handy for the indentation part. See explanation below.

Here is a good reading about javascript code conventions http://javascript.crockford.com/code.html .

For public and private members of an object, read http://javascript.crockford.com/private.html. To make the object available in private members, keep a private variable named that:

HTML

The js-beautify tool can be handy for indenting HTML as well.

CSS

Tools

JSHint

Use JSHint http://jshint.com/ to check for errors and make the source compatible with our coding conventions. The jshint command is provided by sugar-build.

To check JavaScript code:

Add it to your editor to ease development. There are several plugins at http://jshint.com/install/ .

js-beautify

Use js-beautify https://github.com/einars/js-beautify to make the sources compatible with our indentation conventions. The js-beautify command is provided by sugar-build.

To clean javascript code:

Warning: the --replace option will modify your source. But you will be safe if you are versioning it (we use git for Sugar Web).

It can do HTML as well:

Add it to your editor to ease development. There are several plugins at http://jsbeautifier.org/ .

RECESS

RECESS https://github.com/twitter/recess keeps the order of CSS rules following a convention, and protects us from different mistakes. The recess command is provided by sugar-build.

To check CSS or LESS code:

Karma

If you are hacking on sugar-web, run the testsuit with the karma command inside a osbuild shell:

We encourage writting new unit tests for new features.

After you do the changes, run:

It will run all the code checks and the unit tests making sure you won't break the build when your changes are pushed. If a test doesn't pass either your code needs to be fixed or the test need to be adapted.