Un petit exemple, basé sur ExtJS, de ce que peut nous offrir HTML5 en couplant le concept du Drag and Drop natif et du FileReader. Il est désormais possible de glisser/déposer un fichier venant de votre système de fichiers dans votre navigateur web. En outre ce fichier peut être lu par le browser ce qui permet de récupérer le contenu de ce dit fichier en JavaScript. Elle est pas belle la vie ?
Petit bémol à tout cet enthousiasme, à l'heure ou j'écris ces lignes le Drag and Drop n'est pas disponible sous Internet Explorer. Pire encore le FileReader n'est dispo que sous FireFox 3.6+ et Chrome (ou Chromium) 6 dev channel. C'est pas le Pérou mais ça laisse envisager tout plein de bonnes choses d'ici peu.

Le petit bout de code pour illustrer tout ca :

Ext.ns("Ext.ux.grid"); 
 
Ext.ux.grid.CSVImport = function() { 
 
    var grid = null; 
 
    function addRow(row) { 
        row = row.split(","); 
        grid.store.loadData([row], true); 
    } 
 
    function processFile(file) { 
        var reader = new FileReader(); 
        reader.onload = function(e) { 
            var rows = atob(e.target.result.split(",")[1]).split("\n"); 
            Ext.each(rows, addRow); 
            grid.fireEvent("read", grid, file, rows, reader); 
        }; 
        reader.readAsDataURL(file); 
    } 
 
    function onFilesDrop(e) { 
        e.stopPropagation(); 
        e.preventDefault(); 
        var files = e.browserEvent.dataTransfer.files; 
        if ( 
            files && files.length && 
            grid.fireEvent("beforedrop", grid, files) !== false 
        ) { 
            // no defer, no load mask... 
            (function() { 
                Ext.each(files, processFile); 
                grid.fireEvent("drop", grid, files); 
            }).defer(50); 
        } 
    } 
 
    function initDD() { 
        grid.body.on({ 
            scope:grid 
            ,dragover:function(e) { 
                e.stopPropagation(); 
                e.preventDefault(); 
                if (!Ext.isGecko) { // prevents drop in FF ;-( 
                  e.browserEvent.dataTransfer.dropEffect = 'copy'; 
                } 
                grid.fireEvent("dragstart", grid); 
                return; 
            } 
            ,dragleave:function(e) { 
                e.stopPropagation(); 
                e.preventDefault(); 
                grid.fireEvent("dragstop", grid); 
                return; 
            } 
            ,drop:onFilesDrop 
        }); 
    } 
 
    function init(component) { 
        grid = component; 
        grid.on({afterrender:initDD}) 
    } 
 
    return {init:init}; 
 
}; 
 
Ext.onReady(function() { 
 
    // BASIC 
 
    new Ext.grid.GridPanel({ 
        renderTo:Ext.getBody() 
        ,width:500 
        ,height:400 
        ,plugins:[new Ext.ux.grid.CSVImport()] 
        ,store:new Ext.data.ArrayStore({ 
            fields:["a", "b", "c", "d", "e", "f", "g", "h", "i"] 
        }) 
        ,columns:[ 
            {dataIndex:"a", header:"A"} 
            ,{dataIndex:"b", header:"B"} 
            ,{dataIndex:"c", header:"C"} 
            ,{dataIndex:"d", header:"D"} 
            ,{dataIndex:"e", header:"E"} 
            ,{dataIndex:"f", header:"F"} 
            ,{dataIndex:"g", header:"G"} 
            ,{dataIndex:"h", header:"H"} 
            ,{dataIndex:"i", header:"I"} 
        ] 
    }); 
 
    // ADVANCED 
 
    new Ext.grid.GridPanel({ 
        renderTo:Ext.getBody() 
        ,width:500 
        ,height:400 
        ,plugins:[new Ext.ux.grid.CSVImport()] 
        ,store:new Ext.data.ArrayStore({ 
            fields:["a", "b", "c", "d", "e", "f", "g", "h", "i"] 
        }) 
        ,columns:[ 
            {dataIndex:"a", header:"A"} 
            ,{dataIndex:"b", header:"B"} 
            ,{dataIndex:"c", header:"C"} 
            ,{dataIndex:"d", header:"D"} 
            ,{dataIndex:"e", header:"E"} 
            ,{dataIndex:"f", header:"F"} 
            ,{dataIndex:"g", header:"G"} 
            ,{dataIndex:"h", header:"H"} 
            ,{dataIndex:"i", header:"I"} 
        ] 
        ,listeners:{ 
            dragstart:function(grid) { 
                grid.view.scroller.setStyle("background-color", "#FFFDF6"); 
            } 
            ,dragstop:function(grid) { 
                grid.view.scroller.setStyle("background-color", "#FFFFFF"); 
            } 
            ,beforedrop:function(grid, files) { 
                if (!grid.mask) { 
                    grid.mask = new Ext.LoadMask( 
                        grid.body 
                        ,{msg:"Loading data, please wait..."} 
                    ); 
                } 
                grid.mask.show(); 
                // return false to cancel import 
            } 
            ,drop:function(grid, files) { 
                grid.view.scroller.setStyle("background-color", "#FFFFFF"); 
            } 
            ,read:function(grid, file, content, reader) { 
                grid.mask.hide(); 
            } 
        } 
    }); 
 
});

J'utilise Emacs pour dev. Ne me demandez pas pourquoi, (les fichiers de conf (sont en Lisp) (no comment)) et tout est basé sur les raccourcis claviers qui n'ont bien sur rien de classiques ni d'intuitifs.
Je me sert beaucoup d'ExtJS et naturellement coder du JavaScript avec Emacs de base est une grosse galère. Meme apres avoir installé les packages classiques à la c-mode, php-mode ou les "special-web-mod-chepakoi" qu'on peut trouver sous debian c'est toujours misérable d'enchainer trois lignes.
Apres avoir cherché "un peu" je suis tombé sur js2-mode. Ca m'a juste sauvé la vie et m'a permis de conserver mon vieil éditeur de texte, franchement pas web 2.0, mais que j'aime.

Je cherchais un moyen de créer rapidement et facilement des interfaces web complexes.
Je développe des applications web et il fut un temps ou il m'était bien plus long et fastidieux de concevoir et réaliser la partie client que la partie serveur. De plus les bugs liés au code de l'interface étaient nombreux, imprévisibles et souvent bloquants. Il me fallait trouver une librairie javascript cross-browser, facile à implémenter et qui fait le café de préférence. C'est la que je suis tombé sur ExtJS version 1 et ce fut le coup de foudre.

ExtJS est un framework javascript complet et performant permettant de construire des interfaces web riches et complexes. Cette librairie qui en est à sa version 3, offre une API composées de nombreux widgets et autres fonctions particulièrement utiles. ExtJS possède un core qui met à votre disposition des fonctions basiques telle la recherche dans le DOM, la manipulation du HTML, les échanges de données avec le serveur. La version complète quant à elle dispose d'objets plus complexes, accompagnés souvent d'une interface graphique entièrement prise en charge par la librairie. Les arbres, tableaux, accordéons s'assemblent et communiquent entre eux ou avec le serveur très simplement. Une fois les concepts de bases acquis il devient simple et rapide de construire une interface fonctionnelle, extensible, dynamique et en plus pas trop moche, sans même avoir mis les mains dans le HTML.

Il y a bon nombre de librairies javascript sur le marché qui fonctionne très bien et qui offre pas mal de confort au développeurs. Pour le moment ExtJS semble être la plus aboutie. Gardons l'œil ouvert cet etat changera surement un de ces quatre, mais si vous devez apprendre à manipuler un framework javascript en ce moment intéressez vous à ExtJS.

C'est complètement incroyable, j'avais entendu dire que PHP était une grosse bouse, autant au niveau perf qu'au niveau sécu, sans parler du langage en lui-même. Mais là je crois qu'on a franchi les limites de l'absurde. Manifestement PHP est tellement naze, mais aussi tellement utilisé, que des mecs on mis au point un système qui transforme le PHP en C++ pour rendre son execution plus rapide. Le pire c'est qu'il semble que ca marche, on parle de 50% de gain CPU. C'est complètement fou.

Déjà un grand merci aux dev d'ExtJS de laisser une faille de sécu dans les exemples fournis avec le framework. Voila ca c'est fait. C'est une faille de sécu remontée depuis 2007, la version première d'ExtJS et qui traine là tranquillou billou depuis des lutres donc.
Je sais bien que de toute façon les gens bien ne mettent pas en prod le framework en laissant le répertorier contenant les examples ... mais bon on ne sait jamais, des fois que ...

La faille en question se situe dans le fichier examples/feed-viewer/feed-proxy.php, qui ressemble à ça :

<?php