Le développement frontal implique la création des aspects visuels et interactifs d'un site Web ou d'une application que les utilisateurs voient et avec lesquels ils interagissent. S'assurer que votre code frontal est optimisé, maintenable et conforme aux normes de l'industrie est essentiel pour créer une expérience utilisateur transparente. Voici quelques bonnes pratiques à garder à l'esprit lorsque vous travaillez sur des projets front-end : : L'utilisation de balises HTML sémantiques permet d'améliorer l'accessibilité et la lisibilité du code. Par exemple, au lieu d'utiliser une balise pour représenter un en-tête, vous pouvez utiliser la balise d'en- . Cela donne plus de sens au contenu et facilite l'interprétation par les lecteurs d'écran. Balises HTML sémantiques div header  <div class="header"> <h1>Welcome to my website</h1> </div>  <header> <h1>Welcome to my website</h1> </header> CSS, tels que SASS ou LESS, permettent d'utiliser des fonctionnalités et des techniques avancées en CSS qui ne sont pas disponibles en vanille CSS. Par exemple, vous pouvez utiliser des variables, des mixins et des règles imbriquées pour rendre les styles plus organisés et faciles à gérer. Préprocesseur CSS : Les préprocesseurs /* Css */ .btn { color: #ffffff; background-color: #000000; font-size: 16px; border-radius: 5px; } /* Sass */ $primary-color: #000000; $secondary-color: #ffffff; $font-size: 16px; $border-radius: 5px; .btn { color: $secondary-color; background-color: $primary-color; font-size: $font-size; border-radius: $border-radius; } : Un CDN est un réseau de serveurs qui diffusent du contenu en fonction de la localisation géographique de l'utilisateur. L'utilisation d'un CDN peut améliorer les performances en réduisant la distance entre l'utilisateur et le serveur. En outre, il permet la mise en cache des fichiers. Utiliser le réseau de diffusion de contenu (CDN) pour js, CSS et images  <script src="/scripts/jquery.js"></script>  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> : L'optimisation des images et autres éléments peut contribuer à améliorer les performances et la vitesse du site Web. Cela peut être fait grâce à des techniques telles que la compression d'images, l'utilisation de formats de fichiers d'image appropriés et le chargement différé d'images. Optimiser les images et autres éléments <img src="compressed-image.jpg" alt="A compressed image" loading="lazy"> : les images réactives sont des images mises à l'échelle de manière appropriée pour différentes tailles d'écran et différents appareils. Cela peut être fait en utilisant les et sur la balise . Images réactives srcset sizes img <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w" sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 1500px" src="image-large.jpg" alt="An image" > : Les graphiques vectoriels sont des images définies par des points et des chemins, plutôt que par des pixels, et peuvent être redimensionnées à n'importe quelle taille sans perte de qualité. Cela peut les rendre plus efficaces à utiliser, en particulier pour les graphiques qui seront affichés dans différentes tailles. Graphiques vectoriels <svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="#000000" /> </svg> : Un sprite d'image est une image unique qui contient plusieurs images plus petites, qui peuvent être affichées en utilisant la propriété en CSS. Cela peut réduire le nombre de requêtes HTTP nécessaires pour charger les images, améliorant ainsi les performances. Utiliser des sprites d'image background-position .icon1 { background-image: url('icons.png'); background-position: 0 0; } .icon2 { background-image: url('icons.png'); background-position: -20px 0; } Principes d'accessibilité Le respect des principes d'accessibilité contribue à rendre votre site Web plus inclusif et plus facile à utiliser pour les personnes handicapées. Ceci peut être réalisé grâce à des techniques telles que la fourniture de texte alternatif pour les images, l'utilisation d'une structure d'en-tête appropriée et l'ajout d'étiquettes de formulaire appropriées. L' fournit une étiquette pour un élément qui n'a pas d'étiquette visible. Cela peut être utile pour des éléments tels que des boutons ou des icônes qui n'ont pas d'étiquettes de texte. aria-label <button aria-label="Search"><i class="search"></i></button> Les indiquent les champs de formulaire obligatoires. L'attribut peut être utilisé pour indiquer qu'un champ de formulaire est obligatoire. Cela peut aider à alerter les utilisateurs et les technologies d'assistance que le champ doit être rempli afin de soumettre le formulaire. aria-required aria-required <label for="name">Name</label> <input type="text" id="name" name="name" required aria-required="true"> L'attribut permet de cacher un élément aux technologies d'assistance. Cela peut être utile pour les éléments décoratifs qui ne transmettent pas d'informations importantes. aria-hidden <img src="decorative.jpg" alt="" aria-hidden="true"> L' permet d'indiquer l'état d'un élément repliable. L'attribut peut être utilisé pour indiquer si un élément réductible, tel qu'un menu déroulant, est actuellement développé ou réduit. Cela peut aider à alerter les utilisateurs et les technologies d'assistance de l'état actuel de l'élément. aria-expanded aria-expanded <button aria-expanded="false" aria-controls="menu">Menu</button> <ul id="menu" aria-hidden="true"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> L' pour annoncer les mises à jour du contenu. L'attribut peut être utilisé pour indiquer que le contenu d'un élément peut être mis à jour de manière asynchrone. Cela peut être utile pour annoncer des mises à jour de contenu, telles que de nouveaux messages ou notifications, aux technologies d'assistance. aria-live aria-live <div id="notifications" aria-live="polite"> <p>You have 1 new message</p> </div> L' permet de fournir une description d'un élément. L'attribut dedicatedby peut être utilisé pour spécifier un élément qui fournit une description pour l'élément actuel. Cela peut être utile pour fournir un contexte ou des instructions supplémentaires pour les champs de formulaire ou d'autres éléments interactifs. aria-describedby aria-describedby <label for="email">Email address</label> <input type="email" id="email" name="email" aria-describedby="email-description"> <p id="email-description">Please enter your email address</p> Optimiser en JavaScript JavaScript est un langage de programmation puissant et flexible, mais il peut aussi être gourmand en ressources. Par conséquent, il est important d'optimiser votre code JavaScript afin de vous assurer qu'il s'exécute efficacement et qu'il n'affecte pas les performances globales de votre site Web ou de votre application. Voici quelques conseils pour optimiser les performances de JavaScript : : la suppression des espaces blancs inutiles, des commentaires et d'autres caractères inutiles peut aider à réduire la taille de vos fichiers JavaScript et à améliorer les temps de chargement. Réduisez votre code : Un compilateur JavaScript, tel que Babel ou TypeScript, peut aider à optimiser le code en le convertissant dans un format plus efficace. Compilateur JavaScript : Le thread principal est responsable de la gestion des interactions de l'utilisateur et du rendu de la page, il est donc important d'éviter de le bloquer avec des tâches longues ou gourmandes en ressources. Au lieu de cela, envisagez d'utiliser des travailleurs Web ou des fonctions asynchrones pour décharger ces tâches sur d'autres threads. Évitez de bloquer le thread principal vous permet de diviser le code JavaScript en plus petits morceaux qui peuvent être chargés à la demande. Cela peut améliorer les performances en réduisant la quantité de code qui doit être chargée et analysée initialement. Vous pouvez utiliser des outils tels que Webpack ou Rollup pour implémenter le fractionnement du code. La division du code Le différé vous permet de retarder le chargement du contenu jusqu'à ce qu'il soit nécessaire. Cela peut améliorer les performances en réduisant la quantité de données à charger initialement. Vous pouvez utiliser l'API pour implémenter le chargement différé. chargement IntersectionObserver // Lazy loading with IntersectionObserver const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // Load content observer.unobserve(entry.target); } }); }); document.querySelectorAll('[data-lazy]').forEach((element) => { observer.observe(element); }); La mise en permet de stocker des données dans le navigateur afin qu'elles puissent être réutilisées sans avoir besoin d'être à nouveau extraites du serveur. Cela peut améliorer les performances en réduisant le nombre de requêtes réseau à effectuer. Vous pouvez utiliser l' pour implémenter la mise en cache. cache Cache API if ('caches' in window) { caches.open('my-cache').then((cache) => { cache.add('/data.json').then(() => { console.log('Data added to cache'); }); }); } Outil de : Un outil de suivi des performances permet de suivre les performances du site et d'identifier les problèmes potentiels. Cela peut aider à optimiser les performances du site Web et à améliorer l'expérience utilisateur. Certains outils populaires incluent Lighthouse et SpeedCurve. suivi des performances : En tant qu'ESLint, vérifie le code pour les erreurs et suggère des améliorations, aidant à s'assurer que le code est cohérent et suit les meilleures pratiques. Outil Linting Conclusion Le développement frontal implique un large éventail de pratiques et de techniques qui peuvent aider à améliorer les performances et l'expérience utilisateur d'un site Web. Certaines des meilleures pratiques que vous pouvez suivre incluent l'optimisation des images et d'autres ressources, le respect des principes d'accessibilité et l'optimisation de JavaScript. En suivant ces meilleures pratiques, vous pouvez créer des sites Web de haute qualité et performants qui offrent une expérience utilisateur exceptionnelle.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Les meilleures pratiques pour le développement front-end

Trop long; Pour lire

Yan Tsishko

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Les meilleures pratiques pour le développement front-end

Trop long; Pour lire

Yan Tsishko

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES