Hanblog

WebForms HTML5 et iPhone

Anthony Ricaud — Fri, 15 Jan 2010 20:36:00 +0100

Mark Pilgrim, génial auteur, vient juste de publier son chapitre sur les nouveautés qu'apporte HTML5 pour les formulaires. Évidemment, c'est une lecture indispensable. Je mettrais un petit bémol sur tout l'aspect validation de formulaires qu'il n'aborde pas et qui est pourtant une grande amélioration.

Un des intérêts immédiat est l'adaptation de l'iPhone aux nouveaux types de champs. Pour avoir un exemple plus concret, j'ai préparé un petit exemple et quelques captures d'écran. Apple propose aussi une documentation de ces changements de clavier.

Placeholder

<input type="text" placeholder="webforms roxor">
Une aide s'affiche lorsqu'aucun texte n'a été entré et disparait automatiquement.

Téléphone

<input type="tel">
Le clavier s'adapte à la saisie d'un numéro de téléphone. Il est dommage qu'un accès au répertoire ne soit pas proposé. Espérons dans une prochaine version.

Url

<input type="url">
Le clavier s'adapte à la saisie d'une URL. Un accès aux favoris aurait pu être intéressant.

Email

<input type="email">
Le clavier s'adapte à la saisie d'un email. Un accès au répertoire aurait aussi pu être intéressant.

Nombre

<input type="number">
Le clavier s'adapte à la saisie d'un nombre.

Nombre entier

<input type="text" pattern="[0-9]*">
Le clavier s'adapte à la saisie d'un nombre entier. Vous remarquerez la différence avec la saisie d'un nombre plus général. Par contre, on ne peut pas écrire <input type="number" pattern="[0-9]*"> car l'attribut pattern n'est pas disponible sur un champ number.

Utiliser ces quelques nouveaux types ne coute rien puisque les navigateurs ne comprenant pas les nouveaux types afficheront un simple champ texte. Mais quel bénéfice pour les utilisateurs de périphériques adaptés. Opera implémente une précédente version des Webforms et comprend donc une partie de ces champs. Je n'ai jamais vu comment Opera traitait ces champs sur un mobile par contre.

Connaissez-vous d'autres navigateurs ou périphériques comprenant déjà ces nouveautés ?

Abandonnons IE6, si possible

Anthony Ricaud — Wed, 23 Dec 2009 13:58:00 +0100

Ce sont les fêtes de fin d'année, une bonne période pour prendre du recul sur les choses. Par exemple, le fameux "j'en ai marre de IE6, ça me pourrit la vie". On va donc voir pourquoi on peut déjà l'abandonner, ce qu'on y gagne techniquement et peut-être financièrement.

Pourquoi c'est possible ?

La réflexion a commencé la semaine dernière sur Twitter (enfin sur Identi.ca). Ma réponse à ce cri de détresse était de faire un simple calcul que chaque société devrait faire :

Si l'argent que vous rapporte les utilisateurs de IE6 est inférieur à l'argent que vous investissez pour les avoir, alors oubliez IE6 et vous pourrez passer plus de temps à avoir un site plus agréable pour les autres utilisateurs.

Votre chiffre d'affaires sera inférieur, puisque vous perdez des clients (et encore, pas sur). Mais votre bénéfice augmentera. Bon, je ne vais pas vous expliquer comment calculer la rentabilité de votre entreprise, je n'en suis pas capable mais vous voyez l'idée.

Évidemment, je ne demande pas à tout le monde d'abandonner IE6 ^[1] , seulement si cela vous avantage. Mais réfléchissez, prenons un exemple vague : 20% du temps d'intégration consacré à IE6, 10% de visiteurs sous IE6 qui ne sont pas ceux ayant le meilleur taux de transformation en plus. Est-ce que ça ne vaudrait pas le coup de se passer de tout ça ?

Si vous décidez de passer le cap, n'expulsez pas les utilisateurs sous IE6. Les deux options à envisager sont :

Proposer une CSS très simplifiée pour IE6 afin d'avoir un style global portant vos couleurs, mais pas plus.
Fournir le même code mais en prévenant que vous n'avez pas tester et que ça peut péter à tout moment.

Et en complément, proposez d'autres navigateurs pour leur permettre d'avoir une expérience correcte.

Techniquement, qu'est-ce qu'on y gagne ?

Transparence alpha sur les PNG

IE6 ne supporte pas la transparence alpha sur les PNG. Il affiche un fond gris immonde pour les PNG24 ou considère tous les pixels avec un canal alpha comme transparents pour les PNG8. On a donc recours aux horribles filtres IE, immaintenables et lourds en performance. Et encore, ils ne sont utilisables que pour des backgrounds.

À partir de IE7, plus de problèmes, on utilise les PNG que l'on veut, où on veut, roulez jeunesse ! Et cette transparence est très utile pour des ombres, des dégradés, s'adapter à vos différentes couleurs, etc.

Une palette étendue de sélecteurs

Avec ces sélecteurs étendus, on évite beaucoup de trifouillages de HTML. Par exemple, plus besoin de classes spéciales pour sélectionner input[type=submit] ou html[dir=rtl] grâce aux sélecteurs d'attributs. Vous pouvez aussi cibler le premier enfant avec :first-child.

Plus de contrôle aussi grâce au sélecteur adjacent (h1+p) ou au sélecteur enfant (body>div). Pour illustrer une image avec légende, vous pourrez utiliser des sélecteurs simples tels .legend > img et .legend > img + p.

Et mon préféré, les classes multiples. Pouvoir identifier un élément grâce à .menu.active est très pratique. Pas besoin d'ajouter un élément englobant pour contourner cette absence de IE6.

Position fixe et background fixe

Peu de sites s'en servent mais ça peut-être bien utile. Pour avoir une interface toujours sous l'œil de l'utilisateur par exemple. Ou encore avoir une entête de liste toujours visible. C'est une possibilité de design sous utilisée, donc à vos claviers.

:hover partout

Avec IE6, :hover ne fonctionnait que sur les balises <a>. L'avoir sur tous les éléments vous permet de mettre en avant des parties de votre interface au fur et à mesure.

min- max-width et min- max-height

Des design un peu plus souples grâce à cela. Je me rappelle en avoir souvent eu besoin pour dimensionner correctement des images uploadées par les utilisateurs.

De meilleures performances

Vous êtes assurés d'avoir des visiteurs avec un navigateur plus performant. Du coup, vous pouvez utiliser des techniques plus lourdes sans que ça pose problème. Par exemple, IE7 ne passe plus par un ActiveX pour faire des XHR/Ajax.

Moins de bugs !

C'est certainement une des parties les plus intéressantes. Moins de temps à se prendre la tête, moins de temps en QA, moins de machines pour tester.

Avec cela, vous pouvez apporter un site de meilleure qualité, plus léger pour vos visiteurs, plus léger pour votre bande passante et beaucoup plus facile à faire évoluer pour vos développeurs.

Et en plus, on peut gagner plus !

Si vous abandonnez IE6, je vous conseille de communiquer sur cet abandon. Pourquoi ? Je suis persuadé que les technophiles tombant sur votre communication anti-IE6 la relaieront. Il y a une telle haine de IE6 chez les gens passionnés d'Internet que vous en ferez peut-être des clients ou alors juste des relais d'informations. En tout cas, c'est la communication la moins chère du monde, puisqu'en développant moins de code, vous augmenterez votre visibilité.

Le mot final : envisagez sérieusement de ne plus développer pour IE6 en vous appuyant sur des chiffres. Si votre contexte vous permet l'abandon de IE6, vous rendrez service à vous même, vos pairs et vos utilisateurs.

Notes

[1] même si ce serait sacrément le pied

WebKit's week - #10

Anthony Ricaud — Sun, 15 Nov 2009 23:37:00 +0100

Week from May 25 to June 7 (before r44490). To test those changes, you'll need a WebKit nightly.

Smarter border-radius (44235)

You all know border-radius. And you enjoy using it. Before this change, if the radius was longer than some metrics (eg. half the width of the element), then it's set to zero and there are no rounded corners. Since then, WebKit follow the latest rules of the spec and will reduce the radius to the max possible value.

Multiple corrections according to specs (44293, 44298, 44301, 44302, 44360, 44475, 44481)

A lot of events weren't dispatched to the window object, unlike what the spec says. Zou, fixed. In addition, some storage events needed a storageArea event giving access to the modified storage area. Those are small but necessary fixes.

Locking the anchor in view while loading

Between the moment when a page starts to render and when it's fully loaded, a lot of resources can modify the layout of a page. Therefore, the position of an anchor can change. Before this change, the browser stayed at the initial position of the anchor. Now, if the user doesn't scroll, the anchor will stay in the view.

Web Inspector's panel activation

The Resources, Network and Profiles panels all have an activation page. This activation page are here to not affect the performances of the pages when they are not needed.

This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #10

Anthony Ricaud — Tue, 03 Nov 2009 19:02:00 +0100

Semaine du 25 au 7 juin (avant r44490). Pour tester ces nouveautés, vous aurez besoin d'une nightly WebKit.

Border-radius plus intelligent (44235)

Vous connaissez tous border-radius évidemment. Et vous adorez cette superbe propriété ? Avant ce changement, lorsque les rayons définis dépassaient certaines longueurs (par exemple la moitié de la largeur), le rayon était remis à zéro et il n'y avait pas de bord arrondi. Depuis, WebKit suit les règles de la spec et réduira le rayon si nécessaire.

Multiples adaptations aux specs (44293, 44298, 44301, 44302, 44360, 44475, 44481)

De nombreux événements n'étaient pas transmis à l'objet window, contrairement à ce que disent les specs. Hop, corrigé. De plus, les évènements storage doivent avoir un attribut storageArea retournant la zone de stockage qui a été modifiée. Corrections anodines mais utiles.

Bloquer le défilement lors du chargement d'une page avec ancre

Entre le moment où une page commence à s'afficher et celui où elle est complètement chargée, de nombreuses ressources peuvent modifier le rendu de cette page. Du coup, la position de l'ancre au moment où le navigateur s'est aligné a changé. Avant ce changement, le navigateur restait à la position où il était descendu la première fois. Là, s'il n'y a pas eu de défilement de l'utilisateur, l'ancre restera visible.

Activation des panneaux du Web Inspector

Les panneaux Resources, Network et Profiles bénéficient tous d'un panneau d'activation. Ce panneau d'activation permet de ne l'activer que pour cette session ou définitivement. Cela permet de ne pas ralentir les performances lorsque l'on n'a pas besoin de ces panneaux.

Voilà pour cette semaine. Évidemment, ce n'est qu'une sélection que j'ai faite. Si vous avez remarqué d'autres changements intéressants, n'hésitez pas à les mentionner. Idem si je me suis trompé dans une explication.

Mozilla Europe Camp 2009

Anthony Ricaud — Fri, 30 Oct 2009 02:25:00 +0100

Paul Rouget and Mozilla Europe were kind enough to invite me to the EU Moz Camp 09 in Prague on the first week end of October. It was two amazing days and I learned a lot.

The Community

As I am not really involved in Mozilla, I don't really know how it is to be part of this big community. It actually feels pretty good. During two days, I met a lot of people, had a lot of interesting talks every time (and some beers). I've met a lot of French contributors, shared my room with Nadir Kadem from Dailymotion, met Robert Nyman (really nice person), Vladimir Vukićević lead developer of Firefox, Honza Bambas who has implemented localStorage and many others.

No one looked at me strangely when I said I was contributing to WebKit (except Tristan Nitot but I'm used to it).

And strangely enough, I might have found there why I was contributing to WebKit. gerv said that "When the community feels smaller, it grows bigger". That's what I've found cool with WebKit : you don't need to know the project for a long time to rapidly be aware of everything going on in this community.

Mike Beltzner and the future of Firefox

I really enjoyed his talk and talking with him later. He seems very smart, reactive and open to many suggestions, how to fix problems. Be careful, he does speak French!

I'm both happy and sceptical about the pace acceleration of the releases. For web developers, it's really great cause you get new stuff and bug fixes faster. But at the same time, it can be painful if Mozilla can't migrate its user base at a fast pace too. Web developers don't want three or four versions of Firefox out there. By the way, I wonder if they will change their policy concerning older version support. Right now, I believe they support the current and the previous versions only.

They were discussions on the way to ship Firefox 3.6. If it's not yet set in stone, here is my proposal: ship Firefox 3.6 as a major update to 3.5.x and 3.6.1 as a minor update to 3.5.x. Why? We need a lot of users to move to the latest version and the more effective way to do this is use a minor update. But you don't want to hurt your users so you only use minor updates once you got the feedback of the first release (and fixed bugs). I know it's not a perfect solution (user is not completely in control) but it's the best I could think of.

HTML round table

I'm not gonna talk about the whole round table here but only a specific point around education. In order to keep the web moving and catching up with the proprietary alternatives, you not only need to implement new specs, you also need good information about them.

Good documentation : I think DevMo is doing pretty well in this area.
Good cross browser data : There's a lot of compatibility tables but none of them are up-to-date, complete and accurate. I think it should be the standards bodies work (W3C or ECMA). They edit the specs, the specs requires tests so they only need a good presentation of the results with a bit of high level explanation.
Good examples : Showcasing the novelties is important and hacks.mozilla.org is young but effective in this area.
Good tutorials : Showcasing for Firefox is cool but it often forgets the real world where web developers create for multiple browsers. You need tutorials. I think Mozilla should create a place to gather such tutorials. Opera has Dev Opera for that. I really like articles like Cross-Browser Inline-Block.

But I don't think it's Mozilla's role to create compatibility libraries (such as excanvas or SVG web. It helps obsolete browsers to stay in the market and that's not really what we want.

Firebug and Jan Odvarko (Honza)

They got a lot of cool stuff coming in Firebug 1.5. I especially like the capacity to break on many events (HTML change, CSS change, JS property change). Makes it very easy to understand how a piece of software works just by saying "hey, this part of the page changed, show me the code that did it". Very smart. The HTTP Archive format is also exciting and I hope it will be integrated in the Web Inspector (even better if I find time to do it). Don't miss the slides (and detailed follow ups on his blog)

Mozilla Labs

The labs projects are very interesting. I'm still not convinced by the migration of apps to the browser (I prefer native apps using the network) but if it has to be, Prism is a good move.

The synchronization part of Weave already looks good and I like the open way Mozilla is using for all his server side efforts: develop a server, provide the protocol but also host a version. I also have big expectations on the sharing part of Weave. Something like Opera Unite (share data with friends without uploading a thing) but that can also work when you're offline (cause it's served by the Weave server which has synchronized in the background).

Jetpack is a good reaction from Mozilla but it has to happen fast. Chrome extensions will be really easy to create and ship so it will be a competitor. Not for the end user but for web developers that will try Chrome to develop extensions, maybe use it and then recommend it. I'd say don't listen to add-on developers scared by the lack of functionality, disparition of XPCOM, etc. Add a lot of APIs, get it in Firefox as soon as possible and market it as the easiest way to create extensions. You'll figure out later how to deal with existing extensions.

Irina Sandu, William Quivigier and Paul Rouget

Thank you for the organization, everything was perfect even when I missed my plane. I understand how hard it might be and being so nice while having so many stuff to take care of is amazing (I'm sure FuzzyFox will agree)

MUSIQUE POUR CAPS LOCK DAY

Anthony Ricaud — Thu, 22 Oct 2009 16:49:00 +0200

TRÈS BONNE IDÉE D'UN COLLÈGUE EN CE JOUR DE CAPS LOCK DAY. DES GROUPES DÉDIÉS À CE JOUR. LISTE NON EXHAUSTIVE.

AC/DC
REM
U2
IAM
M
NTM
TTC
N.E.R.D.
INXS

AVEC LA COLLABORATION DES FOUS DE #OPENWEB

Résumé du W3cafe

Anthony Ricaud — Thu, 30 Jul 2009 21:59:00 +0200

Il y a deux semaine, je présentais avec Aurélien Lévy.

Voici le résumé des points abordés pour ma partie avec quelques liens externes et de bonnes ressources. En gros, c'était mon bloc notes pour me rappeler toutes les nouveautés.

HTML5

Philosophie Design principles
Définition du parser, des nécessités user agent VS auteurs
Nouveaux éléments
- doctype et charset : faciles à retenir
- nav, header, footer, section, aside, article : pour mieux structurer le contenu
- video, audio, canvas : pour rajouter des contenus dynamiques
- web forms (url, mail, date, range, search, color), required, placeholder, autofocus : plus de contrôle sur les formulaires
Nouvelles API
- localStorage, sessionStorage, sql storage : stockage côté client façon clef => valeur ou SQL
- app cache (manifest) : permet de stocker l'appli offline, couplé au stockage permet de faire du offline complet
- getElementsByClassName : une nouvelle collection pour traverser facilement le DOM
- Drag & Drop : bah euh, glisser déposer quoi :)
- postMessage : permet de communiquer entre deux applis tournant sur des domaines différents, permettant ainsi des "mashups" plus sécurisés.
Presque lié à HTML5 mais dans d'autres specs
- XHR cross domain : permet de faire des requêtes Ajax sur d'autres domaines sans passer par un proxy côté serveur
- Selectors API : permet de sélectionner des éléments à partir d'un sélecteur, comme le font les librairies JavaScript
- Geolocation API : donne accès à la position géographique
- Web Workers : lancer du JavaScript dans un autre thread pour faire des traitements lourds qui ne bloque pas l'interface
- Ecmascript 5 (pdf) (JSON.parse) : plein de nouveautés mais surtout un moyen de parser du JSON nativement et en toute sécurité.
Ce qui Marche dans IE8
- JSON.parse
- Drag & Drop vu que la spec s'est inspirée de ce que IE avait déjà implémenté depuis IE5
- localStorage, sessionStorage
- postMessage
- XDR, c'est XHR cross domain mais avec un objet nommé autrement (mais la même API)
- Selectors API mais qui ne fonctionne qu'avec les sélecteurs CSS connus par IE8 évidemment.

CSS3

Petit rappel : CSS 2 n'est pas encore totalement exploité (display: table, inline-block, @font-face, text-shadow, sélecteurs, generated content) ni une spec finale
CSS 3 est découpé par modules qui sont plus ou moins finalisés et implémentés.
Candidate Recommandation
- Media queries : écrire des règles qui ne sont exécutées que si l'appareil/navigateur a certaines propriétés (couleurs, taille, ratio, etc)
- Marquee : oui oui, le défilement comme <marquee>, très utilisé dans les pays asiatiques visiblement.
- Basic UI : indique de nouveaux pseudo-sélecteurs et propriétés pour enrichir l'interface utilisateur (::valid, ::required, etc)
Last Call
- Selectors introduit de nouveaux sélecteurs plus fins
- Multi colonnes Colonnage simple sans ajouter d'éléments
Working draft utilisables
- Background et border Rajoute beaucoup de possibilités : bords arrondis, bordures avec images, plusieurs arrière plans, ombre
- Couleurs : Transparence partielle avec RGBA, d'autres espaces de couleurs avec HSL et HSLA, opacity pour la transparence
Working draft en cours de rédaction
- Template layout nouveau moyen de faire des layout avec une syntaxe orientée "ASCII art" : display: "aaaaa" "bccdd"
- Grid positionning nouveau moyen de faire des layout basés sur une construction via des grilles, proche de l'impression papier
- Transforms 2D/3D permet de modifier l'aspect d'un élément en le tournant, tordant, déplaçant dans un espace 2D ou 3D.
- Transitions permet de passer d'un état à l'autre d'une propriété avec une transition plutôt que brutalement
- Animations permet de définir des animations à effectuer.

Ressources externes

CSS3 info : beaucoup d'exemples de fonctionnalités très simples
Hacks Mozilla : des exemples plus avancés et concrets d'utilisations de CSS et HTML5
HTML5 doctor : articles et tutoriaux sur HTML5, les techniques, l'état de l'art, etc.

WebKit's week - #9

Anthony Ricaud — Tue, 21 Jul 2009 14:06:00 +0200

Week from May 11 to May 24 (before r44117). To test those changes, you'll need a WebKit nightly.

New input types (43267)

4 new input fields are now supported : url, mail, number et tel (see the HTML5 spec). No additional functionality (like completion with the address book, the bookmarks, etc), just a basic support. But we can guess those functionalities will be available later.

ARIA role : grid(43669)

Even if Safari 4 has a basic support of WAI-ARIA, the work is not over. New roles are still coming in.

Orientation and ratio available in CSS (43739)

Media queries in CSS give a better control through knowledge of the properties of the device. WebKit already supports some of those queries. This change adds support for orientation (portrait or landscape) and ration (exact, minimal or maximal) of the view.

displayName support in the debugger (43774)

Anonymous functions are often used in JavaScript. They are really handy for development but not so much when you have to find where a problem lies. Therefore, Francisco Tolmasky of 280North got the idea of the function.displayName property. You can now choose what name the debugger will use. Before that, he has also done a similar change for the profiler. I can only recommend the lengthy article he wrote about it.

This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #9

Anthony Ricaud — Tue, 21 Jul 2009 13:43:00 +0200

Semaine du 11 au 24 mai (avant r44117). Pour tester ces nouveautés, vous aurez besoin d'une nightly WebKit.

Support de nouveaux champs (43267)

4 nouveaux champs <input> sont désormais supportés : url, mail, number et tel (voir la spec HTML5). Pas de nouvelle fonctionnalité associée (comme une complétion avec le carnet d'adresses, les favoris, etc), juste un support simple. Mais on peut supposer que cela arrivera dans un second temps.

Rôle ARIA : grid(43669)

Bien que Safari 4 soit sorti avec un support élémentaire de WAI-ARIA, le travail n'est pas fini. De nouveaux rôles sont encore ajoutés.

Orientation et ratio disponible en CSS (43739)

Les media queries en CSS permettent d'avoir un contrôle plus fin sur vos CSS en se basant sur les propriétés de l'appareil qui fait le rendu. WebKit supporte déjà une partie des queries. Ce changement rajoute le support de l'orientation (portrait ou paysage) et du ratio (exact, minimal ou maximal) de la vue.

Support de displayName dans le débugueur (43774)

Les fonctions anonymes sont monnaie courante en JavaScript. Elles sont très pratiques pour le développement mais beaucoup moins lorsqu'il faut trouver à quel endroit il y a un problème. Du coup, Francisco Tolmasky de 280North a eu l'idée d'ajouter la propriété function.displayName. Ainsi, on peut choisir le nom qu'affichera le débugueur pour une fonction. Auparavant, il avait effectué un changement équivalent pour le profileur. Je vous conseille de lire l'article où il rentre dans les détails.

W3café de juillet, troll assuré ?

Anthony Ricaud — Wed, 08 Jul 2009 15:00:00 +0200

Petit relai pour le W3café du 17 juillet au soir. Détails et inscriptions.

Je m'occuperais plus des parties HTML5 et CSS3, n'étant pas du tout compétent sur WCAG2. Si vous avez des questions en avance, n'hésitez pas en commentaire, ça me permettra de réviser mes fiches avant l'oral la semaine prochaine.

WebKit's week - #8

Anthony Ricaud — Thu, 23 Apr 2009 16:30:00 +0200

French version

After four months without news, I'll try to be more regular. Let's hope my new organisation will help.

Changes of the week

Everything mentioned below should work with the latest nightly available at the moment (42662).

6 parallel connections (42457, 42559)

With this commit, WebKit can now use 6 parallel connections per domain, previously 4. The number of parallel connections is important to download as fast as possible the resources of a web page. WebKit is now behaving like latest versions of IE, Firefox or Chrome. Opera uses 8 connections per domain. To test this, you'll have to wait for a future version of the CFNetwork library.

function.displayName (42478)

You can create anonymous function in JavaScript. They are very useful but the drawback is they also appear anonymous in the profiler. This make the interpretation of the results pretty hard. Now, you can give a name to those functions and it will be used in the profiler.

Yarr! (42481)

Yarr! (Yet Another Regex Runtime) is, as it suggests, a new Regex Runtime. It is disabled by default for some reasons like being incomplete at the moment but said to be faster than the old one. Hoperfully, we'll have more news when he'll be live.

XMLHttpRequest withCredentials (42483)

This is a new feature from the XMLHttpRequest Level 2 spec. With the withCredentials attribute, you can define whether or not you wanna send the cookies and HTTP authentication data when using a cross domain XHR. Like the number of parallel connections, we need a new version of CFNetwork to test this.

Array.reduce and Array.reduceRight (42563, 42570)

These are two new methods define by ECMAScript 5. You are invited to read the documentation on the Mozilla developer center.

SQL is read only with private browsing (42616)

When using the private browsing mode (aka porn mode), the web database is no longer writeable. Inserts, updates, deletes are no longer available. This way, the website can't record stuff while in a private session.

Implementation of the played attribute (42619)

The new video element has a played attribute which give info about what part of the video has been played. You got access to a TimeRanges object.

This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #8

Anthony Ricaud — Thu, 23 Apr 2009 02:20:00 +0200

Après une interruption de 4 mois, je vais essayer de reprendre mes petites nouvelles. J'ai changé d'organisation pour essayer d'être plus régulier.

Changements de la semaine

Tout ce qui est mentionné ci-dessous doit normalement fonctionner dans la dernière nightly disponible (42662).

6 connections parallèles (42457, 42559)

Avec ce changement, WebKit passe de 4 à 6 connections parallèles par domaine. Le nombre de connections par domaine est important pour télécharger au plus vite les ressources des pages web. WebKit s'aligne donc sur les dernières versions de IE, Firefox et Chrome. Opera utilise 8 connections par domaine. Il faudra juste attendre une prochaine version de la librairie CFNetwork pour voir le changement effectif dans Safari.

function.displayName (42478)

JavaScript permet de créer des fonctions anonymes. Elles sont très pratiques mais la contrepartie, c'est qu'elles sont aussi anonymes dans le profiler, ce qui rend difficile l'interprétation des résultats. Grâce à ce changement, on peut désormais donner un nom aux fonctions et il sera utilisé dans le profiler.

Yarr! (42481)

Yarr! (Yet Another Regex Runtime) est un nouveau moteur de RegExp. Il est désactivé par défaut pour l'instant mais semble plus rapide que l'ancien (encore heureux) mais pas encore suffisamment. Il est d'ailleurs encore incomplet. Des nouvelles lorsqu'il sera plus avancé.

XMLHttpRequest withCredentials (42483)

Nouvelle fonctionnalité faisant partie de la spec XMLHttpRequest Level 2, l'attribut withCredentials permet de choisir si l'on souhaite envoyer les cookies et les autorisations HTTP lors d'une requête XHR sur un autre domaine. Comme pour le nombre de connexions parallèles, il faudra attendre une prochaine version de CFNetwork.

Array.reduce et Array.reduceRight (42563, 42570)

Deux nouvelles méthodes définies par ECMAScript 5. Je vous invite à lire les explications sur le centre développeur Mozilla.

SQL en lecture seule en navigation privée (42616)

En mode navigation privée (aka porn mode), les écritures ne seront plus autorisées dans les bases de données web. Plus d'insertion, modification ou suppression possible. Ainsi aucune information durant une session privée ne pourra être enregistrée.

Implémentation de l'attribut played (42619)

La nouvelle balise video contient un attribut played permettant de savoir quelles parties de la vidéo ont déjà été visionnées. Cet attribut représente les intervalles de temps qui ont été lus.

À l'attaque !

Anthony Ricaud — Tue, 07 Apr 2009 12:06:00 +0200

Désolé pour l'intermède nombriliste. On ne va pas y aller par quatre chemins, j'entame à partir d'aujourd'hui un régime que j'espère concluant.

Départ : 103,5 kilos (oui, 3 chiffres...)

Objectif : 80 ou 75 kilos (si l'arrivée aux 80 kilos se fait "tranquillement", on envisagera les 75)

Ce régime Dukan ou régime protal risque de durer environ un an. C'est pour cela que j'en parle ici :

Pour avoir une trace écrite de mes engagements. Ça fait partie de la motivation.
Pour que mes proches, mes collègues ou autres puissent savoir qu'il ne faudra pas trop me forcer à aller au restaurant ou m'inviter à boire des verres.

Alors merci à Amaury (mon colocataire) et Géraldine qui ont déjà commencé ce régime. Merci pour la motivation initiale et l'entraide qu'on se donnera. Merci à ceux qui m'ont toujours un peu reproché, critiqué, embarrassé sur mon poids, ça fait partie des choses qui me motiveront. Merci aux escaliers qui me fatiguent. Merci à l'été qui arrive et qui me fait trop transpirer ou qui me gêne quand il faut se baigner.

Je mettrai certainement ce billet à jour avec mes progrès au fur et à mesure.

Temps de passage estimés :

Date	Poids	Phase
7 avril 2009	103,5 kilos	Go !
17 avril 2009	96 kilos	Fin de la première phase
26 mai 2009	80 kilos
14 juin 2009	75 kilos	Fin de la deuxième phase
14 avril 2010	75 kilos	Fin de la troisième phase

Poids au fur et à mesure :

Date	Poids
7 avril 2009	103,5
8 avril 2009	102,5
9 avril 2009	102
10 avril 2009	101
11 avril 2009	101
12 avril 2009	101
13 avril 2009	100,5
14 avril 2009	100
15 avril 2009	99,5
16 avril 2009	99
17 avril 2009	99
18 avril 2009	98
19 avril 2009	97,5
20 avril 2009	97
21 avril 2009	97
22 avril 2009	97
23 avril 2009	97,5
24 avril 2009	97
25 avril 2009	97
26 avril 2009	96,5
27 avril 2009	96,5
28 avril 2009	97
29 avril 2009	96,5
30 avril 2009	96
1 mai 2009	95
2 mai 2009	96
3 mai 2009	95,5
4 mai 2009	95
5 mai 2009	95,5
6 mai 2009	96
11 mai 2009	95
12 mai 2009	94,5
13 mai 2009	94
14 mai 2009	94
15 mai 2009	94,5
29 mai 2009	92,5

Compte rendu de mon atelier Paris Web 2008

Anthony Ricaud — Mon, 06 Apr 2009 00:05:00 +0200

WebKit ?

WebKit est souvent pris pour plusieurs choses à la fois. On pense que c'est un navigateur, on pense que ce sont les versions de développement de Safari ou tout autre idée répandue. En réalité, ce n'est qu'un moteur web. Tout ceci est bien résumé sur la page d'accueil du projet ou sur Back to the basics. Là où ça devient un peu plus confus, c'est que c'est aussi le nom d'un framework de Mac OS X. Ainsi, il est possible simplement d'afficher du contenu web dans son application en utilisant ce framework. On passe au niveau d'incompréhension supérieur : les nightlies. Régulièrement, des compilations nocturnes sont mises à jour. Il y a le source dans une archive tar.gz. Afin que de nombreuses personnes testent, il y a aussi des versions compilées pouvant tourner avec Safari Mac ou Safari Windows. Elles ne font que lancer le navigateur Safari installé sur votre machine avec une autre version du moteur.

Une autre particularité du projet est l'absence de versions à proprement parlé. Chaque éditeur souhaitant utiliser WebKit choisit ce qu'il souhaite intégrer.

Pourquoi Firebug et Web Inspector ?

Firebug est un très bon outil, pourquoi en apprendre un autre ? Tout simplement, les fonctionnalités, bugs et autres particularités des navigateurs nous obligent à avoir des outils pour analyser nos pages sous chaque navigateur. IE8 intégrera de nouveaux outils annoncés plus adaptés, Opera intègre déjà DragonFly. Et WebKit possède le Web Inspector depuis Safari 2. Une mise à jour a eu lieu avec Safari 3 puis avec Safari 3.1. Mais tout cela restait bien fade par rapport à ce qui arrivera dans la prochaine version majeure de Safari (Safari 4 en bêta depuis quelques jours). Il est intéressant de tester ses pages avec le Web Inspector dès aujourd'hui. Safari représente déjà près de 7% aux États-Unis, cela est appelé a augmenté naturellement par la part de marché croissante des Mac. L'iPhone représente une partie non négligeable du trafic provenant de mobiles. Chrome est désormais sorti de beta. Et il y a bien d'autres logiciels qui embarquent ou embarqueront WebKit.

Fonctionnalités

Pour les fonctionnalités, je vais avoir du mal à retranscrire la présentation, vu que c'était plutôt "hands-on" (et brouillon aussi). Je vous invite à consulter la documentation de Firebug et la présentation des dernières nouveautés du Web Inspector (et ma traduction).

Ce qu'il faut retenir, c'est qu'il n'y a pas que l'onglet HTML de Firebug. Il est bien utile mais l'onglet Réseau (ou Resources côté WI) peut vous aider à améliorer les performances de votre site. Par exemple, on peut regardez quelles ressources prennent vraiment du temps à être téléchargé, quels sont les headers envoyés, reçus. Abusez des profilers si vous utilisez JavaScript. Cela vous permettra de trouver les fonctions les plus lentes ou trop souvent appelées dans votre code. Sans oublier le Débugueur. Positionnez des points d'arrêt, regardez l'état des variables à cet instant, parcourir la suite du code, etc. Autant d'infos précieuses pour comprendre le fonctionnement réel de votre code (ou le code d'un autre site). Et bien entendu, la console permet d'essayer des morceaux de code, d'étudier la page, elle est également disponible lorsque le débugueur est utilisé.

La Console API est tout simplement géniale. Fini le débug avec alert(). Utilisez console.log, console.warn, console.group ou console.assert pour suivre le déroulement de votre application. Vous pourrez les enlever très facilement de votre application en environnement de production et cela vous fera gagner un temps précieux en développement. Contrairement à alert() qui est bloquant, les messages de l'API console ne vous gêneront pas dans vos tests. Abusez-en !

Dans les astuces peu documentées, je rappelle souvent le mot clef debugger; en JavaScript qui permet de mettre en pause l'exécution du script, comme un point d'arrêt classique.

Autre astuce : $0 dans la console permet d'accéder au dernier élément inspecté. On peut ainsi par exemple rapidement faire $0.style.display = 'none'; . $1 permet d'accéder à l'élément inspecté avant $0 et ainsi de suite. Cela n'est pour l'instant valable que dans Firebug.

Contribuez !

Hormis les outils de IE8, tous les autres sont libres, même DragonFly. Ce sont vos outils de tous les jours, ne les négligez pas. Si quelque chose vous gêne, n'hésitez pas à remonter l'info. Il y a bien entendu les bug trackers mais vous pouvez aussi me remonter l'info si vous préférez parler directement à quelqu'un (en tout cas pour le Web Inspector).

Un exemple concret de retours dont nous avons besoin : beaucoup de gens se plaignaient que les styles n'étaient pas éditables. Cela fait longtemps qu'ils le sont et nous ne comprenions pas pourquoi nous avions ces retours. Après quelques discussions, nous nous sommes rendus compte que les gens ne comprenaient pas ce qu'était les "Computed Styles", premier onglet de style ouvert. Depuis ces discussions, cet onglet est toujours présent mais replié. Nous ne pouvions pas découvrir ce problème sans retours.

En plus de cela, si vous souhaitez vous impliquer, sachez que le Web Inspector est intégralement réalisé en HTML/JS/CSS (tout comme DragonFly). Il est donc très facile pour un développeur Web de s'essayer au développement de ces outils.

Quelques URLs utiles :

Redesign du Web Inspector

Anthony Ricaud — Mon, 02 Mar 2009 01:07:00 +0100

Ci-dessous, une traduction du billet de Timothy Hatcher du blog Surfin' Safari. Quelques fautes et imperfections de traductions doivent s'être glissées, n'hésitez pas à me les signaler. Le billet original date du 30 septembre 2008 et ne parle pas encore de la beta de Safari 4.

9 mois se sont écoulés depuis notre dernière nouvelle concernant le Web Inspector et nous avons beaucoup de choses sympas à vous raconter. Si vous utilisez le Web Inspector régulièrement avec les nighlty builds, vous avez du remarquer certaines améliorations alors que d'autres changements plus subtiles vous ont peut-être échappés.

Quelques améliorations du Web Inspector sont des contributions de membres de la communauté WebKit. Nous souhaitons vraiment voir la totalité de la communauté impliquée pour créer le meilleur outil de développement web disponible. Rappelez-vous, la plupart du Web Inspector est écrit en HTML, JavaScript et CSS. Il est donc très facile de commencer à le changer et l'améliorer.

Interface redesignée

En premier et particulièrement, le Web Inspector revet désormais un nouveau design pour organiser l'information selon des groupes de tâches - représentées par les icônes dans la barre d'outils. Les éléments de la toolbar (Éléments, Ressources, Scripts, Profils et Bases de données) sont nommées d'après les éléments fondamentaux avec lesquels vous travaillerez dans les panneaux respectifs.

Console

La Console est dorénavant accessible depuis n'importe quel panneau. Contrairement aux autres panneaux, la Console n'est pas utilisée que pour une seule tache – elle peut-être utilisé en inspectant le DOM, en débuggant du JavaScript ou en analysant des erreurs de syntaxe HTML. Le bouton d'ouverture/fermeture de la Console se trouve dans la barre de statut, déclenchant une animation pour l'afficher ou la cacher depuis le bas du Web Inspector. La console peut aussi s'ouvrir ou se fermer avec la touche Esc.

Le total d'erreurs et d'avertissements est affiché en bas à droite, dans la barre d'état. Cliquer sur ces totaux ouvrira la Console.

En plus des changements visuels de la Console, nous avons aussi grandement amélioré son utilisabilité en ajoutant de l'auto-complétion. Au fur et à mesure que vous tapez des expressions, des noms de propriétés seront automatiquement suggérés. S'il y a plusieurs propriétés avec le même préfixe, appuyer sur la touche Tab vous fera cycle parmi elles. Appuyer la flèche droite acceptera la suggestion actuelle. La suggestion actuelle sera aussi acceptée en appuyant sur Tab si c'est la seule propriété possible.

Notre compatibilité avec la ligne de commande Firebug et les API window.console a aussi été grandement amélioriée par Keishi Hattori (服部慶士), un étudiant de l'université de Tokyo (東京大学) qui a travaillé d'arrache-pied dans ce domaine pendant son projet d'été. (GSoC)

Panneau Éléments

Le panneau Éléments est globalement le même que la précédente vue DOM – au moins visuellement. Sous le capot, nous avons opérés de nombreux changements et unifiés le tout en un seul arbre DOM.

Descendre dans des sous-documents — développer un élément frame ou object vous montrera l'arbre DOM pour le document à l'intérieur de cet élément.
Mises à jour automatiques — l'arbre DOM sera mis à jour lorsque des nœuds seront ajoutés ou enlevés de la page inspectée.
Inspecter les éléments cliqués — activer le nouveau mode d'inspection vous permettra de bouger votre souris au-dessus de la page pour trouver un nœud à inspecter. Cliquer sur un nœud dans la page le mettra en valeur dans le panneau Éléments et coupera le mode d'inspection. C'est une contribution de Matt Lilek.
Désactiver temporairement des styles — en passant la souris sur une règle éditable, vous verrez des cases à cocher permettant de désactiver des styles.

Édition de style — un double clic permet d'éditer une propriété de style. Supprimer tout le texte supprimera la propriété. Taper ou coller plusieurs propriétés ajoutera toutes les propriétés.
Pas à pas pour les valeurs numériques — pendant que vous éditez une propriété à valeur numérique, vous pouvez utilisez les flèches Haut et Bas pour augmenter ou diminuer cette valeur. Maintenir la touche Alt donnera des pas de 0.1 alors que maintenir la touche Shift donnera des pas de 10.

Édition d'attributs DOM — double cliquez pour éditer un attribut DOM. Taper ou coller plusieurs attributs ajoutera les nouveaux attributs. Supprimer tout le texte supprimera l'attribut.
Édition de propriétés DOM — double cliquez pour éditer une propriété DOM dans le cadre Propriétés. Supprimer tout le texte supprimera la propriété si c'est autorisé.
Édition des dimensions — doucle cliquez pour éditer n'importe laquelle des dimensions d'une boîte CSS.
Position metrics — le cadre Dimensions (Metrics) inclus désormais la position pour les éléments en position absolue, relative ou fixe.

Panneau Ressources

Le panneau Ressources est une version boostée de notre précédent panneau Réseau. Il a une timeline "waterfall" similaire mais beaucoup de travail a été fait pour le rendre encore plus pratique.

Graphique par poids – cliquez sur Poids (Size) dans la barre latérale pour voir rapidement les plus grosses ressources téléchargées.
Options de tri multiples — il y a de nombreuses options de tri disponibles pour les graphiques temporels, y compris par latence et durée.
Barre de latence — le graphique temporel montre désormais la latence avec une barre de couleur plus claire. Cela représente le temps entre l'émission de la requête et la première réponse du serveur.
Vue des ressources unifiée — en cliquant sur une ressource dans la barre latérale, vous verrez les données récupérées sur le réseau, y compris les en-têtes de requête et réponse.
Voir les XHRs — les graphiques de temps et poids montrent aussi les XMLHttpRequest. Sélectionner une ressource XHR dans la barre latérale vous montrera les données et en-têtes XHR.

Panneau Scripts

Drosera, le précédent débugueur JavaScript a été remplacé par un nouveau débugueur JavaScript intégré au Web Inspector. Le nouveau débugueur JavaScript intégré est beaucoup plus rapide que Drosera et devrait être beaucoup plus agréable.

Depuis le panneau Scripts, vous pouvez voir tous les scripts faisant partie de la page inspectée. Cliquer dans la gouttière d'un script mettra un point d'arrêt sur cette ligne de code. Il y a les contrôles classiques pour mettre en pause, reprendre et passer à la ligne suivante de code. En pause, vous verrez la pile d'appel courante et les variables in-scope dans la barre latérale de droite.

Le Web Inspector a une fonctionnalité unique concernant les variables in-scope : il montre les closures, les déclarations "with" et les objets liés aux événements séparemment. Cela vous donne une vision plus clair de l'origine de vos variables et pourquoi votre script fonctionne mal (ou même bien par accident).

Panneau Profil

Le tout nouveau panneau Profiler JavaScript vous aidera à identifier où le temps s'écoule dans les fonctions JavaScript de votre page. La barre latérale de gauche liste tous les profils enregistrés et un arbre sur la droite vous montre les informations récupérés par le profil sélectionné. Les Profils ayant le même nom sont regroupés sous un même item comme plusieurs exécutions consécutives.

Il y a deux manières de voir un profil : de bas en haut (heavy) ou de haut en bas (tree). Chaque vue a ses propres avantages. La vue heavy vous permet de comprendre quelles sont les fonctions ayant le plus de répercussions sur les performances et leurs chemins d'appels. La vue tree vous donne un aperçu global de la suite d'appels de vos scripts en commençant au plus haut de la pile d'appel.

Des contrôles de filtrage de données sous le profil vous facilitent la dissection des informations du profil. Le bouton focus (symbolisé par un oeil) filtrera les profils pour ne montrer que cette fonction et ses parents. Le bouton exclure (symbolisé par un X) enlèvera la fonction sélectionnée du profil et répercutera le temps total sur les parents de cette fonction. Lorsque l'une de ses options de filtrages est active, un bouton est disponible pour restaurer l'état original du profil.

Le profiler JavaScript de WebKit est totalement compatible avec les fonctions console.profile() et console.profileEnd() de l'API Firebug. Mais vous pouvez aussi spécifier un titre à console.profileEnd() pour arrêter un profil particulier si plusieurs profils sont en cours d'enregistrement. Vous pouvez aussi enregistrer un profil en utilisant le bouton Start/Stop du panneau Profil.

Panneau Bases de données

Le panneau Bases de données vous permet d'intéragir avec le stockage bases de données HTML 5. Vous pouvez examiner le contenu de toutes les bases de données de la page actuelle et y exécuter des requêtes. Chaque base de données est présentée dans la barre latérale. Développer le triangle devant une base révèlera toutes les tables de cette base. Sélectionner une table vous montrera une grille de données représentant toutes les lignes et colonnes de cette table.

Sélectionner une base dans la barre latérale vous montrera une console interactive pour effectuer des requêtes SQL. Cette console dispose d'une auto-complétion pour les mots-clefs SQL communs ainsi que les noms des tables de cette base.

Recherche

En complément de la réorganisation selon les tâches, le champ de recherche dans la barre d'outils cherchent désormais dans le panneau courant en mettant en avant les résultats selon le contexte. Limiter la recherche au panneau courant permet à chaque panneau de supporter des requêtes spécialisées pour le type d'informations présentées. Les panneaux Éléments et Profils ont des requêtes spéciales.

Le panneau Éléments supporte des sélecteurs XPath et CSS en plus du texte normal. Toute recherche sera tentée comme du texte normal, une requête XPath en utilisant document.evaluate() et un sélecteur CSS en utilisant document.querySelectorAll(). Tous les résultats seront mis en avant dans l'arbre DOM, le premier étant révélé et sélectionné.

Le panneau Profils support des recherches sur le nom des fonctions et sur les URL des ressources. Des recherches numériques sont aussi possibles parmi les colonnes Self, Total et Calls. Pour faciliter les recherches numériques, quelques opérateurs et unités sont supportés afin de limiter ou étendre vos résultats. Par exemple, vous pouvez chercher "> 2.5ms" pour trouver toutes les functions qui ont pris plus de 2.5 millisecondes pour s'exécuter. En plus de "ms", les autres unités supportées sont : "s" pour les temps en secondes et "%" pour les pourcentages de temps. Les autres opérateurs supportés sont "<", "<=", ">=" et "=". Quand aucune unité n'est spécifiée, la recherche numérique se limite à la colonne Calls.

Dans tous les panneaux, presser Entrée dans le champ de recherche ou ⌘G (Ctrl+G sur Windows et Linux) révèlera le prochain résultat. Presser ⇧⌘G (Ctrl+Shift+G sur Windows et Linux) révèlera le précédent résultat. Dans les panneaux Ressources, Scripts et Profils, la recherche sera effectuée sur la vue actuelle et sautera au premier résultat seulement si la vue actuelle a un résultat pertinent.

Disponible maintenant et comment contribuer

Tout cela est disponible dès à présent dans les nightlies Mac et Windows. Essayez-le maintenant et dites nous ce que vous aimez (ou ce que vous n'aimez pas).

Si vous souhaitez contribuer, il y a des tâches très intéressantes dans la liste des bugs et améliorations du Web Inspector. Les autres contributeurs dans le salon #webkit sont à peu près toujours disponibles pour fournir de l'aide ou des conseils.

WebKit's week - #7

Anthony Ricaud — Sat, 27 Dec 2008 23:51:00 +0100

French version

Christmas edition !

Changes of the week

Everything mentioned below should work with the latest nightly available at the moment (38826).

Web Workers (38150, 38567)

Once again, let's talk about a new specificaiton. With Web workers, you can realise complex tasks in JavaScript in another thread and so in the background. Therefore, the browser is not unresponsive and we can better use the multiple cores of the recent processors. The spec is a work in progress and changes often. You'll find more detailed explanations on the Web Tech blog of Mozilla (which implements this spec, available in Firefox 3.1β2). Some APIs are available in a Worker, but the DOM API isn't part of them. Oliver Hunt prepared a demo to show the performance gain.

WML support (38541, Bug 20393)

WML is the language intended for devices that implement the WAP protocol. WebKit doesn't support this language but it is currently being implemented. This support is not available by default in the nightlies. You'll have to compile your own copy if you want to test it.

HttpOnly Cookie (38566)

An Internet Explorer extension (added in Firefox and Opera since) will soon be supported by WebKit based browsers. This restricts the access to certain cookies. They are only available for an HTTP request and so not from JavaScript. This is an important functionality to restrict the damages of an XSS vulnerability. ~~This is not available in the nightlies because you need some updated Apple proprietary libraries (CFNetwork).~~ UPDATE (29 december) : CFNetwork has been updated since this commit so it is now testable in the nightlies, my bad.

Updated propositions (38717, 38737, 38760)

Propositions for CSS Transforms, CSS Transitions and CSS Animations have been updated. CSS Transforms have been splitted into a 2D and 3D proposition. Also, a proposition of extension to the CSS Media Queries for the previous propositions. And an extension of pointer-events to HTML elements. All these propositions are consultable on a unique location.

Underground work

In addition to all this, a lot of what I call "underground" work has been done. A lot of renamings, cleanings, fixes for recently introduced features, a smaller memory footprint, tests for conformity. There's too much commits for me to point. All this work, which is not really visible but very useful, is an occasion for me to remind you the goals of the WebKit project.

This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #7

Anthony Ricaud — Sat, 27 Dec 2008 18:36:00 +0100

Édition de Noël !

Changements de la semaine

Tout ce qui est mentionné ci-dessous doit normalement fonctionner dans la dernière nightly disponible (38826).

Web Workers (38150, 38567)

Une fois n'est pas coutume, nous allons parlons d'une nouvelle spécification. Les Web workers permettent de réaliser des actions complexes en JavaScript dans un autre thread et donc en tâche de fond. Cela permet de ne pas bloquer le navigateur mais aussi de mieux utiliser les multiples cœurs des processeurs récents. La spécification est actuellement en plein travail et change relativement souvent. Vous trouverez des explications plus détaillées sur le blog Web Tech de Mozilla (qui a aussi implémenté cette spécification qui est disponible dans Firefox 3.1β2). Certaines API sont disponibles dans un Worker mais l'API DOM n'en fait pas partie. Oliver Hunt a préparé une démo pour illustrer le gain en performance.

Support de WML (38541, Bug 20393)

Le WML est le langage destiné aux terminaux respectant le protocole WAP. WebKit ne supportait pas ce langage mais il est actuellement en cours d'implémentation. Ce support n'est pas activé par défaut dans les nightlies, ce qui vous empêchera de le tester sans compiler vous même.

HttpOnly Cookie (38566)

Une extension de Internet Explorer (depuis ajoutée à Firefox et Opera) sera bientôt fonctionnelle dans les navigateurs basés sur WebKit. Cela permet de restreindre l'accès à certains cookies. Ils ne sont disponibles que lors d'une requête HTTP et donc pas en JavaScript. C'est une fonctionnalité importante pour restreindre les dégâts de failles XSS. ~~Ceci n'est pas testable dans les nightlies car cela demande d'avoir des librairies propriétaires d'Apple à jour (CFNetwork).~~ Mise à jour (29 décembre) : Ceci est testable puisque CFNetwork a été mis à jour depuis.

Mise à jour de propositions (38717, 38737, 38760)

Les propositions de CSS Transforms, CSS Transitions et CSS Animations ont été mises à jour. Les CSS Transforms ont même étés séparées entre les transformations 2D et 3D. Il y a aussi une proposition d'extension des CSS Media Queries pour les étendre aux propositions précédentes. Une proposition d'extension des pointer-events au HTML a aussi été ajoutée. Toutes les propositions actuelles sont regroupées en une adresse unique.

Travail soutterain

En plus de tout cela, beaucoup de travail que je nommerai "souterrain" a été réalisé. De nombreux renommages, nettoyages ont été effectués, des corrections sur les fonctionnalités récemment introduites, une réduction de l'empreinte mémoire, des tests de conformité. Il y a beaucoup trop de changements pour que je les indique individuellement. Tout ce travail pas très visible mais bien utile me donne l'occasion de rappeler les buts du projet WebKit.

WebKit's week - #6

Anthony Ricaud — Tue, 02 Dec 2008 20:19:00 +0100

French version

Apologizes for the chaotic rhythm of publication. So here is a raw version.

Changes of the week

Everything mentioned below should work with the latest nightly available at the moment (38100).

Multiline Inputs (35739)

Before this commit, WebKit was only sending the first line of an input field. Now, a multiline text (entered with copy and paste) will keep all the text. The carriage return will be replaced by spaces. This matches other browsers behavior.

Computed styles tab collapsed (37523)

After the post on the redesigned Web Inspector, many people were asking why styles can't be edited. In fact, they were trying to edit the computed styles. As the name explains, it represents the final styles after being calculated by the browser and therefore, they are not editable. To avoid this confusion and keep an easy access to this data, this tab is now collapsed by default.

Debug without reloading the page (37622)

Wanna debug some Javascript ? You just have to enable the debugger and there you go. No reloading involved.

Time and size per resource

In order to ease the interpretation of the waterfall in the Resources panel, the time and size for each resources were added. You just have to hover the resource to get the different times (waiting and loading times) or the size of the resource.

On demand profiler (37730, 37933)

Before these commits, the profiler was always enable when the Safari's Developer menu was enabled. This affects performance, even when you weren't running a profile. Now, the profiler is disabled by default. A new activation screen is therefore necessary. A similar screen was added for the profiler too.

Geolocation API (37854)

A lot of applications could benefit from knowing the user position and offer local services. So an API is under development at the W3C : Geolocation API. There is a clear usecase with the iPhone for example. This functionality can't be tested in the nightlies at the moment.

Multi-file upload (37863)

HTML5 introduces the multiple attribute on file inputs. This allows uploading multiple files at a time. Combined with XMLHttpRequest version 2, this allows uploading files with a progression bar without external plugins.

Mozilla cursors (37902)

Two new values were added to customise cursors : -webkit-grab and -webkit-grabbing. They were already used in Mozilla. Demo of all supported cursors

Changing the accesskey shortcut (38211)

Originally, the accesskey shortcut was Ctrl. This caused collisions with the Emacs style shortcuts in Mac OS. The shorcut was changed to Ctrl+Opt. But this caused new problems with VoiceOver. So the intermediate solution is now : Ctrl+Opt without VoiceOver and Ctrl with VoiceOver.

Julien Chaffraix and I were at Paris Web 2008. Among many good moments, they were a nice browser panel with a represent of the four big engines.

This is everything for this week. Of course, this is just a selection I've made. If you've noticed any other interesting changes, please let me know. Same thing if I got something wrong.

La semaine de WebKit - #6

Anthony Ricaud — Thu, 27 Nov 2008 00:04:00 +0100

Je n'arrive pas à tenir le rythme, voici donc une revue avec très peu d'explications pour rester à flot.

Changements de la semaine

Tout ce qui est mentionné ci-dessous doit normalement fonctionner dans la dernière nightly disponible (38100).

Input multi-lignes (35739)

Avant ce changement, WebKit n'envoyait que la première ligne d'un champ input. Maintenant, un copier coller d'un texte multilignes conservera tout le texte. Les retours chariots seront remplacés par des espaces. Cela harmonise le comportement avec les autres navigateurs.

Onglet Computed style replié (37523)

Après le billet sur le redesign du Web Inspector, de nombreuses personnes semblaient se demander pourquoi les styles n'étaient pas éditables. Ils se trouvaient tout simplement dans la partie Computed Style des styles. Comme son nom l'indique, elle représente les styles finaux après calcul et ne sont donc pas éditables. Pour éviter cette confusion mais garder un accès facile à cette information, cet onglet est désormais replié.

Débugger sans recharger la page (37622)

Envie de débugger du JavaScript. Il suffit d'activer le debugger et vous êtes parés. Pas de rechargement à attendre.

Temps et poids de chargements détaillés

Afin de faciliter l'interprétation de la cascade dans l'onglet Ressources, des temps et poids de chargement détaillés ont été ajoutés. Il suffit de survoler la resource pour obtenir les différents temps (temps d'attente et temps de téléchargement) ou le poids de la resource.

Profiler à la demande (37730, 37933)

Avant ces changements, le profiler était toujours activé lorsque le menu développeur de Safari était activé. Cela dégradait les performances, même lorsqu'on ne souhaitait pas profiler du code. Avec ces changements, le profiler est maintenant désactivé par défaut. Un nouvel écran d'activation a donc fait son apparition. Un écran similaire a été ajouté pour le débugger.

Geolocation API (37854)

De nombreuses applications souhaitent obtenir la position de l'utilisateur pour rendre des services locaux. Une API est donc en cours de développement au W3C : Geolocation API. Nous voyons tout de suite l'intérêt que cela pourrait avoir sur un iPhone. Cela dit, cette fonctionnalité n'est pas testable dans les nightlies.

Upload de plusieurs fichiers (37863)

HTML5 introduit l'attribut multiple sur les champ de type file. Cela permet d'uploader plusieurs fichiers en une seule fois. Combiné avec XMLHttpRequest version 2, cela permet de faire des uploads avec une barre de progression sans utiliser de plugins.

Curseurs Mozilla (37902)

Deux nouvelles propriétés ont été ajoutées pour personnaliser les curseurs : -webkit-grab et -webkit-grabbing. Ils étaient déjà utilisées dans Mozilla. Démo de tous les curseurs actuels

Changement du raccourci accesskey (38211)

À l'origine, le raccourci pour les accesskey était Ctrl. Cela posait des problèmes avec les raccourcis type Emacs de Mac OS. Le raccourci a donc été changé pour Ctrl+Alt. Mais cela pose maintenant problème avec VoiceOver. D'où la solution intermédiaire : utiliser Ctrl+Alt sans VoiceOver et Ctrl avec Voiceover.

Julien Chaffraix et moi-même étions à Paris Web 2008. Entre autre bons moments, une jolie table ronde navigateurs avait lieu.

Paris Web, a really nice conference

Anthony Ricaud — Mon, 20 Oct 2008 09:40:00 +0200

The third edition of Paris Web will be held from November 13 to 15. I should have mentioned it earlier since the early bird is over. But guess what : it's still really affordable.

The program is remarkable. Chris Wilson, Daniel Glazman, François Yergeau, Nicole Sullivan, Christian Heilmann, Charles MacCathieNeville, Aaron Leventhal will all be there. And I'm just talking about the famous names. There's a lot more interesting persons speaking there.

On Saturday, I will present a workshop on Firebug and the Web Inspector :

Our web pages are less and less static. After writing the code, we have to understand how they are interpreted by the browsers.

Which CSS rules apply to this element

What is this bug in my JavaScript code ?

Why is this action taking so much time ?

We will discover and use these two tools to answer those questions and much more. We will talk about the Console API and the command line.

I would also like to talk about the new features in WebKit, we still need to figure out how. Julien Chaffraix (another WebKit contributor) will be there too. He'll be part of the browser discussion on Friday.

In addition to the lectures and workshops, there will be a free party on friday night.

This is an awesome organisation. They are all volunteers but it's a professional class event. If you're gonna be there, leave a message here if you want.