Introduction

L'illusion principale des développeurs débutants est de croire que la productivité vient de la vitesse de frappe ou du nombre d'heures passées devant l'écran.

C'est faux. Les développeurs les plus productifs sont des "feignants intelligents". Ils automatisent tout ce qui est ennuyeux et délèguent à Codex tout ce qui ne nécessite pas d'intelligence métier pure.

Ce chapitre va vous apprendre à créer un environnement de travail où vous ne ferez plus jamais deux fois la même tâche fastidieuse.

Les habitudes des utilisateurs les plus efficaces

  • ✅ 1. Préparer son travail (Papier) avant le prompt.
  • ✅ 2. Découper les gros objectifs.
  • ✅ 3. Garder une arborescence de dossiers propre.
  • ✅ 4. Commiter sur Git toutes les heures.
  • ✅ 5. Tester visuellement après chaque modif.
  • ✅ 6. Toujours situer le contexte ("Je fais ça pour...").
  • ✅ 7. Garder un fichier de Prompts Favoris.
  • ✅ 8. Documenter au fur et à mesure.
  • ✅ 9. Relire le code avant de coller.
  • ✅ 10. Demander un audit avant de refactoriser.
  • ✅ 11. Fermer les onglets inutiles.
  • ✅ 12. Utiliser des variables (CSS/Root).
  • ✅ 13. Faire générer des données factices JSON.
  • ✅ 14. Refuser l'optimisation précoce.
  • ✅ 15. Savoir utiliser git restore ..
  • ✅ 16. Utiliser les raccourcis clavier de l'IDE.
  • ✅ 17. Lire les messages d'erreurs (Console F12).
  • ✅ 18. Faire des pauses mentales régulières.
  • ✅ 19. Ne pas changer de technologie en plein vol.
  • ✅ 20. Nettoyer son code chaque soir.

Le workflow parfait de développement

Un workflow est une boucle de travail. S'il est bien huilé, vous avancez comme un train sur des rails.

graph TD;
    A[Idée / Besoin Client] --> B[Découpage sur papier];
    B --> C[OQAF Prompt vers Codex];
    C --> D[Génération V1 de la brique];
    D --> E[Intégration & Console F12];
    E --> F{Crash ?};
    F -- Oui --> G[Copie de l'erreur + Context];
    G --> E;
    F -- Non --> H[Test UX/Mobile];
    H --> I[Git Add & Commit];
    I --> J[Prochaine Brique];

Les tâches à automatiser de toute urgence

Ne perdez plus jamais de temps sur ces actions :

1. La Documentation (Readme & JSDoc)

Le Prompt : "Génère le README de ce projet en format Markdown, avec les instructions d'installation et les scripts npm. Ajoute aussi la JSDoc pour les 3 fonctions principales."
Temps gagné : 1 heure par projet.

2. Les Mocks (Fausses données)

Le Prompt : "Génère un tableau JSON de 20 utilisateurs fictifs avec `id`, `nom`, `email`, `role` et `date_inscription`."
Temps gagné : 30 minutes de saisie ridicule.

3. Nettoyage du CSS

Le Prompt : "Analyse ce fichier CSS. Supprime les classes non utilisées, regroupe les media queries et formatte le tout proprement."
Temps gagné : 2 heures de défilement visuel.

Organiser ses conversations avec l'IA

La règle d'or : Ne mélangez jamais les sujets.

  • Créer un nouveau chat : Vous venez de finir le "Header". Fermez le chat. Ouvrez-en un nouveau pour le "Footer". Codex aura un contexte propre.
  • Continuer un chat : Si vous êtes en train de débugger une logique de "Panier", restez dans ce chat tant que le panier n'est pas parfait.
  • Astuce : Renommez vos conversations dans l'interface de l'IA (ex: "Feature - Authentification", "Refacto - CSS Global").

Créer sa propre bibliothèque de prompts

Créez un fichier _prompts.md à la racine de votre ordinateur. Stockez-y vos requêtes d'or :

## 🐛 Debugging Master "Agis en tant que développeur QA Senior. Voici une erreur de ma console F12 : [ERREUR]. Voici le fichier concerné. Ne réécris pas tout le fichier, donne-moi juste la ligne exacte à modifier et explique pourquoi." ## 🎨 CSS & Responsive "Passe ce composant en Tailwind CSS mobile-first. Assure-toi que les boutons ont une zone de clic d'au moins 44px (norme Apple) et que le contraste passe l'audit d'accessibilité AA." ## 📝 Documentaliste "Écris les commentaires JSDoc pour toutes les fonctions de ce fichier. Explique le typage attendu en paramètres et le retour de la fonction."

Gagner du temps sur les projets répétitifs

Si vous créez souvent des Landing Pages, ne recréez pas tout le temps le Hero Header, les Features et le Pricing. Demandez à Codex :

"Crée-moi un template React de Landing Page avec Tailwind. Il doit inclure une section Hero, une section Fonctionnalités (3 colonnes) et un Footer. N'utilise que des composants fonctionnels purs."

Sauvegardez ce dossier et utilisez-le comme base pour tous vos futurs clients.

Les habitudes qui détruisent votre temps

Mauvaise habitude (Perte de temps)Bonne habitude (Gain de temps)
Mauvaise habitude (Perte de temps)Tout coder à la main (même le HTML vide)Bonne habitude (Gain de temps)Déléguer la structure "boilerplate"
Mauvaise habitude (Perte de temps)Taper le même prompt chaque jourBonne habitude (Gain de temps)Créer un fichier prompts.md
Mauvaise habitude (Perte de temps)Garder 20 fichiers ouverts dans VS CodeBonne habitude (Gain de temps)Fermer tout ce qui n'est pas lié à la tâche
Mauvaise habitude (Perte de temps)Ignorer la documentationBonne habitude (Gain de temps)Faire rédiger les Readme par l'IA
Mauvaise habitude (Perte de temps)Faire du "Copier-Coller" sans lireBonne habitude (Gain de temps)Demander des explications sur les points flous
Mauvaise habitude (Perte de temps)Tester tout le site à la fin du moisBonne habitude (Gain de temps)Tester chaque petit composant immédiatement
Mauvaise habitude (Perte de temps)Ne pas faire de commit (Peur de Git)Bonne habitude (Gain de temps)Faire un commit à chaque victoire technique
Mauvaise habitude (Perte de temps)Changer d'objectif en plein milieu d'un promptBonne habitude (Gain de temps)Finir la tâche A avant de passer à la B
Mauvaise habitude (Perte de temps)Utiliser Codex comme un moteur de rechercheBonne habitude (Gain de temps)L'utiliser comme un partenaire d'analyse
Mauvaise habitude (Perte de temps)Repartir de zéro à chaque projetBonne habitude (Gain de temps)Créer un dossier de composants réutilisables

Les 20 erreurs qui réduisent la productivité

  • 1. Changer de feature toutes les 10 min.
  • 2. Créer 5 chats Codex pour le même bug.
  • 3. Ne jamais tester sur mobile.
  • 4. Oublier de faire `npm install`.
  • 5. Ne pas relire le code généré.
  • 6. Ignorer les warnings de la console.
  • 7. Refactoriser par "caprice" esthétique.
  • 8. Mélanger logique DB et design HTML.
  • 9. Travailler fatigué à 2h du matin.
  • 10. Copier des erreurs sans le nom du fichier.
  • 11. Ne pas avoir de plan sur papier.
  • 12. Nommer ses variables `x`, `y`, `test`.
  • 13. Laisser des `console.log` partout.
  • 14. Ne pas utiliser Git.
  • 15. Faire un seul commit par semaine.
  • 16. Utiliser des librairies pour 3 lignes de code.
  • 17. Ne pas utiliser les snippets VS Code.
  • 18. Demander "rend le site plus beau".
  • 19. Coder sans définir la structure de données.
  • 20. Ne pas faire de pauses.

Atelier de Productivité

Exercice 1 : Le démarrage de projet
Situation : Vous devez créer un site vitrine de 5 pages.
La méthode Pro : Au lieu de coder l'Accueil, vous créez d'abord un fichier Layout (Menu + Footer). Vous le testez. Ensuite, les 5 pages hériteront de ce Layout. Temps gagné : 4 heures.

Exercice 2 : L'automatisation du SEO
Situation : Vous devez ajouter des Meta Descriptions à 50 pages.
La méthode Pro : Vous donnez le fichier de vos pages à Codex. "Génère un tableau JSON avec les slugs URL et une meta description SEO parfaite de 150 caractères pour chacun." Vous importez ce JSON dynamiquement.

Tableau de Rentabilité (ROI)

Bonne pratiqueTemps économisé / SemaineDifficulté
Bonne pratique1. OQAF (Planifier avant d'agir)Temps économisé / Semaine3 à 4 heuresDifficultéFacile
Bonne pratique2. Bibliothèque de PromptsTemps économisé / Semaine2 heuresDifficultéTrès Facile
Bonne pratique3. Composants isolés (React/Vue)Temps économisé / Semaine4 à 5 heuresDifficultéMoyenne
Bonne pratique4. Documentation automatiqueTemps économisé / Semaine1 à 2 heuresDifficultéFacile
Bonne pratique5. Tests automatisés par CodexTemps économisé / Semaine5 à 10 heuresDifficultéÉlevée
Bonne pratique6. Nommage rigoureux (Dossiers)Temps économisé / Semaine1 heureDifficultéFacile
Bonne pratique7. Variables globales (CSS/Root)Temps économisé / Semaine2 heuresDifficultéFacile
Bonne pratique8. Commits par petites touchesTemps économisé / Semaine3 heures (en cas de bug)DifficultéMoyenne
Bonne pratique9. Rafraîchir les conversationsTemps économisé / Semaine2 heures (IA plus précise)DifficultéTrès Facile
Bonne pratique10. Scripts Bash d'automatisationTemps économisé / Semaine2 à 5 heuresDifficultéÉlevée
Bonne pratique11. Checklists de déploiementTemps économisé / Semaine1 heureDifficultéFacile
Bonne pratique12. Mocking (Fausses données JSON)Temps économisé / Semaine3 heuresDifficultéMoyenne
Bonne pratique13. Fermer les onglets inutilesTemps économisé / Semaine1 heure (focus)DifficultéTrès Facile
Bonne pratique14. Audit avant refactoringTemps économisé / Semaine4 heures (évite de tout casser)DifficultéMoyenne
Bonne pratique15. Utilisation des raccourcis IDETemps économisé / Semaine2 heuresDifficultéMoyenne
Bonne pratique16. Templating de projets (Starters)Temps économisé / Semaine3 heures / projetDifficultéMoyenne
Bonne pratique17. Refus d'optimiser trop tôtTemps économisé / Semaine5 heuresDifficultéFacile
Bonne pratique18. Nettoyage progressif du codeTemps économisé / Semaine3 heures à long termeDifficultéMoyenne
Bonne pratique19. Formater son code (Prettier)Temps économisé / Semaine2 heuresDifficultéFacile
Bonne pratique20. Savoir faire une pause (Git Restore)Temps économisé / SemaineIncalculableDifficultéMentale

Conseils vitaux de Web-Shine

Bonnes pratiques

La régularité bat la vitesse.
Un développeur qui avance lentement mais qui teste et commite chaque petite brique finira toujours son projet 3 fois plus vite que celui qui génère 50 fichiers à l'aveugle et passe sa semaine à chasser des bugs invisibles.

FAQ

En arrêtant de coder les choses ennuyeuses (CSS basique, HTML de structure, requêtes classiques) pour vous concentrer sur la logique métier et l'architecture.
Absolument. Si vous tapez deux fois la même phrase dans la même semaine, c'est qu'elle doit finir dans un fichier `prompts.md`.
Un dossier racine par projet, avec son propre Git, et son propre fichier `.env`. N'ouvrez jamais deux projets dans la même fenêtre VS Code.
À chaque nouvelle fonctionnalité (ex: 'Création du panier' = 1 chat. 'Page de profil' = 1 autre chat).
En générant des composants réutilisables (ex: un composant `<Button>` unique que vous appelez partout) plutôt que de réécrire le HTML.
Demander à Codex d'auditer votre code : 'Voici ma fonction. Comment l'écrirais-tu pour qu'elle soit plus rapide et plus lisible ?'.
Demandez des scripts bash/node. 'Écris-moi un script qui redimensionne toutes les images du dossier /public en WebP'.
Fermez les fichiers sur lesquels vous ne travaillez pas. Le contexte envoyé à Codex restera propre et léger.
Parce que vous oublierez comment il fonctionne dans 3 mois. Codex peut écrire cette documentation à votre place en 5 secondes.
Ils lisent plus qu'ils ne tapent. Ils pensent l'architecture, délèguent le code fastidieux à Codex, puis relisent et testent le résultat.
Oui, dites : 'Voici ma liste de 50 fichiers. Propose-moi une arborescence claire et professionnelle pour les ranger'.
Sauvegardez-les dans un gestionnaire de notes (Notion, Obsidian) ou un raccourci clavier (TextExpander).
Vital. Demandez à Codex : 'Génère une checklist de 10 points à vérifier avant de mettre ce site e-commerce en ligne'.
Oui. Votre 'vous' du futur est un autre développeur. Demandez à Codex : 'Ajoute de la JSDoc à toutes ces fonctions'.
Oui, créez un dossier 'starter' avec vos dépendances préférées, poussez-le sur Github, et clonez-le pour chaque nouveau projet.
Si vous butez 30 minutes sur un bug, c'est le moment de dire à Codex : 'Explique-moi ce problème comme si j'avais 10 ans'.
Oui. Ctrl+P (recherche de fichier), Ctrl+Shift+F (recherche globale) et Ctrl+` (terminal) vous feront gagner 1 heure par semaine.
Il excelle pour générer les balises Meta, les alt d'images, et structurer sémantiquement les balises H1/H2/H3.
L'accumulation. Demandez régulièrement : 'Y a-t-il du code mort ou des boucles inutiles dans ce fichier ?'.
Non. La lisibilité et l'absence de bugs priment. La vitesse brute vient naturellement avec la méthode.

Ce qu'il faut retenir

À retenir
  • La productivité, c'est la méthode, pas la vitesse de frappe.
  • Automatisez le code "poubelle" (Mocks, CSS boilerplate, JSDoc).
  • Gérez vos conversations Codex comme des dossiers étanches (1 chat = 1 fonctionnalité).
  • Utilisez Git compulsivement pour créer des points de sauvegarde sûrs.

Vous avez maintenant l'état d'esprit et l'organisation d'un développeur expérimenté. Pour clôturer cette partie "Aller plus loin", le prochain chapitre va vous offrir le Saint Graal : une bibliothèque massive de plus de 100 prompts prêts à l'emploi pour toutes vos situations quotidiennes.