Lorsque l’on code, le plus souvent, on prend notre éditeur préféré et notre navigateur en local. La routine en fait ! Mais il arrive que l’on est envie de tester notre code directement en ligne sans passer par cette procédure.
Des services de ce genre existent comme JsBin ou bien encore JsFiddle. Pour des expérimentations au niveau javascript, ils sont plutôt pas mal. Cependant, lorsque l’on veut faire un peu de CSS, ils sont beaucoup moins adaptés. Pour palier à cela, une des solutions possibles est Dabblet.
Présentation du service
Dabblet est un editeur de code en ligne centré sur le CSS3. Il est très simple et reprend une interface similaire à ses compères. Un des premier aspect qui se dégage de l’application et sa grande fluidité et la similarité avec un éditeur classique.
Bref, le premier contact a été très bon de mon côté, mais de quoi est capable Dabblet?
Fonctionnalités
Pourquoi utiliser dabblet et non pas JsFiddle ou bien encore JsBin lorsque l’on jouer avec du CSS3?
Les réponses ci-dessous :
- Tout d’abord, aucune action sur la page est nécessaire pour mettre le rendu à jour, tout est fait en instantanée. C’est très agréable et cela évite les clics incessants sur un bouton “modifier” !
- Il est possible de sauvegarder son travail directement sur github gist et tout cela via ajax. Pas besoin d’attendre le rechargement de la page donc pour continuer à travailler.
- Des raccourcis claviers sont disponibles comme sur un éditeur de code classique (Selon le navigateur et dans mon cas, certains rentrent en conflit avec celui-ci ce qui donne des résultats pas géniaux…)
- De nombreux systèmes de prévisualisation de propriétés CSS3. C’est très pratique de voir combien dure 3s ! Cela parait inutile mais ça évite de devoir tester son application pour voir ce que cela donne. De la même manière, on a la prévisualisation de dégradés, de mesures, de couleurs, d’angles …
- Il est possible de personnaliser la disposition des éléments de l’interface.
Je n’ai pas fait une liste exhaustive de toutes les fonctionnalités de Dabblet mais de celles qui me paraissaient les plus intéressantes.
ScreenShot
Quelques exemples de preview d’attributs de CSS
Conclusion
Dabblet est un outil très récent et très intéressant. En apparence, il se rapproche un peu des autres éditeurs en ligne, cependant il est très axé design et contient des petits détails très utiles qui lui permette de se rapprocher d’un éditeur classique.
Liens
Pour terminer cet article, les sources sur lesquelles s’appuie le contenu que je vous invite à lire :
- Le site de Dabblet :Â http://dabblet.com
- Le blog et le post traitant de Dabblet par sa créatrice  : http://lea.verou.me/2011/12/introducing-dabblet-an-interactive-css-playground/
