SlideShare a Scribd company logo
1 of 21
Download to read offline
Web development 
Technologies and tools
Web technologies overview 
AND MORE....
Studied Web technologies 
AND MORE....
Bower 
«A package manager for theweb» 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.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']); 
};
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', 
},
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%); 
// Usage 
a.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; 
}

More Related Content

What's hot

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST APIWordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST APIBrian Hogg
 
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet
 
Inside Bokete: Web Application with Mojolicious and others
Inside Bokete:  Web Application with Mojolicious and othersInside Bokete:  Web Application with Mojolicious and others
Inside Bokete: Web Application with Mojolicious and othersYusuke Wada
 
Mojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tMojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tCosimo Streppone
 
Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014Alex S
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Anatoly Sharifulin
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST APICaldera Labs
 
Multi Tenancy With Python and Django
Multi Tenancy With Python and DjangoMulti Tenancy With Python and Django
Multi Tenancy With Python and Djangoscottcrespo
 
Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014Naresha K
 
Drupal cambs ansible for drupal april 2015
Drupal cambs ansible for drupal april 2015Drupal cambs ansible for drupal april 2015
Drupal cambs ansible for drupal april 2015Ryan Brown
 
Common Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid ThemCommon Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid ThemAcquia
 
Task Scheduling and Asynchronous Processing Evolved. Zend Server Job Queue
Task Scheduling and Asynchronous Processing Evolved. Zend Server Job QueueTask Scheduling and Asynchronous Processing Evolved. Zend Server Job Queue
Task Scheduling and Asynchronous Processing Evolved. Zend Server Job QueueSam Hennessy
 
Hash Signaling Made Easy
Hash Signaling Made EasyHash Signaling Made Easy
Hash Signaling Made Easydavidgouldin
 

What's hot (20)

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST APIWordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
 
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)
 
Inside Bokete: Web Application with Mojolicious and others
Inside Bokete:  Web Application with Mojolicious and othersInside Bokete:  Web Application with Mojolicious and others
Inside Bokete: Web Application with Mojolicious and others
 
Mojolicious: what works and what doesn't
Mojolicious: what works and what doesn'tMojolicious: what works and what doesn't
Mojolicious: what works and what doesn't
 
2.hello popescu2 in Laravel
2.hello popescu2 in Laravel2.hello popescu2 in Laravel
2.hello popescu2 in Laravel
 
Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014Drush - use full power - DrupalCamp Donetsk 2014
Drush - use full power - DrupalCamp Donetsk 2014
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
 
Bower introduction
Bower introductionBower introduction
Bower introduction
 
Bower
BowerBower
Bower
 
Multi Tenancy With Python and Django
Multi Tenancy With Python and DjangoMulti Tenancy With Python and Django
Multi Tenancy With Python and Django
 
Php sessions
Php sessionsPhp sessions
Php sessions
 
Developing apps using Perl
Developing apps using PerlDeveloping apps using Perl
Developing apps using Perl
 
Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014Better Selenium Tests with Geb - Selenium Conf 2014
Better Selenium Tests with Geb - Selenium Conf 2014
 
Mojo as a_client
Mojo as a_clientMojo as a_client
Mojo as a_client
 
Php cookies
Php cookiesPhp cookies
Php cookies
 
Drupal cambs ansible for drupal april 2015
Drupal cambs ansible for drupal april 2015Drupal cambs ansible for drupal april 2015
Drupal cambs ansible for drupal april 2015
 
Common Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid ThemCommon Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid Them
 
Task Scheduling and Asynchronous Processing Evolved. Zend Server Job Queue
Task Scheduling and Asynchronous Processing Evolved. Zend Server Job QueueTask Scheduling and Asynchronous Processing Evolved. Zend Server Job Queue
Task Scheduling and Asynchronous Processing Evolved. Zend Server Job Queue
 
Hash Signaling Made Easy
Hash Signaling Made EasyHash Signaling Made Easy
Hash Signaling Made Easy
 

Similar to Web development - technologies and tools

What makes me "Grunt"?
What makes me "Grunt"? What makes me "Grunt"?
What makes me "Grunt"? Fabien Doiron
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123Parag Gajbhiye
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflowRiccardo Coppola
 
Improving build solutions dependency management with webpack
Improving build solutions  dependency management with webpackImproving build solutions  dependency management with webpack
Improving build solutions dependency management with webpackNodeXperts
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2Paras Mendiratta
 
Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013Cosimo Streppone
 
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and BeyondDrupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and BeyondDrupalDay
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsRyan Weaver
 
Bundling Client Side Assets
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side AssetsTimothy Oxley
 
Going live with BommandBox and docker Into The Box 2018
Going live with BommandBox and docker Into The Box 2018Going live with BommandBox and docker Into The Box 2018
Going live with BommandBox and docker Into The Box 2018Ortus Solutions, Corp
 
Into The Box 2018 Going live with commandbox and docker
Into The Box 2018 Going live with commandbox and dockerInto The Box 2018 Going live with commandbox and docker
Into The Box 2018 Going live with commandbox and dockerOrtus Solutions, Corp
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end WorkflowPagepro
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mateCodemotion
 
Introduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme developmentIntroduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme developmentJames Bundey
 

Similar to Web development - technologies and tools (20)

What makes me "Grunt"?
What makes me "Grunt"? What makes me "Grunt"?
What makes me "Grunt"?
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow
 
Improving build solutions dependency management with webpack
Improving build solutions  dependency management with webpackImproving build solutions  dependency management with webpack
Improving build solutions dependency management with webpack
 
Front-end tools
Front-end toolsFront-end tools
Front-end tools
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
 
Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013
 
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and BeyondDrupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
Drupal Day 2012 - Automating Drupal Development: Make!les, Features and Beyond
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
Capistrano
CapistranoCapistrano
Capistrano
 
Bundling Client Side Assets
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side Assets
 
Going live with BommandBox and docker Into The Box 2018
Going live with BommandBox and docker Into The Box 2018Going live with BommandBox and docker Into The Box 2018
Going live with BommandBox and docker Into The Box 2018
 
Into The Box 2018 Going live with commandbox and docker
Into The Box 2018 Going live with commandbox and dockerInto The Box 2018 Going live with commandbox and docker
Into The Box 2018 Going live with commandbox and docker
 
Dart Workshop
Dart WorkshopDart Workshop
Dart Workshop
 
Droidcon Paris 2015
Droidcon Paris 2015Droidcon Paris 2015
Droidcon Paris 2015
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end Workflow
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
 
Capistrano Overview
Capistrano OverviewCapistrano Overview
Capistrano Overview
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Introduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme developmentIntroduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme development
 

More from Yoann Gotthilf

Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJSYoann Gotthilf
 
Most Common JavaScript Mistakes
Most Common JavaScript MistakesMost Common JavaScript Mistakes
Most Common JavaScript MistakesYoann Gotthilf
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.jsYoann Gotthilf
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stackYoann Gotthilf
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à AndroidYoann Gotthilf
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebYoann Gotthilf
 

More from Yoann Gotthilf (6)

Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Most Common JavaScript Mistakes
Most Common JavaScript MistakesMost Common JavaScript Mistakes
Most Common JavaScript Mistakes
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.js
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à Android
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 

Recently uploaded

Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatmentsaipooja36
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the lifeNitinDeodare
 
Poster_density_driven_with_fracture_MLMC.pdf
Poster_density_driven_with_fracture_MLMC.pdfPoster_density_driven_with_fracture_MLMC.pdf
Poster_density_driven_with_fracture_MLMC.pdfAlexander Litvinenko
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxMarlene Maheu
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSean M. Fox
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文中 央社
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45MysoreMuleSoftMeetup
 
ANTI PARKISON DRUGS.pptx
ANTI         PARKISON          DRUGS.pptxANTI         PARKISON          DRUGS.pptx
ANTI PARKISON DRUGS.pptxPoojaSen20
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project researchCaitlinCummins3
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...Nguyen Thanh Tu Collection
 
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Denish Jangid
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppCeline George
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....Ritu480198
 
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING IIII BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING IIagpharmacy11
 
How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17Celine George
 
demyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxdemyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxMohamed Rizk Khodair
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnershipsexpandedwebsite
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Celine George
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024Borja Sotomayor
 

Recently uploaded (20)

Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
Envelope of Discrepancy in Orthodontics: Enhancing Precision in Treatment
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
Poster_density_driven_with_fracture_MLMC.pdf
Poster_density_driven_with_fracture_MLMC.pdfPoster_density_driven_with_fracture_MLMC.pdf
Poster_density_driven_with_fracture_MLMC.pdf
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
 
ANTI PARKISON DRUGS.pptx
ANTI         PARKISON          DRUGS.pptxANTI         PARKISON          DRUGS.pptx
ANTI PARKISON DRUGS.pptx
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....
 
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING IIII BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
II BIOSENSOR PRINCIPLE APPLICATIONS AND WORKING II
 
How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17How To Create Editable Tree View in Odoo 17
How To Create Editable Tree View in Odoo 17
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 
demyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptxdemyelinated disorder: multiple sclerosis.pptx
demyelinated disorder: multiple sclerosis.pptx
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024
 

Web development - technologies and tools

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