Archives du mot-clé tools

Outils CSS3 – HTML5 – JavaScript : Episode 9

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

Outils CSS3 – HTML5 – JavaScript : Episode 8

Html

  • Une liste d’articles sur l’utilisation d’Emmet(part 1, 2, 3 et 4) (mon article de présentation d’Emmet qui s’appelait à l’époque Zen coding) Toujours sur le même sujet, une cheat sheet de emmet assez complète.
  • Un article qui présente l’api de vibration
  • Responsinator : Permet de visualiser le rendu d’un site en mode responsive sur différents terminaux (iPhone 3/4, iPhone 5, iPad, Android, …) en portrait et paysage. Un exemple avec mon site.

CSS

  • Spinkit : Animations d’attente en CSS3
  • Myth : Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.
  • CSS Zen Garden : La nouvelle version HTML5 Zen Garden.
  • lesshat.com : collection de mixins less
  • extractCSS : permet d’extraire les styles inlines d’un code HTML
  • Stitches : un générateur de Sprites
  • CSS Animate : Outil de génération d’animations CSS

JavaScript

Divers

Présentation de Bower

La gestion des librairies externes (javascript, css, font, …) d’un projet front end peut rapidement devenir contraignant. Il faut aller sur le site de chaque librairie pour télécharger les fichiers nécessaires et les copier dans votre arborescence projet. Sans compter sur la gestion des mises à jour et des dépendances.

Bower est un outil de gestion de librairies pour le web (NuGet est le pendant pour le monde .NET sachant que celui-ci n’est pas restreint aux librairies .net mais aussi les librairies front end comme jquery par exemple). Développé à l’origine par les équipes de Twitter, il est utilisé par de nombreux projets open source comme Bootstrap, Normalize, AngularJS, ….

La récupération des librairies se fait majoritairement sur Github via git, il faut donc que git soit installé sur votre poste.

Installation

Bower est basé sur Node.js et npm qui doivent également être installés sur votre machine. L’installation de Bower se fait via la commande suivante :

npm install -g bower

Bower est à installer en global via l’option -g afin de pouvoir l’utiliser sur tous vos projets.

Utilisation

Bower se base sur un fichier JSON, bower.json, qui va définir, à la manière d’un package.json en node.js, la liste des dépendances de votre projet.

Voici par exemple, le fichier bower.json pour ma page de gestion de score de volley, avec les dépendances vers jQuery, knockout et modernizr :

{
  "name": "Volley",
  "version": "0.2.0",
  "description": "Application de gestion de score de match de Volley",
  "main": "volley.html",
  "keywords": [
    "volley",
    "game"
  ],
  "authors": [
    "Julien Roy"
  ],
  "license": "MIT",
  "dependencies": {
    "modernizr": "~2.7.1",
    "jquery": "~1.7.2",
    "knockout.js": "~2.3.0"
  }
}

Bower va récupérer dans la plupart des cas, le projet entier de la librairie et le copier dans le répertoire des dépendances (par défaut bower_components).

Liste des commandes

Voici la liste des principales commandes de bower :

  • install : installer toutes les dépendances du projet définies dans le fichier bower.json
  • install package-name : installer une dépendance via son nom (il est possible de spécifier une version spécifique via #1.2.3 ). Utilisez l’option –save ou -S pour que la dépendance soit rajouté dans votre fichier bower.json
  • update : mettre à jour les dépendances d’un projet
  • search : rechercher des dépendances dans le répertoire de bower (possible de rechercher sur bower.io/search/).
  • uninstall package-name : supprimer une dépendance du projet (avec –save ou -s pour supprimer du fichier bower.json).
  • list : affiche la liste des dépendances

Configuration

Bower peut être configuré en utilisant un fichier JSON .bowerrc. Il permet de configurer par exemple le dossier dans lequel seront installées les librairies, le proxy à utiliser, ….

Voici mon fichier .bowerrc qui redéfinit le dossier dans lequel seront téléchargé les dépendances :

{
  "directory": "libs/"
}

Voici le lien vers la documentation.

Liens

Conclusion

Bower est un puissant outil de gestion de dépendances de projet web permettant de facilement installer un nombre impressionnant de librairies (prés de 7900 actuellement). N’hésitez pas à le coupler avec Grunt sur vos projets (déplacer vos dépendances dans un dossier build, concaténation, …).

Présentation de Grunt

Le développement nécessite d’avoir de bons outils afin de gagner en productivité. L’automatisation des taches est un bon moyen de gagner du temps.

Grunt est un lanceur de taches. Il est basé sur NodeJS. Grunt permet de facilement automatiser vos taches liés au développement web. L’écosystème autour de nodeJs étant très dynamique, il existe une pléthore de taches grunt existantes

Je n’aborderai pas dans cet article l’installation et la configuration de grunt, vous trouverez dans la partie liens de très bons articles traitant ce sujet.

Voici une liste de quelques plugins utiles :

  • Less : Permet de compiler du des fichier LESS en CSS (il existe bien évidemment des plugins pour les autres préprocesseurs comme SASS ou Stylus
  • Cssmin : Permet de minifier vos CSS
  • Jshint : Permet de valider via JsHint votre code JavaScript
  • Concat : Permet la concaténation de fichier afin d’améliorer les performance de chargement de votre site
  • Uglify : Permet de minifier vos fichier js (permet également la concaténation avec possibilité d’utiliser Source map afin de debugger facilement vos scripts)
  • imageoptim / responsive-images : Permet d’optimiser et de générer des images adaptées à différentes résolution (responsive web design)
  • Watch : Permet de surveiller vos fichier et de lancer d’autres taches à chaque modification
  • HTMLHint : Validation de votre code HTML
  • jsdoc : Permet de générer la documentation de votre code js

Liens

Alternatives

Utilisez-vous Grunt ? Si oui, quelles taches utilisez-vous ?