On a tous tendance à dégainer la bibliothèque Javascript jQuery dès que l’occasion se présente. Or, il faut garder à l’esprit que les fonctions intégrées à Javascript en ont sous le pied ! Des exemples ? L’article Native equivalents of jQuery functions fait un tour rapide quelques fonctions jQuery les plus utilisés avec leur équivalent Javascript « natif » bien plus rapide : sélecteurs, manipulation du DOM, classes CSS, modification des propriétés CSS.
Archives de la catégorie : Tutoriel
Devenez un p***** de développeur
Programming, motherfucker est une communauté de développeurs humiliés depuis des années par les programmes, les méthodologies et le management, tous centrés sur les heures facturables et les tests sans intérêt. Alors que le développeur veut surtout… développer. Tiens, en parlant de développement web, voici une sacrée liste de tutoriels qui devrait faire de vous un p***** de développeur ^__^ →
Apprendre jQuery
La série Decoding jQuery proposée par Shi Chuan (créateur de Mobile Boilerplate et faisant partie de l’équipe de HTML5 Boilerplate) nous propose une immersion (en anglais) dans le code source de jQuery. Après 4 parties consacrée aux bases du framework et aux subtilités de la programmation objet dans jQuery, l’auteur attaque les fonctions et les méthodes principales qui font le charme de jQuery ( extend(), isWindow(), parseXML(), globalEval() et toArray() ) pour le moment. →
Codecademy : un cours Javascript interactif et ludique
Apprennez les bases de la programmation Javascript de manière interactive et pro-active avec Codecademy. Ce site propose une console dans laquelle l’apprenant est inviter à saisir des lignes de code pour voir ce que ça donne. Très simple, voire basique, cette initiative permettra néanmoins à celles et ceux qui veulent se lancer dans la programmation d’avoir quelques bases tout en s’amusant. Vous pourrez partager votre avancement dans les leçons avec vos amis pour une saine émulation et un système de badges vous donnera des jalons pour mesurer vos progrès. Via roget.biz
73 tutoriels pour faire défiler vos contenus (Slideshow, Sliders & Diaporama)
Les diaporamas et autres Slideshows sont devenus un passage quasi-obligé pour les sites qui veulent présenter un grand nombre d’informations tout en ménageant l’espace disponible. Voici une liste condensée de 73 tutoriels ou scripts jQuery détaillés pour mettre en avant vos contenus texte et/ou image. →
Développer une application avec HTML5 et Javascript
Ce tutoriel HTML5 intitulé «Retours sur un développement HTML5 & JavaScript avec Visual Studio 2010» présente les différentes étapes pour réaliser un mur d’images et avoir la possibilité de zoomer sur une carte et de dézoomer pour retrouver une vue d’ensemble. Le tutoriel est composé de 12 parties que je vous laisse découvrir : →
Un diaporama pleine-page avec jQuery
Full background image slider est un script qui permet d’afficher un diaporama occupant toute la fenêtre du navigateur (ou le container que vous voulez). Outre le changement de background de votre site — ce qui pourrait s’avérer fatiguant pour les yeux –, ce script pourra se rendre utile pour présenter des visuels sur une page séparée. →
Coda Slider Effect — Navigation par onglets accessible avec effet de Slide
Coda Slider Effect est un des nombreux excellents tutoriels proposés par Remy Sharp sur jQuery for Designers. Au menu de Coda Slider Effect : un système de navigation par onglets accessible avec effet de Slide du plus bel effet composé de plusieurs plugins tels que scrollTo, localScroll et serialScroll. Dégradation grâcieuse en l’absence de Javascript, effet de slide respectueux de votre CPU et maintient de la navigation courante via les «hash».
Lightbox CSS avec tabindex et pseudo-classe :focus
Lightbox sans Javascript — Les Lightbox s’affichent généralement suite à un événement click
capturé par Javascript. CSS ne possède pas de pseudo-classe :click
, mais cela n’a pas empêché Jérémy Barbe (@capitainemousse) de créer une Lightbox full CSS en remplaçant l’événement click
par la pseudo-classe :focus
et la propriété tabindex
pour permettre aux images d’avoir le «focus». Voir la démonstration. →
Navigation à onglets avec jQuery & CSS
Simple Tabs w/ CSS & jQuery est un tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets. Soh Tanaka détaille le balisage HTML, le script jQuery et la feuille de style CSS. →