Outils CSS3 – HTML5 – JavaScript : Episode 3

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, …).

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *