Archives mensuelles : novembre 2014

Outils CSS3 – HTML5 – JavaScript : Episode 9

CSS, Developpement Web, JavaScript, , ,

Au menu, des liens, des outils, des présentations … sur HTML, CSS et JavaScript.

Talks

Voici quelques présentations que j’ai beaucoup appréciées :

HTML

CSS

  • Pure : Un framework CSS (gère le responsive)
  • Responsive Web Design
  • PlentyofFrameworks : trouver le framework CSS qui vous convient
  • Enjoycss : éditeur de composant CSS
  • CSSShake : Une feuille de style pour secouez vos éléments
  • Style Guide guide : site regroupant des générateurs de style guide (guide d’utilisation de vos style (un exemple))
  • CSS Values : permet de rechercher une propriété CSS pour facilement connaître son utilisation et les valeurs possibles
  • Bounce.js : un générateur d’animation CSS 3
  • CSS Stats : Statistique concernant CSS (nb de sélecteurs, couleurs, …) d’un site
  • Critical Path CSS Generator : Générateur de Critical Path. Critical Path est une technique qui consiste à injecter, directement dans votre code HTML(inline, dans le header) le code CSS minimal afin d’accélérer la vitesse de rendu de votre page. Le reste du code CSS est à charger via des fichiers CSS classique en fin de page. Cet outils permet d’extraire le code CSS à injecter en fonction d’une page.
  • Flexplorer : un générateur et outils de test de flexbox
  • une cheatsheet sur la propriété flexbox en css3

JavaScript

Divers

Underscore/Lo-Dash : Utilisation de _.chain

JavaScript, ,

J’ai présenté dans un article précédent la bibliothèque utilitaire underscore (et son fork lo-Dash). Je vais ici présenter la méthode chain qui permet de facilement chaîner vos appels pour simplifier l’écriture de votre code.

Imaginons que nous avons une liste de documents et que nous souhaitons récupérer le nom des 10 documents les plus récents (en utilisant la propriété lastUpdate).

On pourrait écrire : 

//on tri par la propriété lastUpdate
var orderedDocuments = _.sortBy(documents, 'lastupdate');
//on inverse 
var descOrderedDocuments = _.reverse(orderedDocuments);
//on prend les 10 premiers
var last10Documents = _.first(descOrderedDocuments, 10);
//on récupère leur nom 
var last10DocumentNames = _.pluck(last10Documents, 'name');

On peut voir ici que l’on doit créer des variables temporaires afin de passer le résultat d’une méthode à la méthode suivante, ce qui a pour conséquence de polluer le namespace avec des variables qui ne sont utilisées qu’une fois et d’utiliser de la mémoire inutilement. De plus, si vous devez modifier l’ordre d’appels, vous devrez vous assurer de passer la bonne variable temporaire au bon moment.

Voyons comment utiliser _.chain afin de simplifier et de rendre plus lisible ce code. Il faut d’abord appeler chain. Chain va retourner un wrapper (au lieu du résultat) ce qui va nous permettre d’appeler d’autres méthodes qui vont modifier le résultat. Le résultat de la méthode précédente est passé automatiquement à la fonction suivante. Une fois toutes les opérations terminées, il suffit d’appeler value() pour obtenir le résultat. 

var lastDocuments = _.chain(documents)
    .sortBy('lastupdate')
    .reverse()
    .first(10)
    .pluck('name')
    .value();

Le code s’en trouve plus lisible et plus maintenable.

Pour ceux qui font du .NET, cela se rapproche de ce qu’on peut faire avec Linq.