La Vague du Web #5
La Vague du Web est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web… Aujourd’hui dans cette chronique : quelques ressources JS et jQuery, un nouveau générateur CSS, ou encore une typographie d’icônes vectorielles. Bref, place à la Vague du Web numéro #5 !
Chart.js
Chart.js est une librairie JavaScript permettant de réaliser de superbes graphiques avec l’élément HTML5 canvas, compatibles sur tous les navigateurs modernes ainsi que IE7/IE8 via un fallback JS. Le script propose 6 types de graphique qui sont entièrement personnalisables : linéaire, histogramme, radar, circulaire, polaire et en anneaux. Seul regret, le manque d’interactivité au passage de la souris.
Typeahead.js
Typeahead.js est un plugin jQuery développé sous licence MIT par Twitter permettant de mettre en place de l’auto-complétion performante et complète. Les suggestions apparaissent au fur et à mesure que l’utilisateur tape, et la meilleure suggestion vient se placer directement dans l’input avec possibilité de la valider au clavier. Les données peuvent être codées soit en dur, soit à partir d’un fichier type JSON appelant des données locales ou distantes.
3D CSS iPhone
Il s’agit d’un iPhone dont la perspective 3D et l’animation sont réalisées entièrement en CSS. Vous avez besoin de 4 images PNG, d’une feuille de style et le tour est joué ! Une façon originale d’apprendre à se servir des propriétés CSS3 de transformation (transform), notamment les translations (translate) et les rotations (rotate), ainsi que les keyframes. Le résultat optimal est à voir sur Chrome.
Superhero.js
Vous souhaitez apprendre ou vous perfectionner en JavaScript ? Devenez un super héros ! Superhero.js est une collection des meilleures ressources JS du moment : articles, vidéos, et tutoriels en tout genre, le tout classé en plusieurs thématiques. Un site à mettre en favori !
CSS Matic
CSS Matic est un générateur CSS s’appuie sur trois propriétés CSS3 : gradient, border-radius, box-shadow. Les interfaces sont sexy et semblables aux outils que l’on retrouve dans Photoshop, notamment celle qui génère les dégradés CSS. Il propose également un outil pour générer des textures de bruit avec appel d’une image motif sur un serveur distant. Bref, un outil de qualité qui vient compléter cette liste de générateurs CSS.
Grid-A-Licious
Grid-A-Licious est un plugin jQuery qui permet de créer facilement une grille responsive de blocs flottants ressemblant à l’interface de Pinterest. La grille est fluide : elle s’adapte à n’importe quel écran (desktop, tablette, smartphone) et prend en charge l’ajout dynamique de nouveaux blocs qui viennent parfaitement s’imbriquer. Quelques options sont disponibles pour personnaliser au mieux son affichage (largeur, espace, animation, vitesse, etc).
Countable.js
Simple à utiliser et particulièrement léger (3.5 Kb), Countable.js est une librairie JavaScript qui permet de compter et d’afficher le nombre de paragraphes, de mots et de caractères saisis dans une zone de texte. Disponible en licence MIT et ne nécessite aucune dépendance.
Genericons
Genericons est une typographie de 60 icônes vectorielles réalisée par Automattic, la société qui est à l’origine de WordPress. Conçue spécialement pour les blogs, la police propose toutes les icônes « classiques » comme le calendrier, les commentaires ou encore les tags, mais aussi des logos de réseaux sociaux comme Facebook et Twitter. Vous pouvez bien sûr personnaliser chaque icône via CSS : taille, couleur ou encore text-shadow.
