Brain Cracking

28/01/10: IE perd des parts de marché, HTML5 rétrocompatible, manifesto contre iPad, migration PHP5.2 à 5.3

Vu hier sur le web :

• PHP : un petit script qui permet de détecter les problèmes connus (et détectables via un script) lorsqu'on migre de PHP5.2 à PHP5.3 (via @belhassi)
• HTML5/CSS3 : 2 tutos HTML5/CSS3 en anglais et ici en français, qui cherchent à démontrer que l'on peut déjà mettre du HTML5 et du CSS3 en production tout en assurant la rétrocompatibilité, à partir du moment où on ne cherche pas le pixel perfect. Techniquement c'est parfaitement jouable, mais cela demande une certaine maîtrise de l'intégration et de veille techno, en particulier si l'on doit déployer sur des sites plus complexes que des portfolios, hors j'ai remarqué que l'on confiait souvent l'intégration aux uniquement aux juniors.
• OS : un manifesto contre le manque d'ouverture de l'iPad. l'iPhone était déjà critiqué pour cela, l'iPad souffrira donc du même problème pour les développeurs d'applications. Seuls les développeurs web peuvent tirer leur épingle du jeu tant qu'Apple laisse ses utilisateurs naviguer où ils veulent (exemple avec Google Voice qui passe par une application Web après s'être fait refuser l'appstore), mais une application Web ne peut pas complètement tirer parti du matériel (HTML5 travaille dessus)
• Browser War : conséquence directe des recommandations des gouvernements allemands et français sur les trous de sécurité d'IE, IE perd cette semaine là 3% de part de marché en Allemagne et 1% en France. Les ITs et les citoyens écouteraient donc leur gouvernement ?

Utilisez RSS pour une analyse quotidienne de l'actualité du développement d'applications web OU
Suivez ce compte Twitter pour les liens en quasi temps réel (disponible aussi en RSS)

27/01/10: iPad résolution et cache, HTML5 video player, performances browser

Vu hier sur le web :

• Browser War : performances comparées de FF, Chrome et Opéra, extensions comprises. Tous ces browsers sont les plus rapides du moment, et je doute que les comparer à une seconde près décide même les plus geeks d'entre nous à changer. Ce qu'il est intéressant de noter c'est qu'il y a une vraie différence entre Chrome "Stable" et "Dev" et qu'Opéra va revenir en force du point de vue des perfs JS. (via @pobo)
• Librairies : un video player HTML5 dont il faut suivre le développement, si ils en viennent à la partie compliquée : le fallback Flash qui doit avoir le même look que la version HTML, customizable elle via CSS. Pas de précision concernant la licence/prix pour une utilisation commerciale, ce qui rejoint mes conclusions sur le fait que le marché va être pris par des librairies payantes si les librairies gratuites ne font pas un effort immédiat, freinant ainsi l'adoption d'HTML5. (via @belhassi)
• Device : l'iPad est sorti et aura une résolution de 1024x768, standard de facto sur lesquels les ergonomes se basent aujourd'hui. Il ne faut cependant pas oublier que les netbooks déjà en circulation sont certes en 1024 mais réduisent de 100-200 pixels la zone visible en hauteur. Je rappelle cette page du google labs utile où l'on voit que 90% des gens voient une zone de 950x500.
• Device : iPad toujours, un article d'alsacreation sur les conséquences pour les webdevs, et un rappel sur les limitations du cache du safari iPhone, qui seront probablement les mêmes : les objets de + de 15k ne sont pas cachés, la taille totale du cache est de 1.5Mo ...

Utilisez RSS pour une analyse quotidienne de l'actualité du développement d'applications web OU
Suivez ce compte Twitter pour les liens en quasi temps réel (disponible aussi en RSS)

26/01/10: HTML5 pour google voice, dernières règles CSS3 pour FF 3.6

Vu hier sur le Web :

• CSS3 : point et démo sur les propriétés CSS3 implémentées dans FF3.6. Comme d'habitude avec CSS3, il faut prendre chaque propriété une par une et voir si elle vaut la peine de chercher un fallback, si ce fallback est maintenable, si on peut se passer de la propriété ou pas... Ce qui revient en général à se dire qu'on ne l'utilisera pas immédiatement (via @belhassi).
• Mobile : FB et Twitter extrêmement utilisés sur Mobile. Ce qui prouve encore une fois qu'il est de plus en plus fréquent que le même utilisateur voit votre service sur plusieurs machines (IE6 au boulot, Opera mini dans les transports, FF soir et WE par exemple)
• HTML5 : Google Voice sur iPhone alors que Apple avait refusé l'application proposée il y a un an, c'est possible grâce aux technos HTML5. Une presque victoire pour le concept de "One Web", car cela prouve que l'on pourrait remplacer certaines applications par des applications Web. En pratique pour cette appli, c'est le cache qui donne l'impression de fluidité, mais le 1er temps de chargement peut être assez long, il n'y a pas d'accès aux contacts du téléphone et certaines autres limites donnent évidemment l'avantage aux applications installées localement. Mais cette une appli Web marchera sur tous les browsers mobiles modernes, sans forcément beaucoup d'adaptation.

Utilisez RSS pour une analyse quotidienne de l'actualité du développement d'applications web OU
Suivez ce compte Twitter pour les liens en quasi temps réel (disponible aussi en RSS)

25/01/10: geolocalisation HTML5, chrome OS, h264 payant

Vu hier sur le web :

• HTML5 : démo live de la différence de précision entre HTML5 geolocation (FF3.5+) et la détection par l'IP. Cette dernière technique donne généralement l'endroit où se trouve votre point d'entré sur le web (qui se trouve à 4.5km de chez moi dans mon cas ...). Geolocation se base lui sur les réseaux Wifi autour de vous en plus de l'IP. J'avoue que du fond de ma campagne j'ai été un peu surpris qu'il puisse me situer avec + de précision que l'IP
• Video : un développeur Mozilla explique pourquoi FF ne devrait pas implémenter le décodage h264. Raisons idéologiques bien sur, il faut continuer à supporter le monde du libre, OGG en première ligne, mais également des problèmes légaux. Et une information qui fait peur : à partir de 2011, les sites qui encodent et/ou diffusent du h264 pourraient être amenés à payer des royalties ! L'expérimentation dailymotion sur le tag <video> en particulier mais avec support d'OGG est finalement assez bien vu. Voir également une analyse du problème en français. Mozilla a raison de rester ferme sur le sujet, d'abord pour le bien du Web en général, ensuite parce les sites vidéos auront pour longtemps encore Flash en fallback (tant que IE6, 7 et 8 seront significatif), donc les utilisateurs FF ne se retrouveront jamais bloqués à ne pas pouvoir voir de vidéo sur Youtube
• PHP : erreurs courantes des développeurs PHP. Assez bien vu, surtout pour les débutants (via @belhassi)
• quelques screens de Chrome OS, voir également mon test rapide de cet OS (via @tilaurent)
• HTML5 : une MAJ de Chrome incluant les features suivantes : 
  • Web SQL DB, qui comme Web Storage (ou DOM Storage selon le browser) permet de stocker des infos sur le disque utilisateur, et de les retrouver grace à une base SQLite (en remplacement de la version GEARS). Petite remarque : la spec, d'ailleurs éditée par un employé google, mentionne qu'elle est bloquée à ce stade car il n'y a pas de concurrent déclaré à sqlite
  • Application Cache, qui permet le mode offline en stockant des ressources externes (statiques mais aussi des résultats d'XHR) sur le poste client
  • WebSockets, qui permet d'ouvrir une connexion permanente avec le serveur, évitant ainsi d'avoir des solutions à base de proxy Flash ou qui lancent des XHR périodiquement (ça inclue APE)

Pour avoir un résumé de l'actualité du développement web quotidien, utilisez RSS.
Moins d'analyse, mais avoir les liens en quasi temps réel, suivez ce compte twitter (disponible aussi en RSS)

22/01/10: part de marché IE, vimeo HTML5 video, FF 3.6

vu aujourd'hui sur le web :

• Browser War : des chiffres récents sur les parts de marché des browsers en Europe. IE8 ne convainc pas donc la part globale de IE recule et cela bénéficie à tous les autres browsers, safari + chrome cumulés sont à 9%, dans les marchés ou Internet n'est pas encore chez tout le monde, IE est franchement mal.
• HTML5 : Viméo aussi s'est mis au tag <video> de manière expérimentale. Ils ont aussi choisi la solution la moins chère (car elle évite un double encodage) : le format vidéo est h.264 (via Ajaxian)
• Design : article étonnant sur le nombre d'or en ergonomie (web). Faites des rapports 1/3 - 2/3 entre toutes vos zones et on aura l'impression que c'est beau
• Browser War : Sortie officielle de FF3.6, qui introduit quelque chose de majeur : le Multi upload, le drag&drop et les miniatures des fichiers locaux, de quoi remplacer la gourmande solution flash ou java qu'on vous a forcé à implémenter (comment ça je transpose ?)
• HTML5 : mon article ouvert qui se demande ce qu'attendent les librairies JS pour proposer des implémentations HTML5 cross browser

Features HTML5, appel aux armes pour les librairies JS

ce site a migré : retrouvez cet article à jour sur braincracking.org

Le constat

Cela fait une bonne année que les browser majeurs implémentent systématiquement de belles features HTML5, alors même que la spec n'est pas finalisée. D'un côté c'est tant mieux car

• ces implémentations font progresser les spécifications elle même. Le HTML working group ou le W3C peuvent voir en action sous Opéra ou FF ce qu'ils essayent de spécifier, et ils ont de vrais retours des implémenteurs, voire des développeurs web
• nous les développeurs web pouvont tester et se préparer à ce que sera le futur des applications web. Ceux qui prévoient la rétro-compatibilité peuvent même mettre des choses en production

Cependant, pour nous développeurs web :

• l'état non finalisé de la spec fait que les browsers implémentent la même fonctionalité avec des interfaces différentes, voire rajoutent des features certes intéressantes mais dont on ne sait pas si elles seront implémentées partout
• l'état du marché des browsers fait qu'on gère et gèrera encore pour longtemps des browsers qui n'implémentent pas du tout ces features :
  • IE6 et IE7 sont encore là et resteront quelques annéees, le temps que Seven soit massivement adopté
  • IE8 a fait un remarquable effort (DOM Storage, offline detector, JSON natif, CSS selector natif, onHashChange ...) mais on commence à se douter qu'aucune mise à jour n'implémentera de nouvelle feature majeure (geolocalisation, Web Worker, <video>, Canvas ...)
  • les roadmaps de FF, Chrome, Safari et Opéra ne sont évidemment pas synchrones, donc la diffusion des features n'est jamais garantie même sur ces browsers modernes
  • les habitudes de navigation changent et il faut prendre en compte la navigation sur les browsers riches mobiles. Un même user peut utiliser IE6 au bureau, continuer sur son Webkit/Opera mobile dans les transports et terminer sur son Firefox à la maison.

Avant même de commencer à utiliser ces features, il faut d'abord passer du temps à comprendre et implémenter plusieurs API différentes, en plus d'une version de l'applicatif qui "doit faire sans".

Exemple concret : Storage

Mettons que je veuille développer une application de type Maps, qui affiche par exemple des photos sur une carte. Sans compter les images qui sont gérées par le cache du browser, au bout de quelques minutes de navigation, on va se retrouver avec des Mo's de données importées progressivement via XHR ne serait ce que pour lister le nom, l'endroit et l'url des images à placer sur la carte. Si l'utilisateur rafraichit la page, il perd tout. 

La solution ici serait d'implémenter HTML5 WEB Storage pour que l'utilsateur garde les données des photos sur son disque et lui garantir un affichage éclair des photos dans les zones déjà visitées

La spec est encore à l'état de DRAFT mais on trouve 4 browsers (50% des visiteurs) qui en ont implémenté une variation :

• IE8 a DOM Storage (d'ailleurs je ne sais même plus quel est le nom officiel de la feature ...)
• FF2 puis FF3 ont DOM Storage, ainsi que LocalStorage depuis FF3.5
• Safari 4 appelle ça Key-Value Storage, et je ne sais pas si ça marche sous l'iPhone qui limite de toute façon fortement l'espace cache donné aux pages (EDIT: pobo me signale qu'avec certaines restrictions, l'iPhone aussi le supporte)
• Chrome inclue GEARS qui permet l'accès à une Database. Mais ils ont annoncé récemment qu'ils abandonneraient GEARS au profit de HTML5

La fonctionalité globale est la même mais le moyen d'y accéder, le retour des fonctions et les limitations diffèrent. On est dans un cas bien plus complexe que le support de telle ou telle propriété CSS2, et autant dire qu'en tant que développeur on n'a même pas envie de commencer une implémentation, d'autant qu'il faut inclure dans le coup du développement le cas majoritaire : l'absence totale de Storage.

C'est assez représentatif de toutes les features HTML5 de manière générale, la seule solution viable est donc l'utilisation d'une libraire Javascript qui permet d'avoir une API uniforme.

L'unique solution : les librairies JS

Dans l'écosystème du développement web, c'est le rôle des librairies JS que d'aplanir les différences entre browsers, et dans l'exemple de WEB Storage, seul YUI a produit de quoi pouvoir utiliser cette feature sereinement :

• une manière uniforme d'accéder à 5 implémentations différentes (en incluant flash)
• YUI fait partie des grandes librairies dont le support à long terme est quasi assuré
• un résumé des limitations auxquelles s'attendre, qui permet de savoir avant même d'implémenter si la solution sera vraiment utile
• une documentation et des exemples qui sont autrement plus lisibles qu'une spec W3c
• bonus : via Flash on a même une solution de fallback quasi universelle, ce qui ne serait pas possible avec toutes les features HTML5 (geoloc par exemple)

Il semble y avoir des plugins pour Jquery ou Dojo (impossible de retrouver une doc pour Dojo) mais ils m'ont semblé non supporté ou à moitié abandonné.

Si seul YUI a pu sortir quelque chose (signalons que Yahoo peut se payer une équipe à plein temps), c'est parce qu'on est arrivé je pense dans une autre ère du développement JS : on ne se contente plus en quelques lignes d'implémenter un .getElementByClassName() ou un accès aux events DOM uniforme, on a maintenant affaire a des features beaucoup plus compliquées, nouvelles, qui touchent aux ressources machine, avec lesquelles on communique surtout par event/callback et pour lesquelles les specs ne sont pas bien établies.
Alors que le terrain de bataille actuel des librairies se fait surtout sur les widgets, les librairies n'ont plus le temps de revenir à leur raison d'être originale qui était d'uniformiser l'accès cross-browser.

Wish list 

Il y a de la place pour tout le monde, voici des features HTML5 dont le développeur d'application Web d'aujourd'hui a besoin (dans le désordre) :

• Web Storage : fait par YUI, avec fallback flash, au poil
• OnHashChange event : pour la navigation en mode AJAX. Le fallback pourrait être une boucle qui monitore l'url ...
• <video> : pour la vitesse d'affichage d'une vidéo. Ca serait pas mal si on pouvait insérer un tag <video> à remplacer par un player flash s'il n'est pas supporté. Mais à ce jeu là je vois (malheureusement pour le monde du libre) h.264 sortir gagnant face à OGG
• le multi upload, avec barre de progression et preview : comme dans le récent FF3.6 le support du multiple="true" dans les <input type="file">, de l'event onProgress pour indiquer où en est l'upload et l'affichage de la miniature de la photo qui est sur le disque. Et en fallback une des 2 millions d'implémentation flash déjà existante.
• le drag & drop depuis le bureau : implémenté aussi dans FF3.6, la seule alternative est activeX ou java ... Il vaut peut être mieux se passer d'alternative pour cette fois.
• Canvas : IE a VML, les features sont comparables au point qu'il existe déjà une librairie qui fait le pont entre les 2
• mode offline : le fallback ne doit pas être très pratique (pinger le serveur de manière régulière jusqu'à tomber en timeout ...) mais c'est peut être jouable. Gérer le cache et retenir les infos à envoyer au serveur jusqu'à ce que l'on revienne online ne peut se faire qu'avec Storage (donc flash en fallback)
• Web Workers : pour faire de grosses opérations JS sans freezer le browser. Peut être simulable avec une iframe ?
• Geolocation : demander au browser où il se trouve physiquement. Pas de fallback possible si ce n'est la détection de l'IP. De toute façon les applications qui utilisent ces infos prévoient toujours en premier lieu un moyen d'indiquer manuellement sa position
• Input type calendar, mail etc... : pour par exemple afficher un calendrier lorsqu'on clique sur un input de type date (seul opéra le fait aujourd'hui). Toutes les libraires proposent des widgets calendar que l'on pourrait mettre en fallback

Les librairies ont le pouvoir

Tout cela nécessite une grosse force de développement et il est même possible que devant la rareté ce soient d'abord des librairies payantes qui fassent leur trou ... Mais les développeurs de framework peuvent trouver des alliés 

• dans les équipes des navigateurs qui pourraient partager leur expérience au nom d'un meilleur web
• pourquoi pas chez Adobe vu le nombre de fois où flash est utilisé comme fallback ...
• et même avoir des représentants au W3C et au HTML working group, étant donné que le 1er contact des développeurs avec les nouvelles features passera d'abord par les librairies ...

Qui se lance ? :)

Veille techno et articles similaires via RSS, Twitter, Facebook (twitter + blog ou blog seul), identi.ca, Delicious, Mail

21/01/10: youtube tag video, UK data api, IE images aggrandies

• HTML5 : Youtube expérimente le tag <video>. Il faut d'abord aller sur cette page, cliquer sur le lien HTML5 beta en bas, puis on peut naviguer normalement sur youtube. Pas toutes les vidéos utilisent ce tag, et je n'en ai trouvé aucune en HD, mais l'affichage du player se fait bien sur en un temps record par rapport à flash. Seuls Chrome et Safari marchent pour le moment (support du h264 dans le tag video, à la place de ogg). Dailymotion avait fait de même il y a quelques temps et indiquaient que ce qui coûtait cher c'était le fait de stocker les vidéos en OGG ET en H264 (pour le flash player). Moins regardant envers les standards, Youtube a résolu le problème en n'envoyant que ce format propriétaire ... la balle est dans le camp des browsers maintenant et est idéologique : FF va t il supporter exclusivement le codec libre OGG avec <video> ou considérer que l'expérience utilisateur est + importante, implémenter h264, au risque de tuer le projet OGG ?
• API : le gouvernement anglais rend encore + de données publiquement accessibles, via des APIs, rejoignant ainsi le gouvernement US ou l'Australie. Voir ce mashup de Christian Heilman (évangéliste Yahoo!) pour une application concrète du genre de chose qu'on aimerait bien avoir en France.
• Sécurité : une analyse de plusieurs millions de login/password leakés montre les mot de passe ridiculement simples utilisés par les gens. 123456 venant en premier :) Cela dit, il aurait été plus intéressant d'avoir les mots de passe des comptes vraiment actifs. Dans une autre étude dont je ne retrouve pas le lien, les users admettaient utiliser 1 ou 2 mots de passe en tout et pour tout ! Les authentifications tierces sont vraiment les bienvenues
• Interface : une librairie de boutons assez bien faite et très modulaire (via @belhassi)
• Interface : 2 astuces avoir un meilleur effet sur les images aggrandies en HTML sous IE6 et IE7. Tant pis pour IE6, mais l'astuce IE7 est facile à implémenter, il suffit d'une ligne de CSS :
img { -ms-interpolation-mode: bicubic; }

20/01/10 : opera pub mobile, firebug 1.5, prototyper un site

• Business : Opera confirme sa spécialisation dans le mobile, en acquiérant une boîte qui fait de la pub sur mobile
• Outils : Firebug 1.5 est sorti. Grosse release au vu de la release note, à noter l'ajout de "break on next XHR" et "break on DOM change", idéaux pour tracker ce qu'il se passe dans une appli web, et un NetPanel qui affiche des temps + réalistes.
• Conception : prototyper un site avec du papier, un crayon et quelques astuces (via @belhassi)

19/01/10: emacscript 5, cout fichiers htc

vu hier sur le Net :

• Javascript : Emascript 5 a été voté. Etant donné l'implémentation chaotique dans les browsers, les librairies JS seront plus utiles que jamais. Pour aujourd'hui en tout cas ça signifie de meilleures perfs sur les grosses opérations JS dans les browsers qui implémentent :
  • Officialisation de JSON
  • manipulation de tableaux ( .foreach, .indexOf ...)
  • String.trim()
  • Manipulation des objets et classes
  • Pratique lors des développements : le strict mode. Ceux qui vont jusqu'à afficher les notices en PHP savent à quel point ça peut éviter des bugs ... et également comme cela peut être très verbeux
• Performances : ce que ça coûte de vouloir fixer IE avec des fichiers .htc (mécanisme IE qui permet de modifier le comportement du browser). Ca confirme les rares tests que j'avais fait avec des librairies qui ajoutaient des comportements CSS ou JS à IE via ces fichiers, comme le génial mais coûteux "IE7 par Dean Edward". Outre les freezes de browser, il y avait également un effet de redraw à retardement une fois que la page était chargée (via Christian Heilmann)

18/01/10: firebug net panel, facebook login, extension chrome

vu hier sur le web:

• Performances : un tuto sur le NetPanel de firebug, par son développeur principal, pour bien comprendre comment analyser les relations client/serveur en vue d'améliorer les performances. A noter que dans son post l'auteur utilise un script qui affiche la même chose que dans Firebug, et qui se base sur des datas issues de Firebug dans un format standard qu'il a co-écrit : HAR
• authentification tierce : des stats montrant la préférence des users pour le facebook login (plus de 50%), dixit un fournisseur de badge d'authentification. Malheureusement (ou pas, ça laisse une chance à openId) 50% n'est pas assez pour ne compter que lui, on se retrouve donc à devoir implémenter plusieurs méthodes.
• outils webdev : une liste d'extensions chrome pour développeur web, de quoi remplacer Firefox en attendant qu'ils soit plus rapide à lancer et que les extensions ne le freezent plus, ce qui est promis pour la version 3.6. Par contre je ne suis pas d'accord avec l'utilisation de plugins comme IE Tab : ça conforte les développeurs qui ne testent qu'avec une seule version d'IE. Pour couvrir tous les bugs, rien ne vaut 3 installations propres (sur des machines physiques ou virtuelles) des 3 versions d'IE
• Browser War : l'Allemagne, puis la France déconseillent l'utilisation de toutes les version d'Internet Explorer pour des raisons de sécurité. C'est une conséquence de l'affaire Google en Chine qui se serait fait pirater via une faille IE. Ca peu inciter quelques administrateurs de parc informatique de changer de browser, mais je doute que cela soit majeur.