Web tools

What is best developers attribute?

Playground

• HTML
• CSS
• Images
• JavaScript

Aim

• Less data on load
• Less requests onload
• Handling of source caching

Secondary AIM

• Easy run project
• Orientation in project
• Dependecies management
• DOCs Autogenerate
• TEST enviroment

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

• $variable
• for

• @variable
• loops

How to reduce size of CSS files?

Minification CSS

• Remove whitespaces
• Remove last ";"

Output style SASS

• nested
• expanded
• compact
• compressed

Output style SASS

compact

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

Compressed

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

JavaScript

How to reduce size of JavaScript files?

minification JavaScript

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

mangle 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;
};

mangle 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
• prevent issues caused by 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

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

Bower

Related libs management

Bower

$ bower init
$ bower install jquery
$ bower install jquery --save

bower.json

{
  "name": "rr",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.16",
    "es5-shim": "~3.1.0",
    "angular-sanitize": "1.2.16",
    "jquery": "~2.1.1"
  },
  "devDependencies": {
    "angular-resource": "1.2.16",
    "angular-route": "1.2.16"
  },
  "appPath": "app"
}

Bower

Version is important!

Runners

Runners

• Grunt
• Gulp
• broccoli
• brunch
• cake
• jake
• mimosa

Grunt vs. Gulp

Grunt

grunt-cli

$ npm install -g grunt-cli #puts the grunt command

Grunt

Runner

$ npm init                  #creates package.json
$ npm install grunt --save  #adds grunt to package.json

Scaffolding

Scaffolding

• folder structure
• build configuration
• generators

Scaffolding

• grunt-init
• Yeoman
• Ember-cli

Common JS Grunt

#run once
$ npm install -g grunt-init     #grunt init cli
$ git clone https://github.com/gruntjs/grunt-init-jquery.git \
     ~/.grunt-init/jquery       #download template

$ grunt-init commonjs           #create a commonjs
$ npm install                   #install modules from template
$ grunt                         #run grunt task

Yeoman Scaffolding

#run once
$ npm install -g yo                 #install yeoman
$ npm install -g generator-angular  #install angular template

$ yo angular [app-name]             #create angular app
        
$ npm install                       #node dependencies
$ bower install                     #bower dependencies

Yeoman Scaffolding

• app
• bower_components
• node_modules
• test
• .bowerrc
• .jshintrc
• bower.json
• Gruntfile.js
• package.json

Yeoman Scaffolding

$ grunt serve
$ grunt build
$ grunt serve:dist
$ grunt test

Testing

Unit testing

• Karma runner
• Jasmine

E2E (functional) testing

• Protractor
• Selenium

CSS Frameworks

Breakpoints

Grid CSS Frameworks

Large Grid CSS Frameworks

Small Grid CSS Frameworks

Grid in code

<div class="row">
    <div class="columns small-12"></div>
</div>
<div class="row">
    <div class="columns medium-4"></div>
    <div class="columns medium-8"></div>
</div>
<div class="row">
    <div class="columns small-12"></div>
</div>

CSS Frameworks

• Blueprint
• 960 grid system (Unsemantic)
• Bootstrap
• Foundation

Bootstrap CSS Frameworks

UI elements

• Dropdowns
• Buttons
• Navbars
• Pagination
• Progress bars
• Alerts