La gestion des dates et autre timestamps peut s’avérer légèrement compliquée. Heureusement, il y a pléthore de bibliothèques Javascript qui se proposent de vous faciliter la vie. Voici déjà trois script rapides et légers pour commencer. Lire le reste de cet article »
09/05/12
Lawnchair — Le stockage JSON simplifié
Lawnchair est une solution souple et légère (3.4K pour la version minifiée) pour assurer la persistance des données de vos applications mobiles HTML5 grâce au format de données JSON. Par défaut, Lawnchair utilise les fonctions natives du navigateur, et utilise des solutions alternatives si les fonctions Storage ne sont pas prises en charge. Cerise sur le gâteau, cette solution ne dépend pas de jQuery ou d’un autre framework pour fonctionner. Lire le reste de cet article »
18/08/11
spin.js — Icône de chargement animée sans image
spin.js est une solution en Javascript (compatible avec jQuery) qui permet d’afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3. La compatibilité avec Internet Explorer en version 6, 7 et 8 est assurée grâce à WML. Lire le reste de cet article »
18/07/11
Require.js — Chargement asynchrone de fichiers Javascript
Si les performances de votre site web et le service rendu aux utilisateurs vous préoccupent, vous aurez certainement besoin de Require.js. Ce «loader» Javascript léger (5 kb gzipé), avec gestion de cache, accélère le chargement de vos pages lorsque vous utilisez de nombreux scripts. Sans ce loader, le navigateur doit attendre que les fichiers Javascript sont chargés avant d’afficher votre contenu. Require.js effectue un chargement asynchrone de l’ensemble de vos fichiers javascript lorsque votre page a fini de se charger, sans bloquer votre navigateur. Lire le reste de cet article »
11/03/11
yepnope.js — Chargement conditionnel de scripts pour vos « Polyfills »
yepnope.js permet de charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le but de ne charger que l’essentiel. C’est le compagnon idéal de Modernizr qui se charge de détecter les fonctionnalités en question (cf. Modernizr — Détection des fonctionnalités CSS3 et HTML5). Un Polyfills est une fonction (généralement en Javascript) qui émule une fonctionnalité pour les navigateurs ne la prenant pas en charge (cf. What is a Polyfill?). Grâce à Modernizr et yepnope.js il est possible d’utiliser les fonctionnalités HTML5 et CSS3 en première intention tout en ménageant une porte de sortie pour les navigateurs plus anciens. Lire le reste de cet article »
26/02/11
Minify — Accélérez l’affichage des pages en réduisant le nombre de requêtes HTTP
Minify est un script PHP5 dont l’objectif est d’aider les webmasters à atteindre un des objectifs les plus importants des règles de hautes performances pour les sites web proposées par Yahoo! : diminuer le nombre de requêtes HTTP. Pour y parvenir, Minify combine (concatène) les fichiers CSS ou Javascript. En prime, il supprime les commentaires et les espaces en trop. Minify se charge même de l’encodage gzip tout en envoyant les bons en-têtes (headers) au navigateur. Lire le reste de cet article »
06/12/10
CSS3 Media Queries en Javascript pour les vieux navigateurs
CSS3-MediaQueries-JS est une bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2 — Firefox 3.5+, Opera 7+ et Safari 3+ étant nativement compatibles avec cette propriété CSS3. Les Medias Queries offre un mécanisme pour isoler certaines propriétés ou pré-requis techniques pour appliquer aux agents utilisateurs correspondants une déclaration ou une feuille de style CSS spécifique. Lire le reste de cet article »
19/11/10
Hyphenator — Gérer les césures avec Javascript
Hyphenator est un script JS qui autorise la gestion des césures sur tout ou partie de votre site Web, bien que pour des raisons de performance, il est judicieux de se limiter au contenu des articles. Le script ajoute des césures pour couper les mots des textes contenus dans les éléments que vous aurez ciblés avec la classe `hyphenate` pour éviter les «lézardes» dans les pavés de textes justifiés avec `text-align= »justify »`.