Salut ! Moi c’est Ludal 👋

Je suis Ă©tudiant en Master 2 Cloud Computing Ă  l’UniversitĂ© de Lille, en alternance chez Leroy Merlin en tant qu’ingĂ©nieur DevOps. Sur ce blog, je parle majoritairement de ce qui me passionne, Ă  savoir le cloud computing, l’automatisation et la cybersĂ©curitĂ©. Il peut aussi m’arriver de parler d’autres sujets qui m’intĂ©ressent, comme la programmation et les crypto-monnaies. 😁

Automatisez vos montées de versions grùce à Semantic Release

Votre application utilise la convention SemVer pour ses numĂ©ros de versions (X.Y.Z) ? Si oui, j’ai une bonne nouvelle pour vous : il est possible d’automatiser les Ă©tapes lancĂ©es lors de vos montĂ©es de versions. Si vous n’utilisez pas SemVer, tant mieux ! Dans cet article, vous dĂ©couvrirez une convention claire et simple Ă  mettre en place pour versionner vos releases. Elle permet aux utilisateurs de votre application ou de votre librairie de dĂ©terminer les types de changements effectuĂ©s entre deux releases uniquement Ă  partir du numĂ©ro de version....

 Â· 13 min

ASDF : gestion automatique des versions de vos outils

Vous ĂȘtes-vous dĂ©jĂ  retrouvĂ©s dans cette situation oĂč vous travaillez sur plusieurs projets utilisant des versions diffĂ©rentes de Java, NodeJS ou Postgres ? Dans cet article, nous allons dĂ©couvrir comment changer automatiquement de version en fonction du dossier courant (et donc du projet). 📁 Mise en Situation En tant que dĂ©veloppeur (Freelance ou non), il vous est peut-ĂȘtre dĂ©jĂ  arrivĂ© de travailler sur plusieurs projets Ă  la fois pour diffĂ©rents clients, et vous avez probablement rencontrĂ© ce cas de figure : le projet A utilise Java 8, le projet B utilise Java 11, et le projet C utilise Java 17....

 Â· DerniĂšre modification :  Â· 6 min

React hooks personnalisés : useInView

PrĂ©cĂ©demment, nous avons implĂ©mentĂ© le Hook useAudio pour simplifier la gestion des fichiers audio. Aujourd’hui, on implĂ©mente un Hook qui suit la visibilitĂ© de nos composants Ă  l’écran : useInView. Motivation Tout d’abord, penchons-nous sur un cas concret afin de motiver l’implĂ©mentation de notre Hook. L’exemple le plus Ă©vident est celui des scroll infinis, comme votre fil Facebook ou Instagram. Comme vous le savez peut-ĂȘtre, ces applications ne chargent pas votre fil dans son entiĂšretĂ© (si c’était le cas, l’arbre DOM contiendrait des centaines, voire des milliers d’élĂ©ments, ce qui dĂ©graderait considĂ©rablement leurs performances)....

 Â· DerniĂšre modification :  Â· 8 min

React hooks personnalisés : useAudio

AprĂšs avoir dĂ©couvert le Hook useNetworkState our simplifier la gestion de l’état du rĂ©seau de l’utilisateur, implĂ©mentons un nouveau Hook personnalisé : useAudio. Vous ĂȘtes prĂȘts ? C’est parti. 😎 Motivation Tout d’abord, pourquoi aurions-nous besoin de ce Hook ? Je vais vous donner deux exemples. Le premier est celui de mon site web personnel, iamludal.fr (non, ce n’est pas de l’autopromotion 🙄), dĂ©veloppĂ© en React, et dont la barre de navigation contient un bouton permettant de changer de thĂšme (clair ou sombre)....

 Â· DerniĂšre modification :  Â· 4 min

Ajouter un README à une organisation GitHub : c'est possible !

Vous savez peut-ĂȘtre dĂ©jĂ  comment ajouter un README Ă  votre profil GitHub (si ce n’est pas le cas, je vous invite Ă  jeter un Ɠil Ă  cet article), mais saviez-vous qu’il est Ă©galement possible d’en ajouter un au profil d’une organisation ?Â đŸ€” Pour ce faire, rendez-vous simplement sur l’organisation que vous souhaitez personnaliser et crĂ©ez un nouveau dĂ©pĂŽt, que vous nommerez .github. Comme vous pouvez le constater, GitHub nous informe que l’on a dĂ©couvert un dĂ©pĂŽt spĂ©cial (une fois de plus 😛)....

 Â· DerniĂšre modification :  Â· 1 min

React hooks personnalisés : useNetworkState

AprĂšs avoir implĂ©mentĂ© le Hook useLocalStorage pour faciliter la gestion du stockage local, implĂ©mentons le Hook useNetworkState pour connaĂźtre l’état du rĂ©seau de l’utilisateur (savoir s’il est connectĂ© Ă  internet ou non). Motivation Supposons que nous soyons en train de dĂ©velopper une application qui nĂ©cessite d’ĂȘtre connectĂ© Ă  internet en permanence pour fonctionner convenablement. Si l’utilisateur se retrouve dĂ©connectĂ©, un message doit ĂȘtre affichĂ©, lui informant de vĂ©rifier sa connectivitĂ©. Pour ce faire, dans une application React, voici comment nous pourrions procĂ©der....

 Â· DerniĂšre modification :  Â· 4 min

React hooks personnalisés : useLocalStorage

AprĂšs avoir implĂ©mentĂ© le Hook useArray pour faciliter la gestion des tableaux, intĂ©ressons-nous maintenant au Hook useLocalStorage pour simplifier la gestion du stockage local. Motivation Voyons d’abord pourquoi nous voudrions implĂ©menter ce Hook. Imaginons que nous soyons en train de dĂ©velopper une application disposant d’une page de configuration (thĂšme, langue, notifications). Pour sauvegarder la configuration de l’utilisateur, nous utiliserions probablement un objet qui pourrait ressembler Ă  ceci : const config = { theme: 'dark', lang: 'fr', notifications: true } Sur la page de configuration, l’interface devra ĂȘtre synchronisĂ©e avec l’objet stockĂ© dans le stockage local....

 Â· DerniĂšre modification :  Â· 5 min

React hooks personnalisés : useArray

Nouvelle semaine, nouveau Hook Ă  ajouter Ă  notre collection. Dans cet Ă©pisode, nous allons implĂ©menter le Hook useArray pour simplifier la manipulation des tableaux en React. Vous ĂȘtes prĂȘts ? C’est parti ! 😎 Motivation Comme Ă  notre habitude, commençons par dĂ©couvrir comment ce Hook pourra nous ĂȘtre utile. Pour cela, soyons originaux et prenons l’exemple d’une application To-Do list en React. Nous aurons besoin de gĂ©rer les tĂąches que l’utilisateur va ajouter et supprimer....

 Â· DerniĂšre modification :  Â· 4 min

React hooks personnalisés : useCounter

Dans le dernier Ă©pisode de la sĂ©rie sur les Hooks personnalisĂ©s, nous avons implĂ©mentĂ© le Hook useBoolean. Aujourd’hui, nous allons en crĂ©er un tout aussi simple et efficace : useCounter. Comme son nom l’indique, il va nous faciliter la manipulation de l’état d’un compteur. Vous ĂȘtes prĂȘts ? Allons-y. 🚀 Motivation Comme toujours, voyons d’abord pourquoi nous voudrions implĂ©menter ce Hook. Imaginons que nous dĂ©veloppons un site web d’e-commerce. Lorsqu’un client souhaite acheter un produit sur notre site, il doit Ă©galement pouvoir sĂ©lectionner la quantitĂ©....

 Â· DerniĂšre modification :  Â· 4 min

React hooks personnalisés : useBoolean

ArrivĂ©s avec React 16.8, les Hooks permettent de bĂ©nĂ©ficier d’un Ă©tat local et d’autres fonctionnalitĂ©s sans avoir Ă  passer par une classe. Ils nous donnent entre autres la possibilitĂ© de se brancher aux cycles de vie de nos composants, comme nous le faisions Ă  l’aide des mĂ©thodes componentDidMount ou componentWillUnmount. Dans cette sĂ©rie d’articles, nous allons dĂ©couvrir comment implĂ©menter nos propres Hooks personnalisĂ©s Ă  partir des Hooks primitifs fournis par React....

 Â· DerniĂšre modification :  Â· 4 min