Et s'il existait une plateforme sur laquelle vous pouviez modifier du code, tester une bibliothèque, un framework ou un composant, et regarder les changements se produire sous vos yeux ? Et si vous pouviez partager vos expériences avec d'autres développeurs ou les copier pour améliorer vos compétences en matière de codage, déboguer rapidement votre travail et trouver l'inspiration ?
J'ai essayé un outil qui facilite grandement la vie des développeurs de logiciels : Code Pen, autoproclamé comme « un environnement de développement social pour les concepteurs et les développeurs frontaux ».
Cet article expliquera ce qu'est CodePen, ce que vous pouvez en faire, comment et pourquoi un outil très utile pour accélérer le développement de votre front-end.
CodePen est une plateforme de développement où tout le monde peut modifier les langages frontaux tels que HTML, CSS et JavaScript depuis son navigateur sans télécharger de logiciel.
Le meilleur, c'est que les résultats peuvent être consultés en temps réel, ce qui permet un débogage plus rapide. Les développeurs et les concepteurs peuvent également créer et partager des extraits de code (appelés stylos) avec le reste du monde.
Grâce à la formidable communauté créée par CodePen, il existe des milliers d'utilisateurs créent et partagent leurs idées sur composants frontaux, des animations et même mises en page de pages Web presque terminées. Si vous avez des idées qui pourraient être utiles à d'autres professionnels du front-end, c'est l'endroit idéal pour les partager. Tout ce dont vous avez besoin est de vous assurer que votre code est libre de droits d'auteur.
Si vous n'êtes pas intéressé par l'utilisation du code d'autres personnes, vous pouvez toujours utiliser l'éditeur de code en ligne de CodePen pour créez le style des composants de votre projet. De cette façon, vous pouvez vous assurer que les vôtres ne sont pas influencés par du code destiné à styliser d'autres composants. Vous pouvez le considérer comme un toile vierge.
Je recommande de créer un stylo pour chaque composant, car vous travaillerez avec moins de code à chaque fois. De cette façon, vous évitez les erreurs (comme la modification du code d'un composant qui en détruit un autre) et vous ne vous en rendez compte qu'à la fin.
L'éditeur basé sur un navigateur de CodePen est un excellent outil pour tester et exécuter un nouveau framework ou une nouvelle bibliothèque. Vous n'avez pas besoin de configurer un nouvel environnement à chaque fois que vous voulez vérifier si vos modifications fonctionnent. La vue de l'éditeur affiche simultanément trois zones d'édition et l'aperçu, en mettant à jour les résultats finaux chaque fois que quelque chose change.
Maintenant que vous savez à quoi sert CodePen, voyons comment il fonctionne. La plateforme est très convivial et contient de nombreuses fonctionnalités. Certains peuvent même passer inaperçus, même si vous l'avez déjà utilisé plusieurs fois.
Sur la page principale, vous avez un aperçu de ce que vous pouvez rechercher : stylos spécifiques, personnes, projets ou collections. Vous pouvez également consulter les suggestions de CodePen (c'est une excellente option pour voir le code d'autres personnes et apprendre quelques astuces), ou vous pouvez cliquer sur la barre de recherche pour rechercher quelque chose de plus spécifique. Si vous écrivez rapidement et que vous appuyez sur Entrée, vous ne le remarquerez probablement pas vous pouvez explorer des sujets! Ils sont organisés en trois catégories différentes :
Chaque sujet comporte une page sur laquelle vous pouvez explorer des stylos, des modèles et des ressources. La liste des sujets est close, mais vous pouvez remplir un formulaire et en demander un en particulier.
Si vous regardez les exemples, vous verrez une capture d'écran du stylet très rapidement prévisualisez le résultat final et demandez-vous si cela vaut la peine de vous intéresser.
Ensuite, vous pouvez soit cliquer directement sur le stylo et ouvrir le Vue de l'éditeur (où vous pouvez jouer avec le code) ou cliquez sur les flèches d'extension dans le coin supérieur droit pour ouvrir le Afficher les détails. Cette vue vous permettra de commenter le stylo, d'aimer et de suivre l'auteur, de voir et interagissez avec elle, comme ce stylo où tu peux jouer du xylophone.
Vous pouvez également l'épingler pour le voir ou l'utiliser plus tard. Dans la barre de navigation à l'intérieur du Votre section, ces stylos apparaîtront dans le groupe d'objets épinglés.
Le Editeur de code est ma partie préférée de CodePen. Avec cet outil, vous pouvez voir éditeur HTML, le éditeur CSS, et le éditeur Javascript simultanément avec l'aperçu, qui est automatiquement mis à jour lorsque vous modifiez le code.
Il n'est pas nécessaire de passer d'un onglet de fichier à un onglet de navigateur, ce qui accélère le processus de codage. De plus, si vous n'avez pas besoin de l'une de ces sections, vous pouvez la masquer en ajustant sa taille.
Tu peux toujours personnalisez la mise en page de votre stylo. La vue standard possède trois sections de code en haut et le aperçu en bas. Mais si vous avez besoin de plus de hauteur dans votre aperçu, par exemple pour une version mobile d'une application Web, vous pouvez modifier la mise en page sous Modifier la vue menu et alignez les sections de code verticalement.
Comme je l'ai déjà dit, CodePen vous permet de travailler avec bien plus que du HTML pur, du CSS et du Javascript. Pour inclure tout autre framework, bibliothèque ou préprocesseur, accédez à Paramètres. Vous trouverez un onglet pour chacune des sections de code, avec des options pour changer le préprocesseur et inclure des sources externes, comme des feuilles de style ou des scripts.
Si, par hasard, vous connaissez mieux Haml que le HTML pur, sélectionnez Haml dans le premier menu déroulant. Si vous souhaitez utiliser Bootstrap sur votre stylet, accédez aux feuilles de style externes de la section CSS, tapez « Bootstrap », sélectionnez l'option que vous souhaitez utiliser et incluez autant de sources que nécessaire ! Il est vraiment très simple de configurer un stylo.
Dans les paramètres, vous pouvez également :
En outre, vous avez toujours accès à d'autres fonctionnalités de l'éditeur de code, notamment actifs pour les utilisateurs professionnels, une console de débogage, et le liste complète des options d'exportation de projets.
L'un des boutons les plus intéressants et les plus inaperçus de l'éditeur de code est »clés«. Vous trouverez ici le liste complète des raccourcis disponible sur CodePen, y compris le Complétion automatique fonctionnalité dont vous pensiez probablement, comme moi, qu'elle n'existait pas.
Si vous êtes Code Pen Pro utilisateur, l'ajout d'une image est un processus en trois étapes :
Si, tout comme moi, vous utilisez version gratuite de CodePen, vous devrez héberger votre photo quelque part en ligne pour avoir un lien prêt à être utilisé. Certaines des options disponibles sont les suivantes : Imgur , Img B mais il existe de nombreux autres sites Web qui proposent un hébergement gratuit pour vos photos. Téléchargez l'image que vous souhaitez utiliser et copiez le lien. Vous pouvez maintenant le placer en tant que img src, image d'arrière-plan, etc.
Le moyen le plus simple de télécharger votre stylo est de copier-coller le code de votre projet. C'est ce que je fais habituellement. Néanmoins, vous pouvez exportation le stylo sous forme de fichier zip ou en tant que L'essentiel de Github.
« Exporter » est le deuxième bouton en partant de la droite en bas de page (si vous ne le voyez pas, enregistrez d'abord votre stylet). Cliquez dessus et sélectionnez votre option préférée.
Si vous demandez « Puis-je utiliser React sur CodePen ? », la réponse est « Oui ! ». Si vous utilisez une autre bibliothèque JavaScript, la réponse sera également oui dans presque 100 % des cas.
Pour utiliser React sur CodePen, vous devez accéder au paramètres de votre stylet et sélectionnez l'onglet JS. Si vous l'ouvrez et que vous regardez les options du premier menu déroulant, vous ne verrez pas React, mais uniquement les préprocesseurs facilement disponibles.
Pour ajouter React à Codepen vous devez sélectionner la zone de liste déroulante sur « Ajouter des scripts/stylos externes » et écrivez « React » pour afficher toutes les options disponibles. Choisissez ceux dont vous avez besoin et vous êtes prêt à coder !
Sur CodePen, c'est également possible pour utiliser Flutter et Vue, mais vous ne pourrez pas les sélectionner comme vous l'avez fait avec React. Souvenez-vous du sujets quand j'ai expliqué comment effectuer une recherche sur CodePen? Ce n'est qu'à travers eux que vous pouvez accéder Éditeurs personnalisés Vue et Flutter.
Accédez à la page « Explorer les sujets », sélectionnez celui que vous souhaitez et, dans le coin supérieur droit, vous trouverez le « Ouvrir l'éditeur » bouton. Vous n'aurez que deux sections sur ces éditeurs : l'une pour le code et l'autre pour la prévisualisation.
Ne vous inquiétez pas si vous utilisez SCSS au lieu de CSS, mais votre projet ne prend en charge que le CSS normal. Vous avez la possibilité de le transformer en un seul clic.
Sur la flèche située dans le coin supérieur droit de la section de code que vous avez sélectionnée, vous avez la possibilité de « Afficher la compilation... ». Il ne vous reste plus qu'à cliquer dessus, et c'est fait.
N'ayez pas peur de le faire ; vous pouvez le modifier. Lorsque vous téléchargez le code, vous verrez également un dossier contenant la version compilée.
CodePen est idéal pour modifier du code et voir les résultats en temps réel, tout en vous permettant d'apprendre le code efficacement. Si vous lancez un nouveau projet de développement frontal, voici les principales raisons pour lesquelles vous devriez utiliser CodePen.
Qu'est-ce que j'ai besoin de dire d'autre ? Vous pouvez faire tout ce que j'ai mentionné plus haut sans avoir à payer quoi que ce soit. Si tu veux, tu peux Passez à la version Pro et payez un abonnement mensuel pour accéder à des fonctionnalités supplémentaires telles que des stylos privés, des captures d'écran personnalisées, des ressources et d'autres mises en page d'affichage.
J'ai un compte gratuit et je n'avais pas besoin de ces fonctionnalités supplémentaires jusqu'à présent.
Si vous ne souhaitez pas créer de compte, ce n'est pas obligatoire. Vous pouvez toujours effectuer des recherches et utiliser l'éditeur de code. Toutefois, vous ne pourrez pas économiser vos stylos pour les revoir plus tard. Donc, si vous ne voulez tester que quelques éléments, vous pouvez le faire sans compte.
L'un des principaux avantages de CodePen est la possibilité de tout voir sur un seul écran. Le fait de ne pas avoir à parcourir les onglets du navigateur ou les onglets de fichiers rend mon codage plus rapide et plus facile. De plus, il donne une aperçu en temps réel, ce qui réduit le temps de rechargement des pages chaque fois que nous avons besoin de voir le résultat des modifications de code.
CodePen est un outil d'édition de code dans lequel nous pouvons utiliser des préprocesseurs, des bibliothèques et des frameworks prédéfinis, ce qui nous facilite la vie. Nous pouvons le faire en quelques clics et installer un stylo dans la langue que nous voulons utiliser. N'est-ce pas génial ?
Si vous avez besoin de trouver des exemples de choses déjà faites, vous les trouverez probablement ! Des animations, des éléments, des pages complètes, tout ce que vous voulez. CodePen l'a !
CodePen m'a été d'une aide précieuse pour mon projet de thèse, dans le cadre duquel j'ai dû créer une toute nouvelle interface pour un projet existant. Je l'utilise chaque fois que je veux apprendre quelque chose de nouveau, comme React et Animations ou tester une bibliothèque/un framework/un composant de manière isolée.
Lorsque j'utilise CodePen, je ne m'inquiète pas du code existant. Cela me donne la liberté de créer Composants de l'interface utilisateur à l'aise et appliquez-les au code du projet, sans risque.
En tant que développeur de logiciels à Imaginary Cloud, je pense que c'est l'un de ces outils qui peuvent réellement accélérer votre développement en tant que codeur. Essayez-le !
Développeur web avec un amour particulier pour le front-end. Mère de chats. J'essaie de contribuer à sauver la planète pendant mon temps libre en partageant des alternatives écologiques.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
