Outils front-end

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

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

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

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

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

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

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

Etape 4 :
.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

Etape 4 :
.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

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

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.

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

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

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

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

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

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

Outils front-end

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Outils front-end

Similaire à Outils front-end (20)

Dernier

Dernier (7)

Outils front-end