Le co-fondateur Alex Vazquez explique comment le terrain de jeu de développement de CodePen aide les équipes de développement frontales à créer, partager et déboguer du code

TL; DR: Lorsque CodePen a commencé, les trois amis derrière lui pensaient que leur projet parallèle ne durerait pas plus de quelques semaines. Maintenant, l’éditeur de code en ligne affiche des aperçus en direct de HTML, CSS et JavaScript pour donner aux développeurs un espace réactif et sans stress pour bricoler avec les nouvelles technologies, partager leurs dernières créations et collaborer avec d’autres codeurs. Nous avons discuté avec le cofondateur Alex Vazquez de la façon dont la passion de l’équipe pour les cultures de conception, de développement et de démarrage est devenue une plate-forme à service complet qui continue d’ajouter des fonctionnalités en réponse aux commentaires d’une communauté d’utilisateurs engagée..


Personne ne voulait que CodePen soit une entreprise. Alex Vazquez, Tim Sabat et Chris Coyier se sont rencontrés un jour pour commencer à créer un site Web – ou, comme le dit Alex, pour «faire ce que les nerds font lorsqu’ils se réunissent». Il pensait que le projet durerait peut-être une semaine, peut-être un mois.

Les trois amis ont été les premiers développeurs et designers embauchés chez Wufoo, un constructeur de formulaires HTML vendu à SurveyMonkey en 2011.

«SurveyMonkey était une grande entreprise, mais nous savions aussi à quel point nous aimions travailler dans une petite entreprise, à quel point nous aimions avoir le contrôle sur le développement de choses qui nous tenaient vraiment à cœur et pouvoir choisir la façon dont vous construisiez une entreprise. “

Chris Coyier, l’homme derrière CSS-Tricks, voulait créer un moyen convivial pour les développeurs frontaux de montrer leur code. L’environnement de codage en direct de CodePen comprend un éditeur de code dans le navigateur dans lequel les utilisateurs créent des projets, appelés stylos. À partir de là, les développeurs peuvent collaborer, critiquer et trouver l’inspiration auprès d’autres membres.

Les cofondateurs proposaient à l’origine des outils CodePen gratuitement, mais ont lentement évolué vers le modèle freemium actuel. Les fonctionnalités Pro incluent des tests multi-navigateurs, l’hébergement d’actifs et des capacités collaboratives accrues. Selon Alex, l’équipe CodePen maintient un bon équilibre entre les fonctionnalités payantes et gratuites.

“CodePen est assez unique en ce sens que ce ne sont pas seulement les utilisateurs Pro qui nous maintiennent à flot”, a-t-il déclaré. «C’est la communauté dans son ensemble. Nos utilisateurs créent 99,9% du contenu de notre site, et c’est pourquoi les gens viennent sur CodePen. Nous essayons simplement d’être des gardiens responsables de la communauté et de leur contenu. »

CodePen fournit tous les outils dont vous avez besoin pour créer, partager et apprendre

Alex appelle affectueusement la quête de CodePen pour répondre aux besoins de chaque utilisateur comme une “bénédiction étrange et une malédiction”. Il se sent parfois jaloux d’un ami dont les moyens de subsistance se concentrent sur la façon dont un article en ligne défile de haut en bas sur Medium. La polyvalence, cependant, est l’accomplissement de la signature de CodePen.

“Nous avons toujours regardé comment les gens utilisent CodePen et comment nous pouvons soutenir cela ou en faire une meilleure expérience pour eux”, a déclaré Alex. De la collaboration à l’hébergement d’actifs, chaque fonctionnalité payante dispose d’une version légère et gratuite pour le reste de la communauté.

“Nous avons gardé cet équilibre en travaillant sur des choses que la communauté aimerait, mais en même temps, en créant juste assez de fonctionnalités Pro pour continuer à développer l’entreprise”, a-t-il déclaré..

1. Interface d’édition propre avec des options pour HTML, CSS et JavaScript

L’éditeur basé sur le navigateur de CodePen offre des zones réglables pour votre code et votre aperçu. Le codage est très confortable, compte tenu de la coloration syntaxique de l’éditeur et de l’intégration d’Emmet. Nous apprécions également sérieusement le bouton Tidy – un moyen en un clic pour nettoyer vos indentations et la mise en forme.

Graphique des fonctionnalités de l'éditeur CodePen

CodePen offre aux développeurs frontaux un espace sans stress pour écrire et prévisualiser du code.

Lorsque vous êtes prêt à partager votre stylet, l’éditeur fournit un code intégré de copier-coller, des liens à partager sur les réseaux sociaux ou par SMS, ainsi qu’une exportation vers un fichier zip.

Les autres utilisateurs de CodePen peuvent découvrir votre travail et choisir de bifurquer le code ou de le cœur pour montrer votre appréciation. Les membres peuvent se suivre et organiser des stylos en collections pour trouver plus facilement des stylos utiles.

2. La plate-forme de blogs simple vous permet d’écrire sur le code et de partager vos stylos

Les premiers outils que les co-fondateurs ont ajoutés à l’interface CodePen ont simplifié la façon dont les développeurs pouvaient partager leurs stylos.

«Nous avons vu que les gens écrivaient des articles de blog et intégraient constamment des stylos, donc l’une des premières choses que nous avons faites a été de créer un moyen très simple pour vous d’intégrer un stylo dans n’importe quel site Web que vous exécutez», a déclaré Alex. «En même temps, tout le monde ne veut pas configurer WordPress. Certaines personnes veulent juste écrire un article rapide et montrer un stylo. »

Naturellement, les co-fondateurs ont ajouté une interface de blogage allégée, qui est incluse avec chaque compte CodePen. L’éditeur de blog prend en charge Markdown, la coloration syntaxique et le CSS personnalisé pour les publications individuelles.

3. Le mode Présentation maximise l’espace d’écran pour afficher les stylos avec un projecteur

CodePen propose plusieurs modes de visualisation différents pour les différentes façons de partager vos stylos: le mode Collab permet à plusieurs personnes de taper et de modifier du code en même temps, tandis que le mode Professeur permet aux apprenants de regarder leur formateur travailler pendant qu’ils tapent.

La vue préférée d’Alex, le mode Présentation est orienté vers des démonstrations de conférence et montrant des stylos sur un projecteur.

Collage du mode de présentation CodePen

Les démonstrations de codage sont plus faciles à interagir avec les participants via le mode de présentation de CodePen.

«Souvent, vous allez à une conférence et pour que l’exemple de quelqu’un s’exécute, vous devez télécharger les référentiels et installer les dépendances avant de pouvoir jouer avec», a déclaré Alex. “Oui, c’est une étape de 10 minutes que vous pouvez faire parce que vous êtes un développeur incroyable, mais ne serait-ce pas génial si vous pouviez le faire en quelques secondes?”

Les utilisateurs peuvent partager des stylos avec un lien abrégé et redimensionner l’éditeur et prévisualiser l’apparence. Intelligemment, CodePen a supprimé toutes les fonctionnalités, sauf les fonctionnalités essentielles, de sorte que la plate-forme se charge rapidement – même en utilisant le terrible wifi standard lors des conférences.

Les fonctionnalités à venir en 2017 vont du pratique au mystérieux

CodePen continue d’ajouter et d’améliorer des fonctionnalités, en grande partie grâce aux commentaires des utilisateurs. Même si les membres de CodePen apportent de nombreuses améliorations à la plate-forme, Alex a déclaré que l’équipe préfère garder les grands changements près du gilet jusqu’à ce qu’ils soient prêts à être mis en ligne..

“Nous n’aimons pas dire aux gens que nous avons quelque chose avant de savoir que nous pouvons le publier et vraiment les impressionner”, a-t-il déclaré. “Nous ne sommes pas en mode furtif. Il s’agit de ne pas vouloir décevoir notre communauté. “

L’outil le plus demandé est enfin en route après des années de développement

Une telle mise à jour à venir plus tard cette année est la raison pour laquelle Alex a rejoint CodePen – sauf qu’il pensait que l’équipe serait en mesure de l’offrir au cours de la première année de la plate-forme.

Quatre ans plus tard, CodePen restreint la possibilité de «créer des MiniPens à l’intérieur des stylos, pour le dire d’une manière vraiment obscure», a déclaré Alex. La nouvelle fonctionnalité permettra aux développeurs de plonger plus profondément dans les stylos sans la complexité du contrôle de version ou des environnements locaux.

«Nous allons vous permettre de créer des solutions plus complexes, mais nous essayons de rester fidèles au cœur de CodePen», a-t-il déclaré, faisant allusion à l’interface simple et aux commentaires instantanés. “Je pense que si vous utilisez CodePen, il sera assez évident de savoir ce que vous voudriez pouvoir faire.”

Le processus de paiement refait maintient l’entreprise en marche

À l’autre bout du spectre des mises à jour, Alex était heureux de nous donner le “scoop le moins excitant que vous n’ayez jamais entendu”. Il a récemment réorienté ses efforts de développement vers la reconstruction du processus de paiement de CodePen et des intégrations avec Stripe et Braintree.

«Tout cela est très ennuyeux, mais il est tout à fait nécessaire de nous maintenir en activité en tant qu’entreprise», a-t-il déclaré. “Notre premier coup d’attaque était juste quelque chose qui nous a permis de nous mettre en marche, et nous avons en quelque sorte simplement cloué dessus au fil des ans.”

L’équipe à distance de CodePen aborde la gestion de projet avec passion

Alex, Tim et Chris ont lentement augmenté l’équipe de CodePen à huit employés au cours des cinq dernières années, tout le monde travaillant à distance.

“Nous n’avons même pas deux personnes dans le même état, encore moins dans la même ville”, a déclaré Alex. Au cours des derniers mois, l’équipe a officialisé les communications en sprints de gestion de projet. Des discussions informelles ont toujours lieu sur Slack, mais elles suivent les problèmes et l’heure dans GitLab.

Photo de groupe de l'équipe CodePen

En tant qu’équipe distante, les employés de CodePen étaient sûrs de prendre une photo pendant la seule fois où ils se sont rencontrés en personne.

«Nous étions incroyablement inefficaces, nous ne faisions que prendre des projets et nous oublions que quelqu’un d’autre y travaillait déjà», a déclaré Alex. «Nous avons réalisé que toute cette gestion de projet que nous avions évitée dans chaque grande entreprise pour laquelle nous avions travaillé avait un but. Nous ne sommes pas super formels, mais nous voulons ajouter le moins de gestion de projet qui nous rend efficaces. “

L’équipe CodePen enregistre un podcast qui donne un aperçu fascinant et transparent de la gestion d’une petite entreprise de logiciels Web.

“C’est évident parce que nous avons construit un site pour que les développeurs puissent montrer leur travail, mais tout le monde chez CodePen aime vraiment la technologie et la communauté positive”, a déclaré Alex. “Le développement est notre métier, mais c’est aussi quelque chose que nous apprécions depuis longtemps.”

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me