Official Google Blog: Introducing the Google Chrome OS

Google Chrome OS - Wiip

Chargement dynamique de plusieurs scripts Javascript

Avec Ajax, on se retrouve rapidement avec des scripts Javascript volumineux. Pour accélérer le chargement des pages, on peut charger les scripts à la demande.

C'est assez simple à faire avec le DOM. Il suffit d'ajouter une balise script à l'entête de la page. Pour éviter de charger deux fois le même fichier, chaque URL est stockée dans un tableau. Si l'adresse du script existe déjà dans ce dernier, le chargement ne s'effectue pas.

Pour éviter des problèmes avec le cache, j'ajoute un paramètre aléatoire à l'URL.

La fonction permet également d'appeler une fonction de rappel qui sera appelée lorsque le script sera chargé. Firefox et les autres navigateurs fournissent un événement onload qui peut être utilisé. Pour Internet Explorer, on peut utiliser la propriété onReadyStateChange.

/**
 * Load one script
 * @param {String} url Url of the script
 * @param {Function} callback This function will be called when the script will be loaded.
 * @param {boolean} forceCallback If true, call the function even if the script is already loaded. Default to false.
 */

function loadScript(url, callback, forceCallback) {
  if (!this.loadedScript) {
    this.loadedScript = new Array();
  }
  if (this.loadedScript.indexOf(url) == -1) {
    this.loadedScript.push(url);
    var e = document.createElement("script");
    e.src = url + "?" + Math.random();
    e.type = "text/javascript";
    if (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
      // IE
      e.onreadystatechange = function(){
        if (this.readyState == 'loaded') {
          callback();
        }
      }
    } else {
      // Other browsers
      e.onload = callback;
    }
    document.getElementsByTagName("head")[0].appendChild(e);
  } else {
    if (forceCallback) {
      callback();
    }
  }
}

Ça fonctionne bien, mais pour pouvoir répartir mon code sur plusieurs fichiers, j'avais besoin d'une fonction capable de charger de façon séquentielle plusieurs scripts. Des appels successifs à loadScript n'auraient pas fait l'affaire, car le chargement se fait de façon asynchrone. L'ordre des scripts n'aurait pas forcément été respecté, ce qui est génant si les fichiers sont dépendants les uns des autres.

J'ai donc écrit la fonction suivante, qui charge les fichiers les uns après les autres. Le principe est simple, mais pas évident à traduire en code : on charge le premier fichier avec une fonction de rappel qui charge le fichier suivant, et ainsi de suite. Pour la fonction createCallback, je me suis inspiré de celle existant dans ExtJS

/**
 * Load several scripts
 * @param {Array} scripts Exemple: ["script1.js", "script2js"]
 * @param {Function} callback This function will be called when the script will be loaded.
 */

function loadScripts(scripts, callback){
  function createCallback(method, args){
    return function() {
      return method.apply(window, args);
    };
  }
  var callbacks = new Array(createCallback(loadScript, [scripts[scripts.length - 1], callback]));
  for (var i = scripts.length - 2; i > 0; i--) {
    callbacks.unshift(createCallback(loadScript, [scripts[i], callbacks[0], true]));
  }
  loadScript(scripts[0], callbacks[0]);
}

Vous pouvez voir un exemple d'utilisation de la fonction ici.

Extraire un paramètre de l'url avec javascript

Exemple pour extraire la valeur du paramètre id :

location.search.match(/id=([^&]*)/)[1]

Google Documents

Aujourd'hui, j'ai utilisé "sérieusement" Google Documents (avec Google Chrome d'ailleurs) pour produire un document de plusieurs pages.

J'ai en fait importé un document existant au format OpenOffice. L'importation s'est correctement déroulée, j'ai récupéré l'intégralité de mon document...à l'exception des sauts de page. En fait ils étaient toujours là quand je demandais une impression, mais ils ne s'affichaient pas dans le document. J'ai donc été contraint de les insérer à nouveau pour qu'ils apparaissent sous la forme d'un rectangle gris en pointillés. J'ai également des tabulations qui ont disparues, que j'ai remplacé par des tableaux. Finalement, j'ai aussi eu des soucis avec du texte qui flottait autour d'une image. Là aussi, j'ai résolu le problème avec un tableau.

Ces petits désagréments sont courants quand on passe d'une application à une autre. Sur ce point, Google Documents n'est ni meilleur, ni pire que les autres.

A de nombreuses reprises, j'ai par contre été contraint de passer en édition directe du HTML pour reprendre des bizarreries. Je ne sais pas si c'est lié au fait que je travaillais sur un document importé.

Ce qui m'a plus, c'est que si on connait le langage HTML et les feuilles de styles CSS, on peut régler précisément les styles de son documents. En outre, les fonctions sont limitées, ce qui évite de créer des documents "Usines à Gaz" comme dans MS Word.

En conclusion, Google Documents, c'est pas mal, mais il faut le pratiquer pour connaître les choses à éviter.

Aide mémoire pour les relations Zend_Db_Table

J'ai un peu de mal à me souvenir de la syntaxe à utiliser pour définir les relations entre les tables, je me suis donc créé cette petite référence pour éviter d'avoir à me replonger à chaque fois dans la documentation.

• $_dependentTables : On liste les noms des classes correspondants aux tables qui ont une clé étrangère qui pointe vers cette table.
• $_referenceMap : On décrit les clés étrangères que cette table contient.

Exemple :

On a une table Produits et une table Catégories. Chaque produit est lié à la table Catégories par le biais de la colonne categorie_id qui pointe vers la clé primaire de la table Catégories.

class Categories extends Zend_Db_Table_Abstract
{
  protected $_dependentTables = array('Produits');
}

class Produits extends Zend_Db_Table_Abstract
{
  protected $_referenceMap = array(
    'Categorie' => array(
      'columns' => 'categorie_id',
      'refTableClass' => 'Categories'
    )
  );
}

Logiciels indispensables

Comme l'oxygène, ils sont indispensable à ma vie ! (j'exagère un peu)

Firebug

Le meilleur outil pour déboguer des pages HTML et des scripts Javascript.

FreeMind

Pour mettre à plat et organiser ses idées.

CCleaner

Permets de maintenir l'ordinateur en bon état de marche en libérant de l'espace disque et en supprimant les entrées inutiles de la base de registre.

Launchy

Pour s'y retrouver dans un menu Démarrer surchargé.

UltraBackup

Permets la sauvegarde de vos données importantes sur une clé USB.

Zend Framework 1.6

La version 1.6 du Zend Framework est disponible. L'annonce officielle est ici.

On peut dire qu'ils ont mal choisi leur jour...

Google Chrome pour les développeurs

Si il y a bien quelque chose que je déteste avec IE, c'est qu'il n'y as pas de solution simple pour déboguer le javascript. Il y a bien une solution, mais elle nécessite de télécharger une application de plusieurs mégas.

Google lui, a pensé aux développeurs. L'outil le plus intéressant qu'ils proposent est le gestionnaire de tâches (Maj + Echap). Il permet l'affichage détaillé de la mémoire consommée par le navigateur.

En plus, il affiche également la mémoire utilisée par les autres navigateurs (Firefox, IE). C'est presque trop beau pour être vrai !

Google Chrome

C'est un jour qui marquera à coup sur l'histoire du Web. Google Chrome est sorti des laboratoires de Google et c'est très impressionnant.

C'est rapide, innovant. Aucun problème avec les quelques sites que je viens de visiter. Il a importé sans aucun soucis mes paramètres de Firefox.

La fonction qui permet d'ajouter des raccourcis semble assez intéressante et l'affichage des sites les plus visités dans les nouveaux onglets et tout simplement génial.

Il est encore un peu tôt pour juger de l'impact que le dernier né des navigateurs aura sur le marché, mais en tout cas, je pense que je ne vais pas beaucoup utiliser Firefox ces jours prochains ;-)

Note : au fur et à mesure que j'écris ce message, je me rends compte que le correcteur orthographique ne semble pas encore au point (il souligne le mot dernier ?)

Flow 3

Flow 3 c'est le nouveau framework PHP qui est censé casser la baraque. Écrit par les auteurs de Typo 3, il a l'air très prometteur si on consulte ce tableau qui le compare aux autres ténors du marché. Le seul soucis, c'est la dernière ligne : Current Version = not yet released ;-)