HTeuMeuLeu

« Arrêtez de dessiner des poissons morts »

Je regarde beaucoup de conférences, et il y a des tas de gens que j'admire vraiment. Et puis il y a Bret Victor. Comme le disait Irene Ros à TakeOffConf à Lille en janvier dernier, "aucune conférence ne devrait se passer sans citer Bret Victor". J'avais été bluffé par sa conférence "Inventing on principle" l'année dernière. Cette semaine, une nouvelle vidéo d'une de ses conférences au SIGGRAPH de San Francisco en mai 2012 a été mise en ligne : « Arrêtez de dessiner des poissons morts ».

This is not a fish

Ceci est ce que Magritte appelle "la trahison des images". Ceci n'est pas un poisson. C'est une image d'un poisson. C'est une représentation visuelle d'un poisson. Si j'avais dessiné ça sur papier, ce serait une plutôt bonne représentation d'un poisson. Si vous ouvriez un livre que vous tombiez sur ce dessin, vous vous diriez "oui, il y a une image d'un poisson dans mon livre". Ça capture toute la "poissonitude" que l'on peut capturer à travers un media papier. Mais ceci n'est pas du papier, c'est un nouveau média. Et dans ce média, c'est une très mauvaise représentation d'un poisson. Ça ne ressemble pas du tout à un poisson.

Les poissons sont tout le temps en train de bouger. Si vous regardez un poisson, il fera surement des aller-retour, il bougera son corps d'avant en arrière, remuant sa queue. Les poissons sont tout le temps en mouvement. Dans un média où nous nous attendons à voir du mouvement là où il y a du mouvement, ceci ne ressemble pas du tout à un poisson vivant. C'est une bonne image pour un poisson mort. Et si vous voulez dessiner un poisson mort, Photoshop est un super outil. Tout ce que vous allez dessiner dans Photoshop sera complètement mort, totalement statique, pas du tout en mouvement.

Mais je ne veux pas dessiner un poisson mort, je veux dessiner un poisson vivant.

Le parallèle avec le web n'est pas trop difficile à faire. Et c'est ainsi qu'il commence à animer son poisson sur son interface faite-maison avec deux iPad reliés en Bluetooth. Les différents concepts d'interface qu'il présente font vraiment toujours autant envie. Surtout, il argumente avec précision pourquoi, d'après lui, taper du code n'est pas adapté pour faire de l'animation.

La deuxième raison pour laquelle je pense que coder est inapproprié pour créer des arts graphiques vient de la relation entre un langage et la compréhension visuelle. Du code, c'est du langage. Nous codons dans des langages de programmation. Nous pensons de manière linguistique lorsque nous codons.

Dans une large mesure, la seule raison pour laquelle des artistes créent des arts graphiques est pour exprimer quelque chose qu'ils ne peuvent pas exprimer avec un langage. Les artistes dessinent parce qu'ils veulent transmettre quelque chose qu'ils ne peuvent pas décrire. Les mots "nuit étoilée" ne décrivent pas "La nuit étoilée".

Si je suis un fervent défenseur de la conception web la plus proche possible d'un navigateur, je suis tout à fait d'accord que du code n'est pas le bon outil pour de la création graphique. Nous sommes dans un état d'esprit différent lorsque nous codons et lorsque nous sommes devant une toile vide sous Photoshop.

Sa conclusion est précise et ambitieuse :

La principale chose que je veux que vous retiriez de cette conférence, c'est de l'insatisfaction.

Je veux que vous rentriez chez vous, que vous ouvriez Photoshop et que vous ressentiez que vous dessinez des poissons morts. Je veux que vous ressentiez à quel point tout ce que vous dessinez est plat, statique et sans vie. Quand vous créez des animations, je veux que vous ressentiez à quel point c'est froid et mort, comment vous ne pouvez pas jouer avec. Je veux que vous ressentiez tout ce qui nous manque, en utilisant ce média pour simuler d'autres médias. En définitive, je veux que vous ayez des standards plus élevés pour ce média.

Je ne peux qu'acquiescer.

L’expérience d’un premier achat

Il y a un an et demi, j'ai acheté ma première voiture. Je n'avais jamais eu besoin d'un véhicule auparavant. J'habitais sur Lille et les transports en commun me permettaient de me rendre à mon travail et d'être indépendant 95 % du temps. Et puis j'ai déménagé à 50 Km de mon lieu de travail. À moi les joies du TER, de ses retards quotidiens, de ses grèves trimestrielles et de l'angoisse constante d'arriver en retard le matin et de ne pas pouvoir rentrer chez moi le soir. Alors j'ai décidé d'acheter une voiture.

Le problème, c'est que j'y connais rien en automobile. J'écoutais attentivement les conseils de mon entourage, mais chacun y allait de sa propre expérience se contre-disant les unes des autres. "Avec les kilomètres que tu vas faire, il te faut un diesel !" "Prends plutôt une essence, c'est moins cher et de toute façon le carburant est quasiment au même prix." "Achète français, ça coûte moins cher à l'entretien." "Achète japonais, ils font les meilleurs moteurs et ça demande moins d'entretien."

Je n'avais pas la moindre idée de ce qui pouvait être important d'avoir dans une voiture, mais j'avais quelques contraintes. Je souhaitais un véhicule pour une utilisation occasionnelle, environ une fois par semaine. Je n'avais pas de budget précis en tête, mais je souhaitais pouvoir payer cash, sans faire de prêt. J'en avais aussi besoin assez rapidement, mais je n'avais pas beaucoup de temps à y consacrer. Et surtout, je devais pouvoir me rendre facilement seul chez le concessionnaire de la voiture de mes rêves. C'est bête, mais quand on n'a pas de voiture, c'est tout de suite très compliqué de se rendre chez des concessionnaires placés à l'extérieur des agglomérations.

Alors j'ai acheté ce petit bolide.

Twingo

Oui, une Twingo. Je peux désormais me vanter d'avoir une voiture de ministre.

Au début, tout allait bien. Ma Twingo et moi vivions un amour fou. Elle me convenait très bien pour une utilisation hebdomadaire. Et puis petit à petit, j'ai commencé à l'utiliser un peu plus, et à prendre le train moins souvent. Et puis la SNCF a enchaîné les retards, grèves et autres perturbations, et j'en ai eu marre. Et j'ai fini par prendre la route tous les jours, et ne plus jamais prendre le train.

Et là, forcément, la Twingo n'est pas forcément la voiture idéale pour avaler 100 Km d'autoroute par jour. Alors je recherche actuellement une nouvelle voiture. Une voiture plus confortable, dans laquelle je serais prêt à passer deux heures par jour. Et puis bien équipée, où je pourrais facilement relier mon téléphone pour y écouter ma musique, des podcasts, etc. Si j'ai toujours des tas de questions qui me trottent à l'esprit, l'expérience de mon premier achat me permet d'aborder ce deuxième achat beaucoup plus sereinement.

Si je vous parle de tout ça, c'est parce que cette expérience de premier achat a fait écho à celle que peuvent avoir des clients en recherche d'un tout premier site web. Si j'essaie de guider mes prospects en leur expliquant les avantages et inconvénients de telle ou telle solution, j'ai forcément un point de vue biaisé sur la question. Alors si vous êtes entrepreneur, que vous avez besoin d'un site pour votre société, que vous n'y connaissez rien au web, quels seront vos critères d'achat ? Le prix ? Le ressenti des premiers rendez-vous ? La taille de l'agence web ? Le langage serveur ou le CMS utilisé ? Comment faire le tri entre les conseils de vos amis et ceux des différentes agences que vous avez pu rencontrer ?

Je n'ai pas de réponse universelle, mais en me basant sur ma propre expérience d'achat d'un premier véhicule, je conseille aujourd'hui souvent de ne pas dépenser tout son budget. Si vous n'y connaissez rien au web, il y a de fortes chances pour que les besoins que vous imaginez aujourd'hui soient très différents des besoins que vous aurez dans un an, après avoir eu déjà un peu d'expérience dans la mise à jour de votre site.

La théorie du McDonald’s

Je viens de le poster sur Twitter, mais je le reposte ici parce que j'aime vraiment beaucoup cette Théorie du McDonald's de Jon Bell.

J'utilise un truc avec mes collègues quand on essaye de décider où manger le midi et quand personne n'a d'idée. Je suggère d'aller au McDonald's.

Quelque chose d'intéressant se produit alors. Tout le monde tombe d'accord sur le fait qu'on ne peut pas aller au McDonald's, et de meilleures suggestions de déjeuners émergent. Magie !

C'est comme si nous avions brisé la glace avec la pire idée possible, et maintenant que la discussion a commencé, les gens deviennent soudainement créatifs. J'appelle ça la théorie du McDonald's : les gens sont inspirés à trouver de bonnes idées pour écarter les mauvaises.

C'est une technique que j'utilise beaucoup au travail. Les projets démarrent de différentes façons. Parfois on vous donne un brief formel. Parfois vous entendez une rumeur de quelque chose qui pourrait arriver et vous commencez à y réfléchir à l'avance. D'autres fois vous avez muri une idée pendant des mois ou des années avant de la partager avec votre équipe. Il n'y a aucun processus défini pour du travail créatif, mais j'en viens à croire que tous les comportements créatifs partagent une chose : le deuxième pas est plus facile que le premier. Toujours.

C'est tout ce que j'aime.

HTML5, CSS3 et les technologies qui fonctionnent

Il y a quelques jours, j'ai lu via le blog de Kaelig cet article sur le recrutement de développeurs front-end :

2) Ne me demandez pas de connaître XHTML/HTML4.1/HTML5

Les balises sont définies en HTML. A moins que vous n'ayez besoin d'un balisage pouvant être parsé en XML pour une raison ou une autre, me demande de connaître XHTML revient à dire : "je spamme de mots-clés pour être sûr de dégoter la bonne personne".

Une meilleure façon de le dire serait : "Nous nous attendons à ce que vous connaissiez HTML, à utiliser ses balises de manière efficace, et d'avoir une bonne compréhension de la sémantique derrière chaque balise".

Protip : ne laissez personne vous dire qu'il connaît HTML5 si tout ce qu'il sait se limite à l'utilisation du doctype.

Il y a quelques jours, j'ai aussi vu passé ce tweet de Benoît Meunier citant une interview de Judy Ramey (elle même citant Danny Hillis) :

Les choses qu'on appelle « technologies » sont les choses qui ne fonctionnent pas encore. Personne ne parle de la technologie d'interrupteurs d'éclairage.

Si j'évite au maximum de parler de "HTML5" ou de "CSS3" avec mes clients, je plaide coupable d'une utilisation parfois abusive de certains termes un peu fourre-tout. Par contre, je me rends compte que plus le temps passe, moins j'utilise ces termes pour désigner les choses "qui fonctionnent".

Box-shadow ? C'est du CSS. Les animations et transitions ? Du CSS. Les filtres et shaders ? Du CSS3 !

C'est très subjectif. Mais j'ai l'impression que dans le langage courant, HTML et CSS désignent tout ce qui fonctionne, alors que HTML5 et CSS3 désignent ce qui ne fonctionne pas encore.

Une licorne en intégration

Devinette ! Quel est le point commun entre les morceaux de code suivants ?

<!--[if IE 10]><html class="ie10"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if !IE]>--><html><!--<![endif]-->
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;

Bon, à part le côté répétitif lourdingue, vous ne voyez pas ?

Ils contiennent tous les deux une licorne, une créature légendaire, inspirée du mélange d'autres créatures, elles, bien vivantes.

Dans le premier exemple, la ligne <!--[if IE 10]><html class="ie10"><![endif]--> n'a jamais existé. Microsoft a abandonné le support des commentaires conditionnels dans Internet Explorer 10, et ce dès la deuxième Platform Preview.

Dans le deuxième exemple, les lignes -o-border-radius:5px; et -ms-border-radius:5px; n'ont elles non plus jamais existé. Microsoft et Opera ont tous les deux supporté la propriété sans préfixe.

Pourtant, je tire ces exemples de code légendaire de sites récents, codés par de vrais intégrateurs, dans la vraie vie. Le premier exemple est un bon rappel que dans le métier d'intégrateur, la veille fait partie intégrante de notre travail. Et le deuxième exemple est un bon rappel qu'il n'y a jamais de bonne pratique universelle (et, non, désolé, ajouter tous les préfixes possibles pour toutes les propriétés ça n'a jamais vraiment été une bonne idée).