Se lancer dans le développement Web JavaScript peut être un processus frustrant, mais il existe des outils qui facilitent la tâche.
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 des fonctionnalités du site et comment elles peuvent vous aider à devenir un meilleur programmeur.
CodePen fournit quelque chose appelé 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 excellent endroit pour apprendre les bases du développement Web frontal. Voici les fonctionnalités les plus remarquables que vous devez connaître lorsque vous utilisez CodePen.
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 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 en haut à droite. Sélectionnez Afficher 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 Sass pour styliser du texte d'en-tête. Sélection de Voir compilé montre le standard HTML et CSS. 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é.
Parallèlement à 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 vous familiariser avec les bibliothèques d'applications Web populaires telles que React.
Pour ajouter une bibliothèque externe, ouvrez les Paramètres volet sur votre stylet, et dirigez-vous vers l'onglet JavaScript. Il existe deux façons d'ajouter des ressources, soit en ajoutant manuellement l'URL de la ressource, soit en effectuant une recherche.
Nous avons utilisé cette fonctionnalité dans notre article traitant de l'animation Web avec mo.js, ainsi que du prétraitement Babel.
Voir l'exemple Pen Mojs MUO par 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 tutoriel 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 les utiliser comme des modules dans vos nouveaux stylos. Le stylo Simple Poll d'Adam, utilisateur de CodePen, en est un bon exemple.
Lorsque vous apprenez de nouveaux concepts ou testez de nouvelles idées, vous utilisez fréquemment des composants similaires et reprenez les mêmes étapes pour commencer. CodePen permet la création de stylos modèles qui peuvent supprimer la répétition et vous permettre d'aller droit au but.
Pour créer un modèle, ouvrez un nouveau stylet, 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 qu'ils le souhaitent dans leur compte. Parfait pour se lancer dans une nouvelle idée en un minimum de temps !
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 Pro de CodePen peuvent créer un nouveau stylet et l'ouvrir à la collaboration sous Modifier l'affichage menu. Cela transforme le lien du stylet en une invitation partageable pouvant accueillir un nombre évolutif de personnes en fonction de votre plan CodePen Pro.
Dans ce cas, j'ai écrit 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 chat dans le navigateur, qu'elle soit un utilisateur professionnel ou même qu'elle ait un compte CodePen. À condition que l'enregistrement automatique soit désactivé, seul le propriétaire du stylet 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 collaborateurs potentiels, et a déjà été utilisé professionnellement de cette façon !
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 à l'arrière de la classe d'avoir la même expérience que celles à l'avant, et à l'enseignant de montrer les corrections de bogues qui seront mises à jour en temps réel.
Le mode de présentation est conçu, sans surprise, avec le code de présentation à 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 avisés 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 stylet fait apparaître une URL raccourcie de taille géante 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 du code si vous vous retrouvez à passer un entretien pour un poste de programmeur.
La recherche d'inspiration est beaucoup plus facile avec les collections de Design Patterns de CodePen.
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 ? Des menus en 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 le fonctionnement des boutons interactifs et les différentes manières dont les interfaces utilisateur dynamiques peuvent fonctionner.
Emmet, anciennement connu sous le nom de Zen Coding, 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 le convertit en raccourcis simples.
Le voir en action vaut mieux que de 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 cliquez sur Tab clé. Magique !
Emmet est actif en standard sur CodePen et est particulièrement utile si vous essayez d'apprendre un nouveau concept en JavaScript et avez besoin de créer rapidement le support HTML et CSS.
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.
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.
