deniscope

J'ai récemment écrit une méthode pour faire un cercle en javascript et CSS:

/**
 * Draw a circle in the given color and Element
 * @param radius radius of the circle
 * @param color color of the circle 
 * @param id id of the Element where the circle will be drawed 
 **/
function drawCircle(radius, color, id){
    var circle = document.getElementById(id);
    if (!circle) return;
    circle.style.width  = (2 * radius) + 'px';
    circle.style.height = (2 * radius) + 'px';
    var index = 0;
    for (index = 0; index < (2 * radius); index ++){
        var line = document.createElement('p');
        line.appendChild(document.createTextNode(' ')); 
        line.style.border = 'none';
        line.style.borderSpacing = '0px';
        line.style.padding = '0px';
        line.style.height = '1px';
        line.style.fontSize = '0px';
        line.style.backgroundColor = color;
        var r = Math.abs(radius - index);
        var width = 2 * Math.round(Math.sqrt(radius * radius - r * r));
        line.style.margin = '0px ' +  (radius - width / 2) +
                            'px 0px ' + (radius - width / 2) + 'px';
        line.style.width = width + 'px';
        circle.appendChild(line);
    }
}

Comme un exemple vaut toujours mieux que mille explications. En voici un:

<div id = "circle"></div>
<script>
      drawCircle(100,  'magenta', 'circle');
</script>

Ce qui donne:

L'utilité de la chose est limitée j'en conviens.

Mise à jour: J'ai reçu des milliers de plaintes me disant que ceci n'est pas un cercle mais un disque. Force m'est de constater que vous avez raison. Voici donc une méthode avec l'exemple qui va bien pour créer un cercle (cette fois).

/**
 * Draw a circle in the given color and Element
 * @param radius radius of the circle
 * @param color color of the circle 
 * @param id id of the Element where the circle will be drawed 
 **/
function drawCircle(radius, color, id){
    var circle = document.getElementById(id);
    if (!circle) return;
    circle.style.width  = (2 * radius) + 'px';
    circle.style.height = (2 * radius) + 'px';
    var index = 0;
    for (index = 0; index < (2 * radius); index ++){
        var line = document.createElement('p');
        line.appendChild(document.createTextNode(' '));
        line.style.borderLeft = 'solid 1px '+color;
        line.style.borderRight = 'solid 1px '+color;
        line.style.borderTop = 'none';
        line.style.borderBottom = 'none';
        line.style.borderSpacing = '0px';
        line.style.padding = '0px';
        line.style.height = '1px';
        line.style.fontSize = '0px';
        var r = Math.abs(radius - index);
        var width = 2 * Math.round(Math.sqrt(radius * radius - r * r));
        line.style.margin = '0px ' +  (radius - width / 2) +
                            'px 0px ' + (radius - width / 2) + 'px';
        line.style.width = width + 'px';
        circle.appendChild(line);
    }
}

Voici l'exemple:

<div id = "circle2"></div>
<script>
      drawCircle(100,  'magenta', 'circle2');
</script>

Ce qui donne:

L'utilité en n'est pas vraiment accrue.

Absolutely URL

Je m'apprête à écrire mon quatrième "petit secret de navigateur" lorsque je m'avise de n'avoir pas encore définit le terme. Pallions donc ce grave manquement.

1. Comportement inattendue d'un navigateur pour une situation qui ne l'est pas moins (inattendue).
2. Action surprenant d'un navigateur devant une situation d'exception (rare).

Oui, je suis bien conscient que ce genre de définition n'aide pas vraiment, et je vais donc passer à l'exemple qui n'est rien de moins que le secret numéro 4. Voyez vous même dans l'image ci-dessus, à une situation burlesque, certain navigateur donne un résultat inattendue.

Vous l'aurez sans doute comprit, le secret numéro 4, qui a également sa propre page test, concerne les url relatives. Si le rectangle vert apparait, c'est que l'url est correctement interprétée. Je ne m'étendrais pas plus sur ce secret tellement il est simple, je vous invite à voir les résultats browsershots ci-dessus.

Survoler l'image

La Neural Correlate Society (NCS) a pour objectif de promouvoir les connaissances dans le domaine neural^[1], elle a pour mission d'organiser des événements annuellement pour sensibiliser le public sur des découvertes. Son principal événement est le concours de la meilleure illusion d'optique.

Après cette introduction très pompeuse (mais nécessaire), passons au chose sérieuse.

Les illusions d'optiques sont monnaie courante sur le web, pourtant les lauréats de cette cinquième année du concours NCS sont impressionnants. Le grand gagnant est tout à fait bluffant (Newton aurait eu a s'ajuster les lunettes). Et je mettrais une mention spéciale pour la troisième place (The illusion of sex) qui illustre bien une expression du domaine de la private joke: "la lumière est belle^[2]". Je vous invite, bien évidemment, à parcourir tous les candidats. C'est fou le peu de fiabilité que nous pouvons accorder à nos yeux finalement.

Une livre sinon rien

Lorsqu'un navigateur communique avec un serveur, ils utilisent des codes pour être sûr de bien se comprendre. Ces codes sont naturellement les mêmes pour tous et ne permettre guère l'improvisation. Il n'en reste pour autant pas moins qu'une requête HTTP (car c'est bien de cela qu'on parle) peut être constitué d'une entête et de données. En règle général et sauf contre ordre, les navigateurs affiches les données quelques soient le code envoyé.

Pour illustrer ces communications, j'ai créé une petite page test avec les principaux codes HTTP. Comme le montre le détail de la page test ci dessous, chaque code est appelé deux fois. La première fois (à gauche) avec peu de donnée, la seconde (à droite) avec plus de 512 octets de donnée, les deux pages affichant un carré vert.

Alors pourquoi cette limite des 512 octets? Et bien c'est là que réside le secret (et le jeu de mot foireux du titre également). Si vous regardez de plus près le résultat donné par le site broswershots (ci dessus), le navigateur Internet Explorer réagit différemment aux réponses HTTP en fonction du nombre d'octet envoyé. J'avoue que même si vous pouvez cliquer sur l'image des résultats pour zoomer, la chose n'est pas flagrante, c'est pourquoi, dans ma grande mansuétude, j'ajoute une copie d'écran (ci-dessous) d'une partie de la page test sous Internet Explorer. Encore une fois, Internet Explorer se démarque des autres navigateurs par un comportement que je n'arrive pas vraiment à comprendre. Concrètement, Internet Explorer n'interprète les données envoyées seulement si elles sont assez nombreuses...

Vous avez une explication?

Je viens de terminer le quatrième et dernier album (à ce jour) de "Aya de Yopougon" de Marguerite Abouet. J'ai tout de suite était séduit par le style, le vocabulaire qui regorge de "dêh!" et de "Ô!", tout nous plonge dans l'ambiance d'un Abidjan décomplexé et surtout bien loin des clichés misérabilistes auxquels nous avons droit habituellement lorsqu'on parle de l'Afrique.

L'histoire ressemble à un "Sex in the city" ivoirien, on suit les aventures d'une poignée de personnages (essentiellement féminins) qui gravitent autour d'Aya, une jeune abidjanaise très studieuse qui rêve de devenir médecin.

Je ne résiste pas à l'envie de vous copier un extrait de dialogue pour vous transmettre un échantillon de l'ambiance verbale de cette bd.

Extrait de "Aya de Yopougon" tome 2:

 - Où est ton frère?
 - Albert? il dort.
 - Il sort tous les soirs en ce moment, dêh!
 - Il fait prodada(1) les nuits, maman.
 - Il est  peut-être amoureux...
 - De qui?
 - Mais Adjoua, d'une fille.
 - Elle doit être vilaine dêh, vu comment il la cache.
 - Mais Adjoua, même si elle ressemble à cabri, je vais l'accepter
 - Toi, maman? sans mettre ton palabre(2) dans leur histoire?
 - Mais quel palabre? C'est sa vie Ô...

Et le petit bonus des livres est qu'ils offrent en fin d'ouvrage des recettes de cuisine, des conseils mode... etc... et un très apprécié lexique d'expressions du français ivoirien.

Pour résumer, si vous cherchez un livre dépaysant, facile à lire et qui donne le sourire, je vous conseille vivement de vous procurer cette excellente bande dessinée.

No comment

S'il y a quelque chose dont les bloggeurs sont friands, c'est bien des commentaires. Mais cela n'a rien à voir avec notre sujet, je ne parlerais pas des commentaires de blog (même si je les apprécie) mais bel et bien des commentaires HTML.

Un commentaire HTML débute par les caractères "<!--" et termine par "-->", voilà pour la théorie.

Comme je suis joueur, j'ai essayé plusieurs autres façons d'écrire des commentaires sur cette page test. Lorsque le carré rouge apparait, c'est que le commentaire n'est pas pris en compte.

Les tests sont les suivants:

Comme vous pouvez le constater sur l'image des résultats ci-dessus (toujours obtenus grâce au service en ligne BrowserShots), les commentaires HTML n'ont pas toujours le comportement auquel on s'attend.

Si vous oubliez de refermer votre commentaire, ou si vous le fermez mal (selon les navigateurs), il sera automatiquement fermé au prochain caractère supérieur (>) de votre page. Pour reprendre une expression des expressions régulières, on pourrait dire que les commentaires HTML sont "non greedy" (ou "lazy"). C'est à dire que si le tag de fermeture (-->) n'est pas trouvé, le navigateur fermera "au plus tôt" le commentaire, en l'occurrence au prochain caractère supérieur (>).

Cela laisse sans voix non? (ou plutôt sans commentaire).

Si Champollion m'était conté.

On a tous nos petits secrets, des comportements inavouables que la décence nous fait cacher aux yeux du grand public. Mais voilà, Internet n'est pas constitué seulement du grand public et, immanquablement, tout secret finit par être percé et exploité. Regardons de plus prêt une méthode javascript largement utilisée sur le web: document.write.

Si je me fis à cette documentation en ligne, il est dit:

Do not use the write method or the writeln method on the current document after the document has finished loading unless you first call the open method, which clears the current document window and erases all variables.

Comme je suis taquin, j'ai écrit une petite page pour vérifier cette information. Cette page est constituée de deux pages tests. Chaque page test est constituée d'un gros carré rouge et d'un appel à une méthode qui écrit un gros carré vert. Seul l'appel à cette méthode n'est pas placé au même endroit. Voici le code de la méthode:

 function beGreen(){
     document.write('<div style = "width: 100%; height: 100%; background: green" />');
     document.close();
 }

La première page test appelle la méthode document.write juste après le chargement de la page.

window.onload = beGreen;

L'effet est immédiat, le gros carré vert apparait.

La seconde page test est un peu plus complexe. Le code est également situé dans l'événement onload mais ressemble à ca:

window.onload = function(){    var obj=document.createElement("script");obj.src="onload.js";document.body.appendChild(obj);}

On construit un élément SCRIPT dont la source sera onload.js qui lui contient exclusivement un appel à la méthode beGreen. L'effet n'est pas si immédiat, mais le gros carré vert apparait tout de même, mais... Mais le gros carré vert n'apparait curieusement pas avec tous les navigateurs.

En utilisant l'excellent service en ligne BrowserShots sur la page test, vous obtenez les résultats présentés sur l'image ci-dessus (vous pouvez cliquer sur l'image pour la voir en plus grand). Que passa? Il y a encore du rouge avec les navigateurs Internet Explorer? Pour des raisons qui m'échappent Internet Explorer se refuse à écraser le document sur la seconde page test. Alors pourquoi? Et bien, pour tout dire, je n'en sais rien...

On peut dire que Microsoft sait trouver les arguments pour augmenter les utilisateurs de Silverlight. Cela s'appelle PlayboyArchive, ça ne fonctionne qu'avec le plugin Silverlight et ça porte bien son nom ("PlayboyArchive" pour ceux qui suivent pas). Bon évidemment ce n'est pas directement lancé par Microsoft mais c'est tout de même un joli coup marketing.