La trousse à outils du développeur HTML5

Le monde du web est en pleine effervescence avec la mise au point en parallèle des normes HTML5, CSS3 et ECMAScript 6. Dans le même temps, les développements web se font plus diverses, intégrant maintenant des notions telles que le responsive design, la mobilité, ou l’hypermedia.

Les frontières bougeant rapidement, il devient parfois difficile de suivre l’actualité et de se former efficacement sur les nouveautés et sur l’utilisation des nouveaux outils, à moins d’avoir le courage d’aller lire le document de normalisation.

C’est pourquoi je vous propose aujourd’hui une liste de ressources qui vous permettront de vous tenir à jour, et peut-être de découvrir de quoi sera fait le monde HTML5 de demain.

Les sites web pour se documenter

Que vous vouliez vérifier la syntaxe d’une fonction JavaScript ou simplement apprendre à utiliser de nouvelles fonctionnalités, le web est maintenant riche de ressources qui vous permettront de creuser en profondeur aussi bien les anciens sujets que les toutes dernières nouveautés de la norme HTML5.

  • W3Schools, qu’on ne présente plus tant il a permis de mettre le pied à l’étrier de toute une génération de développeurs web. Le site propose toute une section consacrée à HTML5, qui parle essentiellement des éléments de la norme qui sont d’ores et déjà stabilisés. Pour l’anecdote, contrairement à ce que croient beaucoup de développeurs, le site W3Schools n’est en aucun cas associé au W3C, l’organisme qui régit la norme HTML5. Il s’agit d’une entité totalement indépendante.
  • Mozilla Developper Network (MDN), un effort de la fondation Mozilla, bien connue pour son navigateur Firefox. Ce site propose une documentation riche et très complète sur tout ce qui touche au HTML5, y compris ses aspects toujours en cours de normalisation. De nombreux tutoriaux permettent de mettre directement les mains dans le cambouis, avec des exemples de code clairs et pédagogiques, ce qui est toujours appréciable. MDN a par ailleurs le bon goût de ne pas se limiter aux fonctionnalités supportées par Firefox, mais au contraire de proposer pour chacune d’entre elles un tableau établissant quel navigateur les supporte, et les éventuels cas particuliers (fonctionnalité supportée partiellement).
  • HTML5 Rocks, un site supporté par Google qui propose des articles sur différents sujets autour du HTML5. Le site est conçu sur un principe de communauté ouverte où chacun est libre de proposer de nouveaux articles ou de corriger les articles plus anciens, par le biais d’un repo GitHub. On trouve quelques belles plumes sur ce site, comme Paul Irish ou Paul Lewis.

Les sites pour juger la compatibilité

Le principal problème avec lequel le développeur HTML5 doit composer, est la notion de compatibilité des navigateurs avec les fonctionnalités HTML5. De cette compatibilité va dépendre la nécessité d’utiliser ou non des polyfills, et d’appliquer les principes de graceful degradation et d’amélioration progressive.

  • Can I Use propose une matrice des fonctionnalités du monde HTML5, et des différents navigateurs du marché. Il vous permet donc d’un seul coup d’œil de savoir quel navigateur supporte quelles fonctionnalités. Ce site est rapidement devenu un incontournable, car nous sommes dans une période de transition où il est très important de faire attention à ce que les aspects de la norme HTML5 (ou de ses cousines CSS3 et ECMAScript 5) que nous souhaitons utiliser dans nos développements sont bien supportés par le parc de navigateurs visé. Dans ce domaine, Can I Use est la référence absolue. Il est très clair, facile à utiliser avec son moteur de recherche, et surtout il a le mérite d’être très régulièrement mis à jour, aussi bien avec de nouvelles fonctionnalités en cours de normalisation, qu’avec les nouvelles versions des navigateurs mises sur le marché.
  • QuirksMode est un bon complément à Can I Use. Le site existe depuis plus longtemps, et s’avère parfois plus précis pour expliquer comment sont supportées certaines vieilles fonctionnalités par de non moins anciens navigateurs. Le site est aussi très bavard pour qui s’intéresse à l’histoire du web. Par contre son interface commence à se faire vieillissante, et le site ne semble plus être mis à jour qu’épisodiquement.
  • Les matrices des fonctionnalités ECMAScript 5 et le futur ECMAScript 6 présentent les nouvelles fonctionnalités introduites dans ces deux normes du langage JavaScript, et indiquent quels navigateurs les supportent. Ces tableaux sont tout d’abord très utile d’un point de vue éducatif, car ils permettent de se faire une bonne idée des nouveautés du langage JavaScript. En terme de compatibilité, tous les nouveaux navigateurs supportent maintenant ECMAScript 5, mais il est intéressant de pouvoir déterminer lesquels ont commencé à supporter ECMAScript 6 (qui est toujours en cours de normalisation) et quelles nouvelles solutions cette norme va nous apporter.
  • Modernizr n’est pas à proprement parler un site, mais une librairie à la fois CSS et JavaScript, permettant de faire de la détection de fonctionnalités. Côté CSS, Modernizr ajoute automatiquement dans la balise <html> des classes qui vont indiquer si le navigateur courant supporte ou non, par exemple les coins arrondis (les classes borderradius et no-borderradius). Côté JavaScript, Modernizr propose une API permettant d’effectuer les mêmes tests, cette fois-ci déclarativement, pour s’en servir comme condition dans notre code. Tout cela permet d’appliquer les principes d’amélioration progressive dont nous avons parlé plus haut. Personnellement, j’évite généralement de charger cette librairie, en préférant en extraire simplement le morceau de code correspondant au test que j’ai besoin d’effectuer.

Les outils de développement

L’époque où l’on devait presser Ctrl+F5 toutes les 10 secondes est maintenant révolue. L’écosystème du développement web est maintenant riche de très nombreuses applications et plugins qui peuvent vous faire gagner un temps phénoménal.

  • Firebug a longtemps été un pionnier du débugage dans les navigateurs, mais aujourd’hui, ils disposent tous d’un tel outil. Quel que soit le choix que vous avez fait, il y a forcément une console qui accompagne votre navigateur préféré. De nos jours, elles permettent toutes, à minima, d’ausculter et de modifier à la volée le code HTML et styles CSS de la page, ainsi que de débuguer le code JavaScript (avec des points d’arrêt, des espions et l’accès à la stack) et d’afficher les requêtes HTTP. Firebug permet aussi d’examiner les cookies liés à la page courante. Chrome nécessitera pour se faire une autre extension : Edit this cookie.
  • YSlow est un très bon outil conçu par les développeurs web de Yahoo!, disponible sous forme de plugin pour la plupart des navigateurs (à l’exception notable d’Internet Explorer). Il vous permet de jauger la rapidité de rendu de vos pages web, et vous suggère différentes optimisations que vous pourriez effectuer afin d’améliorer votre score. Il dispose aussi d’outils complémentaires comme JSLint, un parser JavaScript permettant d’analyser votre code afin d’y décéler les mauvais usages, ou de Smush.it, un outil permettant d’optimiser la compression des images utilisées par votre site.
  • Autre très bonne extension pour Firefox, Tamper Data permet d’intercepter les formulaires POST et de les modifier à la volée. Très utile pour se retrouver plus rapidement en tête des highscores de votre jeu préféré. 🙂
  • Dans le même ordre d’idée, l’extension Postman pour Chrome permet de fabriquer vos propres requêtes HTTP, chose très utile pour tester des services REST.
  • Bien connu des développeurs web, racheté en 2012 par Telerik mais toujours gratuit, Fiddler est un outil de plus haut niveau que les consoles de développement. Il permet de sniffer le trafic HTTP qui circule sur votre machine, y compris sur la boucle Localhost, et de l’analyser, voire le modifier. C’est un incontournable, extrêmement complet (au point que je ne pense pas connaître les trois quart de ses fonctionnalités) qui se révèlera être votre meilleur ami lorsque vous aurez tôt ou tard besoin de débuguer au plus près les requêtes HTTP.
  • Encore plus haut niveau, WireShark (ex-Ethereal) est plutôt un outil pour administrateur réseau, mais il s’avère parfois nécessaire d’en arriver à cette extrémité lorsque le problème dépasse la seule couche applicative (où se trouve le protocole HTTP). Je vous souhaite d’avoir rarement à vous en servir car son utilisation est généralement synonyme d’un problème de réseau assez compliqué à résoudre pour un humble développeur web.
  • Il y a malheureusement encore beaucoup de vieilles versions d’Internet Explorer en circulation, ce qui implique la nécessité de tester nos sites web pour s’assurer de leur bon fonctionnement sur celles-ci. Pour se faire, vous pouvez utiliser les dernières versions de ce navigateur qui dispose d’émulateurs pour les versions antérieures. Malheureusement, ça ne marche pas toujours très bien. La meilleure alternative que j’ai pu trouver, en dehors de créer une machine virtuelle avec une vieille version de Windows (seule solution 100% fiable), est de passer par IETester, qui propose de reproduire le comportement des anciennes versions d’Internet Explorer, en réutilisant les moteurs originaux, gage de fidélité dans le comportement. Cet outil semble néanmoins sujet à de nombreux bugs, mais pour du débugage rapide c’est la meilleure solution que je connaisse.

Conclusion

Cette liste ne se veut pas exhaustive. Aussi, n’hésitez pas à partager vos propres recommandations dans les commentaires si le cœur vous en dit.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s