Style guide

General

• We aim to support the current stable versions of the following browsers:
  • Mozilla Firefox
  • Google Chrome
  • Apple Safari
• Never use inline JavaScript in HTML. It's harder to maintain and reduces CSP effectiveness.
• For the same reason, also avoid writing scripts and styles directly in HTML.
• Readability and efficiency go hand in hand. Carefully consider which is more important in your case.

JavaScript

ES2018

ESlint

Use it, it will help you greatly.

General

• Tabs for indentation.
• Double quotes for strings. "Can't handle the foo"
• Use template strings `string ${value}` instead of concatenating such as "string " + value.
• Add spaces around operators. let newvalue = 1 + 1 * value / arr[0] + (7 * 455);
• When using multiple brackets, add spaces and consider using newlines. Math.sin( ( Math.PI / 180 ) * rad )
• Use let and const, avoid using var.
• For enums, consider defining a .json containing const variables.
• When initializing a variable without setting it immediately, set it to null. This allows to differentiate between initialized (null) variables and non-initialized variables (undefined).
• Files end with a trailing newline.

Naming conventions

Use short yet readable names. If there is a common abbreviation that you want to use, you are allowed to use it. Don't use abbreviations which need a context to be understood properly.

• For variables and function names, use camelCase.
• For constructors, use TitleCase.
• Variables and functions that are considered private start with an _underscore.
• For variable constants, use CAPITAL_LETTERS.
• For files and folders, use lowercase-and-hyphens.

Objects

• Use object literals (let object = {}) over new Object().
• When using a constructor, define the methods on the prototype.
• With the exception of prototype, prevent defining new properties outside of the literal/constructor whenever possible. This allows for an easy overview of an object's properties.
• When using object literal notation, define variables at the top and functions at the bottom.
• Consider using the following module pattern, which prevents access to private members from outside the module:

let myModule = function() {
    let _privateVar = 0;

    let _privateMethod = function( foo ) {
        console.log( foo );
    };

    return {
        publicVar: 42,

        publicMethod: function() {
            _privateVar++;
            _privateMethod(`private var = ${_privateVar}`);
        }
    };
}();

Code blocks

• Code block curly brackets are preceded by a space.

function myFunction() {
    if (foo) {
        ...
   }
}

• The last closing bracket before other code is followed by an empty newline.

function myFunction() {
    ...
}

foo = bar;
...

• For a comparative assignment, ternary operators are preferred let foo = bool ? 'Yes' : 'No';.
• Multi-line ternary operators are also allowed.

let foo = bool
    ? 'Yes'
    : 'No';

• For single line ifs, keep them in a single line if(bool) myFunction();.
• For if else constructions, keep else on the same line as the closing bracket of the corresponding if.

if (foo) {
    ...
} else if (bar) {
    ...
} else {
    ...
}

• Consecutive function execution is encouraged to have a single function per line.

myPromise = myFunction.then(...)
    .then(...)
    .catch(...)
    .finally(...);

Asynchronous code

• Prefer the use of Promise over callbacks.
• If a Promise can reject, ensure that rejection is handled appropriately.
• Avoid blocking the server's main thread as much as possible, in order to keep the server responsive.

Events

• Handling events should always be done through .addEventListener( ... ) to avoid overwriting formerly set event handlers.
• When an event becomes obsolete, remove it with .removeEventListener( ... ) so no memory is leaked.

CSS

• Don't you dare to ever use !imporant.
• Add a space after the property key. color: white;
• For single property selectors, single line is allowed but do add spaces around the brackets. a:visited { color: purple; }
• For multiple properties, add them on a new line per property, and add an empty newline at the end of the block.

.vaporwave {
    color: pink;
    background-color: lightblue;
    font-family: "Times New Roman";
}

#marble {
    ...

• Shorthand properties are allowed.
• Indenting related CSS is encouraged.

.vaporwave {
    ...
}

    .vaporwave:hover {
        ...
    }

    .vaporwave i {
        ...
    }

        .vaporwave i:hover {
            ...
        }

#marble {
    ...

• Multiple selectors should be on multiple lines (1 each)

.vaporwave h1,
.vaporwave h2,
#marble:active {
   ...
}