Coding style guide

test

Introduction

The 2 most used languages at Code Yellow are

  1. PHP
  2. Javascript

PHP has PHP-FIG which is becoming more commenly accepted. Javascript has idiomatic. For all projects we apply these rules:

General

    <?php
    // PHP
    $mPerson = new \Model_Person();

    class SomeSpecialClass {
        private $MPerson = '\\Model_Person';
        private $mPerson = null;

        public function __construct(\Model_Person $mPerson = null) 
        {
            if ($mPerson === null) {
                $this->mPerson = $mPerson;
            } else {
                $this->mPerson = new $this->MPerson();
            }
        }

        // Strict camelCase.
        public function parseRestHttp() 
        {
            // Do something.
        }

    }
    // Javascript
    var MPerson = require('model/person'),
    mPerson = new MPerson();

Javascript

Idiomatic with adjustments. Check out backbone-crux for an example on how to implement the style guide in Javascript.

        if (condition) {
            doSomething();
        }

        while (condition) {
            iterating++;
        }

        for (i = 0; i < 100; i++) {
            someIterativeFn();
        }
        var foo = 'bar',
        bar = '',
        array = [],
        object = {};
        quux;
        function foo(arg1, argN) {
            var bar = '',
            qux;

            // All statements after the variables declarations.
            require('someModule');
        }
        foo(arg1, argN);
        function square(number) {
            return number * number;
        }
        square(10);
        function square(number, callback) {
            callback(number * number);
        }

        square(10, function (square) {
            // callback statements
        });
        var square = function (number) {
            // Return something valuable and relevant
            return number * number;
        };
        var factorial = function factorial (number) {
            if (number < 2) {
                return 1;
            }

            return number * factorial(number - 1);
        };
        function FooBar(options) {
            this.options = options;
        }
        var fooBar = new FooBar({a: 'alpha'});

        fooBar.options;
        foo(function () {
        });

        foo(['alpha']);
        foo(['alpha', 'beta']);
        foo([
            'alpha', 
            'beta', 
            'gamma'
        ]);

        foo({a: 'alpha'});

        foo({
            a: 'alpha',
            b: 'beta'
        });

        foo('bar');
    // Instead of...
    if (array.length > 0) ...
    if (array.length === 0) ...
    if (string !== '') ...
    if (string === '') ...
    if (foo === true) ...
    if (foo === false) ...

    // ...use
    if (array.length) ...
    if (!array.length) ...
    if (string) ...
    if (!string) ...
    if (foo) ...
    if (!foo) ...

    // Be careful, this will also match: 0, '', null, undefined, NaN
    // If you _MUST_ test for a boolean false, then use
    if (foo === false) ...

    // When only evaluating a ref that might be null or undefined, but NOT false, "" or 0,
    // instead of this:
    if (foo === null || foo === undefined) ...

    // ...take advantage of == type coercion, like this:
    if (foo == null) ...

    // Remember, using == will match a `null` to BOTH `null` and `undefined`
    // but not `false`, "" or 0
    null == undefined
    '1' === 1; // false
    '1' == 1; // true
    vent.trigger('nav:open');
    vent.trigger('nav:close');
    vent.trigger('before:nav:close');
    vent.trigger('after:nav:close');
    'slideToggle'
    'before:slideToggle'
    'after:slideToggle'
    // Class:
    var MAccount = require('model/account'),
    CAccount = require('collection/account'),
    VAccount = require('view/account'),
    RDialog = require('region/dialog'),
    XAccount = require('mixin/account'),

    // Instance of class:
    mAccount = new MAccount(),
    cAccount = new CAccount(),
    vAccount = new VAccount(),
    xAccount = new XAccount()
    // # Some awesome code title
    //
    // ### _Subtitle._
    //
    // Amazing description of code.
    // ___
    //
    // **Author:** AB Zainuddin
    //
    // **Email:** burhan@codeyellow.nl
    //
    // **Website:** 
    //
    // **License:** Not yet...
    // ___
    {
        "globals": {
            // RequireJS
            "require": true,
            "define": true,
            "module": true,

            // Jasmin.
            "using": true,
            "expect": true,
            "it": true,
            "describe": true,
            "waitsFor": true,
            "runs": true,
            "jasmine": true,
            "beforeEach": true,
            "mostRecentAjaxRequest": true
        },
        "onecase": true,
        "quotmark": "single",
        "unused": "vars",
        "strict": true,
        "undef": true,
        "trailing": true,
        "browser": true
    }

Frontend project layout

HTML

<div id="_body"></div>
<div class="_some-important-element"></div>
<div class="_product-region"></div>

Tagged ,

comments powered by Disqus