HTeuMeuLeu

Je conserve ici ce slide de Heydon Pickering sur HTML, CSS et JavaScript parce qu’il est presque parfait.

J’aurais juste laissé CSS au dessus de HTML, et ça aurait été l’illustration parfaite pour répondre à tous ceux qui cherchent à construire des « applications robustes » toutes en JavaScript. À mettre en contraste avec cet autre slide posté en janvier dernier.

Vu sur Twitter, ce tweet de Vicky Harp :

Un utilisateur réclame une fonctionnalité déjà existante dans le produit.
— Le développeur junior : « lol, idiot d’utilisateur »
— Le développeur avancé : « Fermé – Résolu »
— Le développeur senior : Ouvre un bug d’utilisabilité.

C’est tellement bien résumé.

Lu le mois dernier : ce commentaire sur Hacker News (via Twitter) en réaction à un test du dernier Macbook.

J’ai trouvé cette affirmation intéressante :

« Les nouvelles spécifications vous offrent une meilleure performance, mais aussi une meilleure durée de vie de la batterie avec, selon Apple, 10 heures de navigation web ou 11 heures de lecture de films iTunes. »

La lecture de films était autrefois considérée comme un test de facto de la rigoureuse autonomie qu’un ordinateur pouvait avoir. Les DVD tournoyant et les disques durs ont été remplacés par des SSD, et le décodage de vidéo avec accélération matérielle a remplacé l’utilisation maximale de votre processeur.

En revanche, la navigation web était autrefois considérée comme une utilisation légère de batterie. Récupérer du contenu réseau en mémoire, analyser du HTML de base, etc. Maintenant, avec JavaScript partout et la complexification grimpante des pages web, la navigation web est devenue l’une des choses les plus coûteuses que vous pouvez faire, en ce qui concerne l’autonomie. À vrai dire, sur mon Macbook Pro, maintenant qu’OS X indique quels processus consomment le plus d’énergie, les navigateurs web comme Safari et Chrome sont les seules choses que je vois apparaître dans les « Applications consommant beaucoup d’énergie ».

Je n’avais jamais vu les choses sous cet angle, mais le web est effectivement devenu un nouveau benchmark de facto.

Je l’avais posté sur Twitter en mars dernier, mais je le reposte ici parce que c’est important. Accessible Email est un outil gratuit en ligne permettant de vérifier l’accessibilité de vos newsletters.

Campaign Monitor a publié en octobre dernier un article sur les dessous d’e-mails interactifs, et notamment celui-ci de PRET A MANGER que j’avais déjà repéré. J’adore voir le brouillon qui a servi à la conception initiale.

Google a publié les slides et la vidéo d’une conférence de Elie Bursztein (« Anti-spam and Abuse Research Lead » sur Gmail). C’est hyper-hyper intéressant. J’ai relevé notamment les quelques points suivants :

• « Quand vous changez votre système et que vous déployez un correctif, n’en déployez pas qu’un à la fois. Déployez en plusieurs à la fois, comme ça c’est plus difficile pour [des hackers] de voir ce qui a changé. »
• La sécurité est déployée sur l’ensemble des clients mail de Google (y compris les vieilles versions de Gmail)
• En moyenne, entre 1 et 5 failles XSS sont corrigées par trimestre. Pour la première fois au premier semestre 2015, aucune faille XSS n’a été corrigée.
• Google récompense ceux qui remontent des failles. En 2010, les récompenses étaient sous la barre des 5000$. Aujourd’hui, les failles étant plus rares, les récompenses tournent autour de 25000$.
• Parmi les key challenges de 2016, Elie évoque les « media queries ».

Mark Robbins a partagé une technique très intéressante pour simuler du positionnement absolu dans un e‑mail, la propriété position:absolute étant filtrée un peu partout. En résumé : en utilisant des margin dans des éléments à taille nulle (avec un max-width:0; max-height:0), on arrive au même résultat.

Vu sur Twitter, un long article sur Marissa Mayer et Yahoo, avec notamment cette anecdote invraisemblable.

Près de 4000 employés de Yahoo étaient assis et attendaient que Marissa Mayer arrive pour s’expliquer. […]

Mayer pris une grande respiration. Elle salua tout le monde. Elle leur rappela la confidentialité de cette réunion. Elle déclara avoir parcouru leurs questions, et qu’elle avait quelque chose qu’elle voulait leur lire. Elle tenait un livre dans ses mains. Un livre pour enfant. « Bobbie had a Nickel ».

Elle commença à lire.

« Bobbie avait un nickel rien que pour lui. Devait-il acheter des bonbons ou un cône glacé ? »

Mayer leva le livre, pour montrer aux employés les illustrations.

« Devait-il acheter une pipe à bulles ? Ou un bateau en bois ? »

Une autre illustration.

« Peut-être, quand même, qu’un petit camion serait mieux que tout ! »

Les employés présents dans la salle échangeaient des regards. À leurs bureaux, les employés à distance devenaient embrouillés.

Que faisait Mayer ?

Elle continua à lire.

« Bobbie s’assit et se demanda, Bobbie s’assit et pensa. Quelle pourrait être la meilleure chose qu’un nickel puisse acheter ? »

Mayer sembla sauter quelques pages. Elle lu, avec un peu d’agitation dans sa voix :

« Il pourrait s’acheter un sac de fèves ou une toupie. Il pourrait s’acheter un moulin à vent à offrir à son petit frère. Ou devrait-il s’acheter, se demande Bobbie, une petite boîte à crayons ? »

Mayer semblait lire avec une réelle frustration maintenant, comme si toute la colère et confusion de la salle s’en irait si tout le monde comprenait l’histoire qu’elle lisait à voix haute.

« Bobbie pensa, et soudain une idée brillante lui vint », Mayer lu, atteignant la dernière page du livre.

« Il dépensa son nickel comme ça… »

Mayer leva le livre pour montrer sa dernière illustration. C’était un dessin d’un petit garçon roux à cheval sur un manège.

Quasiment personne ne pouvait voir la page.

Personne ne compris ce que Mayer essayait de dire. […]

C’est quand Mayer est montée sur scène, s’est assise sur sa chaise, et leur a lu un livre pour enfant, en leur montrant les illustrations comme si elle était une maîtresse d’école et qu’ils avaient tous six ans. Plus tard, elle expliqua qu’elle avait lu ce livre parce qu’elle voulait dire que ce qui comptait le plus dans la vie était les expériences, et que son expérience chez Yahoo était fantastique jusque là.

Dans sa dernière newsletter envoyée hier, Louis CK s’excuse longuement d’envoyer beaucoup plus de newsletters récemment pour promouvoir sa nouvelle série. J’ai beaucoup aimé ce paragraphe.

Vous vous demandez peut-être, ou avez envie de me demander, mais à l’intérieur de vous même, « Pourquoi est-ce que tu ne laisses pas les gens se désinscrire d’une liste dédiée aux e-mails de Horace and Pete ? ». Et bien, le fait est que j’ai demandé à mes gens du web de créer des options de catégories pour mes listes d’e-mails. Et pour être juste avec eux, ils ont fait exactement ça. Et ils m’ont envoyé un e-mail il y a quelques jours, me montrant ces options et me demandent de les tester et de les valider. Et je n’ai pas regardé. Parce que je suis très occupé en ce moment à faire plein de choses comme, par exemple, emmener mes enfants à l’école le matin, aller les chercher plus tard, demander poliment au chien de ne pas mâcher des choses, construire un abri anti-Trump comme tout le monde, créer et payer pour une série télévisée et vous la distribuer directement. Donc oui, putain, je suis occupé. Désolé d’être vulgaire.

J’ai arrêté de compter le nombre de projets qui ont glissé à cause de clients trop occupés pour répondre. Mais Louis CK illustre parfaitement à quel point répondre à des « gens du web » n’est pas une priorité. Et c’est peut-être aussi bien comme ça.

J’ai enfin lu cet article gardé dans mes favoris depuis le mois dernier sur le design de produit et le design itératif. La conclusion est très bien :

Vous ne pouvez pas devenir bon dans quelque chose sans avoir la liberté d’y être mauvais pour commencer. Si vous croyez que chaque idée que vous présentez doit avoir l’air géniale, ne soyez pas surpris si vous n’en avez que très peu. Si vous en avez très peu, ne soyez pas surpris si vous en choisissez une mauvaise. Quand vous choisissez une mauvaise idée, l’itération ne la rendra pas bonne, ça la rendra juste achevée.

Un exemple d’animation un peu kitsch mais amusante chez FreshInbox : comment « secouer » un e-mail en ajoutant une animation sur le conteneur principal d’un e‑mail.

Le mois dernier, le blog Mosaico a fait un travail formidable de recherche dans le code source d’Android. L’auteur a découvert ce qui supposément peut être associé au comportement de Gmail forçant le redimensionnement d’e-mails.

Dans certains cas, Gmail va ajouter une classe .munged (en anglais selon Wikipedia, « une série de changements potentiellement destructifs ou irrévocables ») à toutes les <table> et <td>. Cette classe va appliquer un width:auto !important;, causant les dommages qu’on peut imaginer.

J’ai publié une traduction en anglais de mon retour sur la création de Super Mail Forward, un e-mail transférable évolutif. Cinq mois après, il y a deux changements principaux.

AOL a corrigé le bug de remplacement des images en background dans une balise <style>. J’ai donc trouvé une autre bidouille pour activer des styles sur AOL. Ou plus précisément, pour ne pas que des styles s’activent sur AOL. En fait, une balise <style> contenant une image de fond à l’URL non supportée (par exemple background:url('#');) sera totalement supprimée. Dans l’exemple suivant, ces styles s’appliqueront donc partout (ou presque), sauf sur AOL.

<style type="text/css">
   .step1 { background:url('#'); }
   .step1 .W { background:#fff!important; }
   .step1 .X { background:#f8d81f!important; }
   .step1 .Y { background:#d89f37!important; }
   .step1 .Z { background:#000!important; }
</style>

Microsoft a commencé à remplacer Outlook.com par le même webmail qu’Office 365 (aussi appelé Outlook Web App). Ce webmail ne supporte pas les sélecteurs d’attributs. Pour cibler des styles uniquement sur ce webmail, on peut donc écrire le sélecteur suivant…

<style type="text/css">
   [owa] .toto { … }
</style>

…qui sera interprété comme :

<style type="text/css">
   .rps_123a .x_toto { … }
</style>

Hier soir, je me suis connecté pour la première fois à Spotify sur ma poussiéreuse PS3, pour voir. Et à ma grande surprise, le système d’identification est plutôt bien pensé. En plus d’un traditionnel formulaire identifiant / mot de passe, l’application présente par défaut l’écran suivant.

(capture d’écran via jmdgame.fr)

On ouvre Spotify sur son smartphone, on lance un morceau, on choisit de le lire sur sa PS3 dans la liste des appareils distants. Et c’est parti.

C’est rapide et ça fonctionne bien. En particulier pour une console où les gestionnaires de mot de passe sont inexistants, et où la moindre saisie au clavier virtuel est un enfer.

Code and Send a publié un court article très intéressant sur les caractères invisibles ETX qui peuvent apparaître quand on copie-colle du texte depuis Photoshop. Ce caractère est ajouté par Photoshop lorsqu’on fait un saut de ligne avec MAJ+Entrée. Pour éviter ça, Code and Send a créé Detergent.io, un petit outil en ligne pour nettoyer du texte copié depuis Photoshop ou Word et destiné à être intégré dans un e‑mail.

Vu sur Twitter : un e-mail interactif avec des smoothies par PRET A MANGER. J’adore le rendu avec les animations (faites en sprites). Mais quel dommage que le tout soit déclenché par une media query utilisant -webkit-min-device-pixel-ratio, ne fonctionnant alors que sur Chrome, Safari ou Opera.

La semaine dernière, Microsoft a mis à jour son application Outlook pour iOS et Android, incluant des fonctions de calendrier et tuant au passage l’application Sunrise. Mais la vraie nouveauté, de mon point de vue, est que l’application iOS est actuellement neuvième des applications gratuites les plus téléchargées sur l’App Store (contre trente-cinquième pour Gmail).

Ne sous-estimons pas les applications mail tierces sur mobile.

James White a fait des recherches poussées pour comprendre d’où venaient des marges ajoutées autour du corps d’un e-mail sur l’application mail par défaut d’Android 4.4.

Résultat : l’application englobe chaque e-mail d’un <div style="margin: 16px 0;"> et ajoute un margin variable sur le <body> calculé selon la densité de pixels de l’appareil utilisé.

Pour annuler tout ça, James suggère d’ajouter les styles suivants :

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }

La newsletter #emailweekly de cette semaine a encore une fois mis en oeuvre un bel effet technique. Dans Apple Mail sur iOS, l’e-mail est par défaut replié avec un subtil effet de papier replié. Et si on glisse son doigt vers le bas, l’e-mail se déplie complètement.

Il s’avère qu’en fait, c’est simplement le comportement d’Apple Mail lorsqu’un e‑mail contient en premier une balise <blockquote type="cite"> suivie d’un autre contenu. C’est plutôt malin, et je trouve l’effet très réussi.

FreshInbox a lancé un générateur de carousel pour des e‑mails. C’est simple à utiliser, et le résultat fonctionne même dans les webmails desktop de Yahoo, SFR ou La Poste. Cela ne fonctionne par contre pas dans le webmail d’Orange, qui remplace les <input type="checkbox" /> par des balises <noinput>.