Si vous êtes développeur web ou de programmes, vous connaissez sûrement les services de CodePen. C'est pourquoi, depuis Neoteo, nous allons vous présenter les meilleurs conseils pour tirer le meilleur parti de cette plateforme, afin que vous puissiez éditer et créer des projets en HTML, CSS et JavaScript en temps réel.
Mais pour ceux qui ne connaissent pas les fonctionnalités de CodePen, nous allons faire une brève présentation pour que vous puissiez l'intégrer à vos outils de développement. CodePen est une plateforme pour tester, éditer, pratiquer et partager de petits projets web ou frontend (des pens) de programmes en HTML, CSS et JavaScript (elle prend en charge les métalangages) ; ainsi, vous et la communauté pourrez apporter des améliorations en temps réel.
Bouton Run
Si vous faites partie de ces utilisateurs qui ne sont pas satisfaits de la sortie du code pendant le développement, vous pouvez désactiver l'option Auto Update Preview et obtenir à la place un bouton Exécuter (Run). Ainsi, chaque fois que vous mettez à jour la conception, vous pouvez cliquer sur le bouton pour rafraîchir le rendu.
Settings – Behavior – (Désactiver) AUTO UPDATE PREVIEW
Nous recommandons cela pour les développements lourds, avec une grande quantité de code et un mélange de langages.
Exporter
Une fois le Pen enregistré, vous pourrez l'exporter en fichier ZIP, avec tous les langages (HTML, CSS et JS). Mais il existe aussi une option pour l'enregistrer comme un gist GitHub.
Export - Save as GitHub Gist
Vous aurez ainsi votre travail comme un dépôt GitHub.
Rechercher et remplacer
Rechercher et remplacer est l'une des actions les plus importantes de la plateforme, car les développeurs changent très souvent de noms, de variables et d'autres éléments.
Ctrl + Shift + F (vous activez les recherches) – Vous écrivez le mot à remplacer dans Replace – Entrée – Vous écrivez ce que vous voulez insérer dans With – Entrée – Puis vous cliquez sur Yes et All.
Obtenir les fichiers de code individuels
Si vous exportez un Pen de manière classique, vous obtenez les trois fichiers (HTML, CSS et JS), mais si vous n'en avez besoin que d'un seul, vous devrez utiliser cette action.
Change View – Direct Code Links : ici vous choisissez le langage souhaité – Et vous pourrez l'enregistrer dans un onglet du navigateur.
Pen comme modèle
Si vous utilisez presque tous vos Pen avec le même modèle, vous pourrez activer chaque Pen que vous créez avec le modèle habituel. Mais vous devrez d'abord l'enregistrer en tant que template.
Settings – Insérer un titre au Pen – Sélectionner l'option Template
Nous espérons que les conseils que nous vous avons donnés pour optimiser votre travail sur CodePen vous permettront de tirer le meilleur parti de la plateforme et d'améliorer vos développements.
Si vous souhaitez que nous rédigions une deuxième partie de l'article, nous attendons vos commentaires.
