CodePen: Conçu, tester, partager et découvrir HTML, CSS et JavaScript

Un défi avec un système de gestion de contenu est de tester et de 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 de temps en temps des scripts de travail pour aider d'autres personnes. J'ai expliqué comment utiliser JavaScript pour vérifier la force du mot de passe comment vérifier la syntaxe des adresses e-mail avec les expressions régulières ( Regex ), et j'ai 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 que le 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 comme 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 le 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, en passant par la fourchette et le changement pour 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 nouveau languette. La vue côte à côte fonctionne incroyablement bien pour tester vos paramètres de réactivité puisque vous pouvez ajuster la taille du volet visualisable.

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 portfolio fonctionnel pour le code frontal où vous pouvez suivre d'autres auteurs, créer vos propres projets partagés publiquement pour les modifier et même apprendre à faire des choses amusantes à travers des défis.

Vous pouvez enregistrer en tant que GitHub Gist, exportation dans un fichier zip, et même incorporez le stylo dans un article comme celui-ci:

See the Pen
Prédiction de l'impact des ventes des revues en ligne par Douglas Karr ( @ douglaskarr )
sur 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 lorsqu'ils commencent à atteindre 5 000 à 10 000 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 Douglas Karr sur Codepen

La version payante, CodePen Pro, offre un une multitude 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 du code simple comme moi, CodePen est un outil inestimable.