This or That ?

La principale difficultée réside dans la variable this, qui peut prendre n’importe quelle valeur en JavaScript. Dans tout autre language (Java, Cpp,…), this fera toujours référence à l’objet en cours. En JavaScript, ce n’est pas aussi simple: this dépend en fait du contexte d’appel de la méthode, ce contexte pouvant être modifié par l’utilisation de apply.

Comme je sens que vous commencez à tourner de l’oeil, prenons un exemple:

function monConstructeur()
  {
     this.monAttribut = 'yop !';
  }
 
  monConstructeur.prototype = {
     maMethode: function()
     {
        console.log(this.monAttribut);
     }
  }
  var monInstance = new monConstructeur();
 
  // 'yop !'
  monInstance.maMethode();
 
  // undefined
  setTimeout(monInstance.maMethode, 1000);

A 1ère vue, les deux appels devraient tous les deux afficher ‘Yop !’, et pourtant, le 2ème appel affichera undefined, parce que this, dans ce cas précis, fera référence à l’objet global (ie: window), et non pas à notre instance. Mais ?! Pourquoi ?!! La valeur de this dépend en fait de l’invocation.

Il existe en réalité 4 patterns d’invocation de méthode en JavaScript, et la valeur de this en dépend:

1. Le pattern d’invocation de méthode

Dans le cas d’invocation de méthode, this fait référence à l’objet contenant la méthode:

var monObjet = {
     monAttribut: 'yop !',
     maMethode: function() { return this.monAttribut; }
  }; 
 
 // 'yop !'  
 monObjet.maMethode();

2. Le pattern d’invocation de fonction

Dans le cas d’une invocation de fonction, this ne devrait pas être défini, et fait pourtant référence à l’objet global. C’est une erreur de conception du language qui se verra corrigée dans la prochaine version de ECMAscript.

var maFonction = function() { return this.location; }
  // Object
  maFonction();

3. Le pattern d’invocation de constructeur

function monConstructeur(){
  this.monAttribut = 0;
}
 
var monInstance = new monConstructeur();

Lors de l’appel d’une fonction construteur préfixé par new, un nouvel objet est créé, avec un lien masqué vers le prototype de la fonction, et this est automatiquement lié à ce nouvel objet.

4. Le pattern d’invocation avec apply

La valeur de this lors de l’appel d’une fonction étant quelque peu aléatoire, il est possible de forcer la valeur de this à l’aide de apply.

Function.apply(valeurThis, ArrayArguments);

Les frameworks JavaScript fournissent généralement une méthode permettant de facilement modifier la valeur de this pour l’appel d’une fonction. Il est donc facile de régler le problème précédent.

Par exemple, avec le framework Prototype (utilisé dans le framework MVC de Palm: Mojo), on pourrait utiliser bind:

setTimeout(monInstance.maMethode.bind(monInstance), 1000);

Ou, en utilisant jQuery (1.4+):

setTimeout(jQuery.proxy(monInstance.maMethode, monInstance), 1000);

Transitions CSS

Depuis la sortie de l’iPhone il y a 3 ans Apple a introduit et ne cesse de pousser les transitions CSS, beaucoup plus adaptées à la puissance limitée (tout est relatif ) des smartphones. Avant l’arrivée des transitions, pour animer des objets HTML, on utilisait les frameworks tels jQuery. Par exemple, pour déplacer un objet de 100px vers la droite, on peut faire avec jQuery:

$('#foo').animate({left: '100px'}, 1000);

Le problème, lorsque l’on se place dans le contexte des smartphones est que tout est effectué par le processeur. La puissance de ces machines étant relativement limitée, et la batterie de courte durée, cette méthode n’est pas utilisable. Les transitions CSS (disponibles sur tous les navigateurs modernes, ce n’est pas (plus) une exclusivité webKit: Firefox, Opera, webKit) permettent de définir des animations à l’aide des CSS. Quelle est la différence me direz-vous ? La principale différence est que les animations effectuées via des transitions CSS sont accélérées graphiquement et permettent donc de libérer le processeur et, théoriquement, d’utiliser moins de batterie.

Les transitions étant encore en plein développement, les spécifications ne sont pas finales et chaque navigateur les implémente donc à l’aide d’un préfixe: -o- pour Opera, -moz- pour Firefox et -webkit- pour les navigateurs utilisant webkit (Safari, Chrome, OWB,…). Plusieurs manières permettent d’animer un objet à l’aide des transitions.

1. Animation des propriétés
Pour un sélecteur (CSS) donné, il est possible de choisir quelle(s) propriété(s) sera/seront animée(s). Par exemple, pour animer notre bloc #foo, on utiliserait les CSS suivants:

#foo{
   -webkit-transition-property:left;
   -webkit-transition-duration:1000ms;
 
   -o-transition-property:left;
   -o-transition-duration:1000ms;
 
   -moz-transition-property:left;
   -moz-transition-duration:1000ms;
}

La modification de la propriété left de l’objet #foo sera alors automatiquement animée, et de durée 1000ms.

2. Animation
Il est aussi possible de créer des animations relativement complexes, à l’aide de keyframes, par exemple (ici pour webkit):

@-webkit-keyframes 'zoomIn' 
	{
		0%{
			opacity:0;
			-webkit-transform: scale(1.0);
		}
		25%{
			opacity:1;
		}
		100%{
			opacity:0;
			bottom:20px;
			-webkit-transform: scale(3.0);
		}
	}

Ici nous définissons une animation nommée « zoomIn », et 3 « étapes ». Le passage à ces 3 étapes sera automatiquement animé.

Pour utiliser cette animation, il suffit ensuite de faire:

#foo.animate{
   -webkit-animation: zoomIn .4s ease-in;
}

Lorsque l’objet #foo aura la classe ‘animate’, il jouera automatiquement l’animation zoomIn, pendant 0.4sec, en utilisant la fonction ease-in. Cette fonction définit la vitesse de l’animation au cours du temps: ease-in étant la valeur par défaut.

3. aller plus loin
Il est possible d’utiliser le JavaScript pour spécifier des fonctions callback à exécuter à la fin d’une transition. On peut ainsi définir des animations assez complexes, complexes dans tous les sens du terme: le code définir devient vraiment très complexe, et surtout on mélange maintenant simples propriétés d’affichage avec l’animation. Je conseille d’ailleurs, dès le début, de séparer les transitions CSS, des propriétés CSS classiques.

Et j’attends avec impatience le premier SDK permettant de développer ces animations CSS, parce que actuellement, ces transitions, aussi puissantes soient-elles sont très très difficilement accessibles, et totalement impossibles à débugger…

Alors: qui sera le 1er ? Adobe ? Apple ? Google ?

Un WebKit, des WebKit

WebKit, le moteur utilisé actuellement dans Safari (y-compris la version iPhone), Chrome, le navigateur d’Android, le futur navigateur de BlackBerry, etc… n’a pas (scoop ! ) été créé par Apple mais est basé sur le projet KHTML, du groupe KDE. Ce moteur très performant a été adapté sur de nombreuses plateformes et chaque plateforme apporte ses modifications et restrictions. Ainsi, WebKit utilisé dans Safari 5 supporte des fonctionnalités non présentes dans Chrome (exemple: -webkit-backface-visibility), le navigateur de Palm/WebOS ne supporte pas les box-shadow ni les gradients, etc…

Contrairement à ce que l’on pourrait donc croire, l’utilisation de WebKit simplifie sans aucun doute le travail des développeurs des systèmes, mais en aucun cas celui des développeurs Web, puisque toutes ces différences doivent être prises en compte pour obtenir un site/une application multi-plateformes.

Attention donc: il existe des WebKit, pas un seul Même si la base est évidemment la même, le résultat final sera probablement différent selon les plateformes.

- Tester et télécharger WarpKlondike
- Télécharger la version webOS pour votre Palm Pré ou Pixi
- Plus d’informations sur les transitions: Apple Developer Site

Wax Tailor  [ Trip-Hop ]
Ambiance: Zen
Albums: The train, leave it, In the mood for life
A écouter: This Train

Intro
Commencons par un exemple – un paragraphe contenant une simple ligne de texte et une petite image (le carré bleu ci-dessus).

Lignes de positionnement
Voyons sans attendre les 6 lignes primaires utilisées lors de l’alignement vertical.

1. top line – cette ligne se situe au dessus de tout le contenu

2. ligne text-top – cette ligne délimite le sommet du texte (en incluant les accents)

NB: Les lignes “top line” and “text-top” peuvent paraître identiques. Mais ce n’est pas le cas, dans certains cas la top line (marquée en rouge ci-dessous), est plus haute que le contenu texte – et par conséquent, plus haute que la ligne text-top (marquée en vert ci-dessous). L’image suivante, très grande (plus haute que le texte) illustre ce cas particulier:

3. middle line – cette ligne se situe au milieu de la hauteur de la lettre x

4. baseline – c’est la ligne imaginaire sur laquelle reposent toutes les lettres

5. text-bottom line – cette ligne se situe en dessous de tout caractère (en incluant des lettres comme “j”, “y”, “g” etc…)

6. bottom line – cette ligne se situe en dessous de tout le contenu

Alignement vertical par défaut

Par défaut, le bas de l’image s’alignera sur la baseline du paragraphe – à moins que l’image ait une margin-bottom d’appliquée. Dans ce cas, le bas de la marge de l’image s’alignera sur la baseline du paragraphe. Dans l’exemple ci-dessous, l’image a la marge suivante: “margin-bottom: 5px” ce qui fait que le bas de l’image se placera 5 pixels au dessus de la baseline.

Utilisation des CSS pour modifier l’alignement vertical

Il est possible de modifier la position verticale des images par rapport au texte l’entourant en utilisant la propriété CSS vertical-align.

Cette propriété peut prendre les valeurs suivantes: top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage et length.

Top

Le haut de l’image sera aligné avec la top line.

img.class-name { vertical-align: top; }

Text-top

Cela aura pour effet d’aligner le haut de l’image avec la top line.

img.class-name { vertical-align: text-top; }

Middle

Ceci alignera le milieu vertical de l’image avec la baseline plus la moitié de la hauteur de la lettre x du paragraphe.

img.class-name { vertical-align: middle; }

Baseline

Bien que les images soient par défaut alignées par rapport à la baseline, il est possible de spécifier cette option en utilisant les CSS.

img.class-name { vertical-align: baseline; }

Text-bottom

Le bas de l’image sera aligné par rapport à la bottom line.

img.class-name { vertical-align: text-bottom; }

Sub

Ceci alignera le bas de l’image avec la baseline du contenu indicé (qu’il y ait ou non du contenu indicé présent dans le texte).

img.class-name { vertical-align: sub; }

Super

Ceci alignera le bas de l’image avec la basline du contenu exposant (qu’il y ait ou non du contenu exposant présent dans le texte).

img.class-name { vertical-align: super; }

Percentage

Ceci décalera vers le haut (valeur positive) ou vers le bas (valeur négative) l’image par rapport à la baseline de la valeur spécifiée. La valeur ‘0%’ correspond à la baseline inchangée. A noter que le positionnement vertical en pourcentage pourra, une fois n’est pas coutume, varier légèrement selon le navigateur utilisé.

img.class-name { vertical-align: 30%; }

img.class-name { vertical-align: -30%; }

Taille

Ceci décalera vers le haut (valeur positive) ou vers le bas (valeur négative) l’image par rapport à la baseline de la valeur spécifiée. La valeur ‘0px’ correspond à la baseline inchangée.

img.class-name { vertical-align: 2px; }

img.class-name { vertical-align: -2px; }

Voila, j’espère avoir écrit l’article avant que vous n’ayez plus de cheveux

Vous pouvez retrouver l’article original, en Anglais, ici: http://www.maxdesign.com.au/2008/10/05/vertical-align/

Le petit coup de coeur du moment nous vient d’Allemagne et s’appelle Ancient Astronauts, extrait:

Ancient Astronauts [ Funk, Hip-Hop ]
Ambiance: Funk
Albums: We Are To Answer
A écouter: Tout

C’était la première fois que j’allais au Comedy’s Club. Cette salle est plus réputée pour ces one man show comiques (d’où son nom) mais se prête plutôt bien à des petits concerts sympathiques, dans une petit ambiance très cosy. En tous cas j’ai bien apprécié, dommage pour ceux qui ont manqué l’invitation (non, je ne vise personne :p)…
Depuis que j’ai découvert Mig, il y a deux ans, je suis tombé sous le charme de cette musique trip hop et de la voix de Djazia et c’est avec un grand enthousiasme que j’ai répondu à l’invitation pour ce petit concert Parisien…
Parce qu’une vidéo vaut mieux qu’un long discours, place à un petit medley!

L’extrait du jour, vous l’aurez deviné, c’est Dhikrayat une chanson du groupe MIG de Djazia:

MIG  [ Trip-Hop ]
Ambiance: Trip Hop
Albums: Dhikrayat
A écouter: Tout l’album

Bon visionnage !

Le petit morceau qui accompagne la musique est extrait de nord au sud de Louise Attaque:

Louise Attaque  [ Pop/Rock ]
Ambiance: Rock
Albums: Du Nord au Sud
A écouter: Du Nord au Sud

Le film ne durant que 1h39 m’a paru très long. Beaucoup de scènes sans parole pourraient parler d’elles-mêmes, si seulement la musique suivait… Mais non ! Les scènes émouvantes en deviennent risibles (voir la dernière scène où la moitié de la salle rigolait: gloups !). Décidément on est bien loin de la performance réalisée par -M- dans Ne le dis à personne. Et dire que Nicolas Saada anime Nova fait son cinéma, émission sur les musiques de films depuis 1990 (!)

Quant au scénario, il ne tient pas la route non plus: incohérences, plagiats, clichés, etc… Comment la DST peut employer un inconnu ayant fait SciencesPo pour effectuer une mission si dangereuse à Londres ? On a du mal à croire qu’ils en sont réduits à si peu…
En fait on a du mal à croire tout ce que l’on voit, et c’est bien le problème du film. Tout est gros, tout est lent, on attend, et il ne se passe rien… jusqu’à la dernière scène, enfin de l’action! Mais là encore la pauvreté de certains effets spéciaux vient ternir le film…

En parlant de terne, parlons photo: lumière plutôt mauvaise, plans foireux, etc… fiou ! Alors il reste quoi: le jeu des acteurs, plutôt bon, mais malheureusement ne suffisant pas à relever le niveau de ce film: on se demande ce qu’ils font là tous les deux, on a même l’impression qu’eux même se le demandent… Bref, à oublier. Premier essai raté, pour lequel j’ai envie de dire:

Ne le dites à personne!


Pour relever le niveau musical du film, voici un petit extrait de John Frusciante:

John Frusciante  [ Zen ]
Ambiance: Zen
Albums: John Frusciante
A écouter: The Will to Death

S’il y a encore des désespérés je peux vous filer son email, et même son numéro de portable (bonjour le tarif des communications à mon avis par contre )…

Et on termine en musique avec Donavon Frankenreiter:

Donavon Frankenreiter  [ Ballade ]
Ambiance: RoadTrip
Albums: Donavon Frankenreiter
A écouter: On My Mind

Nouveautés
Comme à chaque version majeure (et on peut se demander comment ils font), les développeurs de ce framework ont de nouveau augmenté les performances de jQuery:

• Réécriture de l’injection HTML: 6x plus rapide!
• Utilisation d’un nouveau sélecteur, plus rapide: sizzle
• Ajout des live events dans le core de jQuery
• Nouvel objet Event
• Réécriture de la méthode offset(), beaucoup plus rapide
• Et bien plus…

Incompatibilités
Malheureusement, certaines fonctionnalités dépréciées depuis un moment ont été retirées de cette version. Les modifications à effectuer pour rendre son code compatible sont plutôt mineures, quand on sait où chercher

1. suppression de @ dans [@attr]
Le plus gros changement est la suppression de @. Une sélection comme:

$('input[@name=toto]')...

deviendra:

$('input[name=toto]')...

2. changements dans la méthode ready()
Auparavant la méthode attendait le chargement de toutes les feuilles de styles. Comme ce n’est plus le cas, tous les fichiers CSS doivent être inclus avant les scripts dans la page.

3. Ordre des sélecteurs « a, b, c »
L’ordre des sélecteurs peut varier. Les navigateurs supportant querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE8+) retourneront les éléments dans l’ordre du document alors que les autres navigateurs les retourneront (pour l’instant) dans l’ordre spécifié. Dans une prochaine version 1.3.x tous les sélecteurs séparés par des virgules seront retournés dans l’ordre du document.
Concrètement, cela signifie que dans l’exemple suivant:
DOM

<div id="c">
	Div c
  </div>
 
  <div id="b">
	Div b
  </div>
 
  <div id="a">
	Div a
  </div>

Code

$(document).ready(function()
{
    $('#a, #b, #c').each(
      function() {
         alert( $(this).attr('id') ); 
      }
   );
});

Les navigateurs supportant querySelectorAll (cf. au dessus), renverront les éléments dans l’ordre du DOM, à savoir:

c b a

Alors que les autres renverront les éléments dans l’ordre spécifié dans le sélecteur, c’est à dire:

a b c

Attention à ne pas se baser sur cet ordre donc !

Nouveautés
Cette nouvelle version de jQuery vient comme d’habitude avec son lot de nouveautés bien pratiques, parmi lesquelles:

1. nouvelle méthode closest( expr )
Cette méthode renvoie le plus proche parent correspondant à l’expression, l’élément de départ compris. Exemple:

DOM

<div class="superParent" id="main">
     <div>
        <ul id="maListe">
			<li id="15">
				<a>clique !</a>
			</li>
        </ul>
    </div>
  </div>

Code

$('a').click(function() {
  alert($(this).closest('li').attr('id'));
  alert($(this).closest('div.superParent').attr('id'));
});

L’exécution du code ci-dessus donnera le résultat suivant:

15
main

2. live events
Auparavant, les événements n’étaient pas mis à jour en temps réel sans passer par un plugin comme livequery et un appel comme celui là:

$('a') 
    .livequery('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

sera tout simplement remplacé par:

$('a') 
    .live('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

3. La méthode is() et selecteur not() supportent maintenant des expressions complexes, comme:

$('a:not(.selected, .highlighted)')...

Quelques liens
Pour finir, et pour en savoir plus, voici quelques liens sur jQuery:

• changelog complet: changelog jQuery 1.3
• Introduction à jQuery
• Documentation officielle: docs.jquery.com

Si vous êtes désespéré je peux vous filer son email Mais je pense pas que ça puisse vous aider

L’extrait musical du moment n’a absolument rien à voir avec le sujet, c’est tout simplement ce que j’écoute en ce moment pour me booster… parce que j’en ai bien besoin

Mise à jour: j’ai reçu un nouvel email, à voir ici, c’est de plus en plus marrant

Silverchair  [ Rock ]
Ambiance: take it motherfucker !!! go !!!!
Albums: Neon Ballroom
A écouter: Anthem for the year 2000

…Stay tuned!

Pour les anglophobes, une rapide traduction: