Outils marketingMédias sociaux et marketing d'influence

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.

CodePen - calculateur pour prédire l'impact sur les ventes des avis en ligne

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.

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.
Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.