Hanblog

WebKit's week - #8

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

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.

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.

À 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.

Paris Web, la conférence qu'elle est bien

Anthony Ricaud — Sun, 19 Oct 2008 16:15:00 +0200

Du 13 au 15 novembre prochains aura lieu la troisième édition de Paris Web. Bon j'aurais du vous en parler plus tôt vu que la période de tarifs réduits est terminée. Mais bonne nouvelle : ça reste plus que raisonnable même à plein tarif.

Au programme, un beau panel. On peut citer Chris Wilson, Daniel Glazman, François Yergeau, Nicole Sullivan, Christian Heilmann, Charles MacCathieNeville, Aaron Leventhal. Et je ne cite là que les noms connus internationnalement. Il reste encore plein de personnes plus intéressantes les unes que les autres.

De mon côté, j'animerais un atelier le samedi sur Firebug et Web Inspector :

Les documents que nous développons sont de moins en moins statiques. Une fois le code écrit, il faut comprendre l’interprétation qu’en font les navigateurs.

Quelles règles CSS s’appliquent à cet élément ?

Quel bug s’est glissé dans mon code JavaScript ?

Pourquoi cette action est lente ?

Nous découvrirons et utiliserons ces deux outils pour répondre à ce genre de questions et plus. Nous parlerons aussi de la Console API et des outils en ligne de commande.

J'aimerais aussi parler un petit peu des nouveautés de WebKit, on va voir sous quelle forme ce sera.

En plus des conférences et des ateliers, il y aura un petit pot libre.

Je vous attends donc tous en grand nombre à cette conférence atypique, organisée par des bénévoles mais de qualité professionnelle. Et si vous comptez passer, laissez un petit commentaire ici histoire de.

WebKit's week - #5

Anthony Ricaud — Mon, 13 Oct 2008 15:20:00 +0200

French version

One month without news is bad. So we resume with only two weeks.

Changes of the week

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

Styling placeholder (37123, 37217)

WebKit supports a placeholder attribute on input elements. This attribute allows you to display a tooltip in the field when the user hasn't enter any content. By default, this tooltip is printed in light gray. Now, we can play with his style using the -webkit-input-placeholder pseudo-element. See the example.

Debugging before onload fires (37313)

Before this fix, it was impossible to debug a part of code running before the resource finished its loading. It wasn't really handy for a tool like the Web Inspector. Fixed !

Origin header for POST requests (37317)

Beginning of implementation for the Access Control for Cross-Site Requests specification. An Origin header, which only contains the domain of the originating page, is added. This allows application to check if the request comes from an authorized domain. Unlike the Referer header, this one doesn't reveal the complete path of the originating page.

Exact line search (37389)

Like Firebug, it's now possible to search for a particular line in the Resources panel. We can use two syntaxes : #123 or line:123. We can add a keyword to only match lines with this keyword.

Fixing SunSpider (37389)

As David Mandelin mentioned on his blog, the regexp-dna test on SunSpider was incorrect. An option only supported in Gecko was in the test and so, this engine was disadvantaged. Eveyrthing is fine now, all the engines do the same test.

News of the week

While I wasn't giving news, three new posts were added to the Surfin' Safari blog:

Introducing Squirrelfish Extreme, the latest evolution of the JavaScript engine.
Full pass of Acid3, the last condition (smooth animation) is now ok.
Web Inspector redesign, a summary of all the evolutions for the last nine months.

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 - #5

Anthony Ricaud — Mon, 13 Oct 2008 03:30:00 +0200

Un mois sans nouvelle, bouh, c'est pas bien. Du coup, on reprend avec seulement deux semaines.

Changements de la semaine

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

Style du texte de remplacement (37123, 37217)

WebKit accepte un attribut placeholder sur les éléments de type input. Cet attribut permet d'afficher une aide dans le champ lorsque l'utilisateur n'a entré aucun contenu. Par défaut, ce texte d'aide est affiché légèrement grisé. On peut désormais jouer sur son style en utilisant le pseudo-element -webkit-input-placeholder. Voir cet exemple.

Débuguer avant la fin du chargement (37313)

Avant cette correction, il était impossible de débuguer une partie de code s'exécutant avant que la ressource ne soit finie d'être chargée. C'était un peu handicapant pour un outil comme le Web Inspector. Corrigé donc.

En-tête Origin pour les requêtes POST (37317)

Début d'implémentation de la spécification Access Control for Cross-Site Requests. Un en-tête Origin, ne contenant que le domaine de la page déclenchant la requête POST, est ajouté. Cela permet aux applications de vérifier que la requête provient bien d'un domaine autorisé. Contrairement à l'en-tête Referer, celui-ci ne révèle pas le chemin complet de la page d'origine.

Recherche de ligne précise (37389)

Comme Firebug, il est possible de rechercher une ligne précise d'un fichier dans le panneau Ressources. On peut utiliser #123 ou line:123 comme syntaxe. Il est même possible d'ajouter un mot pour ne trouver que les lignes contenant ce mot.

Correction du test SunSpider (37389)

Comme l'a mentionné David Mandelin sur son blog, le test regexp-dna de SunSpider était incorrect. Une option supportée uniquement par Gecko était présente et défavorisait donc ce moteur. Tout est rétabli, les moteurs font désormais le même test.

Nouvelles de la semaine

Pendant que je ne donnais pas de nouvelles, trois nouveaux billets sont apparus sur le blog Surfin' Safari :

Introduction de Squirrelfish Extreme, la dernière itération du moteur JavaScript.
Réussite complète de Acid3, la dernière condition (animation correcte) est remplie.
Redesign du Web Inspector, un résumé de toutes les évolutions depuis neuf mois.

WebKit's week - #4

Anthony Ricaud — Mon, 08 Sep 2008 02:15:00 +0200

French version

After a few weeks off, let's get back with webkit news. By the way, the english versions are now aggregated on Planet Webkit.

Changes of the week

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

DOM properties and local variables editing (35835)

Double clicking a property in the sidabar of Elements or Scripts panels now allows you to change the value of this property. You can even enter JavaScript as shown in this screenshot.

console.count support (35842)

Still a Firebug compatibilty stuff. This method allows you to count how many times a specific code has been called.

Editable Metrics tab (35876)

Like Firebug, it is now possible to edit dimensions, padding, borders, margins and position of a box.

Canvas Text support (36060)

Canvas, the element allowing you to draw in 2D now has an API to draw text. You can use the two tests to learn it.

Chrome consequences

Obviously, you haven't missed Google's announcement this week. A new browser using WebKit. And the two projects are working together as you can see with the following commits.

36074 New constants for Skia, V8 and Chromium.
36095 V8 benchmarks are integrated into WebKit.
36097 Little anecdote, some Google developers gave patches under fake names to stay under the radar before the announcement.

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 - #4

Anthony Ricaud — Mon, 08 Sep 2008 01:42:00 +0200

On reprend le rythme doucement, après quelques semaines sans nouvelles. Au passage, les billets en anglais sont désormais recensés sur le Planet Webkit.

Changements de la semaine

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

Édition des propriétés DOM et des variables locales (35835)

En double cliquant sur une des propriétés dans la barre latérale dans le panneau Elements ou Scripts, vous pouvez changer la valeur de la propriété associée. Vous pouvez entrer du javascript comme le montre la capture suivante

Support de console.count (35842)

Toujours pour la compatibilité avec Firebug, une nouvelle méthode s'ajoute à la liste. Elle permet de compter le nombre de fois qu'une ligne a été appelée.

Onglet Metrics éditable (35876)

Tout comme Firebug, il est maintenant possible d'éditer les dimensions, padding, bordures, marges et position d'une boîte.

Support de Canvas Text (36060)

Canvas, l'élément qui permet de faire du dessin en 2D s'est vu ajouté une API pour dessiner directement du texte. Deux tests peuvent vous servir d'exemples.

Conséquences de Chrome

Évidemment, vous n'avez pas manqué l'annonce de Google cette semaine. Un nouveau navigateur utilisant WebKit. Et les deux projets s'entendent, j'en veux pour preuve ces quelques commits.

36074 Nouvelles constantes pour Skia, V8 et Chromium.
36095 Les benchmaks de V8 sont intégrés à WebKit.
36097 Petite anecdote, certains développeurs de Google fournissaient des patchs sous des pseudonymes pour ne pas éveiller l'attention avant l'annonce.

Librairies JavaScript : Connaissez vos outils

Anthony Ricaud — Wed, 27 Aug 2008 23:15:00 +0200

Certes je n'aime pas les librairies JavaScript en général. Beaucoup de code téléchargé, parsé, exécuté pour n'utiliser la plupart du temps qu'un ensemble très réduit de fonctionnalités. Mais bon, mettons ça de côté aujourd'hui car il faut l'admettre, elles rendent tout de même de bons services.

On va quand même garder un point qui m'embête : ces librairies cachent souvent la complexité du code qu'elles exécutent. Pour démontrer cela, mettons nous en situation ! L'exemple sur la page suivante contient 1729 paragraphes de deux mots. Pour une raison évidente^[1], nous voulons cacher le deuxième mot de chaque paragraphe. Pour cela, nous utilisons jQuery de deux manières différentes.

La méthode toggle

$('span').toggle();

Que fait réellement cette simple ligne ? Elle va récupérer tous les éléments <span> de la page puis leur appliquer la méthode toggle. Pour chaque élément trouvé (1729 je rappelle), elle va vérifier s'il est affiché ou non et lui appliqué un style en conséquence. C'est tellement long que votre navigateur risque de bloquer sur la page de test.

La méthode classe

$('div').eq(0).toggleClass('hidden');

Jeu de mot pas terrible mais qui résume bien la situation. Ce code récupère tous les éléments <div> de la page et ne travaille que sur le premier. Sur ce <div>, elle va regarder s'il a la classe hidden et en fonction, lui ajoutera ou enlèvera cette classe. Voilà, c'est tout ce qu'elle fait. Ensuite, c'est le navigateur qui travaille comme un grand grâce à la règle .hidden span {display:none;}. Évidemment, le moteur CSS de votre navigateur fera ça bien plus rapidement.

Conclusion

Évidemment, mon exemple avec autant d'éléments est grossier. Mais tout de même, la différence est fondamentale. Permettez-moi une analogie entre un accès DOM et un accès disque, c'est à dire les parties les plus lentes des deux algorithmes précédents. Dans le premier cas, un premier accès en lecture (récupérer tous les spans) puis 1729 accès en lecture (est-il affiché ?) et 1729 accès en écriture (réglons son affichage). Dans le deuxième cas, nous avons un premier accès en lecture (récupérons tous les divs) puis un accès en lecture (est-ce que la classe est présente ?) puis un accès en écriture (ajoutons ou enlevons la classe). Le calcul est vite fait...

De manière générale, rappelons qu'il faut le moins possible toucher au style d'un élément. Si vous devez accéder plus de deux fois à l'attribut style, il sera plus profitable de passer par une règle CSS. Le moteur CSS sera toujours plus rapide que vous. De plus, vous permettez aux intégrateurs de pouvoir styler votre page en ne changeant que quelques classes. Et votre code d'affichage reste cantonné aux fichiers CSS, merci la maintenabilité.

Notes

[1] parce qu'il faut bien un exemple à la con

WebKit's week - #3

Anthony Ricaud — Mon, 18 Aug 2008 23:33:00 +0200

French version

Changes of the week

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

CSS Animations implementation (35666)

I announced this implementation too early last week. Comparing to the two specs, associated events were missing.

Compatibility with Firebug's API (35676, 35786, 35787)

New commands are available in the console. $, $$, $x, keys, values, profile/profileEnd, clear. You can find these functions descriptions in Firebug's documentation And don't forget the addition of console.dir to list all properties of an object.

SVG tests (35675, 35679, 35680, 35682, 35683, 35695, 35700)

I'm not familiar with SVG but something like 80 tests were added to ensure the right behaviour of the engine. Especially, the elements line, radialGradient, image, marker, mask, cursor, pattern and rect are concerned. Some fixes were made in consequence.

Resizable and closable inspector in docked mode (35719, 35720, 35722)

When the inspector is inside a page, it is now possible to resize and close it. I waited a long time for this. This docked mode is now the default. And to finish with this, the inspector will remember in which mode you've let it.

Loader enhancements (35799, 35801)

In order to always get better performances, some tweaks were made :

Stylesheets get highest priority since the engine won't render before having downloaded every stylesheets.
For each new host, the connection is established as soon as possible in order to reduce the effect of the latency due to it.
When the document and all stylesheets are parsed, there's no need to maintain a queue, we can download all documents, whatever priority they have.
To avoid delaying the initial rendering, resources in <body> are not downloaded if there's no render. This improves by 25%, or 5 seconds, the initial rendering for CNN with a bandwith limited to 300kb/s, interesting for mobile devices.

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 - #3

Anthony Ricaud — Mon, 18 Aug 2008 23:02:00 +0200

Changements de la semaine

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

Implémentation des CSS Animations (35666)

J'avais annoncé un peu rapidement cette implémentation la semaine dernière. Par rapport aux deux spécifications, il manquait les événements associés.

Compatibilité avec l'API de Firebug (35676, 35786, 35787)

De nouvelles commandes sont disponibles dans la console. $, $$, $x, keys, values, profile/profileEnd, clear. Vous trouverez les descriptions de ces fonctions dans la documentation de Firebug. Sans oublier l'ajout de console.dir pour lister les propriétés d'un objet.

Tests SVG (35675, 35679, 35680, 35682, 35683, 35695, 35700)

Je ne suis pas familier avec SVG mais environ 80 tests ont été ajoutés pour s'assurer du bon comportement du moteur. En particulier, les éléments line, radialGradient, image, marker, mask, cursor, pattern et rect sont concernés. Quelques corrections ont eu lieu à cette occasion.

Inspecteur redimensionnable et fermable en mode "dock" (35719, 35720, 35722)

Lorsque l'inspecteur est intégré à la page, il est désormais possible de le redimensionner et de le fermer. J'attendais cela depuis longtemps. Il utilise d'ailleurs ce mode par défaut désormais. Et pour compléter cela, il se rappellera dans quel mode vous l'avez laissé.

Amélioration du chargement (35799, 35801)

Afin d'avoir toujours de meilleures performances, quelques ajustements ont été faits :

Les feuilles de styles ont une priorité plus importante puisque le moteur ne fera pas de rendu tant qu'il n'a pas téléchargé toutes les feuilles.
Pour chaque nouveau domaine, la connection est établie dès que possible, afin de réduire la latence due à l'établissement de cette connexion.
Dès que le document et les feuilles de styles ont été parsées, plus la peine de maintenir de queue de téléchargements, on peut télécharger des documents de n'importe quelle priorité
Pour ne pas retarder le rendu initial, les ressources dans <body> ne sont pas téléchargées tant que le rendu n'a pas commencé. Cela améliore de 25%, soit 5 secondes, le rendu initial de CNN avec une connection limitée à 300kb/s, intéressant pour les mobiles.

WebKit's week - #2

Anthony Ricaud — Mon, 11 Aug 2008 10:31:00 +0200

French version

Changes of the week

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

CSS Animations implementation (35545, 35568, 35580, 35646)

CSS Animation is a work in progress spec written by Apple. Like its mate, CSS Transition, it allows animated effects in CSS. When transitions are just effects computed when a property is changed, animations are called explicitly to trigger a value change. There's a keyframe system to have a precise control of the animation flow. See how it works with the different examples.

Quick edition for numeric values (35561)

For CSS properties accepting numeric values, it is now possible to increase or decrease them with the keyboard. Remember the handy shortcuts changing the amount : with Alt, we jump by 0.1, with Shift or Page Up by 10, with Shift and Page Up by 100.

Profiler's Heavy view (35625)

OK, it's not an amazing novelty but it's a reason to talk about the new profiler. It allows you to get detailed information about the execution time of your JavaScript. Comparing to Firebug, results are displayed as a tree so you can look closer. Two views are available, Tree or Heavy, each one is interesting for different purposes. It's also possible to reduce noise by filtering the results to focus on some code. It reacts to console.profile and console.profileEnd, like Firebug.

Squirrelfish engine improvements (35593, 35639)

This engine was announced two months ago and since, it's always improved. I can't explain what they are doing but the figures speak for themselves : 2.6% and 2.5% progression for the SunSpider test

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 - #2

Anthony Ricaud — Mon, 11 Aug 2008 09:46:00 +0200

Changements de la semaine

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

Implémentation des CSS Animations (35545, 35568, 35580, 35646)

CSS Animation est une spécification en cours d'écriture par Apple. Comme sa copine, CSS Transition, elle permet d'obtenir des effets animés en CSS. Là où les transitions ne sont que des effets à chaque changement d'une propriété, les animations sont appelées explicitement pour provoquer un changement de valeur. Il y a un système de keyframe pour contrôler précisément le déroulement de l'animation. Voyez les quelques exemples pour plus de détails.

Édition rapide de valeurs numériques (35561)

Pour les propriétés CSS acceptant des valeurs numériques, il est désormais possible d'augmenter ou de diminuer cette valeur avec le clavier. À noter, les raccourcis claviers pratiques modifiant la valeur : avec Alt, on saute de 0.1, avec Shift ou Page Up de 10, avec Shift et Page Up de 100.

Heavy view du profiler (35625)

Ok, ce n'est pas une nouveauté révolutionnaire, mais ça me permet de parler du nouveau profiler. Celui-ci permet de récupérer des informations détaillées sur le temps d'exécution du JavaScript dans votre page. Par rapport à celui de Firebug, il affiche les résultats sous forme d'arbre, permettant de regarder plus en détail. Deux types de vues sont disponibles Tree ou Heavy chacune ayant son intérêt. Il est aussi possible de réduire le bruit pour se concentrer sur une partie du code. Il réagit aux commandes console.profile et console.profileEnd, tout comme Firebug.

Améliorations du moteur Squirrelfish (35593, 35639)

Ce moteur a été annoncé il y a deux mois et depuis, il est en constante amélioration. Je ne pourrais pas du tout expliquer ce qu'ils font mais les chiffres parlent d'eux-mêmes : 2.6% et 2.5% d'améliorations pour le test SunSpider