Brain Cracking

RPW 29/04/10: Javascript russian dolls, WebSockets, CSS3 pour IE

Revue de Presse Web de hier :

• JS avancé : le principe des poupées russes en JS, qui consiste à définir une méthode, puis à la première exécution de celle-ci la ré-écrire pour faire exécuter moins de code la fois suivante. C'est élégant et ça tire parti de la versatilité de JS mais comme je l'ai fait remarquer à l'auteur du post, un bête système de caching (mettre la réponse de la fonction dans une variable privée ou une propriété de l'objet instancié) suffirait. Mais l'avantage c'est que ça utilise moins de mémoire et de CPU, au prix de la lisibilité.
• Browser War : annonce de Mozilla qui nous rappelle que les Web Sockets arriveront un jour dans FF, sans plus de précisions (probablement le 4). Comme beaucoup de features HTML5, la spec n'est pas finalisée et Mozilla rappelle que Chrome a d'ailleurs implémenté des versions déjà dépassées. Comme d'habitude, pour nous développeurs web, il vaut mieux passer par une librairie JS qui va faire abstraction de tous ces problèmes, et en plus nous fournir le fallback Flash. Après une petite recherche, la plus reconnue semble être web-socket-js.
• CSS3 : un listing très pratique des fallback CSS3 pour IE. La plupart passent par les filtres IE qui marchent depuis IE5.5+. Il n'y a jamais de complète correspondance entre CSS3 et ces techniques, il va donc falloir y aller au cas par cas : par exemple les background dégradés de IE se font forcément sur toute la hauteur/largeur de l'élément avec 2 couleurs, alors que CSS3 permet une gestion plus avancée. Rotation, dégradés, transparence, text-shadow, box-shadow et même coins arrondis sont potentiellement gérables. Par contre d'un point de vue performance, il faut faire attention aux filtres et aux .htc. (via @formeolibre)

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

RPW 28/04/10: usage des développeurs web, facebook et la vidéo, librairie Canvas, CSS cibler les webkit

Revue de Presse Web de hier :

• Video : Facebook a rendu ses vidéos compatibles iPad, non pas en utilisant <video> mais simplement en regardant la User-Agent String pour détecter la tablette et faire un lien direct vers le fichier .mp4 qui du coup se lance en plein écran. Un quick fix donc, alors que FB qui se paye pas mal de bons développeurs web aurait pu faire une solution mixant <video> et flash en fallback, quitte à rester sur du h264.
• Canvas : librairie JS d'accès à Canvas, nommée Burst Engine. La compatibilité IE n'est pas fournie. (via js4design)
• Développeurs : petite étude sur les développeurs Web (US pour la plupart). En terme de pratiques :
  • on voit que jQuery est la librairie la plus utilisée (80%!)
  • 60% des développeurs testent encore IE6 (mais 15% ne testent même pas IE7 et 8...)
  • seuls 30% optimisent leurs sites pour les mobiles (iphone en premier).
  • HTML5 et CSS3 sont arrivés en force, la graceful degradation ayant globalement remplacé le pixel-perfect. La property la plus utilisée est bien sur border-radius mais ce n'est pas encore le grand rush (50%).
  • En HTML5 seuls la géolocalisation et le stockage client-side ont un début de succès.
  • le doctype HTML5 a déjà été adopté par 10% des développeurs. Il faut dire que c'est rapide et indolore. XHTML reste le markup dominant (30%)
  • Flash et autres plugins sont encore + utilisés qu'avant, en particulier à cause de la vidéo, un peu moins pour des sites full-flash.
  • SVG et Canvas ne décollent pas vraiment, ainsi que ARIA et RDFa
  Du côté de l'équipement, FF est toujours en tête mais Chrome a gagné d'énormes parts de marché. MacOSx est l'OS de choix de la moitié des développeurs et la plupart utilisent un iPhone. (via Ajaxian)
• Browser War : je vous parlais hier de Account Manager sur FF, entre-temps est sorti le post officiel annonçant cette future feature. Il s'agit donc pour l'instant d'un addon plutôt expérimental qui permet d'afficher pour un site les différents couples login/pwd utilisés, d'en choisir un qui va lancer la procédure de login et d'afficher sous quel compte vous êtes logué. A terme ça gérera aussi le signup, le changement de mot de passe (on pourra changer de mot de passe sur tous ses sites d'un coup) ainsi que les identifiants type OpenId. Le bénéfice est grand pour l'utilisateur (à terme), l'implémentation n'est pas très compliquée mais la doc est assez obscure et comme on ne "voit" pas les erreurs, ça n'aide pas vraiment. Bref je l'ai tout de même implémenté, je vais essayer de faire un article dessus. En attendant vous pouvez le tester sur google.com (le site US) en ayant installé l'addon
• CSS : hack CSS pour cibler les webkit (safari desktop et iPhone, Chrome). Ca utilise les media queries et une règle propriétaire webkit (-webkit-min-device-pixel-ratio) donc ça peut être assez solide.

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

RPW 27/04/10: les logins tiers marchent bien, librairies JS de Maths, Chrome supporte WOFF

Revue de Presse Web de hier :

• API : article sur les "third party login", comme oAuth, openId et bien sur FB Connect. On y apprend que le nombre de logins par ce biais a doublé (en tout cas sur le réseau de JanRain, fournisseur d'une solution multi-login) et que Google tient encore tête à FB. D'un point de vue business, l'intérêt n'est plus seulement dans le fait de proposer à l'utilisateur de pouvoir se loguer sur un site sans créer de compte, l'objectif est maintenant d'essayer d'utiliser ces réseaux pour un peu + de viralité.
• Librairie : une librairie JS pour faire des maths, MathExt. Si vous vous lancez dans la 2D, ça peut vous servir.
• Standards : Chrome supportera aussi le format de police WOFF, format très adapté au Web car il est compressé (certaines polices peuvent prendre plusieurs Mo). Il rejoint ainsi Opéra, FF3.6+ et très probablement IE9. Encore mieux, c'est le fait que WOFF a été approuvé par de gros éditeurs de ce marché très particulier, ce ne sera donc pas un format de police mort-né. En toute logique les webkit d'Apple devraient suivre, reste donc à attendre que les parts de marché des anciens browsers descendent à des niveaux raisonnables ou alors négocier une graceful degradation avec son designer :) (via @alsacreations)
• Browser war : Mozilla planche sur la gestion des identités depuis le browser. Ce n'est encore qu'un projet, mais il permettrait à l'utilisateur de créer des comptes et de s'auto-loguer sur des sites, avec un jeu de plusieurs identités (on peut imaginer travail, perso et poubelle, ou une par membre de la famille ...). D'un point de vue utilisateur cela me semble idéal : la facilité d'un login tiers tout en gardant ses informations sur son disque (ou sur des serveur Mozilla ?), et ça se couple assez bien avec Weave et l'API Contact. Reste à espérer que cela n'entraînera pas de développement supplémentaire côté développeurs web et qu'ils se contenteront pour négocier avec nos sites d'utiliser des standards déjà existants comme OpenId ou OAuth. (via @guerrier)

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

RPW 26/04/10: cacher les fichiers statiques, CSS3 transition, annonce Firefox 4, jeux en JS

Revue de Presse Web de hier :

• perfs : 2 articles différents qui donnent des astuces sur la gestion du cache des fichiers statiques, en particulier pendant le développement. Pour rappel demander au browser de cacher les fichiers statiques (images, css, js) est la première et la plus efficace de toutes les méthodes pour accélérer le rendu d'un site. Dans ces 2 articles on vous conseille de générer des urls par rapport à la date de modification du fichier, ce qui peut être pratique pour un environnement de développement. En prod la méthode la plus efficace est d'avoir un numéro de version à inclure dans les urls, vous faîtes ainsi recharger le cache à chaque mise en prod. Dans tous les cas cela demande de maîtriser parfaitement la fabrication des urls sur l'ensemble de son site (pas de chemin en dur, même dans les CSS donc). (via @formeolibre et @programmateur)
• CSS3 : explication et démo de CSS3-transition, qui permet de faire des animations sans JS. Tous les exemples sont présentés avec :hover, mais cela marche aussi au changement de classe ou lorsqu'on modifie en JS la propriété d'un élément. Visible sur les webkit, le dernier Opéra ou sur le prochain FF mais ignoré même d'IE9. Cela dit ça "degrades gracefully" : si une petite animation entre 2 états n'est pas absolument nécessaire, vous pouvez déjà les introduire, la transition sera simplement ignorée. Sinon restez sur les librairies d'animation JS.
• Business : analyse complète en français sur les récentes annonces de Facebook et leurs conséquences pour les sites tiers. La bonne nouvelle c'est que le web sémantique est là, que le rêve du Single Sign On est là (avec FB connect) et que les utilisateurs peuvent enfin centraliser leurs infos à un endroit tout en ayant une chance d'avoir une expérience personnalisée un peu partout sur le Net. Mais c'est le même procès que l'on fait à Google : cela fait beaucoup trop de pouvoir dans une seule main.
• Business : le domaine des jeux sur browser en JS se professionnalise, grâce à une certaine maturité des développeurs, à l'explosion du casual gaming en général et à certaines librairies. (via @guerrier)
• Browser War : tranquillement, Mozilla annonce une version 4 de FF, pour dans plusieurs mois. Ce post est juste une annonce des annonces à venir :) En ce qui concerne les prochaines features de FF en général, j'avais fait un petit résumé d'infos glannées pendant une réunion Mozilla/webdevs.

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

RPW 23/04/10: bénéfices financiers de la performance, flexible box model, YQL pour accéder aux services Yahoo!, Google fait la critique de HTML5

Revue de Presse Web de hier :

• CSS3 : la flexible box model est une spec en cours d'écriture qui permet de construire des layouts entiers de page de manière beaucoup plus naturelle que ce que l'on fait aujourd'hui avec des divs qui float. Ce n'est pas supporté par IE, même pas la preview du 9 mais il y a certains avantages à connaître : indépendant de l'ordre de la source, centrages verticaux et horizontaux en plus de ce qu'on fait déjà aujourd'hui : taille relatives mixées avec tailles fixes, tailles min et max etc... Compatible avec les webkit (iPhone compris) et FF3+
• APIs : toutes les APIs Yahoo! vont privilégier YQL pour accéder à leurs données, uniformisant ainsi les interfaces de test de ces APIs et promouvant ainsi ce service de Yahoo! qui permet de faire assez rapidement des mashups avec beaucoup d'APIs autres que Y!
• HTML5 : critique contre HTML5 de la part de responsables de Google : pas prêt, plus cher que Flash ou Silverlight pour les RIAs et pas d'intégration avec Java ou .NET (je me demande dans quel contexte il se place pour celui ci). Et il y a toujours débat en interne pour savoir s'il faut préférer des applications natives ou HTML5 sur les mobiles. Google s'est toujours défini comme une boîte technologique, et non pas web, raison pour laquelle l'enthousiasme pour une techno qui n'est pas prête n'est pas de rigueur. C'est le pragmatisme et des raisons de coûts qui ont fait que Google Docs a jeté Gears au profit de HTML5, ainsi que le support pour IE6. Un choix stratégique global vers des applications natives plutôt que vers HTML5 serait un mauvais signe envoyé à l'ensemble de l'industrie informatique au moment où tous regardent vers les technos web.
• Perfs : combien rapportent de meilleures perfs ? réponse dans cette présentation avec 7 données chiffrées rendues publiques par des entreprises Web. De quoi vous aider à convaincre vos décideurs d'investir du temps dans un projet sérieux d'amélioration globale des perfs

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

RPW 22/04/10: changements Facebook Connect et plugins, encodage image base64 dans uri:

Revue de Presse Web de hier :

• CSS3 : je vous relatais dans une news précédente l'arrivée de iAd, régie pub d'Apple permettant de distribuer des pubs sur des applications iPhone/iPad prétendument en HTML5 (le buzzword, pas la techno). Dans la démo, on voit notamment un menu en 3D qui est une sorte de roulette. Un développeur a réussi à le reproduire ! Il s'agit donc d'un mix de CSS3 transition et d'effet propriétaire webkit (WebKitCSSMatrix), le tout dirigé bien sur par JS pour réagir aux events ontouch* propriétaires de l'iPhone. Bref dire que c'est du HTML5 me semble un peu capilotracté et au final non utilisable, mais ça reste joli et on peut tout de même saluer la performance de reverse-engineering (via Ajaxian)
• API : le facebook connect va changer en + pratique pour ceux qui l'ont implémenté car les sites vont pouvoir demander toutes les autorisations nécessaires en une seule fois, dès la première fois. Egalement à savoir il va changer de désignation et 100 millions de personnes l'utilisent. Infos trouvées dans une liste longue comme le bras d'annonces sur l'API FB.
• API : facebook sort une série de plugins JS pour les sites qui leur permettent d'utiliser des features FB (comme le "j'aime"), d'augmenter le taux de conversion (vos amis sont déjà sur ce site) et d'essayer de capter une partie du trafic de FB (commenter). Plugins mutuellement bénéficiables puisque pendant ce temps là FB reste le hub central par lequel informations et visiteurs passent. (via RWW)
• Perfs : implémentation et workaround IE pour la technique d'inclusion des images dans les CSS. Pour rappel la technique de base est d'encoder en base 64 les images et mettre la chaîne dans le champ uri: d'une règle CSS ou d'un tag <img src html, l'avantage immédiat étant la suppression de requêtes HTTP supplémentaires, le plus important des pas vers un site réactif. Technique certes intéressante mais rarement utilisée car elle n'est pas supportée par IE6/7, augmente le poids total des images de 30% et peut alourdir le HTML. Dans ce post, on voit un cas précis (la barre meebo) où cette technique a un intérêt (ne pas géner les sites sur lesquels la barre est distribuée), on y voit donc la complexité de la maintenance (réduite ensuite par le process de mise en prod qui recompile 6 CSS par version de la barre) et le workaround MHTML pour IE6-7.
• Perfs : nouvelle technique pour précharger ses JS et CSS, sans les exécuter. Ce qui pour JS sauve du CPU voir de l'accès au DOM et pour CSS évite que vos style ne soient appliqués sur la mauvaise page. On est clairement dans le hack et on n'évite pas la détection du browser IE donc c'est à tester précautionneusement sur tous les browsers, et à retester à chaque nouvelle sortie de version. Une autre technique pour obtenir le même résultat consiste à lancer une XHR sur vos ressources à précharger, les browsers jusqu'ici appliquant les mêmes règles de caching.

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

RPW 21/04/10: minifier et eval, bonne pratique JS cross-browser

Revue de Presse Web de hier :

• JS : aller encore plus loin dans la minification des JS. Des minifiers comme YUI Compressor, MS AJAX minifier ou Google Closure Compiler (voir cette comparaison, je vous recommande de rester sur le "vieux" YUI) vont beaucoup plus loin que simplement retirer les espace, ";" et autre retours à la ligne et modifient le code en raccourcissant le nom des variables locales par exemple. Ca a l'air dangereux dit comme ça mais à l'usage je n'ai jamais constaté de problèmes. Conséquemment il est recommandé de ne pas utiliser ou d'isoler dans une fonction l'usage de eval(), et with. Ce à quoi je rajouterais qu'il faut maîtriser la portée de ses variables avec var (voir mon article complet sur le JavaScript orienté Objet). (via matt snider)
• Code : rappel des bonnes pratiques concernant l'écriture de JS cross-browser. On y rappelle et démontre qu'il ne faut non pas détecter le browser mais le support de chaque feature indépendamment. Ceci sonne encore plus vrai ces derniers temps où l'on voit traîner sur les sites d'anciennes versions de FF, où IE8 est populaire et a fixé beaucoup des problèmes IE6/7 et qu'il a même un temps été en avance sur certaines features, où IE9 arrive et qu'il y a une pléthore de browsers mobiles/tablette qui peuvent utiliser votre site.(via matt snider)

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

RPW 20/04/10: gestion des tailles sur mobile, nouveau WebOS peppermint

Revue de Presse Web d'avant-hier (oui je suis en retard) :

• Mobile : une explication de la gestion des tailles en pixels sur les mobiles. Au contraire du desktop, les pixels physiques des mobiles ne correspondent pas aux pixel CSS, les mobiles faisant croire au browser qu'ils sont dans une certaine résolution pour que ceux ci calculent un viewport. Ce qu'il faut en retenir c'est qu'il y a peu de conséquences sur les développements CSS mais que les problèmes commencent lorsqu'on veut jouer avec les % (width: 20%). Selon le mobile, le % ne se fera pas sur la même largeur de viewport, il est donc recommendé d'en définir un via le tag <meta name="viewport" width="950"> (ou device-width si votre layout est fluide). Et il faut également éviter les media-queries qui jouent avec max-device-width, que certains utilisent déjà à contre-emploi pour cibler l'iPhone.
• Device : encore un nouveau WebOS, nommé Peppermint qui reprend le concept de Chrome OS avec des applications qui ne sont que Web. Sur une base Linux, le browser utilisé est FF, via le projet Mozilla Prism qui permet d'afficher une application web comme une application desktop. Un pas de plus vers un monde tourné sur des applicatifs avec des technos web

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

RPW 19/04/10: Perfs JS sur facebook, XAuth, pubs HTML5 et Flash, génération de CSS3

Revue de Presse Web de hier :

• Perfs : Facebook présente la manière d'organiser son code JS sur sa page pour obtenir de meilleures performances (passer de 5s avant le 1er clic à 2.5s). FB est maintenant plus une application Web qu'un site, donc leur nouvelle méthode ne pourra pas s'appliquer à tout le monde. Comme souvent lors d'une optimisation, cela passe par faire du code extrêmement léger et spécifique : par exemple ils ont pris le cas le plus commun sur la page qui est de cliquer sur un lien pour afficher un nouveau contenu, ont mis un petit listener en haut de page (le reste du JS étant téléchargé en bas de page) qui va chercher server-side l'action JS à exécuter ou le nouveau contenu. Résultat, au prix d'un coût en maintenance légèrement accru (ils se sont quand même fait un mini-framework pour gérer uniformément ces cas) l'utilisateur voit très rapidement son contenu et peut interagir immédiatement avec lui avant même que le reste du JS se charge.
• APIs : l'initiative XAuth permet à un site de savoir si un utilisateur est aussi utilisateur d'un autre site de réseau social (Google, Yahoo!, MySpace, meebo sont de la partie), ce qui est utile si vous proposez l'authentication tierce (OAuth, OpenId ...) car vous pouvez ainsi mettre en avant la méthode de connexion préférée de l'utilisateur. IE6 et IE7 (le tiers du marché) ne sont cependant pas supportés, et Facebook ne participe pas à cette initiative, mais même avec ces limites cela reste un nice-have pas très cher à implémenter (via readwriteweb)
• HTML5 : une startup a fabriqué un outil permettant de coder une publicité en Flash ET en HTML5 (buzzword qui ici signifie probablement Canvas ou SVG) et permet donc de toucher un public plus large (clairement on parle de l'iPad). Le marché de la pub cherche donc à s'adapter à un monde avec moins de Flash et on peut remercier Steve Jobs d'avoir lancé le buzzword HTML5 (au détriment de la spec). Bien sur comme tout transcoding, il doit y avoir pas mal de limites aux publicités qui peuvent être générées.
• CSS3 : compilation de 7 outils en ligne pour générer du CSS3. Si vous suivez ce blog, il y en a au moins 3 que vous devez déjà connaître, mais tous valent le coup au moins pour s'autoformer à certaines spécialités de CSS3. Le fait est que les développeurs web modernes ont laissé tombé les gros éditeurs de code type dreamweaver, mais que au vu des possibilités et de la complexité de CSS3, les éditeurs vont redevenir nécessaires pour générer facilement et visuellement tous ces nouveaux effets.

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

RPW 16/04/10: gmail et drag&drop, opéra mini pour iPhone critiqué, simulateur Opéra mini

Revue de Presse Web de hier :

• HTML5 : Gmail a implémenté le drag&drop de fichiers depuis le bureau, en HTML5. Ce n'est compatible qu'avec FF3.6+ et Chrome, mais c'est le premier site mainstream que je connaisse qui l'utilise, qui plus est de manière exclusive (pas de fallback avec une applet java). Si ça vous décide à faire de même, il y a l'excellente démo de Paul Rouget qui vous donnera de meilleures bases de code (via ajaxian)
• Browser War : avant hier je faisais le point sur Opéra Mini pour iPhone du point de vue des développeurs web mais je ne l'avais testé que sur mon site. Aujourd'hui d'autres critiques fusent concernant le rendu et l'ergonomie du browser lui même. Difficile de savoir si c'est Opéra et sa technique de compression qui cassent les rendus des sites, ou si ce sont ceux-ci qui ont développé des version spéciales pour Safari iPhone sans voir plus loin, mais dans les 2 cas c'est de la très mauvaise publicité pour Opéra Mini.
• Tests : le simulateur officiel d'Opéra mini, si vous n'avez pas d'iPhone pour tester votre site avec. Ca donne au moins le même rendu, ce qui suffit pour les tests, mais ça ne rend pas la navigation erratique au doigt.

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