Home-theater-designers
Se lancer dans le développement Web JavaScript peut être un processus frustrant, mais il existe des outils qui le rendent plus facile.
CodePen.io est un environnement de codage intégré au navigateur conçu à la fois pour apprendre à coder et pour prototyper rapidement des idées avec un minimum de tracas.
Dans cet article, nous examinons certaines fonctionnalités du site et comment elles peuvent vous aider à devenir un meilleur programmeur.
Qu'est-ce que CodePen ?
CodePen fournit quelque chose appelé un stylo , qui comprend trois fenêtres différentes pour HTML, CSS et JavaScript, ainsi qu'un volet de prévisualisation qui se met à jour en temps réel au fur et à mesure que vous tapez.
Bien qu'il soit fréquemment utilisé par les développeurs Web pour présenter des idées de sites Web, c'est également un endroit idéal pour apprendre les bases du développement Web frontal. Voici les fonctionnalités les plus notables que vous devez connaître lorsque vous utilisez CodePen.
1. Préprocesseurs
Les préprocesseurs sont des langages interprétés ou compilés conçus pour simplifier le codage. Ils peuvent ajouter des fonctionnalités à un langage pour plus de commodité et rendre le code plus facile à lire. Dans le développement Web, une combinaison de préprocesseurs pour HTML, CSS et JavaScript est utilisée pour créer rapidement un 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 en haut à droite. Sélectionner Afficher le HTML/CSS/JS compilé pour voir comment le code sera interprété.
Dans ce stylo, nous avons créé un site simple en utilisant Haml et Toupet pour styliser du texte d'en-tête. Sélection Voir compilé montre le HTML et le CSS standard. Dans cet exemple, la différence est minime. Cependant, lors de l'apprentissage d'un nouveau langage, il peut être utile de voir à quoi ressemble le code prétraité une fois compilé.
2. Ressources externes
Outre la prise en charge native des préprocesseurs, CodePen prend en charge les scripts externes. Cela en fait l'endroit idéal pour acquérir une expérience pratique des bibliothèques pour vos projets personnels, ou pour rafraîchir les bibliothèques d'applications Web populaires telles que React .
Pour ajouter une bibliothèque externe, ouvrez le Paramètres volet de votre stylet et dirigez-vous vers l'onglet JavaScript. Il existe deux façons d'ajouter des ressources, soit en ajoutant l'URL de la ressource manuellement, soit en effectuant une recherche.
Nous avons utilisé cette fonctionnalité dans notre article couvrant animation web avec mo.js , ainsi que le prétraitement Babel.
Voir le stylo Exemple de Mojs MUO par Ian ( @Bardoctorus ) sur CodePen.
Oui, les stylos CodePen peuvent être intégrés ! Allez-y et cliquez sur le volet d'aperçu ci-dessus pour voir les résultats du didacticiel Mo.js !
D'autres stylos peuvent être importés un peu comme des bibliothèques externes. Cela signifie que vous pouvez prendre des éléments de stylos précédemment écrits pour les utiliser comme des modules dans vos nouveaux stylos. Utilisateur de CodePen Adam's Sondage simple le stylo en est un bon exemple.
3. Modèles
Lorsque vous apprenez de nouveaux concepts ou testez de nouvelles idées, vous utilisez fréquemment des composants similaires et rechapez les mêmes étapes pour commencer. CodePen permet la création de modèles de stylos qui peuvent supprimer la répétition et vous permettre d'aller droit au but.
Pour créer un modèle, ouvrez un nouveau stylo, apportez vos modifications et sélectionnez le Modèle curseur dans le menu des paramètres.
https://vimeo.com/221428690
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 dans leur compte qu'ils le souhaitent. Parfait pour démarrer une nouvelle idée avec le minimum de délai !
4. Collaboration Mode
La capacité de collaborer et d'enseigner avec CodePen peut être son plus grand atout. Il existe déjà une multitude 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 l'ouvrir à la collaboration sous le Change de vue menu. Cela transforme le lien du stylo en une invitation partageable pouvant accueillir un nombre croissant de personnes en fonction de votre plan CodePen Pro.
comment obtenir de nouveaux emojis android
Dans ce cas, j'ai écrit du HTML pendant qu'un ami mettait à jour le CSS en temps réel, avec un curseur étiqueté identifié où ils travaillaient.
Toute personne disposant du lien peut rejoindre et utiliser la fonction de discussion dans le navigateur, qu'il s'agisse d'un utilisateur professionnel ou même d'un compte CodePen. À condition que l'enregistrement automatique soit désactivé, seul le propriétaire du stylo peut enregistrer les modifications, ce qui en fait un moyen sûr d'ouvrir votre code à d'autres sans risque.
La nature ouverte de ce mode est bénéfique pour les débutants car vous pouvez inviter presque n'importe qui dans votre stylo pour vous guider à travers un concept difficile. C'est aussi un mode pratique pour s'y retrouver car il est parfait pour interviewer des employés potentiels, et a déjà été utilisé professionnellement de cette manière !
5. Mode professeur
Le mode Professeur permet à un utilisateur Pro d'héberger une salle dans laquelle lui seul peut modifier le code. Entre 10 et 100 utilisateurs peuvent regarder et discuter en fonction du plan Pro de l'hôte.
Le mode Professeur permet une flexibilité entre l'apprentissage en classe et l'apprentissage à distance, ou une combinaison des deux. L'utilisation du mode Professeur permettra aux personnes du fond de la classe d'avoir la même expérience que celles du premier, et à l'enseignant de montrer des corrections de bugs qui seront mises à jour en temps réel.
6. Mode de présentation
Le mode de présentation est conçu, sans surprise, avec la présentation du code à l'esprit. L'application s'affiche dans une vue simplifiée, conçue pour fonctionner avec des rétroprojecteurs. CodePen a optimisé le mode Présentation pour une utilisation sur des connexions Internet à faible vitesse et un matériel plus faible.
Les lecteurs astucieux ont peut-être déjà réalisé que la version gratuite de CodePen fournirait précisément cette fonction, bien que le mode Pro ait quelques fonctionnalités utiles. La mise en page, la taille de la police et les thèmes peuvent être rapidement modifiés à la volée pour s'adapter à presque tous les paramètres, et l'affichage du lien vers le stylo fait apparaître une URL raccourcie de taille jumbo facilitant le partage du projet.
Ces petits changements, ainsi que la possibilité de redimensionner la fenêtre d'aperçu pour l'adapter à tout ce que vous montrez, rendent le mode de présentation parfait pour les enseignants et les développeurs présentant des idées à des collègues. Le mode Présentation est également un moyen simple et épuré de présenter le code si vous vous trouvez en train de passer un entretien pour un poste de programmation .
7. Motifs
La recherche d'inspiration est beaucoup plus facile avec les collections de CodePen de Modèles de conception .
Chaque catégorie est une collection d'exemples de code fournis par les utilisateurs de CodePen pour des tâches spécifiques. Vous cherchez un moyen de créer des boutons dynamiques pour votre site ? Menus accordéon ? Il existe une multitude de catégories pour s'adapter à presque tous les exemples.
Ces modèles sont également un excellent moyen d'apprendre comment fonctionnent les boutons interactifs et les différentes manières dont les interfaces utilisateur dynamiques peuvent fonctionner.
8. Emmet
Emmet , anciennement connu sous le nom de codage Zen, est largement considéré comme le plus grand gain de temps pour le développement HTML et CSS. Le plugin prend une partie du code que vous écrivez beaucoup et les convertit en de simples raccourcis.
Le voir en action est mieux que l'expliquer, alors prenez la configuration habituelle pour un document HTML :
L'ajout de ceci à chaque document HTML a été réduit à deux actions. En utilisant Emmet, tapez ! et frapper le Languette clé. La magie!
Emmet est actif en standard sur CodePen et est particulièrement utile si vous essayez d'apprendre un nouveau concept en JavaScript et devez créer rapidement le HTML et le CSS de support.
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 un avenir dans le développement Web.
faire ressembler Windows 7 à XP
Il existe d'excellents didacticiels et cours disponibles pour les personnes souhaitant démarrer avec JavaScript, et CodePen est un environnement idéal pour tester vos nouvelles compétences.
Partager Partager Tweeter E-mail Les 8 meilleurs sites Web pour télécharger des livres audio gratuitementLes livres audio sont une excellente source de divertissement et beaucoup plus faciles à digérer. Voici les huit meilleurs sites Web où vous pouvez les télécharger gratuitement.
Lire la suite Rubriques connexes- La programmation
- HTML
- Développement web
- JavaScript
- CSS
Ian Buckley est un journaliste indépendant, musicien, interprète et producteur vidéo vivant à Berlin, en Allemagne. Quand il n'écrit pas ou sur scène, il bricole de l'électronique ou du code DIY dans l'espoir de devenir un savant fou.
Plus de Ian BuckleyAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner