Hier, comme beaucoup d'autres, j'ai téléchargé Ubuntu 10.04 LTS (Lucid Lynx) pour mettre à jour mon système. J'ai pris l'ISO plutôt que de faire la mise à jour réseau proposée par le gestionnaire d'updates du système d'exploitation. Comme la dernière fois quand je suis passé de Jaunty Jackalope à Karmic Koala, je me suis trompé et j'ai téléchargé l'image ISO du disque standard plutôt que l'alternate install CD.

J'ai suivi les instructions dans la section Upgrading Using the Alternate CD/DVD pour faire la mise à jour directement à partir de l'ISO téléchargé plutôt que de le graver sur un CD. En premier lieu, il faut monter le fichier comme si c'était un drive (à partir d'un terminal) :

sudo mount -o loop ~/Desktop/ubuntu-10.04-alternate-i386.iso /media/cdrom0

Ensuite, on lance la commande suivante pour démarrer le processus de mise à jour.

gksu "sh /cdrom/cdromupgrade"

Pour un novice, quand on regarde la documentation, on peut généralement transcrire les commandes telles quelles et ça fonctionne. Mais pourquoi ne pas les décortiquer pour mieux comprendre ce qu'on fait ?

Charger l'ISO

• sudo pour exécuter la commande en se substituant à l'utilisateur
• mount pour monter un système de fichiers
• -o pour spécifier la liste des options
• loop permet de faire en sorte que les fichiers du système de fichiers contenus à l'intérieur de l'image soient accessibles
• ~ est un alias pour indiquer le répertoire utilisateur (si votre utilisateur courant est code18, ce sera traduit par /home/code18
  
• le fichier ISO téléchargé
• /media/cdrom0 représente le point de montage où les fichiers pourront être accessibles

• gksu est un programme qui permet d'accéder aux droits administrateurs en mode graphique
• sh pour lancer l'appel à un script Bourne Shell
• le script à exécuter qui se trouve dans le point de montage
  

Quand on programme un script ou une routine, il est généralement d'usage d'avoir une idée sur le temps nécessaire à son exécution. Dans certains cas, on pourra apporter des modifications pour améliorer significativement la performance.

Plusieurs outils existent pour mesurer le temps d'exécution d'un script. Cependant, avec peu de moyens, on peut se tourner vers la bonne vieille méthode de calcul en effectuant deux lectures successives du temps courant.

L'idée est de noter une première fois l'heure au début du script et une seconde fois à la fin. Comme la durée d'exécution peut varier de quelques millisecondes à quelques minutes, nous avons intérêt à utiliser la plus petite unité de mesure du temps pour s'assurer de la meilleure précision.

Voici deux exemples :

JavaScript

var startTime = new Date().getTime();
var elapsedTime = 0;

// votre code à mesurer ici

elapsedTime = new Date().getTime() - startTime;

console.log(elapsedTime);

$startTime = microtime(true);

$arr = range(1, 1000000);
foreach($arr as $a){
  // votre code ici
}

$endTime = microtime(true);
$elapsed = $endTime - $startTime;

echo "Temps d'exécution : $elapsed secondes";

Avec la température qu'on a eu au Québec depuis hier, c'est à se demander où est passé le beau temps. De la neige le 27 avril et ce matin à Montréal ! Ok, juste un peu pour créer un mince tapis blanc et cacher la pelouse qui avait pris ses couleurs suite au beau weekend de 20 degrés. Quand même, tout était en place pour croire que le chapitre nommé hiver était bel et bien terminé.

L'humanité a connu pire. Saviez-vous que l'année 1816 est surnommée l'année sans été ? Paraît-il qu'à Québec, trente centimètres de neige furent observés au début du mois de juin. Juste pour dire que les perturbations climatiques ne datent pas nécessairement du 21ème siècle.

Ce qui m'amène à vous inviter à faire l'écoute de la pièce 1816, The Year Without a Summer du groupe américain Rasputina, tiré de l'album Oh Perilous World (2007). Tout ça explique peut-être pourquoi "Mary Shelley had to stay inside and she wrote Frankenstein" ?

Selon Axis of Awesome, c'est facile de composer une chanson pop : la plupart comprennent uniquement 4 accords. Du moins, c'est ce que "Chicken Little" (à droite) tente de nous démontrer.

Voici une version de la vidéo qui comprend le titre de chaque pièce. C'est étonnant de voir les similitudes. Un numéro très réussi !



Les 4 même accords ? Peut-être un hasard mais comme dirait Perceval dans Kaamelott : c'est pas faux.

Les modules de gestion de contenu pour le web ont toujours été très populaires. Toutes les entreprises de développement web créent leurs propres CMS, d'autres utilisent Joomla et tous les clients veulent en utiliser, surtout pour ne pas avoir à se casser la tête avec le HTML.

Quand certains clients se plaignent qu'ils font de la rédaction par l'interface web et qu'ils perdent leur données non-sauvegardées, je peux comprendre que c'est fâcheux d'avoir à recommencer. Certains s'accrochent dans un lien ou le bouton back du fureteur, d'autres possèdent une souris dont un bouton latéral configurable permet de revenir à la page précédente. Mais le plus souvent, c'est que le curseur est hors focus de la boîte d'édition et que la personne appuie sur la touche backspace du clavier pour retirer un bout de phrase et hop!, il revient à la page précédente et le contenu est perdu.

C'est là qu'on peut intervenir en tant que programmeur. Il est possible de contrôler en partie les actions de navigation sur le fureteur à l'aide de l'événement onBeforeUnload. Du moins, c'est ce que j'ai mis en place et qui fonctionne au moins sur Firefox 3.x et Internet Explorer 8.

Il suffit d'attacher une fonction à l'événement onBeforeUnload que le navigateur pourra interpréter au moment où l'utilisateur changera de page (volontairement ou non).

Avec le framework Prototype (optionnel) :

Event.observe(window, 'beforeunload',
   function(event){
       event.returnValue = "Le contenu n'est pas enregistré.";
   }
);

Event.stopObserving(window, 'beforeunload');

window.onbeforeunload = function(){
   return  "Le contenu n'est pas enregistré.";
}

window.onbeforeunload = function(){}

Vous savez à quel point je suis fan de Failblog. C'est toujours avec un brin d'humour qu'on découvre des échecs hors-contextes qui nous font sourire pendant les pauses au bureau. Et quand j'ai vu Frédéric Harper sur Twitter dire qu'il avait fait un lapsus comique, je n'ai pas pu m'empêcher de lui envoyer cette annonce Kijiji qui m'a bien fait rire et que j'ai trouvé sur FailQc.com, un penchant francophone de Failblog dédié à ce qu'on trouve au Québec.

Épileptique neuf à vendre pour cause de manque de place dans le condo. Elliptique peut-être ?



Au moment de la publication de ce billet, 681 curieux s'étaient déjà pointés sur la page en question (toujours en ligne ici).

Sinon, d'autres mentions honorables que j'aime bien :

• En page d'accueil de Tequila Taco House, visite le site en version Françoise
• La preuve de flaque ami de sport
• Une pancarte assez incroyable vue sur Google Street View (Montréal)
  
• Le vandalisme sur la pancarte du Champ des Buttes me fait penser à mon histoire de Grosses-Roches

Il y a quelques années, ma blonde et moi avons décidé de tenter l'expérience de brasser notre propre bière à la maison. Nous avons acheté l'équipement nécessaire dont une cuve et une tourie d'une capacité de 20 litres, ce qui nous a donné environ 55 ou 66 bouteilles de 330 cl (coût de production d'environ 30 sous par bouteille).

Pour une première expérience, le résultat était surprenant. C'était une bière brune de type ale anglaise qui goûtait un peu comme la Bass. Hier soir, en recevant des amis à souper, nous parlions de la fabrication de vin et de bière et ça m'a donné le goût d'essayer et j'ai ressorti mes notes que j'avais pris à l'époque.

Comme le processus de fabrication est artisanal, on est toujours curieux de connaître le pourcentage d'alcool contenu dans la bière. Pour calculer la densité, il faut utiliser un densimètre.

Sachant qu'un litre d'eau a une masse de 1 kg, la densité de l'eau est de 1,000. Or, l'alcool pur a une densité de 0,792. Ce qui veut dire qu'un mélange d'eau et d'alcool aura une densité se situant entre 0,792 et 1,000. Par contre, au début du processus de fabrication, le moût de bière qui contient le sucre possède une densité plus élevée à 1,000. Lorsque celui-ci se sera transformé en alcool, la densité diminuera.

Mesure initiale du moût de bière : 1,040
(1,040 - 1,000) x 1000 = 40 degrés

À partir de la densité initiale, on peut avoir un aperçu du pourcentage d'alcool maximum qu'on obtiendra :

40 degrés / 7,6 = 5,26 % d'alcool

Lorsque la fermentation est terminée, on peut procéder à la mesure finale de la densité : 1,005.

En soustrayant la densité initiale et la densité finale, on obtient l'atténuation :

1,040 - 1,005 = 0,035, donc 35 degrés

L'atténuation divisée par une constante de 7,6 nous donne le pourcentage d'alcool contenu dans le mélange :

35 / 7,6 = 4,60 % d'alcool

Bien entendu, d'autres facteurs peuvent contribuer à faire varier légèrement le pourcentage, comme par exemple la température ambiante. Mais comme on brasse la bière de façon artisanale sans avoir l'intention de vendre le produit, nous laisserons le soin aux scientifiques de calculer le tout avec plus de précision. De notre côté, nous nous contenterons de déguster notre création avec des amis.

Je n'ai jamais laissé ma scolarité interférer avec mon éducation.

En entête du livre Rework, une recommandation aussi accrocheuse par Seth Godin place la barre haute avant même d'avoir débuté la lecture : Ignore this book at your own peril. Est-ce que le livre est à la hauteur des attentes et en vaut-il les 17$ que j'ai dépensé sur Amazon ? De prime abord, je répondrais oui car il est plein de bons sens. Mais il ne faut pas s'attendre à des révélations extraordinaires.

Jason Fried et David Heinemeier Hansson décrivent en chapitres concis l'approche qu'ils ont appliqué au sein de leur entreprise 37signals (créateurs de Ruby on Rails), une PME à succès de 20 employés et qui génère quelques millions de revenus à ce qu'on dit. Appliquer leurs conseils n'est pas un gage de réussite pour autant. Comme ils le disent eux-même, ça vaut pour eux et il ne faut pas tenter de les imiter en tout point.

Il faut voir ce livre comme un guide qui tend à remettre en questions les notions académiques traditionnelles de la gestion d'entreprise. Chaque sujet présenté mérite qu'on se pose des questions face à notre approche du travail et c'est ce qui est encouragé par les auteurs. Faire à notre façon quoi qu'en disent les autres.

Travaillant moi-même pour une PME en informatique, j'ai trouvé leurs commentaires pertinents et souvent applicables à notre situation. Par exemple :

Resumé are ridiculous
Un CV est souvent bourré de demi-vérités. Oh que oui. J'ai vu le curriculum vitae d'un ancien employé qui a quitté il y a plusieurs années et il indiquait dans ses réalisations avoir conçu avec nous le site d'une vedette de la scène artistique québécoise alors qu'à mon souvenir, il avait à peine travaillé une heure sur le projet pour corriger un bogue. Un autre s'attribuait tous les mérites de prix que l'entreprise avait remporté quelques années avant son arrivée dans l'équipe!

Years of irrevelance
Toujours relatif. 5 ans d'expérience dans une entreprise qui n'évolue pas ou présente peu de défis peut être équivalent à 1 an dans une autre.

Forget about formal education
Il faut que des gens efficaces soient en place. J'ai vu des bacheliers en informatique au dessus de leurs affaires et qui n'arrivaient pas à la cheville du talent de programmeurs juniors sortant du collège.

Une mention spéciale aux leçons apprises à l'école qu'il faut oublier une fois sur le marché du travail. Quelques exemples :

• Plus un document est long, plus il importe
• Utiliser les grands mots est impressionnant / imposant
• Il faut écrire un nombre minimum de mots pour faire le point et se faire comprendre

Je profite de l'entracte de ce qui pourrait être le dernier match de la saison de nos Glorieux (note pour les lecteurs hors-Québec : club de hockey Canadiens de Montréal) pour parler d'un petit truc curieux qui apparaît dans Microsoft Word. Ce n'est pas tout à fait un easter egg mais ça mérite au moins une mention :

1. Ouvrez Microsoft Word (2003 - 2007)
   
2. Entrez ceci : =rand(10,1)
3. Regardez ce qui apparaît dans la page
   

• Une phrase commune pour tester les machines à écrire et les claviers d'ordinateurs
• Insérer un exemple de texte dans un document Word

Jusqu'à maintenant dans mon travail, j'ai optimisé les sites web en utilisant les suggestions provenant soit de l'extension YSlow de Yahoo!, soit de Page Speed de Google (soit dit en passant, les deux sont excellents pour l'apprentissage de bonnes pratiques). Compresser les librairies JavaScript et CSS (avec YUI Compressor), compression HTTP avec gzip, minimiser le nombre de requêtes HTTP et utiliser le cache ne sont que quelques exemples qui permettent d'accélérer le chargement des pages.

En toute honnêteté, le score maximum (depuis que je l'utilise) que j'ai obtenu dans l'analyse Page Speed sur la page principale d'un de mes projets avancés a été de 88/100. Impossible d'atteindre la perfection malgré tout le fine tuning.

Un des points proposés par PageSpeed est d'utiliser l'attribut defer dans la balise script des librairies JavaScript attachées à la page. Ceci permet d'indiquer au fureteur qu'il peut choisir de ne pas attendre que le code JavaScript soit fini d'être interprété pour poursuivre le chargement de la page, ce qui accélère l'affichage du contenu HTML. Bien entendu, il faut que le script ne crée aucun contenu, par exemple aucune instruction document.write().

Je n'avais pas l'habitude d'utiliser defer car seul Internet Explorer le supportait (depuis la version 4). Mais plus récemment, Firefox 3.5 et les versions suivantes tiennent compte de l'attribut defer. Sans surprise, des statistiques que j'ai consulté montrent que le pourcentage des développeurs qui utilisent defer est encore assez faible.

Faisons un essai avec le snippet HTML suivant :

<div id="myDiv"></div>
<button type="button" id="btn">OK</button>

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
   $j = jQuery.noConflict();
   $j(document).ready(initialize);

   function initialize(){
       $j('#myDiv').html('Hello World');
       $j('#btn').click( function(){ alert('Click'); } );
   }
</script>

• Si je place un attribut defer="defer" sur le chargement de la librairie, la console Firebug de Firefox me lance l'erreur : jQuery is not defined. C'est normal, elle devrait être chargée à la fin, après le bloc de code JavaScript.
• Si j'ajoute defer="defer" au bloc de code, je n'ai pas plus de succès, la même erreur se produit.
• Si je retire defer du chargement de la libraire, tout se passe bien.

<script type="text/javascript" src="js/code-de-la-page.js" defer="defer"></script>

Une personne qui connaît bien mes goûts pour l'absurde m'a recommandé le visionnement de ce film : The Horribly Slow Murderer with the Extremely Inefficient Weapon par Richard Gale.

L'histoire épique de la rencontre d'un homme avec ce qui pourrait être l'assassin le plus impitoyable de tous les temps. Il te tuera, même si ça doit prendre le reste de ta vie !

Prévoyez 10 minutes pour regarder la vidéo, ça en vaut le coût.



Déjà vu par plus de 4 millions de personnes sur YouTube, je me suis : coudonc, j'étais où quand le buzz a eu lieu ? Coté 8.1 sur 10 sur IMDB.

Il n'y a pas si longtemps, quand on parlait de postes de développeurs dans les technologies de l'information, on pouvait comprendre la classification de deux façons. Les grosses boîtes fonctionnaient par niveaux hiérarchiques monotones (level 1, level 2, level n) alors que les plus petites préféraient utiliser les termes junior, senior et gourou (guru).

Depuis quelques années, on a vu apparaître des buzzwords spécifiques au monde de la programmation. Dorénavant, chacun peut s'auto-proclamer programmeur ninja, samurai ou même rockstar. Même les offres d'emplois ont adopté ces nouvelles appellations. Pourquoi est-ce qu'on se donne des titres si farfelus ? Est-on vraiment à la recherche d'un titre ou c'est pour ridiculiser la chose ?

Imaginez si c'était appliqué à d'autres domaines, comme les dentistes ou la comptabilité. Votre préparateur de déclaration de revenus se qualifie-t-il de sumo du calcul fiscal ? C'est pas sérieux...

Le titre est tellement peu important, c'est le résultat qui compte. Mais tant qu'à faire un peu de dérision, quels autres titres pourraient s'appliquer à notre domaine ?

J'aimerais attirer votre attention sur une particularité du serveur web Apache que j'ai de la difficulté à m'expliquer. Quelle est l'utilité d'autoriser plusieurs extensions aux fichiers déposés sur le serveur ?

Ce que je veux dire, c'est que normalement, si un fichier se nomme cornichon.jpg, Apache déduit immédiatement que le handler par défaut qui le prendra en charge est celui pour les images. Du même coup, on s'attend à ce que page.php.jpg soit reconnu comme un jpeg. Le reste fait parti du nom de fichier. Mais la documentation d'Apache 2.2 indique qu'un fichier peut être nommé welcome.fr.html ou welcome.html.fr et qu'il ne fera pas la différence puisque l'extension .fr est inexistante et qu'aucun mime-type ne correspond. Il en déduit qu'il doit utiliser l'extension alternative, soit .html.

Ce qui, d'une certaine façon, ouvre la porte à une vulnérabilité. Supposez que vous autorisiez l'envoi de fichier sur le serveur par les visiteurs. Peut-être aurez-vous tendance à vérifier le type de fichier envoyé en comparant l'extension avec une liste d'extensions proscrites ? Vous ne désirez surement pas qu'ils puissent envoyer des fichiers .php qui s'exécuteraient sur le serveur ! Mais si le visiteur nomme son fichier page.php.code18, l'extension .code18 n'a pas de handler reconnu et Apache tentera de le résoudre en tant que script PHP. Bonjour le désastre.

Mes recommandations :

• comparer l'extension principale avec une liste d'extensions autorisées avant d'accepter le fichier (celles prises en charge par les handlers)
  
• vérifier le mime-type du fichier
• conserver un seul point dans le nom du fichier et remplacer les autres (par exemple avec un tiret ou un underscore)
  

Dans plusieurs langages de programmation, quand vient le temps de manipuler des valeurs monétaires, on doit tenir compte d'un certain nombre de décimales. En SQL, plusieurs préféreront utiliser le type numeric en indiquant la précision plutôt que de prendre le type money qui se limite à 4 décimales.

Quand le montant contient plus de 2 décimales, on voudrait certainement tronquer celles-ci pour obtenir un nombre sous cette forme : 22,58 $. On pourrait utiliser le truc classique de multiplier par 100 pour obtenir une valeur entière et de le diviser à nouveau par 100 pour conserver deux chiffres après la virgule :

var num = 22.5812;
console.log(Math.round(num*100)/100); // 22.58

var num = 22.5009;
console.log(Math.round(num*100)/100); // 22.5

var num = 22.00; // ou 22
console.log(Math.round(num*100)/100);  // 22

num = 22;
console.log( num.toFixed(2) ); // 22.00

num = 22.5;
console.log( num.toFixed(2) ); // 22.50

num = 22.4949;
console.log( num.toFixed(2) ); // 22.49

num = 22.5456;
console.log( num.toFixed(2) ); // 22.55

num = 22.9900;
console.log( num.toFixed(2) ); // 22.99

console.log(9.99 * 2); // 19.98
console.log(9,99 * 2); // oups, 9198 !

Un archéologue est un époux rêvé : plus sa femme vieillit, plus il s'intéresse à elle.

Il y a quelques années, la CBC (Canadian Broadcasting Corporation), le volet anglophone de la Société Radio-Canada, avait rediffusé à la télévision des épisodes de l'émission pour enfants Fraggle Rock.

Étant fan lorsque j'étais petit, je m'étais mis à en regarder un pour me remémorer des souvenirs (je possédais toute la collection des figurines incluses dans les Joyeux Festins vendus chez McDonalds). En portant un regard avec mes yeux d'adulte, j'avais cru avoir repéré un détail amusant mais troublant.

Gobo, un des Fraggle, sortait de son univers par un tunnel qui débouchait à l'atelier de Doc pour y récupérer une carte postale de Uncle Traveling Matt. Afin de se cacher du chien Sprocket et pour ne pas être aperçu par son propriétaire, la marionette se tenait derrière des boîtes en carton dont une semblait arborer le logo de la SAQ (Société des alcools du Québec) ! Du moins, j'avais l'impression que ça lui ressemblait vraiment. Remarquez que je peux me tromper mais j'ai toujours voulu éclaircir ce mystère.

Sachant que la production de la série s'est faite à Toronto (Ontario, Canada), la province voisine du Québec aurait bien pu glisser par mégarde une de ces boîtes dans le décor. Ce qui révélerait un petit problème d'éthique.

J'aimerais retrouver cette séquence. Est-ce que quelqu'un possède les DVD et pourrait me confirmer qu'il a vu la même chose ? Un screenshot serait apprécié.

En attendant une réponse, je vous laisse avec le vidéo du thème francophone de l'émission.



Down at Fraggle Rock!

Vous êtes familier avec le caractère � ? Les mots dans votre page web s'affichent comme ceci "développement", avec des ?, des ou encore des carrés remplacent certains caractères ? C'est que vous avez un problème d'encodage ou de jeu de caractères.

Souvent, c'est parce que le charset n'est pas spécifié correctement dans la page. Assurez-vous autant que possible d'utiliser l'encodage UTF-8 et de placer ce meta tag (doit être le premier pour être certain que l'interpréteur en tienne compte) :

<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />

Ce midi, sur mon heure de lunch, je lisais la plus récente édition de 2600, The Hacker Quarterly (vol.37, no.1), mon premier numéro à vie que j'ai acheté par curiosité de voir ce qu'il présentait (je suis pourtant loin d'être un hacker).

Dans la section Speak (courrier des lecteurs, page 43), "Grumble" fait mention du Death Star Logo qui fait référence à une compagnie de communications. Ne sachant pas de quoi il était question (surtout qu'ils sont discrets au Québec), une recherche sur Google m'a permis de comprendre qu'il parlait d'AT&T.

En effet, leur ancien logo, dont le design remonte à 1983 fait référence à l'Étoile de la mort de Star Wars. Simple hasard ou clin d'oeil bien placé ?

Depuis, ils ont changé de logo mais certains se sont amusés à le transformer pour qu'il colle encore à son surnom.

En fouillant un peu, j'ai vu qu'il y avait des rencontres de lecteurs du magazine 2600 à Montréal qui se tiennent les premiers vendredi de chaque mois au 1000 de la Gauchetière. Pourquoi avoir choisi l'édifice Bell pour les réunions du 2600? Comme le groupe l'explique sur son site web, si on considère les débuts du hacking et phreaking qui a débuté sur les lignes de téléphone, avoir choisi l'édifice Bell est symbolique (voir Captain Crunch).

Quelqu'un est déjà allé à une de ces rencontres (à Montréal ou ailleurs) ? À quoi peut-on s'attendre ? J'ai vu qu'il existait un site qui disait détester 2600 et qui remettait en question sa crédibilité et sa raison d'être : 2600 sucks. Qu'est-ce que vous en pensez ? Vous êtes d'accord ou non avec cette initiative ? Pour ma part, les trucs de conspirations me font un peu trop penser au livre Jaune no. 5 écrit par des hurluberlus. Ce qui me fait penser que si vous voyez ce livre, dites-vous qu'il vaut mieux mettre son argent ailleurs.

Je viens d'en faire mention sur Twitter mais comme j'en ris encore, je me dois de le publier sur mon blogue pour le partager avec vous. C'est un vidéoclip reprenant le thème de David le Gnome en version métal, interprété par le groupe italien Elvenking.



Il paraît que c'était un poisson d'avril :-)

Une chose que je vois souvent dans du code PHP, c'est de faire une boucle for avec comme condition le count(array) à l'intérieur.

for($i=0 ; $i < count($arr); $i++)

// générer 1 million d'enregistrements
$arr = range(1, 1000000);

// obtenir le temps de départ
$start = (float) array_sum(explode(' ',microtime()));

// boucle vide
for($i=0 ; $i < count($arr); $i++){
   // on ne fait rien ici...
}

// obtenir le temps de fin
$end = (float) array_sum(explode(' ',microtime()));

// imprimer à l'écran la différence
echo sprintf("%.4f", $end-$start) . " secondes";

$arr = range(1, 1000000);
$count = count($arr);

for($i=0 ; $i < $count ; $i++)

J'ai reçu hier soir un courriel intéressant d'un lecteur (Ben, pour le nommer) avec qui, de toute évidence, je partage des intérêts musicaux communs. Tout comme moi, il aime John Zorn et l'a vu à quelques reprises en spectacle. Seulement, lui c'était au Festival international de musique actuelle de Victoriaville (Fimav), un événement pour lequel, malheureusement, j'ai toujours "choké" à aller assister malgré la courte distance qui le sépare de Montréal (environ 2 heures).

Avant d'aller plus loin, je dois préciser que le but de son message était de partager le lien d'un site web d'un artiste qui participera au festival et qui constitue en soi une prouesse technique en JavaScript : Shalabi Effect. Admirez le chargement, la transition et l'affichage de l'image en ASCII (sélectionnez en une portion pour constater la taille des caractères). Mauvais pour le référencement mais excellent pour le bouche à oreille !

Voilà c'est dit. Vous pouvez poursuivre la lecture si la musique vous intéresse.

Dans son message, il me dit qu'il a vu 2 fois Fantômas en spectacle et John Zorn à 3 reprises. Chanceux! La dernière fois qu'on m'a dit quelque chose de semblable, c'était une employé de la Bouquinerie du Plateau à qui je jasais et qui me disait qu'elle venait juste d'aller le voir à "Victo". À ce moment-là, j'avais un brin de jalousie en moi. Par la suite, j'ai pu assister à une performance de Zorn avec Masada en 2006 au festival de Jazz de Montréal (Théâtre Maisonneuve) et une autre fois dans une salle obscure dans Lower East Side à New York, The Stone. C'était assez particulier car la salle est minuscule et plusieurs artistes viennent faire de l'expérimentation. Il y en avait un qui a improvisé quelque chose en lançant dans les airs son fil de guitare qui produisait une rythmique lorsqu'il retombait. Essayez d'imaginer la scène !

John Zorn est un personnage difficile à cerner. Même à travers le documentaire Bookshelf On Top Of The Sky, c'est à peine suffisant pour avoir une vague opinion de ce virtuose de la musique. Dommage car même si certaines séquences sont bonnes, la réalisatrice Claudia Heurermann n'aide pas la cause puisqu'il y a à peu près autant de footage d'elle que de son sujet, ce qui a tapé sur les nerfs de la plupart de ceux que je connais qui ont visionné le DVD.

Pour en revenir au Fimav, qui aura lieu du 20 au 23 mai 2010, John Zorn sera absent cette année (zut) mais j'ai vu dans la programmaton que René Lussier présentait un projet avec Michel Langevin de Voivod. Je ne sais pas à quoi on peut s'attendre mais ça devrait être spécial. Je me souviens avoir entendu un truc de Lussier assez expérimental qui me faisait penser à Steve Reich (The Cave je crois, allez savoir pourquoi!). Ça s'appelait Le trésor de la langue.

Une autre promesse que je me suis fait si je passe dans le coin, ce sera d'aller manger une poutine à la cantine Annie. Selon plusieurs personnes, parait-il que c'est un détour obligé.

Cantine Annie
27, boul. Arthabaska Est
Victoriaville
819-751-2756

Cela dit, merci Ben pour ton commentaire.

Voici une alternative intéressante à l'extension PHP GeoIp de MaxMind. Contrairement à cette dernière, ce qu'il y a de bien, c'est qu'il n'y a absolument rien à installer car seule une requête HTTP GET est nécessaire pour obtenir les résultats. Un genre de service web simpliste.

Avant de poursuivre, je vous redirige à l'interface web de GeoBytes IP Locator pour en faire l'essai. Suite à cela, il sera possible d'extraire les résultats de la requête par programmation. Cet exemple est en PHP mais ce n'est pas contraignant vu le mode de récupération avec GET.

$url = 'http://www.geobytes.com/IpLocator.htm?GetLocation&template=php3.txt&IpAddress=';
$ip = '67.205.76.55';
$tags = get_meta_tags($url . $ip);

print_r($tags);

Array
(
 [known] => true
 [locationcode] => CAQCMONT
 [fips104] => CA
 [iso2] => CA
 [iso3] => CAN
 [ison] => 124
 [internet] => CA
 [countryid] => 43
 [country] => Canada
 [regionid] => 35
 [region] => Quebec
 [regioncode] => QC
 [adm1code] => CA10
 [cityid] => 1182
 [city] => Montreal
 [latitude] => 45.5000
 [longitude] => -73.5830
 [timezone] => -05:00
 [certainty] => 94
)

Il faut en parler et le prendre au sérieux car ça représente une percée majeure dans le futur du développement web : le HTML 5.

Cela dit, savez-vous si votre fureteur est suffisamment prêt pour supporter le standard ? Vous pouvez effectuer le test HTML 5 mis au point par Niels Leenheer. Rendez-vous simplement sur le site avec votre fureteur préféré pour en avoir un avant-goût.

Voici un sommaire des résultats que j'ai obtenu en date d'aujourd'hui sur 3 fureteurs populaires :

Quand un homme a faim, mieux vaut lui apprendre à pêcher que de lui donner un poisson.

On le sait, les dirigeants d'entreprises aiment les chiffres, surtout quand ils sont disposés en diagrammes. Quand mon patron m'a demandé d'incorporer des graphiques de statistiques (communément appelés "charts") à une application web, j'ai fait des recherches pour trouver quelque chose d'intéressant à l'oeil et malléable pour qu'un intégrateur ou un programmeur puisse effectuer son travail rapidement tout en ayant des résultats satisfaisants. Tout ça pour parler le même langage que mon patron.

C'est comme ça que j'ai découvert l'existence de FusionCharts, un produit indien très riche en possibilités. La license complète de FusionCharts v3 se détaille à 500$ mais pour commencer, on peut se contenter d'utiliser FusionCharts Free version 2.2, plus limitée mais suffisante pour mes besoins. Elle compte 22 types de graphiques animés en Flash, dont plusieurs caractéristiques sont personnalisables. Il y a même la possibilité de faire des diagrammes de Gantt (approved by my boss!). Voyez les différences entre les versions gratuite et payante pour choisir celle qui vous convient le mieux.

Lorsque vous aurez téléchargé le zip, décompressez-le et ouvrez Index.html pour obtenir de la documentation et des exemples. Pour vous faire une démonstration plus concrète, je vais tenter de reproduire mes statistiques de visites (fournies par Statcounter.com) pour que vous puissiez voir le résultat.

Statcounter



La première chose à faire pour générer un graphique, c'est d'avoir une source de données à notre disposition. J'ai généré un fichier XML statique qui respecte les spécifications de FusionCharts. Il aurait aussi pu provenir d'une page dynamique qui génère à la volée les données XML.

data.xml

<graph caption='Code 18 - Monthly statistics' subcaption='April 2009 - March 2010' divlinecolor='DDDDDD' numdivlines='7' showAreaBorder='1' areaBorderColor='000000' showNames='1' formatNumberScale='2' rotateNames='1'  decimalPrecision='0'>

<categories>
<category name='April' />
<category name='May' />
<category name='June' />
<category name='July' />
<category name='August' />
<category name='September' />
<category name='October' />
<category name='November' />
<category name='December' />
<category name='January' />
<category name='February' />
<category name='March' />
</categories>

<dataset seriesname='Page loads' color='7DC622' showValues='1'>
<set value='2116' />
<set value='2464' />
<set value='3426' />
<set value='4830' />
<set value='4920' />
<set value='7269' />
<set value='7673' />
<set value='8078' />
<set value='8340' />
<set value='9746' />
<set value='9234' />
<set value='11565' />
</dataset>

<dataset seriesname='Unique visitors' color='0069B3' showValues='1'>
<set value='1740' />
<set value='2001' />
<set value='2650' />
<set value='3940' />
<set value='3820' />
<set value='5643' />
<set value='6075' />
<set value='6477' />
<set value='6589' />
<set value='7638' />
<set value='7455' />
<set value='9298' />
</dataset>

<dataset seriesname='Returning visitors' color='EE9C00' showValues='1'>
<set value='161' />
<set value='257' />
<set value='327' />
<set value='511' />
<set value='480' />
<set value='681' />
<set value='762' />
<set value='764' />
<set value='808' />
<set value='876' />
<set value='944' />
<set value='1399' />
</dataset>

</graph>

• Les catégories correspondent aux noms sur l'axe des x (les mois)
  
• Chaque bloc dataset correspond à une ligne de données
  

<div id="graphHolder"></div>

<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/FusionChartsFree/JSClass/FusionCharts.js"></script>

$(document).ready( initFusionCharts );

function initFusionCharts(){
   var chart = new FusionCharts("../Charts/FCF_MSColumn2D.swf", "ChartId", "600", "400");
   //var chart = new FusionCharts("../Charts/FCF_MSColumn3D.swf", "ChartId", "600", "400");
   //var chart = new FusionCharts("../Charts/FCF_MSArea2D.swf",  "ChartId", "600", "400");

   chart.setDataURL("data.xml");
   chart.render("graphHolder");
}

Création vidéo très intéressante de Patrick Jean dans le décor de la ville de New York. En vedette : une tonne de pixels, le jeu de Tetris avec les bâtiments, Space Invaders, Pac Man, Donkey Kong sur l'Empire State Building, etc... Très réussi !

Je me suis réveillé ce jour-là et j'avais 40 ans. Je ne me sentais pas très bien mais j'espérais que ma femme me souhaiterait un Joyeux Anniversaire. A ma grande déception, elle ne m'a même pas dit bonjour. Au petit-déjeuner, mes enfants ne m'ont pas parlé.

Au bureau, ma secrétaire m'a dit : Joyeux Anniversaire ! J'étais heureux, car au moins elle s'était souvenue de moi, mais à ma grande tristesse, mes collègues m'avaient oublié.

À midi, ma secrétaire m'a dit : Pourquoi ne pas déjeuner ensemble? J'ai dis que c'était la plus belle chose qu'on m'avait proposée ce jour. Nous sommes alors partis prendre un verre et manger ensemble.

Sur le chemin du bureau, elle m'a dit : "Pourquoi retourner au boulot si tôt un tel jour ?" et me proposa de passer chez elle. Arrivés à son domicile, elle m'a offert un verre et m'a dit : "Cela ne te dérange pas que je me mette à l'aise ?". J'ai répondu : "Quelle question!"

Et dans ma tête je me disais que ça pouvait être une expérience intéressante. Elle est partie dans sa chambre et est revenue avec un énorme gâteau... suivie de ma femme, de mes enfants, de mon patron et de tous mes collègues.

Et moi comme un con, j'étais à poil dans le salon...

Conasse.

Petite blague tirée de mon répertoire Outlook qui contient des trucs drôles que mes contacts m'ont envoyé au fil du temps. Dont beaucoup trop de diaporamas Powerpoint!

Essayez de comprendre cela... Lundi soir (5 avril 2010), j'ai passé une commande sur le site web d'Amazon Canada. Les items, tous en stock, étaient les suivants :

• Rework de Jason Fried et David Heinemeier Hansson (37signals). 16,89$
• Freakonomics de Steven D. Levitt et Stephen J. Dubner. 9,99$
  
• The Best of 2006, A Hacker Odyssey de Emmanuel Goldstein. 27,58$

• FREE Super Saver Shipping (entre 4 et 7 jours ouvrables)
• Express (entre 3 et 5 jours ouvrables). Supplément de livraison : 9,80$
  
• Priority (2 ou 3 jours ouvrables). Supplément de 16,96$
  

• En provenance de Mississauga (L5R 3W5)
  
• Boîte de 6 lbs
• Dimensions de 12 x 9 x 5 pouces
• Valeur déclarée : 60$

• UPS Standard : 21,16$
• UPS Expedited : 22,18$
• UPS Express Saver : 23,87$
• UPS Express : 28,12$

Dans le cadre d'un projet de migration d'une librairie construite sous Prototype vers jQuery, j'ai eu l'occasion d'apprendre à trouver des équivalences entre les deux frameworks JavaScript. J'ai pris le temps de les noter pour vous montrer de quelle façon on peut les remplacer lors de la réécriture du code. J'espère que ça sera aussi utile à vous qu'à moi.

1. strip() = trim()
Pour retirer les espaces au début et à la fin.

var str = '    code 18 est ici        ';

// Prototype
str.strip();

// jQuery
$.trim(str);

var arr = ['ebay', 'paypal', 'amazon'];

// Prototype
arr.include('facebook');

// jQuery
$.inArray('facebook', arr);

var price = 50;
var discount = 10;
var shipping = true;
var paid = true;

var conditions = [
   (price < 0),
   (discount > price),
   (!shipping),
   (!paid)
];

// Prototype
if(conditions.any()){
   // code
}

// jQuery
if($.inArray(true, conditions) != -1){
   // code
}

//  Prototype
arr.each(
   function(index, context){
       // code
   }
);

// jQuery
$.each(arr,
   function(index, value){
       // code
   }
);

// Prototype
$('element_id');

// jQuery
var collection = $('#element_id').get();
var element = collection[0];

ou

var element = $('#element_id').get(0);

// Protoype
arr.pluck('value');

jQuery :
var arrPluck = [];        
$.each(arr,
   function(){
       arrPluck.push($(this).val());
   }
);

var arrInputs = $('input');

var arrPluck = [];
$.each(arrInputs,
   function(){
       arrPluck.push($(this).val());
   }
);

console.log(arrPluck);

Celle-là est une belle gaffe d'un infographiste pour l'emballage d'une carte mémoire Lexar Professional de 8 GB. Remarquez le reflet miroir.



Tiré de Photoshop Disasters et répertorié récemment dans l'article 45 obvious Photoshop mistakes that could have been avoided sur Pxleyes.com.

À l'issue des années rock psychadéliques des années 60 où les drogues hallucinogènes étaient en vogue, l'auteur québécois Louis Gauthier a probablement désiré très fort être une rockstar. À défaut de maîtriser le médiator (communément appellé un pick), c'est du côté de la plume qu'il excellait. Et dans cette oeuvre publiée en 1970, il en a visiblement conservé l'atmosphère pour en faire un roman. C'est absurde, incompréhensible, un tour de force dans le genre littéraire qui en surprendra plus d'un.

Le livre m'avait été recommandé par un ami (que je soupçonnais lui-même être dans un état second) à l'époque de mes études au Cegep. Et depuis, c'est devenu un de mes romans québécois préférés tellement c'est rafraîchissant et pour son pied de nez envers la littérature établie. Un 10$ bien investi.

Les aventures de Sivis Pacem et Para Bellum, Tome 1 (et oui, il y a un tome 2!), c'est :

• un livre dont le titre impressionnera vos amis
• une histoire qui met en scène des personnages comme : Sivis Pacem, Para Bellum, Scrap Book, Bicyclette Premier (anciennement connu sous le nom de Pierrejeanjacques Jeanjacquespierre), Brodie XXX, Fred Flinstone, Jello Bananananas, Jelly Bean, Sun Life, Fleur d’Oranger, le baron Paupiette de Veaubraisé, etc...
• une intrigue qui se déroule au niveau planétaire, particulièrement à Abab-Rupto
  
• un livre où, dès le chapitre 2, on nous lance un avertissement : où l'on voit que l'éditeur aurait dû réfléchir un peu avant de publier des insanités pareilles
• Des rebondissements et de l'humour, dont mon coup de coeur au chapitre 6 (c'est ça un quiproquo ?)
  
• Où le chapitre 10 a été complètement supprimé car ses amis lui avaient recommandé de le retravailler
  

Lorsqu'on programme un site ou une application web, il arrive parfois qu'on ait à procéder à des changements importants sur le serveur et qu'on ait besoin de placer le site en maintenance pendant le temps qu'on applique les modifications. Dans mon cas, c'est souvent relié à un changement de structure dans la base de données ou dans les fonctions et procédures stockées.

C'est pourquoi je prends la précaution de faire une redirection temporaire à une page de maintenance en attendant que le processus soit complété pour éviter que tout se mette à briser si des visiteurs arrivent au même moment (ce qui est toujours le cas).

Habituellement, la façon la plus simple est de créer une page vierge (avec design ou pas) et d'y inscrire un message annonçant qu'une maintenance est en cours :

maintenance.html
Nous sommes désolé, le service n'est pas accessible dans l'immédiat. Nous sommes en train d'améliorer le service qui atteindra un niveau inégalé. Votre visite est importante pour nous, veuillez revenir plus tard. N'ayez crainte, le site sera de retour dès que notre équipe de développeurs aura terminé leur tournoi de babyfoot.

.htaccess
Cela dit, on peut ensuite utiliser le fichier .htaccess à la racine pour y inscrire les instructions mod_rewrite suivantes :

RewriteCond %{SCRIPT_FILENAME} !maintenance\.html$ [NC]
RewriteRule ^(.*)$ /maintenance.html [L]

La dernière ligne indique la page où le message est inscrit. Naturellement, on ajoute une condition pour exclure la page elle-même pour ne pas faire une redirection en boucle infinie.

Quand il s'agit d'un site de commerce électronique, par exemple s'il y a paiement par PayPal, il serait judicieux de ne pas oublier d'exclure la page qui reçoit l'IPN (Instant Payment Notification) car c'est elle qui reçoit tous les messages en provenance du service externe et elle devrait toujours être accessible. Dans ce cas, excluez la en ajoutant une condition supplémentaire :

RewriteCond %{SCRIPT_FILENAME} !paypal\.notifications\.php$ [NC]

Bad programming is easy. Idiots can learn it in 21 days, even if they are Dummies.

Je ne suis pas designer donc loin d'être un expert en Photoshop. De plus, plutôt que de payer une license onéreuse, je me contente de GIMP qui est gratuit et qui possède déjà trop de fonctionnalités pour ce que j'aurai besoin (en passant, existe-t-il des professionnels qui l'utilisent intensivement en entreprise ?).

Hier, en voulant mettre en évidence le logo qui ressemblait au mien sur la photo, je cherchais à l'entourer d'un cercle et j'ai dû y aller à tâton pour trouver le moyen d'y arriver. Faire une sélection et utiliser le remplissage pour mettre une couleur de fond sont des étapes intuitives, mais faire un beau cercle en bordure allait déjà au-delà de mes compétences en matière de manipulation d'image (resize, crop, etc.).

Ce qui est bien dans ce genre de situation, c'est qu'on découvre et retient plusieurs approches pour arriver à ses fins. En voici un compte rendu, tel que testé avec GIMP 2.6.8.

Établir une sélection

• Ouvrir l'image de base.
• Créer un nouveau layer de la même taille (Shift+Ctrl+N).
• Choisir dans la palette d'outils Ellipse Select Tool. Un autre raccourci possible est d'entrer seulemenr la lettre "e".
• Dessiner une ellipse de n'importe quelle dimension.
• Dans la palette d'outils, ajustez size (largeur, hauteur) pour avoir un cercle parfait.

• Assurez-vous choisir Aspect Ratio dans la liste déroulante.
• Faites votre sélection.
• Sans relâcher le bouton gauche de la souris, appuyez sur Shift et relâchez le bouton. Le cercle s'ajustera correctement en proportion.

• Toujours avec Aspect Ratio, cochez aussi la case Fixed à sa gauche. Ceci vous évitera d'utiliser Shift.

• Faites la sélection.
• Menu Select / Border.
• Entrez l'épaisseur de la bordure (sélection seulement).
• Un deuxième cercle se dessinera de l'intérieur.
• Choisissez Bucket Fill Tool (Shift+C), sélectionnez une couleur pour la bordure et cliquez une fois dans la bordure du cercle.

• Faites la sélection.
• Choisissez la couleur de bordure.
• Menu Edit / Stroke Selection.
• Définissez le Line Width (épaisseur), Solid color et cliquez le bouton Stroke.
• La bordure se dessinera à cheval sur la sélection (moitié intérieure, moitié extérieure).

• Faites la sélection.
• Remplissez la couleur de fond du cercle avec le Bucket Fill Tool.
• Menu Select / Shrink.
• Indiquez le nombre de pixels et cochez Shrink from image border. Faites OK.
• Une sélection de cercle plus petit se fera à l'intérieur.
• Appuyez une fois sur la touche Delete pour supprimer la nouvelle sélection.
• La bordure sera faite à partir de l'intérieur de la sélection initiale.

Durant un voyage ayant eu lieu l'été dernier, j'étais sur un traversier et j'ai pris une photo d'une pancarte "Surface slippery when wet" dont je me suis approprié le logo tellement je trouvais le personnage comique. Voici l'image originale :



Mine de rien, quand j'ai fait l'épicerie cette semaine, j'ai remarqué un personnage semblable sur la boîte de barres de céréales Compliments Les indispensables (IGA et Marchés Tradition) :



Ressemblant non ? C'était un argument suffisant pour me la procurer.

Hey! Code 18 est présentement absent et je prends le contrôle du site pour la journée. Votre nouvel hôte : Uncle Travelling Matt. Peut-être que vous vous souvenez de moi dans les Fraggle Rock ? (sinon voyez mon compte Twitter au cours de la journée pour une confession...)

L'an dernier, on avait eu droit à plusieurs attrapes que j'avais partiellement listé dans un billet : quelques poissons d'avril de 2009. Qu'en est-il de la cuvée 2010 ?

D'abord, YouTube! lance aujourd'hui TEXTp, une nouvelle expérience de visionnement de vidéo en mode texte. Par exemple, un extrait de The Matrix en Lego sous TEXTp. Contrairement à la haute définition, ceci permet à YouTube de sauver 1$ par seconde en coût de bande passante.

Du côté de Google, on parlait des villes qui voulaient attirer le géant du web en donnant comme argument qu'ils changeraient le nom de leur municipalité pour devenir "Google". Eh bien, surprise, c'est Google qui a changé son nom pour Topeka pour ne pas qu'il y ait de confusion!

Sur ThinkGeek, maintenant un classique annuel, vous trouverez une nouvelle gamme de produits des plus excitants (à voir en page d'accueil) :

• iCade - iPad Arcade Cabinet (pour placer votre iPad et en faire une arcade)
• Monolith Action Figure de 2001 : a space odyssey
• moodINQ - Programmable Tattoo System
• My First Bacon : You've got a friend in meat
• Dharma Initiative Alarm Clock

• Toshiba TubeTop, The world's first inflatable laptop
• Chatroulette Cheerleader de Dr.Pepper
• Google Standard Voicemail mode