HTML

HTML

• remove useles white character
• extract list of linked file - useminPrepare
• convert HTML templates to JavaScript

CSS

SASS

CSS preprocessor

Variables SASS

$mainColor: #d3ffd5;

body {
    color: $mainColor;
    }
h1 {
    color: $mainColor;
}

body {
  color: #d3ffd5;
}

h1 {
  color: #d3ffd5;
}

Nesting SASS

.components {
  .slider {
    color: red;
  }
  .button {
    font-size: 12px;
  }
}

.components .slider {
  color: red;
}
.components .button {
  font-size: 12px;
}

Mixins SASS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { 
    @include border-radius(10px); 
}

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Functions SASS

• rgba($red, $green, $blue, $alpha)
• lighten($color, $amount)
• darken($color, $amount)
• saturate($color, $amount)
• desaturate($color, $amount)
• grayscale($color)

Mixin library SASS

• Compass
• Bourbon
• Bootstrap
• Foundation

LESS

• Requires Ruby
• $variable
• for

• Node Module
• @variable
• loops

JavaScript

How to reduce size of JavaScript files?

minification JavaScript

function getRandomItems(array, count) {
    var randomArray = [], number;

    while (randomArray.length < count) {
        number = Math.round(Math.random() * array.length);
        randomArray.push(array[number]);
    }
    return randomArray;
};

function getRandomItems(a, b) {
    var c = [], d;

    while (c.length < b) {
        d = Math.round(Math.random() * a.length);
        c.push(a[d]);
    }
    return c;
};

minification JavaScript

• removes
  • whitespace
  • row ends
  • dead code
  • comments
  • unused code
• mangle (scrambling) variables
• generate source map

minification JavaScript

• obfucsation
• uglyfication
• scrambling

minification JavaScript

Linters

Static code control

JSlint

• missing ";"
• excessive comma
• using of ==
• global variable
• missing blocks
• eval
• unsafe characters
• one var

JShint

• more configurable JSlint

Why have lint free code?

• prevention of stupid issues
• part of coding standard
• check before minification

Douglas Crockford: JavaScript good parts

Beautifiers

Code formatting

Beautifiers

• so long coding standard (only setup beautifier)
• end of tab/space games
• end of inidividuality mirroring in code

Beautifiers

• indentation
• max empty lines
• brackets formatting

Beautifiers

• Javascript Format
• SASS beautify
• HTML pretify

NodeJs

Put it together

NodeJs

                         npm install module
                         npm install
                    

usemin NodeJs

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
                    

autoprefixer NodeJs

options: {
  browsers: ['last 2 versions', 'ie 8', 'ie 9']
  }
}

concat NodeJs

uglify NodeJs

filerev NodeJs

{
  'img1.png': 'tmp/img1.59bcc3ad.png',
  'img2.png': 'tmp/img2.060b1aa6.png'
}

htmlmin NodeJs

Related libs management

Bower

• bower install package
• bower.json

Scaffolding

• structure
• configuration
  • Yeoman
  • Ember-cli

Testing

CSS Frameworks

• Bootstrap
• Foundation

Icon fonts