HTeuMeuLeu

Hier, mes collègues et moi avons eu un débat virulent sur les magiciens et nos tours de magie préférés (oui, ce sont des choses qui arrivent dans un bureau rempli de développeurs). Ce qui a démarré tout ça, c’est ce tour où le magicien Cyril Takayama fait sortir des burgers d’une affiche :

Je déteste ce genre de tours. Ce n’est pas de la magie. C’est prendre vos spectateurs pour des idiots et des imbéciles. Ce tour ne demande aucune intelligence ni aucune dextérité. Tout ce qu’il demande, c’est une fausse affiche avec un faux fond et avec un vrai ami chinois derrière qui vous glisse des burgers (démonstration).

Ainsi, je me rends compte de ce qui me plaît vraiment dans la magie : le storytelling, et l’absence de préparatifs.

Ce que j’appelle le storytelling, c’est la narration, la mise en scène, la façon dont le tour est amené. J’aime beaucoup Éric Antoine pour ça. Je déteste cet autre tour de Cyril Takayma où il passe 2 minutes à faire joujou avec sa cigarette. Maintenant pour être honnête, le tour du burger était plutôt pas mal dans se sens là.

Par contre, il était mauvais pour le deuxième point : l’absence de préparatifs. Son tour ne fonctionne qu’avec son matériel, son assistant, et sous un certain angle de vue. C’est la même chose pour les magiciens qui découpent leur assistante dans une boîte à double fond. Ce qui me plaît dans la magie, c’est la spontanéité, et la capacité de réaliser un tour à partir d’un jeu de cartes classique ou d’objets du quotidien non truqués.

Vous voulez des exemples ? Je vous avais déjà parlé de Penn Jillette, et son tour « cups and balls » reste pour moi absolument fabuleux. Et puis ce tour de James Galea (à 2min30) est vraiment parfaitement exécuté :

Si je vous parle de tout ça, c’est parce que je pense que les bons intégrateurs sont des magiciens. En fait, Harry Roberts de CSS Wizardry tenait le même propos l’année dernière :

Un bon moyen d’être efficace est à travers l’illusion. Un bon exemple de ça sont les fausses colonnes en CSS; surmontant un problème complexe avec un code minimal et une illusion intelligente. Les fausses colonnes sont, encore aujourd’hui, un des meilleurs petits bouts d’illusion du développement web qui résolvent rapidement un problème qui autrement demanderait beaucoup de temps et de code.

Ça m’arrive souvent de tomber sur quelque chose de surprenant sur le web, de regarder comment ça a été fait, et d’être déçu parce que les développeurs ont simplement triché en utilisant du code supplémentaire, parfois très sale.

Pour reprendre l’exemple des colonnes de hauteurs égales en CSS, certaines solutions consistent à utiliser du JavaScript pour générer dynamiquement la bonne hauteur. Mais cette solution ne demande aucune intelligence ni aucune dextérité. Tout ce que ça demande, c’est de rajouter une plâtrée de code qui sera téléchargé en plus et exécuté après le chargement de la page.

Je suis bien plus impressionné par un code CSS simple, qui peut s’appliquer partout, avec le strict minimum de code HTML, que par des démonstrations poussives de code qui demandent une structure HTML bien spécifique.

Si votre code ne provoque pas chez vos collègues un « attends, la vache, comment t’as fait ça là », c’est que vous n’êtes probablement pas un très bon magicien.

Il y a quelques mois, un tweet anglophone avait fait le tour du web déclarant quelque chose comme ça :

Google est le nouveau Microsoft. Microsoft est le nouveau Apple. Apple est le nouveau messie.

La semaine dernière, dans le podcast The Talk Show, John Gruber et MG Siegler discutaient de cette idée :

John Gruber : Dans une vue d’ensemble, à la table de poker de la Silicon Valley, l’état d’esprit « l’ennemi de mon ennemi est mon ami » fait de Google le nouveau Microsoft. Ce sont les seuls à mettre leurs doigts dans les tartes de tout le monde, à ne se faire aucun ami, et à détruire les amitiés qu’ils avaient.

C’est toujours difficile de s’imaginer jusqu’où cette industrie peut aller en à peine 5 ans. Mais quand l’iPhone a été présenté en 2007, il y avait Eric Schmidt, invité sur scène, à faire des accolades avec Steve Jobs, et à expliquer à quel point Google et Apple sont de supers entreprises, presque frère et soeur. Apple font leur truc, Google fait son truc, c’est complètement dissocié, on s’aime, et on est très heureux d’avoir quelques uns de nos services sur iPhone. Et maintenant regardez où ils en sont.

Google se fait des ennemis de tout le monde.

MG Siegler : Exactement. Et quand vous leur en parlez, ils n’ont pas l’air d’en être conscients. Ce n’est même pas vraiment un secret, et tout le monde le voit. Et si vous n’êtes pas l’ennemi de Google maintenant, vous avez peur que Google vienne sur votre terrain parce que c’est ce que Google fait tout le temps. Je dirais que la meilleure relation qu’ils ont, c’est avec Samsung, parce que Samsung est la seule société à bien s’en sortir avec Android, mais… on verra bien ce qui va se passer avec le rachat de Motorola.

John Gruber : En effet, ils ont vraiment l’air de ne pas être conscients de ça. Et pour moi c’est la différence avec l’époque où Microsoft était l’ennemi de tout le monde. Microsoft avait bien conscience de leur rôle, et qu’ils se faisaient des ennemis de tout le monde. Qui que ce soit qui faisait des bénéfices, Microsoft voulait leur voler leur marché.  Google n’a pas conscience de ça. Google pense qu’ils sont encore les amis de tout le monde, alors que tout le monde les déteste.

C’était vraiment marquant hier, lors de la keynote de lancement du WWDC2012 d’Apple, qu’Apple faisait un bon gros doigt d’honneur à Google du début à la fin. Des petites piques de potaches (« Ice Cream Sandwich. Jelly Bean. Hey, qui c’est qui trouve ces noms ? Ben & Jerry ?« ), aux choix réellement stratégiques (abandon de Google Maps, mise en avant de résultats sportifs dans Siri, intégration profonde dans iOS de Facebook et Twitter, …), Apple semble bien déterminé à laisser Google de côté.

Le malaise envers Google se fait aussi sentir sur le web, où la relation entre Mozilla et Google me semble toujours aussi étrange. Si les deux sociétés sont officiellement « partenaires » (notamment via un contrat d’1 milliard de dollars pour les 3 années à venir), j’ai vraiment l’impression que Mozilla aurait préféré que Google reste en dehors du marché des navigateurs. Et si de mon point de vue, l’arrivée de Chrome a été une bonne chose et a donné un coup de fouet au marché des navigateurs, je ne suis pas sur que le glissement vers le statut de N°3 était dans les ambitions de Mozilla.

Dans les années 1980, une légende urbaine racontait que le groupe Van Halen exigeait avant chaque concert d’avoir dans leur loge un bol rempli de M&M’s, mais ne devant contenir aucun M&M’s marron. Il se trouve que cette légende (racontée notamment dans Wayne’s World 2) est belle et bien réelle. Mais il ne s’agit pas du tout d’une excentricité du groupe, et il y a une raison bien rationnelle derrière tout cela. Il y a quelques années, Jim Cofer expliquait sur son blog :

Van Halen était un des premiers groupes de rock à faire des concerts vraiment énormes dans des villes moyennes comme Macon, en Géorgie. Les équipes des scènes dans ces petites villes étaient habituées à ce que des groupes viennent en ville avec, au plus, trois semi-remorques pleins d’équipement. L’équipement de Van Halen demandait jusqu’à 9 semi-remorques. Il y avait beaucoup de matériel, et les équipes dans ces lieux étaient souvent submergées. Et quand les gens sont sous l’eau, ils font des erreurs. A un concert de rock, « faire une erreur » pendant l’installation a un grand nombre de conséquences possibles. Certaines erreurs n’auront aucun effet. D’autres erreurs rendent le son du groupe horrible, ce qui n’affecte que l’image du groupe. Mais certaines erreurs sérieuses peuvent tuer des gens… et c’est exactement ça dont le groupe avait peur.

Au coeur de n’importe quel concert majeur, il y a un contrat. Une grande partie des textes de ces contrats sont des mentions légales standards passe-partout, mais chaque groupe peut y ajouter des demandes spécifiques via quelque chose appelé un « avenant ». La plupart des contrats impliquant des concerts dans des lieux importants sont bourrés d’avenants, dont la plupart évoquent des détails techniques spécifiques à la mise en scène du groupe. Par exemple, un avenant pourra dire « Article 148 : Il y aura 15 prises de courant séparées de 6 mètres, espacées de manière identique, fournissant 19 ampères au total, sur des poutres suspendues au plafond, qui doivent pouvoir supporter un poids total de 2500 Kg chacune, en étant suspendues à au moins 9,5 mètres de hauteur, mais pas plus de 11,5 mètres, au dessus de la scène« . Les contrats des concerts de Van Halen avaient plusieurs centaines de demandes similaires, et leurs contrats finissaient par ressembler, comme le disait le chanteur David Lee Roth, à des « Pages Jaunes chinoises ».

Les équipes des lieux importants dans les grandes villes étaient habituées à des spectacles techniquement complexes comme ceux de Van Halen. Le groupe jouait dans des lieux comme le Madison Square Garden de New York ou l’Omni à Atlanta sans le moindre incident. Mais le groupe remarquait souvent des erreurs, parfois des erreurs significatives, dans l’installation de la scène dans les plus petites villes. Le groupe avait besoin d’un moyen pour savoir que leur contrat avait bien été lu en entier. Et voilà comment est arrivé le « bol sans M&M’s marron ». Le groupe avait ajouté une clause au beau milieu du jargon technique d’autres avenants : « Article 126 : Il n’y aura aucun M&M’s marron dans la zone backstage, sous peine d’abandon du spectacle, avec réparation intégrale. » Ainsi, le groupe pouvait simplement entrer dans un stade, et chercher un bol de M&M’s dans leur loges. Pas de M&M’s marron ? Quelqu’un a lu le contract en entier, donc il n’y a probablement pas d’erreur majeure avec les équipements. Un bol de M&M’s avec des bonbons marrons ? Pas de bol de M&M’s du tout ? Arrêtez tout le monde et vérifiez le moindre petit truc, parce que quelqu’un n’a pas pris la peine de lire le contrat.

Si vous déléguez une tâche et que vous voulez vous assurer qu’elle est bien exécutée, vous devriez toujours demander un « bol de M&M’s sans marrons » dans votre cahier des charges. J’ai trop souvent eu écho de chefs de projets ou référenceurs insatisfaits parce que telle demande ou telle préconisation n’avait pas été prise en compte, bien qu’écrite noire sur blanc dans le cahier des charges.

Dans le cas d’un référenceur, on pourrait imaginer la demande d’ajout d’une balise <meta name= »mms » content= »nobrown » /> sur une page spécifique, noyée au milieu de toutes les autres préconisations. Ainsi, pour vérifier si le travail a été fait, il suffira de commencer par vérifier la présence de cette balise.

Début mai, des ingénieurs de Facebook sont venus chez Google faire une présentation intitulée « Timeline timeline« , où comment l’outil de profilage en Timeline de Chrome leur a permis d’optimiser les pages Timeline sur Facebook, et vice-versa. Paul Irish, de chez Google, résumait sur son compte Google+ ses principales notes :

• Quand vous essayez d’améliorer la vitesse de rendu CSS d’un site, vous devez identifier le pourcentage du temps passé à exécuter les sélecteurs (« selector matching« ), au calcul des styles (« style recalculation« ), au reflow et au repaint.
• Vous êtes préoccupés par le paint ? Désactiver le rendu d’un élément avec « visibility:hidden » et voyez ce que ça donne.
• Vous êtes préoccupés par le reflow ? Sortez un élément de l’arbre du rendu avec « display:none ».
• Utilisez requestAnimationFrame pour mesurer le nombre d’images par secondes.
• Des images en background fixes sont très coûteuses en framerate.
• Chrome est assez paresseux pour décoder des images en JPG. Redimensionner une image côté client est très coûteux car Chrome garde à la fois l’image originale décodée et la nouvelle image redimensionnée en mémoire. Cela peut causer l’expulsion d’autres images de la mémoire ce qui demandera un nouveau décodage par la suite. Chrome Task Manager permets de suivre les chiffres de vos images en cache : si la consommation de mémoire est plus ou moins la même alors que vous voyez de nouvelles images, vous expulsez très certainement des anciennes images.
• performance.webkitNow() a été implémenté dans Chrome et permets de faire des mesures très précises (à la nanoseconde et même au delà).

L’année dernière, j’ai découvert (grâce à une conférence TED) Dan Meyer. Dan Meyer est un professeur de mathématiques en collèges et lycées, actuellement doctorant à l’Université de Stanford. Le crédo de Mr Meyer, c’est que les mathématiques sont partout autour de nous, et qu’il faut partir de ça pour les enseigner et les rendre intéressantes.

Il lutte contre les manuels scolaires, avec leurs problèmes tout fait totalement déconnectés de la réalité et qui utilisent de faux prétextes pour rendre intéressant les problèmes. Par exemple :

Personne, dans la vraie vie, ne s’est posé ce genre de problèmes. Et encore moins sous cette forme.

Il a donc imaginé une méthodologie en 3 actes :

1. Introduisez le problème central de votre histoire/tâche clairement, visuellement, viscéralement, en utilisant aussi peu de mots que possible.
2. Les protagonistes/étudiants surmontent les obstacles, cherchent des ressources, et développent de nouveaux outils.
3. Résolvez le problème et mettez en place une suite/extension.

Un des premiers problèmes sur lesquels j’étais tombé, et qui m’avais particulièrement plu, est celui du réservoir d’eau. Regardez la vidéo ci-dessous, et voyez si ça provoque en vous le besoin soudain de résoudre ce problème.