moBlur.org

Favion Archive Update #1

Nicolas Crovatti — Mon, 28 Apr 2008 20:07:00 +0200

I recently added one dedicated server to the Favicon archive project. It will handle two main duties : serving a fast Postgresql 8.3 DBMS with 1GB physical memory on board and eventually plugs into the main Favicon server as a file server using NFS.

The new dedicated DB server is incomparably faster than the shared one (256MB vs 1GB) and allowed the spawn of many more crawler processes. I'm running with 34 currently instead of 6 previously.

Side effects : hard drive storage will run slow much sooner :D That why I'm wondering about sharing the new server hard drive which will hopefully adds about 200GB to the file archive.

Here is a summary of the Favicon Archive after one month exploitation:

Favicon files : 4,3GB
Cache files : 41,0GB
Database size : 3,0GB

Crawler stats 5 minutes (1 month history):

Average Homepage fetched : 237
Average Favicon saved : 122
Total sites discovered : 4 M
Total saved icons : 728 K

This is about 1 favicon found every 2 web sites fetched and 1 favicon found every 5,5 sites discovered.

At this rate, the system will cope about 8,7M favicons in the next year (generating 51GB icons data and about 486GB cache files), this will results in about 48M web sites in the database and I will eventually reach my first billion websites discovered in about 21 years (for about 1TB icons 11TB cache files ) :D

Still at this rate, I'll will run out of space and shut down all the crawlers in about : 3 months and 3 weeks

Add your site before closure !

More seriously, I'll try to implement some interesting features like :

Homepage ownership using special meta tag that will allow you to edit your keywords, tags and description.
Icon search by colors.
Community and voting system

Magento vs OsCommerce, migration et site eCommerce

Nicolas Crovatti — Tue, 22 Apr 2008 10:33:00 +0200

Mon collègue Julio va très bientôt se voir affecter l'interressante tâche de piloter la migration d'un site Ecommerce tournant sous OsCommerce vers une nouvelle plateforme Open Source : Magento. Il a déjà bien étudier son sujet et prévoit de nous tenir au courant de l'évolution de cette migration par le biais de son blog.

A suivre donc !

Introducing : moBlur's Favicon Archive Project

Nicolas Crovatti — Tue, 15 Apr 2008 11:54:00 +0200

All hail to the world's first Favicon Archive!

In the next days you may notice yet another crawler visiting your site; identified by
"FaviconArchiver/1.0 (+http://moblur.org/workshop/favicon_archive/)" user agent, it will gather your homepage (and only this page unless redirected) and save your favicon to moblur's dedicated database. Once crawled, if your site does have a favicon, it will appear on our index page and on the search engine. A dedicated page will also be directly accessible and will display a summary of your site based on meta tags and a link to your domain.

This project is born from curiosity in large database driven web applications. How to scale, how to optimize, how to deal with a huge database and gigantic filesystem entries were the main questions i was asking myself.

The project itself is far from being optimal.

The crawler, written in PHP 5 can be better, faster... in fact, it could have be written in C++ ...

The database system recently upgraded from PostgreSQL 8.1 to 8.3 still needs some fine tuning ( Thanks Phil for your precious help and advices on this :D ).

So far, (a couple weeks) so good, the crawler discovered 2.5M unique domains (subdomains counts too) and saved 1/2 M Favicons on the filesystem (ext3 on debian stable)

Current room for the application :

CPU 1.20GHz
RAM 256 Mb
HDD 144G

All dedicated (well almost dedicated) to the favicon archive.

My goal now is to optimize the application to keep it inside this nutshell for the longest time possible.

Google Charts frontend GUI with Javascript

Nicolas Crovatti — Mon, 24 Mar 2008 20:09:00 +0100

I recently worked on a basic frontend GUI (Graphical User Interface) to the Google's Charts API (http://code.google.com/apis/chart/). It's alpha version so please, if you have any comments, get in touch with me !

Google Charts GUI

moBlur's First month! (Firefox usage evolved)

Nicolas Crovatti — Sun, 16 Mar 2008 20:45:00 +0100

To celebrate moBlur's first month, I generated a pie chart of browsers usage on moBlur.org according to my analytics reports.

1. Firefox                   701  77,29 %
2. Internet Explorer         104  11,47 %
3. Safari                     45   4,96 %
4. Opera                      26   2,87 %
5. Mozilla                    21   2,32 %
6. Mozilla Compatible Agent    6   0,66 %
7. Camino                      3   0,33 %
8. Konqueror                   1   0,11 %

This is almost 80% Firefox usage. Impressive, the blogs and developer's communities seems to know where the truth is.
It also saves me because I don't have any Windows license to debug my pages in Internet Explorer ...

Anyway, if you are still using IE, do yourself a favor : get Firefox.

Amazon Web Services with PHP5 and jQuery

Nicolas Crovatti — Sun, 16 Mar 2008 18:09:00 +0100

Back in 1999 I used to wrote some scripts using ASP and Javascript in order to automagicaly display books related to the topics of my articles. Nowadays this task is quite simple using Amazon's API. There is no more cache problems with outdated prices or products availability. I created an account on AWS and Amazon affiliates and started to code a set of scripts using Amazon's API for education purpose.

I came up with a nice search engine that is unfortunately not working with Internet Explorer. The script is far from perfect but, since I find it interesting I put it on my Workshop for all you to see and comment.

~~If you have any lead that can help me to make it functional in Internet Explorer your feedback will be gladly welcomed!~~

I finaly managed to get it functional in IE!

Amazon Associates & AWS - PHP5 and jQuery

jQuery + jFlot - Plots, Canvas and Charts

Nicolas Crovatti — Wed, 12 Mar 2008 19:14:00 +0100

Sometimes an example tells much more than an article. Please go head to the Workshop to discover the jFlot Introduction on generating charts and plots using Canvases and jQuery's plugin jflot.

Moteur de template Javascript, comparaison et benchmark

Nicolas Crovatti — Mon, 03 Mar 2008 01:40:00 +0100

Comme déjà exprimé plus tôt j'ai longtemps souhaité déplacer mon code XHTML et CSS en dehors de mes librairies Javascript. J'ai donc récement entendu parler des moteurs de templates Javascript. Seule ou plugin de framework existant, ces outils sont la prochiane étape pour les developpeurs web.

Je ne parlerai que de trois d'entre eux :

jTemplates basé sur le framework jQuery. (http://jtemplates.tpython.com)
Javascript Template de Trimpath (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates)
et EJS, Embedded JavaScript. Une libraire dédiée (http://embeddedjs.com)

J'ai choisis ceux là pour la simple raison qu'il correspondent tous a mes besoins en termes de traitement de données hiérarchisées JSON sous forme princiapelement de tableau. J'ai écrit ce benchmark pour ma propre information. comme je l'ai trouvé interressant j'ai décidé de le publier

Les résultats mis en évidence par ce script de mesure des performances ne sont pas conçut pour aider quiconque à choisir le "meilleur" moteur de templates, soyez conscient que la vitesse d'execution n'est pas la seul et encore moins le plus important des critères a prendre en compte dans le choix optimal d'un systeme de template pour votre application.
Cependant, si la vitesse et les performances globales sont importante pour votre projet, ce test pourra peut-être vous être utile.

Notez biens que ce script tourne entièrement côté client, les résultats seront donc uniquement valide sur votre machine et a fortiori seront affectés par les programmes s'executant au moment du test. Ah oui, j'allais oublier, ces tests de performances ne fonctionnent pas sous internet explorer.

Le benchmark :
Ce script va executer les différente méthodes de transformation des librairies citées en introduction le même nombre de fois. Il va mesurer le temps d'execution pour chacune d'entre elle et les stockera afin d'afficher un graphique généré par un plugin jQuery nommé flot (http://code.google.com/p/flot/) de l'intégralité de l'execution ainsi qu'un résumé. Pour eviter tout gel de votre navigateur, les données JSON seront découpées et traitées par lot. Vous pourrez configurer combien de données devront être traitées ainsi que la taille des lots.

Pour finir, si vous constatez un quelconque illogisme dans les résultats, merci de me contacter !

Javascript template engines benchmarking

Javascript Template Engines comparison and benchmark

Nicolas Crovatti — Mon, 03 Mar 2008 00:26:00 +0100

For a long time i wished to have the ability to move my XHTML or CSS code/formatting out of my javascript libraries. I lately heard about javascript templates engines. Either standalone or plugged into existing frameworks these tools are the next step for web developpers.

I will only speak about tree of them :

jTemplates based on jQuery framework. (http://jtemplates.tpython.com)
Trimpath's Javascript Templates (http://code.google.com/p/trimpath/wiki/JavaScriptTemplates)
and EJS, Embedded JavaScript. A standalone library (http://embeddedjs.com)

Basicaly I choosed them because they have the functionality to process hierachical JSON data input, mainly arrays and evolved syntax. I originally wrote this benchmark script for my own knowledge, since i found it interresting i decided to release it to the public.

The results shown by the benchmark tool are not intended to guide anyone in choosing the "best" template engine, be aware that speed is not the only and further less the most important criteria in the process of choosing the right template engine for your application. However, it can help if the speed and overall performance is an important issue at some point.

Note that since the benchmark itself runs on client side, results shown will only be true on your computer and are heavily dependents of its load at the time your are running the test. Oh, a trivial thing, this benchmark is not running at all with internet explorer.

The benchmark:
This script, will run the different template transformation methods from the librairies the same amount of time for each. It will time every call to these method and stock them into an array. This array will then be processed to display plots using a jQuery plugin named flot (http://code.google.com/p/flot/) and summary informations about each of the tree mentioned librairies. To let the control to the browser, the data (JSON) will be splitted into small chunks. You can configure how much data is processed and the chunk's size.

As a last note, I would be glad if you contact me if you notice any discrepancy in the benchmark results.

Javascript template engines benchmarking

jQuery et jTemplates

Nicolas Crovatti — Wed, 27 Feb 2008 00:41:00 +0100

jTemplate (http://jtemplates.tpython.com) est un plugin pour jQuery (http://jquery.com/). Il ajoute la merveilleuse fonctionnalité qu'est le templating à la librairie jQuery. J'avais longtemps souhaiter cela ! C'est chose faite à présent et c'est à la fois extrêmement pratique et puissant.

Les développeurs, par soucis de relecture et maintenance, cherchent à dissocier au maximum le contenu de la partie code. Appliqué à PHP, Smarty (http://www.smarty.net/) fût une véritable révolution lors de sa sortie en 2003. Aujourd'hui des dixaines de milliers de développeurs l'utilisent quotidiennement dans des projets de grande envergure.

Si vous êtes comme moi un familier de la syntaxe Smarty, vous ne serez pas dépaysé par jTemplates.

La mise en oeuvre est ultra simple :

   <script type="text/javascript" src="http://moblur.org/post/2008/02/24/jquery.js"></script>
   <script type="text/javascript" src="http://moblur.org/post/2008/02/24/jquery-jtemplate.js"></script>

La première chose à faire est d'ajouter un conteneur qui recevra le résultats de la "transformation":

   <p id="my_list"></p>

Une fois ceci fait il faut créer un element contenant un template :

      <textarea name="template" id="template">
      <![CDATA[
      {#template MAIN}
        <p>Pour rouler une {$T.title} vous aurez besoin des fournitures suivantes :</p>
        <ul>
         {#foreach $T.elements as record}
            <li>{$T.record.element} ({$T.record.quantite})</li>
         {#/for}
        </ul>
      {#/template MAIN}
      ]]></textarea>

Et définir nos données JSON de la même manière :

      <textarea name="item" id="item">
      {
         "title" : "Cigarette",
         "elements": [
         {"element": "tabac", "quantite":"un peu"},
         {"element": "feuille", "quantite":1},
         {"element": "filtre", "quantite":1},
         ]
      }</textarea>

Nous venons de mettre en place un combo formidable que nous allons activer avec les deux lignes de code suivantes (à affecter sur l'evenement onClick d'un element par exemple) :

      $('#my_list').setTemplateElement('template');
      var data = eval( '(' + $('#item').attr('value') + ')');
      $('#my_list').processTemplate(data);

Le seul truc à noter si on ne travaille par directement avec des objets, c'est qu'il faut impérativement évaluer le JSON avant d'appliquer la transformation. Pour une raison mal définie, il faut wrapper la chaîne de caractères JSON dans des parenthèses afin que l'eval() fonctionne...

Vous pouvez aussi consulter cet exemple ainsi qu'un outil de benchmark sur le Workshop.

Pour ma part j'utilise les fonctions $.setTemplate() et $.setTemplateURL(). En effet, je ne trouve pas qu'il soit optimal d'avoir les templates dans des textarea cachés dans la page pour plusieurs raisons :

Cela oblige l'utilisateur à télécharger tous les templates au chargement de la page.
L'utilisateur peut éventuellement modifier le contenu des templates à l'aide de Firebug et cela peut poser problème si vous utilisez jTemplates pour générer des formulaires.

J'ai donc opté pour une solution plus adaptée à l'Ajax et au Web 2.0.

Quand un template doit être utilisé souvent sur une page, je le télécharge en utilisant la fonction $.get() de jQuery au chargement de la page et je le stocke dans une variable, il sera disponible tant que l'utilisateur n'aura pas besoin de changer de page.

Si le template est sensé être utilisé dans des cas plus rare je le télécharge uniquement "on demand". Biensur, rien n'empêche de dire à la fonction de téléchargement de mettre en cache le template au bout d'un certains nombre de téléchargements :D

Fonction de mise en cache d'un template au chargement de la page (jQuery) :

      var tpl_root = "/templates/jtpl/";
      var table_template = '';
       
      $(document).ready(function(){
         $.get(tpl_root + "table.html", function(data) {
            table_template = data;
         });
      });

Une brêve pour validation Technorati

Nicolas Crovatti — Mon, 25 Feb 2008 11:31:00 +0100

Même si vous n'e navez rien à faire , vous pourrez trouver mon profil technorati à l'adresse en cliquant sur le liens suivant :

Technorati Profile

Ajax, Json et compression Gzip

Nicolas Crovatti — Sat, 23 Feb 2008 19:13:00 +0100

Dernièrement je me suis mis a utiliser intensivement le JSON (JavaScript Object Notation).

Le JSON est un mode léger d'échange de données que je trouve particulièrement adapté aux "XHR" (XmlHTTPRequest). Du coup les échanges avec les différents services ne se font plus en XML mais en JSON. Ce qui me fait poser la question : Dois-je maintenant parler de "JHR" (JsonHTTPRequest) ? Je ne sais pas, une chose est sûre ce format est beaucoup plus light que le XML.

De fait, les données sont aussi décrites comme en XML et on y gagne énormément en taille. Voici une comparaison :

En XML :

      <?xml version="1.0" encoding="UTF-8"?>
      <links>
         <link>
            <title>moBlur.org</title>
            <url>http://moblur.org/</url>
         </link>
         <link>
            <title>moBlur.org - RSS</title>
            <url>http://moblur.org/index.php?feed/rss2</url>
         </link>
      </links>

Le même message en JSON :

      {"links": {
         "link": [
            {"title":"moBlur.org","url":"http://moblur.org/"},
            {"title":"moBlur.org - RSS","url":"http://moblur.org/index.php?feed/rss2"}
            ]
         }
      }

Comparaison rapide de poids :

XML : 256 bytes
JSON : 168 bytes

Soit un gain sec d'environ 34% pour cet exemple précis. Après cette constatation, j'ai entamé tout de suite l'implémentation de ce format d'échange pour l'ensemble de mes nouveaux projets web. Il est aisé en PHP de transformer un tableau de données en JSON (encore plus avec l'addition à PHP 5 du couple json_encode() et json_ecode()) avec une simple fonction récursive, voici un exemple trouvé sur le site bin-co.com que je vous copie ici (Compte tenu de la volatilité du média, plusieurs sources valent mieux qu'une) :

      <?php
      function array2json($arr) {
          $parts = array();
          $is_list = false;
       
          //Find out if the given array is a numerical array
          $keys = array_keys($arr);
          $max_length = count($arr)-1;
         
          //See if the first key is 0 and last key is length - 1
          if(($keys[0] == 0) and ($keys[$max_length] == $max_length)) {
              $is_list = true;
              //See if each key correspondes to its position
              for($i=0; $i<count($keys); $i++) {
                  //A key fails at position check.
                  if($i != $keys[$i]) {
                      //It is an associative array.
                      $is_list = false;
                      break;

                  }
              }
          }
       
          foreach($arr as $key=>$value) {
               //Custom handling for arrays
              if(is_array($value)) {
                  /* :RECURSION: */
                  if($is_list) $parts[] = array2json($value);
                  /* :RECURSION: */
                  else $parts[] = '"' . $key . '":' . array2json($value);
              } else {
                  $str = '';
                  if(!$is_list) $str = '"' . $key . '":';
                  //Custom handling for multiple data types
                 
                  if(is_numeric($value)) $str .= $value; //Numbers
                  elseif($value === false) $str .= 'false'; //The booleans
                  elseif($value === true) $str .= 'true';
                  //All other things
                  else $str .= '"' . addslashes($value) . '"';
                 
                  $parts[] = $str;
              }
          }
          $json = implode(',',$parts);
         
          //Return numerical JSON
          if($is_list) return '[' . $json . ']';
         
          //Return associative JSON
          return '{' . $json . '}';
      }
      ?>

L'utilisation en combo du json et de cette fonction PHP nous facilite grandement la vie côté développement. J'utilise cette fonction de transformation en JSON uniquement dans mes fichiers web services, ceux qui s'occuppent de l'abstraction des données. Comme parfois il vaut mieux un petit dessin qu'un long discourt voici un diagramme de la solution structurelle que j'utilise dans tous mes développements dit "Web 2.0" : Ce diagramme représente assez bien la quasi majorité des applications Web 2.0 je présume. Après avoir lu pas mal d'informations sur le compactage des fichiers JavaScript notement ici (Cyril Durand) et là (Damien Ravé) et encore là (loogaroo.net), j'ai voulu enfoncer le clou et j'ai donc ajouté une compression Gzip avant d'envoyer le résultat JSON au client. Toutefois, pour des communications de faible taille, nous ne voudrons pas utiliser la compression Gzip car du principe même de la compression, si il y a trop peu de caractères le fait de compresser les données pourra éventuellement augmenter la taille de la transaction ! Voici une toute petite fonction PHP que j'utilise en conjonction Array2json() présentée plus haut :

      <?php
      $arr_json = array(
         'link' => array(
            array( 'link' => array(
                  'title' => 'moBlur.org',
                  'url' => 'http://moblur.org/'
               ),
            array( 'link' => array(
                  'title' => 'moBlur.org - RSS',
                  'url' => 'http://moblur.org/index.php?feed/rss2'
               )
            )
         )
      );
      print array2json($arr_json);
      ?>

Cette fonction compresse tout simplement les chaines de caractères avant de les renvoyer au client. Sur la durée on pourra voir une nette diminution de la bande passante consommée et un accroissement de la vitesse de communication entre votre serveur et vos clients Web. Tout le monde sera ravis, j'en suis sûr :) Pour finir voici le diagramme final de notre architecture :