Programming style guide

Since toolbox is a project that receives contributions from multiple people from various programming backgrounds it is important to be aware of style conventions. This document's aim is to make it easier for someone who starts work on toolbox to familiarize themselves with the style conventions agreed upon in toolbox.

Note: Toolbox still contains a lot of code not following the below guidelines, this is partially why this document was created. When in doubt this document outranks any current code in toolbox.

Note2: This document is a work in progress and in that regard not complete. If you feel that something is missing or should be added bring it up on irc or /r/tb_dev.

CSS

• When there is a need to reference a external resource (large images) don't use relative urls. They cause issues in both chrome and firefox at times. Just use https.
• When introducing elements to the dom always give them class names starting with "tb-"

Style Notes:

• Max right-margin for line breaks is 200 columns. Not 80, not 100.
• TB uses spaces not tabs. Tabs will get you killed.

When you need to store variable in elements use the data- attribute.

Example:

      <span class="tb-whatever" data-variablename="your important data">hi!</span> 

You should not use classes and ids for this.

Use single quotes for all javascript stuff and double quotes for html in variables.

Example:

     const variable = '<div class="tb-class">content</div>' 

Use template literals for multi-line strings and strings containing variables/expressions

MDN page Examples:

     const multiLine = `string text line 1
                         string text line 2`;

     const expression =`string text ${expression} string text`

Use 'let' or 'const' for variable declarations

Note: because of legacy reasons toolbox still uses mostly var for variable declarations. These will be converted in the future, newly declared variables should use let or const.

Statements longer than one line need to be bracketed.

Allowed:

    if (notEnabled) return;

Not allowed:

    if (notEnabled)
        return;

Bear food:

    if (notEnabled)
        return;
    else
        run();

If you make it two lines without brackets you will be fed to the bear.

    if (notEnabled) return;
    else run();

If you do this a bear will rip off your skull and shit down your throat.

jQuery variables should be preceded by $

You should clearly mark variables which contain jQuery objects by preceding the name with "$". For example, in Mod Button, we have $popup, which is a jQuery object referencing the current .mod-popup object.

objects should only be converted jQuery objects once.

Bad:

    foo.each(function() {
        $(this).jqueryBar();
        $(this).jqueryBaz();
        this.nativeBar()
    });

This converts the object to a jquery object twice.

Good:

    foo.each(function() {
        var $this = $(this);
        $this.jqueryBar();
        $this.jqueryBaz();
        this.nativeBar();
    });