Prendre un Café - Tag - javascript

YAML Brush for the SyntaxHighlighter Javascript Library

NiKo — Sun, 26 Jul 2009 13:48:00 +0200

During a trip back to Paris by train, I quickly coded for a project of mine a new brush for SyntaxHighlighter, a client-side syntax coloring library powered by Javascript, in order to highlight YAML code snippets.

You can get the code here and provide feedback by sending me an email.

Edit: Oops, didn’t find this already existing brush (I hadn’t wifi access in the train). I think my version support more specific aspects of the syntax, though.

Ce billet intitulé YAML Brush for the SyntaxHighlighter Javascript Library a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

Un plugin jQuery pour générer des plans automatiquement

NiKo — Sun, 08 Jun 2008 16:59:00 +0200

Avec un temps pareil, autant coder des plugins jQuery, non ?

Quelques heures de boulot plus tard, jqplanize^[1] est né et permet de générer automatiquement une table des matières extraite de la hiérarchie induite de la séquence des titres d’un document HTML^[2].

La doc est sur la page d’accueil du projet (hébergée chez Google), ou plus exhaustivement sur cette page dédiée du présent site, avec quelques exemples live.

Le code semble fonctionner sous Firefox 3 RC2 et Safari 3.1, mais ça ne marche curieusement pas sous Opera 9, et j’ai pas testé sous IE donc attendez vous à des updates^[3].

Vivement l’été.

Notes

[1] Non mais vous avez déjà vu un nom aussi naze ?

[2] Si tant est que le balisage des titres soit sémantique, hein.

[3] Ou pas, bien entendu.

Ce billet intitulé Un plugin jQuery pour générer des plans automatiquement a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

Toujours en vrac

NiKo — Thu, 13 Dec 2007 10:41:00 +0100

SimpleDB, un webservice de stockage et d'accès aux données proposé par Amazon en version beta. Intéressant !
Créez vos applications javascript en ligne chez AppJet. Impressionnant... mais complètement inutile ?
Un hack génialissime à base de wiimote. Là pour le coup, c'est une petite révolution... Sans doute l'un des meilleurs hack de matos de tous les temps !
Votre ordinateur est-il satisfait de son browser ?
IE8 passerait le test Acid2. Excellente nouvelle pour les standards !
Firefox 3 beta 2 est dispo. Nanti du thème Proto pour OS X, c'est déjà une petite tuerie
Amis du GTD, la nouvelle extension Firefox pour GMail de Remember The Milk est très chouette.

Ce billet intitulé Toujours en vrac a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

Yet Another En Vrac

NiKo — Thu, 06 Dec 2007 09:00:00 +0100

Tiens, ça faisait longtemps...

Un petit tour d'horizon des possibilités de HTML 5. Évolution très prometteuse du vieux et abscons HTML 4, la date de sortie supposée (dans 10 ou 15 ans dixit l'auteur) refroidit cependant, et c'est dommage...
Javascript 2 pointe le bout de son nez, basé sur la version 4 de la spécification ECMAScript. Au programme, entre autres réjouissances, classes, interfaces, namespaces et packages : MIAM (et surtout, ENFIN.)
Quelques unes des nouvelles fonctionnalités retenues pour implémentation dans la version 5.3 de PHP : namespace support (megayeah), OpenID support in ext/openssl (megayeah), late static binding (yeah), SQLite 3 support in ext/sqlite (cool), mysqlnd library in the core (cool)... Mais que restera t-il à PHP 6 ?
CouchDB, un serveur de base de document accessible via une API REST JSON très prometteuse avec un exemple de mise en oeuvre simple et efficace.
Côté Symfony :
- Une chouette exploration des fonctionnalités de gestion de formulaires et de leur validation dans la prochaine version 1.1 du framework.
- Un chouette projet de forum basé sur le framework et quelques plugins a vu le jour : Motilee. Contributions bienvenues.
- Fabien Potencier, créateur et mainteneur de Symfony a ouvert son blog, et on y trouve déjà quelques petites astuces intéressantes.

Ce billet intitulé Yet Another En Vrac a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

Dégradabilité javascript et Ajax dans Symfony avec jQuery

NiKo — Wed, 03 Oct 2007 11:31:00 +0200

Pour un projet, je suis en train d'utiliser la librairie javascript jQuery dans Symfony, en lieu et place du couple prototype et scripaculous dont je vous avait déjà parlé.

L'idée est ici de ne pas avoir à utiliser les helpers fournis par Symfony (qui mettent en oeuvre exclusivement Scriptaculous) et ainsi d'éviter d'utiliser les deux librairies simultanément sur le projet, mais aussi de décoreller le code javascript des templates et de favoriser une meilleure dégradabilité de ce dernier.

Par exemple, au lieu d'utiliser la fonction link_to_remote() dans notre template, on peut tout à fait imaginer d'employer un bon vieux link_to() des familles et de lui appliquer une classe css qu'on va pouvoir cibler depuis jQuery afin d'effectuer un appel AJAX pointant vers l'url présente dans l'attribut href du lien. Avec un exemple, c'est un peu plus clair :

 php
<?php echo link_to('Mon lien', '@maroute?monparam=mavaleur', array('class' => 'ajax_link')) ?>

Dans un fichier javascript (jQuery doit bien entendu être chargé) :

 javascript
$(document).ready(function() {
  $('a.ajax_link').click(function()
    {
      $.ajax(
        {
          type: 'post',
          url: $(this).attr('href'),
          success: function(msg)
          {
            alert("Résultat: " + msg);
          }
        });
      return false;
    }
  );
});

Avantage supplémentaire, vous continuez à bénéficier du système de routing Symfony (pas d'urls en dur dans les fichiers javascripts externalisés.)

Là où Symfony va également nous aider, c'est au travers de sa gestion native de la décoration d'une vue en fonction du type d'appel HTTP : le framework va detecter si l'action a été appelée ou non depuis une requête XmlHttpRequest et, si c'est le cas, décorer la vue avec le layout global de l'application et donc présenter à vos utilisateur le résultat escompté, qu'ils aient activé javascript ou non pour surfer sur votre site.

Si vous désirez mettre à jour un élément de l'arbre DOM avec le contenu reçu d'une requête Ajax, voici une autre petite astuce ; on va utiliser une ancre dans l'url et s'en servir comme argument décrivant l'id DOM qu'on veut mettre à jour :

 php
<?php echo link_to('Mon lien', '@maroute?monparam=mavaleur#mon_div', array('class' => 'ajax_link')) ?>
<div id="mon_div" style="display:none"></div>

Et en javascript :

 javascript
$(document).ready(function() {
  $('a.ajax_link').click(function()
    {
      var href = $(this).attr('href');
      var target = href.substring(href.lastIndexOf('#'), href.length);
      $.ajax(
        {
          type: 'post',
          url: href,
          success: function(msg)
          {
            if ($(target))
            {
              $(target).html(msg).show('slow');
            }
          }
        }
      );
      return false;
    }
  );
});

Note : on aurait pu aussi détourner l'attribut target à cette fin mais ce dernier n'est pas valide en XHTML strict.

Bien entendu, ceci n'est qu'un microscopique aperçu de l'étendu des possibilités de jQuery et de son intégration possible avec Symfony (ou d'autre frameworks et langages, bien entendu.)

Ce billet intitulé Dégradabilité javascript et Ajax dans Symfony avec jQuery a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

Google Gears : vous pouvez vous deconnecter

NiKo — Thu, 31 May 2007 17:38:00 +0200

Note : ce billet est une reprise de l'article que j'ai publié sur le blog de Clever-Age, Google Gears : vous pouvez vous déconnecter.

Edit : Article publié sur ZDNet, la gloire ^^

Google a annoncé aujourd’hui à l’occasion du Google Developer Day le lancement de sa réponse technique concrète aux problèmes de la consultation et de la synchronisation de données web en mode déconnecté : Google Gears.

Cette réponse prend la forme d’une extension pour navigateur web (Firefox sur Windows, Mac et Linux, Internet Exporer sur Windows ^[1]) comprenant un serveur local, une base de données et un gestionnaire de transactions permettant de transformer le navigateur en solution client-serveur local afin de régler l’épineux problème du travail en mode déconnecté avec les applications web modernes.

En effet, si les applications en ligne se sont considérablement enrichies et sophistiquées ces dernières années, au point de devenir de plus en plus indispensables à certains d’entre nous, elles subissent cependant pour la plupart d’entre elles d’une limitation importante : la nécessité d’être en permanence connecté à internet pour fonctionner. Nombreux sont les cas d’impossibilité de se connecter au réseau des réseaux : zone de couverture, problèmes matériels, d’infrastructure, etc.

Bien sûr, certains se sont déjà - et parfois depuis longtemps - penchés sur la question. C’est le cas de Mozilla avec l’ajout dans la version 2 de Firefox d’une base de données SQLite ou du projet Zimbra permettant la sauvegarde de ressources locales. Mais l’une des solutions les plus avancées semblait se situer du côté du Dojo Offline Toolkit, un projet open source proposant des fonctionnalités de stockage d’interfaces, de données et d’applications en local et des fonctionnalités de synchronisation.

Google Gears se base sur cette dernière solution, embarquant le Dojo Offline Toolkit et une base de données SQLite au sein même de son extension. L’extension est open source (sous licence new BSD) et peut à ce titre être redistribuée dans une application embarquant le runtime ou utiliser une installation existante de l’extension. La disponibilité du code est également une bonne garantie quand à la transparence, au taux d’adoption, à la sécurité et l’évolutivité du produit ^[2]

Une des premières mises en oeuvre intéressantes de Gears se situe depuis ce matin dans Google Reader, l’agrégateur en ligne de Google : les utilisateurs ont pu remarquer la présence d’un nouveau bouton permettant de récupérer en local les 2000 derniers éléments non-lus afin de pouvoir les consulter hors-ligne.

Évidemment, ceci n’est qu’un début et Google ajoutera progressivement ce type de fonctionnalités à ses applications en ligne phares comme GMail, Calendar, Docs, etc...

Google Gears ne sera cependant pas limité au monde de Google, mais sera utilisable par tout éditeur de site Web concerné par ce type de problématiques. Imaginons par exemple l’application d’un constructeur automobile permettant de configurer son véhicule : l’utilisateur télécharge alors de façon transparente le catalogue des éléments disponibles et peut ensuite prendre tranquillement l’avion, utiliser l’application pendant le vol en configurant sa future voiture. Une fois rendu à destination, il synchronise sa simulation une fois reconnecté à internet et envoie les données au serveur web du constructeur.

Plus directement utile ? Le téléchargement en local des données cartographiques et des points d’intérêt de votre futur périple au bout du monde, hors-zone de couverture internet ? Vous y êtes ?

Alors, tout est au mieux dans le meilleur des mondes ? Peut-être pas, si l’on considère cette initiative de Google sous l’angle de la standardisation : en effet, Google et les équipes de développement Dojo proposent aujourd’hui une solution qui est basée sur un effort de réflexion qui a été initié auprès d’un nombre restreint de participants ; quid si demain Microsoft publie sa propre interprétation du problème ? Allons-nous à nouveau assister à un affrontement des deux géants, avec tout ce que cela implique en terme de problèmes d’interopérabilité ? Le fait qu’Adobe semble vouloir intégrer Gears dans Appolo et que Mozilla et Opéra soient de la partie risque de complexifier encore un peu plus le problème pour l’éditeur de Redmond.

Reste que le sujet est à surveiller de près, car les enjeux sont énormes à l’heure où les applications web tendent à empiéter de plus en plus sur le territoire des applications client-lourd traditionnelles.

[1] Le support de Safari et d’Opéra est d’ores et déjà annoncé.

[2] Déjà une mise à jour depuis le lancement ce matin même !

Ce billet intitulé Google Gears : vous pouvez vous deconnecter a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

Over. Geek.

NiKo — Wed, 30 May 2007 12:22:00 +0200

Marre des éditeurs wysiwyg foireux ? Accro à Vim ? jsvi est fait pour vous

Ce billet intitulé Over. Geek. a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.

CMS, bonhomme en mousse, Rollex et tout ce qui s'en suit

NiKo — Tue, 10 Oct 2006 08:14:00 +0200

Yooggle, Gootube, bref, je ne vais pas revenir sur l'acquisition de l'année. La question qu'on peut raisonnablement se poser reste POURQUOI FAIRE BORDEL ?
Pep nous signale un excellent article sur Vitamin concernant le mythe du CMS ; cet article résume très bien ce que je pense depuis pas mal de temps, à savoir qu'aucun système de gestion de contenu (CMS) ne saura jamais gérer entièrement la complexité de vos contenus (ou ceux de vos clients), et que l'y pousser est AMHA totalement contre-productif en regard de l'utilisation d'outils plus bas niveau comme les frameworks, associés aux méthodes de développement agiles.
Cette image sans fin est de toute beauté (Flash.)
Le petit hardos en mousse, déjà dans les bacs (Via ScoopekNo')
Une recherche d'images sur Google pour les mots-clé Rollex watches renvoie des résultats surprenants.
Heureusement pendant ce temps-là, la science progresse et assène des évidences qui n'avaient échappé à personne
Sinon sans transition, entrez cette petite ligne de javascript dans la barre d'adresse de votre navigateur sur n'importe quel site, pour voir (via) :

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

Ce billet intitulé CMS, bonhomme en mousse, Rollex et tout ce qui s'en suit a été rédigé par Nicolas Perriault et publié sur le blog Prendre un Café sous licence Creative Commons BY-NC-SA.