Semaine 12 : HTML CSS JS avancés - SimplonSt-Gaudens/programme-web-dev-promo-2 GitHub Wiki

Semaine 12

Objectifs

Reprendre ce qu'on a déjà vu et y ajouter de nouveaux outils
Se faciliter la vie
Avoir tous les outils en main avant les projets pédagogiques

Lundi

Veille

Mardi : Green IT
Mercredi : Meteor
Jeudi : e-commerce
Vendredi : sujet au choix
Lundi : http://semver.org/

Bref retour sur HTML/CSS

C'est quoi un reset CSS?

En 2 mots : chaque navigateur gère l'affichage à sa façon. Le reset CSS permet d'assurer l'uniformisation du rendu de votre page sur tous les navigateurs.

Les préprocesseurs CSS : SASS

En deux mots : se faciliter la vie pour rédiger des CSS, avec une meilleure lisibilité.

Vous produisez alors des fichiers SCSS qu'il ne vous reste plus qu'à convertir en fichiers CSS. sass input.scss output.css

Pour ne pas le faire à chaque fois, laissez SASS le faire automatiquement :
sass --watch input.scss:output.css

Et, quitte à faire, laissez-le carrément surveiller le dossier où vous écrivez vos fichiers SCSS :
sass --watch app/sass:public/stylesheets

Mais concrètement, à quoi ça sert?!

Emploi de variables
Nesting
Fichiers partiels
Extensions de classes
Mixins
Opérateurs

Non mais en vrai?

Sans SASS :

Avant

Avec SASS :

Après

Compass

Et le mieux, dans tout ça, c'est qu'il existe un framework pour faire le boulot (et surtout les mixins) à notre place. En plus, Compass dispose de son propre reset.

Et des frameworks comme ça, il y en a plusieurs :

A voir aussi : Bourbon

PostCSS

Pour ceux qui voudraient aller plus loin, PostCSS est un bon candidat pour remplacer SASS à terme. Pratique et modulable, il a tout pour plaire.

Exercice : color picker

Créer un générateur de couleur avec des inputs range avec une valeur minimum de 0 et maximum de 255 qui changera la couleur de fond en fonction des valeurs choisis. => On aura donc 3 inputs : R, G et B.
Utiliser Compass pour prendre en charge deux séries d'inputs RGB et créer un gradient qui aille de gauche à droite.
A rendre avant dimanche minuit.

Mardi

Kata : chiffre de César (partie 2)

A partir d'un message chiffré, comment deviner le chiffrement et le message d'origine?

Gulp

Gulp est un task runner : il permet d'automatiser les tâches d'un projet (lancer le server, minifier les CSS, renommer ou déplacer des fichiers, etc). Du coup, c'est indispensable pour prolonger le principe du DRY déjà vu précédemment.
Gulp fonctionne via des plugins, chacun d'entre eux permettant d'exécuter une tâche préciser. Actuellement, il y en a des milliers.
Une fois installé dans un projet (npm), gulp s'appuie sur deux fichiers :

package.json gère la dépendance avec gulp et l'ensemble des plugins qu'il utilise.
gulpfile.js regroupe toutes les tâches exécutables.

Un exemple de fichier gulpfile.js :

gulp.task('css', function () {
  return gulp.src(source + '/assets/css/styles.scss')
    .pipe(plugins.sass())
    .pipe(plugins.cssbeautify({indent: '  '}))
    .pipe(plugins.autoprefixer())
    .pipe(gulp.dest(destination + '/assets/css/'));
});

Cette tâche gulp va, dans l'ordre :

Récupérer le fichier styles.scss,
le compiler avec SASS,
l'indenter (beautify).
ajouter les préfixes CSS3 pour que le CSS soit compris par les anciens navigateurs.

src et dest désignent respectivement l'emplacement des fichiers en entrée et la destination des objets modifiés par cette tâche gulp.

Il ne reste plus qu'à lancer la tâche gulp en ligne de commande :
gulp css

Par la suite, nous verrons de nombreuses tâches qui gagneront à être déléguées à gulp directement.

Concat, minify et uglify

Ces trois opérations sont essentielles pour gagner en performance.

concat : fusionner plusieurs fichiers (CSS, par exemple) en un seul.
minify : opération qui consiste à modifier un fichier (CSS, par exemple) afin de supprimer sa mise en forme. Pour cela, on supprime les espaces, retours à la ligne et autres caractères inutiles.
uglify : cette opération irréversible renomme tout ce qui peut l'être (fonctions, par exemple) afin de raccourcir le nom. aLongMethodName() devient a().

Bien entendu, gulp propose des plugins pour cela.
Dès maintenant, vous ferez systématiquement ces opérations pour vos projets. Même si vous n'en verrez pas forcément les bénéfices, ce sera salvateur pour des projets plus conséquents. Alors autant prendre de bonnes habitudes.

A voir aussi

Dans un genre similaire, regardez du côté de Grunt et de npm (qui permet lui aussi de lancer des tâches).

Exercice : retour sur le color picker

Content de votre color picker? Reprenez-le en gérant avec gulp le minify et l'uglify.
A rendre avant dimanche minuit.

DIY : DRY

Reprenez (ou créez) votre template en y ajoutant des tâches gulp pour l'ensemble des tâches : démarrer le serveur, minify, uglify, etc.

Mercredi

Révisions

Quelques révisions sur Js

Javascript avancé

Vous avez déjà à votre disposition tout un tas d'outils pour faire du javascript. Aujourd'hui, on va en voir trois qui feront de vous des développeurs chevronnés et vous permettront de briller en société (et en entretien) : apply, call, bind.

Quelques exemples pour bien commencer

Bind

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
 
function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}
 
var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);
 
sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King

Currying

Définition : utilisation d'une fonction avec certains paramètres déjà définis. Partons d'une fonction greet qui prend plusieurs paramètres en entrée :

function greet (gender, age, name) {
                // if a male, use Mr., else use Ms.
                var salutation = gender === "male" ? "Mr. " : "Ms. ";

                if (age > 25) {
                    return "Hello, " + salutation + name + ".";
                }
                else {
                    return "Hey, " + name + ".";
                }
            }

Et voilà!

 // So we are passing null because we are not using the "this" keyword in our greet function.
        var greetAnAdultMale = greet.bind (null, "male", 45);

        greetAnAdultMale ("John Hartlove"); // "Hello, Mr. John Hartlove."

        var greetAYoungster = greet.bind (null, "", 16);
        greetAYoungster ("Alex"); // "Hey, Alex."
        greetAYoungster ("Emma Waterloo"); // "Hey, Emma Waterloo."

Autre exemple :

function cypher(add, mult, x){
  return mult*x + add;
}

var cypherDelta = cypher.bind(null, 3, 2);

cypherDelta(10); //23

Emprunter une fonction

Marre de ces objets JSON qui ressemblent à des Array mais pas assez pour leur appliquer les fonctions propres aux Arrays?

Partons de cet objet :

var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };

Et c'est parti!

            // Make a quick copy and save the results in a real array:
                // First parameter sets the "this" value
                var newArray = Array.prototype.slice.call (anArrayLikeObj, 0);

                console.log (newArray); // ["Martin", 78, 67, Array[3]]

                // Search for "Martin" in the array-like object
                console.log (Array.prototype.indexOf.call (anArrayLikeObj, "Martin") === -1 ? false : true); // true

                // Try using an Array method without the call () or apply ()
                console.log (anArrayLikeObj.indexOf ("Martin") === -1 ? false : true); // Error: Object has no method 'indexOf'

                // Reverse the object:
                console.log (Array.prototype.reverse.call (anArrayLikeObj));
                // {0: Array[3], 1: 67, 2: 78, 3: "Martin", length: 4}

                // Sweet. We can pop too:
                console.log (Array.prototype.pop.call (anArrayLikeObj));
                console.log (anArrayLikeObj); // {0: Array[3], 1: 67, 2: 78, length: 3}

                // What about push?
                console.log (Array.prototype.push.call (anArrayLikeObj, "Jackie"));
                console.log (anArrayLikeObj); // {0: Array[3], 1: 67, 2: 78, 3: "Jackie", length: 4}

Quelques liens pour en savoir plus

Jeudi

Randori

Prendre un caractère tous les deux caractères, pour créer une nouvelle chaîne de caractères à concaténer à ce qui reste de la première.

Exemples de cryptage :

"This is a test!", 1 -> "hsi  etTi sats!"
"This is a test!", 2 -> "hsi  etTi sats!" -> "s eT ashi tist!"

Ecrivez deux fonctions :

function crypter(text, n)
function decrypter(encryptedText, n)

Exercice Spotify

Récupérez sur github le fichier index.html. Prenez-en connaissance. Attention, du code inutile peut s'y être glissé.
Recréez la page d'accueil du site Spotify.
Récupérez le fichier users.json.
En vous basant sur celui-ci, mettez en place une interface de connexion.
Pour chacun des utilisateurs, la couleur de la police change après connexion. La couleur choisie pour chaque utilisateur est spécifiée dans le fichier users.json.