Les archives du mois de juin 2012

Cette semaine, Google a sorti une version de Chrome sur iOS. Cependant, le moteur de cette version n'est pas celui de Chrome. Le moteur de rendu n'est pas le WebKit de Chrome, et le moteur JavaScript n'est pas le V8 de Chrome.

Ceci est dû à l'article 3.3.2 de la license du programme de développement sur iOS :

3.3.2 — Une application ne doit pas elle-même installer ou lancer d'autre code exécutable sous aucune façon, incluant sans limite à travers l'utilisation d'une architecture de plug-in, l'appel à d'autres frameworks, d'autres APIs ou encore différemment. Aucun code interprété ne peut être téléchargé ou utilisé dans une application sauf pour du code qui est interprété et exécuté par les APIs documentées par Apple et interpréteurs intégrés.

Cette règle bloque ainsi tout émulateur de jeux (sauf s'ils ont été réécris en Objective-C, comme Commodore 64), mais elle empêche aussi presque tout navigateur.

Les deux solutions pour créer un navigateur sur iOS sont alors :

• Exécuter tout le rendu et tout JavaScript côté serveur. C'est ce que fait Opera Mini. Ça leur permets d'optimiser le rendu de la page, et de compresser un peu plus la page téléchargée. Mais ça implique que toute action faite en JavaScript sera exécutée côté serveur, ce qui peut rendre la navigation beaucoup plus longue.
• Utiliser les API d'iOS pour afficher une page web. Cela signifie que vous utiliserez le moteur de rendu et le moteur d'exécution JavaScript de Safari. C'est ce que font la plupart des navigateurs sur iOS, comme Dolphin, Atomic ou désormais Chrome.

Le problème en utilisant cette deuxième solution, c'est qu'Apple bride son moteur JavaScript lorsqu'une page web est appelée dans une application (ou en raccourci plein écran sur l'écran d'accueil). Le résultat (vu hier sur Hacker News), c'est que Chrome sur iOS est jusqu'à 3 fois plus lent que Safari.

Ce comportement propriétaire d'Apple est clairement un frein à l'évolution du web sur mobile et à un marché compétitif sain. Alors qu'attendent Google, Firefox et les autres pour se plaindre ? Dans les années 2000, Microsoft avait été accusé d'abus de position dominante, profitant de son monopole sur le marché des systèmes d'exploitation pour développer un monopole sur le marché des navigateurs. Et bien la différence c'est qu'Apple n'a pas une position dominante sur le marché mobile. Cette place est occupée par Android. Apple est donc dans la position particulièrement confortable de pouvoir faire tout et n'importe quoi, le meilleur comme le pire, sans avoir à se soucier de réglementations du marché.

Et le plus drôle dans tout ça, c'est qu'en imposant désormais Chrome comme navigateur par défaut dans Android 4 et plus, c'est Google qui pourrait être accusé d'abus de position dominante.

Le petite casse-tête de cette semaine m'a fait réaliser quelque chose que j'avais en tête depuis quelques mois. Un bon effet CSS c'est comme une bonne blague. Pour que ça marche, ça doit être court, bien écrit et explicite. Voici un exemple :

Avez vous déjà remarqué que les femmes qui sont contre l'avortement sont des femmes que vous n'auriez pas voulu baiser en premier lieu ?

Ça, mesdames et messieurs, c'est George Carlin au Carnegie Hall en 1984. Ce n'est pas une blague qu'il sort en plein milieu du spectacle, après un long moment de préparation du public. Non. Il arrive sur scène, il salue le public et le remercie. Et il sort cette blague. Sérieusement, si vous ne connaissez pas George Carlin, regardez-le.

Ce genre de blague, c'est ce qu'on appelle en anglais une "one-liner". Une blague courte, parfaitement racontée, et qui demande une petite seconde de réflexion avant de bien comprendre toute sa subtilité (un peu comme une doublette). Dans ce domaine, Demetri Martin est mon dieu vivant :

Dire "Je suis désolé" c'est la même chose que "Je m'excuse". Sauf à un enterrement.

C'est vraiment la même chose en CSS. Un bon effet CSS, ça doit être :

• court : s'il vous faut 36 balises et autant de règles CSS, vous allez passer pour le lourdingue de service. Je pense que la séparation de la forme et du contenu devient enfin possible. Profitez-en.
• bien raconté : si vous écrivez du CSS, alors écrivez du CSS. Par pitié ne venez pas utiliser d'autres pseudo-langages et des tonnes de JavaScript.
• explicite : votre code doit être suffisamment ingénieux et explicite à lui tout seul. En reprenant l'exemple de mon casse-tête, la solution trouvée n'est pas la plus intuitive ni la première qui vient à l'esprit. Mais une fois qu'on la connaît, elle paraît évidente. Vous devez dans tous les cas éviter la surréflexion.

Mes effets préférés en CSS, comme mes blagues préférées, sont des one-liners.

Ce mois-ci, le magazine Entrepreneur a publié un article expliquant comment Marissa Mayer, la Vice Présidente des services locaux de Google, tenait le coup avec ses équipes en travaillant 130 heures par semaine :

Quand Mayer soupçonne un employé de s'épuiser, elle leur demande de trouver leur rythme. Et ils reviennent avec une demande, "Je dois être à la maison pour les dîners tous les mardi", ou "Je dois être à l'heure pour être aux matches de football de ma fille". Elle concède à ses demandes, sans exception.

"Vous ne pouvez pas avoir tout ce que vous voulez", avertit Marissa. "Mais vous pouvez avoir les choses qui comptent vraiment pour vous. Ça vous permets de travailler vraiment dur pendant une longue période sur quelque chose qui vous passionne."

Initialement, j'avais réagi sur Twitter en faisant une bonne blague bien grasse. Mais cet article est complètement dingue, et ce n'est pas très drôle.

130 heures par semaine, ça fait plus de 18 heures par jour, 7 jours sur 7. 18 heures par jour, ça vous laisse 6 heures pour dormir, manger, vous laver, vous divertir, voir votre famille, voir vos amis, vous évader. 6 heures par jour pour vivre.

En travaillant 130 heures par semaine, même à un salaire de 7000€ par mois, vous gagnez moins qu'en travaillant 35 heures par semaine pour 2000€ par mois.

Je travaille en tant qu'intégrateur depuis 6 ans. Je suis entrepreneur depuis 4 ans. J'aime mon travail. J'aime ma boîte. Mais s'il y a bien quelque chose que j'ai appris, c'est qu'il y a un équilibre à trouver. Il faut travailler pour vivre. Pas l'inverse. Peu importe le projet sur lequel vous travaillez, peu importe la mission dont vous vous sentez investi.

J'ai déjà travaillé plus de 100 heures par semaine. J'ai déjà travaillé plus de 35 heures en 2 jours. Je n'en garde aucun bon souvenir ni aucun enrichissement personnel. Il m'arrive encore de travailler un peu plus le soir, voire le week-end, quand j'ai des projets qui me plaisent particulièrement. Mais quand ça arrive, je considère que c'est un échec. Je trouve ça choquant de se vanter ainsi, et qu'une revue vante ces pratiques de travail sans aucun commentaire.

Ce genre d'histoires n'est pas spécifique à Google ni à Apple. C'est une parfaite illustration de la théorie espagnole, dont je vous parlais il y a quelques mois. Ça m'attriste de voir que des journalistes s'acharnent à dénoncer les conditions de travail d'ouvriers chinois, alors les "ouvriers" occidentaux ne sont pas mieux lotis.

This week, I encountered a nice brain teaser in front end development. After 2 hours of brainstorming, I finally found a solution that pleased me. I posted the problem on Twitter, then on my blog. To my surprise, I had a lot of answers, and some of them were actually pretty ingenious. So I decided to translate it in english so you english folks can enjoy it too.

So here it is :

It's a pretty common visual effect, especially in print magazines. However, I found out that it was not that intuitive to reproduce this effect simply in CSS.

Here are the rules :

1. The text must not be divided by any tags (so no span for each lines, no br)
2. You can use as many tags as you want around the text
3. No JavaScript, only HTML and CSS
4. The white background must follow around the text
5. There is a margin inside the white background around the text of 20px on the left and right, and about 10px on top and bottom
6. The text is dynamic, so we must be able to easily change it and still have the visual effect
7. The solution must work on modern browsers (IE9, Firefox 13, Chrome 19, ...)

To help you get started, I created a sample code on jsFiddle. You're free to edit the HTML and CSS, as long as you respect the rules above.

I invite you to share your realisations on the comments below. I'll publish the solution I came up with later this week. Have fun, and good luck to all !

Cet après-midi, j'ai rencontré un joli casse-tête en intégration. Après 2 heures de remue-méninges, j'ai fini par trouver une solution qui me convenait. J'ai posté le problème sur Twitter, et à ma grande surprise j'ai eu beaucoup de réponses, dont certaines assez astucieuses, mais ne collant pas tout à fait à ce que je souhaitais faire. Alors avant de donner la solution que j'ai trouvé, j'ai décidé de faire durer le suspens un peu plus longtemps et de poster le problème ici.

Voici le casse-tête en question :

C'est un effet graphique assez classique, en particulier dans la presse papier. Pourtant, il se trouve que ça reste relativement complexe à reproduire de manière simple en CSS.

Voici les règles à respecter :

1. Le texte ne doit contenir aucune balises (donc pas de span pour chaque ligne, pas de br)
2. Vous pouvez utiliser autant de balises que vous voulez autour du texte
3. Pas de JavaScript, que du HTML et CSS
4. Le fond blanc doit suivre le contour du texte
5. Il y a une marge à l'intérieur du fond blanc autour du texte de 20px à gauche et à droite de chaque ligne, et d'environ 10px en haut et en bas
6. Le texte est dynamique, et on doit donc pouvoir le modifier en conservant l'effet
7. La solution doit fonctionner sur les navigateurs modernes (IE9, Firefox 13, Chrome 19, ...)

Pour vous aider à démarrer, j'ai mis à votre disposition sur jsFiddle un exemple de code HTML et CSS. Vous êtes libres de modifier le code HTML et CSS, tant que vous respectez les règles ci-dessus.

Je vous invite à partager vos réalisations dans les commentaires. Mercredi soir, je publierais la solution que j'ai trouvé, et je sélectionnerais mes solutions préférées parmi les commentaires. Amusez-vous bien, et bonne chance à tous !