CodeKit 2.0

D'accord, il y a Grunt, mais pour la plupart des projets, les applications comme CodeKit et autres sont souvent plus appropriées, simples et efficaces. Bryan Jones présente Codekit, pour Mac.

Par

Cet article est paru sur le site de Chris Coyier, CSS-Tricks.

L'article qui suit est de Bryan Jones, le créateur de Codekit. J'utilise CodeKit depuis plusieurs années et j'en ai abondamment parlé. De mon point de vue, il a changé l'intégration web en facilitant l'utilisation d'outils puissants qui semblaient hors d'atteinte à beaucoup de designers. CodeKit 2.0 vient de sortir, il a accompagné les changements qui se sont produits dans le paysage de l'intégration web et comporte des outils encore plus puissants, souvent compliqués à mettre en oeuvre par d'autres moyens. Bryan présentera CodeKit et je mettrai mon grain de sel de temps à autres, histoire de partager mes sentiments sur cette version 2.0 que j'utilise depuis un mois (Chris Coyier).

NdT : Une fois n'est pas coutume, le traducteur se mêlera à la discussion... Il ne s'agit évidemment pas de faire la promotion d'un logiciel, au surplus disponible sur Mac uniquement (1), mais plutôt d'aider les designers qui n'ont pas le temps ou l'envie se mettre à Grunt, Gulp, Broccoli etc. Ces derniers outils sont hyper puissants, mais certainement overkill pour la plupart d'entre nous.
De quoi avons-nous besoin au quotidien ? De compiler Sass, Less, CoffeeScript, etc, d'ajouter automatiquement des préfixes constructeurs, de concaténer et minifier des fichiers, de vérifier la syntaxe de notre JavaScript, de minifier des images, d'avoir un live reload... Tout ceci est présent dans CodeKit et d'autres outils similaires (voir la liste en fin d'article), inutile d'apprendre Grunt pour toutes ces tâches. La nouvelle version de Codekit, outre sa puissance, est hyper simple et intuitive.

Qu'est-ce que CodeKit ?

CodeKit est une application qui vous aide à construire plus rapidement vos sites web. Elle compile les langages comme Sass, Less, Stylus et CoffeeScript, elle permet de visualiser en direct le résultat sur votre navigateur, elle combine, minifie et vérifie votre JavaScript - bref elle accélère votre travail et améliore les performances de votre site.


page codekit avec liste des composants bower

Il y a d'autres façons et d'autres outils pour effectuer ces tâches, mais CodeKit vous soulage de tout le côté pénible de ce process. Vous faites glisser votre dossier sur l'icône de l'application et vous commencez à travailler, pas de fichier JSON à éditer, rien à installer ni à télécharger, pas de commandes à mémoriser... ça marche, tout simplement.

Nouveautés de la version 2.0

Pour commencer, j'ai engagé un designer, Guy Meyer, l'interface utilisateur n'a plus l'air d'avoir pris un manuel de DOS 5.1 dans la figure. Cette nouvelle version est 1.400% plus rapide grâce à un tas d'optimisations et elle fonctionne aussi bien mieux pour le travail en équipe.

Mais ce qui vous importe, c'est la façon dont elle peut accélérer votre travail. Alors, au lieu de faire une longue liste de toutes ses fonctionnalités, voici les quatre plus importantes :

1. Rafraîchissement de tous les navigateurs

Votre site doit être aussi parfait que possible sur toutes sortes de terminaux, sur un iPhone, iPad, Galaxy S3, Chrome, Firefox, IE 11 sur un pc... bref, beaucoup de boutons à cliquer. CodeKit peut le faire pour vous.

CodeKit rafraîchit tous les terminaux et plus encore. Modifiez votre code et une fraction de seconde plus tard chaque terminal est mis à jour. Pas de plugin, pas de configuration complexe. Ça marche même avec des sites avancés comme Wordpress et Drupal. Il suffit d'appuyer sur le bouton Preview et de copier l'URL sur les autres terminaux. Quand vous l'aurez vu en action, vous ne travaillerez plus sans lui.

Note de Chris : Non seulement la page est rafraîchie quand vous changez un template ou un fichier JavaScript, mais elle fait de l'injection de style à la moindre modification de CSS (qu'elle passe par un préprocesseur ou pas), autrement dit faire le design d'états interactifs est beaucoup plus facile.

deux pages de css-tricks, une sur ordi, l'autre sur iPad

CodeKit 1 pouvait également faire de l'injection de style, c'est à dire vous permettre de visualiser les changements immédiatement après les avoir enregistrés, sans avoir à rafraîchir manuellement la fenêtre de votre navigateur. Mais maintenant CodeKit a son propre serveur intégré (qui peut être lié à MAMP ou à ce que vous voulez), ce qui signifie que tous les navigateurs sont rafraîchis.

NdT : Comme indiqué, il suffit de copier l'url sur un terminal connecté au même réseau wifi que celui qu'utilise votre ordinateur, toute modification sera visible en direct sur votre ordinateur et sur le ou les terminaux connectés au réseau. Pour les terminaux Android, il y a une étape supplémentaire : cliquer sur l'onglet “server” et copier l'adresse indiquée pour les terminaux non compatibles avec Bonjour, le système de réseau instantané de Mac.

Si vous avez des pages qui requièrent un langage “côté serveur” (par exemple php pour votre header et votre footer, ou bien pour un bouton d'achat), le serveur intégré de CodeKit ne pourra pas les traiter, vous aurez un message “External server required”. Mais pas de problème, il suffit d'ouvrir MAMP, de choisir le dossier de votre site, puis d'aller sur la page principale de CodeKit, ouvrir réglages (la petite roue dentée), sous General choisir Browser refreshing et dans External Server activer external server required et l'adresse http://localhost:888 (qui sera déjà inscrite).

Plus d'infos (en anglais) sur cette page.

Bryan Jones a aussi concocté quelques vidéos de présentation très claires (en anglais), à regarder ici.

2. Bower

Bower vous permet d'installer rapidement quelques 7.000 composants, de jQuery à Modernizr en passant par Bootstrap et même Wordpress. Bower est maintenant intégré à CodeKit, de sorte que toutes ces ressources sont à deux clics : ouvrez la fenêtre Assets, sélectionnez les composants que vous voulez et cliquez sur l'icône cloud. CodeKit va chercher la dernière version disponible, ainsi que toutes les dépendances requises, et les intègre à votre projet.

page codekit avec onglet des favoris

CodeKit vous épargne tout le souci de la mise à jour, il suffit d'ouvrir la fenêtre Assets, de choisir l'onglet Installed et vous verrez tous vos composants, avec mention de la version installée et de la dernière version disponible. Pour mettre à jour un composant, un clic suffit (idem si vous voulez tout mettre à jour en une seule fois).

Note de Chris : Je n'ai pas eu encore beaucoup l'occasion d'utiliser Bower, mais la raison principale qui me fait m'y intéresser est cette facilité de maintenir toutes les dépendances à jour.

NdT : Pour vous faciliter le travail, l'onglet favorites (voir l'image ci-dessus) propose un choix des composants les plus utilisés. Vous pouvez marquer vos propres composants comme “favoris” pour les retrouver facilement.

Plus d'infos (en anglais) sur cette page.

3. Autoprefixer

Les préfixes constructeurs : des règles CSS que seul un ingénieur d'IE6 pourrait aimer. Autoprefixer vous ôte ce souci, et il est maintenant intégré à CodeKit. Vous écrivez votre CSS normal, et Autoprefixer y ajoute les préfixes constructeurs en fonction de l'évolution des navigateurs. Il fonctionne parfaitement avec Sass, Less et Stylus, et il est entièrement configurable : il vous suffit de spécifier la compatibilité navigateurs souhaitée et il s'occupe du reste.

Note de Chris : je pense qu'Autoprefixer a changé la donne, au moins autant que CodeKit lui-même, et il vont très bien ensemble. Même si je suis un grand fan des préprocesseurs, je trouve qu'il y a mieux pour le préfixage. Autoprefixer, qui est un postprocesseur, fait ça mieux que tout le monde. Vous pouvez tout apprendre à son sujet par son créateur, ici-même.

NdT : Il suffit de cocher la case Autoprefixer et le tour est joué. Pour personnaliser Autoprefixer, aller sur réglages, puis Languages, puis Special language Tools et modifier éventuellement Autoprefixer Browser String.

Un autre outil spécial de CodeKit est Bless : IE9 et antérieurs limitent les fichier CSS à 4.095 sélecteurs, au-delà ils ne connaissent plus. Bless résout ce problème. Si vous avez un fichier CSS volumineux, pensez à l'utiliser.

Pour Autoprefixer, plus d'infos (en anglais) sur cette page, et pour Bless sur cette page.

4. Libsass

Si vous lisez CSS-Tricks, vous écrivez sans doute en Sass - et vous avez sans doute remarqué que ça prend quelques secondes pour compiler, pas vrai ? Plus maintenant. Vous pouvez opter pour Libsass dans CodeKit et Sass sera compilé instantanément. Libsass est un nouveau compilateur Sass, écrit en C au lieu de Ruby.

À ce jour, Libsass est encore en beta, et certaines fonctions avancées (comme les espaces de noms et les nouveautés parues dans la version 3.3) ne sont pas encore compatibles, mais Libsass avance à pas de géants et la compatibilité devrait être atteinte avant l'été. À moins de faire des choses vraiment très complexes, vous pouvez l'utiliser dès aujourd'hui et vous verrez la différence en termes de rapidité (nous l'avons utilisé pour le site de CodeKit, et croyez-moi il y a des fonctions complexes).

NdT : aujourd'hui (octobre 2014) Libsass est à jour et fonctionne avec les dernières nouveautés de Sass. Utilisation de Libsass obligatoire :)

Note de Chris : Même si Bryan a raison de dire que je préfère Sass, c'est vraiment à chacun de faire selon son goût, chacun des préprocesseurs a ses avantages. Une des rares critiques contre Sass est justement qu'il peut être lent à compiler par rapport à d'autres préprocesseurs fonctionnant avec JavaScript. Libsass fait de Sass le plus rapide, c'est donc super (si vous l'utilisez).

NdT : Plus d'infos (en anglais) sur cette page

Et bien d'autres trucs cool

OK, je vous ai raconté des blagues. Il y a trop de nouvelles fonctionnalités intéressantes pour s'arrêter à quatre. En voici quatre autres que vous allez aimer :

Source Maps

CodeKit peut créer des source maps pour Sass, Less, CoffeeScript, JavaScript et TypeScript (CodeKit compile aussi TypeScript maintenant). Les source maps vous permettent de voir votre code source original dans l'inspecteur web de votre navigateur, plutôt que le résultat compilé ou minifié, ce qui permet de déboguer plus facilement.

un dossier comprenant un fichier style.css.map

Zurb Foundation

À la demande générale, il y a maintenant une fonctionnalité “nouveau projet Zurb Foundation” qui intègre automatiquement Foundation dans votre projet.

NdT : CodeKit propose d'autres frameworks et outils, tels que Compass, Bourbon, Susy et Nib, tout aussi faciles à intégrer à votre projet.

Plus d'infos (en anglais) sur cette page

Hooks

Vous avez besoin de lancer un script personnalisé lorsque votre projet est modifié ? de dire à Coda ou Transmit de se synchroniser à un serveur distant ? de gzipper quelques fichiers ? Pas de problème. Ouvrez la page “Hooks” et installez votre hook (NdT : Un hook, littéralement crochet, permet de lancer un programme personnalisé au moment précis où le programme principal a la tâche de l’exécuter)

la page de codekit avec hooks

Note de Chris : Ce serait intéressant de le voir utiliser Grunt ou Gulp. Une des beautés de Grunt est qu'il peut réaliser un zillion de choses - des choses très spécifiques et qui n'ont pas leur place dans CodeKit, par exemple ce système d'icônes avec SVG que je décris ici. Je ne suis pas sûr que ce soit une bonne chose de mélanger les outils de développement, mais ça vaut le coup d'y réfléchir.

NdT : Plus d'infos (en anglais) sur cette page

CoffeeScript

Si vous écrivez en CoffeeScript, il y a deux nouvelles fonctionnalités que vous allez adorer. Tout d'abord vous pouvez insérer avant (prepend) ou après (append) votre CoffeeScript des fichiers JavaScript comme jQuery et ceci directement. Un simple glisser/déplacer ou un statement à l'intérieur de votre fichier CoffeeScript et le tour est joué. Le résultat est un fichier JavaScript minifié unique.

Ensuite, CoffeeLint est maintenant intégré, vous permettant de vérifier la syntaxe de vos fichiers CoffeeScript avant leur compilation. Pratique également pour forcer un style, par exemple l'indentation.

La suite ?

Réponse courte : “tout ce que demandera Chris”. La réponse longue est que j'ai complètement repensé l'architecture de CodeKit ce qui fait que l'ajout de nouvelles fonctionnalités n'est jamais compliqué. Je prévois d'avancer rapidement et de manière itérative. La compatibilité avec Jekyll est une de mes priorités. Le scaffolding (échafaudage) et les templates également, la minification d'HTML, If-else et les boucles dans le langage Kit.

Contactez-moi !

J'aime avoir des retours des utilisateurs, même s'ils n'utilisent pas CodeKit (Grunt !). Visitez notre nouveau site web, tout le mérite en revient à Guy Meyer, mais ça m'intéresse de savoir ce que vous en pensez, de professionnel à professionnel. Vous pouvez me trouver sur Twitter : @bdkjones.


NdT: (1) Autres solutions, disponibles pour Mac et Windows : Scout, ou Prepros, ou encore Mixture. Des trois, Prepros semble être celle qui se rapproche le plus de CodeKit en termes de fonctionnalités.

Et bien sûr si vous voulez utiliser Grunt, référez vous à l'excellent article de Chris Coyier, traduit ici-même.   ↩︎


Intéressé par les ourils de développement ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur le workflow parus dans la Cascade.


original paru le dans CSS-Tricks.

Traduit avec l'aimable autorisation de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2014.