Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Amélioration de la Qualité du Code</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for elements that can't be done with Tailwind */ | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| tab-size: 2; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b21a8 0%, #1e40af 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Animation for checklist items */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-checklist li { | |
| animation: fadeIn 0.3s ease forwards; | |
| } | |
| .animate-checklist li:nth-child(1) { animation-delay: 0.1s; } | |
| .animate-checklist li:nth-child(2) { animation-delay: 0.2s; } | |
| .animate-checklist li:nth-child(3) { animation-delay: 0.3s; } | |
| .animate-checklist li:nth-child(4) { animation-delay: 0.4s; } | |
| .animate-checklist li:nth-child(5) { animation-delay: 0.5s; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header Section --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-12"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <h1 class="text-4xl font-bold mb-2">Qualité du Code</h1> | |
| <p class="text-xl text-purple-200">Bonnes pratiques et améliorations</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="themeToggle" class="bg-white text-purple-800 px-4 py-2 rounded-full font-semibold hover:bg-purple-100 transition"> | |
| <i class="fas fa-moon mr-2"></i>Mode Sombre | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-12"> | |
| <!-- Introduction Section --> | |
| <section class="mb-16"> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-6"> | |
| <i class="fas fa-star text-yellow-400 mr-3"></i>Pourquoi améliorer la qualité du code? | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="text-gray-700 mb-6 leading-relaxed"> | |
| Un code de qualité est essentiel pour maintenir un projet durable, évolutif et facile à comprendre. | |
| Cela réduit les bugs, facilite la collaboration et diminue les coûts de maintenance à long terme. | |
| </p> | |
| <div class="bg-purple-50 p-6 rounded-lg border-l-4 border-purple-500"> | |
| <h3 class="font-bold text-purple-800 mb-3">Citation importante</h3> | |
| <p class="text-purple-700 italic"> | |
| "Tout codeur peut écrire du code que l'ordinateur peut comprendre. Les bons programmeurs écrivent du code que les humains peuvent comprendre." | |
| <span class="block mt-2 text-right">- Martin Fowler</span> | |
| </p> | |
| </div> | |
| </div> | |
| <div> | |
| <img src="https://images.unsplash.com/photo-1555066931-43605d967585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Code quality illustration" | |
| class="w-full h-auto rounded-lg shadow"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Checklist Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-8 text-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i>Checklist d'Amélioration | |
| </h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-code text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Lisibilité</h3> | |
| </div> | |
| <ul class="space-y-3 animate-checklist"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Noms de variables explicites</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Indentation cohérente</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Commentaires pertinents</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-cubes text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Structure</h3> | |
| </div> | |
| <ul class="space-y-3 animate-checklist"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Découpage en petites fonctions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Éviter la duplication (DRY)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Architecture modulaire</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Robustesse</h3> | |
| </div> | |
| <ul class="space-y-3 animate-checklist"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Gestion des erreurs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Validation des entrées</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Tests unitaires</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Code Examples Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-8 text-center"> | |
| <i class="fas fa-laptop-code text-blue-500 mr-3"></i>Exemples Concrets | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="grid md:grid-cols-2 gap-0"> | |
| <!-- Bad Code Example --> | |
| <div class="p-6 border-b md:border-b-0 md:border-r border-gray-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-times-circle text-red-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">À éviter</h3> | |
| </div> | |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg code-block text-sm overflow-x-auto"> | |
| <pre><code>function p(d) { | |
| let r=0; | |
| for(let i=0;i<d.length;i++) { | |
| r+=d[i].p; | |
| } | |
| return r/d.length; | |
| }</code></pre> | |
| </div> | |
| <div class="mt-4 text-red-600"> | |
| <p class="font-semibold">Problèmes :</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Noms de variables obscurs</li> | |
| <li>Pas de gestion d'erreur</li> | |
| <li>Fonction fait plusieurs choses</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Good Code Example --> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">À privilégier</h3> | |
| </div> | |
| <div class="bg-gray-800 text-gray-100 p-4 rounded-lg code-block text-sm overflow-x-auto"> | |
| <pre><code>/** | |
| * Calcule la moyenne des prix d'un tableau de produits | |
| * @param {Array<Product>} products - Tableau d'objets produits | |
| * @returns {number} La moyenne des prix | |
| * @throws {Error} Si le tableau est vide ou invalide | |
| */ | |
| function calculateAveragePrice(products) { | |
| if (!Array.isArray(products) || products.length === 0) { | |
| throw new Error('Le tableau de produits doit contenir au moins un élément'); | |
| } | |
| const total = products.reduce((sum, product) => { | |
| return sum + (product.price || 0); | |
| }, 0); | |
| return total / products.length; | |
| }</code></pre> | |
| </div> | |
| <div class="mt-4 text-green-700"> | |
| <p class="font-semibold">Améliorations :</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Noms explicites</li> | |
| <li>Documentation</li> | |
| <li>Gestion des erreurs</li> | |
| <li>Fonction pure</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tools Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold text-purple-900 mb-8 text-center"> | |
| <i class="fas fa-tools text-orange-500 mr-3"></i>Outils Utiles | |
| </h2> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- ESLint --> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center card-hover"> | |
| <div class="bg-purple-100 p-4 rounded-full mb-4"> | |
| <i class="fas fa-broom text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">ESLint</h3> | |
| <p class="text-gray-600 mb-4">Analyse statique pour JavaScript</p> | |
| <button class="mt-auto bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-700 transition"> | |
| <i class="fab fa-github mr-2"></i>Voir sur GitHub | |
| </button> | |
| </div> | |
| <!-- Prettier --> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center card-hover"> | |
| <div class="bg-blue-100 p-4 rounded-full mb-4"> | |
| <i class="fas fa-code text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Prettier</h3> | |
| <p class="text-gray-600 mb-4">Formateur de code automatique</p> | |
| <button class="mt-auto bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-blue-700 transition"> | |
| <i class="fab fa-github mr-2"></i>Voir sur GitHub | |
| </button> | |
| </div> | |
| <!-- SonarQube --> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center card-hover"> | |
| <div class="bg-green-100 p-4 rounded-full mb-4"> | |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">SonarQube</h3> | |
| <p class="text-gray-600 mb-4">Analyse de qualité complète</p> | |
| <button class="mt-auto bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-green-700 transition"> | |
| <i class="fas fa-external-link-alt mr-2"></i>Visiter le site | |
| </button> | |
| </div> | |
| <!-- Jest --> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center card-hover"> | |
| <div class="bg-red-100 p-4 rounded-full mb-4"> | |
| <i class="fas fa-vial text-red-600 text-2xl"></i | |
| </html> |