Web developmentTechnologies and tools

Web technologies overview

AND MORE....

Studied Web technologies

AND MORE....

Bower

« A package manager for the web » http://bower.io/

Bower is a central repository for browser libraries or frameworks (Jquery, Boostrap, AngularJS, ...)

Bower why

• Improve development speed• Track and maintain easily your dependencies• Separate dependencies from your project’s source repository

(Git, CVS, ...)

Bower files

• bower.json : Project informations • Name• Version• Dependencies• Licence, Main file, Private, Etc...

• .bowerrc : Project Bower configuration (optional)• Dependencies directory• Remote repository url• Etc...

Bower commands

• Install Bowernpm install -g bower

• Create bower.jsonbower init

• Install a new Web packagebower install jquerybower install jquery --save (save it in bower.json)

• Update dependencies from bower.json : bower installbower update

Bower exemple

1. Install package :bower install bootstrap --save

2. Add in your index.html : <link rel="stylesheet" href="bower_components/dist/css/bootstrap.css" ><script src="bower_components/dist/js/bootstrap.js"></script>

3. Done !

Grunt

« The JavaScript Task Runner » http://gruntjs.com

Manage all your Web development tasks.(preprocessing, linting, testing, minifying, ...)

Grunt vs Gulp

Grunt• Configuration over code• More mature system• Over 3500 plugins

Gulp• Code over configuration• Steam-based build system• Small and elegant API• Over 700 plugins

Grunt commands

• Install Gruntnpm install –g grunt-cli

• Install pluginnpm install grunt-contrib-uglifynpm install grunt-contrib-uglify --save-dev (save it in package.json)

• Create taskin Gruntfile.js

• Run taskgrunt build

• Run default taskgrunt

Grunt Gruntfile.jsmodule.exports = function(grunt) {

// Project configuration.grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

},build: {src: 'src/<%= pkg.name %>.js',dest: 'build/<%= pkg.name %>.min.js'

}}

});

// Load the plugin that provides the "uglify" task.grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task(s).grunt.registerTask('default', ['uglify']);

};

Grunt file format exemples

// Files Object Formatfiles: {

'dest/a.js': ['src/aa.js', 'src/aaa.js'],'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],

},

// File Compact Formatfiles: {

src: ['src/aa.js', 'src/aaa.js'],dest: 'dest/a.js'

},

// File paternsfiles: {

src: ['src1/*.js', 'src2/**/*.js', 'src3/{,*/}*.js'],dest: 'dest/scripts.js'

},

// File optionsfiles: {

cwd: 'lib/',src: ['**/*.js'],dest: 'build/',ext: '.min.js',

},

LESS

« Less is a CSS pre-processor, meaning that it extends the CSS language, [...] that allow you to make CSS that is more maintainable, themable and extendable. » http://lesscss.org

LESS variables

// Variables@link-color: #428bca; @link-color-hover: darken(@link-color, 10%);

// Usagea.link {

color: @link-color;}

a:hover {color: @link-color-hover;

}

.widget {color: #fff;background: @link-color;

}

LESS mixins

.border-radius (@radius: 5px) {-webkit-border-radius: @radius;

-moz-border-radius: @radius;border-radius: @radius;

}

#header {.border-radius(4px);color: black;

}

.button {.border-radius(6px);

}

LESS nested 1/2

.btn {color: black;.navigation {

font-size: 12px;}.logo {

width: 300px;}&:hover {

color: red;}

}

.btn {color: black;

}.btn .navigation {

font-size: 12px;}.btn .logo {

width: 300px;}

.btn:hover {color:red;

}

LESS nested 2/2

.screencolor {@media screen {

color: green;@media (min-width:768px) {

color: red;}

}@media tv {

color: black;}

}

@media screen {.screencolor {

color: green;}

}@media screen and (min-width: 768px) {

.screencolor {color: red;

}}@media tv {

.screencolor {color: black;

}}

LESS operations

@base: 5%;@filler: @base * 2;@other: @base + @filler;@font-size-base: 12em;

color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;font-size: @font-size-base+2;

LESS functions

http://lesscss.org/functions/

• ceil• svg-gradient• rgba• saturate• ...

LESS guards

.mixin (@a) when (lightness(@a) >= 50%) {background-color: black;

}.mixin (@a) when (lightness(@a) < 50%) {

background-color: white;}.mixin (@a) {

color: @a;}

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

.class1 {background-color: black;color: #ddd;

}.class2 {

background-color: white;color: #555;

}