Développeur web, évite ces 25 erreurs de code sur ton portfolio

Par /
Linter

Tu es développeur web et tu rêves de décrocher le job de tes rêves ? Ton portfolio, c’est ta carte de visite, ton billet pour montrer au monde entier tes compétences et ton expérience. Alors pourquoi le négliger ?

Pas de panique, je suis là pour te donner quelques conseils pour booster ton portfolio et mettre toutes les chances de ton côté.

Je veux te dire, même les devs les plus expérimentés peuvent parfois faire des erreurs de débutant. C’est humain après tout ! Mais, il ne faut jamais sous-estimer l’importance de la qualité du code et des détails. Et soyons réalistes, viser la perfection absolue dans le code, c’est un peu comme essayer d’attraper un nuage. Ça peut être difficile, voire impossible.

Je t’encourage à faire de ton mieux et à t’améliorer constamment. C’est pour ça que je t’invite à jeter un œil à ces erreurs classiques que beaucoup de gens font, histoire de les éviter comme la peste !

Définir la langue utilisée dans le document

L’erreur <html lang="en"> sur une page française signifie que la langue de la page est définie comme l’anglais, alors qu’elle devrait être le français. Cela peut avoir plusieurs conséquences en référencement, accessibilité et expérience utilisateur.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Titre de la page</title>
</head>
<body>
  <h1>Ceci est une page en français</h1>
</body>
</html>

Utiliser des balises meta pertinentes

La balise méta http-equiv était autrefois utilisée pour indiquer à Internet Explorer (IE) comment rendre une page web. Elle n’est plus pertinente aujourd’hui.

La plupart des navigateurs modernes ignorent cette balise et rendent les pages Web en mode standard par défaut.

Avant 

<meta http-equiv="X-UA-Compatible" content="ie=edge">

Corrigé

<meta name="viewport" content="width=device-width, initial-scale=1">

L’attribut title fournit des informations supplémentaires sur le lien. C’est utile pour les utilisateurs qui ont des besoins spécifiques, tels que les lecteurs d’écran utilisés par les personnes malvoyantes. Bien qu’il ne soit pas obligatoire, son utilisation est recommandée pour assurer la conformité aux normes HTML et pour aider à fournir une meilleure expérience utilisateur globale.

Avant

<a href="index.php"><img src="img/logo.png" alt="Logo Mon site" id="logo"</a>

Corrigé

<a href="index.php"><img src="img/logo.png" alt="Logo Mon site" id="logo" title="Logo mon site"></a>

Centrer proprement ses éléments dans la page

L’utilisation de la classe « center » pour centrer le contenu d’un en-tête peut poser des problèmes d’accessibilité. Les lecteurs d’écran peuvent ne pas interpréter correctement le centrage, ce qui peut rendre la navigation sur le site Web difficile pour les personnes malvoyantes.

Le HTML est un langage sémantique, ce qui signifie que chaque élément a une signification spécifique. L’utilisation d’une classe « center » sur un élément header peut brouiller la sémantique du code.

Il existe des alternatives plus accessibles et plus sémantiques pour centrer le contenu d’un en-tête. Par exemple, tu peux utiliser la propriété CSS text-align: center ou la propriété margin: auto.

Avant

 <header class="center">

Corrigé après

header {
  text-align: center;
}

ou bien

header {
  margin: auto;
}

ou bien

.header-center {
  text-align: center;
}

...

<header class="header-center">
  <h1>Titre de l'en-tête</h1>
</header>

Utiliser la balise nav pour ses menus

L’utilisation du diviseur neutre <div> pour créer un menu est une mauvaise pratique car cela ne permet pas de définir la sémantique du contenu.

ll est important d’utiliser des balises HTML sémantiques pour décrire le contenu de votre page, car cela permet aux navigateurs et aux outils d’accessibilité de mieux comprendre la structure de votre site web.

L’absence de balises <ul> et <li> rend le menu inaccessible aux utilisateurs de lecteurs d’écran et d’autres technologies d’assistance.

Ne met pas de liens vide par exemple <a href= »# »>Accueil</a>

Avant sur un site one page avec des ancres de liens.

<div id="menu">
            <a href="#">main</a>
            <a href="#about">cv</a>
            <a href="#project">project</a>
            <a href="#contact">contact</a>
</div>

Corrigé après

<nav id="main-menu">
  <ul>
<li><a href="#top">Accueil</a></li>
    <li><a href="#cv">CV</a></li>
    <li><a href="#projets">Projets</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Ne pas oublier la balise main

Avant

<section id="main" class="center">
</section>

Après

<main>
</main>

Utiliser la balise paragraphe correctement

Les balises <p> sont destinées à encapsuler des paragraphes de texte. Tu ne dois pas les utiliser pour des éléments qui ne sont pas des paragraphes comme des listes par exemple.

Avant

<div class="mainlist">
                <p> Expérience alternance entreprise A </p>
                <p> Durée : 2 ans </p>
                <p> Début : Janvier 2024 </p>
                <p> Rythme : 2 semaines entreprise / 1 semaine école </p> 
</div>

Corrigé après

<div class="mainlist">
    <dl>
        <dt>Expérience alternance entreprise A</dt>
        <dd>Durée : 2 ans</dd>
        <dd>Début : Janvier 2024</dd>
        <dd>Rythme : 2 semaines entreprise / 1 semaine école</dd>
    </dl>
</div>

Ne pas laisser des balises d’image vides

Même si tu génères tes interactions avec JavaScript, il est essentiel d’éviter de laisser des balises d’image vides dans ton code HTML. Pour corriger cela, tu peux attribuer dynamiquement une source d’image et un texte alternatif à l’élément <img> à l’aide de JavaScript.

Avant

<div id="modal">
            <img src="" alt="">
</div>

Corrigé après

<div id="modal">
 <img id="modal-image" src="placeholder.jpg" alt="Image de la modal">
</div>

JavaScript associé

// Sélection de l'élément image modal
const modalImage = document.getElementById("modal-image");

// Définition de la source de l'image
modalImage.src = "chemin/vers/votre/image.jpg";

// Définition du texte alternatif de l'image
modalImage.alt = "Description de l'image";

Protéger ses liens cibles externes

L’attribut noopener empêche la page ouverte via le lien de naviguer vers une autre page en utilisant window.opener, ce qui peut être une vulnérabilité de sécurité.

L’attribut noreferrer empêche le navigateur de transmettre le referrer (l’URL de la page d’origine) à la page cible lorsqu’elle est ouverte via le lien.

Avant

<a href="assets/CV.pdf" target="_blank">CV</a>

Corrigé après

<a href="assets/CV.pdf" target="_blank" rel="noopener noreferrer">CV</a>

Utilisation excessive de id dans le CSS

Utiliser les sélecteurs d’ID (#) de manière excessive peut entraîner des problèmes de spécificité et rendre le CSS difficile à maintenir. Il est recommandé d’utiliser principalement des classes pour cibler les éléments.

Avant

/* Avant */
#stephane {
    font-size: 30px;
    /* Autres styles... */
}

Corrigé après

/* Après */
.name {
    font-size: 30px;
    /* Autres styles... */
}

Incohérences dans le nom des classes

 Il est recommandé d’utiliser des noms de classe plus descriptifs pour améliorer la lisibilité et la maintenabilité du code.

Avant après

.imgSlider{
}
.info{
}

Corrigé

/* Renommer .imgSlider en .carousel-container */
.carousel-container {

}

/* Renommer .info en .image-info-container */
.image-info-container {
   
}

Respecter l’ordre des déclarations pour les listes

La déclaration ul { margin: 0 !important; } devrait être placée avant la déclaration li { list-style: none; }. Cela garantit que la marge nulle sur les listes non ordonnées (ul) est définie avant de supprimer les puces (list-style) des éléments de liste (li). Cela peut aider à éviter tout effet indésirable lié à la marge par défaut des listes non ordonnées.

Avant

li {
  list-style: none
}
ul {
  margin: 0 !important
}

Après

ul {
  margin: 0 !important;
}
li {
  list-style: none;
}

Éviter de déclarer plusieurs fois les mêmes classes

Soit conscient des risques de duplication.

Erreur de duplication

/* Style global de la page */
.main-container {
}
/*quelques lignes plus bas */
.main-container {
}

Éviter @import dans le fichier CSS

Au lieu d’incorporer les polices Google Fonts via l’instruction @import dans votre fichier CSS, opte pour l’utilisation de la balise <link> dans la section <head> de votre fichier HTML pour importer les polices.

Cette méthode permet un préchargement efficace des polices, ce qui peut considérablement améliorer les performances de chargement de la page. De plus, il est recommandé d’éviter l’importation directe des polices depuis l’API Google Fonts en raison de préoccupations liées au RGPD. Privilégie plutôt l’utilisation de @font-face pour incorporer les polices de manière plus sécurisée et conforme aux normes de confidentialité.

Utiliser des couleurs valides en CSS

Dans les règles CSS, les couleurs doivent être spécifiées en utilisant le format RGB, RGBA, HSL, HSLA ou des noms de couleurs prédéfinis.

Avant

.form-contact {
  box-shadow: 0px 0px 25px 0px rgba(123.5, 123.5, 123.5, 0.28);
}

Après

.form-contact {
  box-shadow: 0px 0px 25px 0px rgba(123, 123, 123, 0.28);
}

Éviter l’utilisation excessive de !important en CSS

L’utilisation excessive de !important dans les règles CSS peut rendre le code difficile à gérer et à déboguer. Il est préférable d’éviter autant que possible l’utilisation de !important sauf en cas de réelle nécessité.

Avec !important, cette règle aura la priorité sur d’autres règles qui pourraient être définies pour l’élément.

Avant

.header {
  background-color: #ffffff !important;
}

Après corrigé en utilisant la spécificité

.header.site-header {
  background-color: #f00;
}

Regrouper les sélecteurs en utilisant des sélecteurs de parent plus génériques

Pour alléger le code CSS, tu peux utiliser des sélecteurs plus concis et éviter la répétition autant que possible. 

Avant mauvaise pratique sélecteurs spécifiques

h1 {
  color: red;
  font-size: 24px;
}

h2 {
  color: blue;
  font-size: 18px;
}

Après

.page-content h1,
.page-content h2 {
  color: #060957;
}

.page-content h1 {
  font-size: 24px;
}

.page-content h2 {
  font-size: 18px;
}

Utiliser la bonne syntaxe pour les commentaires

Dans ton CSS n’utilise pas ce // commentaire propre au JavaScript mais /* commentaire */

Utiliser des barres obliques slashes dans le chemin des fichiers en PHP

Tu ferras aussi bien attention à utiliser des barres obliques (slashes) au lieu de barres obliques inverses (antislashes) dans les chemins de fichiers est une convention de codage courante dans les langages Web comme PHP, ainsi que dans de nombreux autres langages de programmation. 

Les barres obliques sont le séparateur de chemin standard sur les systèmes d’exploitation basés sur UNIX (Linux, macOS) ainsi que sur Windows. En utilisant des barres obliques dans votre code, cela te garantit que le code fonctionnera correctement sur toutes les plateformes.

Avant

<?php require_once(__DIR__ . '\include\header.php'); ?>
<?php require_once(__DIR__ . '\include\modele.php'); ?>
<?php require_once(__DIR__ . '\include\oeuvres.php'); ?>

Après

<?php require_once(__DIR__ . '/include/header.php'); ?>
<?php require_once(__DIR__ . '/include/modele.php'); ?>
<?php require_once(__DIR__ . '/include/footer.php'); ?>

Utiliser des balises courtes pour l’encapsulation simple en PHP

Avant

<?php foreach ($workDetails as $work) { ?>
    <article class="work">
        <a href="work.php?id=<?php echo $work['id']; ?>">
            <img src="<?php echo $work['img']; ?>" alt="<?php echo $work['title']; ?>"/>
            <h2><?php echo $work['title']; ?></h2>
            <p class="description"><?php echo $work['author']; ?></p>
        </a>
    </article>
<?php } ?>

Après

<?php foreach ($workDetails as $work): ?>
    <article class="work">
        <a href="work.php?id=<?= $work['id'] ?>">
            <img src="<?= $work['img'] ?>" alt="<?= $work['title'] ?>"/>
            <h2><?= $work['title'] ?></h2>
            <p class="description"><?= $work['author'] ?></p>
        </a>
    </article>
<?php endforeach; ?>

Vérifier l’échappement des caractères en PHP pour assurer l’intégrité et la validité des données 

L’échappement des apostrophes (‘) dans les chaînes de caractères est important en PHP pour éviter toute erreur de syntaxe.

Echappement des guillemets simples

[
    'id'          => 1,
    'title'       => 'Espoirs entrelacés',
    'img'         => 'img/el-mekki.png',
    'author'      => 'El Mekki',
    'description' => 'El Mekki est un artiste peintre tunisien renommé. Sur cette œuvre, "Espoirs entrelacés", il exprime la résilience et l\'espoir à travers une représentation abstraite de motifs entrelacés, reflétant la diversité et la force de la culture tunisienne. Les couleurs vives et les formes dynamiques captivent le spectateur, évoquant un sentiment d\'espoir et de positivité malgré les défis. Cette peinture acrylique est un témoignage de l\'optimisme et de la créativité de l\'artiste face à l\'adversité.'
],

Echappement des guillemets doubles

$message = "C'est une \"citation\".";

Echappement des caractères de contrôle

$texte = "Ceci est une nouvelle ligne.\nCeci est une tabulation\t.";

Echappement des caractères spéciaux pour le HTML pour des raisons de sécurité

$titre = "L'œuvre 'Espoirs entrelacés' d'Espoirs entrelacés d'El Mekki";

// Échappement des caractères spéciaux pour une utilisation dans du HTML
$titreHtml = htmlspecialchars($titre);

echo "<p>Titre : $titreHtml</p>";

Echappement des caractères spéciaux pour les requêtes SQL pour des raisons de sécurité

$nom = "O'Connors";

// Échappement des caractères spéciaux pour une utilisation dans une requête SQL
$nomSql = addslashes($nom);

$requete = "SELECT * FROM utilisateurs WHERE nom = '$nomSql'";

// Exécution de la requête
// ...

Echappement pour les URLs pour la sécurité

$url = "https://www.example.com/page?param1=valeur1&param2=valeur2";

// Échappement des caractères spéciaux pour une utilisation dans une URL
$urlEncodee = urlencode($url);

echo "<a href='$urlEncodee'>Lien vers la page</a>";

Echappement pour les expressions régulières pour la prévention des injections de code

$texte = "Ceci est un exemple de texte";

// Échappement des caractères spéciaux pour une utilisation dans une expression régulière
$texteRegex = preg_quote($texte);

$motif = "/$texteRegex/";

// Recherche du motif dans le texte
// ...

Valider et filtrer les données provenant de $_GET pour la sécurité

Il est recommandé de valider et de filtrer les données provenant de $_GET avant de les utiliser. Il est très important pour des raisons de sécurité d’ assurer que la valeur de $_GET['id'] est sécurisée avant de l’utiliser pour accéder aux détails d’un objet.

Avant

// Récupérer l'ID depuis l'URL
$workId = isset($_GET['id']) ? $_GET['id'] : null;

Après

// Récupérer l'ID depuis l'URL
$workId = isset($_GET['id']) ? $_GET['id'] : null;

// Valider et filtrer l'ID de l'œuvre
$workId = filter_var($workId, FILTER_VALIDATE_INT);

Tester sur différents navigateurs

Installe et utilise plusieurs navigateurs populaires tels que Google Chrome ou Chromium, Mozilla Firefox, Safari, Microsoft Edge, Opera, etc. Voici une liste de navigateurs utiles pour le développeur.

Teste ton site web sur différents types d’appareils, y compris les ordinateurs de bureau, les ordinateurs portables, les tablettes et les smartphones.

Se limiter à une largeur fixe de 360px, comme la largeur d’un Galaxy S5, n’est pas une approche optimale pour tester le responsive de votre site web. De nombreux appareils mobiles ont des résolutions inférieures à 360px, et il est important de s’assurer que votre site s’affiche correctement sur tous les appareils.

Résolutions populaires en smartphone

  • iPhone SE (2022): 320 x 568 px
  • iPhone 13 Pro Max: 428 x 926 px
  • Samsung Galaxy S22: 375 x 812 px
  • Google Pixel 6 Pro: 393 x 890 px

Tablettes

  • iPad mini (6e génération): 810 x 1080 px
  • iPad Air (5e génération): 820 x 1180 px
  • Samsung Galaxy Tab S8: 800 x 1280 px
  • Microsoft Surface Pro 8: 1280 x 1920 px

Ordinateurs portables

  • MacBook Air (M2, 2022): 1366 x 816 px
  • Dell XPS 13 (2022): 1920 x 1200 px
  • HP Spectre x360 14 (2022): 1350 x 2160 px
  • Lenovo ThinkPad X1 Carbon Gen 10: 1440 x 2880 px

En plus de tester sur des résolutions spécifiques, tu peux également utiliser des outils de test de responsive tels que Responsive Checker, BrowserStack https://www.browserstack.com/live-product , Screenfly https://screenfly.org/, Responsivetestool https://responsivetesttool.com/ ou encore Responsively App https://responsively.app/

Utiliser des outils en ligne de revue de code

Revue de code intégrée dans GitHub

GitHub propose des outils de revue de code intégrés qui facilitent la collaboration et l’amélioration du code.

https://github.com/features/code-review/

La première étape consiste à créer une pull request, une proposition de modification du code d’un projet. C’est ce qui permet aux autres développeurs de consulter les modifications et de les commenter avant qu’elles ne soient fusionnées dans la base de code principale.

En plus des outils de revue de code intégrés, GitHub propose des outils de revue supplémentaires via sa place de marché.

https://github.com/marketplace/category/code-review

  • Coverity Scan : analyse votre code pour détecter les bogues et les vulnérabilités de sécurité.
  • DeepCode : utilise l’intelligence artificielle pour identifier les problèmes de code potentiels.
  • PullApprove : permet d’automatiser le processus de revue de code.
  • Applitools : utilise la vision artificielle pour identifier les problèmes d’interface utilisateur.

Comment ne plus jamais faire ces erreurs : intégrer les tests à son flux de travail même pour le HTML et CSS

Il est tout à fait envisageable d’intégrer HTMLHint et CSSLint à votre flux de travail en local ou sur GitHub en utilisant GitHub Actions.

Commence par installer Node.js et Yarn (ou Pnpm) installés sur ta machine. Logiquement tu les as déjà installés depuis les sites officiels respectifs : Node.js et Yarn.

Ajoute globalement HTMLHint et CSSLint en utilisant Yarn :

yarn global add htmlhint
yarn global add stylelint
installation htmlhint stylehint

Tu peux aussi ajouter htmlhint et stylehint comme dépendance spécifique pour ton projet.

yarn add htmlhint stylelint --dev

Lance les tests

htmlhint chemin/vers/votre/fichier.html
stylelint chemin/vers/votre/fichier.css

ou bien exécute HTMLHint pour vérifier votre code HTML avec la commande suivante :

htmlhint .

Pour vérifier le CSS

stylelint "**/*.css"

Il est recommandé de créer un fichier package.json car il est généralement utilisé pour définir les dépendances, les scripts et d’autres métadonnées de votre projet.

Dans ce fichier package.json tu crées des scripts pour exécuter les tests avec HTMLHint et CSSLint. Le point « . » signifie que tu cherches tous les fichiers html dans le dossier du projet et \ »**/*.css\ » tous les fichiers dans tous les répertoires et sous-répertoires (**/) du répertoire de travail actuel.

{
  "scripts": {
    "lint:html": "htmlhint .",
    "lint:css": "stylelint \"**/*.css\""
  }
}

Maintenant, tu peux exécuter ces scripts localement sur ta machine pour vérifier ton code HTML et CSS

yarn lint:html
yarn lint:css
test htmlhint

Lint:html est développé par le projet HTMLHint: https://htmlhint.com/.
Lint:css est développé par le projet stylelint: https://stylelint.io/.

Pour configurer HTMLHint et Stylelint de manière plus fine et adapter ses règles à tes besoins spécifiques, tu peux utiliser des fichiers de configuration.

A la racine du projet, crée un fichier .htmlhintrc. Rc signifie run command.

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "attr-no-duplication": true
}

Puis un fichier .stylelintrc

{
  "rules": {
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "font-family-no-duplicate-names": true,
    "declaration-block-no-duplicate-properties": true,
    "selector-pseudo-class-no-unknown": true,
    "selector-pseudo-element-no-unknown": true,
    "selector-type-no-unknown": true
  }
}

Règles possibles pour HTMLHint https://htmlhint.com/docs/user-guide/list-rules

Playground : https://htmlhint-playground.netlify.app/

Règles possibles pour StyleLint https://stylelint.io/user-guide/rules/

Playground : https://chimerical-trifle-8d3c21.netlify.app/

En conclusion

Pour détecter les erreurs courantes de syntaxe, il est préférable de choisir des outils pragmatiques comme un linter. Teste ton code JavaScript avec ESLint, le HTML et CSS avec l’extension navigateur Web Developer. Utilise les outils de validation : W3C Markup Validation Service que tu intègres directement à ton éditeur de code, HTMLHint et StyleLint ou PostCSS. PHP _CodeSniffer, PHP_CS_Fixer sont aussi outil d’analyse statique pour PHP ainsi que PHPStan qui va bien au-delà d’un linter.

Avec ces bonnes pratiques tu seras toujours en perpétuelle progression. Certains développeurs accumulent les erreurs au fil du temps, persistent et signent sans se remettre en question, prennent de mauvaises habitudes en restant dans leur zone de confort ou n’effectuent pas assez de revue de code.

Dans ce billet je parle spécifiquement des erreurs de code de base sans pousser dans le JavaScript, le CSS avancé ou le PHP.

Il est tout aussi important de vérifier en filigrane ta conception de page, d’alléger ton contenu. Dans ton portfolio tu expliqueras tes travaux en détail et tu choisiras d’exposer des projets de qualité. Prends le temps de vérifier tes liens, de te relire et surtout prends vraiment la décision de corriger régulièrement ton code.

Publications similaires

Retour en haut