journal-promo-ada

Semaine 8

Journal du dimanche 22 mars 2020

• J’ai travaillé sur comment styliser un input-file ( en le rendant invisible et en travaillant sur le label lié grâce à for). Il reste à utiliser javascript pour permettre l’affichage du nom du fichier téléchargé pour une meilleure UX.
• J’ai fait un peu de responsive sur les pages contact, inscription et connexion de mon site Codevores.
• J’ai utilisé animation pour les h2 de mon header.
• J’ai commencé la refactorisation de deux fonctions (rendreVisible et rendreInvisible) pour le site de Clément grâce à l’aide de Yannick. Reste à finaliser la refactorisation grâce à data attribute (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).
• j’ai essayé de réfléchir à pourquoi ma page index.html contenant mon dessin en svg fonctionne sur tous les navigateurs sous Mac mais crashe sur PC (peut être trop de manipulation du fichier svg sur Illustrator puis sur Sketch puis sur Omber).
• J’ai installé et commençé à travailler avec Inkscape pour faire du dessin vectoriel sans passer par Sketch ni Illustrator et tenter de limiter les bug.

Journal du lundi 23 mars 2020

• J’ai suivi le cours Openclassroom sur le Markdown
• J’ai codé une fonction pour que l’objet de mon input file et sa taille apparaisse dans le label.
• J’ai commencé la page “actualités” du site Codevores et fait le lien pour récupérer les actualités avec JSON.
• J’ai suivi le cours de Helvira en responsive et modifié :
  • mes pages html en ajoutant dans le head les meta-name
  • ma page css en remplaçant “media queries” all par “media queries screen”
• J’ai réindenté tout mon code CSS pour qu’il soit plus propre avec la méthode d’Helvira.

Journal du mardi 24 mars 2020

• J’ai appris à utiliser un seul fichier script.js pour plusieurs pages html en posant la condition if(document.querySelector(.hamburger), auparavant la console empêchait le déroulement du script dès qu’un élément appelé dans le script pour une autre page html n’existait pas dans la page html présente.
• J’ai commençé à utiliser les positions relative et absolue.
• J’ai fait un peu de Benchmark pour m’inspirer.
• J’ai appris à utiliser linear-gradient.

Journal du mercredi 25 mars 2020

• Ce matin café connecté avec les descodeuses.
• Essai de finalisation de la page “Actualités”. Je change 50 fois de couleurs et de font. Je perds un temps fou…
• à 15h j’ai participé en visio au témoignage de Solveig qui a fait une reconversion à la suite de petits boulots et d’un BacS. Elle a fait une formation intensive de 3mois avec comme langages (HTML, CSS3, PHP, Javascrpit et MySQL. Puis a directement travaillé en CDI (Emailing). Après un an elle a décidé de poursuivre sa formation en s’inscrivant à l’Ecole 42 pour apprendre l’IA. Elle conseille de choisir un stage ou un premier job avec au moins un responsable technique au dessus de nous et d’être dans une équipe de 4/5 développeurs.
• J’ai fait le footer de mes pages Codevores.

Lundi 30 Mars

J’ai commencé à reconstruire mon site Codevores très moche. Je tire un enseignement de mes erreurs notamment le nom de mes class fourre-tout aux multiples propriétés. Au final c’est improductif. Quand il s’agit de changer à la dernière minutes c’est une grande blague.

Je commence donc par monter une bibliothèque css avec toutes les propriétés utiles pour minimiser les class fourre-tout.

Mardi 31 Mars

Café avec les Descodeuses et Mich.

On aborde Scss et stylus, Js.code dont le site est apparement très bien pédagogiquement parlant et j’installe l’extension Wappalyzer qui permet de voir quels langages utilise chaque site web.

Je commence le cours Animation d’Openclassroom. J’ai appris notamment :

• qu’il existe 12 grands principes fondamentaux en animation. Ils convergent tous vers le même but rendre l’animation réaliste et pour cela lui donner des imperfections qui correspondent davantage à ce que l’oeil humain est habitué à voir.

• CSS est un des langages permettant de créer des animations (Javascript aussi).

• Avec CSS on peut créer des animations avec les propriétés transition et @keyframes.

• Avec transition on fait passer un objet d’un état A à un état B.

• Pour faire une animation avec transition il faut :
  • un objet à animé
  • un état initial
  • un état final
  • une durée
  • un événment qui peut être notamment défini avec les pseudo class (:hover , :active, :no , etc).
• la propriété transform avec la fonction scale() permet de transformer la taille d’un objet.
• la propriété transform permet aussi avec d’autre attribut de transformer un objet (ex: color, background-color, …).
• On peut ajouter un delai au lancement de l’animation pour retarder son lancement à partir de l’évènement: transition-delay: 300ms;
• On peut aussi directement mettre le délai dans la propriété transition à la suite de la durée et de l’animation: transition: transform 0.3s 300ms;
• Afin de rendre l’animation plus réaliste il faut apprendre à gérer les accélérations et décélérations de la transformation.

Pour cela on peut utiliser la propriété transition-function-timing ou dirctement ajouter dans la propriété transition la fonction voulue:

• ease (par défaut)
• ease in
• ease out
• ease in out (apprécié des développeurs)

• linear

• On peut aussi choisir de manière plus précise la courbe du timing. Pour cela on utilise la fonction cubic-bezier qui reçoit plusieurs valeurs (x et y de l’accélération et x et y de la décélération).