Salut, 3WAcademy - Semaine 4 - logo

Pas de train cette semaine, mais un peu de boulot et de projet à terminer pour m’occuper. Les projets ce sont enchainés, et j’avais plusieurs choses à terminer tranquillement, donc j’ai fait passer la formation et mon travail personnel avant le blog. Je profite donc de ce jour férié pour rattraper mon retard. La fin de la grosse partie intégration approche, et le grand saut dans la première grosse partie de développement arrive!

Jusque là les semaines étaient partagées entre l’intégration et la partie développement. A partir du 6 novembre, on va faire du développement toute la semaine, chose qui me convient tout à fait puisque c’est plutôt vers cette spécialité que je souhaite m’orienter.

Mais avant de parler que de dev, je vais vous expliquer ce qu’on a fait dans cette 4ème semaine…

L’intégration

Cette semaine marque donc la fin d’un cycle pour cette formation à la 3WAcademy, puisque nous sommes en train de terminer la partie intégration pure, HTML et CSS.  Il ne nous restera plus qu’à faire le projet de fin la semaine prochaine. Nous avons accumulé un peu de retard, puisque la formatrice a tenu à laisser le plus de temps possible à chacun pour qu’un maximum d’étudiant puisse terminer chaque projet, ce qui veut dire que nous allons manquer de temps en cours pour réaliser le dernier projet. Je trouve ça assez normal, puisque il est important que cette partie soit bien maitrisée et comprise par tout le monde, avant d’aller plus loin. Cela veut juste dire que nous aurons du travail à faire en dehors des cours pour terminer, ce qui personnellement ne me dérange pas puisque je le fait déjà mais pas sur de l’intégration.

Enfin Flexbox!

Cette semaine a été très importante puisque nous avons vu de nouvelles techniques dont une que je connaissais déjà: Flexbox! Avant de nous jeter dans le projet et à torturer flexbox comme des fous, nous avons passé un peu de temps sur une petite plateforme que je connaissais déjà: FLEX-FROGGY. Le principe est assez simple, puisqu’il faut positionner les grenouilles sur le nénuphar correspondant grâce à Flexbox. Si tu ne connais pas encore ces propriétés de positionnement CSS, c’est un très bon moyen de s’y mettre. Il y a la possibilité de mettre les instructions en français en bas de page.

3WAcademy - Semaine 4 - flex froggy

Cela faisait 3 semaines que je ne devais pas utiliser les propriétés Flexbox, à vraiment me prendre parfois la tête avec des float et des inline-block pour faire le positionnement CSS, choses dont j’avais peu l’habitude mais ça a été très formateur. Apprendre ces techniques a été très bénéfiques puisque je peux désormais les utiliser en connaissance de cause sans forcément utiliser Flexbox systématiquement.  En revanche, la maquette qu’on a eu à réaliser pour mettre Flexbox en application était clairement faite pour ces propriétés, donc là je me suis fait plaisir! Comme les maquettes précédentes, nous avons eu à coder les versions desktop, tablettes et mobile pour les 5 pages de ce projets.

Plus loin avec les animations

Encore une fois, je me rends compte à quel point il est très intéressant et profitable d’avoir un formateur à ses côtés pour progresser. Les plus rapides du groupe ont pu s’exercer à l’animation d’image SVG. Je savais que ce format d’image vectorielle permettait  des animations mais là j’ai vraiment pu comprendre comment faire grâce à cette petite initiation. C’était vraiment quelque chose de nouveau et j’ai vraiment trouvé ça sympa!! On a juste animer un logo, mais les perspectives d’animations avec du SVG sont vraiment énormes!! Il va falloir que je retravaille ça pour mieux maîtriser le fonctionnement, mais on peut vraiment faire des trucs très sympa avec ce genre d’animation! Pour voir à quoi cela ressemble, je te conseille de regarder le travail de Sarah Drasner, qui est vraiment spécialisée dans les animations SVG, et je trouve son travail super!! N’hésites pas à visiter sa page projet dans Codepen.

Je pense que je m’amuserai avec les SVG lorsque j’aurai de bonne base en développement PHP et Javascript notamment. Je vais essayer de ne pas me disperser et de suivre mon objectif principal.

Le développement

Cette semaine, j’ai vraiment commencé à m’amuser avec les 2 projets qu’on a eu à réaliser en Javascript. Les premiers était un sélecteur de photo et le second un carousel de photo. Ces deux projets nous ont permis de mettre un peu plus les pieds dans les problématiques que nous aurons dans notre futur métier.

 

Le sélecteur de photo

Ce projet consistait à réaliser une galerie de photo en HTML et CSS, et de rajouter une couche de Javascript pour ajouter de l’interactivité. L’objectif était clairement de nous faire manipuler les évènements Javascript.

Une fois la page statique montée, chaque photo survolée devait être entourée d’une bordure grise. Il a donc fallut coder plusieurs « écouteurs d’évènements » sur les photos. Pour éviter de répéter du code, j’ai placé la fonction addEventListener dans une boucle for(…of …). C’est un principe qu’il faut bien gardé en tête lorsqu’on a un même évènement à appliquer plusieurs fois sur une liste d’éléments.

Ensuite, il fallait que chaque photo cliquée possède une bordure verte sans retirer la bordure aux photos précédemment sélectionnées. Cette action devait aussi permettre d’incrémenter ou de décrémenter le compteur de photo cliquée (en rouge sur l’image). Il y a plusieurs façons de réaliser cela.

3WAcademy - Semaine 4 - Projet sélecteur de photo

Lors du cours du jeudi, le formateur nous a montré une technique permettant d’inspecter si tel élément possédait telle ou telle classe. Cela permettait dans le cadre de ce projet, de compter combien de photo possédaient la classe CSS « selected » et ainsi de permettre d’afficher ce nombre en rouge. En effet, lorsque l’évènement est détecté, on choisit de déclencher une fonction qui ajoute ou supprime une classe CSS. Pour ma part, j’ai fait un peu différemment. J’ai j’ai bien ajouté une classe CSS à ma photo, mais j’ai aussi créé une variable « compteur » que j’incrémentais ou décrémentais suivant le cas et la condition fixée.

J’ai trouvé cet exercice très intéressant surtout, qu’ayant terminé dans les premiers, j’ai pu commencer le bonus qui consistait à réaliser un drag-and-drop permettant de déposer les photos dans le cadre gris (voir photo). Je n’avais jamais travaillé sur une fonctionnalité comme celle là, et j’ai bien aimé le principe! je n’ai pas tout à fait terminé ce bonus. Les évènements qui permettent d’autoriser et de réaliser ce drag’n’drop sont en place, il ne me reste plus qu’à modifier le DOM pour que le déplacement puisse se faire. Il me faut donc ajouter l’élément déplacé dans le bloc d’arrivée et de le supprimer ensuite dans le bloc de départ. Je pensais que les évènements drag, drop, etc, suffisaient, mais en réalité, pour que le déplacement soit effectif il faut modifier le DOM. Je terminerai cela ce week end.

Le Carousel

Avec ce projet on rentre donc un peu plus dans le métier puisque c’est une fonction qu’on retrouve très régulièrement sur des sites. Donc on est en plein dans un cas très concret de projet Javascript! Pour rappel, un carousel de photo est un bloc ou plusieurs photos défilent les unes à la suite des autres. Il existe des tas de librairies font ça, très simplement. Si tu cherches un peu tu ne devrais pas avoir de mal à en trouver tout fait!

3WAcademy - Semaine 4 - Carousel initial

Vue du carousel

 

Voici ce que nous avions à faire:

  • Un bouton doit permettre d’afficher / masquer  la toolbar,
  • Les photos doivent pouvoir défiler les unes à la suite des autres en utilisant le clavier (flèches droite et gauche)  ou à la souris en cliquant sur les boutons droite et gauche,
  • Le défilement automatique doit pouvoir être activé ou stoppé grâce à un seul bouton.
  • Un bouton random doit permettre un défilement aléatoire des photos.
3WAcademy - Semaine 4 - Carousel toolbar

Carousel avec la toolbar visible

Je n’ai pas eu le temps de terminer  ce projet mais j’ai bien aimé me confronter à ce genre de problème. J’ai encore un peu de travail mais les fonctions de défilement au clic ou au clavier fonctionnent, il me reste à terminer le défilement automatique et à faire le défilement aléatoire.

3WAcademy - Semaine 4 - Carousel survol bouton

Bouton de toolbar survolé

J’ai donc encore un peu de travail à fournir pour terminer les fonctions de bases qui sont demandées. Ensuite, j’essaierais de coder des animations un peu plus fluides pour rendre le défilement plus sympa.

La suite

Cela fait un mois que j’ai démarré cette formation et je ne code plus comme avant. Je me suis bien approprié les bonnes pratiques en intégration. Ayant fait moins de développement pendant ce premier mois, je n’ai pas forcément ressenti beaucoup de progrès. Cela ne veut pas dire que les cours ne sont pas bons, au contraire, c’est juste que j’avais déjà de petites bases et tout ce qu’on a vu, ne reprenait que les bases.

On démarre le PHP le 2 novembre donc je vais passer ma journée du 1er à faire du PHP pour avoir quelques notions de bases, toujours dans l’optique d’avoir un peu d’avance… Je vais passer mon mercredi sur Openclassrooms

De plus, je vais participer à mon premier Hackaton, organisé par l’école, donc je vais découvrir ce genre d’évènement. J’en parlerais dans mon prochain article.

Je retourne à mes études et te dis à très bientôt!

Guillaume