Créer un bouton avec un effet 'pressé' au survol
En tant que développeur web, aussi étonnant que cela puisse paraitre, ça m’arrive de naviguer sur internet (je vous jure !). J’en vois …
Lire l'articleLe titre de cet article peut sembler un peu aguicheur… Mais il n’en demeure pas pour autant faux. Aujourd’hui, je souhaite partager avec vous une de mes expériences qui m’a permis d’apprendre les bases du framework PHP Symfony en quelques semaines seulement sachant que je n’avais encore jamais eu d’expérience avec ce dernier auparavant.
Je tiens à préciser que je ne fais que de raconter une de mes expériences, ce n’est donc pas quelque chose d’absolu à reproduire à la lettre. Si je vous partage ceci, c’est que j’estime que certaines informations peuvent vous être utiles ou des moins intéressantes à lire et à comprendre.
Nous sommes en décembre 2021, je suis alors encore en première année de bachelor. La directrice de mon école vient voir notre promotion pour nous présenter un outil très pratique : LinkedIn qui s’avère être un réseau social pour les professionnels.
Elle nous présente cet outil pour que l’on essaye de se monter un réseau “pro”, car nous devions tous trouver un stage pour le mois de mai 2022.
Au départ, je dois avouer que j’étais un peu sceptique sur l’utilité de ce réseau social, mais je décide tout de même de me prêter à l’exercice. Exercice que je répétais tout de même chaque jour, et ce pendant plusieurs semaines. Comme j’avais fait pas mal d’autodidactes avant de rejoindre mon école, j’avais déjà en ma possession un lot de petits projets que je pouvais présenter aux yeux de tous.
Je poste alors sites internet, applications, maquettes, expériences effectuées sous la suite adobe, etc.
Et un beau jour, je reçois un message sur LinkedIn :
Quand j’ai vu ce message, je dois dire que j’étais étonné. Cela ne faisait que quelques semaines que j’étais sur le réseau, je n’avais pas encore posté de CV ou encore de message annonçant que je recherchais un stage, que quelqu’un s’intéressait déjà à mon profil.
Je réponds donc à ce message, en annonçant que je recherchais bel et bien un stage pour mai 2022.
Suite à ça, on a gardé contact, puis quelques jours plus tard, on m’a donné une date pour passer un entretien dans les locaux de l’entreprise.
Peu de temps après l’entretien, on me propose un stage d’une durée de 14 semaines. (Du 16 mai au 26 août 2022)
En parallèle, je recevais d’autres messages et propositions venant d’autres entreprises avec lesquelles j’ai passé d’autres entretiens. Je ne détaille pas ces passages, du fait que la proposition que j’ai décidé d’accepter est celle d’Iteracode et que la suite de cet article est en basé sur ce stage.
On y est, le 16 mai 2022 : premier jour de stage !
Ce premier jour a été dédié à la présentation de l’entreprise, de l’équipe et à la mise en place de mon poste de travail. Pour la totalité du stage, on m’a fourni un ordinateur et assigné à un bureau. On m’a expliqué les différents outils et logiciels qu’ils utilisent et l’on m’a connecté au groupe GitLab pour que je puisse travailler.
C’est à partir du deuxième jour que les choses sérieuses commencent ! Ma première réunion, mon premier projet. On m’assigne un projet interne nommé “Mailtrain”, on m’explique ce dont il retourne et les technologies à utiliser pour le réaliser.
Dans le lot on a :
Et là c’est un peu la panique à bord… Bon, j’exagère un peu la chose, mais je n’étais pas très serein sur la manière d’aborder le projet étant donné que je n’avais jamais utilisé Docker et Symfony.
On m’explique juste après la présentation du projet, que si j’avais besoin d’aide il ne fallait pas hésiter à demander à l’équipe et qu’ils pourraient prendre un peu de temps pour m’expliquer certaines choses.
Le projet a pour nom Mailtrain, le but est de créer une application répondant à une problématique précise : “Comment s’assurer que les apprenants ont bien compris ce qu’ils ont appris durant leur formation ?”.
La réponse à tout ceci est de passer par de petits questionnaires personnalisés par les différentes structures de formations. Ces derniers sont envoyés par mail chaque matin à 8h aux apprenants, et ce, après leur formation.
Ces questionnaires sont réservés uniquement aux apprenants inscrits. Ils ne peuvent répondre qu’une seule fois.
Les structures de formations ont à leur disposition un panel d’administration, dans lequel ils peuvent créer de nouvelles campagnes de mails, inscrire de nouveaux participants, voir le suivi en globalité et de manière individuelle.
Je suis le seul développeur à travailler sur ce projet, je ne dispose pas d’échéance à proprement parler mis à part la date de fin de stage.
C’est maintenant l’heure de se mettre au boulot !
Pour commencer, j’ai décidé de m’intéresser à ce qu’était Docker et comment il fonctionne. Je commence donc à aller voir divers tutoriels sur internet, YouTube, Udemy, etc. pour me rendre compte que ce n’était vraiment pas du tout la bonne manière d’aborder les choses.
Je m’explique : Quand on débute sur tel ou tel sujet, la première chose qu’on se met en tête généralement c’est d’aller se former sur cedit sujet et d’ensuite appliquer ses connaissances sur des choses concrètes. Par peur de ne pas savoir résoudre le problème, on veut s’assurer de connaitre le sujet en long et en large avant de même aller voir ce fameux problème.
Selon moi, c’est une perte de temps. Pour le commun des mortels, apprendre une telle masse d’information en un temps aussi court est contreproductif étant donné qu’on ne va même pas en retenir le quart (et encore, le quart serait déjà une belle victoire).
J’ai donc perdu une journée entière pour pas grand-chose en réalité…
Dès le lendemain, je décide d’aller directement dans le concret, même si je n’ai aucune connaissance ce n’est pas grave, je me dis que dans le pire des cas la seule chose qui peut arriver c’est que le projet ne fonctionne pas. C’est tout, ça peut paraitre un peu enfantin de dire les choses de cette façon, mais c’est vrai, il faut savoir dédramatiser la chose. Et en plus, j’ai la chance d’avoir une équipe qui peut m’aider à tout moment si vraiment je n’y arrive pas.
J’y suis allé à tâtons, je me suis cassé les dents sur certaines choses plus complexes que d’autres, mais au final j’ai réussi ! Je n’ai peut-être pas le meilleur des codes, ce n’est peut-être pas très optimisé c’est vrai, mais ça fonctionne ! Il y a quelques heures à peine, je ne savais pas faire ce que j’ai fait. Et rien ne m’empêche de venir améliorer ce code par la suite quand j’aurai acquis plus d’expérience. D’ailleurs, c’est ce que j’ai fini par faire quelques jours après ! En discutant avec un membre de l’équipe, on a trouvé des pistes d’amélioration que j’ai appliquées.
Tout ça n’était que le début, j’avais juste mis en place la structure pouvant accueillir le projet. Mais le projet en lui-même n’était même pas encore commencé !
Les choses sérieuses commencent !
Je ne perds pas de temps, je me lance directement sur la première initialisation de projet avec ce framework. Accompagné de la documentation officielle et de la CLI (Interface par ligne de commande) de Symfony, j’arrive à faire fonctionner la page de démarrage en quelques minutes. Petite victoire, mais une victoire quand même !
Arrivé à la fin de cette étape, je ne savais pas trop où donner de la tête…
Mais ça n’a pas duré très longtemps, car Iteracode utilise la méthode agile pour concevoir des projets. Avant d’arriver chez eux, je n’avais jamais entendu parlé de cette méthode et de quoi elle en retourne.
Pour faire simple, cette méthode consiste à mettre les besoins du client au premier plan et de les répartir en plusieurs objectifs. Une fois ces objectifs identifiés, on va venir redécouper l’objectif en cours en plusieurs petites fonctionnalités simple à comprendre à la fois pour le client comme pour le développeur.
Par exemple, l’objectif peut-être : “L’application doit pouvoir faire un suivit de la progression des différents utilisateurs par mail”.
En termes de fonctionnalité, on pourrait avoir :
À l’aide de cette manière de procéder, je n’ai qu’à suivre les différentes petites fonctionnalités qui, une fois toutes développées, formeront l’objectif final.
Ce que je trouve génial avec cette manière de voir les choses, c’est que l’apprentissage est beaucoup plus simple et rapide, ce que je veux dire c’est que l’on sait exactement quoi rechercher comme information pour arriver à notre but.
Si la fonctionnalité est de créer un formulaire d’inscription, je comprends rapidement qu’il faut que j’aille voir comment Symfony gère les utilisateurs ainsi que comment créer un formulaire.
Puis de fil en aiguille, on comprend comment envoyer nos informations présentes sur le formulaire à une base de données pour ainsi créer notre utilisateur.
J’ai donc répété ceci durant l’intégralité du projet. Je voyais chaque nouvelle petite fonctionnalité comme un challenge à réaliser. Très sincèrement je n’ai pas passé une seule journée sans rien apprendre de nouveau.
Et même si la fonctionnalité contient des éléments que l’on connait déjà, c’est plus instructif et challengeant à essayer de les concevoir d’une autre façon, avec d’autres outils, etc.
Je ne vais pas vous détailler chaque chose que j’ai appris durant la réalisation de ce projet qui m’a pris 7 semaines à temps complet à réaliser. Car pour commencer, ce serait trop long et ensuite ça n’aurait tout simplement aucun intérêt. J’ai appris de solides bases tout en passant quelque coup d’œil sur diverses choses plus complexes que j’approfondis encore aujourd’hui.
Avant d’aller plus loin, j’aimerais faire un point sur ce qu’est la Refactorisation et pourquoi c’est une pratique pouvant nous aider à apprendre.
Pour faire simple, la Refactorisation c’est le fait de revenir sur un morceau de code ou sur un programme complet afin de l’améliorer et/ou de l’optimiser.
Le fait d’apprendre en pratiquant dès le départ en n’ayant jamais touché à ladite technologie auparavant fait que la qualité du code retourné n’est pas fiable sur une longue durée.
Le code que l’on a écrit peut fonctionner, mais ce n’est pas pour autant qu’il ne faut pas le remettre en question un moment ou un autre.
Au fur et à mesure de l’avancement de vos premiers projets, vous allez gagner en expérience rapidement, vous allez découvrir de nouvelles façons de faire les choses de manière plus concise, lisible et fiable.
Ces nouvelles connaissances vont vous pousser à développer des choses plus complexes, qui ne seront peut-être pas voire pas du tout en accord avec les premières lignes de code présentes sur le projet. Ce qui peut créer des bugs, entrainer un manque de visibilité et réduire les performances du projet.
Pour éviter tous ces problèmes, la bonne pratique à avoir est de venir refactoriser les anciennes fonctionnalités régulièrement.
Quand est-ce que l’on doit appliquer ceci me diriez vous ? La seule réponse que je peux vous donner c’est : le plus tôt possible.
Pour ma part, après chaque objectif réalisé, je faisais un tour sur mon code, pour m’assurer qu’il n’y ait pas de code mort (morceaux de code qui n’est plus utilisé) ou bien si mon code était bien lisible et compréhensible.
Il faut savoir également qu’après le développement d’une fonctionnalité, on l’envoie à un Lead Developper qui va venir analyser notre code et nous faire différents retours. Puis pour que notre code soit accepté, il nous faut corriger ces retours.
Le fait de faire ça nous pousse à aller faire des recherches plus profondes sur ce dont les choses fonctionnent réellement sous le capot. Ces choses que l’on ne pense pas forcément lors du développement de la fonctionnalité.
On va beaucoup plus loin sur notre approche. Le fait d’utiliser une fonction, car elle fait ce que je lui demande n’est plus suffisant. En regardant comment elle fonctionne sous le capot, on se rend compte que ce n’est pas forcément la meilleure manière de réaliser ce que l’on souhaite et que d’autres fonctions peuvent être plus judicieuses à utiliser.
Pour tout avouer, le projet “fonctionnel” m’a pris 6 semaines en tout à réaliser. L’application était parfaitement utilisable, toutes les fonctionnalités demandées étaient présentes, mais quelque chose manquait…
Vous vous souvenez que je devais utiliser Bootstrap pour ce projet ? Ça m’était imposé pour éviter de passer trop de temps sur le style de l’application. L’objectif était de réaliser un prototype fonctionnel.
Ayant beaucoup plus de connaissances dans le développement Front, j’ai proposé une refonte complète de l’application en termes d’UX et d’UI. Ce qui a été accepté ! 🎉
J’ai donc passé une semaine complète à réaliser un logo pour l’application, une maquette graphique et à l’intégrer.
Pour l’intégration j’étais très heureux de dire au revoir à Bootstrap. (Bye bye Boostrap 👋)
Mais une autre contrainte m’a été imposée : le fait d’utiliser un framework CSS.
Pourquoi ? Parce que si un jour un autre développeur doit revenir sur l’application et qu’il ne dispose pas de connaissances en CSS (ou SASS dans mon cas) aussi poussé, ça pourrait compliquer très lourdement la tâche.
J’ai donc opté pour TailwindCSS qui est un framework CSS qui fonctionne avec des classes utilitaires plutôt qu’avec des composants comme Bootstrap.
Pour faire simple, le fait d’utiliser des classes utilitaires offre une customisation plus large étant donné que l’on définit notre style à notre façon. Alors que les composants sont fixes et n’offrent presque pas / voir pas du tout de personnalisation pour certains frameworks CSS.
Avant de publier cet article, j’ai bien sûr demandé l’autorisation à Iteracode pour la diffusion de ces images.
Voici le logo type que j’ai désigné avec les différentes explications :
Voici quelques captures d’écran de certaines pages :
Je vous ai résumé ici que mes 7 premières semaines de stage, j’ai en passé en réalité 14 sur des projets un peu plus confidentiels cette fois-ci.
J’ai appris énormément de choses durant cette période de stage, j’ai fait de formidables rencontres avec les personnes de l’entreprise qui ont été toutes bienveillantes et aidé tout le long. Un très grand merci à eux pour tout ça ! 😁
La chose que je retiens le plus de toute cette expérience, c’est le fait de préserver, il ne faut jamais baisser les bras, prendre le temps de bien comprendre les choses et de les appliquer aussitôt.
Après ces 14 semaines de stage, on est venu me proposer un contrat en CDI que j’ai accepté. Les personnes qui m’ont aidé et m’ont fait confiance sont aujourd’hui mes collègues de travail et je suis très heureux de cette situation. 🥰
L’ambiance est très sympa et je sais que je vais continuer d’apprendre beaucoup de nouvelles choses.
En tant que développeur web, aussi étonnant que cela puisse paraitre, ça m’arrive de naviguer sur internet (je vous jure !). J’en vois …
Lire l'articleVous souhaitez afficher vos photos de manières originales sur votre site internet ? Voyons ensemble comment réaliser cet effet polaroid entièrement en …
Lire l'article