The document discusses various web development technologies and tools including Bower, Grunt, Less, and more. Bower is a package manager for browser libraries and frameworks. Grunt is a JavaScript task runner for managing development tasks like preprocessing, testing, and minification. Less is a CSS pre-processor that extends CSS with features like variables, mixins, nesting, and operations.

1. Web development
Technologies and tools

2. Web technologies overview
AND MORE....

3. Studied Web technologies
AND MORE....

4. Bower
«A package manager for theweb» http://bower.io/
Bower is a central repository for browser libraries or frameworks
(Jquery, Boostrap, AngularJS, ...)

5. Bower why
•Improve development speed
•Track and maintain easily your dependencies
•Separate dependencies from your project’s source repository (Git, CVS, ...)

6. 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...

7. 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

8. 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 !

9. Grunt
«The JavaScript Task Runner» http://gruntjs.com
Manage all your Web development tasks.
(preprocessing, linting, testing, minifying, ...)

10. 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

11. 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

12. Grunt Gruntfile.js
module.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']);
};

13. Grunt file format exemples
// Files Object Format
files: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
},
// File Compact Format
files: {
src: ['src/aa.js', 'src/aaa.js'],
dest: 'dest/a.js'
},
// File paterns
files: {
src: ['src1/*.js', 'src2/**/*.js', 'src3/{,*/}*.js'],
dest: 'dest/scripts.js'
},
// File options
files: {
cwd: 'lib/',
src: ['**/*.js'],
dest: 'build/',
ext: '.min.js',
},

14. 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

15. LESS variables
// Variables
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
// Usage
a.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}

16. 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);
}

17. 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;
}

18. 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;
}
}

19. 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;

20. LESS functions
http://lesscss.org/functions/
•ceil
•svg-gradient
•rgba
•saturate
•...

21. 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;
}