Je veux aujourd’hui présenter un outil que j’ai commencé à utiliser il y a peu : CodePen. CodePen est un éditeur de code en ligne destiné aux designers et intégrateurs web. Il permet de partager facilement du code HTML, CSS et Javascript éditable à la volée par tous à la manière par exemple de JSFiddle.
Vous pourrez ainsi facilement partager du code pour par exemple vous faire aider à débugger une partie du code, faire une démo d’une fonction, d’un bouton ou d’une animation.
Une fois le code en ligne, il peut être forké par les internautes à la manière de GitHub.
Chaque « Pen », ou section de code partagée, présente quatres panneaux :
- trois panneaux verticaux avec le code : HTML, CSS et Javascript. Il est très facile d’ajouter des préprocesseurs HTML tels Haml ou Jade, CSS comme LESS ou Sass ou même Javascript comme Coffeescript. On pourra aussi utiliser des librairies externes comme jQuery, Bootstrap, Snap.svg, Angular.JS…
- un panneau aperçu du résultat final.
Même si des solutions équivalentes existent déjà (JSFiddle), je trouve CodePen plus facile et plus agréable à utiliser. De plus on peux facilement faire une recherche ou simplement naviguer parmis les « Pen » existants pour trouver de l’inspiration ou voir des exemples d’utilisation de librairies que l’on voudrait utiliser.
Je me suis servis efficacement de CodePen pour partager et améliorer le code d’une animation que j’avais créé avec la librairie Snap.svg : voir ici. J’ai dessiné le renard dans Illustrator sur la base d’un tutorial, je l’ai ensuite exporté au format SVG pour l’animer (au roll-over et au clic) grâce à Snap.svg.
J’avais aussi utilisé CodePen pour partager un effet de rollover sur image que j’avais voulu essayer de refaire après l’avoir vu sur un site. C’est un crossfading entre deux images utilisant seulement CSS.
Vous pouvez aussi voir mon profil sur CodePen.