Le site web, le blog et les projets de Stéphane Klein

Réflexions à propos de NodeJS et de Javascript plus globalement

2012-04-18T13:04:00Z

Cela fait quelques jours que je me pose la question suivante : « Est-ce que Node.js ne va pas devenir une technologie incontournable / majeur dans les 2 ans qui viennent ? »

Le contexte

Je suis un développeur Python depuis de nombreuses années. J'aime ses librairies, j'aime ses outils,
j'aime sa communauté.
J'aime tellement sa syntaxe que quand je vois la syntaxe d'autres langages, j'ai une réaction
quelque peu épidermique à la lecture du code.
Avec le temps, l'habitude de la syntaxe Python minimaliste proche d'un pseudo code rend difficile
la possibilité d'apprécier un autre langage. Je ne sais pas si c'est positif ou négatif,
je me pose simplement la question. Enfin ceci est un autre sujet.

Cependant, mon regard se tourne de plus en plus vers Node.js... je n'ai pas franchi le pas, je n'ai rien développé en Node.js… mais je me demande si je ne passe pas à coté de quelque chose d'important.

Les forces de Node.js

Bien que Node.js date seulement de 2009 :
- il a déjà un bon système de package : Node Package Manager que la grande majorité de la communauté semble utiliser
- il a déjà une très forte communauté, de très nombreuses librairies, exemple : plein de librairie classées, déjà plus de 9000 packages sur npm
- de plus en plus de sociétés semblent l'utiliser
tous les développeurs web (front-end) connaissent le langage, il est très populaire. Par conséquent, pour passer à Node.js il n'y a pas le frein d'apprendre un nouveau langage comme ça serait le cas avec l'utilisation d'un framework web basé sur Ruby ou Python. Je pense que dans les mois qui viennent, de nombreux développeurs PHP vont passer à Node.js… surtout ceux qui regardaient ailleurs mais qui ne souhaitent pas apprendre un nouveau langage.
la possibilité de partager du code (librairies communes…) entre la partie client et serveur peut être intéressant. La question se pose de plus en plus étant donnée qu'on est de plus en plus amené à effectuer beaucoup de traitement coté client (exemple avec Backbone.js).

Dernièrement, dans tous mes projets de développement web, j'ai utilisé un moteur de template coté client en plus du moteur de template coté serveur.

Je dois gérer de plus en plus souvent une couche modèle coté client. Des vues coté client… Cela fait donc plein d'éléments en doubles, utilisés une fois sur le serveur, une fois sur le client. Donc deux technologies à maîtriser.

Ces derniers jours, la visualisation du screencast du framework javascript Meteor m'a mis la puce à l'oreille.

Autre exemple, il est possible d'utiliser la même API Canvas coté client et coté serveur (avec node-canvas).
Node.js semble être très rapide, ça tient très bien la monté en charge.
La vitesse de l'interpréteur Javascript est en constante progression V8 (JavaScript engine)

Faiblesses de Node.js

Je ne sais pas si mes remarques sont exactes, je n'ai aucune expérience en Node.js.

Exemple dans la partie Bad Use Cases du guide Felix's Node.js Convincing the boss guide il est indiqué que les framework Node.js sont moins matures que ce que l'on peut trouver en Ruby, Python et Php (bon pour ce dernier j'ai des doutes, je pense que la communauté Node.js est déjà plus mature, plus structurée que la communauté Php… enfin bon…).
Je ne pense pas que Sequelize soit aussi mature que SQLAlchemy
Je n'ai pas trouvé d'outil comme Whoosh en Javascript (c'est un moteur de recherche léger). J'ai tout de même trouvé Node-xapian

Je ne sais pas si il est encore tôt pour passer à Node.js mais si la communauté continue à être aussi dynamique que ces 2 dernières années… alors les pièces manquantes seront bientôt créées.

Est-ce que l'on va retrouver Javascript partout ?

Voici une petite liste :

Javascript dans les navigateurs web
Javascript coté serveur (Node.js)
Javascript dans Qt Introduction QML + Qt Quick qui semble vraiment super puissant
Les possibilités d'utiliser Gtk + JS : gjs and Gtk+
Gnome Shell est en grande partie développé en Javascript. Ses extensions sont entièrement développé en JS
Sur mobile WebOS et Boot to Gecko

Quand je vois cette liste, je me pose sérieusement la question : est-ce que Javascript est le langage incontournable de ces 10 prochaines années ? Certes il est déjà incontournable dans le navigateur, mais pour le reste ?

Édition 5 mai 2012 :

j'ai publié ce billet sur LinuxFR, j'ai reçu 90 commentaires…
j'ai publié ce billet sur la mailing list de l'Afpy, j'ai reçu 25 commentaires… malheureusement les archives de cette liste n'est pas publique

merci beaucoup pour vos retours d'expériences !

Astuce pour filtrer ses propres visites dans Google Analytics

2012-03-15T20:40:00Z

Pour ne pas fausser le nombre de visites de mes sites - c'est à dire des sites sur lesquels je suis en train de travailler, développer, rédiger du contenu - je cherchais une astuce pour que Google Analytics ne prenne pas en compte mes propres visites.

J'ai trouvé par exemple une solution qui constite à mettre en place un filtre sur les adresses IP que j'utilise. Cependant, cette solution ne me convient pas tout à fait. Je peux consulter mon site depuis divers accès… je n'ai pas envie d'ajouter toutes les adresses IP.

J'ai trouvé une autre solution qui me convient mieux :

je modifie le user-agent de mon navigateur, j'y ajoute un identifiant
dans les pages de mes sites, j'active le code Javacript de Google Analytics uniquement si le "User-Agent" ne contient pas l'identifiant que j'ai ajouté

Pour modifier la valeur de mon "User-Agent", j'utilise l'extension Firefox User Agent Switcher.

J'ai ajouté "stephane-klein" comme identifiant, ce qui me donne le résultat suivant :

Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:10.0.2;stephane-klein) Gecko/20100101
Firefox/10.0.2

Ensuite, au niveau de l'activation de Google Analytics dans mes pages webs, j'ai quelque chose comme ça :

if (navigator.userAgent.indexOf("stephane-klein") == -1) {
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-29999662-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
    'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
    })();
}

Certes, mon identifiant "stephane-klein" sera visible pour toutes mes visites sur tous les sites (bien que je peux switcher rapidement la valeur de mon "User-Agent") mais bon, je trouve cela pas bien grave. Il est aussi possible d'utiliser un identifiant qui n'a pas de sens, un UUID par exemple.

Note à propos des « Content Repository » dans le cadre d'un CMS

2012-03-06T21:53:00Z

Dimanche dernier, j'ai étudié le thème « Content Repository », voici quelques notes concernant mes recherches.

Séparation des Web CMS en deux couches

J'ai trouvé un article qui fait la distinction entre deux types de CMS, enfin il parle de WCMS (Web CMS) :

« Content Production Systems (CPS) »
« Presentation Management Systems (PMS) »

Personnellement, cet article me fait penser à une réflexion qui m'est déjà venu de nombreuses fois : là où l'auteur de l'article voit deux systèmes, deux types d'applications distinctes, je vois en fait deux couches… Bon en fait, l'auteur semble le dire aussi à la fin de son article quand il parle de CPS + PMS.

Je reprends ci-dessous à peu près la description qu'il fait d'un CPS et d'un PMS :

CPS - c'est le système qui gère la couche données, la logique métier du CMS, comme :
- l'enregistrement des ressources (Pages, Images, Dossiers…)
- un moteur de recherche plain texte (avec filtre…)
- un workflow
- un système de versionning
- import / export de données
- …
PMS - c'est le système qui pour résumer "affiche" les pages :
- la navigation
- système de template
- layouts
- skins / thèmes
- back office d'édition
- …

« Content Repository »

À mes yeux… je ne fais pas bien la distinction entre un Content Repository et un CPS.

Si j'essaie de les différencier, je dirais qu'un Content Repository est une librairie ou un serveur alors qu'un CPS est une application, avec des Interfaces Utilisateur…

Dans la suite de l'article, je vais partir du principe que Content Repository est la même chose qu'un CPS même si ce n'est pas totalement exact.

Dans le monde Java, une spécification nommée JCR (Java Content Repository) décrit ce qu'est un Content Repository et comment l'utiliser (spécification d'une API standard).

Il existe plusieurs implémentations de JCR mais la plus connue semble être Jackrabbit de la fondation Apache. Je l'avais rencontré il y a quelque années lorsque j'ai étudié de loin Nuxeo.

J'ai été agréablement surpris de découvrir les projets PHP suivants (ce qui confirme que je ne suis pas le seul à me poser ces questions) :

J'ai appris l'existence d'un projet de Content Repository pour Node.js :

nocr

J'ai aussi trouvé Lily qui est un Content Repository basé sur Hadoop, HBase et SOLR dans un écosystème Java + API Rest.

Spécificités techniques d'un CPS

J'ai trouvé un autre article qui traite des spécificités techniques d'un CPS. Voici ci-dessous sa liste de "requirements" :

Richly structured content types

Unstructured binary objects

Relationships / references / associations

The ability to evolve content models over time (what I call “schema evolution”)

Branch / merge (in the Source Code Management (SCM) sense of the term)

Snapshot based versioning

ACID transactions

Scalability to large content sets

Geographic distribution

Chacun de ces points sont détaillés dans son article et c'est fortement intéressant. Par exemple, je trouve le point « Branch / Merge » très juste… bien que je ne sache pas tout à fait comment l'implémenter simplement.

À partir de cette liste, voici la liste des "requirements" de mon Content Repository idéal :

Base de données où je peux stocker des objects JSON ainsi que des blobs (exemples : base de données NoSQL comme MongoDB, CouchDB)
Base de données où je peux stocker des collections (pour des dossiers), des liens (pour des redirections), des associations (pour des catégories, des tags…)
API Rest qui permettent d'accéder plus ou moins à toutes les features du Content Repository
Moteur de recherche (basé par exemple sur : Xapian, elasticsearch)
Un système de workflow
Versionning (peut-être basé sur Git ou Mercurial)
Système d'import / export de données (je ne sais pas si il y a un format standard pour les CMS… enfin je n'ai jamais trouvé)
Support d'une API CMIS (bien que je la trouve peu élégante… c'est bien une API faite par le monde Java)
Accès WebDAV
Gestion des utilisateurs

Pour le moment, je n'ai pas trouvé le Content Repository de mes rêves.

Le standard CMIS « Content Management Interoperability Services »

Le standard CMIS est un autre élément intéressant à prendre en compte dans un CPS.

CMIS est une couche d'abstraction dont le but est de permettre de faire communiquer plusieurs instances de CMS identiques ou différentes ensemble. Elle doit permettre par exemple d'importer les données d'une instance à une autre.

Il existe de nombreux clients CMIS pour différent langage…

La suite…

J'ai prévu d'écrire d'autres billets à propos des Content Repository :

Un retour d'expérience et mes réflexions concernant un premier Content Repository que j'ai écrit en Python, basé sur la base de données NoSQL ZODB et le moteur de recherche Whoosh. Il comporte aussi un connecteur WebDAV.
Un autre billet sur une proposition d'API RESTful pour un Content Repository… quelque chose de naturel et vraiment dans l'esprit RESTful.

Exemple :
```
GET http://example.com/blog/my-post         => est dans l'esprit RESTful
GET http://example.com/post?name="my-post"  => est moins dans l'esprit RESTful
```
Dans l'API REST de CMIS j'ai trouvé beaucoup de requête suivant la seconde forme d'URL et très peu ou pas sous la première forme d'URL.

Mon bilan de Agile Open France 2012

2012-01-21T10:29:00Z

La forme, le principe

Contrairement aux manifestations, type conférences comme PyCon, RMLL, Fosdem, l'Agile Open France est du type Méthodologie open space (pas les bureaux ouverts !) ou Barcamp.

Je vous invite à lire l'article Wikipedia Méthodologie open space car il correspond très bien à ce que j'ai vécu.

Voici un extrait :

Selon Harrison Owen1, le succès d'un Open Space repose sur le respect d'une loi, étayée par quatre principes. Pendant le rituel d'ouverture, ces éléments sont cités et expliqués aux participants.

Les quatre principes :

Les personnes qui se présentent, sont les bonnes ;

Ce qui arrive,est la seule chose qui pouvait arriver ;

Ça commence quand ça commence ;

Quand c’est fini, c’est fini.

La loi des deux pieds : Si vous n’êtes en train ni d’apprendre, ni de contribuer, passez à autre chose !

Dans l'open space auquel j'ai participé, deux éléments supplémentaires ont été ajouté lors du rituel d'ouverture :

« Être un bourdon, ce n'est pas sale ! » : ce n'est pas grave si l'on passe d'un groupe à l'autre… on peut partir d'une discussion (suivre la loi des deux pieds), on peut s'insérer dans une discussion sans problème
« Être un papillon, ce n'est pas sale ! » : si on n'est perdu… ce n'est pas grave… attention toutefois à ne pas tuer les papillons :)

Si vous souhaitez encore approfondir le sujet, je vous invite à lire le Guide utilisateur des Forums Ouverts .

Le lieu

L'hôtel Arnold était entièrement réservé pour l'Agile Open France 2012… le cadre était vraiment très pratique.

L'hôtel était vraiment très bien, très beau, les chambres spacieuses, les repas étaient très bons, les employés de l'hôtel étaient vraiment très agréables…

Des petits salons très confortables, fauteuils, canapés, open bar, équipé de tableaux, de rétroprojecteurs…

Vraiment, le cadre était parfait.

Les principaux sujets auxquels j'ai participé

De mémoire, j'ai participé aux sujets suivants (les titres ne sont sans doute pas exacts, l'ordre est arbitraire) :

Les Farfadet du génie logiciel
Le service Heroku : discussions et retours d'expériences
Le langage Erlang : discussions, retours d'expériences, initiation
Le langage Ruby discussions, comparaisons Python/Ruby, retour d'expériences
J'ai assisté rapidement à une petite session Node.js
J'ai été acteur dans une session à propos de Bernard Stiegler et de Michel Serres
J'ai participé à la session « Pourquoi mon éditeur texte il déchire »
J'ai participé à la session « Pourquoi j'aime mon langage »
J'ai été acteur dans une session « Open Money, devises numériques » : Bitcoin, Théorie Relative de la Monnaie 2.0
J'ai vécu une belle expérience lors d'une session/expérience sur le « Dialogue »… : très enrichissant… et j'ai constaté que j'étais vraiment entouré de personnes très intelligentes (ou à l'écoute… en éveil… je n'arrive pas à trouver le bon mot) ou alors c'est le contexte qui fait progresser tout le monde… je ne sais pas…
Discussions à propos du déploiment d'applications web Python, j'ai découvert entre autre l'outil Fabtools (développé par Ronan Amicel) basé sur Fabric
Discussions à propos des technologies NoSQL, retours d'expériences de MongoDB, CouchDB …
Discussions à propos des Fablab, imprimantes 3D et ce que cela peut changer dans la société
Discussions à propos de « Pourquoi les sites des technos Ruby sont beaux, plus beaux que les outils Python » (je ne parle pas des réalisations faites avec ces outils, mais les sites web de ces outils, le coté marketing de Ruby qui est très bien réussi)
Discussions à propos de la réalisation d'applications mobiles : native vs html vs autre outils
J'ai assisté à une discussion au sujet de « Mon designer : un équipier agile »
Discussions à propos de Pylons, Pyramid, framework avec et sans opinions, j'y ai découvert le projet Ptah surcouche de Pyramid avec des opinions.
Discussions à propos de The Twelve-Factor App
Discussions à propos de « Comment vendre de l'agile ? »
Discussions à propos de « Est-ce que passé une taille critique, une startup doit se structurer, comme par exemple mettre en place des entretiens individuels annuels d'évaluation ? »
Discussions à propos de « Est-ce qu'il faut encore développer ses applications vs utiliser des outils clés en main ? »
Discussions à propos de « Comment répondre à des offres, est-ce qu'il faut répondre à des offres, comment répondre à un cahier des charges… ». J'ai adoré cette discussion, avec des retours d'expériences, exploration de pistes…
Discussions à propos de « Comment travailler en équipe quand les membres ont des compétences différentes, utilisent des technologies différentes ? »

À savoir, que parallèlement à ces sujets, il y en avait toujours trois, quatre ou même cinq autres.

Mon bilan

De toutes les manifestations que j'ai fait, c'est la meilleur, c'est là où j'ai appris le plus de choses en si peu de temps… et encore je n'ai pas pu assisté à toutes les discussions, toutes les sessions…

Je ne pense pas avoir passé dans ma vie, 48h aussi riches !

Vraiment le format Open Space est vraiment très bien pour échanger des expériences… philosopher…

De plus ce format permet de rendre tout de monde accessible… pas de pudeur… il est possible de parler avec vraiment tout le monde.

Screencast de présentation de Tacot

2011-10-01T23:04:00Z

J'ai créé un screencast de présentation de Tacot.

J'ai plus ou moins suivi le contenu de la documentation… Dans la vidéo j'ai fait quelques erreurs d'expression alors soyez indulgents… ce n'est pas facile de faire un screencast valide du premier coup.

Je vous conseille de visualiser la vidéo en mode 720p afin de bien pouvoir lire le contenu de la console. Après la réalisation du screencast je me suis rendu compte que j'aurais dû agrandir la taille des polices.

Lien vers la documentation de Tacot.

Idée d'une librairie basée sur Selenium pour tester des formulaires web

2011-09-15T15:24:00Z

Introduction

Je viens de commencer à utiliser Selenium pour tester des formulaires, divers pages de listes de données… dans une application métier.

Mes objectifs :

tester l'ajout de nouvelles entités (1)
- les données sont injectées dans un formulaire d'une page html
- une page de résultat est utilisées pour vérifier que les données ont bien été enregistré (ça peut être une page d'édition)
tester la modification d'une entités (2)
- les données sont injectées dans un formulaire d'une page html
- une page de résultat est utilisées pour vérifier que les données ont bien été enregistré (ça peut être une page d'édition)
tester la validité d'une page de liste (3)
tester la validité des résultats d'un moteur de recherche (4)

Pour le moment je me suis concentré uniquement sur les points 1 et 2.

Première méthode (à l'arrache)

J'ai commencé par réaliser des fonctions du type :

login()
add_customer(data)
edit_customer(data)
check_customer(data)
add_customer(data)
edit_customer(data)
check_customer(data)
…

Les fonctions de type "add" et "edit" prennent en paramètre des données à injecter dans des pages. Les fonctions de type "add" correspondent aux pages d'ajout d'entités, les fonctions de type "edit" correspondent aux pages de modification d'entités.

Ensuite j'ai des fonctions "check", là aussi je passe en paramètre des données qui seront utilisées comme valeur de vérification face à des pages de résultats ou pages d'éditions (une page d'édition contient déjà des données, le but ici est de vérifier leurs validitées).

Ma variable "data" est du type :

data = [
    ("reference", u"C1345"),
    ("firstname", u"Stéphane),
    ("lastname", u"Klein"),
    ...
]

Dans mes fonctions ("add", "check"…) j'ai une boucle qui parcourt la structure de données et utilise les fonctions suivantes soit pour injecter des données, soit pour tester la validité des données.

def inject_value(driver, name, value):
    element = driver.find_element_by_id(name)
    if element.tag_name == 'input':
        if element.get_attribute("type") == "checkbox":
            if element.is_enabled() != value:
                element.click()
        else:
            element.clear()
            element.send_keys(value)

    elif element.tag_name == 'select':
        option_element = element.find_element_by_xpath(".//option[@value='%s']" % value)
        option_element.click()

    elif element.tag_name == 'textarea':
        element.clear()
        element.send_keys(value)

def check_value(driver, name, value):
    element = driver.find_element_by_id(name)
    if element.tag_name == 'input':
        if element.get_attribute("type") == "checkbox":
            return element.is_enabled() == value
        else:
            return element.get_attribute("value") == value

    elif element.tag_name == 'select':
        return element.get_attribute("value") == value

    elif element.tag_name == 'textarea':
        return element.text == value

Pour le moment, cela fonctionne correctement mais je trouve mon code fastidieux pour plusieurs raisons :

j'aimerais pouvoir définir des valeurs par défaut pour les formulaires
j'aimerais pouvoir choisir d'autres types de "selecteur", pour le moment je fais des recherches uniquement par ID
j'aimerais pouvoir facilement indiquer le type de champ, car pour le moment je fais de l'auto détection… mais cela ne sera pas toujours faisable

Ce que j'aimerais avoir

À noter que ce code n'est pas complet… c'est un brouillon.

from sealchemy import Form, TextField, SelectField, BooleanField

...

class AddCustomer(Form):
    __submit__ = Submit(name="_same")

    reference = TextField(default=u"C1345")
    type_user = SelectField(default=u"external")
    firstname = TextField(required=True)
    lastname = TextField(required=True)
    activated = BooleanField(default=True)
    comment = TextAreaField(default=u"")

    def go_to_page(self):
        self.driver.get("/customers/add/")

class EditCustomer(Form):
    __submit__ = Submit(name="_same")

    reference = TextField(default=u"C1345")
    type_user = SelectField(default=u"external")
    firstname = TextField(required=True)
    lastname = TextField(required=True)
    activated = BooleanField(default=True)
    comment = TextAreaField(default=u"")

    def go_to_page(self, id):
        self.driver.get("/customers/%s/" % id)

    def go_to_last_inserted(self):
        """Va sur la page du dernier client qui a été ajouté"""
        ...

Cela ressemble beaucoup à l'API de wtforms que j'utilise dans mon projet. Cela ressemble aussi à FormAlchemy que j'aime aussi.

__submit__ permet d'indiquer le champ à utiliser par la commande submit.

Note : je n'utilise pas une seule classe pour faire mes traitements "add" et "edit" car les formulaires d'ajouts et d'édition sont en pratique souvent différents.

L'interface de la classe de type Form :

class IForm(zope.interface.Interface):
    def inject():
        """Cette méthode injecte les données vers le formulaire HTML"""

    def submit():
        """Cette méthode lance le submit du formulaire"""

    def inject_and_submit():
        """Exécute inject et ensuite submit"""

    def check():
        """Cette méthode retourne True si les données correspondent aux
           données présentes dans le formulaire HTML"""

    def clear():
        """Réinitialise la valeur de tous les champs de l'instance avec
           les valeurs par défauts"""

    def populate(values):
        """Affecte des valeurs aux champs de l'objet."""

La classe Session de mon projet :

class MyProject(Session):
    def __init__(self, login, password):
        ...

    def login(self):
        ...

    add_customer = AddCustomer()
    edit_customer = EditCustomer()

Dans MyProject, j'ai ajouté les propriétés add_customer et edit_customer afin que ces objets aient accès à l'objet driver de Selenium.

Exemple d'utilisation :

session = MyProject(login="username", password="password", url="http://localhost:5000/")
session.login()

values = {
    "reference": u"C1871",
    "firstname": u"Stéphane",
    "lastname": u"Klein",
}
session.add_customer.populate(values)
session.add_customer.go_to_page()
session.add_customer.inject_and_submit()
session.edit_customer.go_to_last_inserted()
session.edit_customer.populate(values)
assert session.edit_customer.check()

Plus d'informations à propos des classes Field

Les classes de type Field comme TextField, BooleanField … ont un constructeur avec plusieurs paramètres :

name (optionnel) : définit la méthode de recherche du champ par l'attribut "name"
id (optionnel) : définit la méthode de recherche du champ par l'attirbut "id"
xpath (optionnel) : définit la méthode de recherche via xpath
required (optionnel) : définit si le champ est requis ou non
default (optionnel) : définit la valeur par défaut du champ

Par défaut, si j'ai ceci :

class ...(Form):
    firstname = TextField()

C'est équivalent à cela :

class ...(Form):
    firstname = TextField(name="firstname")

Conclusion, questions

Je vous ai donc présenté l'API que j'imagine créer sous le nom de "sealchemy".

J'ai plusieurs questions :

est-ce que vous pensez que cette librairie serait utile ?
est-ce que l'API, le mode de fonctionnement est judicieux ?
est-ce que cela vous intéresse ?
est-ce que vous avez déjà créé quelque chose du même genre ?
quelle est votre méthode pour faire ce genre de test ?

Merci d'avance pour vos commentaires.

Quelques notes en vrac

2011-04-24T14:46:00Z

Liste des applications / outils que j'utilise

Il y a quelques semaines, sur mon site, j'ai créé une nouvelle page qui s'intitule « Liste des applications / outils que j'utilise ».

Quelles sont les motivations qui m'ont poussé à réaliser cette page ?

je trouve intéressant de savoir quels sont les outils que X ou Y utilise au quotidien… on y découvre souvent des choses intéressantes (donc n'hésitez pas à réaliser ce type de page). Un site qui a le même esprit est « Ils utilisent ça ».
il arrive que l'on me demande quelle librairie j'ai choisi pour réaliser telle ou telle tâche
parfois, je ne sais plus quelle librairie javascript j'ai choisi pour réaliser une tâche, dans ce cas cette page me sert de "pense-bête"

Dans le même esprit, j'ai commencé la page « Liste des applications Android que j'utilise » mais pour le moment elle n'est pas très étendue.

virtualenvwrapper

Depuis 3 semaines, j'utilise de plus en plus régulièrement virtualenvwrapper.

Cet outil est vraiment très pratique. Un petit résumé rapide d'utilisation (mais je vous conseille fortement de lire la documentation pour en savoir plus sur les divers fonctionnalités de l'outil, comment l'installer…) :

Je crée le dossier qui contiendra mon projet :

$ mkdir ~/projets/mon_projet/

Je crée un nouvel environement qui porte le même nom que mon projet :

$ mkvirtualenv mon_projet
New python executable in mon_projet/bin/python
Installing setuptools............done.
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/predeactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/postdeactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/preactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/postactivate
virtualenvwrapper.user_scripts creating /home/harobed/.virtualenvs/mon_projet/bin/get_env_details

Quand j'active l'environement mon_projet je souhaite être déplacé directement dans le dossier ~/projets/mon_projet :

$ echo "cd ~/projets/mon_projet" >> /home/harobed/.virtualenvs/mon_projet/bin/postactivate

J'active l'environement mon_projet :

$ workon mon_projet
(mon_projet)$ pwd
/home/harobed/projets/mon_projet

À noter que les commandes fournies par virtualenvwrapper supportent pour la plupart l'auto complétion, par exemple workon affiche les environements disponibles sur votre système.

Consultez la documentation de virtualenvwrapper pour en savoir plus.

Mozilla Sync

Depuis que je suis passé à Firefox 4, j'utilise Firefox Sync pour centraliser mes bookmarks.

Avant cela, j'utilisais avec plaisir delicious mais l'extension delicious pour Firefox 4 n'est pas disponible.

En tout les cas, Firefox Sync fonctionne vraiment très bien, c'est très facile à configurer, c'est totalement transparent à l'usage… un très beau travail, réalisé entre autre par Tarek Ziade pour la partie serveur (codé en Python).

jquery.expandBox plugin

2011-04-23T11:40:00Z

Je viens de publier une nouvelle version (0.2.0) du plugin jquery.expandBox.

« Et ça sert à quoi ? » et bien à étendre des elements HTML dans une page.

Exemples :

$('#bloc2').expandBoxVertically();

+-----------+                              +-----------+
|   bloc 1  |                              |   bloc 1  |
+-----------+                              +-----------+
|   bloc 2  |                              |           |
+-----------+                              |           |
|           |                              |   bloc 2  |
|     du    |  => étendre le "bloc 2" =>   |           |
|    vide   |                              |           |
|           |                              |           |
+-----------+                              +-----------+
|   bloc 3  |                              |   bloc 3  |
+-----------+                              +-----------+

$('#bloc2, #bloc3').expandBoxHorizontally();

+--------+--------+--------+----------------+
|        |        |        |                |
| bloc 1 | bloc 2 | bloc 3 |     du vide    |
|        |        |        |                |
+--------+--------+--------+----------------+

                      |
                      v

             étendre les blocs 2 et 3

                      |
                      v

+--------+-----------------+----------------+
|        |                 |                |
| bloc 1 |      bloc 2     |     bloc 3     |
|        |                 |                |
+--------+-----------------+----------------+

Pour en savoir plus sur les fonctionnalités de jquery.expandBox plugin, comment l'utiliser, où le télécharger… je vous conseille de vous rendre sur la page du projet….

Il y a 8 mois, au moment où j'ai réalisé ce plugin, j'ai cherché si ce type de plugin existait déjà.

Je n'ai rien trouvé (j'ai peut être mal cherché).

La fonctionnalité « The flexible box model » de la norme CSS 3 permet d'étendre des blocs d'une manière plus élégante que le plugin jquery.expandBox mais cette fonctionnalité n'est pas encore disponible pour tous les navigateurs.

J'espère que la documentation est compréhensible et que ce plugin vous sera utile.

Si vous avez des remarques, suggestions… n'hésitez pas à m'envoyer un mail à stephane@harobed.org

Choix d'un Laptop, Lenovo ThinkPad T410 ou Dell Latitude

2011-02-15T10:25:00Z

Mon poste de travail, un ancien PC, fait beaucoup de bruit. Cette année j'ai décidé de changer de machine.

Critères de choix

Mes critères de sélection sont les suivants :

Un laptop : cela fait des années que ma machine personnelle est un laptop et je trouve cela extrêmement plus pratique qu'une tour. Possiblité de se déplacer, silencieux…
CPU : Intel Core i3 ou i5 ou i7
Taille écran : entre 13" et 15"
Définition écran : entre 1280x800px et 1680x1050px
Traitement de surface : si possible mat
Mémoire : minimum 4Go
Disque dur : minimum 250 Go, si possible 7200 tours minutes
Carte graphique : Intel (Intel HD Graphics…)
Ethernet, Wifi… : si possible que du Intel
Autres critères :
- quelque chose d'assez solide (mon MacBook perso me fait toujours peur niveau solidité)
- une sortie moniteur externe qui accepte un connecteur VGA
- un bon support sous GNU/Linux (Ubuntu en particulier)
- si il est possible d'ajouter un disque SSD, ça serait bien… mais bon ce n'est pas obligatoire
- je veux quelque chose de silencieux
- je veux quelque chose qui ne chauffe pas trop
- au minimum trois sorties USB

Ma recherche

Mes critères de taille, définition et de traitement de surface écran limitent fortement la liste de choix de portables.

De nos jours la grande majorité des laptop ont des résolutions verticales de 768px.

Dans un premier temps, j'étais désespéré, je ne trouvais aucun laptop < 17" qui avait une résolution verticale suppérieur à 768px. J'ai cherché sur RueDuCommerce, LDLC, Fnac … (les filtres de ces sites sont très limités).

Suite à une discussion sur LinuxFR, j'ai découvert Laptop Spirit.

Dans un premier temps, mon choix s'est porté sur le modèle suivant « Dell Latitude E5510 - Advanced » :

Marque : Dell
Taille : 15,6"
Définition : 1600x900px
Traitement surface : Mat
Processeur : Core i5-560 2,66 GHz
Carte graphique : Intel GMA HD
Mémoire : 4 Go
Disque dur : 250 Go 7200rpm
Poids : 2,6 Kg

En fait, c'était le seul et l'unique portable qui correspondait à mes critères de recherche.

Ensuite via Wikipedia, j'ai découvert qu'il existait d'autres modèles avec une bonne définition écran : la série Dell Latitude .

En fait, la plupart du temps les hautes définitions sont en options, c'est donc pour cela qu'ils ne sont pas visibles sur les sites de ventes "généralistes".

De fil en aiguille, je suis tombé sur le wiki consacré aux ThinkPad de Lenovo : ThinkWiki, liste de tous les modèles ThinkPad .

En consultant les divers modèles présents sur ce wiki, j'ai découvert que les Lenovo ThinkPad Series T ont des résolutions écrans intéressantes.

Mon choix numéro 1

Mon choix s'est porté sur le modèle Lenovo ThinkPad T410 avec les caractéristiques suivantes :

Intel Core i5-560M Processor (2.66GHz, 3MB L3)
14.1 WXGA+ TFT (1440x900px), w/ LED Backlight (WWAN antenna)
Intel Graphics Media Accelerator 5700MHD
4 GB PC3-8500 DDR3 SDRAM 1067MHz SODIMM Memory (2 DIMM)
UltraNav (TrackPoint and TouchPad) with Fingerprint Reader
320GB 7200rpm 2.5" SATA HDD
DVD Recordable 8x Max Dual Layer, Ultrabay Slim (Serial ATA)5
9 cell 2.8Ah Li-Ion Battery - Dual Mode60
Intel Centrino Advanced-N 6200 (2x2 AGN)10

Pourquoi un ThinkPad ?

Bien que j'ai l'impression que la tendance soit aux Apple MacBook Pro même chez les geeks sous GNU/Linux, les ThinkPad anciennement de marque IBM et maintenant Lenovo jouissent d'une très grande réputation chez les libristes.

Cette réputation est dû à la qualité matériel de ces portables, ils sont parmi les plus solides et fiables du marché. Illustration :

Je ne sais pas si ces vidéos sont des trucages marketing ou non, mais cela va dans le sens des sentiments des possesseurs de ThinkPad.

Comme je suis assez design "allemand de l'est", je trouve ces portables très beaux.

Les ThinkPad sont très populaire parmit les développeurs de logiciels libres, par conséquent les systèmes d'exploitation GNU/Linux sont généralement très biens supportés sur ces machines.

Paul Rouget a un ThinkPad T410, je lui ai demandé par mail si un OS GNU/Linux fonctionne bien sur cette machine, il m'a répondu qu'il n'avait aucun problème.

Où acheter un Lenevo ThinkPad T410 en France ?

Sur le site USA de Lenovo, il est possible de définir précisément la configuration de sa machine.

Avec la configuration suivante :

System components
Intel Core i5-560M Processor (2.66GHz, 3MB L3)
Genuine Windows 7 Home Premium 32
14.1 WXGA+ TFT, w/ LED Backlight (WWAN antenna)
Intel Graphics Media Accelerator 5700MHD - AMT
4 GB PC3-10600 DDR3 SDRAM 1333MHz SODIMM Memory (1 DIMM)
UltraNav (TrackPoint and TouchPad) with Fingerprint Reader
Camera, 2.0 MP
320 GB Hard Disk Drive, 7200rpm
DVD Recordable 8x Max Dual Layer, Ultrabay Slim (Serial ATA)
Smart Card
6 cell 2.6Ah Li-Ion Battery - Dual Mode
Country Pack North America with Line cord & 65W AC adapter
Bluetooth w/ antenna
Intel Centrino Ultimate-N 6300 (3x3 AGN)
Integrated Mobile Broadband - Upgradable

le numéro de produit est 2516CTO et le prix est à $1,169.00.

Seulement, ce système de configuration n'est pas disponible en Europe :(

En France, il faut passer par des revendeurs, comme par exemple :

Actuellement, le seul modèle en stock chez l'un de ces revendeurs qui correspond un peu au modèle que je souhaite est le suivant : Lenovo ThinkPad T410I CI5/480M-2.4G. Il a les caractéristique suivantes :

Contrôleur graphique : NVIDIA Quadro NVS 3100M / Intel HD Graphics
Mémoire vidéo : 512 Mo
Sortie audio : Carte son
RAM : 4 Go (installé) / 8 Go (maximum) - DDR3 SDRAM - 1066 MHz - PC3-8500 ( 1 x 4 Go )
Réseaux : Adaptateur réseau - Ethernet, Fast Ethernet, Gigabit Ethernet, IEEE 802.11b, IEEE 802.11g, IEEE 802.11n, Bluetooth 2.1
Alimentation : CA 120/230 V ( 50/60 Hz )
Disque dur : 320 Go - Serial ATA-300 - 5400 tours/min
Poids : 2.3 kg
Stockage optique : DVD±RW (+R double couche) - module enfichable amovible
Affichage 14.1" rétroéclairage par LED TFT 1440 x 900 ( WXGA+ )
Processeur : Intel Core i5 480M / 2.66 GHz ( à deux noyaux )
Télécommunications : Fax / modem / modem cellulaire
Transmission à large bande sans fil : Haut débit 3G Mobile
Périphérique(s) d'entrée : Clavier, TrackPoint, UltraNav
Batterie : 6 éléments Lithium Ion
Système d'exploitation : Microsoft Windows 7 Professionnel Édition 64 bits --
Dimensions (LxPxH) 33.6 cm x 23.9 cm x 3.2 cm
Normes environnementales : ENERGY STAR , EPEAT Gold
Garantie du fabricant : 3 ans de garantie --
Mémoire cache : 3 Mo - L3
Sécurité intégrée : Trusted Platform Module (TPM 1.2) Security Chip , lecteur d'empreintes digitales
Localisation : Français / France
Périphériques intégrés : Haut-parleurs stéréo, antenne LAN sans fil, ThinkLight, antenne Bluetooth, antenne cellulaire, Lecteur de carte SIM
Lecteur de carte : 5 en 1
Carte NIC sans fil : Intel Centrino Wireless-N 1000
Autonomie (jusqu'à) : 6.5 heure(s)
Caméra de portable : Intégré(e) - 2 mégapixels

Voici les points qui ne correspondent pas à mon besoin :

Disque dur : "5400 tours/min" alors que je veux 7200 tours/min
Contrôleur graphique : "NVIDIA Quadro NVS 3100M / Intel HD Graphics" alors que je veux uniquement une carte "Intel HD Graphics"
Transmission à large bande sans fil : "Haut débit 3G Mobile" j'ai pas besoin de cela

Le prix de ce modèle : 1,294.00 € HT, 1,547.62 € TTC

Le modèle qui correspondait plus à mes souhait était le suivant Lenovo ThinkPad T410 Réf 2537-25G i5-540M(2.53GHz) à 1,043.07€ HT, 1,247.51€ TTC mais il est en rupture de stock. J'ai essayé de le commander, mais le vendeur m'a informé que ce n'est pas possible ils n'en auront plus.

Je trouve tout même triste que Lenovo ne vendent pas directement leurs produits en Europe comme le fait Dell. Je pense que Lenovo perd beaucoup de ventes potentiels en Europe.

Autres choix

Si je ne prends pas le Lenovo ThinkPad T410, j'ai identifié quatre modèles intéressants chez Dell.

Dell Latitude E5510

Tout d'abord celui dont j'ai parlé en début d'article :« Dell Latitude E5510 - Advanced » :

Precesseur : One Intel Core™ i5-560M (2.66Ghz, 3M cache, Dual Core)
OS : Windows® 7 Professionnel authentique 32 Bit - Français
Microsoft® Office 2010 Microsoft® Office Starter 2010
Logiciel de protection Antivirus : Trend Micro Worry-Free Business Security Services, 15 mois
Écran : LCD 15.6” HD+ Écran large antireflet LED Affichage (1600 x 900)
Mémoire : Mémoire bicanale DDR3 de 4Go (2x2Go) 1333 MHz
Disque dur : 320 Go Serial ATA (7200RPM)
Batterie principale : 6 cellules
Caméra : Webcam et microphone inclus
Clavier : Clavier intégré avec double dispositif de pointage (AZERTY) - Français
Lecteur optique : Graveur DVD+/-RW 8x avec logiciel décodeur
Bluetooth : Carte réseau sans fil Dell sans fil 375 Bluetooth
Alimentation : Cordon d‘alimentation avec adaptateur secteur 90W, 3 broches - Europe

Prix : 899 € HT

Dell Latitude E5410

Le modèle « Dell Latitude E5410 Advanced »

Processeur : One Intel Core™ i5-560M (2.66Ghz, 3M cache, Dual Core)
OS : Windows® 7 Professionnel authentique 32 Bit - Français
Microsoft® Office 2010, Microsoft® Office Starter 2010
Logiciel de protection Antivirus : Trend Micro Worry-Free Business Security Services, 15 mois
Écran : LCD 14.1 inch Écran large WXGA+ (1 440 x 900px) antireflet LCD Panel avec WWAN antenna
Mémoire : Mémoire bicanale DDR3 de 4Go (2x2Go) 1333 MHz
Disque dur : 320 Go Serial ATA (7,200 Rpm)
Batterie principale : 6 cellules
Caméra : Webcam intégrée avec microphone
Clavier : Clavier intégré avec double dispositif de pointage (AZERTY) - Français
Lecteur optique : Graveur DVD+/-RW 8x avec logiciel décodeur
Bluetooth : Carte réseau sans fil Dell sans fil 375 Bluetooth
Alimentation : Adaptateur CA de 65W à 3 câbles avec cordon d'alimentation de 1 m (3 câbles) - Europe

Prix : 969,00 € HT

Dell Latitude E6510

Le modèle « Dell Latitude E6510 »

Processeur : One Intel Core i5-560M(2.66GHz,3MB,Dual Core)
OS : Windows® 7 Professionnel authentique (32Bit)
Logiciel de protection Antivirus : Trend Worry-Free Business Services MUI, 15 mois
Back converture : Silver LCD Back Cover
Écran : 15,6 pouces Plein Haute définition (1920X1080) AntiGlare WLED LCD
Processeur : Intel HD Graphics
Mémoire : 4096MB 1333MHz bicanale DDR3 SDRAM [1x4096]
Disque dur : 320 Go Serial ATA (7200RPM)
Lecteur optique : 8X DVD+/-RW Disque dur avec logiciel uniquement
Connectivité sans fil : Minicarte Intel Pro Wireless 6200 (802.11a/g/Draft-n 2x2) - EMEA
Bluetooth : Dell sans fil 375 Bluetooth
Batterie principale : lithium-ion à 6 cellules (60W/HR)
Caméra : intégrée HD webcam avec Microphone
Clavier : Interne Rétroéclairé Clavier
Alimentation : Adaptateur CA de 65W à 3 câbles avec cordon d'alimentation de 1 m
Biométrique identification : Repose-poignets standard

Prix : 1 299,00 € HT

Dell Latitude E6410

Le modèle « Dell Latitude E6410 »

Processeur : One Intel® Core™ i5-560M (2.66Ghz, 3M cache, Dual Core)
Système d'exploitation : Windows® 7 Professionnel authentique 32 Bit, Français - avec support
Microsoft® OFFICE 2010Microsoft® Office Starter 2010
Logiciel de protection Antivirus : Trend Micro Worry-Free Business Security Services, 15 mois
Back couverture : Blue LCD Back couverture
Écran LCD : Écran WXGA 14.1” Écran antireflet (1440X900)
Carte graphique : NVIDIA® NVS 3100M 512MB gDDR3 With Express Card
Mémoire : Mémoire bicanale DDR3 de 4Go (2x2Go) 1333 MHz
Disque dur : 500 Go Serial ATA (7200RPM)
Batterie principale : 6-cellules (60Wh) Lithium Ion high capacity Batterie avec ExpressCharge™
Caméra : intégrée HD webcam avec Microphone
Clavier : Français Azerty Retroéclairé
Lecteur optique : 8X DVD+/-RW Disque dur avec software
Bluetooth : Dell sans fil 375 Bluetooth
Alimentation : Europe - Adaptateur CA de 90W à 3 câbles avec cordon d'alimentation de 1 m (3 câbles)
Biométrique identification : Pavé tactile Standard

Prix : 1324,00 € HT

Demande de devis à Dell

Sur le site internet de Dell, il est indiqué qu'il est possible d'avoir le système d'exploitation Ubuntu. Cependant, le système de configuration du site web de Dell, ne permet pas de sélectionner l'OS Ubuntu.

J'ai donc effectué ma demande par téléphone, la réponse est positive, ils m'ont fait un devis avec Ubuntu comme OS.

Base Options : Intel HD Graphics
Processor : One Intel Core i5-560M (2.66Ghz,3M,Dual Core)
Display : 15.6in Full High Definition (1920X1080) WLED LCD Panel
Repose-mains : Lecteur de carte à puce sans lecteur d'empreintes digitales
Webcam : Intégrée 2,0 mégapixels Webcam avec microphone
Capot LCD : Argent avec LAN sans fil et WAN sans fil
Mémoire : 4Go (2x2Go) 1333MHz DDR3 Bicanale
Disque dur : 320Go Serial ATA (7200tr/min)
Lecteur optique : 8X DVD+/-RW Lecteur
Power Cord : Euro 90W AC Adaptor 3 pin
Batterie : Principale 9 cellules 90Wh LI-ION
Labels : Intel Core Label I5 for VPro
Sans fil : EMEA Intel Pro Wireless 6200 (802.11 a/g/ Draft-n 2X2) Mini-carte
Clavier : Français Azerty rétroéclairé

Logiciel

Instant ON : Latitude ON Lecteur désactivé
OS Linux : Ubuntu Edition version 9.10
FOR ISRAEL AND FR Intel vPro Technology's advanced management features

Service

Base Warranty
3Yr Basic Warranty - Next Business Day - Minimum Warranty

Prix : 1176 €

Bilan

Modèle	Prix HT	Les +	Les -
Lenovo ThinkPad T410I CI5/480M-2.4G	1294 € HT	Matériel, clavier	Disque dur 5400 tours/min
Dell Latitude E5510	899 € HT	Le prix
Dell Latitude E5410	969 € HT
Dell Latitude E6510	1299 € HT	Définition 1920 X 1080px
Dell Latitude E6510 avec OS Ubuntu	1176 € HT	Définition 1920 X 1080px, Ubuntu
Dell Latitude E6410	1324 € HT	500 Go (7200RPM)

Conclusion

Face à tant de difficulté pour trouver le modèle de ThinkPad que je veux, je pense prendre le modèle « Dell Latitude E6510 avec OS Ubuntu ». D'autant plus que chez Lenovo, ça me fait chier de devoir payer la "taxe" Microsoft pour un système d'exploitation que je n'utilise pas.

Mes questions

Où achetez vous vos Laptop Lenovo en France ?
Est-ce que la définition 1920 X 1080px est trop importante pour un 15" ?

Extrait de Indignez Vous de Stéphane Hessel

2011-02-13T10:00:00Z

Voici une extrait de la fin du livre « Indignez Vous ! » de Stéphane Hessel :

... Aussi, appelons-nous toujours à « une véritable insurrection pacifique contre les moyens de comunicaton de masse qui ne proposent comme horizon pour notre jeunesse que la consommation de masse, le mépris des plus faibles et de la culture, l'amnésie généralisée et la compétition à outrance de tous contre tous. »

Je trouve que cette phrase est très explicite, elle exprime une idée que j'ai toujours eu difficulté à formuler d'une manière concise. Ça va dans le sens des propos de Bernard Stigler …