Journal de Bord
Stage MINK Agency
Janvier - Fevrier 2022
JANVIER
Début du stage, brief en équipe à 9h30 tous les lundi matin
Mise en place des outils de travails :
Recherche de template pour le rapport de stage et création de la charte graphique du rapport, prise d'un rdv avec Tony qui gère la partie Piment.io, entreprise secondaire de MINK qui marche sur de plus petit projet templatisée avec de plus petit budget et des temps de travail plus court. Majoritairement sur du WordPress et du Vue
Réunion avec Tony, explication d'une manquette pour la refonte du site piment.io, mission d'intégration pour se familiariser avec TailwindCSS sur 2 sections plutôt simple
Code mit en place sur codepen et maquette sur figma
<div> assez compliqué mais qui a fini par être résoluReprise de l'intégration du remake du site piment.io, passage sur site de prod avec création des dossiers sur un sous domaine. Integrer toutes la landing page, soit 7/8 screens
Connexion au ssh via PhpStorm pour gagner en rapidité.
Installation classique de tailwindcss avec des tutos en utilisant NPM
Suite de l'intégration, terminée à 80%, verification du reponsive à faire. Mise en place de commentaires pour lecture plus simple du code.
Je commence à me rendre compte que les classes tailwind font vraiment des grosses listes dans le html qui le rend parfois difficielement lisible.
Comme l'installation via npm n'est pas forcement facile, envie de faire une rapide doc pour ne plus perdre de temps dessus.
npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch --> elle permet d'update le css et l'html à chaque modification Reprise de la fin de l'intégration de la landing page de la refonte de piment.io. Mise en place en CDN de alpinejs, pour pouvoir faire fonctionner la partie FAQ de la landing page. J'ai scrapé l'ancien mode de fonctionnement avec alpinejs sur l'ancien site puis un peu de css et la nouvelle version est fonctionnelle. C'est un petit plugin en js pour réaliser des animations et des petites choses, léger et pratique, pas encore exactement tout compris mais en s'arrétant dessus je devrai pouvoir comprendre assez vite.
Fin de l'intégration DESKTOP, commencement du responsive tablette et mobile, mise en place d'un burger menu et clean du code par reformulation ou meilleure utilisation de tailwindcss. Correction de details et repasse avant une v1. Suite demain
sm: md: lg: pour pouvoir faire un responsive correct Reprise du reponsive sur piment.io. Puis message de Tony pour une mission spéciale urgente : faire une page de produit pour une marque de vetement 100% reponsive et fonctionnel le plus vite possible. Plus grande partie fait dans la matinée, desktop finalisé.
Suite et fin de la page de produit, reponsive de l'ultra wide au mobile
<iframe> Discussion avec Tony pour me faire monter sur un pitch avec l'université de Bordeaux à 11h. En attentant j'ai mis en place un petit nom de domaine pour heberger ce ficher .md sur une page web pour l'avoir partout : journaldebord.hugoscarbonchi.fr.
Réunion avec l'universié de Bordeaux pendant 1h, kick off d'un projet. Mise en place d'un systeme de réservation pour des formations aux premiers secours. Utilisation de WordPress avec un plugin pour permettre la mise en page et le système de mise en place des formations et des inscriptions.
Call avec Tony pour apprendre un peu shopify et liquid. Après 1h d'explications, j'ai pris en main l'intégration d'un système d'avis sur la landing page. très plaisant de comprendre les systèmes de schema de blocks et de section qui permettent de modifier toute l'administration afin de faire des templates personnalisés. Cela ressemble beaucoup à wordpress mais personnalisable de façon plus intuitive.
J'ai également avancé sur le template de mon rapport de stage qui devrait être bien structuré et prêt à être rempli
Début de la 2ème semaines de stage. Réunion de début de semaine à 9h30. Plus de monde au bureau aujourd'hui, dont Tony que j'ai enfin rencontré physiquement. Super retour client sur un prise d'initiative pour l'intégration des avis sur le site. On pensait que ça ne plairait pas mais finalement retour super positif et validation client. Mission du matin, mettre en place SwipeJs pour essayer de faire un caroussel des avis. Gros struggle du matin. Donc concentration sur le responsive et remise à l'après midi pour le slider, même si un début d'idée emerge en utilisant la scrollbar en hidden ave de l'overflow
Reprise du slider pour essayer de trouver une solution viable et visuelle. Après beaucoup de perseverance sur l'idée du la scrollbar, l'idée finie par payer ! Mise en place d'un curseur spécifique et de 2 flèches pour pouvoir avec un bon UI. Fier d'avoir réussi à trouver une solution seul et en JS Vanilla.
Travail sur le rapport de stage parce que je n'etais pas content de mon ancienne mise en page. On commence à avoir qqch de plus propre et sympathique.
Début de travail avec l'université de Bordeaux, création du premier wireframe de la landing page, avec comme idée de faire une mise en page de type "hero", c'est à dire un titre ou une catch phrase d'un côté et une image ou un svg de l'autre. En dessous de cette première section, j'ai pensé mettre directment les partenaires comme nous l'avions evoqué durant la réunion.
Reprise du wireframe de la landing page pour l'université de Bdx, deux versions terminées à regarder avec Tony pour affiner les details et fonctinnalitées.
Suite du travail sur le rapport de stage avec une version finales des pages de partie. Prochaine étape, faire le sommaire et stylisé le reste du template du rapport.
Intégration de sections pour UYD, toute la partie "à propos de nous", et recherche d'un code JS pour faire un compteur de chiffres au chargement.
Finalisations des details du template pour le rapport de stage qui est terminé a 70%, après il faudra juste tout remplir grâce à ce journal de bord
Intégration du blog de la refonte de piment.io, intégré plutôt rapidement par habitude d'utilisation de tailwind et l'utilisation des grids. Version Desktop terminée
Fin de l'intégration avec responsive fonctionnel et code commenté tout propre. Deuxième mission de la journée, faire un baackground en css avec des svg dans un pattern repeté, grosse difficulté de la journée. Pas réussi a coder ce pattern de l'après midi, même avec l'appuis d'un outils, c'est tres frustrant.
Matinée plutôt calme, echec de la mission du pattern CSS d'hier donc Tony va s'en charger et m'expliquera sa méthode dans l'après midi.
Début de l'écriture du rapport de stage, Introduction, remerciement et reflexion sur le contenu global. il est tôt pour commencer mais le faire petit à petit aidera beaucoup.
Idée de faire un template de présentation sur le thème d'un site web sur slide, au couleur de MINK et avec un header fixe et des conventions web, idée à reflechir
Call avec Damien et Julie pour une nouvelle mission de retouche et de SEO sur le site fraicheur de paris, plus d'autres missions sur des tickets de responsives et du travail de details (alt img, balise meta, tag google analytics etc.) Mise en place de l'environnement de travail avec Clément, GitLab, Webstorm, SSH Keygen, yarn.
Explicaiton du fonctionnement de GitLab avec les systèmes de commit et de demande de merge. Commencement de la mission "sauver le SEO", mise en place des titres et des descriptions de chaques pages qui etaient inexistantes. Travail sur des fichiers VueJs.
Intégration des titres et des description via ce script :
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: 'Hello World!'
}
},
head() {
return {
title: this.title,
meta: [
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
{
hid: 'description',
name: 'description',
content: 'My custom description'
}
]
}
}
}
</script>Une fois tous les titres et les descriptions mises en places, passages sur chacun des fichiers .vue pour revoir toute la hierarchie des texte, en rempalçant les balises <p></p> par des <h1></h1> <h2></h2> <h3></h3>. Travail long et laborieux, de plus reprendre un code qui n'est pas de soi est assez difficile.
Reprise du SEO, fin des titres et descriptions. Finalisation du remplacement des balises. Mise en place de GTM (Google Task Manager) pour qu la cliente puisse utiliser son compte google analytics.
Prise en main de ticket sur des corrections de reponsives (une trentaine). Travail long mais important, il reste encore quelques tickets mais ils devraient être terminés assez vite la semaine prochaine.
Réponse à un questionnaire de fin d'année pour savoir comment tout le monde se porte chez MINK.
3ème semaine de stage. Je commence la semaine sur la mission fraîcheur de Paris, avec la fin des tickets et l'intégration d'un pdf sur une page. Dans un second temps il y aura surement une mission sur les cookies.
Suite des tickets front responsive. Passage sur les tickets UserBack pour corriger des details de types mauvais texte ou suppresion de contenu. Point avec Julie sur des problèmes dû à une mauvaise intégration, interrogation sur les ancres du scroll
Daily sur FDParis, brief sur ce qui a été fait hier et reprise des tickets centralisées sur Userback. Jean-Louis fait la verification des tickets que j'ai validé hier.
Documentation et petit code d'un formulaire mail pour Quentin en php.
On continue sur les corrections de bug et les tickets.
Style et affinage du code du formulaire de contact pour quentin. Une belle erreur 500 quand elle repasse sur scarbonk.fr, pas encore résolu.
Daily FDParis comme tous les matins, objectif supprimer le scroll sur mobile. Finir en priorité les tickets userback. Enfin trouvé une solution pour fermer et ouvrir les boutons estimer et contact au clic en plus de la croix, encore quelques optimisation à faire pour pouvoir avoir qqch de parfait.
Prio ticket userback. Tentative de debug du formulaire php de contact avec l'erreur 500.
crtl maj f magique pour pouvoir remplacer toutes les petites choses et beaucoup de persevérance Reprise des tickets userback avec code d'une petite fonction pour arrondir un nombre :
function noDecimal(nbm3) {
return Math.ceil(parseFloat(nbm3.replace(',', '.')))
}
Réunion de rentrée de MINK, avec retour sur l'an dernier et tous les objectifs de cette année, bilan et perspective d'évolution. Expansion de piment et utilisation des technos plus cadrées. Egalement une envie de specialiser les metiers, des fronts des backs et moins de fullstack, et de manière général de moins prendre de personnes free ou externe à la boîte.
Restaurant raclette le soir avec tout le monde, super soirée !
Remote toute la journée, presque plus de tickets à faire donc mise en ligne du formulaire et du site de quentin dans la journée.
Dernier ticket sur le nom des ancres à mettre en français. Un vendredi calme
Debut de la 4ème semaine
Daily du lundi, de moins en moins de missions sur FDParis, donc passage avec piment sur l'université de paris dans la matinée. Réunion pour valider le wireframe avec l'équipe de la fac. Mise en place de l'environnement de travail sur wordpress
Fin de l'installation de wp et de l'environnement avec Nicolas, decouverte du BoilerPlate piment et commencement de l'intégration de la maquette de PSSM, pour l'instant en statique sans amelia et sans BO.
Deux premières sections faites et responsives suite demain.
Après le daily FDParis reprise des nouveaux tickets, au revoir la scroll snap et quelques corrections sur du responsive, des carrousel et des champs de formulaire.
Reprise du projet de l'université de Bordeaux pour la fin de matinée.
Intégration de la suite de la maquette en créant un nouveau bloc wordpress assez simple grâce à ACF.
// GET ACF TERMS
$title = get_field('titre');
$rows = get_field('liste');
?>
<!-- TITLE AND LIST -->
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<div class="flex">
<div class="container mx-auto my-8 md:my-24">
<div class="flex flex-col items-center">
<?php
// VERIFY IF REPEATER HAVE VALUE
if ($rows) :
// INITIALISE TITLE NUMBER
$i = 1;
?>
<!-- HTML OUTPUT TITLE-->
<h1 class="mb-5 text-center"><?php _e($title); ?></h1>
<div class="flex flex-col items-start w-full">
<?php
{
// FOR EACH TITLE IN LIST
foreach ($rows as $row) {
$titleListe = $row['titleList'];
?>
<!-- HTML OUTPUT LIST-->
<div class="flex-row flex justify-items-center items-center mb-4">
<p class="mr-8 p-0 text-stroke font-black text-7xl">0<?php _e($i++); ?></p>
<h4 class="text-justify !font-normal text-xl"><?php _e($titleListe); ?></h4>
</div>
<?php }
}
else :
{
// ERROR MESSAGE
_e('Pas de valeur dans votre liste');
}
endif;
?>
</div>
</div>
</div>
</div>
</section>Reprise des bonnnes habitudes durant le stage de l'an dernier sur le wordpress et la propreté de code, rappel du foncitonnement ACF avec les repeaters et tout ce qui va bien.
Reprise des tickets du jour sur FDParis, rien de compliqué c'est allé assez vite.
Continnuer d'integrer le site du PSSM avec pour objectif de mettre en place le plugin Amelia dans l'après midi, j'ai demandé à Tony la clef api pour pouvoir avoir la version illimité et pas juste d'essai. En attentdant travail sur la presentation de la soutenance de stage en terme de desgin et pas de contenu encore.
Début de l'integration d'Amelia, compréhension du plugin et petite galère de bdd sql avec xamp sur le localhost de mon pc. Mise en place du plugin necessitant une surcouche de css pour le faire coller à la maquette. Galère sur un oubli de enqueue script css donc pas de css sur le plugin amelia. Problème resolu assez rapidement. Transfert de toutes les modification sur le stagging pour que ça soit sur une url plublique.
Reprise de quelques tickets sur FDParis, avec gros problème sur Iphone à peu pret incomprehensible. Besoin de retravailler des ouvertures et fermetures de menu sur du responsive et du desktop, mission plus compliqué que prévu car code de base toujours aussi compliqué à reprendre et à comprendre.
Reprise de l'intégration du boiler plate sur le PSSM et de amelia dans l'après midi
Mise en place et compréhension du système d'email sur amelia, avec des difficultés sur certaines choses donc besoin de forcer un peu de css. Landing quasiment complete et plugin maitrisé en fin de journée.
Pas de tickets sur FDParis ce matin, debut de la fin de mission sur ce projet après presque 1 mois dessus. Un projet laborieux et qui met mes nerfs à rude épreuve mais qui m'as fais comprendre pas mal de choses sur Vue et le SEO en début de mission.
Envoie de mail pour des beosins d'assets et d'adresses mail pour les formualires de contact. Mise en place du plugin NinjaForm avec tous les bons champs, les bonnes structures d'envoie de mail et un peu de css pour que cela rentre dans le style du site.
Travail grâce à un ToDo faite par Tony, système ressemblant aux tickets habituels
Début de la cinquième semaines de stage, deja !
Fin "officielle" de la mission FDParis, plus besoin d'être présent sur les daily du matin. Prise à plein temps du projet PSSM Univeristé de Bordeaux.
Call avec Tony pour voir le temps necessaire pour finir le site du PSSM, puis passge en milieu de semaine sur des évol de Mink. Probablement sur le formulaires de contact et la gestion des offres et des candidatures.
Code du footer, de la galerie des partenaires bien propres, travail sur des tickets et des details. Cassage de dent sur un nouveau burger menu car actuellement c'est moche. Intégration du bloc video et de la page calendrier. Objectif de demain, finir toutes les fonctionnalités Amelia et verifier tous les systèmes de mails.
FEVRIER
Toujours sur le site du PSSM, finitions et intégration de tous les mails de confirmations pour annulation etc. Reception de nouveuax logos et optimisation de code
Mise au point et passe sur le site avec Tony pour voir sur quels details bosser, site quasiment fini. Il reste plus que le burger et trouver un footer jolie même si en fin de journée la dernière version semble pas mal, à voir demain
Reprise de tickets et finitions sur le site du pssm pour pouvoir avoir les premiers retour client d'ici la fin de semaine, mise en production dand 10 jours. Objectif faire du details et finir le contenu la semaine prochaine
Bilan et repasse avec tony, correction de details et reflexion sur la doc à mettre en place. Modification du texte des cookies et modification enfind du burger menu. Rajout d'une demande de consentement pour le formualire de contact.
Reprise express sur fdParis, besoin urgent de demasquer toutes les pages sur un lien et les garder masquées pour un autre. Reflexion sur la création d'une variable d'environnement. Travail avec Kevin sur ce petit dev pas compliqué mais qui était pas simple pour moi.
Retour sur 2 3 points front et fonctionnalité sur FDParis, prise de tête sur de petites choses chronophages.
Début en fin de journée de la création de la doc Notion pour le PSSM. Livraison du lien pour le PSSM pour les retours dans la journée de demain.
Reprise de la documentation notion commencé la veille, sur la personnalisation des différents blocs.
Reception en milieu de matinée du mail de retour de l'équipe du PSSM avec remarques et changements diverses. Point avec Tony pour voir et faire une liste des ToDo par rapport aux demandes. Réunion prevue mardi matin.
Mise en place de tous les tickets et changement lié au mail. Une bonne 20aine de tickets à faire plus ou moins long. Pile le temps de l'après midi le temps de tout finir.
6ème semaines de stage. Mise en place de toutes la documentation Notion pour le rendu du PSSM Presque terminé tous les blocs custom. Travail long mais interressant.
Fin de la doc sur tous les blocs customs. Debut de la doc sur amelia.
Reprise de la documentation sur Amelia, réunion avec les acteurs PSSM à 13h
Réunion de bilan de premier sprint. J'ai présenté l'outils WP et le site de manière globale et rapide. Tony m'a dit que je ferai surement la formation des utilisateur avant la livraison du site. De nombreux retours sur des fonctionnalités ou des incomprehension des outils. Besoins de modifier certaines choses mais pas de gros beug ou de de grosse modification à faire. Durée de la réunion 2h.
Documentation presque finie, reprise demain matin pour reprendre les points changés après la réunion
Reprise de la documentation, et fin. il restait encore quelques points à verifier et des pages à faire.
Verification de toute la doc car j'avais oublié 1 ou 2 trucs. Changement des photos pour quelques choses de plus jolie. Mise en place d'une page plans parents qui prend des pages plan single en enfant permettant de mettre un lien dynamique en fonction des lieux dans les emails. Création d'un template qui boucle les pages enfants.
Demain mise en page des single
Developpement des pages single pour les plans. Création d'un bloc spécifique pour afficher l'image du plan et avoir un bouton pour la telecharger plus un bouton retour à tous les plans si le lieu n'est pas bon ou que le lien chnage
Call avec Tony pour voir des petits details et regler les derniers points. Reflexion sur le système de plan si pdf et non image. Traduction des termes du plugin pour que les termes soient moins reliés au monde du commerce
Dernière passe sur le site PSSM avant le mail d'envoie de fin de deuxième sprint de dev aux clients. Ajustement de petites choses en css. Finalisation de la doc sur notion avec le système de lieu d'adresse et de page plan.
Fin de la doc notion, relecture et verification du livrable. Call avec Tony pour une idée de dev sur un problème de parallax en tailwind avec un sliderJS. Objectif de clean le fichier de code en enlevant des blocs inutiles pour rendre le fichier plus leger.
7ème semaines de stage. Call avec Tony pour voir les missions du jour. Objectif finir le clean code du fichier PSSM pour enlever toutes les choses en trop (ACF compris). Fini juste avant de partir manger.
Commencement de R et D sur un slider avec des effets de parallax. Utilisant tailwindcss et SwiperJs. Une mission qui va s'avérer longue et fastidieuse
Journée entière sur la conception du Slider, avant midi le code commence a prendre une bonne forme mais ne fonctinne pas encore dans un slider. Reflexion sur la gestion des couches des img du texte et des bg.
Première mise en place propre grace à la decouverte de la synchronisation de plusieurs slider. Problème majeur, le bg n'est pas encore fixed comme la chaussure. Peut être passer à 3 sliders synchro.
Matinée sur le problème du slider avec plein d'essais infructueux. Abandon de l'idée de 3 sliders donc besoin de réesayer de passer que par 2 sliders max.
Après avoir tout essayé, je pense que ce n'est pas faisable avec les technos voulue, du moins si le background doit être un slider aussi. Travail sur la presentation du rapport de stage en fin de journée
Reprise du travail sur la prez du rapport de stage. Mise au point avec Tony sur les attentes clients pour le slider dans l'après midi après un call. Repasse sur le code du slider mais tout effort supplémentaire est vain
Travail sur la prez du rapport de stage, le design est fini c'est maintenant que du contenu. Retour de client pour le slider, ils veulent juste un effet de parallax sur le texte et le reste c'est plutot tranquille. On va trigger une animation au scroll pour gerer le titre.
Reprise de la présenation du rapport de stage. Elle est presque terminée, commencement de la rédaction du rapport de stage pour le faire petit à petit. Reflexion sur la manière de fontionner en js pour trigger les animations du slider.
Fin de la présentation. VF et plus qu'a remplir le rapport de stage. De petites modification à faire sur la presentation car de nouvelles missions vont arriver. Entretien de fin de stage avec Damien. Conclusion super positive et proposition d'alternance avec un commencement debut juillet, le plus tot possible officiellement et en atttendant me prendre sur des missions en free.
Dernière tentative sur la gestion du swiper avec du js vanilla pour pouvoir gerer un scroll plus lent pour le titre et la basket. La besket doit monter plus vite que le titre mais les deux doivent être plus lent que le scroll normal de la page pour creer un effet de parallax. J'ai fini par gerer le scroll en utilisant le ScrollY comme element de translateY pour mes deux div.
//Select scrollY value
let scrollPos = window.scrollY
//Select class for basket and title
let basket = document.querySelectorAll(".basket");
let title = document.querySelectorAll(".title");
//Listen to scroll
window.addEventListener('scroll', function () {
//Get scroll position
scrollPos = window.scrollY;
//Detect when user scroll
if (scrollPos >= 0) {
//Loop thru all elements by class
for (let i = 0; i < basket.length && i < title.length; i++) {
//TranslateY based on scrollY value
basket[i].style.transform = `translateY(-${scrollPos * 0.5}px)`
title[i].style.transform = `translateY(-${scrollPos * 0.3}px)`
//Multiply scrollY position by less to slowdown scroll mouvement, lower = slower
}
}
})
Voila le script final, plutôt court et optimisé pour un effet top et efficace. Le resultat obtenu est propre et parfait ! ENFIN
Nouvelle mission d'intégration et de code de blocs WP pour un site en collaboration avec la region nouvelle aquitaine. Brief avec Tony sur le rendu attendu, une intégration qui se doit comme toujours pixel perfect avec cette fois par chance un maquette desktop et responsive. Deux blocs et demi fait dans l'après midi le temps de tout mettre en place. Découverte de wplocal un petit logiciel permettant de ne pas passer par XAAMP pour faire du wordpress en local. Superne decouverte.
Reprise du code des blocs pour la region, travail en équipe avec Nicolas. Mise au point le matin sur les bonnes pratiques et les conventions à utiliser pour ne pas avoir d'erreur à l'import des blocs. Mise en place du git pour le transfert des blocs une fois terminé.
Fin de details et des premiers blocs de manière bien propre. Essayer de faire le code le plus optimisé et le plus clean possible
Reprise des blocs. Les blocs avancent vite, on est deux avec Nicolas dessus et Tony s'occupe des tâches un peu plus dures. Prise de 2 blocs avec des cards qui se transforment en slider au responsive (le début des problèmes).
Prise de tête sur le slider responsive. Pourtant apres la R&D sur swiper il n'a plus de secret pour moi mais j'ai l'impression que l'intégration n'est pas bonne dans le boilerplate. Il y a des comportements illogique. Mise en place d'une version desktop pour pas perdre de temps et commencement d'un autre bloc pour gagner du temps comme demain je suis au bureau. Découverte de la propriété tailwind columns-1 columns-2 qui permet de faire des colonnes automatique et facilement responsive sans se prendre la tête. Surement réutilisable dans des galeries de photos.
Objectif de la journée, envoyer tous les blocs sur git avec la bonne forme et finir cette histoire de swiper au responsive. Décomposition de tous les blocs pour les ranger dans des dossiers. Travail un peu long donc à faire au fur et à mesure des blocs pour les prochains. Début de solution pour les swipers, je crois avoir trouver le problème.
Découverte d'un beug avec google chrome qui vient forcer un darkmode deguelasse sur tous les sites si l'os w11 est en mode sombre. Pas forcement cool mais decouverte de Mozilla Dev pour ne plus utiliser Chrome que j'utilisais par defaut avant. Debloquage sur le swiper, la délivrance ultime. Fin du bloc des cartes et commencement du deuxiéme bloc identique. Finalement tout gerer avec swiper pas de systme de display none au responsive. Petite reussite qui fait plaisir en cet avant dernier jour de stage.
Objectif, finir les tickets pris en debut de semaine pour ne pas laisser de taches en cours, travail sur les cartes avec slider au responsive et point avec tony sur des details de tickets deja terminé.
Fin des tickets en fin d'après midi et git des blocs puis ensuite intégration dans le git du thème, un peu long car theme vide donc création des dossiers json et verification du fonctionnement
FIN DU STAGE