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