7 des meilleurs terrains de jeux à code et alternatives à CodePen

Une variété de terrains de jeux de code frontaux sont apparus au fil des ans. La plupart offrent un moyen rapide et sale d'expérimenter du code côté client (et parfois côté serveur) puis de le partager avec d'autres. Le plus populaire est CodePen, que vous avez probablement vu ou même utilisé. C'est un excellent outil, mais il n'offre pas tout ce dont votre stylo pourrait avoir besoin. Voici notre aperçu de sept des meilleurs, comparant CodePen et un certain nombre d'alternatives à CodePen.

Les terrains de jeux de codage en ligne comprennent généralement :

• éditeurs HTML, CSS et JavaScript à code couleur
• saisie automatique de la commande de code
• une fenêtre de prévisualisation qui (normalement) se recharge en direct sans actualisation manuelle
• Préprocesseurs HTML tels que HAML
• Less, Sass, Stylus et préprocesseurs CSS similaires
• inclusion de bibliothèques JavaScript populaires telles que React, Preact, Angular et Vue.js (certains terrains de jeux plus récents permettent également le développement de code back-end)
• consoles de développement et outils de validation de code
• installations de collaboration de codage
• partage via une URL courte
• intégration de démonstrations dans d'autres pages
• clonage et fork de code
• copie vers des référentiels de code tels que GitHub
• coût nul pour un service de base
• d'autres services premium pour une petite charge mensuelle
• une façon de montrer vos compétences de codage au monde !

Ils vous permettent de tester et de conserver des extraits de code expérimentaux sans avoir à créer des fichiers, à lancer votre éditeur ou à exécuter un serveur local.

Regardons quelques-unes des meilleures options.

CodePen n'était pas le premier, mais c'est l'un des terrains de jeux de code les plus populaires et les plus beaux. Co-fondé par Chris Coyier de CSS-Tricks, le service met en avant les stylos populaires (démonstrations côté client) et les projets (environnements de développement intégrés en ligne que vous pouvez utiliser pour créer des projets Web). Il offre une interface d'édition utilisateur propre et fonctionnelle avec des fonctionnalités avancées telles que le partage, l'intégration, une console d'erreur, des bibliothèques JavaScript externes, des préprocesseurs CSS populaires, etc.

CodePen PRO fournit des stylos privés, l'hébergement d'actifs, un mode de collaboration et des thèmes pour les iframes intégrés à partir de 8 $ par mois.

JSFiddle a été l'un des premiers terrains de jeux du code et a influencé ceux qui ont suivi. Il peut être utilisé pour n'importe quelle combinaison de tests HTML, CSS et JavaScript et offre une gamme de bibliothèques et de frameworks. Exceptionnellement, il peut également simuler des requêtes Ajax asynchrones.

JSFiddle se concentre sur le code, vous ne trouverez donc pas une gamme de fonctionnalités sociales telles que des démonstrations en surbrillance et des installations de partage. L'interface est plus simple que d'autres et, exceptionnellement, vous devez appuyer surCours pour recharger le volet des résultats. Cependant, il se sent toujours vif et sa simplicité peut être préférable à certains.

Corbeille JSa été créé par le gourou JavaScriptRémy Sharp et est toujours géré par lui. Il se concentre sur les bases du codage et les gère bien. Contrairement à certains autres terrains de jeux, vous pouvez modifier l'intégralité d'un fichier HTML, y compris le.

En plus des options, bibliothèques et préprocesseurs habituels, JS Bin a été l'un des premiers à proposer une console de journalisation, essentielle au développement JavaScript. Le compte Pro commercial fournit des fonctionnalités avancées telles que le téléchargement de ressources, des bacs privés, des URL personnalisées et la synchronisation Dropbox. Vous pouvez mêmetélécharger et installer JS Bin localementsi vous êtes préoccupé par la confidentialité ou si vous ne voulez pas que les autres voient l'état de votre code !

Malgré le nom,Plate-forme CSS est un terrain de jeu HTML, CSS et JavaScript à part entière avec des fonctionnalités sociales et de collaboration. Il existe depuis longtemps et a eu une influence majeure sur les autres terrains de jeux. CSS Deck n'a pas autant de fonctionnalités que CodePen, mais il semble un peu plus rapide et dispose d'un écran de mise en page de codage plus configurable. Il existe une communauté active qui soumet régulièrement des exemples de démonstration de code.

La plupart des aires de jeux de code offrent un fichier HTML, un fichier CSS et un fichier JavaScript (bien que plusimportationspeut être possible).CodeSandboxest moins un terrain de jeu qu'un environnement de développement en ligne.

Comme pour les projets Web standard, vous pouvez ajouter n'importe quel nombre de fichiers et les modifier à l'aide d'un environnement de développement intégré multi-onglets de type VS Code (alias IDE). L'inscription à l'aide d'un compte GitHub ou Google est gratuite, mais vous pouvez ensuite collaborer avec d'autres en temps réel, exporter des projets vers un référentiel Git et les déployer sur des hébergeurs de sites statiques tels que Netlify et Vercel.

CodeSandbox pourrait être une option pratique si vous travaillez à distance ou si vous utilisez un appareil de développement non typique tel qu'un Chromebook.

CODE DE JEU est un autre environnement de développement en ligne qui vous permet d'ajouter plusieurs fichiers HTML, CSS, JavaScript et de ressources. L'interface est plus simple que CodeSandbox, mais elle est rapide, a fière allure, est facile à utiliser et est peut-être moins intimidante pour les débutants.

PLAYCODE dispose d'une console de journal et, exceptionnellement, il vous permet de contrôler la taille et la fréquence de mise à jour de la fenêtre de prévisualisation. L'éditeur est gratuit, mais vous devez vous connecter avec Google, Microsoft, GitHub ou un compte de messagerie pour enregistrer des projets.

Plongeur est un autre éditeur basé sur des projets qui vous permet d'ajouter plusieurs fichiers HTML, CSS et JavaScript. Vous pouvez inclure des modèles générés par la communauté pour lancer votre projet. Comme d'autres, Plunker vous permet de créer des démos fonctionnelles, de collaborer avec d'autres développeurs et de partager votre travail. Ce n'est peut-être pas aussi attrayant que certains, mais l'interface utilisateur reste rapide et fonctionnelle.

Il y a une communauté active de contributeurs. La plupart semblent soumettre des démonstrations angulaires, mais il prend également en charge les modèles de démarrage vanilla JS, React et Preact.

Autres options

Il existe, bien sûr, de nombreux autres terrains de jeux de code, y comprisProblème,ESNextBin,JSitorName,Tissage vivant,Dabbletet plus.StackBlitzest un terrain de jeu plus récent qui prend en charge le développement front-end mais vous permet également d'expérimenter le code back-end à l'aide de Node.js, Next.js et GraphQL.

Conseil : pour essayer StackBlitz, saisissez simplement "node.new" (sans les guillemets) dans la barre d'adresse de votre navigateur.

Avons-nous manqué votre favori?Dis nous à propos de cela!

Pour plus d'options qui partagent le code back-end, rendez-vous sur James Hibbard'stour d'horizon des terrains de jeux de code back-end en ligne.

Si vous préférez héberger votre propre environnement de développement en ligne, consultezICEcodeet reportez-vous à SitePoint's "Modifier le code dans le navigateur avec ICEcoder" Didacticiel.

Si vous voulez quelque chose de similaire mais que vous préférez ne pas être en ligne lorsque vous jouez avec le code, consultezCréateur Webet reportez-vous à SitePoint's "Web Maker, une alternative CodePen hors ligne basée sur un navigateur" Didacticiel.

Bon codage !