dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko seulement en version compressée, parce qu’il n’y a pas que jQuery dans la vie !
Javascript Framework Matrix — tableau comparatif des principaux frameworks Javascript : jQuery, Mootools, The Dojo Toolkit, Prototype, Script.aculo.us, Ext JS, Adobe Spry, BBC Glow et Yahoo! UI Library.
Les exemples concrets de codes permettant de se faire une idée de la syntaxe et de la philosophie adoptées par ces frameworks : General, DOM Ready, DOM Basics, DOM Filtering, DOM Manipulation, Effects, Transitions, Events, Custom Functions, Ajax et Classes. Via LudiBlog.
Toujours rêvé d’utiliser les sélecteurs CSS avancés dans vos designs web sans vous soucier d’IE6 ? Alors vous devriez vous intéresser au travail d’Aaron Gustafson. Une fois le DOM chargé, eCSStender rassemble les feuilles de styles impliquées dans l’affichage de la page dans une variable. Le parsing peut commencer et eCSStender recherche tous les motifs pour lesquels une extension est disponible (@font-face et @page pour le moment). Pour la suite des explications je vous invite à lire la documentation 😉 — eCSStender
Sur webdevfr, les discussions vont bon train sur HTML5 : Yves Van Goethem soumet à notre attention deux méthodes disponibles aujourd’hui pour pallier les insuffisances des anciens navigateurs (Firefox 2) ou des mauvais élèves du W3C (IE6, IE7) : →
Google Doctype est une encyclopédie ouverte (wiki) écrite par des développeurs web pour des développeurs web. Google Doctype contient des articles sur la sécurité sur le web, la manipulation du DOM en Javascript, des trucs et astuces CSS. Une section présente les balises HTML avec leur compatibilité inter-navigateur.
Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce *blogzine*. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann. →
En général, j’utilise la notation .ma-classe-css pour nommer les classes réutilisables par n’importe quel élément HTML. Cette notation est en fait un raccourci pour *.ma-classe-css où * est utilisé comme joker universel (les tirets ne sont là que pour le référencement).
Me souvenant que le reset * { margin: 0; padding: 0; } n’était pas optimum en terme de performances, je me suis dit que l’utilisation de div.ma-classe-css (en préfixant le nom de la classe avec la balise HTML à laquelle elle s’applique) permettrait certainement au navigateur de parcourir le DOM plus rapidement en raison du nombre réduit d’éléments sur lesquels boucler.
Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie1 Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2ème millénaire… →
Comment remplacer les gestionnaires d’événements présents dans une page web en redéfinissant le comportement onclick, onmouseover… des éléments XHTML ? Tout simplement en utilisant la magie du DOM et de Javascript. Généralement, lorsqu’on veut appliquer une fonction sur un élément XHTML (ouvrir un popup lorsqu’on clique sur une image, par exemple), on utilise une fonction popup() déclenchée par un événement onclick placé dans la balise comme ici : <img src= »/img1.gif » onclick= »popup() » />. C’est parait simple, efficace et rapide… Or, ça peut vite devenir compliqué, inefficace et lent… →
Ce billet regroupe quelques fonctions simples et utiles en Javascript ou en PHP. Comme pour la boite à outils CSS, celle-ci est destinée à s’enrichir régulièrement.
