Archives mensuelles : mars 2012

Outils CSS3 – HTML5 – JavaScript : la suite

Je poursuis mes recherches et ma veille technologique sur ces technologies prometteuses que sont HTML5 & co (CSS3, API Javascript, Canvas, …).

Voici donc la suite des outils commencée ici :

Animation

CSS3 apporte la notion d’animation et de transition (une animation est un enchainement de transitions par rapport à une ligne de temps timeline). Ces transitions utilisent des fonctions d’easing qui permettent des animations non linéaire. Il faut configurer la transition via la propriété transition-timing-function (avec les préfixes qui vont bien pour la comptatibilité). Voici les différentes valeurs possible :

  • linear: Vitesse constante (valeur par défaut)
  • cubic-bezier: La vitesse sera calculée grâce à une courbe de Bézier cubique définie par deux points de contrôles : P0 et P1 (Il faudra donc fournir 4 paramètres : P0x, P0y, P1x et P1y).
  • ease: correspondant à cubic-bezier(0.25, 0.1, 0.25, 1)
  • ease-in: correspondant à : cubic-bezier(0.42, 0, 1, 1)
  • ease-inout: correspondant à : cubic-bezier(0.42, 0, 0.58, 1)
  • ease-out: correspondant à : cubic-bezier(0, 0, 0.58, 1)

L’outil cubic-bezier permet de configurer via une interface graphique les valeurs des 4 paramètres et de visualiser le rendu de l’animation.

Pour finir sur les transitions/animations, animatable est une page qui regroupe des exemples de transition sur toutes les propriétés animables.

Gestion des préfixes CSS

Les spécifications concernant HTML5 et CSS3 ne sont encore qu’à l’état de draft mais les navigateurs ont déjà commencé à implémenter certaines règles. Concernant CSS3, il faut, pour chaque navigateur, préfixer les propriétés concernées afin de pouvoir les utiliser (-ms pour IE, -moz pour Firefox, -webkit pour les navigateurs basé sur webkit, -o pour Opera …). Il devient alors lourd de rajouter autant de lignes qu’il y a de préfixes afin de faire fonctionner son code dans tous les navigateurs. C’est la qu’interviennent les librairies JavaScript prefixfree et CssFx qui gèrent pour vous l’ajout de ces préfixes.

Démo HTML5

Sites de démos des nouveautés HTML5 :

Normalisation CSS

normalize.css est une alternative au fameux RESET CSS mais au lieu de mettre des valeurs à zéro et devoir vous même spécifier vos propres valeurs, normalize.css normalise les valeurs pour que celles-ci soient identique sur tous les navigateurs. Cette technique est notamment utilisée par HTML5 boilerplate, le template HTML/CSS/JS à la mode.

Testeur de code JavaScript en ligne

http://jsfiddle.net/ permet de tester son code Javascript et de le partager. La page est découper en 4 grandes parties : le code HTML, le code CSS, le code JS et le résultat. La partie résultat correspond à l’interprétation du HTML, CSS et JavaScript. Il est possible de rajouter facilement les librairies JS les plus utilisés (JQuery, Prototype, dojo, YUI, ExtJS, …) ou votre propre script. JSFiddle supporte également CoffeeScript (langage permettant de générer du Javascript) et Sass (Surcouche à CSS). Vous pouvez sauvegarder votre code qui vous générera une URL que vous pourrez ensuite partager. Très utile pour expliquer un problème à un ami à distance ou pour poser une question sur un forum ou stackoverflow.com. L’outil inclut même la validation (via JSLint) et la ré-indentation de votre code JS.

Compatibilité des fonctionnalités HTML5 et leur utilisation

html5please.com et caniuse.com (Can I Use) sont 2 sites qui permettent de connaître la compatibilité des fonctionnalités HTML5 ainsi qu’une indication sur leur utilisation (utilisation possible, non recommandé, avec précaution, …).

Formateur et Validateur JSON

jsonformatter est un outil en ligne qui permet de valider et de formater un objet au format JSON.

Minifieur Javascript

JSMin est un outil qui permet de minifier vos fichiers javascript afin que ceux ci aient une taille réduite pour une optimisation du temps de chargement de vos pages web.

YUI Compressor permet aussi la compression JS mais également CSS.

Librairie de dessins

HTML5 apporte 2 façons de dessiner : Canvas (bitmap) et SVG (Vertoriel). Voici des librairies de dessin utilisant ces technologies :

  • Raphaël : libraire Javascript permettant de faire facilement du dessin vectoriel avec SVG. (Si vous voulez faire des graphes en SVG, gRaphael est une libraire de chart basé sur Raphaël.)
  • Paperjs : Librairie de dessin basé sur Canvas
  • Processing.js : Librairie également basé sur Canvas développé notamment par John Resig, le père de JQuery
  • PlotKit : Librairie de graphique supportant Canvas et SVG

Couleur

colorhexa : Outil permettant d’obtenir des informations sur une couleurs (description détaillée, conversion dans différents formats (hexadécimal, binaire, RVB, …), génération de schémas de couleurs complémentaires, générateur de gradient, …).
css-color-palette-extractor :permet d’extraire les couleurs utilisées dans une CSS.

Générateur d’images

Lorempixel est un site qui permet d’agrémenter vos maquettes, tests, exemples de photo aléatoire comme loremipsum permet de le faire avec du texte. Il est possible de définir la taille de l’image, un thème (sport, nature, abstrait, …), la couleur (noir et blanc ou couleur).

Astuces JQuery

Voici une liste d’astuce / bonnes pratiques concernant JQuery :

Utiliser la dernière version de JQuery

JQuery est en développement permanent et de nouvelles versions sortent régulièrement, plus rapide et plus puissante. N’oubliez pas de mettre à jour votre version de JQuery afin de profitez de nouvelles fonctionnalités et de gain de performance.

id > tags > class

Il faut savoir que la sélection via le sélecteur de Jquery (Sizzle) sera plus rapide si vous utiliser un id par rapport à un tag (p, div, table, …). De la même manière, il est préférable d’utiliser un tag qu’une classe.

Utiliser un contexte

Afin d’éviter de parcourir tout le document, on peut utiliser la notion de contexte qui va définir le scope de recherche. Pour cela, il vaut mieux utiliser find au lieu de spécifier le contexte au sélecteur. En effet, dans la cas où on passe le contexte au sélecteur, c’est la méthode find qui sera appelée.

//On passe le contexte au sélecteur
$('li', '#monContext')
//idem mais avec find
$('#monContext').find('li')

Mettre en cache / Chaîner vos appels

La sélection des éléments est coûteux en terme de temps. Il faut mieux ainsi mettre en cache les élements sélectionné afin de gagner en performance. Un des principes de base de JQuery est que la majorité des fonctions et plugins renvoie la liste des éléments à traiter. Ainsi, on peut chaîner les appels de fonctions.

//Peu performant
$('#item').show();
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');

// On chaîne les appels
$('#item').show().html('hello').css('background-color', '#ffffff');

// ou on met en cache l'élément
var item = $('#item');
item.show();
item.html('hello');
item.css('background-color', '#ffffff');

Dans le même esprit, pensez à naviguez dans le DOM de l’élément sélectionné au lieu de faire plusieurs sélection. Pour cela, JQuery propose les méthodes Traversing comme :

  • siblings : permet de récupérer les éléments frère (de même niveau)
  • childrens : permet de sélectionner les enfants
  • next : permet de sélectionner l’élément frère suivant
  • prev : permet de sélectionner l’élément frère précèdent
  • nextAll et prevAll : permet de sélectionner respectivemnt tous les élément frères suivant et précèdent
  • first et last: permet de sélection du premier et du dernier élément sélectionné

Cerise sur le gâteau, ces méthodes accepte un sélecteur afin de filtrer les données !!!

//On récupère le permier élément p de l'élément #content
$('#content').first('p')

Les méthodes end et addSelf sont particulièrement utiles. End permet de remonter aux éléments précédemment sélectionnés et addSelf permet de rajouter l’élément père.

// On veut modifier le 1er et le dernier élément
$('ul').first().css('color', '#F00').end().last().css('color', '#F00')

// On veut sélectionner les 2 derniers éléments d'une liste
// On sélectionne le dernier, on récupère le précèdent et on s'ajoute soit même
$('li:last').prev().addSelf();

Limiter la manipulation du DOM

Afin d’avoir un script rapide, il faut limiter la manipulation du DOM au maximum (comme prepend(), append(), after()).

Eviter :

var myList = $('#myList');

for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}

Utiliser plutôt

var myList = $('.myList');
var myListItems = '';

for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);

Une autre astuce consiste à encapsuler dans un élément unique les éléments à insérer dans le DOM.

var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i &lt; 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>'; }
myListItems += '</ul>';
myList.html(myListItems);

Documentation de Jquery dans Visual Studio

Il suffit de rajouter jquery vs-doc disponible sur le CDN de Microsoft pour avoir la documentation de JQuery intégrée dans visual studio.

Veuillez à ne l’utiliser qu’en développement, le fichier pesant près de 216Ko contre 31Ko pour la version minifiée.

Liens

Voici les liens (en anglais) qui m’ont permis de faire l’article :

Techdays 2012 : Les vidéos sont en lignes

Les TechDays 2012 organisés par Microsoft se sont tenus à Paris les 7, 8 et 9 Février 2012. Plus de 300 sessions ont été animées. Ces sessions sont disponibles en vidéos. Voici les sessions qui traitent de HTML5, CSS3 et JavaScript.

Bon visionnage !!!

QuerySelectorAll, Sizzle et Jquery

En JavaScript, la récupération d’un élément passe souvent par les méthodes getElementById, getElementByTagsName ou getElementsByClassName.

Les derniers navigateurs prennent en charge une nouvelle méthode plus puissante querySelectorAll (compatibilité de la méthode) qui permet de récupérer des éléments en fonction d’un sélecteur CSS3, un peu à la manière de Sizzle, la librairie de sélection utilisée par JQuery.

Utilisation de querySelectorAll

Cette méthode est beaucoup plus intéressante car elle permet de filtrer plus facilement les éléments sur lesquelles on souhaite interagir.

La méthode querySelectorAll prend en paramètre un chaine de caractère qui représente une expression CSS et renvoie une NodeList. Afin de parcourir les éléments renvoyés, vous pouvez le parcourir avec une boucle for (document.querySelectorAll(‘#maDiv)[0]) ou en transformant le résultant en tableau.

Voici un exemple permettant d’alterner les couleurs des lignes d’un tableau avec une transformation en tableau.

Array.prototype.slice.call(document.querySelectorAll('#maincontent table tr'))
.filter(function(element, index, array){
  return index % 2 === 0;
})
.forEach(function(element, index, array){
  element.style.backgroundColor = 'Grey'
});

J’ai utilisé la fonction filter afin de ne sélectionner que les éléments paires, chose que j’aurais pu directement pu faire via le selecteur CSS tr:nth-child(odd).

A noter également que, comme dans la syntaxe CSS, on peut sélectionner plusieurs éléments en les séparant via une virgule :

document.querySelectorAll('#maDiv, .maClasse')

La méthode querySelector fonctionne de la même façon mais ne revoie que le premier élément vérifiant la ou les règles.

Avantage de Sizzle / JQuery

Sizzle est un projet mené par John Resig, qui n’est autre que le père de JQuery. Ce projet est un sélecteur CSS en Javascript. Ce projet est autonome et sans dépendance.

Quel est l’intérêt d’utiliser Sizzle me direz-vous. L’intérêt est multiple.

  • compatibilité avec les vieux navigateurs
  • Ajout de filtre de sélection :
    • contient (texte) :contains
    • contient (element) :has
    • position :first, :last, :even, :odd, :gt, :lt, :eq
    • négation :not
    • élément de formulaire :input, :text, :checkbox, :file, :password, :submit, :image, :reset, :button
  • Extensible

Avec JQuery, vous possédez en plus de fonction de manipulation de ces éléments rapide et puissante.

Ainsi, le code ci-dessus peut s’écrire avec JQuery :

$('table tr:odd').css('backgroundColor', 'Grey');

Simple non ?

Conclusion

La méthode querySelectorAll est maintenant bien supportée dans les navigateurs les plus récents et je ne peux que vous conseiller son utilisation si vous ne voulez pas utiliser des librairies additionnelles comme Sizzle/JQuery, qui apporte un support des anciens navigateurs et de plus grandes fonctionnalités. Pour les autres, JQuery c’est bon, mangez-en 😉