Manifeste d’un développeur front-end éclairé

Travailler ensemble en respectant les standards du web

À l’origine d’internet il existait une personne qui possédait tous les pouvoirs. Cet individu avait le droit de vie ou de mort sur un site internet. Cette personne c’était le maître du web aka webmaster.
Il connaissait tous les raccourcis Frontpage, pouvait animer une page à l’aide d’images 16 couleurs en .gif, faire défiler ou clignoter du texte, et transférer ses fichier sur le web à l’aide de logiciels FTP.

Certains de ces individus se sont transformés en développeurs web. D'autres en découpeurs HTML, encore appelés intégrateurs. Ces magiciens du CSS étaient capables de cacher des liens dans des images à l'aide de leur logiciel de prédilection Dreamweaver. Ils ont aussi découvert le copier / coller et l'utilisaient à travers le web pour récupérer du code source JavaScript.

Mais ce temps est révolu…

Au XXIème siècle, l'évolution à fait un bon en avant et ces spécimens ont mutés en développeurs front-end. Ils invoquent leurs formules magiques depuis un terminal pour déployer leur site internet. Ils contrôlent le temps avec un système de versioning, ont appris à dompter des animaux comme grunt ou bower. Ils génèrent des applications grâce à leur formules magiques et leurs acolytes magiciens Yeoman ou Middleman.

Et ce n'est que le début…


Je partage ce guide pour une compréhension des meilleures pratiques en développement front-end.
Pour vous aider à fournir un contenu de haute qualité qui fonctionne mieux, atteint plus de personnes —pas seulement avec les navigateurs et appareils d’aujourd'hui, mais surtout ceux de demain.

Navigateurs

Liste des navigateurs web et personnages de south park

Les chiffres, les chiffres, les chiffres

Chaque projet est différent. Le plus important est de vérifier les données de navigation de vos utilisateurs. Avec ces chiffres il sera plus simple de décider quel navigateur vous supportez officellement.
Cependant j'ai de bonnes raisons de conseiller de mettre à jour, ou de passer à un navigateur respectueux des standards du web. La qualité de mon travail sera sublimée et je passe plus de temps à développper de nouvelles fonctionnalités.

Mon site doit-il s’afficher de la même façon sur chaque navigateur ?

NON !

Le rendu des éléments de formulaire doit être le même quelque soit l’os utilisé ?

NON !

Je veux que le rendu de mes pages soit strictement identique entre site et emails.

C’EST IMPOSSIBLE !
Une page doit jouer son rôle d'information et ne pas apparaître cassée. Le problème n'est pas le rendu des navigateurs, il s'agit d'offrir aux utilisateurs le meilleur contenu en fonction de leur appareil de navigation.

Je supporte actuellement

Les dernières versions de tous les navigateurs modernes en n'oubliant pas les navigateurs mobiles.

  • IE9+
  • Firefox 3.5+
  • Chrome 1+
  • Safari 4+
  • Opera 9+
  • iPhone et iPad iOS1+
  • Android téléphone et tablette 2.1+
  • Blackberry OS6+
  • Windows Phone 7.5+
  • Firefox mobile
  • Opera mobile

Pour supporter les anciennes version d'internet explorer (pour IE 6-8) il existe des solutions, mais cela demande du temps supplémentaire pour mettre en place ces systèmes.

Tester les différentes version d'Opera et Opera mobile est possible depuis un ordinateur de bureau. L' émulateur Opera mobile embarque Dragonfly, un bon outil de debug.

Le SDK de l'iPhone est livré avec Safari Mobile, mais il est disponible seulement sur mac. Si je n'ai pas de mac je teste sur de vrais appareil. J'active le rapport d'erreurs dans les paramètres de Safari pour ne rien laisser passer.

Je teste le code front-end de mon application web dans tous ces navigateurs pour s'assurer du fonctionnement voulu.

  • Je teste ce qui se passe à différentes résolutions d'écran et avec différentes quantité de contenu.
  • JavaScript affiche des erreurs si quelque chose ne va pas, la plupart du temps.

Mobile

Le mobile est extrêmement important aujourd'hui. Il sera bientôt plus important que l'ordinateur.
Je fais une veille technologique pour revoir régulièrement mon support mobile et suivre l'évolution de l'industrie.

Les choses simples que je peux faire

  • Optimiser les styles pour les petits écrans avec des requêtes @media et la balise meta viewport
  • Ajouter le support du tactile -avec des zones de 44px x 44px
  • Ne pas faire faire confiance à :hover , ou aux événements mouseover pour obtenir du contenu.
  • Ne jamais utiliser de popups
  • Éviter les zones avec défilement du contenu. Je peux coder un hack pour Safari Mobile avec les événements tactiles et transitions CSS, mais ce n'est pas facile
  • Optimiser la taille de l'application pour garder la bande passante au minimum

Les standards du web

Le célèbre "écrire une fois, déployer partout" est l'un des grand objectif du mouvement des standards du web. La compatibilité entre navigateurs est beaucoups plus facile aujourd'hui qu'il ne l'a jamais été. Mon challenge actuel est d'être compatible avec les différents appareils du marché.

Ma bible est la spécification fournie par le World Wide Web Consortium. Le W3C et le WATWG sont des groupes qui travaillent à la grande question "Qu'est-ce que le Web devrait être ?". Ils publient des normes et des API pour que les développeurs les mettent en place sur les navigateur. Ces groupes sont ouverts à tous et chacun peut y contribuer.

Suivre les gurus de la communauté

Suivre les changements et être à l’écoute des designer et développeurs est important.

Les personnes que je recommande @paul_irish @leaverou @brad_frost @ResWebDes @chriscoyier @snookca @aarron @davidwalshblog

Je lis régulièrement et en entier les meilleurs articles de Smashing Magazine.

Je ne participe pas à l'hystérie collective de l'achat de vêtement pendant les soldes. Mon hystérie personnelle pendant cette période est l'achat compulsif de livres chez sitepoint .

Moteurs de rendu

Le moteur de rendu d’un navigateur interprète HTML, CSS, et d’autres standards comme XSLT, SVG, et converti tout ça en pixels.

Comprendre les différences et les bizarreries de ces 4 moteurs de rendu me permet de réduire le temps nécessaire à la mise en page et aux tests de compatibilité.

Les 4 fantastiques

Moteur de renduNavigateur
TridentInternet Explorer
GeckoFirefox
WebkitSafari & tous les appareils Apple
BlinkChrome et les appareils Android, Opera
Il est plus productif, à long terme, de construire l'avenir plutôt que de corriger les erreurs du passé.

HTML

Je respecte le marquage HTML car ce langage permet aux navigateurs d'interpréter le contenu afin de l'afficher pour l'utilisateur.

Si c'est un titre j'utilise un titre

Si ce sont des données tabulaires j'utilise un tableau

Si c'est une liste de liens, j'utilise une liste

Sémantique

  • Les titres h1 à h5 permettent de mettre en avant le contenu pour une navigation plus facile
  • Quand un lecteur d'écran rencontre un table, il l'interprète pour donner des informations de navigation à la personne aveugle.
  • Quand un utilisateur clique sur un label for="email" l'input associé gagne le focus input id="email"

HTML orphelin

Mon HTML fonctionne sans la présence de CSS ou de JavaScript. Mon contenu doit être accessible, la soumission de mes formulaires doit fonctionner. Pour tester la qualité de mon HTML, je désactive les images, le CSS et le JavaScript pour vérifier la cohérence de mon contenu.

Coder mon HTML sous forme de modules me permet une évolution de l'interface sans avoir à tout réécrire.

Quelle version ?

J'utilise HTML5, même si respecter des versions n'est pas le plus important. Les navigateurs comprennent et supportent n'importe quel marquage, indépendament du doctype utilisé.

Un doctype est obligatoire pour forcer les navigateurs à utiliser un moteur de rendu et prévénir le mode quirks avec Internet Explorer

  <!DOCTYPE html>
  <html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>I ♥ HTML</title>
    <link rel="stylesheet" href="application.css">
  </head>
  <body>

    <h1>HTML5 Forever</h1>

    <script src="application.js"></script>
  </body>
  </html>

Bonnes pratiques

  • J'utilise le moins d'éléments possible. Plus le HTML est léger, plus il est facile de travailler avec
  • Je n'oublie pas les vieux navigateurs, mais je teste le marquage HTML5 dès que possible
  • Je respecte l' utf-8 pour l'encodage des caractères
  • Je ne code jamais mes styles de façon inline. Cette recommandation est aussi applicable aux évènements JavaScript

Feuilles de style

CSS maintenable

  • Je conserve mon CSS complètement séparé du HTML
  • Je code des modules pour le système (reset, grilles, formulaires, typographie, …)
  • Je respecte la cohérente de ma syntaxe pour .class-name et #my-id
  • Ma priorité est de coder pour les navigateurs respectueux des standards. Je fixe les bugs pour Internet Explorer par la suite
  • Je partage mon expérience avec la communauté sur Guide CSS

Internet Explorer ? Nous avons un problème

Je remercie chaque jour les navigateurs modernes d'avoir une certaine cohérence. Je n'ai jamais eu besoin de hack pour règler un problème sur un navigateur spécifique autre que IE.

Sans Internet Exporer, le développement front-end serait un jeu d'enfant.

Rendre IE Compatible avec lui-même

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

Pour tester IE, je démarre de la dernière version disponible pour remonter dans le temps au fur et à mesure.
Je n'utilise plus la balise chrome=1 qui n'est plus supporté par Google.

Les commentaires conditionnels pour Internet Explorer

J'utilise les conseils de Paul Irish pour corriger les problèmes de CSS avec internet explorer.

  <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
  <!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
  <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

Si je remplace mon en-tête HTML avec le code qui précède, je peux utiliser des classes pour cibler des versions spécifiques.
Par exemple pour cibler IE8 :

  .ie8 .m-manifest { float: left; width: 100%; }

Media queries

Je délivre des styles spécifiques au différents appareils. Cette propriété me sert à identifier :

  • Écran ou print
  • Hauteur et largeur
  • Orientation - portrait ou paysage ?
  • Résolution d'écran

J'optimise les différents styles pour les différents appareils.

  .large-6.columns {
    width: 50%;
    display: block;
    float: left;
  }

  @media only screen and (max-width: 640px) {
    /* Remplacement des colonnes pour n'en afficher qu'une seule */
    .columns {
      width: auto;
      float: none;
    }
  }

La balise meta viewport est également nécessaire pour gérer correctement l’affichage des appareil mobile ainsi que la version de bureau.

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

Bonnes pratiques

JavaScript

JavaScript vient en complément de la base HTML et CSS. Il améliore l'expérience et le comportement de la page utilisateur, c'est tout.

En quoi JavaScript est-il le meilleur ?

  • Interaction utilisateur
  • Expérience utilisateur
  • Comportement dynamique
  • Animation
  • Rendre les pages plus faciles d'utilisation
  • Aide à l'accessibilité -ex ajouter le support du clavier
  • Ajouter des fonctionnalités pour les vieux navigateurs avec des polyfills

Amélioration progressive

Ce concept est important. Le teste ma fonctionnalité car il est possible que certains navigateurs ne la prenne pas en charge. Si elle est supportée l'utilisateur en bénéficie, dans le cas contraire ma page fonctionne toujours.

J'utilise JavaScript de cette façon, cela augmente la qualité de mon code et empêche atrocités comme :

  <a href="javascript:myBullshitFunction('sucks', true);"> Cliquez ici </a>

Cela signifie que si quelque chose se casse, la page continue de fonctionner sans les améliorations.
L'amélioration progressive facilite également la maintenabilité. En séparant les scripts de la structure HTML je n'ai pas besoin de chercher dans tous les documents pour les appels de fonction.

API propre

Je ne m'encombre pas de la portée globale, je conserve donc un superbe nommage court pour mes méthodes et mes variables.

  var Toggler = {
    open: function() {},
    close: function() {},
    toggle: function() {}
  }

Arguments optionnels

J'ajoute seulement les paramètres nécessaires comme arguments. Pour un code plus clair, j'encapsule mes paramètres dans un objet options.

  function drawCircle(x,y,radius,options) {
    options = options || {};
  }

Bonnes pratiques

  • Favoriser les Frameworks et la pratique du code DRY
  • Éviter le JavaScript embedded et bannir le inline
  • Garder une portée globale propre, utiliser des namespaces
  • Toujours être sur la défensive, en utilisant des fonctions de détection
  • Tester la performance dans tous les navigateurs cités plus haut -utiliser console.time pour traquer les goulets d'étranglement.
  • Minimiser le nombre d'événements sur une page, utiliser la délégation des événements
  • Conserver les composants indépendants dès que possible
  • Précéder chaque déclaration de variable par var

Framework

Si vous voulez utiliser une librairie vous devez la lire, la comprendre, être d'accord avec elle, et ne pas être capable d'en écrire une meilleure quand vous êtes en forme. @sentience

Les frameworks ne sont pas mauvais. Il permettent de gagner du temps, corriger des bugs de compatibilité, et d'apprendre de nouvelles choses. Mais ils ajoutent énormément de fonctionnalités qui complexifient votre application. Prenez du temps pour les étudier avant de les utiliser complètement.

Le cas Javascript

Je choisis un framework principal, ajoute les librairies spécifiques qui ne sont pas embarqués avec le framework seulement si elles sont nécessaires .
Gestion des effets et des animations, visualisation des données, SVG et polyfill (Ajouter des fonctionnalités qui ne sont pas supportés par certains navigateurs)

Lire, collaborer et contribuer aux projets open source

Les frameworks open source sont des produits crées par des passionnés. Ces personnes qui s'investissent créent de bonnes choses.

Je continue de suivre les bibliothèques principales comme jQuery, d3js, ainsi que mon framework front-end de prédilection Foundation.

Je vais aux conférences de barbus pour rencontrer des super-héros comme Christian Heilmann.

Créer ses propres outils.

Il existe beaucoups d'outils dehors. Mais dès que j'identifie un besoin j'essaye de créer ma propre librairie, application, site-web pour y remédier (responsiveicon.fr, pokemonbreakpoint.fr, …)

Performance

Quand il s'agit de naviguer sur le web, être rapide, c'est mieux. Joseph Scott

Les meilleures pratiques de Yahoo

L'équipe YUI a réalisé beaucoup plus de recherches sur la performance du front-end que n'importe qui. Leur article reste une référence que je conseille à n'importe qui.

Steve Souders est mon maître jedi en ce qui concerne la performance des sites internet.

Développer des évènements intelligents

Je réduis au minimum la quantité d'écouteurs d'événement dans une page avec la délégation de l'événement.

A l'aide de convention de nommage précises, je gère les occurrences de cet événement dans la page.

Je n'oublie pas de mettre en cache mes objets dans des variables afin de minimiser les accès au DOM.

  • Minimiser les requêtes HTTP

    Je combine, minifie et Gzip tous les assets de mes sites (Feuilles de styles et scripts). J'utilise des images. Ces optimisations permettent de réduire le nombre d'allers-retours vers le serveur.

  • Utiliser un CDN

    Tous mes assets sont hébergés sur un serveur spécifique comme Cloudfront. Je n’oublie pas que le cache est mon ami — notamment pour les éléments récurrents.

  • Feuille de styles au début

    Les feuilles de styles doivent êtres appellées le plus tôt pour permettre un rendu progressif de la page.

  • Scripts à la fin

    Les balises script bloquent les téléchargements parallèles, les mettre en dernier permet aux autres ressources d'être téléchargées en premier.

  • Éviter redirections

    Elles ralentissent l'expérience utilisateur.

  • Réduire le nombres d'élément du DOM

    Des pages plus petites avec moins d'éléments sont plus rapides à parcourir et modifier. CQFD.

  • Bannir les iframes

    Même si elles sont vides, c'est très coûteux car ce sont de nouvelles fenêtres, qui bloquent l'événement onload de la page.

  • Supprimer les filtres IE en CSS

    Les filtres sont des "caractéristiques particulières" en CSS pour IE, ils ralentissent la page, donc à utiliser avec parcimonie.

  • Optimiser les images

    Je met en place des traitements par lot avec le compresseur d'image YUI, ImageOptim ou des générateurs de sprite. Je les utilise pour avoir une taille d'image aussi faible que possible tout en conservant leur qualité.

  • Conserver ses composants en dessous de 25 Ko

    L'iPhone ne met pas en cache quoi que ce soit plus grand que 25 Ko non compressé.

  • Pas de 404s

    Avec les google webmaster tools j'identifie et supprime ces déplacements inutiles vers le serveur.

  • Réduire la taille des Cookies

    Transféré dans les en-têtes de page, je supprime les cookies inutiles, en conservant une petite taille et je fixe une date d'expiration.

HTML5 & CSS3

Je travaille dur jour après jours en respectant ces principes

  • CSS et HTML codé à la main
  • Multi-navigateurs
  • Multi-appareils
  • CSS structuré et optimisé
  • Intégration sémantique avec respect du SEO
  • Conforme aux standards du web

Publier des sides-projects

Créer de petites applications me permet de tester le comportement des nouvelles API en cours de spécification. La meilleure façon de rester à jour est d'apprendre comment les utiliser en codant. Si je ne pratique pas, j'oublie… Pour me rapppeller la mémoire, je peux toujours visiter caniuse.

Nouveaux jouets

J’utilise les nouvelles possibilités offertes par ces technologies mais je garde en tête le concept d’amélioration progressive. Construire des pages identiques n’est pas le but. Je ne me repose pas sur HTML5 et CSS3 pour une fonctionnalité importante de la page.

CSS3 peut être utilisé, mais je traite toujours ses fonctionnalités comme des récompenses visuelles pour les utilisateurs. Je met en place tous les préfixes pour les différents navigateurs dans l’ordre alphabétique avec la version normale en dernier.

  .m-image:hover {
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

HTML5 peut être utilisé, mais mettre en place des polyfill pour certaines fonctionnalités se fait au détriment de la performance.

Signataire du extensible web manifesto

Je soutiens les principes d'un web extensible. Aujourd'hui, la plupart des nouvelles fonctionnalités nécessitent des mois des années de normalisation, suivie par la mise en oeuvre par les éditeurs de navigateurs, et ensuite implémentées par les développeurs sous forme d'itérations.

Je préfère tester ces nouvelles fonctionnalités grâce au javaScript. En itérant ce cette façon, je développe avec une vision des standards qui seront disponible pour un environement de production dans l'avenir .

Bonnes pratiques

  • Détection des fonctionnalités
  • Utiliser CSS3 comme récompense pour les navigateurs modernes
  • Utiliser des polyfill HTML5 seulement s'ils sont assez abouti

Accessibilité

L'accessibilité compte, C'est dans mon ADN car je crois en la vision de la fondation Mozilla.

Internet doit enrichir la vie de tous Mozilla

Humain

Ecrire du HTML et du CSS sémantique, flexible avec une grille et une taille évolutive doit être la norme. Je n'oublie pas que javascript peut faire des choses fantastiques avec les raccourcis claviers pour rendre mon application web le plus accessible possible.

Ce n'est pas toujours compliqué de faire quelque chose d'accessible. Je me demande toujours comment je peux rendre l'interaction des pages plus fluides

Déficience visuelle

J'utilise un schéma de couleur simple et correctement contrasté. Certaines personnes sont atteinte de daltonisme, mais la déficience visuelle existe aussi si l'on regarde son appareil mobile en plein soleil.

Tableaux et formulaires accessibles

Je conserve des tableaux simples avec une seule entête. J’utilise la balise th pour les cellules de titrage avec une portée appropriée.

  <table>
    <tr>
      <th scope="col"> Nom </th>
      <th scope="col"> Métier </th>
      <th scope="col"> Date de naissance </th>
    </tr>
    <tr>
      <th scope="row"> Léonard De Vinci</th>
      <td> Inventeur </td>
      <td> 15 avril 1452 </td>
    </tr>
  </table>

Associer le label à son input avec l’attribut for est la première étape pour avoir des formulaires accessibles.

  <label for="email"> Adresse email </label>
  <input id="email" type="email">

Déficients moteurs

J’apprécie de gagner du temps pendant mes recherches sur Google en navigant avec tab et les flèches directionnelles. Je n’oublie pas que certaines personnes consomment obligatoirement le web de cette façon. Pour cela je met en place les attributs tabindex et accesskey.

Cohérence de l’interface

Ce n’est peut être pas évident pour tout le monde, mais il est prouvé qu’avoir une interface cohérente aide les utilisateurs à accéder à ce qu’ils souhaitent. Pour atteindre cet objectif, je réalise des guides de style, quelque soit la taille de mes projets.

WAI ARIA

Les attributs ARIA peuvent aider à expliquer les changements dynamiques de la page, réalisé en javascript pour les utilisateurs de technologies d’assistance.

J’ai comme exemple cet excellent article des intégristes, introduction à WAI ARIA.

Bonnes pratiques

  • Ajouter des attributs alt, des formulaires et tableaux accessibles
  • Penser à Ajax et aux lecteurs d’écran —Comment alertent-il l’utilisateur du contenu modifié ? Ajouter des alternatives clavier à tous les événements de la souris, ne pas oublier les touches d’accès
  • Coder ses feuilles de styles avec un contraste élevé, un rythme typographique évolutif avec des mesures en em
  • Évitez d’utiliser seulement une couleur pour les informations critiques —par exemple rouge = mauvais, vert = bon. Complétez avec une icône