ghsdl / canyounameit Goto Github PK

Salut !
J'ai vu que tu partageais ton site sur Twitter et j'ai eu envie de te faire quelques recommandations car j'aurai bien voulu qu'on m'en fasse à mes débuts. Tu en feras ce que tu veux :)

package.json

• Tu peux mettre dans la partie devDependencies les modules qui ne servent pas pour le build, ça fonctionne tout de même bien comme tu as fait mais je trouve que ça sépare bien les modules de la production des outils ;
• J'ai tendance à séparer les choses donc la configuration eslint, je la met dans un fichier à part : side effect, quand quelqu'un modifie la configuration eslint, tu auras des diff sur ce fichier en question et non pas dans package.json donc plus auto portant ;
• Il manque une commande pour lancer le type checking ;
• Il manque une commande pour lancer le linter ;
• Tu as 33 vulnérabilités sur ton projet, tu peux les voir en faisant npm audit.

Fichiers tsx

• Convention collective : mettre des "" à la place des '' pour les attributs html ;
• Convention collective : ne pas mettre de majuscule dans un nom de classe CSS ;
• Tu peux directement mettre export const ... et ainsi gagner une ligne de code et surtout éviter de l'appeler différement à l'import, cela m'a déjà posé des problèmes de compréhension, je pensais trouver par exemple App alors que c'était marqué import MySuperApp from ./App .

Fichiers scss

• Trier les propriétés par ordre alphabétique, pourquoi ? car c'est le "rangement" que tous les humains connaissent par défaut et le cerveau va vite le détecte, tu réduis la charge cognitive.

App.tsx

• Au lieu d'importer name, tu aurais pu faire un hook custon ;
• Tu peux supprimer le fichier components/index.tsx, il ne sert à rien et tu peux importer les trois composants directement et tu enleves un peu de charge cognitive.

interfaces.tsx

• Tu pourrais mettre l'interface au plus proche du composant comme ça, quand tu supprimes le composant, tu supprimes defacto son interface, cela évite du code mort (et tu supprimes encore une ligne d'import).

Icons.tsx

• Pourquoi ne pas avoir mis en props l'icon directement plutôt qu'une chaîne de caractères (ce que tu as très bien fait avec onClick) ? Parce que du coup, ton composant est fortement lié à tous les icons que tu as, quand tu vas en rajouter un, il faudra modifier ce composant alors que c'est juste un wrapper au final. De maniète général, un composant graphique doit être bête, c'est-à-dire qu'il ne doit presque pas avoir de logique ;
• De plus, ton enchaînement de tenaire fait mal à la tête :p.

Paragraph.tsx

• C'est préférable d'utiliser children quand tu veux insérer du html dans un composant car c'est auto portant.

Ton code est tout à fait correct, lisible et surtout fonctionnel ! J'ai juste voulu partager mon savoir et expérience avec toi.
N'hésite pas à rebondir ou poser des questions si je n'ai pas été assez clair.