WebDev's Digest - Juillet 2010

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

Comme d'hab, un petit récapitulatif de ce qui a retenu mon attention ces derniers temps.

HTML5, XHTML5, standardisation

XHTML5 dans une coquille de noisette. Ah ah, je sais que ça vous fait marrer l'humour bas de gamme :)

En gros le WHATWG nous dit que le XHTML tu peux en faire mais c'est toujours de la merde, et que HTML c'est le futur (interprétation libre des propos de l'auteur par votre serviteur) :

I would say that the main advantage of using XHTML5 would be the ability to extend HTML5 to XML-based technologies such as SVG and MathML. The disadvantage is the lack of Internet Explorer support, more verbose code, and error handling. Unless we need that extensibility, HTML5 is the way to go.

<humour>Mieux vaut se fier à la propagande du WHATWG et passer le rite initiatique pour intégrer... le gang HTML5</humour>

Et de l'humour il en faut : Growing pains afflict HTML5 standardization. Les enfantillages semblent continuer mais nous n'en sommes pas encore au stade des simagrées de l'Assemblée nationale, il y a de la marge.

@font-face

Google fonts : tests de lisibilité est un article long qui m'a permis de mettre un nom sur un concept : le font hinting. La conclusion de l'auteur à propos du rendu des polices affichées via la Google Font "API" : c’est très mauvais sur windows dans des petits corps.

Si vous voulez tester vous même en vous prenant moins la tête, vous pouvez utiliser le Font Preview.

A réserver donc pour des éléments de titres, si toutefois vous kiffez le sniffing à l'ancienne, si tous les navigateurs que vous ciblez sont supportés, et si certaines considérations techniques ne vous posent pas de problèmes outre mesure.

A noter également (ou pas) un article plutôt fumeux sur le rendu du texte dans le futur IE9, on ne sait pas trop si ça concerne uniquement du texte affiché via Canvas, ni quelle plate-forme bénéficiera de ces améliorations... bloguer pour ne rien dire.

Si après ça vous avez encore du temps à perdre, je ne saurai trop vous conseiller la lecture de "Web fonts" or "Webfonts"?, ah ah, lol.

<video> et <audio>

Il y a encore du chemin à parcourir avant de pouvoir utiliser la balise <video> dans tous les navigateurs. Non seulement cette balise n'est pas supportée nativement par tout le monde, mais il n'y a toujours pas de consensus autour d'un codec.

Dans l'attente d'une telle éventualité, les esprits s'affairent pour trouver des solutions. Simple Cross-Browser HTML5 video with a single H.264 file and fallback options est le billet précurseur de mediaelement.js.

Au prix de quelques lignes de javascript (et de la mention d'un employeur chelou dans le README) vous pourrez utiliser la balise <video> et la balise <audio> comme si elles étaient disponibles partout, avec un fallback en Flash et en Silverlight (aoutch !!). Vous pourrez aussi bénéficier d'un player identique sur tous les navigateurs. Le gros avantage est qu'il suffit d'encoder la video avec un seul codec (H.264 au hasard) contrairement à l'autre solution. Un autre avantage de cette solution est qu'elle fonctionne avec Mobile Safari.

Pas de quoi fouetter un Flash me direz-vous, et vous avez sans doute raison : Flash and the HTML5 <video> tag, l'avis de YouTube.

CSS3

Supersize that Background, Please! J'adore le titre ! Cet article fait le point sur la propriété background-size d'un module CSS3 toujours à l'état de Working Draft. Cette propriété permet d'utiliser des grosses images en arrière plan qui restent à l'échelle en cas de resize de la fenêtre du navigateur par exemple. C'est franchement cool et ça permet d'éviter les gruikeries actuelles permettant de conserver un arrière plan à l'échelle. En fait on ne peut pas encore l'utiliser. Cependant c'est toujours sympa d'avoir un avant goût du futur, lol.

Responsive Web Design est une introduction pratique au concept de media query. C'est utile pour cibler un certain type d'appareil, comme un iPad. Zut, j'ai écrit le mot interdit, j'espère qu'il n'y a pas de connard libriste intégriste parmis mes lecteurs :D

JavaScript

JS Libs Deconstructed est un lien sympa pour ceux qui aiment regarder sous le capot des librairies JavaScript les plus utilisées : jQuery, Prototype et MooTools. C'est bien foutu et agréable à consulter.

Dragdealer JS est un petit bout de JavaScript excellent qui permet d'intégrer des sliders facilement et plus globalement presque n'importe quoi à base de glisser (mais pas que) et qui laisse une tonne de possibilités dans la façon de l'utiliser, notamment avec des callbacks.

Et pour finir si vous aimez lire du joli code, je vous conseille de jeter un œil à canto.js, par David Flanagan (ce nom devrait vous dire quelque chose).

Avant Coupe du Monde 2010 Après HTML5 digest - Novembre 2010

Tag Kemar Joint