CodePen: Concevoir, tester, partager et découvrir HTML, CSS et JavaScript

Codepen: créer, tester et découvrir du code frontal

Un défi avec un système de gestion de contenu est le test et la production d'outils scriptés. Bien que ce ne soit pas une exigence pour la plupart des éditeurs, en tant que publication technologique, j'aime partager de temps en temps des scripts de travail pour aider d'autres personnes. J'ai partagé comment utiliser JavaScript pour vérifier la force du mot de passe, Comment vérifier la syntaxe de l'adresse e-mail avec les expressions régulières (Regex), et plus récemment ajouté ceci calculatrice pour prédire l'impact sur les ventes des avis en ligne. J'espère ajouter des dizaines d'outils sur le site mais WordPress n'est pas vraiment propice à une publication comme celle-ci… 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 des éléments afin que vous compreniez ce qui est possible, ainsi qu'un code 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é dans 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, du simple cœur, à laisser un commentaire, à bifurquer et à changer pour 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 chacun de 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 essentiellement d'un site de portefeuille de travail pour le code frontal où vous pouvez suivre d'autres auteurs, intégrer d'autres projets partagés publiquement dans le vôtre pour les modifier et même apprendre à faire des choses amusantes à travers des défis.

Vous pouvez enregistrer en tant que GitHub Gist, exporter dans un fichier zip 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 (@douglaskarr)
on CodePen.


L'une des limitations 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, voire des milliers de lignes de code. Mais quand 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 JavaScript hébergées ailleurs!

Je vous encourage à vous inscrire. Vous serez abonné à leur e-mail hebdomadaire et pourrez également ajouter le flux à votre flux RSS afin que vous puissiez voir les stylos nouvellement publiés. Et, si vous commencez à chercher ou à parcourir les stylos publics là-bas, vous trouverez des projets incroyables… les utilisateurs sont assez talentueux!

Suivez nos offres et innovations 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 - y compris la collaboration, les processus, l'hébergement d'actifs, les vues privées et même les projets déployés avec votre propre domaine ou sous-domaine. Et, bien sûr, CodePen fournit un excellent référentiel avec intégration Github où toute votre équipe peut travailler. Si vous souhaitez simplement tester un code simple comme je le suis, CodePen est un outil inestimable.

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..