Brain Cracking

RPW 25/02/10: syntax highlighter firebug, les fonctions javascript, benchmark HipHop PHP, bonnes pratiques javascript

Revue de Presse Web de hier :

• Outils : un syntax highlighter pour firebug, pour mieux y voir lorsqu'on debug son JS. Testé et approuvé : pas de ralentissement notoire ou de bug (via DailyJS)
• JS : Un cours par Douglas Crockford sur les fonction en JavaScript. JS n'est franchement pas intuitif, surtout pour ceux qui ont un background PHP (ou même java). Pour aller loin, il faut parfois s'enfoncer un peu dans la théorie et les fonctions et le scope sont la clé de la compréhension. Je vous prépare un article plus concret pour faire partir un projet et une équipe sur de bonnes bases.
• Perfs : une série de petits benchmarks PHP : foreach() 4 fois plus lent que for(), print = echo, le passage par référence (&), double quote = simple quote et bien sur toujours sortir un count() de la condition d'une boucle (valable aussi en JS).
• HipHop PHP : enfin un benchmark, comparé avec des solutions déjà existantes. La conclusion est que si votre environnement est exigeant, HipHop est effectivement très efficace, mais en l'état actuel des choses il n'est pas facilement compilable sur tous les Unix (normal, il n'a été validé que chez FaceBook jusqu'ici)
• JS : les bonne pratiques pour le développement d'application web solides et maintenables. Tout y passe : éviter les globales, tester les features plutôt que les browsers, utiliser à bon escient JS CSS et HTML ...

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)

RPW 24/02/10: tableau support CSS3, perfs manipulation DOM, tuto CSS3 transitions, prefetch DNS

Revue de Presse Web de hier :

• Outils : un tableau de support par browser des propriétés CSS3. Cette développeuse fait un travail assez impressionnant, qui rappelle voire remplace celui que faisait quirksmode. Ce dernier ayant arretté ce genre de tableau comparatif pour se concentrer sur les browser mobiles, il faut donc bien trouver des sources d'information ailleurs. Cela dit, devant la somme de nouvelles informations à avaler, sachant que les IE ne bougeront pas et que les browsers modernes les implémenteront au fur et à mesure, il vaut mieux continuer à développer en progressive enhancement ou rester sur les vieilles techniques CSS2 (la partie supportée par IE6)
• Perfs : un article expliquant le reflow et le repaint des browsers (via @formeolibre) , avec des conseils pratiques pour ne pas tuer les browsers lors des manipulations du DOM (qui sont en général ce qui demandent le plus de ressources, et qui peuvent freezer l'interface) :
  • Manipuler des classes plutôt que des propriétés CSS (impossible dans le cas d'animations)
  • manipuler .cssText plutôt que chaque propriété individuellement (en général les animations sont confiées à une librairie type jQuery ou YUI, il faut donc espérer que c'est ce qu'ils utilisent)
  • sortir du DOM l'élément qu'on manipule : documentFragment (que j'utilise souvent), clone de Node, display:none
  • éviter de demander directement les propriétés d'un node si on le connaît déjà, surtout dans les boucles, car ça oblige le browser à exécuter un repaint pour vous donner la valeur exacte
  • Pour ceux qui veulent aller plus loin, il y a SpeedTracer pour Chrome et DynaTrace pour IE
• CSS3 : tuto pas à pas sur les transitions CSS3. Bon à voir pour l'auto-formation, elles restent tout de même pénibles à implémenter car il faut écrire 4 fois la même propriété avec 3 préfixes différents, tout en sachant que la moitié du marché (les IEs) va ignorer ces effets. Il faut du coup maintenir 2 version différentes et garder cela pour de petits effets visuels d'embellissement (car il ne faut pas que l'interface en dépende).
• Perfs : demander au browser à l'avance de faire des résolutions DNS. Un peu extrême, cette technique s'applique à FF et Chrome (40% du marché) et peut servir à certains sites qui utilisent beaucoup de noms de domaines différents. Ca peut être le cas pour ceux qui stockent les JS/CSS (qui bloquent le rendu de la page tant qu'ils ne sont pas là) des clients Akamaï ou des sites qui utilisent plusieurs noms de domaines pour jouer un maximum sur la parallélisation des téléchargements. (via paul rouget)

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)

RPW 23/02/10: google et les codecs vidéo, Flash sur nexus One, HTML5 local storage, youtube abandonne IE6

Revue de Presse Web de hier :

• Video : le résumé de la guerre des codecs vidéo par "Le Monde". Google a acquis une boîte qui fabrique des codecs. A partir de là, Google a la puissance (machines, ingénieurs et scientifiques) pour en faire le meilleur codec vidéo de streaming, et l'intérêt financier pour l'utiliser sur le plus gros site de partage de vidéo au monde, sans avoir à payer des royalties au groupe h.264. Toute la question est de savoir si ils vont l'ouvrir afin que les browsers comme Firefox puissent par exemple lire en natif les vidéos Youtube, ou si ils vont capitaliser sur cette acquisition et le développement du codec, qui l'un dans l'autre coûtent tout de même des centaines de millions de dollars. Pour ma part je pencherais pour la première solution, Google ayant les reins suffisamment solides pour supporter ce coût et voir à plus long terme (via @pobo).
• Flash : un essai pas très convaincant de Flash sur Nexus One. Ce ne sont pas les performances pures qui sont mises en cause, mais le fait que l'application testée, qui vient des browsers, était quasi impraticable à manipuler au doigt sur un petit écran. C'est ce genre de détail qui relativise les annonces d'Adobe au sujet de son outil d'export sur iPhone : comme pour le web les applications sont rarement exportables sans adaptation spécifique au format.
• Utilisabilité : le point de vue d'un développeur Flash sur pourquoi il n'est pas possible d'avoir Flash sur des écrans tactiles. Ce serait tout simplement car l'event onmouseover ne peut pas exister sur écran tactile, et que la plupart des applications (y compris les players vidéo) l'utilisent, et donc des gens comme Apple préfèrent supprimer la fonctionnalité plutôt que de la proposer en sachant qu'elle entraînera des frustrations. En fait ça n'est plus le seul problème des applis Flash, il y a beaucoup de sites qui utilisent onmouseover pour révéler du contenu ou des liens, qui seront du coup inaccessibles pour ces clients. J'ajoute que le même problème existe pour les scrolls à l'intérieur des pages, sur des overflow: scroll. (via Ajaxian)
• Outils : une librairie d'accès à HTML5 LocalStorage, compatible tous browsers. Pour rappel locaStorage agit comme un super cookie et permet de stocker beaucoup plus de clés/valeurs. Basé sur YUI3, c'est la version dite light de l'officiel YUI Storage qui offre un peu plus d'options et se basait sur GEARS ou Flash en fallback. Le fallback pour IE se base sur User data persistence, encore une techno IE innovante complètement inconnue. Rien n'est dit sur les limites, il faut donc la tester pour vérifier si les datas sont persistentes, et la taille limite autorisée par chacun des browsers. En tout cas en 2.6Ko de code, ça peut valoir le coup.
• Browser War : Youtube va abandonner le support d'IE6, et affiche d'hors et déjà un écran invitant les utilisateurs à abandonner ce browser. Je pense que cela n'aura pas plus d'impact que la décision de Facebook de faire de même l'été dernier. Malgré ses 250 millions de comptes de l'époque (400 millions aujourd'hui), on n'a pas vu la part de marché d'IE6 baisser plus fortement à cette occasion, ce qui peut s'expliquer par le fait qu'IE6 est surtout présent en entreprise et que Facebook et parfois Youtube y sont souvent bannis. Ces 2 sites doivent donc avoir une proportion d'IE6 plus faible que la moyenne.

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)

RPW 22/02/10: sources hiphop php, windows ballot screen, google abandonne gears, transparence position fixed et performances

Revue de Presse Web de hier :

• PHP : HipHop PHP a enfin sorti ses sources ce Week end (voir ma note sur le rappel des limites et les promesses). Facebook avait beaucoup fait parler de cette adaptation pour PHP il y a 3 semaines, la communauté va maintenant pouvoir juger sur pièce des performances en dehors de l'architecture de FB.
• Perfs : une courte étude sur l'utilisation d'un élément en position:fixed, transparent, faite grâce au magique Chrome Speed Tracer qui track l'utilisation CPU du rendering de ce browser. La combinaison des 2 prend énormément de CPU, ce qui peut donner des effets de freeze avec le browser, et ce à chaque scroll. Il est fortement probable que cela s'applique à d'autres moteur de rendu que le seul Webkit. (via @formeolibre)
• Outils : Google annonce l'abandon progressif du support de GEARS, ce qui confirme ce qu'ils avaient annoncé en novembre dernier. Google continue de montrer qu'il se tourne désormais complètement vers HTML5. C'est tant mieux pour le web dans son ensemble et tant pis pour le peu de développeurs qui avaient commencé à faire installer GEARS comme plugin embarqué.
• Browser War : windows proposera des navigateurs alternatifs, au prochain patch européen (ce mercredi ?). Suite à la condamnation possible par l'Europe pour situation de monopole, MS a préféré éviter l'amende. L'importance de la baisse de la part de marché d'IE en Europe sera à mon avis complètement dépendante de l'interface pour l'utilisateur final. Dans cet article il y a 2 screenshots qui montrent qu'elle a l'air assez claire. A mon avis les 2 seuls bénéficiaires seront Chrome (la "marque" Google rassure) et IE8 (l'icône est connue). Voir également un autre avis sur les bénéficiaires de cet écran.

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)

RPW 19/02/10: réseaux sociaux sur mobile, google API certification, IE6 et les PNGs transparents

Revue de Presse Web de vendredi dernier :

• Mobile : les utilisateurs de l'internet mobile sont plus enclins à utiliser un réseau social que lorsqu'ils sont sur leur desktop. C'est une étude US, mais en regardant un peu autour de soi et en excluant l'entourage geek, ça sonne très vrai en France aussi, même en dehors d'une utilisation nomade dans les transports en commun de la région parisienne. La raison principale en serait la facilité : les utilisateurs vont sortir leur portable et mettre à jour leur statut FB plutôt que de démarrer l'ordinateur familial. Sur ce blog je vais finir par me répéter, mais je crois vraiment qu'un user aujourd'hui peut très bien commencer sa navigation au boulot sur un IE6, continuer sur son safari mobile et finir sur un FF à la maison.
• API : Google a un programme de certification (gratuit) pour les développeurs qui utilisent ses APIs, qui les autorise à afficher le logo de cette certif et leur permet d'être listé dans un annuaire. Développer avec des APIs tierces fait partie de la nouvelle spécialisation des métiers du web. Le seul intérêt est bien entendu de valoriser son CV, reste à savoir si tous les employeurs potentiels reconnaîtront cette certif.
• Intégration : rappel sur IE6 et la gestion des pngs transparents. Pour résumer : Photoshop n'aide pas du tout, il faut donc faire passer votre graphiste à un autre outil pour vous générer vos fonds. PNG8 est la meilleure des solutions, mais il faut prendre en compte ces limitations (256 couleurs).

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)

RPW 18/02/10: éditeur de code en ligne, safari ipad console, effet quicksand en jquery, trick CSS pour faire des flèches

Revue de Presse Web de hier :

• Outils : des éditeurs de code en ligne : aucun d'eux n'est réellement prêt pour commencer à travailler demain avec, mais pour le thème de ce blog ils présentent un double intérêt : d'abord ce sont des outils potentiels que certaines équipes finiront peut être par utiliser, et ensuite parce qu'on est exactement dans le cas d'une application Web qui cherche à remplacer celle du desktop qui requiérent un niveau technique impressionnant.
• Browser : le safari de l'iPad embarquera une console de debug JS (vidéo). En théorie le moteur de rendu et le moteur JS devraient être les mêmes que pour Safari Mac (mais pas tout le monde a un mac sous la main), et le rendu devrait être très proche de Chrome qui utilise aussi webkit, donc même en supposant que l'iPad prenne plus de 5% de part de marché demain, il ne devrait pas y avoir besoin de spécifiquement tester ce browser. Mais au cas où, une console sera toujours utile :)
• Script : un plugin jQuery pour animer des effets de transition entre 2 états d'une liste HTML, lors d'un sorting JS par exemple. (via Ajaxian)
• CSS : faire des flèches en pur CSS, sans images, juste en utilisant les border. C'est un peu moins souple que pour les images, mais ça peut être intéressant. La page de démo ne marche pas sous IE6 et pourtant il donne un trick pour ce browser. A valider donc. (via @BenjaminRezzak)

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)

RPW 17/02/10: optimisation server-side, quels navigateurs supporter, salaires intégrateurs

Revue de Presse Web de hier :

• Performances : une longue checklist pour l'optimisation server-side, en PHP. On y rappelle l'essentiel : les problèmes de performance se règlent en commençant par les plus gros points, à savoir en général le réseau, les accès disque, bref tout ce qui gravite autour du script lui même. Et qu'il n'y a pas plus optimisé qu'un système de cache (quand l'applicatif le permet) qui évite de calculer plusieurs fois la même chose (via @formeolibre)
• Browser War : le tableau des browsers à supporter, mis à jour tous les 3 mois par l'équipe Yahoo!, c'est une bonne référence lorsqu'on se demande sur quels browsers tester son application Web. On note l'introduction de Chrome et la disparition d'Opéra. Egalement à noter : ils n'ont jamais constaté de différence entre la même version d'IE sur XP ou sur Vista (moi non plus).
• Emploi : dans cet article parlant des salaires dans l'informatique, on nous explique que les intégrateurs sont des profils très recherchés ... payés entre 22K et 35K. Ces niveaux de salaire montrent quand même qu'en France ce métier est certes demandé mais dévalorisé. On compte sur la passion des profils junior pour se casser les dents à pas cher et sans formation sur de l'intégration, alors que c'est un métier qui demande pas mal d'expérience (si on veut supporter IE6 et 7), de l'organisation (si on maintient de très gros sites) et pas mal de connaissances (si on veut faire accessible). Bref c'est un métier qui demande à tout le moins le support d'un profil senior pour former les nouveaux arrivants, mais il n'y a guère que chez Yahoo! que j'ai vu qu'on prenait tout cela au sérieux. (via @integrateur_css)

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)

RPW 16/02/10: comparatif frameworks javascript, tableau de support HTML5, l'histoire d'IE6

Revue de Presse Web d'hier :

• Outils : IBM a fait une étude approfondie, comprenant notamment un tableau comparatif des frameworks JS, qui peut aider à prendre une décision avant de commencer un projet. Objectivement, les features de base (events, jouer avec le DOM, XHR ...) sont de qualité égale chez toutes ces librairies, c'est donc le nombre de widgets proposés qui fait la différence. A ce jeu là, ExtJS (payant) et YUI2 (gratuit) ressortent nettement. Ce n'est pas dit mais d'après mes propres tests, la feature querySelector est la plus rapide chez ExtJS, tous browser confondus. (via @formeolibre)
• Browser War : une table de compatibilité des features HTML5 et CSS3, peut être un peu plus manipulable que celle-ci repérée il y a une semaine. En prime on a des conclusions quand à leur utilisation immédiate, qui se résume souvent à "attendre la fin de vie de IE6". Comme la précédente, autant mettre en bookmark cette page et s'abonner au RSS, en espérant que la maintenance soit assurée (via @formeolibre)
• Browser War : un post prédisant le déclin de FF, et qui souligne ses défauts (lenteur, instabilité) tous corrigés par Chrome. L'auteur pense qu'à ce titre Chrome va arretter la progression de FF dans les parts de marché, et progressivement le remplacer. La conclusion me semble un peu tranchée, mais les arguments sont parfaitement valables en dehors du grand public, d'autant que même chez les développeurs Web, Chrome peut déjà remplacer avantageusement Firebug (voir SpeedTracer et les outils pour développeurs en natif)
• Culture générale : l'histoire en BD d'IE6, où comment passer de 80% de part de marché à la situation actuelle. Pour répondre à la question qu'il se pose "faut il encore supporter IE6 ?", la réponse est OUI si vous avez plus de 5% d'utilisateur sur votre site qui l'utilise encore. Dans ce cas, inutile de viser le pixel perfect mais il faut tout de même que le site soit 100% utilisable.
• Business : une startup propose de sauvegarder vos données online (photos flickr, tweets, données facebook ...) et de stocker le tout ... online aussi. Je ne couvre pas souvent les actus business, mais celle là est quand même représentative d'un monde "tout online" dans lequel nous entrons à grand pas.

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)

15/02/10: menu accessible, namespace PHP 5.3, flash sur mobile, Opéra implémente OGG, pièges javascript

Vu vendredi sur le Net : 

• Accessibilité : YUI sort une démo d'un menu accessible avec rôles ARIA et accès au clavier
• PHP : tuto sur les namespace PHP, dispo depuis 5.3 et qui seront utilisés en PHP6.
• Flash : au niveau business, dans leur dernière press release, Adobe met l'accent sur ses compétences en applicatif mobile (iPhone compris) et en particulier sur l'idée du "write once, run everywhere". Ils oublient de rappeler que seules les applications basiques qui ne dépendent pas d'API spécifiques peuvent être exportables facilement sur plusieurs plateformes. Ils donnent d'ailleurs toujours l'exemple des casual games qui n'ont effectivement pas besoin d'autre chose que de l'écran, des contrôles et d'un peu de puissance.
• JS : un site humoristique sur les pièges classiques de javascript. Des illogismes de ce genre 

  alert(111111111111111111111); // alerts 111111111111111110000 
  0.1 + 0.2 === 0.3 // false

  Chacune a une explication qui tient à la nature de JS, mais que bien peu de personnes au monde connaissent. Pour une liste plus utile et sérieuse de ce langage, voir ces slides (à partir du #14)
• Video : Opéra a décidé d'implémenter OGG dans son tag <video>, il n'est rien dit sur h.264 mais à la vue de ce que cela coûte, ils ont du faire l'impasse. Par ailleurs l'article fait un très bon résumé, assez impartial de la situation de la vidéo aujourd'hui :
  • continuer à utiliser flash en fallback
  • réaliste sur le coût pour les fournisseurs de vidéo de double-encoder leur contenu
  • un progrès pour l'accessibilité (au clavier du moins)
  • skin possible en css et via canvas
  • même sans JS la vidéo et ses contrôles marcheront

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)

12/02/10: perf rendu CSS print, tableau du support HTML5 des browsers, librairie JS pour jeu

Vu vendredi sur le Net : 

• Perfs : une nouvelle règle découverte par l'inventeur original des règles de performances Web : les browsers bloquent tout rendering tant que la feuille de style n'est pas là (ça on le savait) mais les IEs attendent même les feuilles de type media=print. Le conseil est donc de les inclure dynamiquement après le onload de la page, pour ne pas pénaliser les utilisateurs de ce browser.
• HTML5 : un tableau des features HTML5 supportées par les browsers. Il a été créé par un étudiant puis mis à jour par un autre, il est donc difficile de savoir si ce tableau sera maintenu systématiquement dans le temps. Par contre si c'est le cas, il y a un fil RSS auquel s'abonner (via @FormeOlibre)
• Outils : une librairie JS spécialisée dans le jeu. Pour rappel en décembre dernier je vous parlais d'une autre librairie tout aussi spécialisée, et à priori mieux fournie : effectgames, qui assurait de très beaux effets, y compris sur IE6, et proposait également toute une palette d'algo typique des jeux comme le tour par tour, du pathfinding et la gestion des collisions (via @programmateur)

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)