Cet article fait suite aux 2 précendents articles su le même sujet :
J’ai un temps pensé appeler cet article Outils CSS3 – HTML5 – JavaScript : la suite de la suite mais je me suis dis qu’au fur et à mesure des articles ça commencerai à être long …
Chargeur de fichier JS/CSS/…
Le chargement de fichier JavaScript par le tag script est bloquant. Quand un fichier de script est chargé, votre page est mise en attente du chargement et de l’exécution de votre fichier. Cela est vrai pour chaque script de votre page. Afin de contourner ce problème, des librairies de chargement de scripts asynchrones ont vu le jour comme :
- RequireJS : un gestionnaire de fichier qui permet de définir les fichiers à charger via un système de dépendance
- YepNope.js : Librairie très utilisée pour le chargement de polyfills (mis en avant par Modernizr). Cette librairie permet de charger des fichiers suivant un test booléen (ex : Modernizr.geolocation). Un petit lien vers mon article sur cette librairie
- HeadJS : loader de script mais pas que (détection de fonctionnalités, détection de navigateur, détection de taille d’écran, …)
Sammy.js
Sammy.js est une librairie JavaScript implémentant REST.
Il permet de créer des applications web avec une gestion de l’historique, des événements personnalisé, des plugins, etc.
Tester son code JS
TypedJS est un outil de tests automatique de vos fonctions JavaScript. Il suffit d’annoter vos fonctions avec les types attendus, TypedJS se charge de tester vos fonctions pour vous afin de vérifier que le type retourné est correct. Attention, il ne s’agit pas d’une librairie permettant de faire des tests unitaires automatisés comme QUnit par exemple.
Framework MVC
J’ai évoqué dans mon article de présentation de knockout des framework MVC comme BackoneJS ou EmberJS. AngularJS, un framework MVC développé par Google, fait pas mal parler de lui en ce moment.
JQuery
Jquery ++ : collection de nouvelles fonctionnalités DOM et d’événements bien pratiques pour jQuery
BootStraps / Initializr
Il s’agit ici de boite à outils/template/Framework pour HTML/CSS/Javascript permettant de démarrer un projet rapidement. De nombreux outils sont inclus par défaut pour vous faciliter la vie (classes CSS, jQuery, page html de base, …).
- Bootstrap de Twitter : a priori le plus utilisé et le plus populaire
- Initializr : Template pour démarrer un projet HTML5 basé sur BoilerPlate et BootStraps. Il est configuré pour être mobile first, cad adapté en premier pour un site mobile. (article de présentation)
- 99 Lime HTML KickStart
- Foundation
SpritePad
Une des pratiques permettant un gain de vitesse de chargement d’une page web est la mise en place de sprite. Un Sprite est un fichier composé de plusieurs icônes/images. Le CSS se chargera d’afficher qu’une zone de l’image correspondant à la partie à afficher. Ainsi un seul fichier est chargé. SpritePad permet la génération de Sprite CSS en drag’n drop et génère pour vous le CSS.
Mobilité
Les technologies HTML5/CSS3/JavaScript ont beaucoup de succès notamment du fait de leur compatibilité sur terminaux mobiles (smartphone, tablette). Le debuggage sur ce type de terminaux n’est pas évident. Voici quelques outils pour le faire :
CSS3 Generator
CSS3 Generator : Un générateur de règles CSS très complet (Border-Radius, Gradient, Box-Shadow, Transform, Text-Shadow, …).
Partage de code
Je vous avez parlé de JSFiddle dans un précédent article, un outil de partage de code HTML/CSS/JavaScript. JSBin permet également la même chose.
Guide des bonnes pratiques HTML/CSS par Google
Google a misà disposition un ensemble de bonnes pratiques concernant HTML / CSS et JavaScript. A lire !!
Librairies graphiques
datavisualization.ch est un site qui recense les librairies graphiques pour le web et qui aidera à trouver la librairie qui correspond le mieux à vos attentes.
Highcharts : LA librairie pour faire des graphes en SVG avec un fallback en VML pour IE8 et inférieurs.
Animations CSS
Animate.css : Jeu d’animation en CSS déjà coté à réutiliser et à adapter pour vos projets. Possibilité de créer un fichier ne comportant que les animations dont vous avez besoins.
Javscript : Divers
BankersBox
BankersBox est une librairie facilitant la sauvegarde de donnée coté client.
Hammer
Hammer.js est une librairie pour gérer les « gestures ».
Gestion de raccourcis clavier
MouseTrap : une librairie pour gérer des raccourcis clavier et les binder sur des fonctions
Tweet