Clochix

Aller au contenu | Aller au menu | Aller à la recherche

mardi 26 août 2008

Sélectionner des éléments en JavaScript

Jusqu'à présent, les possibilités de sélectionner directement des élément d'une page web en JavaScript étaient plutôt limitées. On ne disposait que de:

Et c'est tout. Pour tout le reste, il fallait soit se promener dans le document avec les fonctions de parcours d'arbre du DOM (père, fils, frères), soit utiliser XPath, qui est plus lourd et moins simple à appréhender.

Heureusement, the times they are a-changin', et le W3C travaille en ce moment à l'élaboration d'une spécification permettant de sélectionner des éléments au moyen des sélecteurs CSS, c'est à dire de la syntaxe utilisée pour déterminer à quels éléments s'applique un style[1]. Cette spécification crée deux nouvelles fonctions, applicables soit à l'ensemble du document, soit à un seul élément. La première, querySelector(), ramène le première élément correspondant au sélecteur, dans le document ou parmi les descendants de l'élément à laquelle elle est appliquée. La seconde, querySelectorAll(), ramène tous les éléments. Il devient ainsi aisé de sélectionner des éléments en utilisant de nombreux critères.

WebKit implémente déjà cette interface depuis quelques mois, elle a atterri il y a quelques jours dans Firefox 3.1, Opera est OK aussi et, oh mon Richard, ça sera même dans IE 8, je n'en reviens pas !!! (je n'ai par contre pas trouvé l'info pour W3)

- Oui mais, mes utilisateurs n'utilisent pas de navigateurs modernes, qu'est que je peux faire ?
- changez d'utilisateurs ! A défaut, la plupart des bibliothèques et des frameworks javascript implémentent des fonctions similaires... non, oubliez toutes les librairies et les framework JavaScript, tout cela c'était avant John Resig, John Resig, l'homme qui ne dort jamais, qui le vendredi participe au commit du nouveau compilateur JavaScript à la volée de Firefox, le lundi livre une nouvelle version de l'indispensable Firebug, et entre les deux, s'ennuyant sans doute un peu, écrit Sizzle une nouvelle librairie de quelques centaines de lignes qui implémente le querySelectorAll dans tous les navigateurs qui ne le possèdent pas, et avec des performances laissant sur place toutes les précédentes implémentations. Si la programmation était discipline olympique, John mériterait assurément plus d'une médaille, mais heureusement nous n'en sommes pas encore là ;-)

Notes

[1] cf mon rappel sur tous les sélecteurs CSS disponibles

samedi 23 août 2008

TraceMonkey va encore accélérer JavaScript dans Firefox !

Jeter un oeil à ses feeds avant d'aller se coucher peut aider à faire de beaux rêves (mais pas à se coucher tôt :-S). Car en ce moment, les annonces de nouveautés dans le prochain Firefox 3.1 se bousculent, toutes plus excitantes les unes que les autres.

Dernière en date et encore toute chaude: SpiderMonkey, le moteur javascript qui équipe entre autres Firefox, vient de se voir ajouter un mécanisme de compilation à la volée, nom de code TraceMonkey, qui va faire faire un bond aux performances de JavaScript, les rapprochant de celles d'un langage compilé plus que d'un langage interprété.

Toutes les explications dans les billets publiés par quelques-uns des développeurs:

Outre les améliorations de performance des applications web existante, cette avancée ouvre également de nouvelles perspectives, dont les billets précédents donnent un aperçu:

  • la réalisation en JavaScript d'applications demandant beaucoup de ressources, comme par exemple la manipulation d'image
  • l'apparition de nouvelles applications utilisant Canvas
  • l'apparition de nouvelles applications pour les périphériques mobiles. Javascript pourrait bien devenir le langage par excellence pour développer sur ces plate-formes.

Longtemps un peu méprisé, JavaScript est aujourd'hui le langage qui monte, même si on peut regretter que des considérations politiques ralentissent ses évolutions[1]

Avec le support natif du son et de la vidéo, via les balises audio et video[2], l'implémentation de l'API Selectors (qui permet de sélectionner un nœud dans le DOM au moyen des sélecteurs CSS), le support accru de CSS3, et tout ce qui est encore dans les tuyaux, Firefox 3.1 s'annonce déjà comme une révolution bien plus importante que la faible incrémentation de son numéro de version ne pourrait le laisser penser. Et il devrait sortir avant la fin de l'année. Je ne comprend pas qu'il puisse encore rester des utilisateurs d'IE...

Notes

[1] cf mon billet sur Harmony. J'ai depuis découvert le wiki officiel où l'on peut suivre l'évolution de la spécification, les propositions d'évolutions, les comptes-rendus de réunion, etc. Passionnant

[2] voir par exemple une annonce ici et une analyse

vendredi 15 août 2008

Harmony, ou le futur de JavaScript en discussion

La dernière version de la norme ECMA-262 définissant JavaScript date de 1999, et 2 groupes travaillaient dans des directions différentes pour proposer des évolutions. Ces 2 groupes viennent de trouver un terrain d'entente et la convergence de leurs travaux devrait bientôt donner naissance à une nouvelle version de la norme, sous le nom de code d'Harmony. Mais cette version abandonne bien des nouveautés intéressantes qui avaient été annoncées.

Lire la suite...

dimanche 10 août 2008

Au pixel près

J'ai découvert récemment Pixel Perfect, une extension pour firebug qui permet d'afficher une image au dessus d'une page web, par exemple pour comparer la page avec sa maquette. J'ai trouvé l'idée excellente, mais comme la route est toujours plus intéressante que l'arrivée, comme c'est toujours meilleur quand c'est fait à la maison[1], j'ai essayé d'écrire un équivalent sous forme de bookmarklet javascript[2].

Vous trouverez le résultat ici : https://labo.clochix.net/wiki/labs/.... Si vous l'utilisez, je vous conseille de compacter le script avant de le déposer sur un serveur. Ca ne fonctionnera que sous Firefox et n'a été testé qu'avec la version GNU/Linux d'icelui.

Ce script vous demande l'url d'une image, les coordonnées où l'afficher et l'opacité. Ces informations sont enregistrées dans la session Firefox pour que vous n'ayez pas à les ressaisir à chaque fois. Vous pouvez ensuite, au moyen de raccourcis clavier, déplacer l'image, la masquer, modifier sa taille et son opacité, etc. Simple mais pratique.

Si vous avez des idées d'améliorations, n'hésitez pas...

PS: au passage, ce script marque l'ouverture d'une forge de test basée sur Redmine, j'y reviendrai très bientôt

Notes

[1] sauf quand c'est moi qui cuisine

[2] une méthode pour exécuter un script dans une page en le stockant dans un marque-page, cf http://fr.wikipedia.org/wiki/Bookma...

vendredi 19 janvier 2007

Concevoir des applications web selon un modèle événementiel

Je suis tombé sur un fort intéressant billet de Christian Heilmann publié sur le blog de YUI. Il suggère d'utiliser une approche événementielle pour concevoir des applications web.

Lire la suite...

lundi 25 décembre 2006

Sur la route de Firefox 3

Alors qu'une première version de Firefox 3 alpha est sortie il y a quelques jours, Tristan signale une présentation des futures nouveautés de Gecko 1.9 par Stuart Pavlov. Petit résumé de ce que j'ai cru comprendre... euh et de quelques recherches dans les roadmaps du projet.

Lire la suite...

jeudi 21 décembre 2006

Firebug, Aptana, et le développement web devient encore plus facile

Les premières impressions ne sont pas toujours les bonnes. J'ai re-découvert ces derniers jours 2 outils que j'avais trop mal jugés, et je suis assez impressionné par leurs fonctionnalités. Firebug, une extension Firefox, et Aptana, un IDE web, sont vraiment puissants et agréables à utiliser.

Lire la suite...

mercredi 9 août 2006

haXe, un langage universel client et serveur pour le web ?

L'une des nombreuses raisons de ma réticence l'égard de Flash est le manque d'outils libres utilisables pour en créer. J'avais découvert avec plaisir il y a quelques mois MTASC, un compilateur ActionScript. Joie et bonheur, on pouvait créer des fichiers swf avec vi et un coup de ligne de commande. Mes connaissances en ActionScript étant très basique, je n'avais pas été plus loin que les quelques exemples fournis, mais avais gardé le lien sous le coude. Et voici que toujours l'occasion des présentations de l'OSCON j'ai découvert haXe, le nouveau projet du développeur de MTASC. haXe se présente comme un langage universel orienté web. Il est basé sur ECMAScript (donc proche de Javascript et Actionscript) et permet de générer côté client des fichier Flash et du Javascript, et côté serveur un langage spécifique, Neko. Un IDE sous forme de module pour Eclipse est disponible. Sur le serveur, Neko peut générer du bytecode qui tournera au dessus d'un module Apache, ou être compilé. Côté client, il contient des librairies javascript qui permettent de faire de l'AJAX facilement. La première version stable est sortie en mai 2006. Plusieurs projets basés sur le langage ont déj vu le jour:

  • Screenweaver HX, un framework pour créer des applications de bureau en Flash
  • HXDT, l'environnement de développement sous forme de plugin Eclipse.
  • et de nombreux autres.

Tout cela parait assez alléchant, mais je suis partagé. Le site manque d'exemples des fonctionnalités du langage, et je n'ai pas le temps de le tester. Quand l'utilisation intensive de Flash au niveau du client, elle ne me plaît guère. Bref, je ne sais pas si haXe est réellement une bonne idée et apporte quelque chose par rapport des langages et frameworks existants. Tout retour d'expérience serait le bienvenu.

Pour en savoir plus et vous faire une idée:

mardi 6 juin 2006

UIZE : très jolie librairie javascript pour enrichir les interfaces utilisateur

Encore une nouvelle librairie Javascript, mais celle-ci m'a suffisamment impressionné pour mériter un billet pour elle tout seul. UIZE est une librairie d'effets graphiques. Elle permet de gérer des transitions entre images, des effets de couleur (dégradé par exemple), elle propose de nombreux widgets évolué... Quelques exemples valent mieux qu'un long discours, allez faire un tour sur le site, il en regorge et ça vaut vraiment la peine de les essayer les uns après les autres. (info trouvée sur Ajaxian)

mercredi 26 avril 2006

Vrac avec du javascript dedans

  • un superbe nuancier tout en javascript : http://pourpre.com/colordb/
  • pas besoin de Flash pour faire des jeux cruels, voici une chasse aux lapins en javascript
  • les pop-ups étant de plus en plus souvent bloquées, on voit fleurir de nombreux scripts permettant d'afficher l'équivalent dans des boites flottant au dessus de la page. Par exemple Lightbox pour des galeries d'images. En voici quelques-uns (source : http://www.excargot.net ) :
  1. lightbox
  2. thickbox
  3. greybox
  • eyeOS est un bureau virtuel en ligne. Quelques applications de base sont fournies (gestionnaire très basique de fichiers, éditeur de texte, agenda, gestion de contacts, de notes) et on peut en télécharger d'autres sur leur site ou les développer soi-même, un des but du projet étant de fournir une plate-forme pour développer ce genre d'applis. Cela permet donc d'accéder son bureau de n'importe où travers un simple brouteur. Pour l'instant, cela ressemble un groupware assez joli mais manquant de fonctionnalités. Mais si le développement d'applications tierces suit, on a peut-être l le fameux bureau en ligne dont on parle depuis des années.
  • Ajax n'est pas forcément qu'un gadget pour "faire Web 2.0". Un article de CMS watch tente d'explorer ce qu'Ajax peut apporter un CMS : Ajax and Your CMS
  • Gabbly est un système vous permettant de discuter en direct avec les autres visiteurs et visiteuses d'un site. Il suffit de faire précéder l'url du site par gabbly.com/ ( pe http://gabbly.com/www.debian.org ). Ca m'a l'air pas mal pensé du tout, j'avoue que je suis scotché. Bon, évidemment tout passe par leur serveur, donc ce n'est bsolument pas sécurisé, donc fuir comme MSN, mais part ça c'est une belle démonstration du pouvoir d'Ajax.