SlideShare une entreprise Scribd logo
Outils front-end
Version du 1 mars 2018
“
https://fr.slideshare.net/ThomasBodin3/presentations
2
Hello!
Je m’appelle Thomas et je suis co-fondateur d’Hidden.market,
une startup dans le domaine de la cotation de salaire !
Retrouvez moi sur Twitter @ThomasBodinFr
3
Sommaire
4
HTML 5
CSS & Co
Task runner JS
Gestion des dépendances
HTML 5 (1/4)
Les oubliés
5
1. Contenu principal
Représente le contenu principal du <body>
Il ne peut pas y avoir plusieurs élément <main> sur une même
page.
<main>Mon contenu</main>
6
2. Sidebar
Pour définir une sidebar (petite colonne à gauche ou à droite du
contenu principal) contenant des informations supplémentaires
relatives ou non au contenu principal.
<aside>Mon contenu</aside>
7
3. Exposant
L'élément HTML <sup> est utilisé, pour des raisons
typographiques, afin d'afficher du texte en exposant (plus haut et
généralement plus petit) par rapport au bloc de texte
environnant.
m<sup>2</sup>
8
4. Progression Indique la progression d'une tâche au cours du temps, sans que
l'on ne s'attache à une valeur précise mais plutôt à un
pourcentage.
Par exemple débutant à zéro et avançant jusqu'à atteindre les
100% comme les musiques, vidéos, chargement de page,...
<progress value="22" max="100"></progress>
9
5. Jauge
Représente une jauge mesurant une valeur comprise entre un
minimum et un maximum. Ainsi les valeurs négatives peuvent
être utilisées, contrairement à <progress>.
Son usage est principalement destiné à indiquer un état, stable ou
évoluant au cours du temps.
Par exemple : espace restant d’un disque dur, taux de globule
blanc dans le sang, places restantes d’un événement
<meter value="2" min="0" max="10"></meter>
10
6. Temps
Permet de définir une notion de temps comme une date, une
heure ou une durée.
<time datetime="2018-02-14 20:00">14/02/2018</time>
11
7. Suggestions de choix
Elément de formulaire permettant de lier une liste de choix à un
élément input.
Il est voué à fournir des fonctionnalités d'auto-complétion ou
d'auto-suggestion, dans un formulaire classique ou un champ de
recherche.
<input list="browser" id="mybrowser" name="mybrowser">
<datalist id="browser">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Safari">
</datalist>
12
8. Illustration légendée
C’est une unité de contenu, c'est-à-dire que cet élément sert de
conteneur dans lequel s'insèrent divers éléments comme des
images, des schémas, des vidéos, des tableaux ou encore des
blocs de code.
L'objectif est de lier ce contenu à une légende, définie par
l'élément <figcaption>
<figure>
<img src="image.jpg" alt="">
<figcaption>Légende associée</figcaption>
</figure>
13
8. Types d’input
▫ color : Choix de couleur par color picker
▫ date : Date par calendrier
▫ datetime-local : Date + Heure par calendrier
▫ email : Adresse email d’un format valide
▫ month : Mois par calendrier
▫ number : Nombre
▫ range : Slider contrôle entre une valeur min et max
▫ search : Barre de recherche
▫ tel : Téléphone
▫ time : Durée / Heure
▫ url : Adresse URL d’un format valide
▫ week : Semaine de l’année par calendrier
14
7. Attributs d’input
▫ autocomplete : indiquer si la valeur saisie doit
automatiquement être complétée par le navigateur
▫ autofocus : focus au chargement de la page
▫ form : élément de formulaire auquel l'élément est rattaché.
La valeur de cet attribut doit être l'ID du <form>. Cet attribut
permet de placer un élément <input> n'importe où et pas
uniquement comme descendant d'un formulaire
▫ min and max : valeur minimale/maximale (numérique ou
temporelle) de l'élément
▫ step : Cet attribut fonctionne avec les attributs min et max et
permet de définir l'incrément utilisé pour passer d'une
valeur à l'autre (dans le cas d'une valeur numérique ou
d'une date)
15
Exercice
Quiz HTML5
16
Gestion des
dépendances (2/4)
Avec NPM
17
1. Kesako Quand nous débutons un projet, la première tâche consiste à
créer l’arborescence des fichiers et dossiers.
Pour cela, il faut aller visiter un par un les outils incontournables
d’un projet : jQuery, Bootstrap, Modernizr,... pour installer les
dernières versions.
C’est une perte de temps
18
2. Avantages
1. Le dépôt n’est pas encombré d’un nombre important de
fichiers que nous ne maintenons pas
2. La mise à jour des dépendances est simplifié et propre (pas
de commit d’uptade)
3. Gain de temps sur l’initialisation des nouveaux projets
19
3. NPM Les extensions de Node.js sont appelées modules et sont très
nombreuses. Il existe des milliers de modules qui offrent des
fonctionnalités variées comme des frameworks, des systèmes de
templates,...
NPM (Node Package Manager), est l'outil qui permet de
télécharger facilement tous les modules de la communauté
Node.js. Avec NPM, il suffit d’une simple commande et le module
est téléchargé et installé.
20
3. NPM
L’avantage de NPM c’est qu’il gère les dépendances. Cela signifie
que, si un module a besoin d'un autre module pour fonctionner,
NPM ira le télécharger automatiquement.
Aujourd’hui, il est de plus en plus utilisé pour des applications
front et est devenu un outil de développement incontournable. Il
permet d’accéder au plus gros dépôt de paquets tous langages
confondus.
21
3. Installation
Installer Node.JS
La commande est maintenant disponible via votre terminal
Test :
$ npm --help
22
4. Chercher un module
Pour chercher le nom d’un module permettant de l’installer, il
suffit de se rendre sur le site de NPM :
https://www.npmjs.com/
23
5. Commandes
Initialisation de votre projet, cela va créer un fichier package.json :
$ npm init
Le fichier package.json décrit la configuration de votre projet.
Chaque module NPM est configuré ainsi, ce qui fait que votre
projet est par définition un module au même titre que les autres
et donc potentiellement publiable sur NPM
24
5. Commandes
Installer un module :
$ npm install nom_du_module
Le module sera installé localement spécialement pour votre
projet.
Si vous avez un autre projet, il faudra donc relancer la commande
pour l'installer à nouveau pour cet autre projet. Cela vous permet
d'utiliser des versions différentes d'un même module en fonction
de vos projets.
NPM va télécharger automatiquement la dernière version du
module et il va la placer dans un sous-dossier > node_modules
Exemple :
$ npm install bootstrap
25
5. Commandes
Les options d’installation d’un module :
▫ -g : installation global
▫ @version : si vous souhaitez une version spécifique
▫ --save : enregistrement automatique dans package.json du
module indispensable au fonctionnement de l’application
▫ --save-dev : enregistrement automatique dans package.json
du module à des fins de développement
Raccourcis :
$ npm i bootstrap
26
5. Commandes
Installer tous les modules du projet (via package.json) :
$ npm install
ou
$ npm i
27
5. Commandes
Mise à jour de module :
$ npm update
NPM va chercher s'il y a de nouvelles versions des modules, puis
mettre à jour les modules installés sur votre machine (en veillant à
ne pas casser la compatibilité) et il supprimera les anciennes
versions.
Pour mettre à jour et changer les versions dans package.json,
pensez à mettre l’option (--save ou --save-dev).
28
5. Commandes
Changer le répertoire d’installation global de npm :
1. Créer un dossier dédié
$ mkdir ~/npm-global
2. Configurer npm pour utiliser ce dossier
$ npm config set prefix '~/.npm-global'
3. Ajouter cette ligne à votre fichier .profile (créer se fichier si il
n’existe pas)
export PATH=~/.npm-global/bin:$PATH
4. Mettre à jour les variables
$ source ~/.profile
Lorsque vous installez un module en mode global ( -g ) il sera
installé dans le dossier node_modules de votre machine. Je vous
conseil de changer cet emplacement pour des questions de droits
d’accès et éviter ainsi les “sudo”.
29
Exercice
Configurer votre environnement
npm
Installer Gulp de manière global
Prendre un de vos sites, et gérer
toutes les dépendances via NPM
(jquery, bootstrap, foundation,
angular,...)
30
Task Runner (3/4)
31
1. Kesako
Un task runner est un automatiseur de tâches, c’est à dire qu’il va
lancer des scripts automatiquement à notre place.
Il est possible de lancer toute sortes de tâches :
▫ Tests
▫ Serveur local
▫ Optimisation et compression d’images
▫ Création, suppression, modifications de dossiers/fichiers
▫ Minification et concatenation des fichiers CSS/JS
▫ ...
Par exemple, il existe plus de 3 400 plugins Gulp, c’est autant de
tâches automatiques qu’il est possible de faire.
32
2. Avantages
Gain de temps : plus de tâches répétitives !!!
33
3. Pré-requis
1. NodeJS
2. NPM
34
3. Installation
Installation de manière global :
$ npm install gulp -g
Dans votre projet, il vous faudra 2 fichiers :
▫ package.json : contient la liste des plugins gulp nécessaires à
vos tâches
▫ gulpfile.js : contient la liste des tâches à réaliser
Puis installer Gulp comme dépendance du projet :
$ npm install gulp --save-dev
Et le require dans le fichier gulpfile.js :
var gulp = require('gulp');
35
4. Création d’une tâche
Tout d’abord il faut définir une tâche à automatiser.
Prenons un exemple de tâche à automatiser :
Je souhaite optimiser toutes les images de mon projet et que cette
optimisation se fasse à chaque fois que je rajoute une image (sans
aucune exécution de ma part).
36
4. Création d’une tâche
Etape 1 :
gulp.task(“nom_tache”, function () {
//Liste des opérations à réaliser
});
Il sera possible d’exécuter cette tâche en ligne de commande :
$ gulp nom_tache
37
4. Création d’une tâche Etape 2 :
Aller chercher un plugin Gulp qui effectuera une opération à
l'exécution de la tâche.
> https://gulpjs.com/plugins/
Je vais donc chercher un plugin permettant d’optimiser les images.
Celui-ci me semble bien : gulp-imagemin
38
4. Création d’une tâche
Etape 3 :
Installation du plugin imagemin :
$ npm install gulp-imagemin --save-dev
Automatiquement cela va le mettre dans mon fichier package.json
comme dépendance du projet.
39
4. Création d’une tâche
Etape 4 :
Utilisation du plugin imagemin :
1) On require le plugin
var imagemin = require('gulp-imagemin');
2) On crée le stream dans notre task
gulp.task(‘image’, function () {
return gulp.src(’src/img/*')
});
Cela correspond au chemin des fichiers sources. Dans notre
exemple, nous allons cibler le dossier contenant toutes les images
que nous importons et qui ne sont pas optimisés.
40
4. Création d’une tâche
Etape 4 :
Utilisation du plugin imagemin :
gulp.task(‘image’, function () {
return gulp.src(’src/img/*')
.pipe(imagemin())
});
Ensuite nous “pipons” nos sources pour les faire passer dans
différentes fonctionnalitées. Là nous faisons passer nos fichiers
dans une fonctionnalité “imagemin”.
41
4. Création d’une tâche
Etape 4 :
Utilisation du plugin imagemin :
gulp.task(‘image’, function () {
return gulp.src(’src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img/'))
});
Il ne reste plus qu’à définir un dernier “pipe” permettant de dire
où on envoie les fichiers minifiés.
42
4. Mise en place d’un
WATCHER
Notre task fonctionne mais l’inconvénient c’est qu’il faut la lancer à
chaque fois.
On va donc mettre en place un Watcher qui surveillera toutes les
activités dans notre projet et qui a chaque événement dans le
dossier source contenant les images exécutera la task.
43
4. Mise en place d’un
WATCHER
On crée une nouvelle task que l’on nomme “watch” (par exemple)
et qui va exécuter l’opération watch qui est native à Gulp donc pas
besoin de plugin.
Cette opération exécutera la task “img” a chaque modification
dans le répertoire src/img
gulp.task(“watch”, function () {
gulp.watch('src/img/*', ['image']);
});
Il sera possible de lancer le watcher en ligne de commande :
$ gulp watch
44
Exercice
Créer des task :
- Style (SASS, concatenation,
minification, autoprefixer,
mapping, notificaiton
d’erreur)
- Script (concatenation,
minification, mapping,
notificaiton d’erreur)
45
CSS & Co (4/4)
46
1. Spécificité des
sélecteurs
47
Entre les deux déclarations ci-dessous, à votre avis, laquelle sera
appliquée sur l’élément de liste <li> ?
.page .menu li {color: red;}
body div.menu ul li {color: blue;}
1. Spécificité des
sélecteurs
48
Si les deux déclarations ciblent le même élément, l’une est
prioritaire par rapport à l’autre.
La première déclaration (.page .menu li) prend le dessus sur la
deuxième (body div.menu ul li) car le calcul de spécificité lui
donne plus d’importance.
1. Spécificité des
sélecteurs
49
La spécificité est donc le calcul qui indique le “poids” d’une
déclaration CSS.
Ce “poids” est utilisé pour comparer les différentes déclarations
entre-elles et savoir laquelle est prioritaire sur l’autre, c’est à dire
laquelle a le plus de ”poids”.
1. Spécificité des
sélecteurs
50
Le calcul de spécificité se base sur 3 valeurs :
A ▸ Nombre d'id
B ▸ Nombre de class, pseudo-classes, d'attributs
C ▸ Nombre d'éléments, pseudo-éléments
Exemple :
#toto 1,0,0
.inner ul li 0,1,2
a:hover 0,1,1
.page .menu li 0,2,1
body div.menu ul li 0,1,4
1. Spécificité des
sélecteurs
51
2 cas particuliers :
- Style inline (dans le HTML) équivaut à 1,0,0,0
<li style="color:green;">Bleu ou rouge ou vert</li>
- !important équivaut à 1,0,0,0,0
li {color: yellow !important;}
1. Spécificité des
sélecteurs
52
“
Pour cibler un identifiant sans donner plus de spécificité,
utilisez le sélecteur d'attribut. [id=toto] est identique à
#toto, mais avec la même spécificité qu'une class.
53
1. Spécificité des
sélecteurs
54
Conclusion :
La spécificité permet de comprendre pourquoi, dans certains cas
“inexplicable” notre déclaration ne s’applique pas alors qu’elle ne
contient aucune erreur.
L’élément cible hérite en fait d’une déclaration ayant une
spécificité plus forte.
Parfois, ces problèmes peuvent simplement se régler en
“surchargeant” la déclaration afin de lui donner plus de poids.
2. BEM
55
Le concept est de repérer des « objets CSS », c'est-à-dire des
éléments qui se répètent, et de définir ainsi des class réutilisables.
La méthode consiste à prendre le design comme point de départ :
on repère des répétitions visuelles puis on les nomme.
BEM apporte une convention de nommage des class CSS.
BEM = Block Element
Modifier
2. BEM
56
Règles :
▫ Un nœud pouvant exister sans dépendre d'un ancêtre est un
Block
▫ Un nœud pouvant n'exister qu'en tant que descendant d'un
ancêtre N est un Element du Block N
▫ Un état local pour un Block ou un Element est défini par un
modifier de ce Block ou Element
BEM = Block Element
Modifier
2. BEM
57
Block :
C’est une entité indépendante ! Un Block forme son propre
contexte autonome.
BEM = Block Element
Modifier
2. BEM
58
Element :
Un Element est une partie d'un Block. Le contexte d'un élément
est celui du Block.
BEM = Block Element
Modifier
2. BEM
59
Modifier :
Un Modifier est une propriété qui sert à créer des variantes, pour
faire des modifications minimes comme changer des couleurs. Il
existe des Modifier de Block et des Modifier d’Element.
BEM = Block Element
Modifier
2. BEM
60
Convention de nommage :
Le site officiel BEM précise que seul compte le concept, la syntaxe
reste libre.
Voici un exemple de syntaxe :
▫ block
▫ block--modifier
▫ block__element
▫ block__element--modifier
BEM = Block Element
Modifier
2. BEM
61
Avantages :
▫ Propreté : Pas d’override sur son propre code
▫ Performance : Usage limité de la cascade
▫ Scalabilité : Possibilité de construire des applications
géantes tout en travaillant à une échelle réduite
▫ Composant : Un block peut être placé n'importe où dans la
page ou encore apparaître plusieurs fois
▫ Moins prise de tête : Il y a moins de nom de class à trouver
BEM = Block Element
Modifier
2. BEM
62
Un autre avantage est que l’on peut éviter de regrouper toutes
nos media queries. Ce qui est une mauvaise technique.
Les media queries sont toujours près des déclarations qu’elles
override.
.press {
&__text {
@include font-size(30);
@media (max-width: $screen-sm) {
text-align: center;
}
}
}
BEM = Block Element
Modifier
Autres
63
1. Semantic
versionning
64
Une version s'applique à un produit, une application, une
bibliothèque, un OS,... tout ce qui a une progression en
informatique.
Cela permet de définir l'avancement du produit. La majorité du
temps, cela s'écrit de cette façon : X.Y.Z
X, Y et Z sont des entiers, par exemple : 1.1.24
▫ X = "majeur",
▫ Y = "mineur",
▫ Z = "patch ou correctif"
1. Semantic
versionning
65
Si vous avez corrigé un bug, alors il faut incrémenter Z (+0.0.1).
Si vous avez fait des ajouts qui peuvent être intéressants pour
l'utilisateur, alors il faut incrémenter Y (+0.1.0).
Si vous avez changé quelque chose qui nécessite forcément une
modification de la part de l'utilisateur sous peine que sa propre
app ne fonctionne plus, alors il faut incrémenter X (+1.0.0).
66
Merci !
@ThomasBodinFr
hi@thomas-bodin.com

Contenu connexe

Tendances

Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
ECAM Brussels Engineering School
 
Html css
Html cssHtml css
Html css
sloumaallagui1
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013bellesmanieres
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
Emmanuelle Morlock
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015Emmanuelle Morlock
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
JQuery
JQueryJQuery
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
kadzaki
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
VISEO
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.
Microcom Informatique Inc.
 
Php & My Sql
Php & My SqlPhp & My Sql
Php & My Sql
guest6c050e
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
Clément Delmas
 

Tendances (20)

Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Html css
Html cssHtml css
Html css
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
Html
HtmlHtml
Html
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
JQuery
JQueryJQuery
JQuery
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
cours Php
cours Phpcours Php
cours Php
 
Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.Comment modifier le style des Tree View dans Odoo.
Comment modifier le style des Tree View dans Odoo.
 
Php & My Sql
Php & My SqlPhp & My Sql
Php & My Sql
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Introduction a jQuery
Introduction a jQueryIntroduction a jQuery
Introduction a jQuery
 

Similaire à Outils front-end

Présentation1
Présentation1Présentation1
Présentation1
Boulkenafet samir
 
openFrameworks
openFrameworksopenFrameworks
openFrameworks
LeStudioiInteractif
 
Rappels Modularisation application C/C++
Rappels Modularisation application C/C++Rappels Modularisation application C/C++
Rappels Modularisation application C/C++
Sylvain Leroy
 
Installer et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linuxInstaller et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linux
Zakariyaa AIT ELMOUDEN
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
ENSET, Université Hassan II Casablanca
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
Maxime Bernard
 
Etude des Frameworks PHP
Etude des Frameworks PHPEtude des Frameworks PHP
Etude des Frameworks PHP
JEAN-GUILLAUME DUJARDIN
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Corinne Schillinger
 
OpenNMS
OpenNMSOpenNMS
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
Stéphane HULARD
 
Aeris web components
Aeris web componentsAeris web components
Aeris web components
Francois ANDRE
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
abdellatif edkhaili
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
Alexandre Marie
 
Mise en place de Nagios3 pas à pas
Mise en place de Nagios3 pas à pas Mise en place de Nagios3 pas à pas
Mise en place de Nagios3 pas à pas
yassine87
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
DrupalCamp Paris 2013 - Theming
DrupalCamp Paris 2013 - ThemingDrupalCamp Paris 2013 - Theming
DrupalCamp Paris 2013 - Theming
Romain Jarraud
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
NeoXam Tunisia
 
BigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans HadoopBigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans Hadoop
Lilia Sfaxi
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linux
Khalid ALLILI
 

Similaire à Outils front-end (20)

Présentation1
Présentation1Présentation1
Présentation1
 
openFrameworks
openFrameworksopenFrameworks
openFrameworks
 
Rappels Modularisation application C/C++
Rappels Modularisation application C/C++Rappels Modularisation application C/C++
Rappels Modularisation application C/C++
 
Installer et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linuxInstaller et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linux
 
Maven et industrialisation du logiciel
Maven et industrialisation du logicielMaven et industrialisation du logiciel
Maven et industrialisation du logiciel
 
Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?Comment réussir son projet en Angular 1.5 ?
Comment réussir son projet en Angular 1.5 ?
 
Etude des Frameworks PHP
Etude des Frameworks PHPEtude des Frameworks PHP
Etude des Frameworks PHP
 
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)Automatisez vos tâches répétitives avec Grunt (Blend 2013)
Automatisez vos tâches répétitives avec Grunt (Blend 2013)
 
OpenNMS
OpenNMSOpenNMS
OpenNMS
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
Aeris web components
Aeris web componentsAeris web components
Aeris web components
 
Introduction aspnet
Introduction aspnetIntroduction aspnet
Introduction aspnet
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Mise en place de Nagios3 pas à pas
Mise en place de Nagios3 pas à pas Mise en place de Nagios3 pas à pas
Mise en place de Nagios3 pas à pas
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
DrupalCamp Paris 2013 - Theming
DrupalCamp Paris 2013 - ThemingDrupalCamp Paris 2013 - Theming
DrupalCamp Paris 2013 - Theming
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 
BigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans HadoopBigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans Hadoop
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linux
 

Dernier

Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 

Dernier (6)

Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 

Outils front-end

  • 3. Hello! Je m’appelle Thomas et je suis co-fondateur d’Hidden.market, une startup dans le domaine de la cotation de salaire ! Retrouvez moi sur Twitter @ThomasBodinFr 3
  • 4. Sommaire 4 HTML 5 CSS & Co Task runner JS Gestion des dépendances
  • 5. HTML 5 (1/4) Les oubliés 5
  • 6. 1. Contenu principal Représente le contenu principal du <body> Il ne peut pas y avoir plusieurs élément <main> sur une même page. <main>Mon contenu</main> 6
  • 7. 2. Sidebar Pour définir une sidebar (petite colonne à gauche ou à droite du contenu principal) contenant des informations supplémentaires relatives ou non au contenu principal. <aside>Mon contenu</aside> 7
  • 8. 3. Exposant L'élément HTML <sup> est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant. m<sup>2</sup> 8
  • 9. 4. Progression Indique la progression d'une tâche au cours du temps, sans que l'on ne s'attache à une valeur précise mais plutôt à un pourcentage. Par exemple débutant à zéro et avançant jusqu'à atteindre les 100% comme les musiques, vidéos, chargement de page,... <progress value="22" max="100"></progress> 9
  • 10. 5. Jauge Représente une jauge mesurant une valeur comprise entre un minimum et un maximum. Ainsi les valeurs négatives peuvent être utilisées, contrairement à <progress>. Son usage est principalement destiné à indiquer un état, stable ou évoluant au cours du temps. Par exemple : espace restant d’un disque dur, taux de globule blanc dans le sang, places restantes d’un événement <meter value="2" min="0" max="10"></meter> 10
  • 11. 6. Temps Permet de définir une notion de temps comme une date, une heure ou une durée. <time datetime="2018-02-14 20:00">14/02/2018</time> 11
  • 12. 7. Suggestions de choix Elément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche. <input list="browser" id="mybrowser" name="mybrowser"> <datalist id="browser"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Safari"> </datalist> 12
  • 13. 8. Illustration légendée C’est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. L'objectif est de lier ce contenu à une légende, définie par l'élément <figcaption> <figure> <img src="image.jpg" alt=""> <figcaption>Légende associée</figcaption> </figure> 13
  • 14. 8. Types d’input ▫ color : Choix de couleur par color picker ▫ date : Date par calendrier ▫ datetime-local : Date + Heure par calendrier ▫ email : Adresse email d’un format valide ▫ month : Mois par calendrier ▫ number : Nombre ▫ range : Slider contrôle entre une valeur min et max ▫ search : Barre de recherche ▫ tel : Téléphone ▫ time : Durée / Heure ▫ url : Adresse URL d’un format valide ▫ week : Semaine de l’année par calendrier 14
  • 15. 7. Attributs d’input ▫ autocomplete : indiquer si la valeur saisie doit automatiquement être complétée par le navigateur ▫ autofocus : focus au chargement de la page ▫ form : élément de formulaire auquel l'élément est rattaché. La valeur de cet attribut doit être l'ID du <form>. Cet attribut permet de placer un élément <input> n'importe où et pas uniquement comme descendant d'un formulaire ▫ min and max : valeur minimale/maximale (numérique ou temporelle) de l'élément ▫ step : Cet attribut fonctionne avec les attributs min et max et permet de définir l'incrément utilisé pour passer d'une valeur à l'autre (dans le cas d'une valeur numérique ou d'une date) 15
  • 18. 1. Kesako Quand nous débutons un projet, la première tâche consiste à créer l’arborescence des fichiers et dossiers. Pour cela, il faut aller visiter un par un les outils incontournables d’un projet : jQuery, Bootstrap, Modernizr,... pour installer les dernières versions. C’est une perte de temps 18
  • 19. 2. Avantages 1. Le dépôt n’est pas encombré d’un nombre important de fichiers que nous ne maintenons pas 2. La mise à jour des dépendances est simplifié et propre (pas de commit d’uptade) 3. Gain de temps sur l’initialisation des nouveaux projets 19
  • 20. 3. NPM Les extensions de Node.js sont appelées modules et sont très nombreuses. Il existe des milliers de modules qui offrent des fonctionnalités variées comme des frameworks, des systèmes de templates,... NPM (Node Package Manager), est l'outil qui permet de télécharger facilement tous les modules de la communauté Node.js. Avec NPM, il suffit d’une simple commande et le module est téléchargé et installé. 20
  • 21. 3. NPM L’avantage de NPM c’est qu’il gère les dépendances. Cela signifie que, si un module a besoin d'un autre module pour fonctionner, NPM ira le télécharger automatiquement. Aujourd’hui, il est de plus en plus utilisé pour des applications front et est devenu un outil de développement incontournable. Il permet d’accéder au plus gros dépôt de paquets tous langages confondus. 21
  • 22. 3. Installation Installer Node.JS La commande est maintenant disponible via votre terminal Test : $ npm --help 22
  • 23. 4. Chercher un module Pour chercher le nom d’un module permettant de l’installer, il suffit de se rendre sur le site de NPM : https://www.npmjs.com/ 23
  • 24. 5. Commandes Initialisation de votre projet, cela va créer un fichier package.json : $ npm init Le fichier package.json décrit la configuration de votre projet. Chaque module NPM est configuré ainsi, ce qui fait que votre projet est par définition un module au même titre que les autres et donc potentiellement publiable sur NPM 24
  • 25. 5. Commandes Installer un module : $ npm install nom_du_module Le module sera installé localement spécialement pour votre projet. Si vous avez un autre projet, il faudra donc relancer la commande pour l'installer à nouveau pour cet autre projet. Cela vous permet d'utiliser des versions différentes d'un même module en fonction de vos projets. NPM va télécharger automatiquement la dernière version du module et il va la placer dans un sous-dossier > node_modules Exemple : $ npm install bootstrap 25
  • 26. 5. Commandes Les options d’installation d’un module : ▫ -g : installation global ▫ @version : si vous souhaitez une version spécifique ▫ --save : enregistrement automatique dans package.json du module indispensable au fonctionnement de l’application ▫ --save-dev : enregistrement automatique dans package.json du module à des fins de développement Raccourcis : $ npm i bootstrap 26
  • 27. 5. Commandes Installer tous les modules du projet (via package.json) : $ npm install ou $ npm i 27
  • 28. 5. Commandes Mise à jour de module : $ npm update NPM va chercher s'il y a de nouvelles versions des modules, puis mettre à jour les modules installés sur votre machine (en veillant à ne pas casser la compatibilité) et il supprimera les anciennes versions. Pour mettre à jour et changer les versions dans package.json, pensez à mettre l’option (--save ou --save-dev). 28
  • 29. 5. Commandes Changer le répertoire d’installation global de npm : 1. Créer un dossier dédié $ mkdir ~/npm-global 2. Configurer npm pour utiliser ce dossier $ npm config set prefix '~/.npm-global' 3. Ajouter cette ligne à votre fichier .profile (créer se fichier si il n’existe pas) export PATH=~/.npm-global/bin:$PATH 4. Mettre à jour les variables $ source ~/.profile Lorsque vous installez un module en mode global ( -g ) il sera installé dans le dossier node_modules de votre machine. Je vous conseil de changer cet emplacement pour des questions de droits d’accès et éviter ainsi les “sudo”. 29
  • 30. Exercice Configurer votre environnement npm Installer Gulp de manière global Prendre un de vos sites, et gérer toutes les dépendances via NPM (jquery, bootstrap, foundation, angular,...) 30
  • 32. 1. Kesako Un task runner est un automatiseur de tâches, c’est à dire qu’il va lancer des scripts automatiquement à notre place. Il est possible de lancer toute sortes de tâches : ▫ Tests ▫ Serveur local ▫ Optimisation et compression d’images ▫ Création, suppression, modifications de dossiers/fichiers ▫ Minification et concatenation des fichiers CSS/JS ▫ ... Par exemple, il existe plus de 3 400 plugins Gulp, c’est autant de tâches automatiques qu’il est possible de faire. 32
  • 33. 2. Avantages Gain de temps : plus de tâches répétitives !!! 33
  • 35. 3. Installation Installation de manière global : $ npm install gulp -g Dans votre projet, il vous faudra 2 fichiers : ▫ package.json : contient la liste des plugins gulp nécessaires à vos tâches ▫ gulpfile.js : contient la liste des tâches à réaliser Puis installer Gulp comme dépendance du projet : $ npm install gulp --save-dev Et le require dans le fichier gulpfile.js : var gulp = require('gulp'); 35
  • 36. 4. Création d’une tâche Tout d’abord il faut définir une tâche à automatiser. Prenons un exemple de tâche à automatiser : Je souhaite optimiser toutes les images de mon projet et que cette optimisation se fasse à chaque fois que je rajoute une image (sans aucune exécution de ma part). 36
  • 37. 4. Création d’une tâche Etape 1 : gulp.task(“nom_tache”, function () { //Liste des opérations à réaliser }); Il sera possible d’exécuter cette tâche en ligne de commande : $ gulp nom_tache 37
  • 38. 4. Création d’une tâche Etape 2 : Aller chercher un plugin Gulp qui effectuera une opération à l'exécution de la tâche. > https://gulpjs.com/plugins/ Je vais donc chercher un plugin permettant d’optimiser les images. Celui-ci me semble bien : gulp-imagemin 38
  • 39. 4. Création d’une tâche Etape 3 : Installation du plugin imagemin : $ npm install gulp-imagemin --save-dev Automatiquement cela va le mettre dans mon fichier package.json comme dépendance du projet. 39
  • 40. 4. Création d’une tâche Etape 4 : Utilisation du plugin imagemin : 1) On require le plugin var imagemin = require('gulp-imagemin'); 2) On crée le stream dans notre task gulp.task(‘image’, function () { return gulp.src(’src/img/*') }); Cela correspond au chemin des fichiers sources. Dans notre exemple, nous allons cibler le dossier contenant toutes les images que nous importons et qui ne sont pas optimisés. 40
  • 41. 4. Création d’une tâche Etape 4 : Utilisation du plugin imagemin : gulp.task(‘image’, function () { return gulp.src(’src/img/*') .pipe(imagemin()) }); Ensuite nous “pipons” nos sources pour les faire passer dans différentes fonctionnalitées. Là nous faisons passer nos fichiers dans une fonctionnalité “imagemin”. 41
  • 42. 4. Création d’une tâche Etape 4 : Utilisation du plugin imagemin : gulp.task(‘image’, function () { return gulp.src(’src/img/*') .pipe(imagemin()) .pipe(gulp.dest('dist/img/')) }); Il ne reste plus qu’à définir un dernier “pipe” permettant de dire où on envoie les fichiers minifiés. 42
  • 43. 4. Mise en place d’un WATCHER Notre task fonctionne mais l’inconvénient c’est qu’il faut la lancer à chaque fois. On va donc mettre en place un Watcher qui surveillera toutes les activités dans notre projet et qui a chaque événement dans le dossier source contenant les images exécutera la task. 43
  • 44. 4. Mise en place d’un WATCHER On crée une nouvelle task que l’on nomme “watch” (par exemple) et qui va exécuter l’opération watch qui est native à Gulp donc pas besoin de plugin. Cette opération exécutera la task “img” a chaque modification dans le répertoire src/img gulp.task(“watch”, function () { gulp.watch('src/img/*', ['image']); }); Il sera possible de lancer le watcher en ligne de commande : $ gulp watch 44
  • 45. Exercice Créer des task : - Style (SASS, concatenation, minification, autoprefixer, mapping, notificaiton d’erreur) - Script (concatenation, minification, mapping, notificaiton d’erreur) 45
  • 46. CSS & Co (4/4) 46
  • 47. 1. Spécificité des sélecteurs 47 Entre les deux déclarations ci-dessous, à votre avis, laquelle sera appliquée sur l’élément de liste <li> ? .page .menu li {color: red;} body div.menu ul li {color: blue;}
  • 48. 1. Spécificité des sélecteurs 48 Si les deux déclarations ciblent le même élément, l’une est prioritaire par rapport à l’autre. La première déclaration (.page .menu li) prend le dessus sur la deuxième (body div.menu ul li) car le calcul de spécificité lui donne plus d’importance.
  • 49. 1. Spécificité des sélecteurs 49 La spécificité est donc le calcul qui indique le “poids” d’une déclaration CSS. Ce “poids” est utilisé pour comparer les différentes déclarations entre-elles et savoir laquelle est prioritaire sur l’autre, c’est à dire laquelle a le plus de ”poids”.
  • 50. 1. Spécificité des sélecteurs 50 Le calcul de spécificité se base sur 3 valeurs : A ▸ Nombre d'id B ▸ Nombre de class, pseudo-classes, d'attributs C ▸ Nombre d'éléments, pseudo-éléments Exemple : #toto 1,0,0 .inner ul li 0,1,2 a:hover 0,1,1 .page .menu li 0,2,1 body div.menu ul li 0,1,4
  • 51. 1. Spécificité des sélecteurs 51 2 cas particuliers : - Style inline (dans le HTML) équivaut à 1,0,0,0 <li style="color:green;">Bleu ou rouge ou vert</li> - !important équivaut à 1,0,0,0,0 li {color: yellow !important;}
  • 53. “ Pour cibler un identifiant sans donner plus de spécificité, utilisez le sélecteur d'attribut. [id=toto] est identique à #toto, mais avec la même spécificité qu'une class. 53
  • 54. 1. Spécificité des sélecteurs 54 Conclusion : La spécificité permet de comprendre pourquoi, dans certains cas “inexplicable” notre déclaration ne s’applique pas alors qu’elle ne contient aucune erreur. L’élément cible hérite en fait d’une déclaration ayant une spécificité plus forte. Parfois, ces problèmes peuvent simplement se régler en “surchargeant” la déclaration afin de lui donner plus de poids.
  • 55. 2. BEM 55 Le concept est de repérer des « objets CSS », c'est-à-dire des éléments qui se répètent, et de définir ainsi des class réutilisables. La méthode consiste à prendre le design comme point de départ : on repère des répétitions visuelles puis on les nomme. BEM apporte une convention de nommage des class CSS. BEM = Block Element Modifier
  • 56. 2. BEM 56 Règles : ▫ Un nœud pouvant exister sans dépendre d'un ancêtre est un Block ▫ Un nœud pouvant n'exister qu'en tant que descendant d'un ancêtre N est un Element du Block N ▫ Un état local pour un Block ou un Element est défini par un modifier de ce Block ou Element BEM = Block Element Modifier
  • 57. 2. BEM 57 Block : C’est une entité indépendante ! Un Block forme son propre contexte autonome. BEM = Block Element Modifier
  • 58. 2. BEM 58 Element : Un Element est une partie d'un Block. Le contexte d'un élément est celui du Block. BEM = Block Element Modifier
  • 59. 2. BEM 59 Modifier : Un Modifier est une propriété qui sert à créer des variantes, pour faire des modifications minimes comme changer des couleurs. Il existe des Modifier de Block et des Modifier d’Element. BEM = Block Element Modifier
  • 60. 2. BEM 60 Convention de nommage : Le site officiel BEM précise que seul compte le concept, la syntaxe reste libre. Voici un exemple de syntaxe : ▫ block ▫ block--modifier ▫ block__element ▫ block__element--modifier BEM = Block Element Modifier
  • 61. 2. BEM 61 Avantages : ▫ Propreté : Pas d’override sur son propre code ▫ Performance : Usage limité de la cascade ▫ Scalabilité : Possibilité de construire des applications géantes tout en travaillant à une échelle réduite ▫ Composant : Un block peut être placé n'importe où dans la page ou encore apparaître plusieurs fois ▫ Moins prise de tête : Il y a moins de nom de class à trouver BEM = Block Element Modifier
  • 62. 2. BEM 62 Un autre avantage est que l’on peut éviter de regrouper toutes nos media queries. Ce qui est une mauvaise technique. Les media queries sont toujours près des déclarations qu’elles override. .press { &__text { @include font-size(30); @media (max-width: $screen-sm) { text-align: center; } } } BEM = Block Element Modifier
  • 64. 1. Semantic versionning 64 Une version s'applique à un produit, une application, une bibliothèque, un OS,... tout ce qui a une progression en informatique. Cela permet de définir l'avancement du produit. La majorité du temps, cela s'écrit de cette façon : X.Y.Z X, Y et Z sont des entiers, par exemple : 1.1.24 ▫ X = "majeur", ▫ Y = "mineur", ▫ Z = "patch ou correctif"
  • 65. 1. Semantic versionning 65 Si vous avez corrigé un bug, alors il faut incrémenter Z (+0.0.1). Si vous avez fait des ajouts qui peuvent être intéressants pour l'utilisateur, alors il faut incrémenter Y (+0.1.0). Si vous avez changé quelque chose qui nécessite forcément une modification de la part de l'utilisateur sous peine que sa propre app ne fonctionne plus, alors il faut incrémenter X (+1.0.0).