Si vous suivez Chris Coyier sur Twitter, alors vous avez sûrement vu passer de nombreuses mentions au cours des derniers mois d'un projet pas si secret appelé CodePen. Chris nous a promis que ce nouvel outil rejoindrait jsFiddle et Tinkerbin, servant de terrain de jeu en ligne pour expérimenter et partager des démos CSS, HTML et JavaScript.
Comme un enfant de décembre qui attend impatiemment le jour de Noël, je meurs d'envie de voir ce que Chris et son équipe vont inventer. Heureusement, Noël est arrivé. CodePen est un projet live et j'ai hâte de vous en parler.
Bonne compagnie
Récemment, j'ai écrit un article comparant les cinq meilleurs terrains de jeu en ligne pour HTML, CSS et JavaScript. Dans cet article, j'ai exploré le fonctionnement de chacune des solutions suivantes et expliqué ce que j'aime et ce que je n'aime pas chez chacune d'entre elles:
- CSSDesk
- JS Bin
- jsFiddle
- Dabblet
- Tinkerbin
Ces outils sont une dépendance légère pour moi et je ne peux tout simplement pas en avoir assez. Comme vous pouvez le constater, le marché regorge d’options vraiment géniales, qui ont toutes leurs forces et leurs faiblesses.
Étant donné que les outils existants étaient déjà si formidables, j'étais très impatient de voir la direction unique que prendrait CodePen et de savoir si elle deviendrait ou non mon application de référence pour les expériences rapides sur le Web. Voyons si cela correspond à cet espoir.
Rencontrez CodePen
Comme vous pouvez le voir dans la capture d'écran ci-dessus, CodePen est un site net. La palette de couleurs CodePen ressemble beaucoup à celle de Photoshop CS6 avec quelques textures de lin ressemblant à celles de Apple.
En outre, un grand coup de chapeau aux concepteurs et développeurs talentueux qui se cachent derrière ce site pour avoir pris la mesure supplémentaire de le rendre réactif.
Une expérience plus sociale
Ce qui m’intéresse tout de suite pour CodePen, c’est que ce site modifie un peu l’attention par rapport aux autres de sa catégorie. Avec tous les autres sites que j'ai vus, la page d'accueil affiche l'éditeur. L’accent est mis sur l’obtention du code dès le chargement de la page. Il existe des fonctionnalités de partage, mais le partage se fait directement par le collage de liens.
Cependant, CodePen adopte l’approche Dribbble. La page d'accueil est remplie d'exemples d'utilisateurs récents que vous pouvez parcourir et modifier. Il existe actuellement trois flux parmi lesquels choisir: Choix de l'éditeur, Populaire et Récent.
Comme vous pouvez le voir, tout comme Dribbble, chacun? Pen? est affiché avec deux statistiques: le nombre de fois consultés et le nombre de fois aimé. En outre, comme vous vous en doutez, vous pouvez suivre les utilisateurs qui publient du contenu que vous appréciez.
Pour moi, ce modèle est infiniment plus susceptible de reprendre et de décoller. Au lieu de se concentrer sur les développeurs individuels, cette application a un fort objectif de communauté qui garantira que les utilisateurs ont intérêt à revenir chaque semaine, voire tous les jours, pour voir la fraîcheur que les autres utilisateurs ont publiée.
En outre, personne ne peut résister à l'attrait de voir son propre nombre augmenter lorsqu'il publie quelque chose. Les auteurs talentueux auront donc une raison claire de continuer à créer de nouveaux postes.
Utiliser CodePen
Quand j'ai vu l'éditeur de CodePen pour la première fois, j'ai tout de suite adoré. C'est propre, attrayant et fait simplement bon usage de l'espace disponible.
Disposition
Les autres sites de jeux de code essaient de trouver le système idéal pour afficher votre code et votre aperçu en même temps, mais pour être honnête, je finis par être frustré par tous pour une raison ou une autre. Cependant, CodePen semble frapper la balle hors du parc.
Comme vous pouvez le constater, il existe une mise en page à trois colonnes pour HTML, CSS et JavaScript, qui s’ajoute à un aperçu en direct sur toute la largeur, qui se met à jour sans le fardeau des mises à jour manuelles.
Caractéristiques impressionnantes
Chaque module de code peut être étendu pour occuper toute la largeur des trois colonnes, masquant ainsi les autres modules, avec un raccourci clavier rapide. Malheureusement, ces raccourcis sont en contradiction avec les raccourcis intégrés de Safari, mais vous pouvez également cliquer sur le bouton "1". texte pour élargir la colonne, donc ce n'est pas grave.
Les responsables de CodePen ont tout mis en œuvre pour que vous disposiez des toutes dernières avancées en matière de codage. Par exemple, le module HTML permet d’utiliser HAML, Markdown et Slim. Ma fonctionnalité préférée ici est en réalité complètement cachée: CodePen supporte ZenCoding! C’était ma seule demande pour ce nouvel outil et je suis ravi qu’il ait fait la différence.
Pour passer au module CSS, vous avez ici accès à LESS, Sass et SCSS, ainsi qu’à diverses options de réinitialisation et à Prefix free, qui vous permet d’utiliser CSS3 sans le fix des préfixes du navigateur. Autre caractéristique intéressante: l'aperçu en direct est toujours mis à jour automatiquement, même si vous utilisez des préprocesseurs (contrairement à Tinkerbin).
Enfin, le module JavaScript vous permet d’utiliser CoffeeScript et d’ajouter quelques bibliothèques communes telles que jQuery et MooTools.
Si vous accédez rapidement aux paramètres du compte, vous pouvez modifier tous vos paramètres par défaut afin de ne pas avoir à configurer votre flux de travail à chaque fois. Faites de SCSS votre langage CSS par défaut, passez à un jeu de couleurs clair ou choisissez de toujours inclure Modernizr.
Aller plus loin
Lorsque vous codez votre propre petite démo, CodePen vous offre quatre options en haut de l'écran: Mise à jour, Fourchette, Détails et Partager (le stylo de quelqu'un d'autre vous donne les boutons Fourchette, Partager et Amour). Le système de comptes CodePen est basé sur l'API GitHub afin que les fans de Git se sentent chez eux.
Un commutateur en haut à droite de l'interface vous permet de passer de la vue Editeur à la vue Détails. Le dernier de ceux-ci est montré ci-dessous:
Ici, vous pouvez obtenir une description complète du stylo, afficher des statistiques intéressantes et quitter? Sympa? commentaires.
Quel est le verdict?
J'avais de grands espoirs pour CodePen, des attentes difficiles à satisfaire pour tout produit gratuit.Heureusement, c'est tout ce que je voulais et plus encore. Comme je l'ai déjà dit, j'ai adoré toutes les tentatives précédentes d'utilisation d'une application de ce type, mais elles semblaient toutes légèrement dérangeantes et frustrantes à leur manière.
CodePen, en revanche, est simplement une joie à utiliser. Ce n'est pas seulement le meilleur outil du genre, mais aussi le plus fonctionnel. Toutes les petites fonctionnalités et options que je veux utiliser sont présentes et faciles à mettre en œuvre et l'aspect social rend l'expérience plus complète que ce que je peux imaginer, c'est exactement pourquoi ce site sera gigantesque.
Qu'est-ce que tu penses?
Maintenant que vous avez vu mon discours, allez sur le site CodePen, essayez-le et revenez me dire ce que vous en pensez.
Est-ce le meilleur utilitaire du genre? Comment est-il meilleur que les cinq autres mentionnés ci-dessus? Comment est-ce pire? J'aimerais entendre vos pensées!