Chez Codepen.io, ils se décrivent comme un «terrain de jeu pour le côté frontal du Web». Codepen est idéal pour tester les bogues, la collaboration et la recherche d'une nouvelle inspiration. Il fonctionne en vous permettant de créer des «stylos», qui sont des ensembles de HTML, CSS et JavaScript. Vous pouvez ensuite afficher ces stylos sur votre profil, prendre des commentaires et continuer à modifier ces stylos à tout moment.
Comme de nombreux terrains de jeux de code en direct, Codepen vous permet d'apprendre dans un environnement open-source, affichant un aperçu en direct des modifications de code, et même vous permettant d'intégrer vos démos de codepen sur n'importe quelle page Web, comme celle ci-dessous.
Voir le stylo complet CSS par une div (@onediv) sur Codepen.
Dans cet article, j'irai au-delà de ces fonctionnalités qui viennent d'expliquer certaines des choses qui, je pense, mettent le codepen au-dessus de ses concurrents, et pourquoi vous devriez le vérifier si vous ne l'avez pas déjà fait.
En expliquant ces fonctionnalités, je vais également intégrer des stylos aléatoires mais cool dans chaque section pour que vous puissiez vérifier.
Codepen comprend des fonctionnalités impressionnantes pour écrire CSS plus rapidement. Vous pouvez sélectionner pour inclure Normalize.css ou reset.css dans votre CSS en cliquant simplement sur un bouton radio. Vous pouvez également choisir d'utiliser également-préfix ou autopréfixer. De cette façon, il n'est pas nécessaire de prendre le temps de créer un lien vers un fichier externe (ce qui est également possible, si vous le vouliez).
Et si vous n'êtes pas sûr de certaines de vos techniques CSS utilisées? Ne t'inquiète pas; Codepen a l'intégration CSSLINT pour rechercher dans votre code CSS et vous avertira s'il y a des erreurs, des avertissements, une mauvaise prise en charge du navigateur, etc.
Codepen prend en charge tonnes des saveurs de HTML, CSS et JavaScript. Pour HTML, vous pouvez utiliser HAML, Markdown, Slim ou même Jade. Pour CSS, ils prennent en charge SASS et SCSS (à la fois avec une boussole en option ou un module complémentaire Bourbon), ainsi que moins et stylet.
Sous le menu JavaScript, vous pouvez sélectionner CoffeeScript ou Livescript. Il y a aussi un menu déroulant où vous pouvez avoir la dernière version de choses comme jQuery et Angularjs.
Codepen est une question de développement plus rapide et plus fluide. C’est pourquoi ils utilisent des boîtes à outils telles que Emmet pour aider à faire avancer les projets. L'éditeur de codepen vous permet d'utiliser des liaisons de clés VIM qui sont des raccourcis clavier de ligne de commande. Ces deux outils ensemble peuvent aider à créer un flux de travail plus rapide.
Pour en savoir plus sur Emmet, vous pouvez consulter l'article Faster Workflow: Mastering Emmet.
Vous pouvez ajouter des balises à vos stylos, qui deviennent ensuite consultables. La recherche de balises telles que «chargeur» et «formulaire» fait apparaître des tonnes d'inspiration utile.
Si vous le souhaitez, vous pouvez même créer des collections de stylos relatifs à un certain sujet. Chris Coyier, l'un des co-fondateurs de Codepen, a créé des collections telles que le «dessin de chemin» et les «modèles de répétition».
Codepen a un total de 8 vues différentes pour les stylos. Chaque vue a ses propres avantages.
Affichage de l'éditeur - Il s'agit de la vue par défaut pour l'édition de stylos. Vous pouvez ajuster la taille de l'aperçu du code et sélectionner les langues à afficher.
Détails Vue - Cette vue vous permet de voir les balises, les coeurs, les commentaires, les stylos fourchus du stylo, etc. Il contient la plupart des fonctionnalités sociales pour Codepen.
Vue pleine page - C'est assez explicite. Il rend votre stylo plein écran dans un iframe, ne laissant qu'un pied de page de codepen.
Debug View - Debug View est une vue complète, bien qu'avec des fonctionnalités supplémentaires. Il supprime le pied de page IFRAME et Codepen pour un accès à la console JavaScript plus facile. C'est idéal pour tester le code avec lequel vous pensez que Codepen pourrait interférer.
Si vous êtes un utilisateur Codepen Pro, vous avez accès à plus de vues:
Mode de présentation - Ce mode est fait spécialement pour les projecteurs aériens. Il supprime l'en-tête pour vous donner plus d'espace et vous permet de modifier rapidement la taille de la police et les couleurs de l'éditeur de code. Vous pouvez également modifier la taille de l'aperçu sans changer de code.
View en direct - Avec Codepen Live View, vous avez un écran complet de votre stylo. Au fur et à mesure que vous modifiez ce stylo, il mettra automatiquement à jour au fur et à mesure que vous tapez. Ceci est souvent utilisé lors des tests sur plusieurs appareils.
Mode Professeur - Ce mode permet aux gens de vous regarder en temps réel. Il y a aussi une fenêtre de chat où le professeur et les étudiants peuvent discuter.
Mode collaborateur - Le mode collaboration permet à plus d'un programmeur de rédiger un stylo en même temps. Il y a aussi une fenêtre de chat, comme en mode professeur.
Le blogging est une nouvelle fonctionnalité sur Codepen, vous permettant d'écrire facilement sur le code comme sur un blog ordinaire.
Vous pouvez écrire avec Markdown et utiliser un outil d'incorporation spécial pour intégrer votre stylo lorsque vous en avez besoin. Vous pouvez ajouter CSS personnalisé à vos messages, et il y a un aperçu super simple pour tester votre message.
C'est ce qui met Codepen avant la compétition par un long coup. La communauté est une grande partie de Codepen depuis le début. Grâce aux commentaires et au partage, les gens peuvent donner et recevoir des critiques constructives, et apprendre ensemble. Des groupes tels que 4AE9B8 et Bullgit ont commencé à partir de conversations via Codepen. Les fondateurs ont parlé de ce qu'ils pensent de la communauté Codepen sur le podcast Codepen.
Les stylos impressionnants sont toujours affichés sur la page d'accueil, ainsi que de grands articles et collections. Les stylos se présentent à la fois comme inspiration et une façon amusante d'apprendre. La recherche de stylos impressionnants peut aider à améliorer votre propre travail et à améliorer vos connaissances sur le HTML, le CSS et le JavaScript.
Voici quelques démos exceptionnelles à consulter:
En fin de compte, l'utilisation de codepen peut vous aider à apprendre plus rapidement et à faire partie d'une grande communauté. Les articles sur SitePoint utilisent souvent du codepen pour intégrer du code pour les tutoriels. Et si vous êtes intéressé par de plus grandes fonctionnalités de Codepen, consultez-les:
Codepen est un environnement de développement social qui offre une gamme de fonctionnalités qui en font un choix préféré pour les développeurs. Il fournit une vue en direct des modifications de code, ce qui signifie que les développeurs peuvent voir les modifications qu'ils apportent en temps réel. Cette fonctionnalité accélère considérablement le processus de développement. Codepen prend également en charge les pré-processeurs comme SCSS, moins et stylet, qui peuvent aider les développeurs à écrire du code plus efficace. Il propose également un mode de collaboration, qui permet à plusieurs développeurs de travailler simultanément sur le même projet. Cette fonctionnalité est particulièrement utile pour les projets d'équipe et la programmation des paires.
Codepen est un excellent outil pour tester et déboguer le code. Il fournit un environnement isolé où vous pouvez écrire, tester et déboguer votre code sans affecter votre projet principal. Vous pouvez facilement partager vos «stylos» avec les autres, ce qui en fait un excellent outil pour obtenir des commentaires et aider à déboguer. Codepen prend également en charge Console.log, qui peut être très utile pour déboguer JavaScript.
Absolument! Codepen est un excellent outil pour l'enseignement et l'apprentissage du codage. Les enseignants peuvent créer des «stylos» pour démontrer les concepts de codage, et les élèves peuvent déborder ces «stylos» pour expérimenter et apprendre. Codepen a également un «mode professeur» qui permet aux enseignants de fournir des démonstrations de codage en direct.
Codepen prend en charge la conception réactive en permettant aux développeurs de visualiser et de tester leurs conceptions dans Différentes tailles d'appareils directement dans l'éditeur. Cette fonction facilite la création de conceptions qui fonctionnent bien sur toutes les tailles de périphériques.
Codepen est principalement un outil en ligne, mais il offre des fonctionnalités hors ligne. Vous pouvez utiliser Codepen hors ligne pour travailler sur vos «stylos», mais vous devrez vous rendre en ligne pour enregistrer vos modifications.
Partager votre travail sur Codepen est facile. Vous pouvez partager l’URL de votre «stylo», ou vous pouvez intégrer votre «stylo» sur un autre site Web. Codepen propose également un «mode de présentation» qui est parfait pour les démonstrations ou les présentations en direct.
La communauté de codepen est un lieu dynamique et favorable pour les développeurs. Vous pouvez partager votre travail, obtenir des commentaires, apprendre des autres et même collaborer sur des projets. La communauté est un endroit idéal pour apprendre et grandir en tant que développeur.
Oui, vous pouvez utiliser Codepen pour des projets commerciaux. Cependant, il est important de noter que tous les «stylos» que vous créez sur Codepen sont publics par défaut, vous devez donc faire attention de ne pas inclure d'informations sensibles ou propriétaires dans vos «stylos».
Codepen prend en charge une variété de pré-processeurs CSS et JavaScript, y compris SCSS, moins, stylet, Babel et dactylographié. Cela signifie que vous pouvez écrire votre code dans un langage pré-processeur et Codepen le compilera à CSS ou JavaScript pour vous.
Bien que CodePen soit un excellent outil , il existe plusieurs alternatives que vous pourriez considérer. Il s'agit notamment de JSfiddle, de Plunker et de Glitch. Chacun de ces outils a ses propres forces et faiblesses, donc le meilleur choix dépend de vos besoins et préférences spécifiques.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment définir la couleur de la police en HTML
pycharm ouvre une nouvelle méthode de fichier
Le rôle de la fonction de validation
Qu'est-ce que la topologie de réseau en étoile ?
Quels sont les serveurs exemptés d'enregistrement ?
La différence entre la grande fonction et la fonction maximale
Que sont les moteurs MySQL ?
Comment résoudre le problème car il ne peut pas démarrer
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
