Je préfère le développement Front-end au développement Back-end. Un développement plus orienté sur la compatibilité et l’accessibilité. Deux axes de réflexions que l’on retrouve régulièrement en design.

Curieux, et soucieux de mon espace de travail, j’ai essayé différents logiciels de développement. Il me semble qu’un simple outil de traitement de texte se révèle bien plus efficace qu’un lourd IDE. Moins de barres d’outils inutiles pour davantage d’espace de travail. Dans la catégorie Less is more, trois logiciels mon particulièrement intéressés :

  • Notepad ++ :
    L’ancien, le vieux de la vielle, qui malgré son âge, fait un travail toujours aussi remarquable. Notepad++ est efficace c’est certain. Une grande communauté, des thèmes et des plugins à la pelle.

  • Brackets :
    Brackets tape fort. L’éditeur de texte totalement orienté Front-end arrive avec des nouvelles idées simples mais lumineuses. Il s’agit d’un projet open source encore en développement. Séduit par les démonstrations, son test en conditions réelles s’est révélée tout de suite moins impressionant : les includes en php bloquent toutes les fonctions intéressantes de Brackets. Laissons le grandir encore un peu.

  • Sublime Text :
    Sublime Text est le prétendant au titre. Il est léger et terriblement rapide. Il démarre très vite, un véritable petit bolide. En plus de cela, il s’offre le luxe d’être soigné. Son utilisation est fluide et agréable. Avec des arguments pareils, Sublime Text à vite trouvé une communauté pour l’alimenter en plugin.

Je ne peux que vous conseiller d’utiliser Sublime Text. Son utilisation gratuite n’est pas très contraignante, et sa licence est très raisonnable. Vous n’avez aucune excuse pour ne pas l’essayer. Je bascule sur la béta de Sublime Text 3, j’en profite donc pour faire un point sur mon workflow.


1/ Le Package Control

Le Package Control est un élément essentiel pour profiter pleinement de Sublime Text. Pourquoi n’est-il pas installé en natif ? Aucune idée. Mais pas de panique, il suffit d’une petite minute pour corriger le tir.

  • CTRL + ù pour ouvrir la console
  • Ensuite on colle le code Python suivant :

    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Le Package Control va nous permettre d’administrer les plugins disponible pour Sublime Text. Pour accéder aux différentes commandes, lancer la Command Palette avec CTRL+SHIFT+P, puis commencer à taper « Package Control ». Pour plus de détails sur le Package Control.

sublime-package-control
sublime-instal


2/ Thème & Couleur

L’UI de Sublime Text est efficace : elle est fine et élégante. Néanmoins, j’ai déjà passé pas mal de temps sur la version 2, un peu de nouveauté ne me fera pas de mal.

Il y a deux séries de thèmes que j’apprécie particulièrement et que je vous conseille :

J’ai tendance à préférer leurs déclinaisons sombres. Elles sont beaucoup moins agressives pour vos petits yeux, et un poil moins énergivore si vous travaillez de temps en temps sur portable. Spacegray est livré avec une nouvelle UI pour Sublime Text lui-même. Très épuré, ambiance flat design, personnellement, je ne m’en suis pas privé.

sublime-monokai
sublime-tomorrow
sublime-spacegray

Preferences > Settings – User

{
	"theme": "Spacegray.sublime-theme",
	"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"
}

3/ Typographie

Le choix de la typographie pour travailler avec un éditeur de texte est une étape bien souvent négligée. À tort, beaucoup de gens la considère seulement comme un élément graphique. Une grave erreur quand on sait qu’elle est le premier outil de travail de tout développeur.

Il n’est pas rare de se voir conseiller Courier, car une monospace c’est bien pour les alignements. La démarche est bonne, mais le choix n’est pas très judicieux. Il est important de privilégier une typo sans empattement pour des textes de labeur lisible sur écran. Et ce n’est pas le cas de Courier.

Une typographie qui se veut bien dessiné pour le code se doit donc de remplir certaines conditions :

  • Une chasse fixe pour les alignements.
  • Pas d’empattement pour la lisibilité sur écran.
  • Une différenciation claire des caractères essentiels.

sublime-courrier-font
sublime-consolas-font
Consolas
sublime-anonymous-font
Anonymous-pro
sublime-source-sans-code-font
Source Code Pro.

Personnellement, j’ai tendance à préférer la Source Code Pro.

Preferences > Settings – User

{
	"font_face":"Source Code Pro",
	"font_options": "subpixel_antialias"
}

Voila pour aujourd’hui, seulement de la cosmétique.