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 and usage of them.

Use an editor that supports ESLint and EditorConfig

The majority of the programming style we require is defined and enforced through the configuration of these two tools. So the easiest way to make sure that you follow them is by using an editor that supports both. Here is an example on how to set up Visual Studio Code

ESLint

The majority of our javascript styles are enforced through ESLint.

To see what rules are configured you can have a look at the project .eslintrc.json file.

.editorconfig

In addition to ESLint we use EditorConfig to enforce some general style related things. Most obviously tabs which we have defined as 4 spaces. Also here we recommend using an editor that has support for EditorConfig

Javascript

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();
    });

HTML & CSS

Relative urls in 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 the absolute https url, non encrypted urls are not allowed.

DOM element class & ID naming.

When introducing elements to the dom always give them class names or IDs starting with tb-. This avoids conflicts with native reddit elements that might be named similarly, other extensions and in general makes it easier to see what elements are added by toolbox.

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

Example:

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