excuse my french.dev

veille front-end & ux (avec un accent)

Retour vers la liste des articles

Excuse My French Dev #3 : une rentrée comme sur des roulettes en jouant à Git et en devenant un pro de VS Code et des raccourcis clavier

screenshot of the game Oh My Git
source: Oh My Git

C'est la rentrée ! J'ai donc déniché quelques vidéos, un jeu et un article pour faire une reprise sur de bonnes bases. On démarre doucement avec une vidéo pour mettre en place et/ou améliorer son installation sur Visual Code Studio, un chouette jeu pour apprendre à utiliser Git et une liste des raccourcis clavier pour gagner en productivité. On saupoudre le temps d'un peu d'accessibilité avec un outil pour trouver des associations de couleurs bien contrastées et on se remet dans ReactJS avec un chouette guide visuel pour comprendre l'utilisation de React.memo

Voilà les cinq liens "coup de coeur" de la semaine :

  1. Visual Studio Code Crash Course Une heure et demi de cours pour apprendre comment utiliser Visual Studio Code. Cette vidéo m'a bien été utile lorsque j'ai commencé à coder ailleurs que sur l'éditeur fourni par ma formation, et je suis retombée dessus en la conseillant à un ami. C'est un peu rapide, mais extrêmement complet, de la première installation jusqu'à la gestion du contrôle de source en passant par toutes les extensions utiles. Aujourd'hui, les sous-titres dans YouTube sont relativement clairs donc la vidéo est facile à suivre. Si vous êtes dans le développement web et déjà utilisateur.rice de VS Code, ce top 10 des extensions par le même auteur est également une pépite !
  2. Oh My Git L'éducation par le jeu est un de mes sujets d'étude favoris. Git est un outil incroyablement utile et complexe d'utilisation en même temps. Oh My Git est un jeu pour apprendre à utiliser Git qui intègre une console (dans laquelle les commandes Git fonctionnent effectivement !) et un rendu visuel des structures avec lesquelles le joueur ou la joueuse joue pour mieux comprendre le résultat des commandes.
  3. A Visual Guide to React Rendering - It Always Re-renders ("Un guide visuel du rendu en React"). Lorsque l'on fait le rendu d'un composant parent dans ReactJS, ses composants enfants se mettent également à jour, même si les "props" n'ont pas changé. Avec React.memo, on peut améliorer la performance de son application en évitant de faire le rendu des composants enfants dont les "props" n'ont pas changé. L'expression "guide visuel" est très bien choisie, car les schémas de cet articles sont très clairs.
  4. Color Safe Un outil utile pour trouver une combinaison de couleurs suffisamment contrastée pour respecter les normes d'accessibilité préconisées par le W3C (le Word Web Consortium). On entre la couleur d'arrière-plan, la famille de la police de caractère, sa taille et sa graisse, puis on obtient toute une palette de couleurs utilisables pour la police. Simple et direct, je l'ai utilisé pour améliorer la couleurs des liens sur ce site.
  5. Windows Keyboard Shortcuts - How to improve productivity at the computer ("Raccourcis clavier sur Windows - Comment améliorer sa productivité sur ordinateur"). Un article à garder en favoris et à consulter de temps en temps (comprendre : quand je procrastine...). Par exemple, j'écris beaucoup sur ordinateur et la navigation dans le texte est parfois laborieuse quand on jongle entre le souris et le clavier. Depuis que j'essaie de "pratiquer" plus de raccourcis clavier, ma main saute encore de clavier en souris et vice-versa par réflexe, mais c'est vraiment agréable de ne pas avoir à décoller ses mains du clavier pour se concentrer pleinement sur ce que l'on écrit !

And that's it! A la semaine prochaine !