10 astuces Codepen pour les débutants

Codepen est un site très facile et populaire pour stylo bas un combo de code frontal fonctionnant tout de suite. Si vous ne savez pas ce qu'est Codepen ou si vous n'en avez pas entendu parler auparavant, c'est en gros un terrain de jeu en ligne de code source (appelons ça OSCP sonner nerdier) pour les trois mousquetaires du codage frontal; HTML, CSS et JavaScript.

Il existe d'autres OSCP similaires, tels que JSFiddle, JS Bin, CSSDeck et Dabblet. Codepen est certainement l'un des plus connus parmi les développeurs front-end. Sans plus tarder, passons directement à certains conseils de base et utiles pour utiliser Codepen.

1. Bouton d'exécution

Si vous n'êtes pas fan de la façon dont la sortie de votre code dans Codepen continue à rafraîchir tandis que vous tapez, vous pouvez se retirer du “Aperçu de la mise à jour automatique” option, et obtenez un bouton Exécuter à la place. Lorsque vous cliquez dessus, vous pourrez voir et mettre à jour la sortie de votre code quand vous voulez.

C'est également une excellente option si vous travaillez avec un code dont la sortie passe par beaucoup de changements de mise en page, et repeint à chaque fois qu'il est mis à jour, entraînant une lenteur.

2. Incrément / Décrément du nombre

Augmenter ou diminuer les nombres dans votre code dans Codepen sans taper les nouveaux numéros. Tout ce que vous avez à faire est d'utiliser la combinaison de touches Ctrl / Cmd et Flèches haut et bas.

3. Curseurs multiples

Vous pouvez mettre des curseurs à plusieurs points dans le code source, puis tapez ou éditez à tous ces points en même temps. Cela ne fonctionne que si vous entrez les mêmes informations et réduit le besoin de copier-coller. Il suffit de maintenir la touche Ctrl / Cmd enfoncée tout en cliquant sur ces multiples points..

4. Différents messages de console colorés

le Console L'objet JavaScript a un peu plus de méthodes outre bûche() pour vous permettre de imprimer des choses dans la console Web.

Vous pouvez utiliser le Info(), prévenir() et Erreur() méthodes pour information, Attention et Erreur. En règle générale, les consoles Web colorent ces messages en fonction du type ou affichent une icône appropriée à côté d'eux (comme un signe d'avertissement pour le message d'avertissement). pour une reconnaissance plus facile.

Codepen a sa propre console que vous pouvez ouvrir en cliquant sur le bouton Console dans le coin inférieur gauche. Idéal pour une vérification rapide des messages de la console sans avoir à ouvrir la console du navigateur. Cette console distingue les différents types de messages de la console avec différentes couleurs de fond.

5. exportation

Une fois enregistré, un stylo (une seule entité Codepen) peut être exporté sous forme de fichier ZIP avec tous ses codes HTML, CSS et JS dans des fichiers. Il y a aussi une option pour enregistrer le stylo comme un github gist (un référentiel Git). Vous pouvez trouver le bouton Exporter dans le coin inférieur droit de chaque stylo.

6. Trouver et remplacer

Rechercher et remplacer - une opération essentielle pour les gens qui ont tendance à renommer leur nom de variable de temps en temps. Ctrl / Cmd + Maj + F est la combinaison de touches pour ouvrir le “Rechercher et remplacer” dialogue.

7. Emmet Tab Trigger

Connaissez-vous les déclencheurs de tabulation pour le codage Emmet? Emmet est un outil de productivité pour les développeurs front-end qui vous permet de: tapez du code squelette qui est ensuite étendu. Pour ce faire, dans Codepen, tapez simplement l’abréviation appropriée dans l’éditeur, appuyez sur la touche de tabulation et le code complet apparaît immédiatement.. Uniquement disponible pour HTML à Codepen.

8. Obtenir des fichiers de code individuels

Si vous utilisez l'option Exporter comme mentionné précédemment, vous obtiendrez les trois fichiers (HTML, CSS et JS) de votre stylo. Mais si vous êtes intéressé par seulement un ou deux de ces fichiers, et voulez les télécharger individuellement, il y a une option pour cela aussi dans Codepen.

Une fois connecté à Codepen, rendez-vous sur votre stylo et cliquez sur le bouton Changer l'affichage dans le coin supérieur droit. Au bas de la liste déroulante, vous verrez le liens de téléchargement direct pour les fichiers individuels.

9. Inspecter les variables JavaScript

La console JavaScript de Codepen se connectant au code JavaScript enregistré dans votre stylo, vous pouvez également l'utiliser pour tester rapidement votre code JavaScript. Cette fonctionnalité est particulièrement utile dans inspection des variables JS, comme ça vous pas besoin d'insérer une console supplémentaire ou des messages d'alerte dans le code d'origine uniquement à des fins de test.

10. Tournez le stylo sur le modèle

Si vous avez tendance à démarrer la plupart de vos stylos avec le même ensemble de code, vous pouvez utiliser un modèle pour enregistrer les codes répétés. Pour transformer un stylo en modèle, cochez l'option Modèle sous le menu Paramètres. Lorsque vous créez ultérieurement un nouveau stylo, vous pouvez commencez avec votre modèle enregistré en cliquant sur la flèche vers le bas à droite du bouton Nouveau stylo. Il ouvrira une liste déroulante avec tous vos modèles enregistrés à choisir.