BUG : IE et le clonage de noeud texte vide
Encore un comportement curieux d'Internet Explorer...
Tags: javascript
notes (60)
ScrollIntoView
Une petite technique simple pour assurer la visibilité d'un élément lorsque celui-ci est descendant d'un élément qui peut defiler.
Evénéments DOM : attache, suppression, activation et désactivation
Petite présentation rapide, donc partielle, de l'écoute des événements DOM, et sur la manière dont je la gère ou que je contourne ses manques dans ma librairie javascript.
Récupérer le code source d'une page html en javascript
Un collègue m'a posé une question ce matin au boulot : comment récupérer le code source d'une page HTML en javascript ? Cerise sur le gâteau : cela doit fonctionner sous IE 6...
Mousedown et Mouseout sont sur un bateau...
Petite précision sur la succession d'événements souris, ou pourquoi l'événement mouseout ne part pas dans certaines conditions...
Des graphiques dans du HTML : svg ou canvas ?
Alors que j'ai besoin de développer un petit outil simple en javascript pour dessiner des graphiques, j'hésite encore entre les deux technologies actuellement disponibles : SVG et canvas...
Firefox et les extensions gnome-shell
Le site des extensions gnome-shell permet d'installer des extensions directement depuis Firefox via un plugin. Sauf qu'un bug javascript m'a empêché de l'utiliser pendant quelques jours...
Animations CSS
Petite expérimentation sur la manière de contrôler une animation CSS à l'aide d'un objet javascript simple.
rnb-js : changements structurels
La librairie javascript rnb-js a subit quelques modifications importantes ces dernières semaines, notamment dans le support des anciens navigateurs...
Nombres flottants en informatique
Sébastien Sauvage publie un rappel fort utile pour tout les codeurs débutant qui seraient perturbés par la gestion des nombres décimaux dans leur langage de programmation préféré. Petit commentaire supplémentaire sur la manière d'éviter les problèmes en php et en javascript.
Langages de programmation, de structure et de présentation
Quel est l'avantage/inconvénient d'un langage de structuration comme le HTML ou un langage de présentation comme le CSS, par rapport à des langages de programmation comme le php ou le java ?
Concaténation des modules rnb-js
Evolution de l'implémentation de la « syntaxe module » dans la librairie javascript rnb-js.
Filtrer une liste
Un petit bout de code html/css/javascript tout simple pour filtrer l'affichage des items d'une liste à partir d'une valeur tapée dans un champ. A étendre pour appliquer à des besoins plus sépcifiques.
Documentation de code javasrcipt en PHP
Apparition d'un nouveau module dans la librairie PHP, codetodoc, qui permet de générer une documentation de code javascript à partir des commentaires. Encore au stade alpha mais les premiers tests sont encourageants.
rnb-js, objets natifs, espace de noms et modules
Deuxième (et dernier ?) rapport d'étape de la reconstruction de la librairie javascript rnb-js. Au menu : les composants en tant que modules et la surcharge du prototype des objets natifs.
GeoScale, le retour de la vengeance
De nombreux composants de ma librairie javascript sont en hibernation depuis pas mal de temps, certains depuis des années. C'est le cas de GeoScale, objet permettant de gérer une échelle de temps géologique. J'ai décidé de m'y remettre ces derniers jours, pour le faire évoluer vers ce qui me serait le plus utile...
Benchmarks javacript
En programmation, on doit toujours garder en tête les moyens d'améliorer les preformances de son code : chercher l'algorithme le plus efficace, éviter d'accéder trop souvent au DOM (en javascript), utiliser les méthodes natives des objets quand elles sont disponibles, garder des données en « cache » quand elles doivent être réutilisées, etc. Mais la quête de performance peut parfois se heurter à d'autres principes de programmation, comme la factorisation du code. Petit exemple pratique...
Détection de fonctionnalités
Durant les premières années de développement, la librairie javascript rnb-js se basait essentiellement sur la détection des navigateurs pour implémenter une action ou un comportement. Depuis plusieurs mois, j'applique plutôt une technique fortement recommandée : la détection de fonctionnalités.
Opera ne cesse de m'étonner
Opera me surprendra toujours : souvent à la pointe de la technologie, il a plutôt bonne presse dans la communauté des développeurs web mais je l'utilise rarement ; trop rarement. Et c'est un tort, car en corrigeant un bug qui empêchait l'exécution du javascript, j'ai découvert qu'il était toujours plus en pointe que les autres, notamment dans la gestion des événements personnalisés.
Renommage de projets
Les mauvaises habitudes étant ce qu'il y a de plus dur à perdre, me voilà de nouveau atteint par une crise de « renommagïte aiguë ». Les victimes aujourd'hui : certains projets informatiques.
reconstruction de la librairie javascript rnb
Premier rapport d'étape de la reconstruction de la librairie javascript rnb : les grandes lignes ont été définies ; reste a tout mettre en place.
Nettoyage de printemps
A force de développer le site en continu, le code a fini par s'accumuler, parfois de manière un peu chaotique, sans que j'ai vraiment le temps de penser sa pertinence ou sa structure. Il est donc temps de faire un peu le ménage.
Les CSS d'abord, le javascript ensuite
Quand on construit des applications ou des sites web, on associe toujours très étroitement CSS et javascript, a tel point qu'on oublie parfois que la présentation graphique peut être utile en dehors même de son utilisation dans un objet javascript...
Console for everybody
L'extension Firebug pour Firefox a révolutionné le développement en javascript, à tel point qu'on se demande aujourd'hui comment nos prédécesseurs ont pu faire sans lui. Le revers de la médaille, c'est qu'on peut oublier qu'il n'est pas toujours présent, y compris sous Firefox ; l'utilisation de la console pour débuguer peut donc parfois entrainer des… bugs. Karl Dubost signale une solution pour éviter pareille erreur. Voilà pour ma part la méthode que j'utilise depuis plusieurs années dans ma librairie javascript rnb :
Le javascript m'emmerde !
Curieux cri du coeur pour quelqu'un dont le boulot, c'est d'écrire du javascript. En fait, ce n'est pas le langage en lui-même qui insupporte (quoique certaines « subtilités » donnent envie de se taper la tête contre les murs), plutôt son utilisation de plus en plus outrancière...
Traversée aléatoire des éléments
Les nouvelle spécifications web (HTML 5 , DOM 3, CSS 3) sont de plus en plus implémentées dans les navigateurs web, à des degrés divers certes mais de manière suffisante pour pouvoir déjà être utilisées dans nos documents. Sauf qu'il faut encore et toujours faire attention : Le « browser implementation sniffing » n'est pas mort.
Ecriture d'un objet dans différents langages
Petit exercice dans le cadre d'une uniformisation de mes outils de développement : l'écriture d'un même objet, une structure de noeuds hiérarchiques, dans trois langages différents : javascript, PHP et python.
Sélecteurs, identifiants et classes
Il existe plusieurs manières d'appliquer des styles aux éléments d'un document web à travers la notion de « sélecteurs ». On use (et abuse) souvent de deux d'entre eux, les sélecteurs de classes et les sélecteurs d'ID, mais pourrions-nous nous en passer ?
GeoScale, CladeTree et PTE
Je reviens depuis quelques semaines à mes premières amours, les sciences du vivant, d'abord par mes lectures, puis en essayant de développer quelques outils web aptent à présenter diverses données.
HTML5 pour les développeurs
A quoi voit-on que le HTML 5, malgré tous ces défauts, est tout de même un language qui facilite la vie des développeurs ? Quand on s'apperçoit que des techniques que l'on utilise depuis des années sont dorénavant intégrées aux spécifications. Petit exemple avec la manipulation de l'attribut class.
News web
Le web d'aujourd'hui, c'est ça : des Ogres (Google et Apple) cherchant à contrôler chaque jour un peu plus ce que l'on fait de nos vies numériques et des Hommes qui, seuls ou en groupe, préfèrent emprunter une autre voie.
Internationalisation en javascript
Un petit utilitaire que j'utilise depuis près d'un an dans ma bibliothèque javascript et qui permet d'assurer une pseudo-internationalisation des messages d'objets.
Outliner javascript pour Gedit
Quand on atteint une certain degré de complexité dans son code, l'assistance d'un outliner ou de l'autocomplétion devient presque indispensable. Des outils qui font encore cruellement défaut dans Gedit, notamment pour le développement web (javascript).
News web
Du neuf avec HTML 5, Firefox 3.5, la vidéo sur le web et les moteurs de rendu javascript ; du vieux avec - toujours et hélas - Internet Explorer 6.
ParentNode : IE et les autres
Internet Explorer ne cessera jamais de m'étonner. Alors qu'on croit avoir fait plus ou moins le tour de toutes les tracasseries les plus évidentes et les plus courantes, que ce soit en css, en javascript ou en html, v'la ti pas qu'on peut encore tomber de sa chaise en déboguant du javascript au boulot. Ou pourquoi un élément fraîchement créé possède un noeud parent alors qu'il n'a encore été inséré nulle part.
Projets en cours
Un point sur les projets en cours. Outre le nettoyage de la liste des tags qui poursuit son chemin afin de disposer d'un vocabulaire un peu mieux contrôlé, deux développement accaparent la majeure partie de mon temps libre : un outil de gestion de collections et un convertisseur d'outliners.
Insérer une balise style en javascript
Imaginons : vous devez insérer un élément ou fragment de document lambda dans un document web via le DOM. Cet élément doit obéir à certaines règles CSS et, comme il n'a aucune raison d'être dans le dit document si la gestion du javascript est désactivée, vous insérez ces règles elles-aussi en manipulant le DOM. L'opération serait finalement triviale s'il n'y avait Internet Explorer.
Changements techniques du site
La nouvelle architecture du site a nécessité de nombreuses adaptations techniques, notamment pour la mise en cache des pages.
Squelettes framasoft (1) page d'accueil
Après quelques mois de latence, nous voilà replongés dans la réécriture des squelettes du site Framasoft, et plus particulièrement dans celle de la page d'accueil.
Formulaire des index, second round
J'avais installé depuis quelque temps sur les pages index des fonctions javascript qui permettaient de modifier la liste des brèves ou des articles en fonction de la date ou de la catégorie de publication. Or, sans javascript, impossible d'accéder à ses fonctionnalités. J'ai donc traduit les fonctions en PHP.
Glossaire et XMLHttpRequest, second round
Nouvelle bidouille javascript : j'ai enfin trouvé le moyen d'afficher les définitions tirées du glossaire de manière satisfaisante (ou presque) avec l'objet XMLHttpRequest.
Javascript du formulaire des index
Modification de la fonction javascript utilisée dans le formulaire des pages d'index, qui permettait de modifier la liste des articles ou des brèves en sélectionnant soit leur date de publication, soit leur catégorie. La nouvelle version permet de combiner les deux sélections.
Spellerpages
Voici un outil qui pourrait être utile à beaucoup de gens : une collection de scripts javascript pour corriger les textes tapés dans des formulaires web.
Affichage du site sous Internet Explorer
Je n'avais pas mis les pieds sous Windows depuis plusieurs semaines déjà. Je l'ai fait ce midi pour vérifier comment se comportait la maquette du site avec Internet Explorer. Le résultat n'est pas brillant.
Glossaire, xmlhttprequest et notes de bas de page
Evolution du glossaire du site avec l'expérimentation d'une technique faisant appel à l'objet xmlhttprequest chère aux tenants d'Ajax. Quoi ? Serais-je passé du côté obscur de la force ?! Pas tout à fait...
Article : présentation par onglets en javascript
Voici une fonction javascript, NavTab, pour présenter le contenu d'une page web sous forme d'onglets, inspiré par le DomTab de Chris Heilmann.
Include en javascript
Du nouveau dans la gestion du javascript, avec la découverte d'une astuce qui répond parfaitement aux besoins de ce site : appeler un fichier javascript à la manière des « include » PHP.
Du nouveau en matière de notes de bas de page
Du nouveau sur les notes de bas de page dans les documents web: d'un côté une solution javascript qui reprend le concept d'Andreas Bovens, de l'autre un outil surpuissant très séduisant.
Switcher nouvelle formule
Voilà une nouvelle évolution du switcher, cette liste de liens qui permet, en activant le script créé par Paul Sowden, de changer la feuille de styles appliquée aux pages.
Nouveau moteur de recherche
Voilà finalement le nouveau moteur de recherche pour le site. Toujours en javascript, il s'appuie entièrement sur l'architecture de classification des documents, section, rubrique et mots-clés.
Amélioration du glossaire
Nouvelle évolution du glossaire du site: la fenêtre popup qui apparaît lorsque l'on clique sur un lien-définition n'affiche plus l'ensemble du glossaire mais uniquement la définition demandée.
Formulaires de l'index des brèves
La reconstruction du site est terminée. Il faudra reboucher les trous de-ci de-là, mais la grosse oeuvre est finalement pliée avec la nouvelle page d'archive des brèves et ses deux formulaires de sélection.
Formulaire de recherche sur chaque page
Le chantier n'est pas encore terminé, mais je poursuis l'explication de texte des nouvelles fonctionnalités du site, avec un formulaire de recherche sur chaque page.
Article: note de bas de page et Dom/javascript
C'est une question qui me turlupine depuis un moment : comment présenter les notes de bas de page dans un document web de façon à ce qu'elles soient aisément consultables à l'écran, tout en respectant la construction logique du texte ?
Javascript 3 : javascript et le Dom
Encore des modifications dans les quelques javascripts utilisés sur le site, notamment sur celui qui gère le style switcher.
Javascript 2 : popup et attribut rel
J'ai modifié deux scripts utilisés sur le site suite à la publication des tutoriels d'Olivier Patry sur Alsacréations. Il s'agit de l'ouverture de certains liens sous forme de popup et de la gestion des galeries d'images.
Migration 3 : Syntaxe wiki et javascript
La migration du site sur un nouvel hébergeur a aussi été l'occasion de modifier certains outils de gestion ou de publication.
Du javascript à bon escient ?!
Dans mon éternel bidouillage de la maquette du site, j'ai apporté deux modifications qui touchent à l'utilisation du javascript.
Moteur de recherche pour le site
Le script utilisé pour le moteur de recherche est basé sur celui écrit pas Olivier Hondermarck pour javascript.com. Je l'ai modifié pour :
Version finale de la nouvelle maquette
Après deux mois de tâtonnements, j'ai finalement obtenu une nouvelle maquette à peu près convenable. Voici les ultimes modifications du site.
articles (15)
Numérotation des listes ordonnées
Quelques petites techniques css et/ou javascript pour modifier le comportement par défaut des listes à puces ordonnées.
Positionner le centre d'un élément
Comment gérer la création de l'écran d'une application web lorsque ces différents composants doivent être positionner par rapport à leur centre.
Evénément change des éléments select
Analyse et tentative de d'harmonisation du comportement d'un élément select et de l'émission de l'événement change lors de la navigation au clavier sous différents navigateurs web. Où l'on voit que l'action la plus généralement adoptée n'est pas forcément la plus pertinente, surtout quand elle ne suis pas les recommendations W3C...
Click sur un pseudo-element
Comment déterminer en javascript qu'un événement click a eu lieu sur un pseudo-élément et pas ailleurs dans l'élément parent ?
Extensions Gnome-shell : émettre des événements
Comment, dans une extension gnome-shell, permettre à un objet d'émettre des événements ; et comment se mettre à l'écoute de ces événements.
Click sur des labels
La délégation d'écoute d'événements est très préciseuse en javascript mais, dans certains cas, elle peut engendrer des comportements particuliers. C'est le cas si l'élément sur lequel on écoute les événements « click » possède un label.
HTML 5 : l'élément meter
Petite introduction à l'utilisation du nouvel élément HTML 5 meter et à la manière de lui assurer un rendu sur les navigateurs qui ne le supporte pas.
GSettings : création d'un écran de configuration
Comment automatiser la création d'un écran de configuration d'une extension gnome-shell en se basant sur son schéma de préférences GSettings.
GSettings : utilisation en « local »
Depuis Gnome 3, le stockage de la configuration d'une application se fait par l'intermédiaire de GSettings, une API « agnostique » dont l'utilisation dans un plugin Gedit ou une extension Gnome-shell pose de petits problèmes car elle nécessite les droits administrateurs. Voici quelques pistes pour l'utiliser « en local ».
Omacronides 8
Après une mise à jour avortée (la 7, prévue cet été), voici enfin que j'arrive à peu près au bout des modifications et évolutions que je souhaitais apporté au site cette année (2011).
HTML 5 : l'élément progress
Petite introduction à l'utilisation de l'élément progress, apparu dans les recommendations HTML 5.
Omacronides 6
Après plusieurs semaines passées dans un état lamentable, ou toute requête se terminait par une réponse 404 (même si la page était correctement affichée), voici la nouvelle version du site. Comme toujours, plus de chambardements dans l'arrière-cours qu'en vitrine...
Récupérer les enfants d'un noeud DOM
Récupérer les enfants d'un noeud DOM est moins simple qu'il n'y paraît. Des solutions existent, et les récentes évolutions des spécifications W3C offrent de nouvelles perspectives mais un développeur web a encore besoin de créer ses propres outils. Petit tour de la question.
Nouvelle page d'accueil du site Framasoft
Et bien voilà : cela à pris plus de temps que prévu, tout n'est pas terminé, loin de là, mais nous lançons aujourd'hui une nouvelle page d'accueil de Framasoft, certains diraient en version « beta ».
Des styles en fonction du navigateur
L'utilisation des feuilles de styles en cascade pour mettre en page son site web n'est pas toujours évident, non que cette technique soit compliquée mais parce que, malgré l'existence de normes communes, chaque navigateur n'en fait un peu qu'à sa tête. Heureusement, des solutions existent. Cependant, leur utilisation ne risque-t-elle pas d'entretenir le statu quo ?!
projets (5)
TaskList
Document de travail prélude à la création d'un ensemble de codes, html, css, javascript et wiki permettant de gérer une liste de tâches.
Simple Slides
SimpleSlides est un projet tout simple, un POC pour illuster la manière dont on peut réaliser rapidement une visionneuses d'images avec du HTML, un peu de CSS et de javascript. Sa seule ambition est d'éventuellement servir de base à des projets plus aboutits et complets.
rnb-js
La librairie javascript rnb regroupe une série de fonctions et d'objets, développés sur le site http://omacronides.com depuis 2004, afin de les intégrer dans une structure commune.
Gedit : JsValidator
JsValidator est un plugin pour l'éditeur de texte Gedit qui permet de valider la syntaxe d'un fichier javascript grâce à JSLint.
Créer un moteur de recherche en javascript
Projet abandonné ; étant devenu obsolète, il a été supprimé.
links (32)
JQuery 2
DMETHVIN. jQuery 2.0 Released. blog.jquery.com,
Jquery 2 abandonne le support IE 6/7/8 :-D.
Et le bordel (re)commence
KOCH, Peter-Paul. Blink. Quirks mode,
EICH, Brendan. Mozilla and Samsung Collaborate on Next Generation Web Browser Engine. The Mozilla Blog,
Donc, l'équipe de Chrome forke (à nouveau) le moteur webkit avec Blink. Donc, Mozilla et Samsung s'associent pour développer un nouveau moteur de rendu, Servo.
Editeur javascript
Votre propre serveur de musique
MOURIñO, Alvaro. Shiva – More than a RESTful API to your music collection. hacks.mozilla.org,
Accessibilité d'une boîte de dialogue
ZAKAS, Nicholas. Making an accessible dialog box. NCZOnline,
Gnome et le javascript
BERSAC, Étienne. Javascript comme langage par défaut pour GNOME. linuxfr.org,
TREITTER. Answering the question: "How do I develop an app for GNOME?". Let's Push Things Forward,
Performances des attributs data-
STEFANOV, Stoyan. Efficient HTML5 data- attributes. Performance Calendar,
HEILMANN, Christian. How to read performance articles. christianHeilmann.com,
Les décorateurs en javascript
NAIFEH, Justin. Decorating Your JavaScript. DailyJS,
Web plateform Docs
Lancement de Web plateform Docs, un site communautaire chargé de réunir et de publier de la documentation autour des technologies web, soutenu par le W3C, Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla et Opera (vous trouvez pas qu'il manque quelqu'un là...).
Lien du 03 octobre 2012 à 18:00
BRIGHT, Peter. Microsoft TypeScript: the JavaScript we need, or a solution looking for a problem ?. ars technica,
Lien du 12 septembre 2012 à 18:00
MEDEIROS, Miller. Namespaces are Old School. blog.millermedeiros.com,
Lien du 16 juillet 2012 à 18:00
ATKINS, Tab. A Standards-Compliant CSS Parser. Tab Completion,
Lien du 28 juin 2012 à 20:00
YORIC. (re)introducing OS.File. Il y a du thé renversé au bord de la table,
Lien du 26 juin 2012 à 18:00
BURKE, james. ES Modules: suggestions for improvement. Tagneto,
Lien du 20 juin 2012 à 16:00
ROUGET, Paul. JavaScript awesomeness: Set, Map, Default arguments,.... paulrouget.com,
- J'ai crée dans ma librairie javascript un objet qui ressemble beaucoup à
Map; le getter renvoit une valeur par défaut spécififiable au lieu d'unundefined(get(key, defaultValue)). - Les valeurs par défaut des arguments sont aussi très utiles et se rapprochent de ce qui se fait en PHP ou en Python.
- L'intération sur les clés (
for...in, qui existe déjà) ou les valeurs (for...of) est aussi apréciable.
Lien du 17 juin 2012 à 16:00
PATONNIER, Jeremie. The Web Developer Toolbox: ThreeJS. hacks.mozilla.org,
Lien du 01 juin 2012 à 20:00
CROLL, Angus. The JavaScript arguments object...and beyond. JavaScript, JavaScript...,
Lien du 16 avril 2012 à 16:00
HEILMANN, Chris. Of parser-fetishists and semi-colons. christianheilmann.com,
Lien du 18 janvier 2012 à 16:00
BURKE, James. Simplicity and JavaScript modules. Tagneto,
DALE, Tom. AMD is Not the Answer. tomdale.net,
Lien du 22 novembre 2011 à 20:00
IEBLOG. Evolving ECMAScript. IEBlog,
Alors là, on applaudit bien fort l'équipe de développement d'Internet Explorer. Un bon tacle au niveau des oreilles contre Google et son Dart.
Lien du 13 novembre 2011 à 18:00
BRIGHT, Peter. JavaScript has problems. Do we need Dart to solve them ?. ars technica,
Lien du 28 octobre 2011 à 18:00
BEBENITA, Michael. Broadway.js - H.264 in JavaScript. haxpath.squarespace.com,
Après les pdf, c'est maintenant les vidéos au format h264 qui peuvent être lues directement en javascript. Enorme ! Bon, c'est juste une démonstration de faisabilité, mais tout de même...
Lien du 25 octobre 2011 à 20:00
CHUNG, Andy. Why AMD ?. requirejs.org,
Lien du 12 octobre 2011 à 20:00
KOCH, Peter-Paul. Dart; or Why JavaScript has already won. Quirksmode,
Lien du 04 octobre 2011 à 16:00
HEILMANN, Christian. A Quick Look Into The Math Of Animations With JavaScript. Smashing Magazine,
Lien du 01 octobre 2011 à 16:00
EICH, Brendan. New JavaScript Engine Module Owner. brendaneich.com,
Lien du 14 septembre 2011 à 20:00
PAUL, Ryan. Critics call foul as Google takes aim at JavaScript with Dart. arstechnica,
Lien du 08 août 2011 à 20:00
CROLL, Angus. Fixing the JavaScript typeof operator. Javascript, Javascript...,
Lien du 03 août 2011 à 18:00
LOUISREMI. Animating with javascript: from setInterval to requestAnimationFrame. hacks.mozilla.org,
Lien du 02 juillet 2011 à 18:00
BURKE, James. On inventing JS module formats and script loaders. Tagneto,
C'est RequireJs et son implémentation de la notion de modules en javascript qui m'a poussé à revoir la manière dont je gère les inclusions dans rnb-js. La librairie est d'ailleurs maintenant utilisée dans Firebug.
Lien du 25 juin 2011 à 10:00
MICHAUX, Peter. JavaScript is Dead. Long Live JavaScript!. peter.michaux.ca,
Lien du 19 octobre 2010 à 18:00
- Nouveau format d'image par Google : webP.
- Slideshow en html5/css3 par Paul Rouget.
- Les débuts du HTML.
- Les préfixes css des constructeurs de navigateurs web.
- PromoteJS, pour améliorer la visibilité de la bonne documentation javascript dans les moteurs de recherche.