Tutoriels Vidéo
Parcourez ma collection de tutoriels vidéo sur le développement web, JavaScript, PHP, les bases de données et bien plus encore.
bootstrap 4 - 2020
Un aperçu général sur l'utilisation du framework CSS Bootstrap 4 : 0 - Rappel sur les media queries 1 - Comment installer bootstrap en local (CDN, NPM) 2 - Le système de grid layouts 3 - Les éléments (Headings, Tableaux, Images, etc...) 4 - Les composants : Barre de navigation (Navbar) 5 - Les composants : Carousel 6 - Etc...
Graphique à barres avec CSS Flexbox
Cette vidéo montre à quel point il est devenu facile de disposer du contenu dans un conteneur adaptable. L'exemple illustre la création d'un graphique à barres en utilisant des données fictives et en se basant sur le modèle des boites flexibles (Flexbox). Pour en savoir plus sur les layouts en CSS : Présentation : https://layouts.css.daaif.net Vidéo : https://youtu.be/O5WYZ1eliWM
Simple CSS Navbar
Comment créer une barre de navigation simple avec CSS. Cette barre se base sur une liste non ordonnée et montre les modes d'affichage CSS (display) : 1 - display: inline, 2 - display: bloc, 3 - display: inline-block, 4 - display: flex Le code est disponible sur Github : https://github.com/daaif/css-menu Pour voir les concepts CSS associés à cette vidéo : https://layouts.css.daaif.net
Le positionnement en css: absolute, fixed, relative et Sticky.
Cette vidéo présente les différents modes de positionnement en CSS : 1 - Le positionnement absolute, 2 - Le positionnement fixed, 3 - Le positionnement relative, 4 - Le positionnement sticky L'utilisation des quatre repères pour se positionner par rapport au document, au viewport ou à l'élément lui même. Le cours est illustré par plusieurs exemples et démonstrations. Lien des slides : https://layouts.css.daaif.net/#16 Télécharger les slides en local : https://github.com/daaif/css-layout-slides
CSS Layouts.
Comment créer des layouts avec CSS : - Généralités sur la typographie et les unité em et rem. - Généralités sur l'imbrication et la juxtaposition des boites html. - Disposition de contenus en colonnes. - Mise en page en utilisant le flottement (float, clear). - Mise en page en utilisant le modèle Flexbox. - Positionnement en CSS : absolute, fixed, relative, sticky Lien des slides : https://layouts.css.daaif.net Télécharger les slides en local : https://github.com/daaif/css-layout-slides
Javascript - Comprendre l'Event Loop
Javascript est mono-thread, ce qui signifie que tout le code s'exécute dans la même pile. Faire de grandes boucles peut bloquer la pile et donc le navigateur. Dans une telle situation, tous les événements du DOM, le rafraîchissement des styles de la page seront interrompus. Cette vidéo montre les constituants qui permettent à Javascript de fonctionner, et par là même d'apprendre à éviter de bloquer l'Event Loop. Ces concepts sont des préalables à l'étude des Promesses en Javascript.
ES6 - Array.fill() comment initialiser de grands tableaux
D'apparence Array.fill() permet uniquement de remplir un tableau. Cependant, sans cette méthode et dans le cas de grands tableaux ou tableaux multidimensionnels, nous aurons à revenir à la méthode traditionnelle des boucles for pour initialiser un tableau, ce qui est souvent fastidieux. Dans cette vidéo, je montre des cas d'utilisation pour initialiser de grands tableaux et des tableaux multidimensionnels ainsi que l'implémentation interne de cette méthode.
ES6 - Array.reduce() utiliser un accumulateur dans une boucle
La méthode reduce permet de parcourir en interne un tableau et nous expose pour l'appel de chaque élément un accumulateur. Dans cette vidéo, je donne des exemples d'utilisation de cette méthode, ainsi qu'un exemple d'implémentation de cette méthode. Cette série de vidéos sur ES6 utilise intensivement les arraow functions. Pour apprendre l'essentiel sur ces fonctions, je vous suggère cette vidéo : https://www.youtube.com/watch?v=jg6Jr4SZoA0 Aussi pour l'utilisation de const et let au lieu de var : https://www.youtube.com/watch?v=FBuCVhha1Mw
ES6 - Array.map() ou transformer un tableau.
La méthode map() est très utile lorsqu'on veut faire une projection d'un tableau. La projection renvoie un tableau transformé selon les besoins. Dans cette vidéo, je donne un aperçu sur l'utilisation de cette méthode ainsi que l'implémentation interne de celle-ci. Cette série de vidéos sur ES6 utilise intensivement les arraow functions. Pour apprendre l'essentiel sur ces fonctions, je vous suggère cette vidéo : https://www.youtube.com/watch?v=jg6Jr4SZoA0 Aussi pour l'utilisation de const et let au lieu de var : https://www.youtube.com/watch?v=FBuCVhha1Mw
ES6 - Array.forEach pour parcourir un tableau
Comment fonctionne la méthode forEach() ? Eh bien c'est comme faire une boucle avec for mais de manière élégante. De plus, nous verrons que cette méthode est utilisée intensivement en interne presque dans toutes les autres méthodes des tableaux. Une erreur dans l'implémentation de Array.prototype.each, dans la boucle for, il faut écrire fn(this[i], i, this) et non pas fn(nombres[i], ... Cette série de vidéos sur ES6 utilise intensivement les arraow functions. Pour apprendre l'essentiel sur ces fonctions, je vous suggère cette vidéo : https://www.youtube.com/watch?v=jg6Jr4SZoA0 Aussi pour l'utilisation de const et let au lieu de var : https://www.youtube.com/watch?v=FBuCVhha1Mw
ES6 - Array, généralités sur les tableaux JS
En Javascript, les tableaux constituent la pierre angulaire de tous les scripts. Dans cette vidéo, je montre l'exemple de la représentation par un tableau des entrées d'une facture. La présentation des données n'est q'une vue de cette structure. Les tableaux toute une panoplie de méthodes, à la fois simples et puissantes, qui permettent de filtrer, trier, de chercher. Etc. Cette vidéo constitue une introduction de toute une série de vidéos qui présenteront la puissance des différentes méthodes accompagnées d'exemples concrets. Cette série de vidéos sur ES6 utilise intensivement les arraow functions. Pour apprendre l'essentiel sur ces fonctions, je vous suggère cette vidéo : https://www.youtube.com/watch?v=jg6Jr4SZoA0 Aussi pour l'utilisation de const et let au lieu de var : https://www.youtube.com/watch?v=FBuCVhha1Mw
ES6 - Arrow Functions
Les fonctions ou les fonctions fléchées sont maintenant pris en charge par tous les navigateurs. Il n'y a pas de raison de ne pas les utiliser, surtout pour passer les paramètres de fonctions de type Function. Dans cette vidéo j'insiste sur la syntaxe épurée de ces fonctions.