Archives mensuelles : novembre 2012

Outils CSS3 – HTML5 – JavaScript : Episode 4

HTML

Savez-vous qu’il est possible d’utiliser des caractères Unicode en tant qu’icône. Voici un tableau des différentes Icones web Unicode.

CSS

Les sélecteurs CSS

On retient souvent dans les nouveautés CSS3 ce qui concerne l’affichage (transformation, gradients, …) mais de nouveaux sélecteurs puissants ont également été introduits (:nth-child(expression), :contains(value), :checked, …). Voici un article qui explique les différents sélecteurs en CSS3 et une librairie selectivizr qui permet de supporter ces sélecteurs dans IE de la version 6 à 8.

Framework CSS

  • KNACSS : développé par Alsacréations
  • Ratchet : Un framework dédié au mobile. Idéal pour du prototypage.

Outils CSS

Divers

2 articles sur Smashing Magazine concernant des techniques JS/CSS qui peuvent s’avérer utiles (le premier et le deuxième). Voici 2 techniques/outils qui ont retenus mon attention :

JavaScript

Fuites Mémoires

Google a sorti Leak Finder un outil JavaScript open source pour trouver les fuites de mémoire dans vos applications

Framework MVC

TodoMVC : comparateur de framework JS MV*(M ou VM). Une application de gestion de tache (todo list) est implémentée avec différents framework (angular, ember, blackbone, knockout, …). A vous de choisir en fonction du type de la philosophie à adopter pour votre projet; Cela permet de comparer le code et d’avoir des bonnes pratiques pour débuter.

LINQ Pour JavaScript

Ceux qui travaillent dans le monde .NET doivent probablement connaitre LINQ qui est une technologie qui permet de requéter des sources de données hétérogène (base de donnée, objet, fichier XML, …). Il existe plusieurs librairies JavaScript qui permette d’effectuer des requêtes LINQ sur des objets JSON :

Librairies

Quelques librairies qui peuvent s’avérer pratique :

Jster : Catalogue de librairie JavaScript (plus de 750 à l’heure actuelle)

Mobilité

10 outils pour le Web mobile sur Alsacreations

CSS : Présentation de Less, le préprocesseur CSS

CSS, le langage qui permet la mise en forme des pages web, est un outil puissant et qui évolue dans le bon sens avec la version 3. Cependant, le langage a encore quelques lacunes que les préprocesseurs CSS tentent de résoudre. Ce sont des « surcouches » à CSS qui permettent de rajouter des fonctionnalités non fournies de base. Vos fichiers seront codés dans le langage du préprocesseur et compilé en CSS (de la même façon qu’il existe des surcouches à JavaScript comme CoffeeScript, TypeScript ou Dart). Il existe plusieurs préprocesseurs, les plus connus étant :

Dans cet article, j’ai porté mon choix sur LESS qui semble être le plus utilisé et qui permet une utilisation sans compilation.

Les fichiers ne sont plus des .css mais des .less (.scss en SASS et .styl en Stylus).

LESS est codé en JavaScript et fonctionne donc coté serveur avec node.js ou Rhino et coté client, directement dans le navigateur.

Il existe cependant des portages pour les autres technologies serveurs :

LESS ajoute les fonctionnalités suivantes que ne sont pas fournies pas CSS :

  • L’utilisation de variables
  • Mixins (fonctions)
  • Les règles imbriquées afin calquer la structure de votre page
  • des opérateurs mathématiques simple: +, -, *, / pour les nombres et les couleurs
  • des opérateurs mathématiques complexe comme floor(), ceiling() et round()
  • des opérations sur les couleurs comme darken(), lighten(), fadein() et fadeout()

Variables

LESS permet l’utilisation des variables, une des fonctionnalités les plus demandées par les développeurs CSS. Une variable est préfixée par un @. Cela peut s’avérer très pratique si l’on veut gérer des thèmes de son site. Au lieu de devoir modifier toutes les couleurs dans tous les styles, il suffit de modifier les valeurs des variables.

// LESS
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

donnera en css :

/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Les mixins sont des fonctions auxquelles on peut passer des paramètres. Il est possible de définir une valeur par défaut qui sera utilisé si le paramètre n’est pas fourni. La syntaxe d’un mixin est proche de la déclaration d’une classe. Cela s’avère très utile notamment lors d’utilisation de fonctionnalités CSS3 utilisant des préfixes.

// LESS
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}

#footer {
  .rounded-corners(10);
}

donnera en css :

/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Il est à noter qu’il est possible de définir des règles d’applications (pattern-matching-and-guard-expressions) qui rendent ces mixins encore plus puissants.

Règles imbriquées

On veut très souvent en CSS appliquer un style pour des éléments imbriqués dans d’autres éléments. La règle CSS peut devenir importante (#menu ul li a.item). Les règles imbriquées permettent de cloisonner une règle dans son parent permettant ainsi de limiter le code. Cela permet d’avoir un code plus lisible et plus structuré/organisé.

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

donnera en css :

/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Opérations

LESS fournit également un ensemble d’opérations qu’il est possible d’effectuer sur les couleurs, les variables et les valeurs numériques.

Les opérations mathématiques « de base » comme l’addition, la soustraction, la multiplication et l’addition ainsi que quelques opérations plus complexe comme les arrondis (floor, ceil et round).

Les fonctions possibles sur les couleurs sont :

  • darken(@color, 20%); : retourne une couleur 20% plus sombre
  • lighten(@color, 20%); : retourne une couleur 20% plus claire
  • fadein(@color, 20%); : retourne une couleur 20% plus transparente
  • fadeout(@color, 20%); retourne une couleur 20% moins transparente
  • fade(@color, 80%); : retourne une couleur avec 80% de transparence
  • spin(@color, 10); : retourne une couleur avec une teinte plus importante de 10 degrés que la couleur @color
  • mix(@color1, @color2, @weight); : retourne une couleur résultant du mélange de 2 couleurs avec un % de mélange (50% par défaut)
  • Récupération des données d’une couleur (RGBa ou HSLa)
    • hue(@color); : retourne le canal « teinte » de la couleur (HSLa)
    • saturation(@color); : retourne la saturation de la couleur (HSLa)
    • lightness(@color); : retourne la clarté de la couleur (HSLa)
    • alpha(@color); : retourne le canal alpha de la couleur (HSLa ou RGBa)
    • red(@color); : retourne la canal rouge de la couleur (RGBa)
    • green(@color); : retourne le canal vert de la couleur (RGBa)
    • blue(@color); : retourne le canal bleu de la couleur (RGBa)

Les fonctions sont très pratiques et apporte un réel plus combinées avec les variables, comme pour créer des dégradés (gradient) par exemple.

/* J'ai volontairement omis les prefixes vendeurs */
background: linear-gradient(top, @color, darken(@color, 20%));

Voici d’autres exemples d’utilisation de ces fonctions :

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

donnera en css :

/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

@Import

Il est possible d’importer des fichiers LESS via la syntaxe @import comme il est possible de le faire en CSS. L’avantage est la compilation ne générera qu’un seul fichier CSS en sortie, limitant le nombre de requêtes au serveur.
Twitter BootStrap (framework CSS) utilise LESS et est découpé en plusieurs fichiers .less permettant une maintenance plus aisée.

Utilisation

Via JavaScript

Pour une utilisation coté client de LESS, il est nécessaire d’inclure le fichier JavaScript less.js. Celui-ci doit être placé après l’inclusion de vos fichier .less. Les styles doivent être déclarés avec rel= »stylesheet/less ».

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Via Compilation en CSS

Il est également possible d’utiliser LESS coté serveur afin de compiler les fichiers .less en un fichier CSS. Cette compilation peut se faire à la volée par le serveur ou au préalable.

Ressources

Conclusion

Les préprocesseurs CSS s’avèrent très pratique et permettent une meilleure organisation et maintenabilité de votre code CSS.
Il faut espérer que la norme CSS intégrera ces fonctionnalités dans le futur afin de pouvoir profiter de ces ajouts sans surcouche.

JavaScript : déboguer vos scripts minifiés

Une des bonnes pratiques afin d’améliorer les performances d’un site est la minification des fichiers CSS et JavaScript. Cependant, une fois en production, il peut s’avérer pratique de déboguer vos scripts JS avec les barres d’outils des navigateurs. Le débogage d’un fichier minifié n’est pas aisé, le fichier source étant compilé pour prendre le moins de place et le fichier résultant est loin d’être facile à lire (suppression des espaces, des retours à la ligne, renommage des variables, …). C’est là qu’intervient Source Map. Cette fonctionnalité est apportée par Chrome (et en cours d’implémentation sur les autres navigateurs) et permet en débogage d’avoir accès au fichier source (qui doit être présent sur le serveur bien entendu) et non au fichier minifié.

Normalement, lors de la minification d’un fichier, il n’y a qu’un seul fichier en sortie.

Avec cette technique, 2 fichiers sont générés :

  • li fichier minifié auquel un commentaire est ajouté en fin de fichier indiquant l’URL du fichier .map
  • un fichier .map : il s’agit d’un fichier JSON qui permet au navigateur de pouvoir savoir où sont les fichiers sources notamment

Actuellement peu de minifieur permettent cette génération :

  • Closure : un compilateur JavaScript par Google
  • GWT : L’outil de Google permettant de créer des applications web dynamiques JavaScript à partir de Java
  • UglifyJS.

Travaillant dans le monde .NET, je vais présenter l’extension Visual Studio Web Essentials 2012 qui permet cette génération. Pour cet article, nous utiliserons le code de mon application de démo concernant Knockout. A l’origine, la page contient des références vers JQuery et Knockout ainsi que le code de la page inclus directement dans le fichier HTML (c’est mal je sais mais c’était pour l’exemple). J’ai externalisé ce code dans un fichier js que j’ai nommé volley.js. Ce fichier fait 5.7ko et le fichier minifié 2.5ko soit 43% de gain.

Génération via Web Essentials

La minification se fait en faisant un clic droit sur le fichier JavaScript à minifier. Un menu Web Essentials a été rajouté et il faut cliquer sur Minify JavaScript File(s).

Minification JavaScript avec Web Essentials

Les 2 fichiers volley.min.js et volley.min.js.map sont générés.

Les fichiers générés par Web Essentials

Le fichier volley.min.js contient le code minifié du fichier volley.js et le commentaire permettant de faire le lien avec le fichier .map.

Le fichier volley.min.js.map est un objet JSON contenant notamment une propriété sources qui contient la liste des fichiers sources composant le fichier minifié.

Il me suffit de remplacer l’inclusion de mon fichier non minifié

<script src="include/volley.js"></script>

par celui minifié dans mon code HTML

<script src="include/volley.min.js"></script>

A Noter que Web Essentials permet de créer des bundles de fichiers JavaScript. Un bundle concaténera plusieurs fichiers dans un seul fichier. L’ensemble des fichiers concaténés sera disponible au débogage.

L’avantage de Web Essentials est que vos fichiers minifiés et les bundles sont mis à jour dès qu’un fichier source est modifié.

Débogage

Comme je le disais auparavant, aujourd’hui seulement Chrome supporte cette fonctionnalité et celle-ci doit être activée dans les préférences de barre d’outils de développement.

Ainsi, sans l’option activée, le code affiché dans le débogueur est le code minifié.

Chrome sans l'option Source Map activée

L’activation se fait en allant dans les réglages de la Chrome Developer Toolbar (bouton en bas à droite) et il suffit de cocher l’option Enable source maps.

On peut maintenant accéder au code source du fichier d’origine et effectuer du débogage (points d’arrêts, pas à pas, …).

Chrome avec l'option source maps activée

Voici le lien vers la démo du mon application développée avec knockout, avec le fichier volley.js utilisant cette technique.

Ressources

Conclusion

Cette technique s’avère très utile et il faut espérer que les navigateurs et les minifieurs prendront en compte cette technique afin de facilité le débogage JavaScript. Cette fonctionnalité permettra, dans le futur, le débogage de CoffeeScript ou autre langage générant du JavaScript, LESS/SASS …

Firefox : Le mode Responsive Design

Je viens de découvrir un mode Responsive Design dans Firefox qui peut s’avérer pratique afin de tester le rendu d’un site responsive qui permet l’adaptation d’un site à différentes résolution (notamment). L’activation se fait dans le menu Outils > Développeur Web > Mode Responsive Design (il semblerait que le menu s’appelle maintenant Vue adaptative, mouais, je ne suis pas très fan. Ca me semble mois clair …) ou via le raccourci Maj+Ctrl+M.

Firefox : Activation du Mode Responsive DesignUne fois activée, la page en cours de consultation est affichée à l’intérieure d’un cadre dont il est possible de modifier la taille et l’orientation. Une liste de résolutions standards pour le responsive design est proposée et il est également possible d’adapter la résolution à des valeurs personnalisées via un redimensionnement manuel. Le changement d’orientation se fait en cliquant sur le bouton rotation.

Voici un exemple de rendu du site Smashing Magazine en 320×480.

Firefox : le Mode Responsive DesignSuper pratique !!!

HTML5 : Gestion du Offline

Une des nouveautés apportées par HTML5 est le support du mode Offline. Ainsi, vous allez pouvoir utiliser un site sans être connecté à Internet, en ayant préalablement visité ce site bien entendu.

Manifest

La gestion du offline se fait via l’utilisation d’un fichier Manifest. Ce fichier va décrire les fichiers à garder en mémoire pour une utilisation ultérieure en mode offline.

Ce fichier est composé de 3 parties :

  • CACHE : la liste des fichiers à mettre en cache
  • OFFLINE : la liste des fichiers à mettre en cache pour une utilisation en mode déconnecté
  • NETWORK : les fichiers à ne charger qu’en mode connecté.

Déclaration du manifest

La déclaration du fichier se fait dans la balise html de votre page. Dans le cas de mon article sur l’utilisation de Knockout, j’avais développé une page permettant le support du mode offline. Voici la déclaration du fichier manifest de la page (volley.manifest)

<html manifest="volley.manifest">

Voici le fichier manifest (j’ai mis des fichiers pour les parties OFFLINE et NETWORK pour exemple). (l’utilisation du # permet de mettre une ligne en commentaire)

CACHE MANIFEST

# v0.1.0.3

CACHE:
volley.html
include/style.css
include/ics.css
include/volley.svg
include/knockout-2.0.0.js
include/jquery-1.7.1.min.js

FALLBACK:
#liste des fichiers à ne charger qu'en mode offline
include/offline.js

NETWORK:
#liste des fichiers à ne charger qu'en mode connecté
include/network.js

On peut noter la présence d’un numéro de version du fichier manifest. En effet, lors de la modification d’un des fichiers du cache, seulement une modification du fichier manifest permettra la mise à jour du fichier modifié. Une des pratiques consiste à mettre un numéro de version que l’on incrémentera à chaque mise à jour afin que les fichiers soit remis à jour dans le cache navigateur.

Détection via JavaScript

Il est également possible de détecter l’état de la connexion en JavaScript. Ainsi on pourra détecter une déconnexion/perte de réseau et adapter le comportement. Cela peut se révéler pratique notamment en contexte mobile.

La détection se fait via une propriété onLine sur l’objet navigator. Des événements online et offline (la documentation sur le MDN) sont également émis à chaque connexion/déconnexion. Attention toutefois, sur un ordinateur, cet événement n’est émis que si on passe on mode « Travailler hors connexion ». Il existe des techniques permettant la détection dans ce cas précis. Pour en savoir plus, je vous invite à lire l’article Application hors-ligne HTML5 – le JavaScript

Ressources

Zen Coding devient Emmet

Quelques jours après la publication de mon article concernant Zen Coding, j’apprends que le projet change de nom et devient Emmet. Ce changement de nom est également synonyme de nouvelle version qui apporte quelques nouveautés (la liste complète des nouveautés) dont :