Skip to content

Front End Bible

Jump to bottom
Mantas Kunsmanas edited this page Oct 20, 2017 · 7 revisions

Front-End Bible

HTML

  1. Use HTML5 Doctype declaration <!DOCTYPE html> unless stated otherwise in project details.
  2. Validate every HTML page with W3C.
  3. All pages must be tested on following browsers unless stated otherwise in project details:
    Chrome - current version plus previous two versions.
    Firefox - current version plus previous two versions.
    Edge - current version plus previous two versions.
    Internet Explorer - IE11, IE10 (IE9 should be tested based on project requirements).
    Mobile Safari - iOS 8.0 to current version.
    Mobile Chrome - Android from v.4.4 and iOS from 8.0 to latest.
  4. Every page should have <title> tag defined.
  5. Meta tag for character encoding should be set: <meta charset="utf-8">.
  6. Language attribute should be present: <html lang="en">.
  7. All special HTML characters should be properly encoded (e.g. &amp;, &reg;).
  8. All responsive pages should have viewport meta tag declared.
    <meta name="viewport" content="width=device-width, initial-scale=1">.
  9. Properties maximum-scale=1 and user-scalable=no should be used only if needed.
  10. Every project should have favicons in the root directory with reference link in the head section.
  11. Every project must have up to date Style Guide page.

CSS

  1. No inline CSS

  2. Global selectors should be avoided (e.g. *{}).

  3. Use classes instead of ID's where is possible.

  4. Main HTML elements should have default styles and alternative classes defined (e.g.: .heading1, .heading2, .heading3): <h1>, <h2>, <h3>, <h4>
    <ul>, <ol>
    <p>
    <a>
    <img>
    <h4 class="heading1">

  5. HTML elements should be selected using class attribute where possible, especially form elements (e.g. <input class="text-field" />).

  6. Long CSS selectors should be avoided. Recommended length - up to three elements.

  7. body element should have default font style declaration, background color and min-width properties.

  8. Use SVG sprites where possible.

  9. Helper classes (e.g. .active, .selected ) should be never styled alone.

  10. We use BEM methodology for naming convention. More info

Javascript

  1. No inline javascript of any kind.

  2. Classes for javascript selectors should have js- prefixes and should never be styled.

  3. Load your javascript code with require.js and/or place javascript file in the end of your document. Further reading: http://www.devbridge.com/articles/understanding-amd-requirejs/

  4. Define variables at the top of the function.

  5. Always declare "use strict"; at the top of the module. Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

  6. Reduce global variables as much as you can. Further reading:

  7. Don't use reserved keywords for naming. Don't use reserved words as keys. It won't work in IE8, list of reserved words https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words

  8. Try to avoid hardcoded values in the javascript code.

  9. If you operate with DOM - be sure, that you have DOM ready event fired, try to use it only once:

        $(function() {
        // Handler for .ready() called.
    });

  10. Try to avoid user agent detection, instead try to detect features. Further reading:

  11. Declare your variables at the top of the scope, do not use undeclared variables, combine them with one “var” declaration:

        //Bad
    var items = getItems();
    var goSportsTeam = true;
    var dragonball = "z";

    //Good
    var items = getItems(),
        goSportsTeam = true,
        dragonBall = "z";

Further reading: https://gist.github.com/hallettj/64478

  1. Declare variables outside of the for statement.

  2. Use dot notation, then accessing properties. You can break this rule if property name is with not a valid name.

        //Bad
    var isDevbridge = devbridge['property'];

    //Good
    var isDevbridge = devbridge.property;

Further reading: * http://mothereff.in/js-variables * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

  1. For event binding, use $(selector).on('event', function(){}); Advantages:

    • You can add context selector even with null value
    • Event namespacing
    • Consistency
    • Delegation

  2. Use shortcut conditional statements:

    • Use // FIXME: to annotate problems,
    • Use // TODO: to annotate solutions to problems. These should be eliminated in production.

  3. Sometimes comments are essential part of code. Try to name variables/functions/modules properly and comment your code as needed. Constants should be named in uppercase letters.

  4. Use indentation when making long method chains:

        //Bad
    $('#items').find('.selected').highlight().end().find('.open').updateCount();

    //Good
    $('#items')
        .find('.selected')
        .highlight()
        .end();

  5. Cache DOM lookups.

        var sidebar = $('.sidebar');
    sidebar.hide();
    // Code
    sidebar.show();

  6. Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently.

  7. Avoid ==, then checking. Use === instead. Don’t change type of variable in it's lifespan.

  8. Try to load libraries from CDN. How to make this with require.js see example here:

        jquery: [
        'http://somecdn.com/jquery.min', // your cdn
        'lib/jquery' // your fallback
    ],

Resources for cdn files: * https://developers.google.com/speed/libraries/devguide * http://cdnjs.com/ * http://cdncatalog.com/ * http://www.jsdelivr.com/

  1. When possible, use custom namespace for events. It's easier to unbind the exact event that you attached without affecting other events bound to the DOM element.

        $(".js-attach").on("click.mySpecialClick", myEventHandler); // GOOD

    // Later on, it's easier to unbind just your click event
    $(".js-attach").off("click.mySpecialClick");

  2. Prevent animations from looping. Use stop(true, true). Further reading:

  3. Check the compatibility of plugin with the jQuery version that you are using. Do not forget to include jQuery migrate script if library is written on jQuery, that is older than 1.9 version. Further reading:

  4. Do not mix CSS with jQuery. Why: Harder to override, control and maintain.

        //Bad
    $('#myDiv').css({'color':red, 'font-weight':'bold'});

    //Good
    $('#myDiv').addClass('error');

  5. DO NOT use Deprecated Methods. It is always important to keep an eye on deprecated methods for each new version and try avoid using them. http://api.jquery.com/category/deprecated/

  6. Be up to date, read, develop, share and contribute:

IDE

  1. Webstorm settings folder .idea and .sass-cache folder should be excluded from the project and the repository.
  2. For HTML and SCSS formatting use spaces of 4 tabs indentation.
  3. Code before check-in should be well formatted (Ctrl + Alt + L).
Clone this wiki locally