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 »

01/06/11

nanotabs — Menu à onglets Javascript ultra-léger

nanotabs — Cette version allégée du plugin jQuery idTabs est un script autonome (sans jQuery ou autre framework Javascript) qui permet de faire des menus à onglets à partir de simples listes pour le poids dérisoire de 2 KB, ce qui ne devrait pas gréver les performances d’affichage de votre site ou de votre blog.  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 »

16/12/10

SimpleTabs — Onglets Javascript non-intrusif

SimpleTabs est un script autonome écrit en Javascript par Fotis Evangelou. Il permet de mettre en place facilement un système de navigation à base d’onglets (tabs). J’aime bien le côté autonome du script qui ne dépend ainsi d’aucune bibliothèque tierce pour fonctionner. Pas besoin de jQuery ou de Mootools ! Le script se souvient du dernier onglet cliqué et se place sur celui-ci après un rechargement de page ou l’utilisation du bouton « Retour » du navigateur. SimpleTabs est simple à mettre en place, léger (2,4 Kio) et compatible avec tous les navigateurs. 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".

Lire le reste de cet article »

13/10/10

EverCookie — Le Cookie de tous les Kikis ?

EverCookie — cette API écrite en Javascript permet de créer un cookie résistant à tous les mauvais traitements grâce à une solution impliquant ne dizaine de mécanismes différents : cookies standards, Local Shared Objects (Flash Cookie), cookies au format RGB (PNG’s générées avec la balise HTML5 canvas),  historique Web, HTTP Etags, userData (pour Internet Explorer). Les différentes possibilités offertes par HTML5 en matière de stockage de données sont aussi de la partie : Session Storage, Local Storage, Global Storage et Database Storage via SQLite. Et d ‘autres techniques sont envisagées…

12/10/10

TinyFader — Slideshow poids-plume avec effet de fading

TinyFader — Malgré son nom, la particularité de ce diaporama n’est pas de proposer des effets de transitions à base de fading. C’est plutôt son poids — 1,4 KB seulement — qui mérite le détour ! Il s’agit d’une variante de TinySlider en version autonome : TinyFader n’a pas besoin d’un framework Javascript pour fonctionner. L’initialisation et le paramétrage de TinyFader sont très simple : Lire le reste de cet article »