8 fonctionnalités CodePen impressionnantes pour la programmation et le développement Web
Se lancer dans le développement Web JavaScript peut être un processus frustrant, mais il existe des outils qui le facilitent.
CodePen.io est un environnement de codage intégré au navigateur conçu pour apprendre à coder et à prototyper rapidement des idées avec un minimum de tracas.
Dans cet article, nous examinerons certaines des fonctionnalités du site et comment elles peuvent vous aider à devenir un meilleur programmeur.
Qu’est-ce que CodePen ?
CodePen fournit un Plumequi contient trois fenêtres HTML, CSS et JavaScript différentes, ainsi qu’un volet d’aperçu qui se met à jour en temps réel au fur et à mesure que vous tapez.
Bien que les développeurs Web l’utilisent souvent pour présenter des idées de sites Web, c’est également un excellent endroit pour apprendre les bases du développement Web frontal. Voici les fonctionnalités les plus remarquables que vous devez connaître pour utiliser CodePen.
1. Préprocesseur
Les préprocesseurs sont des langages interprétés ou compilés conçus pour simplifier le codage. Pour plus de commodité, ils peuvent ajouter des fonctionnalités au langage et rendre le code plus facile à lire. Dans le développement Web, une combinaison de préprocesseurs HTML, CSS et JavaScript est utilisée pour créer rapidement du code propre.
Si vous apprenez le développement Web et que vous souhaitez essayer différents préprocesseurs, CodePen vous permet de changer de préprocesseur à la volée et de voir le code qu’il compile en temps réel. Chacun des trois volets de l’application CodePen comporte un menu déroulant dans le coin supérieur droit.choisir Voir HTML/CSS/JS compilé Voyez comment le code sera interprété.
Faire une vidéo du jour
Dans ce stylo, nous utilisons Ham et toupet Stylisez du texte d’en-tête.choisir Voir compilé Affiche HTML et CSS standard. Dans cet exemple, la différence est faible. Cependant, lors de l’apprentissage d’un nouveau langage, il peut être utile de voir à quoi ressemble le code prétraité après compilation.
2. Ressources externes
En plus de la prise en charge native des préprocesseurs, CodePen prend également en charge les scripts externes. Cela en fait l’endroit idéal pour acquérir une expérience pratique avec une bibliothèque de projets personnels ou se familiariser avec les bibliothèques d’applications Web populaires comme React.
Pour ajouter des bibliothèques externes, ouvrez d’installation volet, puis accédez à l’onglet JavaScript. Il existe deux façons d’ajouter des ressources, d’ajouter manuellement l’URL de la ressource ou de rechercher.
Nous avons utilisé cette fonctionnalité dans notre article traitant des animations Web avec mo.js et du prétraitement avec Babel.
Voir l’exemple Pen Mojs MUO de Ian (@Bardoctorus) sur CodePen.
Oui, les stylets CodePen peuvent être intégrés ! Allez-y et cliquez sur le volet de prévisualisation ci-dessus pour voir les résultats du didacticiel Mo.js !
D’autres plumes peuvent être importées comme des bibliothèques externes. Cela signifie que vous pouvez prendre des éléments de stylos précédemment écrits pour utiliser des modules similaires dans de nouveaux stylos. Le stylo Simple Poll d’Adam, utilisateur de CodePen, en est un bon exemple.
3. Modèle
Lorsque vous apprenez de nouveaux concepts ou testez de nouvelles idées, vous utilisez souvent des composants similaires et relisez les mêmes étapes de démarrage. CodePen permet la création de stylos stencil qui éliminent la duplication, vous permettant d’aller droit au but.
Pour créer un modèle, ouvrez un nouveau stylet, apportez des modifications et sélectionnez modèle Curseur dans le menu des paramètres.
Jusqu’à récemment, les utilisateurs gratuits ne pouvaient créer que trois modèles, mais désormais, tous les utilisateurs peuvent avoir autant de modèles qu’ils le souhaitent dans leur compte. Idéal pour lancer de nouvelles idées en un minimum de temps !
4. Mode collaboratif
La capacité de collaborer et d’enseigner avec CodePen est probablement son plus grand atout. Il existe des tonnes d’excellents outils de collaboration pour les programmeurs, mais l’approche de CodePen est simple et intuitive.
Les utilisateurs professionnels de CodePen peuvent créer un nouveau stylet et change de vue menu. Cela changera le lien du stylet en une invitation partageable pour accueillir un nombre extensible de personnes en fonction de votre plan CodePen Pro.
Dans cet exemple, j’ai écrit le HTML, et un ami a mis à jour le CSS en temps réel, avec un curseur marqué indiquant où ils travaillaient.
Toute personne disposant du lien peut rejoindre et utiliser le chat dans le navigateur, qu’il s’agisse d’un utilisateur professionnel ou d’un compte CodePen. Si la sauvegarde automatique est désactivée, seul le propriétaire du stylo peut enregistrer les modifications, ce qui permet d’ouvrir le code en toute sécurité à d’autres sans risque.
L’ouverture de ce mode est bonne pour les débutants, car vous pouvez inviter presque n’importe qui dans votre stylo pour vous guider à travers un concept difficile. C’est également un moyen pratique d’apprendre à connaître votre chemin, car il est idéal pour interviewer des employés potentiels et a été utilisé de manière professionnelle de cette manière !
5. Mode d’enseignement
Le mode professeur permet à un utilisateur Pro d’héberger une salle où lui seul peut modifier le code. Selon le plan Pro de l’hôte, 10 à 100 utilisateurs peuvent regarder et discuter.
Le mode enseignement permet une flexibilité entre l’apprentissage en classe et à distance, ou une combinaison des deux. L’utilisation du mode d’enseignement permet aux personnes de la rangée arrière d’avoir la même expérience que celles de la rangée avant et permet aux enseignants d’afficher les corrections de bogues qui se mettent à jour en temps réel.
6. Mode démo
Sans surprise, le mode démo a été conçu avec le code de démonstration à l’esprit. L’application est affichée dans une vue simplifiée et est conçue pour être utilisée avec des rétroprojecteurs. CodePen a optimisé le mode démo pour une utilisation avec des connexions Internet lentes et un matériel plus faible.
Les lecteurs astucieux savent peut-être que la version gratuite de CodePen fournit exactement cela, bien que le mode Pro ait quelques fonctionnalités utiles. Les mises en page, les tailles de police et les thèmes peuvent être rapidement modifiés pour s’adapter à presque toutes les configurations, et un lien vers le stylet d’affichage affiche une URL raccourcie surdimensionnée, ce qui facilite le partage de projets.
Ces petits changements, ainsi que la possibilité de zoomer la fenêtre d’aperçu pour s’adapter à tout ce que vous montrez, rendent le mode démo parfait pour les enseignants et les développeurs pour présenter des idées à des collègues. Le mode démo est également un moyen simple et simple de démontrer le code si vous vous retrouvez à passer un entretien pour un poste de programmeur.
7. Motifs
La collection de modèles de conception de CodePen facilite la recherche d’inspiration.
Chaque catégorie est une collection d’exemples de code fournis par les utilisateurs de CodePen pour une tâche spécifique. Vous cherchez un moyen de créer des boutons dynamiques pour votre site Web ? Menu accordéon ? Il existe de nombreuses catégories qui correspondent à presque tous les exemples.
Ces modèles sont également un excellent moyen de comprendre le fonctionnement des boutons interactifs et les différentes manières dont une interface utilisateur dynamique peut fonctionner.
8. Emmett
Emmet, anciennement connu sous le nom de Zen Coding, est largement considéré comme la méthode la plus rapide pour le développement HTML et CSS. Le plugin prend une partie du code que vous écrivez et le transforme en raccourcis simples.
Il vaut mieux le voir que l’expliquer, donc faites la configuration habituelle pour le document HTML :
L’ajout de ceci à chaque document HTML a été réduit à deux opérations.En utilisant Emmet, tapez ! et frappe Étiqueter clé. la magie!
Emmet est actif en tant que standard sur CodePen et est particulièrement utile si vous essayez d’apprendre de nouveaux concepts en JavaScript et que vous avez besoin de créer rapidement du HTML et du CSS.
Développez avec CodePen pour une meilleure expérience
CodePen est un excellent outil pour les développeurs Web, et le domaine ne cesse de croître. JavaScript est un excellent langage à apprendre pour le développement Web futur.
Il existe d’excellents didacticiels et cours disponibles pour ceux qui souhaitent démarrer avec JavaScript, et CodePen est un excellent environnement pour tester vos nouvelles compétences.
A propos de l’auteur
