La nouvelle campagne Nike au Japon pour les Nike’s Free Run+ traine depuis quelques jours sur la toile mais sur le site a été ajouté un fond lançant dynamiquement des animations calées sur la musique (le tout tournant via un framework Flash made in Japan : Progression 4).

PS : Si vous voulez en savoir comment ils ont fait (pour la musique), c’est ici que ca se passe.

Voilà ce qui arrive lorsque l’on tente d’appliquer la récursivité au langage C… On s’expose au réveil des anciens et à la perte totale de santé mentale… [via boingboing]

Voici une étonnante compilation de musique générative codé par 14 musiciens, en moins de 140 caractères. Avant-gardistes et expérimentales, ces créations utilisent SuperCollider, un langage de programmation open source permettant la synthèse audio en temps réel. A découvrir… [via Boing Boing]

—Dan Cederholm, Handcrafted CSS (en parlant de CSS3)

Que s’est-il dit cette année durant la conférence Future of Web Design?

Que désormais, on attendrait une certaine consistance dans l’expérience user et plus sur l’aspect graphique entre les différents browsers. J’en connais qui vont prier pour que ça se réalise…

Le résumé sur IDSGN, sur Swissmiss et les vidéos sur Carsonified. Comme tout les ans, ça fait rêver.

ahah a vu le jour en 2005, enfanté par Kevin Marks (le CV de ce monsieur est plus qu’impressionnant), sous le nom de jah.

ahah permet comme l’Ajax de mettre à jour dynamiquement le contenu d’une page web. Le principe en est simple, on lance une requête XMLHttpRequest sur un simple fichier xhtml, et on injecte directement le code XHTML dans le conteneur ciblé, sans le parser en XML et sans aucun traitement javascript pour l’insérer dans le DOM. La contrepartie ? L’utilisation de la méthode non standard innerHTML qui est tout de même implémentée dans tous les navigateurs majeurs.

Bien que moins connu que l’Ajax, ahah à été intégré à plusieurs librairie javascript et est disponible par exemple dans le core de drupal, entre autre pour la gestion des formulaires, il fait aussi parti des recommandations du standard w3c xForms.

L’idée est très intéressante mais l’implémentation proposée ne résiste pas à jslint, mettant en avant l’usage de trois variables globales, dont la variable stockant la requête, empêchant plusieurs appels simultané à la fonction ahah.

La nuit portant conseil, voici l’implémentation qui m’est venue à l’esprit ce matin, en me faisant mon premier café.

var ahah = (function(){
    var request = function () {
        if (window.ActiveXObject) {
            var activexmodes = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
            var mode;
            for (var i = 0; i < activexmodes.length; i += 1) {
                var activexmode = activexmodes[i];
                try{
                    if(new ActiveXObject(activexmode)){
                        mode = activexmode;
                    }
                }
                catch(e) {
                }
            }
            request = function () {
                return new ActiveXObject(mode);
            };
        }
        else if (window.XMLHttpRequest) {
            request = function () {
                return new XMLHttpRequest();
            };
        }
        return request();
    };
    return function (url, id) {
        var container = document.getElementById(id);
        container.innerHTML = 'sending...';
        var xhr = request();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4)
            {
                if (xhr.status === 200) {
                    container.innerHTML = xhr.responseText;
                } else{
                    container.innerHTML = "Jah error: "+xhr.statusText;
                }
            }
        };
        xhr.open("GET", url,  true);
        xhr.send(null);
    };
})();

On attribue à ahah la valeur de retour d'une fonction auto éxécutante. Ce retour est une fonction prenant l'url à ouvrir et l'id de l'élément que l'on souhaite peupler. On récupère l'élément que l'on assigne à une closure accessible à la fonction anonyme qui gère le changement d'état et donc l'affichage du retour.

La fonction request, elle aussi stocké dans une closure au début de la fonction auto éxécutante, délivre un object xhr en fonction du navigateur. Au premier appel, elle se réécrit elle même, afin d'éviter les tests répétés. Au final, une seule variable globale, et possibilité d'appels simultanés. Vous pouvez tester ici.

[1] Pour vous renseigner plus avant sur les microformats :

microformats.org

article wikipedia

[2] Pour vous renseigner plus avant sur le μF XOXO :

spécifications XOXO

article wikipedia

[3] Pour vous renseigner plus avant sur le μF rest/ahah (anciennement jah) :

spécifications ahah

la naissance de jah

article wikipedia

Attention la lecture de ce post n’est pas recommandée aux âmes sensibles…

La semaine dernière, dans l’article sur le livre de Douglas Crockford, je vous présentais une méthode pour utiliser un ECMAScript (dont le javascript est l’émanation principale) dans votre shell, avec Ejscript.

Il existe bien sûr plusieurs autres méthodes, la plus connue étant Rhino, un interpréteur écrit en Java. Les plus aventureux seront sans doute tentés par la compilation pure et dure du noyau javascript de mozilla. Sous windows, dans le powershell, l’utilitaire cscript remplit cet office.

Sous OSX, Je cherchais depuis un petit moment comment utiliser le moteur javascript de webkit pour faire la même chose. Au détour de mes pérégrinations, je suis tombé sur ce post de Stoyan, dont le livre Object-Oriented JavaScript explique très bien la programmation objet propre à ce langage et ses différences avec des modèles dit classiques.

En résumé, le noyeau javascript de webkit est caché dans ce répertoire :

/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc

Pour l’utiliser dans votre shell, il vous suffit d’ajouter le chemin à votre PATH, ou de créer un lien dans un répertoire exposé (ici /usr/bin, mais j’ai une préférence pour /usr/local/bin ou même /opt/bin):

$ sudo ln /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc \
/usr/bin/jsc

Un petit tour dans l’aide :

$ jsc -h
Usage: jsc [options] [files] [-- arguments]
  -d         Dumps bytecode (debug builds only)
  -e         Evaluate argument as script code
  -f         Specifies a source file (deprecated)
  -h|--help  Prints this help message
  -i         Enables interactive mode (default if no files are specified)
  -s         Installs signal handlers that exit on a crash (Unix platforms only)

Lancé sans option, jsc est en mode interpréteur et vous permet d’évaluer ligne à ligne votre code.

Avec un nom de fichier, il exécute le script vous permettant de passer des arguments après le délimiteur -- :

$ jsc arg.js -- 1 2 3

Ces arguments pourront être récupérés par le classique arguments.

Trois fonctions utiles dans cette environnement :

• print(): pour afficher dans le terminal
• quit(): quitte jsc
• load(): charge et exécute un fichier externe

Vous n’avez plus d’excuses pour ne pas utiliser vos scripts javascript en local.

[EDIT]:
En continuant mes recherches, j’ai découvert un post plus ancien ici qui décrit en plus comment utiliser jslint dans le shell, ce qui facilitera les étapes de debugs.
Si vous utilisez textmate, voici des instructions pour intégrer jslint (en partie dans les commentaires et sur le blog de Stoyan).

Ces derniers temps, je code essentiellement en javascript et ce de manière assez intensive. Nombre des ressources disponibles à ce sujet n’ont que très peu d’intérêt, mais pourtant au milieu de cette masse, il existe un livre qui sort réellement du lot : Javascript: The Good Parts de Douglas Crockford chez O’REILLY.

Douglas Crockford est une des grandes autorités en matière de js. Il est à l’origine de plusieurs livres et essais sur le sujet, mais surtout de plusieurs outils et extensions pour ce langage, comme par exemple JSlint (un vérificateur de code), JSMin et surtout Json, le format léger de données dérivé de la notation des objets js.

Dans The Good Parts, il se propose de réduire la syntaxe js aux éléments vraiment pertinents qui font la force et la beauté de ce « Lisp en habit de C », tout en écartant les nombreuses monstruosités incluses dans le langages tel que eval, with, la gestion aberrante de ==, et surtout l’utilisation des variables par défaut globales.

Autre force du livre, il expose le modèle objet du js, hérité de self, sans le grimer avec des ersatz de déclarartion de classe emprunté au Java ou au C++. Ce modèle basé sur les prototypes (clonage d’un objet) est sans doute une des forces du langage, et Crockford la maîtrise parfaitement passant outre le mot clé batard new. Avec en sus, un modèle objet fonctionnel permettant propriétés et méthodes privées et utilisant les closures, un autre avantage du langage…

ex:

var mammal = function (spec) {
    var private = "mamal";
    var that = {};

    that.get_name = function (  ) {
        return spec.name;
    };

    that.says = function (  ) {
        return spec.saying || '';
    };

    that.specie = function (  ) {
        return private;
    };

    return that;
};
var myMammal = mammal({name: 'Herb'});
document.writeln(myMammal.get_name());
document.writeln(myMammal.specie());

Alors si vous n’avez qu’un livre à lire sur le sujet, n’hésitez plus et passez la barre de l’anglais…

Dans le même registre, sur le site de John Resig, le créateur de jQuery, vous trouverez un excellent tutorial sur le sujet, issu de son prochain livre qui devrait sortir très prochainement et qui s’appellera Secrets of the JavaScript Ninja.

Enfin, si vous ne pouvez plus vous passer de Javascript et avez envie d’utiliser un ECMAscript côté serveur ou en tant que langage shell, je vous conseille le très intéressant ejscript…