CodePen: Concevoir, tester, partager et découvrir HTML, CSS et JavaScript
L’un des défis d’un système de gestion de contenu consiste à tester et à produire des outils scriptés. Bien que ce ne soit pas une exigence pour la plupart des éditeurs, en tant que publication technologique, j'aime partager occasionnellement des scripts de travail pour aider d'autres personnes. J'ai expliqué comment utiliser JavaScript pour vérifier la force d'un mot de passe, comment vérifier la syntaxe d'une adresse e-mail avec des expressions régulières (Regex) et j'ai récemment ajouté cette calculatrice pour prédire l'impact des avis sur les ventes en ligne. J'espère ajouter des dizaines d'outils sur le site mais WordPress n'est pas propice à une telle publication… c'est un système de contenu, pas un système de développement.
Donc, pour faire fonctionner mes petits scripts, j'aime utiliser CodePen. CodePen est un outil bien organisé avec un panneau HTML, un panneau CSS, un panneau JavaScript, une console et une publication du code résultant. Chaque panneau contient des informations lorsque vous passez la souris sur les éléments afin que vous compreniez ce qui est possible, ainsi qu'un codage couleur de votre HTML, CSS et JS pour vous aider à éditer et à écrire plus facilement.
CodePen est un environnement de développement social. En son cœur, il vous permet d'écrire du code dans le navigateur et d'en voir les résultats au fur et à mesure que vous construisez. Un éditeur de code en ligne utile et libérateur pour les développeurs de toutes compétences, et particulièrement stimulant pour les personnes qui apprennent à coder. CodePen se concentre principalement sur les langages frontaux tels que HTML, CSS, JavaScript et les syntaxes de prétraitement qui se transforment en ces choses.
À propos de CodePen
Avec CodePen, j'ai pu faire tout le travail nécessaire pour publier la calculatrice J'ai intégré le site. La plupart des créations sur CodePen sont publiques et open source. Ce sont des êtres vivants avec lesquels d'autres personnes et la communauté peuvent interagir, depuis un simple cœur jusqu'à laisser un commentaire, jusqu'à bifurquer et changer selon leurs propres besoins.
Avec CodePen, vous pouvez modifier votre vue si vous souhaitez que les volets soient à gauche, à droite ou en bas pendant que vous travaillez… ou afficher le code HTML dans un nouvel onglet. La vue côte à côte fonctionne incroyablement bien pour tester vos paramètres réactifs, car vous pouvez ajuster la taille du volet visible.
Vous pouvez organiser vos scripts de travail dans des stylos, les combiner dans des projets (éditeur multi-fichiers) ou même créer des collections. Il s'agit d'un site de portfolio fonctionnel pour le code frontal où vous pouvez suivre d'autres auteurs, intégrer d'autres projets partagés publiquement dans les vôtres pour les modifier et même apprendre à faire des choses amusantes à travers des défis.
Vous pouvez l'enregistrer en tant que GitHub Gist, l'exporter dans un Zip *: français fichier, et même enchâsser le stylo dans un article comme celui-ci:
Voir le stylo Impact sur les ventes prévu des avis en ligne by Douglas Karr (@martech_zone) au CodePen.
L’une des limites de l’éditeur Pen est le volume de code. Vous ne rencontrerez peut-être jamais ce problème, car l'éditeur devrait fonctionner avec des centaines ou des milliers de lignes de code. Mais lorsqu'ils commencent à atteindre 5,000 10,000 à XNUMX XNUMX lignes de code ou plus, vous verrez l'éditeur commencer à échouer. Cependant, vous pouvez ajouter des références externes à des feuilles de style ou du JavaScript hébergé ailleurs !
Je vous encourage à vous inscrire. Vous serez abonné à leur e-mail hebdomadaire et pourrez ajouter le flux à votre flux RSS pour voir les stylos nouvellement publiés. Et si vous commencez à chercher ou à parcourir les stylos publics, vous découvrirez des projets incroyables… les utilisateurs sont plutôt talentueux !
FOLLOW Douglas Karr sur Codepen
La version payante, CodePen Pro, offre une tonne de fonctionnalités supplémentaires pour des fonctionnalités ou des équipes améliorées, notamment la collaboration, les processus, l'hébergement d'actifs, les vues privées et même des projets déployés avec votre domaine ou sous-domaine. Et, bien sûr, CodePen fournit un excellent référentiel avec intégration Github sur lequel toute votre équipe peut travailler. Si vous souhaitez tester du code simple comme moi, CodePen est un outil inestimable.