DEV Community: Vincent

Votre ordinateur vous empêche de respirer

Vincent — Fri, 27 Sep 2024 14:45:29 +0000

Vous êtes apnéiste mais vous ne le savez peut-être pas !

Dans son livre “Respirer : Le pouvoir extraordinaire de la respiration”, James Nestor explique que la plupart des personnes consultant des mails souffrent d’un blocage de la respiration.

En 2007, Linda Stone observe ce phénomène qu’elle qualifiera “d’apnée de l’écran”.

Il semblerait que cette apnée de l’écran soit due à l’interprétation des messages comme source de danger par notre cerveau. Pour faire simple, c’est le caractère imprévisible et inconnu de toutes les notifications provenant de mail, sms, ou autres messages qui provoque un stress et donc un arrêt temporaire de la respiration.

Bloquer sa respiration une ou deux fois au cours de la journée n’est pas un drame. Les problèmes surviennent quand cela devient chronique et que vous accumulez de longues minutes par jour à ne pas respirer correctement.

Tout comme l’apnée du sommeil, l’apnée de l’écran est un blocage inconscient de la respiration. Ce blocage peut provoquer de nombreux problèmes comme une forte sensation de fatigue.

Si vous vous sentez complètement épuisé à l’issue de votre journée, c’est probablement que sans le savoir, vous êtes un adhérent de la Fédération Française d’Apnée.

Mais pas de panique, pour ne plus être sujet à l’apnée de l’écran, il suffit juste d’en être conscient et de reprendre le contrôle sur sa respiration, merci Vincent !

Si vous voulez en savoir plus sur le mécanisme de la respiration et comment ne plus être sujet à l’apnée de l’écran, je vous conseille vivement de lire ce livre. Il propose une revue du savoir autour de la respiration qu’il soit scientifique, empirique ou spirituel.

Laissez-moi vous donner un conseil, la prochaine fois que vous ouvrez vos mails, n’oubliez pas de respirer !

Alors, aviez-vous conscience que vous pratiquiez l’apnée de l’écran ?

Double Slash : le podcast tech

Vincent — Wed, 25 Sep 2024 07:02:01 +0000

Si vous cherchez une chaîne youtube / podcast vous permettant de faire de la veille sur les technologies web, j’ai ce qu’il vous faut !

En tant que développeur, faire de la veille c’est vital. Vous ne voulez pas être comme ce tonton qui sort des expression d’un autre temps et qui ne comprend pas les “d’jeuns”.

Double Slash, c’est une chaine youtube / podcast animé par Patrick Faramaz et Alex Duval qui propose deux formats :

Une revue mensuel des nouveautés et des évolutions de l’écosystème web.
Des workshops abordant des sujets précis en profondeur.

Le podcast compte près de 100 épisodes, si vous voulez tous les rattraper, il va falloir s’y mettre vite !

J’affectionne particulièrement ce podcast pour plusieurs raisons :

Le format veille d’une heure par mois est une mine condensées d’informations.
Je suis exposé à des langages / outils que je ne connais pas ce qui augmente ma culture web.
Le format workshop permet d’appréhender des notions avancées avec une simplicité déconcertante.
Les animateurs donnent des tips / retours d’expérience sur les technos qu’ils utilisent.

Tous les mois, je passe 2h de course à pied avec Patrick et Alex dans les oreilles. Je me marre, j’apprends et tout ça sans le moindre effort ! (Ou presque, ça dépend si c’est un fractionné ou un footing).

Ce podcast est l’un de mes supports de veille. Et vous, comment effectuez-vous votre veille ?

Dites-moi si vous connaissez déjà Double Slash et si vous avez des suggestion de contenu.

Bonne veille à tous !

Des sentiers au clavier : comment la course à pied m’a permis d’être un meilleur développeur ?

Vincent — Fri, 20 Sep 2024 12:14:52 +0000

Je suis actuellement en préparation pour le marathon de Nice. Lors de ma dernière séance de course à pied, je me suis fait la réflexion suivante : "en fait, courir ça fait de moi un meilleur développeur".

Ça paraît fou non ? On n'a pas besoin de ses jambes pour coder !

Laissez-moi vous expliquer ce que le sport m'apporte dans mon quotidien de développeur.

Améliorer son hygiène de vie

Dans l'imaginaire collectif, un développeur c'est un geek à lunettes passant son temps devant un écran et mangeant des pizzas avec un coca à la main.

En effet, il est facile en tant que développeur de passer toute sa journée assis devant son écran. On est absorbé par son problème et on oublie la notion du temps. Les conséquences sont qu'on ne prend pas de pause, on ne bouge pas de son siège, on s'hydrate à peine et on ne s'alimente pas comme il faut.

En tant que sportif, l'hygiène de vie est très importante, car c'est l'un des principaux piliers de la performance.

Voici les trois règles de base d'une bonne hygiène de vie :

Dormir suffisamment
Manger sainement
S'hydrater

Quand on y pense, si ces choses sont bonnes pour le corps et la performance sportive, c'est aussi bon pour le cerveau. Donner un carburant de qualité et fournir le repos nécessaire à notre corps nous permet une utilisation optimale de notre cerveau !

Pratiquer la course à pied contribue à structurer ma vie autour de ces trois règles. Elles me permettent de me sentir en pleine possession de mes fonctions cérébrales. J'ai une meilleure concentration, plus d'inspiration et une meilleure capacité de raisonnement pour résoudre les problèmes qui se dressent sur mon chemin.

Cultiver la confiance en soi

Enfiler ses baskets et courir, peu importe le temps, l'heure ou la motivation et faire ce qui doit être fait, procure une sensation unique de fierté. Ces petits accomplissements quotidiens contribuent à alimenter la confiance que j'ai en moi-même.

Je suis convaincu que la confiance en soi est un facteur important de la réussite. C'est plus compliqué de réussir lorsqu'on est convaincu qu'on n'est pas capable ou digne d'entreprendre une action.

Quand je vois d'où je suis parti et où j'en suis aujourd'hui, je me dis que rien n'est impossible. Le sport m'a apporté ce sentiment précieux que j'utilise dans tous les autres domaines de ma vie, particulièrement dans mon activité de développeur.

Le développement d'une application est jalonné d'une succession de challenges. Avoir confiance en sa capacité à résoudre les problèmes est une condition nécessaire pour délivrer un service de qualité.

La confiance en soi permet d'aborder les défis avec beaucoup de sérénité et d'optimisme, ce qui aide à ne pas rester paralysé devant l'obstacle.

Améliorer la gestion des émotions

En tant que développeur, il existe de nombreuses sources d'émotions négatives. Tous les développeurs peuvent se rappeler d'un jour de frustration intense dû à un bug coriace. Il est facile de s'acharner et de finir mentalement épuisé par toutes ces émotions.

Personnellement j'ai trois façons d'évacuer les émotions négatives qui parasitent ma réflexion :

Courir et faire le grand vide dans sa tête
Prendre une douche, c'est connu, les meilleures idées viennent sous la douche
Dormir car la nuit porte conseil

Comme vous l'imaginez peut-être, ma méthode favorite, c'est la course à pied. Courir permet de me libérer de toutes les émotions négatives telles que la frustration et le stress.

Lorsque je reviens devant mon clavier, je suis détendu, mes idées sont de nouveau en ordre et je peux attaquer le problème sous un nouvel angle.

Ça offre du temps

Je cours actuellement 5 heures par semaine. Pour beaucoup de personnes, courir c'est chronophage et ennuyant. Permettez-moi de vous donner la formule magique. Je mets à profit ces quelques heures de course à pied pour écouter des podcasts.

Ce temps passé à écouter des podcasts me permet de me former sur des sujets tels que le développement, le marketing, l'entrepreneuriat, la nutrition et le sport.

Ainsi, toutes les semaines, j'ai l'équivalent d'une demi-journée (5 heures) dédiée à ma formation de façon automatique et tout ça sans le moindre effort pour devoir libérer du temps. C'est devenu un rituel et je vois une véritable différence.

Améliorer son organisation

Effectuer 6 séances de sport dans une semaine ne s'improvise pas. Cela demande un minimum d'organisation pour placer les séances et les temps de récupération au bon moment.

En tant que développeur, c'est pareil. L'organisation permet de structurer ses journées de travail afin de délivrer un maximum de valeur.

Personnellement, je concentre mes tâches demandant le plus de concentration le matin car c'est le moment où je suis le plus apte à résoudre ces problèmes. Je connais également les heures sur lesquelles je peux travailler et être productif et les heures sur lesquelles j'organise des réunions ou je m'occupe de tâches qui demandent moins de concentration.

L'organisation c'est faire les bonnes choses au bon moment, car l'objectif n'est pas de travailler longtemps mais plutôt d'être efficace.

Être Persévérant

Je me souviens du jour où j'ai commencé la course à pied. Je me souviens de cette séance de 20 minutes, de mes poumons en feu, de mes muscles complètement tétanisés. J'ai fini cette première séance dans le rouge complet. Je me souviens m'être dit "mais pourquoi les gens s'infligent cette souffrance".

En ne lâchant rien et en ayant une pratique progressive et régulière, je suis capable aujourd'hui de courir un marathon, de faire des séances de 2h sans me fatiguer, sans cracher mes poumons.

Tout ça a été possible grâce à la persévérance dont j'ai fait preuve. Ne pas abandonner et développer des routines est l'une des clés de toutes les grandes réussites.

En développement, combien de side projects sont tombés dans les oubliettes par manque de persévérance ? Avoir la capacité de pousser ses idées jusqu'au bout est une capacité essentielle pour la réussite d'un projet.

Cette persévérance me permet de ne jamais abandonner, et de trouver des solutions pour atteindre mes objectifs.

Conclusion

Le sport a transformé ma vie en m'apportant une stabilité et une confiance en moi qui me sont très précieuses.

Le sport me permet d'effectuer un transfert de compétences dans les différents domaines de ma vie. Ainsi, tous ces apprentissages me permettent d'être plus efficace et d'être un peu meilleur chaque jour.

Merci pour votre lecture !

Le Mob Programming : Une Approche Collaborative pour Booster votre Équipe de Développement 🚀

Vincent — Mon, 16 Sep 2024 12:02:30 +0000

J’ai toujours aimé travailler en équipe. J’y prends beaucoup de plaisir et j’aime le lot de challenge que cela implique.

Il y a trois ans, j’entendais pour la première fois le mot “mob programming”. Ce gros mot intimidant qui semble provenir tout droit d’un film d’extra-terrestres.

En réalité, cette pratique n’a rien d’extra-terrestre. C’est tout le contraire même, le mob programming est centré sur les humains.

Piqué par la curiosité, je me suis lancé dans la compréhension et dans l’expérimentation de cette pratique qui ne fait pas l’unanimité parmi les développeurs.

Je vous propose dans cet article ma vision du mob programming. Je vous donnerai quelques conseils et les pièges à éviter pour pouvoir obtenir les bénéfices de cette pratique !

Qu’est-ce que le mob programming ?

Commençons par une définition simple. Le mob programming, c’est un groupe de personnes travaillant dans la même pièce, sur un même ordinateur, sur un même sujet.

Comment organiser une session de mob programming ?

Organiser une session de mob programming, ce n’est vraiment pas difficile, voici ce qu’il vous faut :

deux personnes volontaires ou plus,
une chaise confortable par personne
un seul clavier
au moins un écran

Voilà le tour est joué, vous avez votre configuration minimale pour mener à bien votre première session de mob, mais laissez-moi vous donner quelques conseils supplémentaires pour rendre l’expérience encore plus agréable.

Conseil n°1

Trouvez un écran assez grand pour que tout le monde puisse voir correctement le code. Il est désagréable de devoir plisser les yeux ou se tordre la nuque pour apercevoir le code.

Conseil n°2

Ajouter un tableau blanc et des post-it pour faciliter les échanges et les moments de réflexion collectifs.

Conseil n°3

Trouvez une salle calme dans laquelle les membres peuvent s’exprimer au volume sonore souhaité sans déranger leurs collègues. Il n’y a rien de pire que de surenchérir sur le volume sonore dans un open space et finir la journée avec une migraine.

Conseil n°4

Trouvez un endroit où chacun peut se déplacer librement et se sentir à l’aise.

Le but vous l’aurez compris, c’est de créer un environnement calme, propice à la collaboration, dans lequel chacun se sent bien et peux s’exprimer.

Les rôles

Il y a deux rôles principaux lors d’une session de mob programming, le conducteur et les les navigateurs.

Le conducteur, c’est la personne qui a le clavier. Il va écrire l’ensemble des idées de ses collègues sur l’ordinateur. Dans la philosophie mob, le conducteur ne donne pas ses idées, il pose plutôt des questions pour comprendre ce que les autres lui demandent d’écrire.

Les navigateurs quant à eux donnent les idées et les instructions au conducteur. Les navigateurs brainstorm entre eux pour trouver des idées et des solutions aux problèmes qu’ils essaient de résoudre. Parfois, on retrouve parmi les navigateurs une personne responsable de trancher afin d’éviter les débat à rallonge. Son rôle est de recentrer l’équipe sur la cible, c’est le rabat-joie du groupe !

Les règles

Les règles du mob sont assez simples. Les rôles changent toutes les 5 minutes ce qui permet à chacun de s’exprimer ou de pianoter sur le clavier.

De mon expérience, je préfère me dire que chaque équipe est différente et que les règles sont faites pour être adaptées.

N’hésitez pas à considérer le chronomètre comme un indicateur afin d’éviter de passer toute la session dans la même configuration.

Personnellement, j’aime donner la parole au conducteur dans certaines situations.

Ne perdez pas de vue que le mob, comme toute méthodologie ou pratique ne vaut rien si elle n’est pas adaptée à votre organisation.

Pourquoi faire du Mob programming ?

La pratique du mob programming apporte de nombreux avantages. Voici les raisons, qui selon moi, font du mob programming une bonne pratique.

1 - Améliorer le partage de connaissance

Pour commencer, le mob favorise le partage de connaissance au sein d’une équipe.

Voici les deux niveaux de connaissance :

Les connaissances métier : le jargon du produit sur lequel vous travaillez, les habitudes des clients qui utilisent le produit …
Les connaissances techniques : tout le monde n’a pas les mêmes compétences, les mêmes expériences ou encore les mêmes sensibilités vis à vis du code. Il est donc très enrichissant de confronter différentes visions et pratiques au sein d’une équipe.

J’ai eu la chance dans ma carrière d’avoir un mentor pendant mon alternance. J’ai bénéficié du temps et de l’expérience d’une personne plus expérimentée que moi qui m’a fait des retours et m’a aiguillé afin d’éviter les pièges sur le chemin. Ce processus m’a permis de monter très rapidement en compétences.

Le mob programming permet de bénéficier des plus expérimentés et de prodiguer des conseils aux plus novices.

2 - Éviter les sorties de route

Lorsqu’on développe tout seul dans son coin et que tout devient flou, il est facile de tomber dans une spirale infernale. Parfois, une vision extérieure évite de longues heures de frustration à tourner en rond.

Faut-il choisir la solution a ou la solution b ? Faut-il passer à autre chose et revenir sur ça plus tard ? Faut-il faire un test unitaire ou un test d’intégration ? Est-ce que ces questions sont pertinentes pour résoudre mon problème ? Tant de questions qui seront plus faciles à résoudre si on a le point de vue de plusieurs personnes.

L’essence de cette pratique repose sur l’intelligence collective. C’est la diversité des points de vue qui permet d’obtenir de la justesse dans ce que l’on fait.

3 - Solidifier les liens, apporter du sens et accroitre le bonheur

En tant que développeur, on connait tous le soulagement de partager la résolution d’un bug pénible avec un collègue. Vous galérez, mais vous galérez ensemble ! Puis tout à coup, vous changez une ligne de code et le code compile ! Eurêka, le problème est résolu, place à la sécrétion de dopamine dans votre cerveau.

La joie partagée est une double joie ; la peine partagée est une demi-peine - Jacques Deval

Cette citation retranscrit très bien les bénéfices prodigués par le mob programming.

Partager les moments difficiles permet de diminuer la charge mentale, qui en tant que développeur est déjà bien élevée.

On dit souvent que c’est dans l’échec et l’adversité que l’on apprend. Et bien ici, c’est l’occasion d’en apprendre d’avantage sur vous même mais également sur les différents membres de l’équipe, de créer une cohésion et d’avancer ensemble.

Ce troisième point est pour moi la raison d’être du mob programming, c’est de placer les humains au centre du travail de développeur.

Quoi de mieux que de créer du lien avec ses collègues, se sentir utile, soutenu et reconnu par le groupe. Ne serait-ce pas là la clé du bonheur au travail ?

Les challenges

On ne va pas se mentir, à ce moment de l’article vous vous dites certainement que c’est trop beau pour être vrai. En effet, si le mob programming est très bénéfique lorsqu’il est pratiqué dans dans une bonne configuration, il peut présenter son lot de challenge.

Voici les obstacles sur lesquels vous pouvez vous heurter en pratiquant le mob programming.

L’ego du développeur

L’ennemi public numéro 1 quand il s’agit de mob programming, c’est l’ego du développeur.

Qu’est-ce que c’est l’ego du développeur ?

Je l’explique pour nos amis qui ne seraient pas développeur et qui lisent cet article. L’ego du développeur c’est le fait de ne pas accepter les remarques et critiques sur le code que vous avez produit en tant que développeur. Je ne saurai pas l’expliquer mais tous les développeurs l’on subi au moins une fois dans leur carrière. On dirait que le code est une sorte de prolongement du développeur.

L’égo du développeur se soigne en exposant progressivement la personne à des retours constructifs de son code. Il est important de faire cela dans un climat de bienveillance en mettant la personne en confiance.

Il faudra expliquer à la personne que ces retours n’ont qu’un seul objectif : assurer la bonne réalisation du projet.

Être en phase avec le fait de faire des erreurs et accepter la critique permet en tant que développeur de se libérer d’un grand fardeau.

Accorder les violons

Prenons un orchestre. Chaque instrument a ses propres caractéristiques et produit un son qui lui est propre. Chaque instrument peut produire une jolie mélodie de façon isolée. Prenez tous ces instruments et faites les jouer sans chef d’orchestre. Il est très probable que le son produit soit chaotique.

Maintenant, prenez tous ces instruments, accordez les et faites les jouer en rythme, au bon niveau sonore pour que chacun d’entre eux viennent apporter la touche qu’il faut à cette magnifique mélodie collective. Vous entendez ce son doux pour vos oreilles ?

Et bien figurez-vous qu’un développeur c’est un peu comme un instrument et l’équipe de développement un peu comme l’orchestre. Chacun a des compétences, chacun peut produire un résultat de façon isolés mais si vous arrivez à combiner toutes ces compétences et vous faites en sorte que chacun puisse collaborer pour accomplir un but commun, alors le résultat va être grandiose !

Trouver votre chef d’orchestre, cette personne qui parvient à guider l’équipe afin de tirer ce qui a de meilleur en chacun et ainsi à réaliser de grandes choses !

Oser

Selon les caractères, les différentes personnes du groupe peuvent avoir des peurs différentes.

Certains n’arriveront pas à s’exprimer devant le reste du groupe par peur de manquer de pertinence. D’autres personnes auront peur d’échouer en public.

Il ne faut pas oublier que l’échec n’est pas très bien vu dans notre société ou toute la lumière est mise sur les success stories. Pour résoudre ce problème, je n’ai qu’une solution : la bienveillance et le temps.

Laissez moi vous vous rappeler quelque chose d’important. Ce qui fait la force et la beauté du mob programming c’est la diversité des points de vue et des expériences. Chacun est différent et a quelque chose à apporter.

Osez vous exprimer devant un groupe, osez échouer car la pire chose qui puisse vous arriver c’est d’oser réussir.

Conclusion

Pour conclure, je dirais que le mob programming ça n’est pas magique et que ce n’est pas fait pour tout le monde.

Certaines personnes ont besoin d’être seule pour trouver la concentration nécessaire à l’accomplissement de leurs tâches.

Si vous sentez que la façon dont vous travaillez vous convient, continuez ainsi ! On ne change pas une équipe qui gagne.

Par contre, si vous sentez que vous n’êtes pas pleinement épanouis et que vous cherchez du sens dans ce que vous faites, que vous aimez travailler en équipe alors foncez !

Attention toutefois à ne pas vous prendre les pieds dans les racines qui jonchent le chemin.

Empathie, patience et bienveillance, voilà les maîtres mots du mob programming. Je vous souhaite de vous épanouir dans cette pratique.

J’espère que l’article vous aura plu. Je serais heureux d’avoir votre avis sur le sujet, alors n’hésitez pas !

Jarvis, génère moi un schéma de base de données

Vincent — Thu, 22 Aug 2024 12:51:08 +0000

Petit disclaimer avant de commencer ce post. L’IA est un outil très puissant d’assistance mais pour le moment nous ne pouvons pas lui déléguer l’entière responsabilité du travail. Alors je vous incite fortement à vérifier tout le contenu généré par une IA. Bonne lecture !

Je viens de découvrir un outil très intéressant qui peut vous assister dans la création de vos schémas de base de données Postgres. Cet outil c’est postgres.new !

Voici le lien vers le repository du projet https://github.com/supabase-community/postgres-newet le lien vers l’interface https://postgres.new/.

postgres.new c’est quoi ?

postgres.new est un outil gratuit de création de base de données PostgreSQL par IA développé par Supabase.

L’interface ressemble à tous les assistant d’IA avec la liste des contextes de génération à gauche, au milieu le contenu qui est généré et à droite la barre de prompt permettant de faire des requêtes.

Comment ça marche sous le capot ?

PostgresNew peut fonctionner uniquement dans le navigateur car il est construit par-dessus PGLite https://pglite.dev/ (développé par ElectricSQL) qui est une version Web Assembly de Postgres offrant une compatibilité navigateur web.

Ainsi, il est possible de créer une base de données Postgres, faire des requêtes et stocker la base de données, tout cela au sein du navigateur. Par défaut, la base est stocker via l’indexedDB du navigateur permettant de persister les données au rafraichissement.

Quelles sont les fonctionnalités ?

Importer des données

Il est possible de drag and drop un fichier CSV dans la console de prompt. L’agent va reconnaitre le fichier, l’importer et créer une table en analysant le contenu du fichier.

Voici un exemple de fichier CSV représentant le taux de natalité en fonction de l’âge des femmes sur la période 2005 / 2022.

Voici un extrait du fichier CSV :

Et voici la table que postgres.new a généré :

Le script de migration qui permet de créer la table est accessible dans l’onglet Migrations.

Demander des informations sur le jeu de données

Il est possible de faire des requêtes en s’adressant directement à l’agent. Par exemple, je demande la catégorie d’âge qui a le plus d’enfant, l’agent est capable de répondre que c’est la tranche des 30/34ans qui est la plus propice aux naissances.

Représenter des données

Il est possible de demander une représentation graphique des données. Ici, je demande de me représenter les 4 groupes d’âge qui ont le plus d’enfant. L’agent me représente dans un diagramme à barre les données que je lui demande. C’est assez bluffant !

On peut lui demander d’afficher les mêmes données dans un diagramme circulaire.

Créer un schéma from scratch

Il est possible de décrire un besoin ou une fonctionnalité et l’agent se charge de créer un schéma capable de répondre à la demande.

Par exemple si je lui demande de réaliser un schéma qui clone une application telle que Twitter, l’agent me créer le schéma suivant :

On a également une description de toutes les tables.

Ici, on a bien un schéma minimal permettant de reproduire le comportement du MVP de Twitter (ou X).

Voici à quoi ressemble le script de migration :

-- Migrations will appear here as you chat with AI

create table users (
  id bigint primary key generated always as identity,
  username text unique not null,
  email text unique not null,
  password_hash text not null,
  created_at timestamp with time zone default now(),
  bio text,
  location text
);

create table tweets (
  id bigint primary key generated always as identity,
  user_id bigint references users (id) on delete cascade,
  content text not null,
  created_at timestamp with time zone default now()
);

create table followers (
  follower_id bigint references users (id) on delete cascade,
  followee_id bigint references users (id) on delete cascade,
  primary key (follower_id, followee_id)
);

create table likes (
  user_id bigint references users (id) on delete cascade,
  tweet_id bigint references tweets (id) on delete cascade,
  primary key (user_id, tweet_id)
);

create table retweets (
  user_id bigint references users (id) on delete cascade,
  tweet_id bigint references tweets (id) on delete cascade,
  created_at timestamp with time zone default now(),
  primary key (user_id, tweet_id)
);-- Migrations will appear here as you chat with AI

create table users (
  id bigint primary key generated always as identity,
  username text unique not null,
  email text unique not null,
  password_hash text not null,
  created_at timestamp with time zone default now(),
  bio text,
  location text
);

create table tweets (
  id bigint primary key generated always as identity,
  user_id bigint references users (id) on delete cascade,
  content text not null,
  created_at timestamp with time zone default now()
);

create table followers (
  follower_id bigint references users (id) on delete cascade,
  followee_id bigint references users (id) on delete cascade,
  primary key (follower_id, followee_id)
);

create table likes (
  user_id bigint references users (id) on delete cascade,
  tweet_id bigint references tweets (id) on delete cascade,
  primary key (user_id, tweet_id)
);

create table retweets (
  user_id bigint references users (id) on delete cascade,
  tweet_id bigint references tweets (id) on delete cascade,
  created_at timestamp with time zone default now(),
  primary key (user_id, tweet_id)
);

Modifier le schéma généré

Il est possible de modifier le schéma généré en demandant directement à l’agent via la console de prompt, soit en passant par l’interface qui permet quelque manipulation.

Admettons que je veuille que la bio de la table users ne soit jamais nul, alors je peux cliquer sur la colonne et sélectionner “rendre non nul”.

L’agent nous informe que la demande à bien été prise en compte.

Les nouvelles lignes permettant la migration sont ajoutées dans le script de migration.

alter table users
alter column bio
set not null;

Conclusion

Ce post s’appuie sur la vidéo de démonstration de postgres.new. Je vous conseille d’aller la regarder ! https://www.youtube.com/watch?v=ooWaPVvljlU

On commence à banaliser la capacité des IA mais aurait-on cru que tous ces progrès arriveraient si vite ? Personnellement ça me bluff! Toutefois comme je l’ai dit en introduction, il est primordial de vérifier un minimum ce que l’IA fait.

Pour résumé, PostgresNew c’est un assistant de création et de manipulation de base de données Postgres. Il permet de gagner pas mal de temps pour la construction ou l’analyse de données.

De mon côté, je vais continuer de jouer avec et j’ai hâte de voir le futur de ce projet !

Comment j'automatise l'utilisation Conventional Commits ?

Vincent — Wed, 21 Aug 2024 14:44:09 +0000

Suite à mon dernier post sur le conventional commits, je vous explique comment j’automatise l’utilisation de conventional commits.

Commitlint

Pour commencer nous avons l’outil Commitlint qui permet de faire du linting sur les message de commit.

Le principe est de remonter toutes les erreurs de format afin d’aider le développeur à rédiger un message de commit respectant le conventional commit.

Pour rendre le lint automatique, je couple Commitlint à husky afin de lancer la commande de lint à chaque fois qu’un développeur effectue un commit.

Pour celle et ceux qui ne seront pas familier avec husky voici un article qui présente l’outil : https://medium.com/@saravanan109587/husky-the-secret-weapon-for-developers-who-want-to-write-better-code-3289b06ee4d0#:~:text=Husky is a tool that,your code and prevent errors.

Voici le lien vers la documentation de commitlint : https://commitlint.js.org/

Commitlint CLI (Command Line Interface)

Il est possible d’utiliser un CLI avec commitlint en installant le package NPM suivant : @commitlint/cli.

La CLI permet de donner un template aux développeurs afin qu’ils ne doivent pas se référer à la documentation à chaque fois que ces derniers rédigent un message de commit.

Pour obtenir la CLI il suffit d’exécuter la commande suivante une fois le package installé

npm run cz

Voici à quoi ressemble la CLI :

Personnellement, je passe par un script npm me permettant de lancer la CLI de la façon suivante :

npm commit

Outil pour le pair/mob programing

Étant un fervent partisan du pair/mob progaming, j’utilise le wrapper https://www.npmjs.com/package/cz-conventional-changelog-coauthors qui me permet d’avoir la possibilité d’ajouter des co-auteur à mes commits.

Pour cela, il suffit d’ajouter un fichier de configuration .czrc à la racine de votre projet puis renseigner l’ensemble des nom/prénom et adresse mail des différents membres de l’équipe.

Ainsi à chaque fois que vous faites un commit, vous pouvez facilement ajouter tous les membres ayant participé au développement en les sélectionnant dans la CLI de commit.

Voici les lignes qui sont ajoutées dans la CLI

Voici un exemple de mon fichier de configuration

// .czrc
{
    "path": "cz-conventional-changelog-coauthors",
    "defaultCoAuthors": [
        {
            "name": "Elon Musk",
            "email": "elon.musk@spacex.com"
        },
        {
            "name": "Jeff Bezos",
            "email": "jeff.bezos@amazon.com"
        }
    ]
}

Conclusion

Voilà les différents outils que j’utilise pour respecter le conventional commits sans le moindre effort. N’hésitez pas à me partager vos outils permettant de respecter le conventional commits si vous en utilisez d’autres que moi !

Retrouvez tous vos commits avec le Conventional Commits

Vincent — Tue, 20 Aug 2024 16:01:48 +0000

En tant que développeur, on a tous un jour rédigé un commit de la sorte :

git commit -m "WIP"

git commit -m "test"

La plupart du temps, pas de soucis, ces commits tombent dans les tréfonds de l’historique GIT et personne ne les reverra jamais. Jusqu’au jour ou la prod est en feu et qu’il faut retrouver le code qui provoque cette pagaille. Aie, c’est pas pratique de retrouver du code quand tous les commits sont mal nommé.

Aujourd’hui, je vais vous donner une solution au problème de nommage des commits que j’utilise quotidiennement et qui me facilite la vie !

Conventional commits c’est quoi ?

Conventional commits comme son nom l’indique est une convention qui permet de structurer la rédaction des commits GIT.

Comment ça marche ?

Voici à quoi ressemble un commit suivant cette convention

<type>(scope): <description>

Les types

Le type permet de spécifier globalement les modifications qui ont été apportées. Voici la liste des types possibles :

feat : ajout d’une fonctionnalité
fix : fixe d’un bug
docs : changement de la documentation
style : changement qui n’affecte pas le sens du code comme l’ajout d’une tabulation ou d’un point-virgule
refactor : un changement qui n’ajoute pas de fonctionnalité et qui ne fixe pas de bug
perf : amélioration des performances
test : ajout d’un test ou correction d’un test existant
build : changement qui affecte le système de build ou les dépendances
ci : changement qui affecte la fichier de configuration ou les scripts de CI
chore : autres changements que src et les tests
revert : enlève un commit

Le scope

Le scope est une partie optionnel du message de commit. Il permet de spécifier l’endroit du code qui a été modifié. Cela peut être le nom de la fonctionnalité ou le nom du dossier dans lequel les fichiers sont modifiés.

En général, c’est grâce au scope que l’on peut facilement retrouver une modification de code qui nous intéresse.

On peut ajouter un point d’exclamation juste après le scope pour indiquer que les changements apportés par le commit introduisent un breaking change.

La description

La description a pour but de donner des informations complémentaires du scope. En lisant la description, le développeur doit saisir le sens global du changement apporté par le commit.

Exemples

feat: allow provided config object to extend other configs

feat(api)!: send an email to the customer when a product is shipped

Voici la documentation officielle de conventional commits

https://www.conventionalcommits.org/en/v1.0.0/

Les composants d’un Navigateur Web

Vincent — Tue, 13 Aug 2024 17:39:21 +0000

Qu’est ce qu’un navigateur web ?

Un navigateur web c’est un logiciel qui permet aux utilisateurs d'accéder et de visualiser le contenu du World Wide Web. Sa fonction principale est de localiser et de récupérer des pages web, des images, des vidéos, des documents et d'autres fichiers à partir de serveurs et de les afficher.

Les composants d’un navigateur web

Un navigateur web est constitué de plusieurs composants essentiels à son bon fonctionnement. Voici un schéma des différents composants d’un navigateur web.

Interface utilisateur (User interface)

L’interface utilisateur permet à l’utilisateur d’effectuer les tâches qu’il souhaite. C’est au travers de cette interface que l’utilisateur accède à l’ensemble des fonctionnalités du navigateur web tels que la barre d’adresse, les boutons de navigation d’historique, les différents menus de paramétrage et bien d’autres.

Moteur du navigateur (Browser Engine)

Le moteur de navigateur est le coeur de tous les navigateurs. C’est l’intermédiaire entre l’interface utilisateur et le moteur de rendu. Il récupère l’ensemble des événements utilisateurs et s’assure de les transmettre au moteur de rendu.

C’est un élément très important à optimiser car il influera grandement sur la vitesse de chargement des pages.

Moteur de rendu (Rendering Engine)

La première mission du moteur de rendu est de créer le DOM (Document Object Model) en parsant les fichiers HTML. Ce DOM représente la structure de la page web.

La deuxième mission du moteur de rendu est de créer l’arbre de rendu (rendering tree) en associant le style (issue des fichiers CSS) à chaque élément du DOM.

Le moteur de rendu est également en charge de l’exécution du JavaScript interprété au préalable par l’interpréteur JavaScript.

Chaque navigateur à son propre moteur de rendu :

Google Chrome / Opera v.15+: Blink
Internet Explorer: Trident
Mozilla Firefox: Gecko
Chrome iOS / Safari: WebKit

Réseau (Networking)

La brique réseau est en charge des appels réseaux utilisant les protocoles HTTP / FTP. En effet, pour constituer une page web, il faut récupérer l’ensemble des ressources nécessaires à l’affichage et l’utilisation de cette dernière comme les fichiers HTML, CSS, les scripts JS, les images, les vidéos et autres ressources.

Interpréter Javascript (JS interpreter)

L’interpréteur de JavaScript est responsable de parser et interpréter les fichiers JavaScript d’une page. Le tout est ensuite transmis au moteur de rendu qui affichera le contenu.

UI backend

Ce composant utilise les méthodes d'interface utilisateur du système d'exploitation sous-jacent. Il est principalement utilisé pour dessiner des widgets de base comme des fenêtres et combo box.

Persistence de donnée (Data Persistance)

Un navigateur à besoin de persister des données pour certaines fonctionnalités. On peut citer la pile d’historique qui sauvegarde les URL des pages visitées. On peut également vouloir retenir des informations entre différentes navigations sur une page web avec l’utilisation du local storage ou des cookies.

Conclusion

Naïvement, on pourrait se dire qu’un navigateur ne fait qu’afficher des pages webs, mais en réalité, c’est bien plus complexe. Un navigateur web est composé de multiples éléments dont chacun d’entre eux assure une mission nécessaire dans l’unique but d’afficher des pages web.

Le navigateur récupère des fichiers, les parse, les assemble, affiche les pages, stock des données tout cela dans le but de fournir une expérience d’internet la plus fluide possible.

Si internet est aujourd’hui autant utilisé, c’est en partie grâce aux navigateurs web qui ont rendu internet aussi accessible.

HTTP : connaissez-vous vraiment vos fondamentaux ?

Vincent — Mon, 12 Aug 2024 16:10:36 +0000

Un peu d’histoire

HTTP (HyperText Transfer Protocol) est un protocole de communication client-serveur développé pour le World Wide Web par Tim Berners Lee et son équipe entre 1989 et 1991.

HTTPS, une version sécurisée de HTTP est implémentée par Netscape communications 4 ans plus tard en 1994.

Ce protocole permet des échanges de fichier via le réseaux internet grâce aux protocoles réseaux TCP (Transmission Control Protocol) et IP (Internet Protocol).

Dans sa version initiale, HTTP ne permettait que le transport de fichier HTML. Par la suite, l’ajout de l’en-tête “Content-Type” permet de transporter d’autres types de fichier. Vous pouvez retrouver cette liste ici : https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

Initialement, HTTPS s’appuyait sur le protocole de sécurité SSL (Secure Sockets Layer) qui assure la confidentialité, l'authentification et l'intégrité des communications sur Internet.

Le principe est simple, on encrypte les données afin d’éviter toutes interceptions malveillantes lors du transfert et on décrypte grâce à un certificat SSL. SSL deviendra par la suite TSL (Transport Layer Security).

À ces débuts, HTTPS était principalement utilisé pour les sites E-Commerce, mais très vite, l’émergence d’acteur mal intentionné récoltant de nombreuses données personnelles sur Internet à accéléré le passage de la majorité des sites sur Internet à utiliser le protocol HTTPS.

Le modèle qui sera majoritairement utilisé pour l’utilisation de HTTP est le modèle REST (Representational state transfer). Aujourd’hui la plupart des sites web exposant des données repose sur des API REST. REST c’est une façon d’utiliser HTTP, qui a permis de poser un standard sur la conception des applications web ainsi que l’exploitation des données.

Si vous voulez en savoir plus sur REST, voici le papier de thèse de Roy Fielding qui pose les fondements du standard : https://ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf

Comment ça marche ?

HTTP est un protocole client serveur. Chaque requête est initiée par le client (aussi appelé agent d’utilisation) qui est la quasi totalité des cas le navigateur web.

Pour afficher une page web, le navigateur va effectuer une succession de requêtes HTTP. Dans un premier temps, le navigateur récupère le document HTML de la page, s’en suit la récupération des scripts et du style (CSS).

Au cours de la durée de vie de cette page, les scripts peuvent effectuer des requêtes HTTP pour récupérer du contenu supplémentaire.

Les liens hypertextes sont une partie des pages web. Ils permettent de naviguer entre les différentes pages présentes sur Internet. Lorsqu’un utilisateur clique sur un lien hypertexte, le navigateur envoie une requête HTTP pour récupérer cette dernière et recommence les étapes décrites ci-dessus.

Communication client / serveur via HTTP

Voici les étapes de connexion d’un client vers un serveur :

1) Le client ouvre un canal de communication TCP vers le serveur.

2) Il envoie un message HTTP. (Avant HTTP/2 les messages étaient lisibles par des humains, à partir de HTTP/2 les messages sont encodé en binaires les rendant illisible par un humain mais permettant de faciliter leur traitement).

3) Le client reçoit une réponse HTTP du serveur et la lit.

4) Le client peut soit fermer la connexion, soit réutilisé la connexion pour les requêtes suivantes.

Messages HTTP

Il existe deux types de messages HTTP : les requêtes et les réponses

Requête

Voici un exemple de message de requête HTTP sur l’API Pokémon

Voici les éléments que l’on retrouve dans une requête HTTP :

Un verbe HTTP permettant d’indiquer l’action souhaité sur la ressource. Ici on a GET qui permet de récupérer une ressource du serveur.
Une URL vers la ressource, ici /api/v2/pokemon/pikachu.
La version du protocole HTTP, ici 1.1.
(optionnel) Les en-têtes (ou header en anglais) permettant de donner plus d’information au serveur, ici on a host.
(optionnel) Un corps (ou body en anglais) permettant de fournir des données au serveur, ici il n’y en a pas.

Réponse

Voici les éléments que l’on retrouve dans une réponse HTTP :

La version du protocole HTTP, ici 1.1.
Un code de statut (échec / succès), ici code 200.
Un message de statut qui est une description rapide, informelle, du code de statut
(optionnel) Les en-têtes, ici on a date, cache-control et content-type.
(optionnel) Un corps contenant la ressource récupérée, ici il n’y en a pas.

Verbes

HTTP définit un ensemble de verbes permettant d’indiquer l’action à réaliser.

Voici la liste des verbes HTTP :

GET
POST
PUT
DELETE
PATCH
HEAD
CONNECT
OPTION
TRACE

Voici un lien qui explique chacun des verbes HTTP : https://developer.mozilla.org/fr/docs/Web/HTTP/Methods

Code de réponse

HTTP définit un ensemble de code de réponse permettant d’obtenir une information sur le succès ou l’échec de la requête.

Il existe 5 types de réponse répartie sur 5 plages de nombres différentes :

100 à 199 : réponses informatives
200 à 299 : réponses de succès
300 à 399 : réponses de redirection
400 à 499 : erreurs du client
500 à 599 : erreurs du serveur

Voici les codes que l’on rencontre le plus couramment :

Informations

100 Continue
101 Switching Protocols

Succès

200 OK
201 Created
204 No Content

Redirection

301 Moved Permanently
302 Found

Erreurs du client

400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found

Erreurs du serveur

500 Internal Server Error
502 Bad Gateway

Voici un lien qui explique chacun des codes de retour HTTP : https://developer.mozilla.org/fr/docs/Web/HTTP/Status

Fun fact

Pour la petite histoire, il existe une easter egg parmi tous ces codes de réponses. Le code 418 indique “I’m not a teapot” ou en français “je ne suis pas une théière”. Malgré le fait qu’à l’origine cet ajout était une blague, il est parfois utilisé dans des applications en guise d’humour.

Les différentes API construites sur HTTP

Voici une liste non-exhaustive des différentes API construites sur HTTP :

REST
SOAP
GraphQL
WebSocket
Server-Sent Events (SSE)
WebRTC
OAuth / OpenID Connect

Conclusion

HTTP est un protocole de communication s’appuyant sur le protocole réseau TCP/IP. C’est un protocole essentiel au fonctionnement du web.

Il a évolué depuis ses débuts en 1989 et a su assumer sa place dans l’écosystème internet. Aujourd’hui, on dénombre 3 versions majeures de HTTP et il continue d’y avoir de la recherche pour améliorer le protocole.

HTTP est la base de beaucoup d’API web ce qui en fait une notion essentiel à comprendre afin d’appréhender avec sérénité la construction d’application web.

Design System et les librairies de composants

Vincent — Fri, 09 Aug 2024 15:48:40 +0000

Aujourd’hui j’ai pris appris que derrière la plupart des libraires de composant il y a un Design System.

Dans le web, un Design System est un ensemble de règles de conception permettant de créer des interfaces homogènes et accessibles.

C’est l’émergence des différents support de diffusion et les enjeux d’accessibilités qui ont favorisé l’apparition des Design System.

Voici quelques-uns des Design System les plus utilisés :

Atlassian Design System par Atlassian
Material Design par Google
Apple Human Interface Guidelines par Apple
Ant Design par Alibaba Group

La liste est bien plus longue que ça, je vous laisserais le soin d’aller chercher le Design System qui correspond le plus à votre besoin.

Material Design (Google)

Prenons l’exemple d’un des Design System les plus utilisé Material Design. Material Design a été introduit par Google en 2014. Utiliser Material donnera à votre application un aspect similaire aux différents outils de Google (Gmail / Google Drive / Youtube …).

La raison d’être de Material Design est d’abstraire la complexité des interfaces en fournissant des solutions à des problèmes d’UX complexes. La promesse de Material, c’est une interface simple, accessible qui offre la meilleure expérience utilisateur possible. Ainsi lorsqu’on utilise Material, on se concentre plus sur sa palette de couleur et sur les jeux d’ombre pour mettre en évidence des éléments d’interface.

Le terme Material vient du fait que ce Design sSystem s’inspire de la matière du monde réel. La philosophie est la suivante : les utilisateurs sont familiers avec les éléments du monde réel tels que la lumière, les ombres et le mouvement. Ainsi on peut offrir un environnement dans lequel les utilisateurs peuvent facilement s’y retrouver.

Material Design met un point d’honneur sur l’accessibilité. Ces interfaces doivent être accessibles sur tout type d’appareil (smartphone, tablette, ordinateur …) et par des utilisateurs ayant tout type de handicape.

Implémentation de Material Design

La plupart des gros Design System possèdent des libraries de composants et des maquettes de ces derniers (tel que des collections Figma) permettant aux développeurs et aux designer d’utiliser le Design System directement dans leurs applications sans devoir tout implémenter.

Cela rend le Design System très abordable car on ne doit pas maitriser l’ensemble des règles pour commencer à l’utiliser.

Voici un ensemble de librairies qui implémente Material Design pour les différentes technologies Front-End les plus utilisées en 2024 :

React

https://mui.com/material-ui/

Vue

https://www.creative-tim.com/vuematerial/

https://v2.vuetifyjs.com/en/

Angular

https://material.angular.io/

À noter qu'en général, il existe plusieurs librairies qui fournissent les composants respectant les règles d’un Design System.

Toutes les libraires ne sont pas équivalentes, elles viennent avec plus ou moins de composants. En fonction de votre besoin et de vos objectifs, ce critère peut être pris en compte pour décider la techno que vous choisirez pour implémenter votre application.

Conclusion

Personnellement, je développe principalement des interfaces en React. Je suis familier à l’utilisation des librairies suivantes :

MUI https://mui.com/material-ui/all-components/
Ant Design https://ant.design/components/overview/

Je trouve ces collections de composants sont complètes. Ces derniers me permettent d’avoir des interfaces homogènes, accessibles et surtout me font gagner un temps précieux car il ne faut pas développer et tester chacun des composants d’une application.

Depuis peu, j’utilise Shadcn UI qui propose une collection de composants en Tailwind CSS. Je vous conseille fortement d’essayer cette librairie prometteuse.

Qu'est ce qu'un CDN ?

Vincent — Fri, 09 Aug 2024 07:49:31 +0000

Aujourd’hui, j’ai découvert ce qu’est un CDN Content Delivery Network ou réseau de diffusion de contenu en français. C’est un groupe de serveur qui permet d’accélérer l’accès au contenu web en rapprochant les sources de données des utilisateurs.

Le principe est simple, un serveur principal envoie des copies des données à des serveurs distants plus proche de l’utilisateur final (cf schéma ci-dessous).

Les CDN ont beaucoup de valeur pour les contenus lourds tels que le streaming vidéo et les images.

Un CDN est composé de 3 types de serveurs :

Le serveur original qui contient les données. Il fait office de vérité sur le contenu.
Les serveurs de relais qui sont mis à jour de façon asynchrone et qui distribue le contenu.
Les serveurs DNS qui permettent qui ont la connaissance de tous les serveurs et qui permettent de rediriger vers le serveur disponible le plus proche de l’utilisateur.

Je retiens 3 grands avantages des CDN (il en existe d’autres) :

réduire la latence en approchant la source de données des utilisateurs
équilibrer la charge du réseau en mettant à disposition plusieurs points d’accès
assurer un service plus stable car on peut toujours rediriger sur un autre serveur en cas de pannes / maintenances

On peut citer UNPKG qui est un CDN permettant de récupérer n’importe quel contenu de NPM dans une page HTML.

Nullish Coalescing Operator vs Logical Or Operator

Vincent — Fri, 12 Jul 2024 12:26:55 +0000

Le saviez-vous ?

Quelle est la différence entre ?? et || ?

Nullish Coalescing Operator - ??

De son doux nom français “Opérateur de coalescence des nuls”, a ?? b permet de renvoyer le terme a si ce dernier n’est pas ni null ni undefined. Dans le cas inverse l’opérateur renvoie le terme b.

Voici un exemple qui permet de redéfinir cet opérateur en JavaScript.

const result = a ?? b

const nullishCoalescingOperator = (a, b) => {
    if (a !== null && a !== undefined) {
        return a
    } 
    return b;
}

const result = nullishCoalescingOperator(a,b);

Logical Or Operator - ||

L’opérateur OU logique est similaire à l’opérateur de coalescence des nuls à l’exception que ce dernier test si le terme a est falsy.

Pour rappel voici une liste non exhaustive des valeurs falsy en JavaScript :

null
undefined
false
NaN
0
“”

Voici un exemple qui permet de redéfinir cet opérateur en JavaScript.

const result = a || b

const orOperator = (a,b) => {
    if (a) {
        return a;
    }
    return b;
}

Mémo

Pour finir, voici un tableau qui résume le retour des fonctions ?? et ||

Sources

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR