darkBlog

Il est plutôt facile de déterminer le poids chargé réel d'une page : il suffit d'additionner les poids de toutes les ressources (au besoin gzippées, si jamais le serveur web utilise la compression HTTP gzip) la composant (page HTML, feuilles de styles, fichiers javascript, images, bref, tout), et d'ailleurs, il existe plétore d'outils (en voilà un) qui le font très bien.

Il existe toutefois des situations où l'on souhaite déterminer non pas le poids chargé effectif d'une page, mais d'un ensemble de pages, de manière à représenter le poids total engendré par un scénario de navigation. Et là, c'est tout de suite plus délicat ; la méthode décrite précédemment ne peut s'appliquer puisque d'une page à l'autre une partie des ressources seront très certainement en cache dans le navigateur (images, css, js...) et donc non rechargées.

Il serait certes envisageable de retirer du calcul, d'une page à l'autre, les ressources chargées dans les pages précédentes. Cependant, la modification du scénario de navigation impliquerait le recalcul du poids de toutes les pages (ou tout du moins, de toute les pages restantes, selon la position de la modification). Et de toute façon, il est difficile de prédire le comportement du navigateur (est-on sûr que toute ressource déjà chargée est cachée ?), cela dépendant d'un certain nombre de paramètres difficilement maîtrisables (balises meta Cache-Control, Expires ou encore Pragma, requêtes HTTP GET conditionnelles, présence d'un proxy, etc).

Une solution à ce problème est d'utiliser un outil de monitoring de trafic réseau. Initialement destiné à détecter des problèmes sur les réseaux, ce type d'outils (tout du moins celui que j'ai testé : SoftPerfect Traffic Meter (49$, dispo en version d'évaluation)) permet de mesurer le trafic sur une interface réseau, et (entre autres fonctionnalités) d'une machine X (port A) vers une machine Y (port B). Il suffit donc d'indiquer que l'on souhaite mesurer le trafic pour l'adresse IP du site distant (ou du proxy) sur le port 80 vers la machine de test puis d'exécuter le scénario de navigation, et le tour est joué.

L'un de mes plus gros regrets avec Domino, en tant que plateforme de développement web, est l'impossibilité d'inclure nativement des données dynamiques dans un masque ou dans un document, comme il est si naturel de le faire avec la plupart des autres langages orientés web (instructions "include" ou "require" avec PHP, "<jsp:include page=".."/>" avec JSP, etc). C'est pourtant la base de l'architecturation d'une application web que de pouvoir découper une page en unités fonctionnelles statiques (entête, menu, pied de page, etc) et dynamiques (actualités, annuaire, fils de discussion.. bref, tout ce qui est vivant dans une application).

Read next

elt {
max-height: 150px; /* Moz, Opera.. */
height: expression(this.scrollHeight > 150 ? "150px" : "auto"); /* IE */
}

Et tout ça à partir d'IE 5. Merci les dynamic properties !

Tip : ça marche aussi avec max-width

Tip 2 : attention toutefois, le this.height semble faire planter IE..

• 33 mois avec la miss
• 5 prestations
• 2 semaines d'hôtel à Dieppe, 1 à Evreux, 6 à Rouen, 18 à Paris
• 135 jours sans vrai connexion Internet (GPRS)
• Environ 210 heures (8 jours et 18 heures) de train
• 5 jours de vacances à La Rochelle
• 5 visites chez le médecin, 4 chez le dentiste.
• 2 SLF, éditions #8 et #9½ à Notre Dame de Gravenchon
• 4 nouvelles recrues, 79 chroniques et 6 interviews sur Darkmag
• 83 billets et 50150 visites sur darkBlog
• 4 concerts : Cannibal corpse, Kataklysm, Aborted, Fatal / Obituary / Trepalium, Garwall, Anorexia Nervosa, Misanthrope / Antaeus, Arkhon Infaustus, Deicide
• 1 nouveau PC (Asus P4C800-E / PIV 3Ghz / 1Go DDR400), 1 portable (Asus M6BN16-RW) et 1 téléphone (Sharp GX15)
• 3 jeux : Far cry, Doom III et Half-Life²
• 16 livres : Harry Potter 3 et 4 (Rowling), Le seigneur des anneaux (Tolkien - 3 tomes), Bilbo le hobbit (Tolkien), Le Simarillion (Tolkien), Ubik (K. Dick), Le maitre du haut château (K. Dick), Le guide galactique (Douglas Adams - 5 tomes), Par delà le mur du sommeil (HP Lovecraft), Nouvelles histoires extraordinaires (Edgar Allan Poe)
• 8 Bandes dessinées : Trolls de Troy tomes 5, 6 et 7, Lanfeust de Troy tomes 1 et 2, La trilogie Nikopol (la foire aux immortels, la femme piégée, froid équateur)

Une année assez riche et satisfaisante du point de vue personnel, en somme. Et contre toute attente (surtout de la mienne), je pense avoir atteint une bonne partie de mes objectifs pour 2004 établis en janvier dernier : si ce n'est pour Darkmag où mon travail a été franchement insuffisant, il me semble avoir consacré plus de temps à la miss et à ma famille (pas assez à mes amis toutefois, j'en suis conscient), 2 LANs ont eu lieu et ont été de francs succès (même si ce n'était pas gagné pour la dernière, avec le recul je peux affirmer que c'était l'une de mes préférées), j'ai réussi à tenir ce blog plus ou moins en vie (et je commence à peine à percevoir le sens que je souhaite lui donner), et j'ai repris une activité sportive (à savoir le Badminton) pendant 4 mois, activité que j'ai dû abandonner non sans peine lors de mon départ pour Paris.

Il était question, il y a un an, que je m'installe à Rouen. Ce projet est abandonné, et ma situation professionnelle actuelle me laisse penser que le choix le plus judicieux est de m'installer, pendant quelques temps, en région parisienne. Je vais d'ailleurs commencer à prospecter pour un logement dès Janvier. J'espère en tout cas retrouver une situation stable rapidement, l'hôtel commençant à devenir franchement pesant. D'autre part, Darkmag est vraiment en train de décoller depuis quelques mois et est pour la première fois constitué d'une équipe complète et autonome ainsi que d'un réseau de contributeurs sérieux, passionnés et motivés. L'alchimie a enfin pris, rassembler toutes ces personnes fut long (environ 4 ans), le temps est désormais venu que je lui consacre, comme à l'époque de ses débuts, toute mon énergie. 2005 sera, je le souhaite, l'année de Darkmag. J'espère également, dès que ma situation sera plus stable, reprendre rapidement le badminton ; cela me manque terriblement et j'ai hâte de tater à nouveau du volant. Et, bien sûr, être plus proche de mes amis que j'ai en parti délaissé cette année. Tels sont mes objectifs pour l'année qui vient !

Vous le savez fort bien, il existe 2 modèles de boite CSS : le modèle traditionnel (Microsoft) et le modèle standard (W3C), dont la différence réside dans l'interprétation des dimensions ("width" et "height"). Jusqu'à peu, j'avais toujours cru que le Doctype switching permettait de choisir entre l'un des deux modèles, et pour cause, j'avais de très bonnes raisons de le croire puisque c'est écrit noir sur blanc dans cet article de Laurent Denis sur OpenWeb, je cite :

Le DocType switching : forcer l'une ou l'autre interprétation des dimensions.
les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x...) exploitent la technique du DocType Switching (...) [et] opteront pour le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ce qui est (en partie) eronné, je l'ai découvert à mes dépends voilà peu. En réalité, le "Doctype switching" permet de choisir le mode de rendu ("quirksmode"¹ ou "strictmode"), non le modèle de boite CSS. Le mode de rendu "quirks" a pour objectif de reproduire les comportements et erreurs d'interprétation² des anciennes versions des navigateurs (IE4, Netscape 4...) afin de préserver la compatibilité avec les anciens sites, là où le mode "strict" permet aux développeurs aguéris de développer selon les standards. Alors certes, avec Internet Explorer ou Opera, le mode de rendu "quirks" utilise le modèle de boite CSS de Microsoft, puisque c'était ainsi que les anciennes versions desdits navigateurs interprétaient les dimensions. Mais en aucun cas Netscape ne les a interprété de cette manière par le passé, et c'est donc en toute logique que le mode de rendu "quirks" de Gecko n'utilise pas le modèle de boite de Microsoft, mais bien le modèle de boite standard.

Fort heureusement, pour ceux qui, comme votre humble serviteur, souhaitent/doivent développer avec le mode de rendu "quirks", veulent mettre en oeuvre un positionnement par CSS et, par dessus tout, souhaitent que cela s'affiche correctement avec Internet Explorer, Mozilla et Opera, tout espoir n'est pas perdu, et c'est la propriété CSS3 box-sizing qui vient nous sauver.

En effet, cette propriété permet de spécifier le type d'interprétation des dimensions que l'on souhaite utiliser : "content-box" (modèle de boite standard) ou "border-box" (modèle de boite Microsoft). Elle est supportée par IE5 mac, Opera 7 et Mozilla (sous le nom "-moz-box-sizing", et ce parce que CSS3 n'est toujours pas normalisé). Ce qui nous donne dans notre cas :

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Ainsi, seule la spécification conjointe d'une DTD invalide (pour utiliser le mode de rendu "quirks") et de la déclaration précédente permet d'utiliser le modèle de boite Microsoft avec IE 5+ win/mac, Opera et Mozilla. Le doctype switching ne suffit pas !

PS : je tiens à préciser que l'objectif de ce billet n'est pas de casser du sucre sur le dos de Laurent Denis ni d'OpenWeb ; celui-ci comme tous les intervenants d'OpenWeb font du très bon boulot, et c'est un site que j'admire tout particulièrement. Mon but est toutefois d'avertir ceux qui, comme moi, se sont formés avec leurs tutoriaux et auraient pas conséquent mal compris ce qu'est le doctype switching et le mode de rendu "quirks".

¹ : litérallement "mode capricieux". Si quelqu'un a une meilleure traduction, je suis preneur.

² : Pour ceux qui veulent approfondir le sujet, des infos sur le mode de rendu quirks de Mozilla ici et d'Opera là.

Il y a presque un an, je me fendais d'un billet (qui sent désormais un peu le moisi, mais qui m'a toutefois valu un sacré paquet de commentaires et de visites) où je détaillais ma migration d'Outlook Express vers Thunderbird ainsi que ma découverte de ce dernier. Il y a presque un an, je pestais contre l'approche "un compte mail = une arborescence" et tentait de proposer une configuration simulant l'approche Outlook Express "tous les comptes mails = une unique arborescence". Il y a presque un an, j'écrivai "Connaissant les cycles de développement chez nos camarades de la fondation Mozilla, cela ne m'étonnerait guère de voir apparaître une telle fonctionnalité prochainement.". La semaine dernière, avec la mise à jour de mon client Thunderbird en version 1.0 et la découverte, tout à fait par hasard, de la Global Inbox ("Boite de réception globale"), j'ai enfin terminé ma migration.

Read next

Comme vous le savez sans doute, la balise <blink>, balise historiquement introduite par Netscape (et ce dès la première version du navigateur) permettant le clignotement du texte, n'est supportée par aucun navigateur, si ce n'est Netscape (et par conséquent Mozilla) lui même.

Le comportement de cette balise propriétaire peut toutefois être obtenu à l'aide de propriété CSS "text-decoration", qui prend alors la valeur "blink". Et puisque c'est standardisé depuis belle lurette, cela fonctionne sur tous les navigateurs récents. Tous ? Non, car un irréductible éditeur de logiciels résiste encore à l'hégémonie du web et a omis d'implanter cette fonctionnalité dans son navigateur ("et ce n'est pas plus mal", seront tentés de dire certains. Oui, mais n'oubliez pas que c'est ce même éditeur qui est à l'origine de la balise <marquee>. Et là, vous faites tout de suite moins les malins).

Read next

Une faille de sécurité ayant été découverte sur DotClear voilà presque trois mois, c'est tout naturellement que je me suis empressé cette après-midi même de passer à la version 1.2 (darkBlog tournait depuis le début sur la version 1.0rc3). La migration ne s'est pas faite sans douleur (ah tiens, l'architecture du template HTML a changé et une bonne partie des id ont été renommés. Oh, et la structure de la base de données a évolué, aussi) et il se peut que des bugs persistent, alors si jamais vous en recontrez, merci de m'en faire part en commentaire.