Ces dernières années, divers bacs de sable de code frontal ont émergé l'un après l'autre. La plupart des bacs à sable fournissent un moyen rapide et facile d'expérimenter avec le code client (et parfois c?té serveur), puis le partager avec d'autres. Le plus populaire est Codepen, que vous avez probablement vu ou utilisé. C'est un excellent outil, mais il n'offre pas toutes les fonctionnalités dont vous pourriez avoir besoin. Voici notre examen des sept meilleurs bacs de sands de code, en comparant le codepen à certaines alternatives de codepen.

Sandbox codant en ligne comprend généralement:

• Editeurs HTML, CSS et JavaScript codés en couleur
• Les commandes de code sont automatiquement terminées
• La fenêtre d'aper?u (généralement) peut être rechargée en temps réel sans rafra?chissement manuel
• Préprocesseur HTML, comme HAML
• Moins, sass, stylet et préprocesseurs CSS similaires
• contient des bibliothèques JavaScript populaires telles que React, Preact, Angular et Vue.js (certains sableaux plus récents permettent également le développement du code backend)
• outil de vérification de console et de code du développeur
• Code Collaboration Tool
• Partager via une URL courte
• Emballage de la démo dans d'autres pages
• CODE CLONING ET DéRIVATION
• Copier dans le référentiel de code, par exemple GitHub
• Services de base gratuits
• Profitez de services plus avancés avec un petit frais mensuel
• Montrez au monde vos compétences de codage!

Ils vous permettent de tester et de conserver des extraits de code expérimentaux sans créer de fichiers, de démarrer un éditeur ou d'exécuter un serveur local.

Regardons de meilleures options.

points clés

• Encodage en ligne Les bacs de sable (tels que Codepen, JSFiddle, JS Bin, CSS Deck, CodeandBox, Playcode et Plunker) fournissent des éditeurs de code de code automatiques codés en couleur, un rechargement en temps réel de Windows, HTML JavaScript, HTML, HTML Prérocesseurs, préprocesseurs CSS, bibliothèques JavaScript populaires, consoles de développeurs, outils de vérification de code et outils de collaboration de code.
• Code Sandbox fournit un moyen rapide d'expérimenter avec le code c?té client et du serveur, de partager avec d'autres et de tester et de stocker des extraits de code expérimentaux sans créer de fichiers ou exécuter un serveur local. Ils fournissent également un moyen de démontrer vos compétences de codage.
• Alors que Codepen est l'un des bacs de sable de code les plus populaires et les plus beaux, des alternatives telles que JSFiddle, JS Bin, CSS Deck, Codeandbox, Playcode et Plunker fournissent des fonctionnalités uniques et des fonctionnalités telles que l'édition multi-fichiers, les demandes Ajax asynchrones Ajax Mockup, entièrement édition de fichiers HTML, et plus encore.

1. Codepen

Codepen n'est pas le premier, mais c'est l'un des bacs de sable de code les plus populaires et les plus beaux. Le service a été cofondé par Chris Coyier de CSS-Tricks, et il se concentre sur les stylos populaires (démos des clients) et les projets (environnements de développement intégrés en ligne que vous pouvez utiliser pour créer des projets Web). Il fournit une interface d'édition utilisateur propre et puissante avec des fonctionnalités avancées telles que le partage, l'intégration, la console d'erreur, les bibliothèques JavaScript externes, les préprocesseurs CSS populaires, etc.

Codepen Pro propose des stylos privés, une garde à vue, un mode de collaboration et des thèmes IFRAME intégrés à partir de 8 $ par mois.

2. jsfiddle

jsfiddle est l'un des premiers bacs de sable de code et affecte les bacs de sable ultérieurs. Il peut être utilisé pour toute combinaison de tests HTML, CSS et JavaScript et fournit une gamme de bibliothèques et de cadres. Inhabituellement, il peut également simuler des demandes Ajax asynchrones.

JSFiddle se concentre sur le code, vous ne trouverez donc pas une gamme de fonctionnalités sociales telles que les démos en surbrillance et les outils de partage. Cette interface est plus simple que les autres, et inhabituellement, vous devez cliquer sur Exécuter pour recharger le volet de résultats. Cependant, il se sent toujours rapide et sa simplicité peut être plus favorisée par certains.

3. js bin

JS Bin a été créé par Javascript Master Remy Sharp et est toujours géré par lui aujourd'hui. Il se concentre sur le codage des bases et les gère bien. Contrairement à certains autres bacs à sable, vous pouvez modifier l'intégralité du fichier HTML, y compris la balise . En plus des options, bibliothèques et préprocesseurs habituels, JS Bin a été l'un des premiers bacs à sable à fournir des consoles de journal, qui était cruciale pour le développement JavaScript. Les comptes Pro commerciaux offrent des fonctionnalités avancées telles que les téléchargements d'actifs, les bacs privés, les URL personnalisées et la synchronisation Dropbox. Si vous vous inquiétez de la confidentialité ou que vous ne voulez pas que les autres voient l'état de votre code, vous pouvez même télécharger et installer JS Bin localement!

4. CSS Deck

Malgré le nom, CSS Deck est un bac à sable HTML, CSS et JavaScript entièrement fonctionnel avec des capacités sociales et de collaboration. Il existe depuis longtemps et a eu un impact significatif sur d'autres bacs à sable. Le deck CSS n'est pas aussi capable que le codepen, mais il se sent plus rapide et a un écran de disposition codé plus configurable. Il existe une communauté active qui soumet régulièrement des exemples de démonstrations de code.

5. codes et bo?te

La plupart des bacs de sable de code fournissent un fichier HTML, un fichier CSS et un fichier JavaScript (bien que plus de fichiers puissent être importés). Codesandbox n'est pas seulement un bac à sable, il ressemble plus à un environnement de développement en ligne.

Comme des projets Web standard, vous pouvez ajouter autant de fichiers que vous le souhaitez et les modifier à l'aide d'un environnement de développement intégré de type multi-tags par rapport à un code (IDE). L'inscription avec un compte GitHub ou Google est gratuite, mais vous pouvez collaborer avec d'autres personnes en temps réel pour exporter des projets vers des référentiels GIT et les déployer sur des h?tes de site statiques tels que Netlify et Vercel.

CODESANDBOX peut être une option pratique si vous travaillez à distance ou utilisez un dispositif de développement atypique tel qu'un Chromebook.

6. Playcode

Playcode est un autre environnement de développement en ligne qui vous permet d'ajouter plusieurs fichiers HTML, CSS, JavaScript et Asset. L'interface est plus simple que la bo?te de codes et de bo?te, mais elle est rapide, magnifiquement apparente, facile à utiliser et peut être moins intimidante pour les débutants.

Playcode a une console de journal, et inhabituellement, il vous permet de contr?ler la taille et la mise à jour de la fréquence de la fenêtre d'aper?u. L'éditeur est gratuit, mais vous devez être connecté à un compte Google, Microsoft, Github ou un e-mail pour enregistrer le projet.

7. Plunker

Plunker 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 démarrer votre projet. Comme d'autres bacs à sable, Plunker vous permet de créer des présentations de travail, de collaborer avec d'autres développeurs et de partager votre travail. Il n'est peut-être pas aussi attrayant que certains bacs à sable, mais l'interface utilisateur reste rapide et puissante.

Il existe une communauté active de contributeurs. La plupart des gens semblent soumettre des démos angulaires, mais elle soutient également les modèles de lancement Vanilla JS, React et Preact.

Autres options

Bien s?r, il existe de nombreux autres bacs de sable de code, notamment Glitch, Esnextbin, Jsitor, Liveweave, Dabblet, etc. Stackblitz est un bac à sable plus récent qui prend en charge le développement frontal, mais vous permet également d'expérimenter le code back-end à l'aide de node.js, next.js et graphQL.

Astuce: Pour essayer Stackblitz, entrez simplement "Node.new" (sans guillemets) dans la barre d'adresse du navigateur.

Avons-nous manqué votre bac à sable préféré? S'il vous pla?t dites-nous!

Pour plus d'options de partage du code backend, visitez le résumé du code de backend en ligne de James Hibbard.

Si vous préférez héberger votre propre environnement de développement en ligne, consultez IceCodeer et référez-vous au tutoriel de SitePoint sur l'édition de code dans le navigateur avec icecoder.

Si vous voulez quelque chose de similaire mais que vous préférez ne pas être en ligne lorsque vous traitez avec votre code, consultez le fabricant Web et référez-vous au tutoriel de SitePoint sur "Web Maker, une alternative Codepen basée sur un navigateur".

Je vous souhaite un codage heureux!

FAQ sur le meilleur code de sandbox et les alternatives codepen

Quelles fonctionnalités clés recherchent dans le Sandbox du code?

Lors de la sélection d'un bac à sable de code, plusieurs fonctionnalités clés doivent être prises en compte. Tout d'abord, il devrait prendre en charge la langue que vous utilisez. La plupart des bacs de sands de code prennent en charge HTML, CSS et JavaScript, mais si vous utilisez d'autres langages comme Python ou Ruby, vous devez trouver une plate-forme qui les prend en charge. Deuxièmement, il devrait avoir une interface facile à utiliser pour une écriture et des tests faciles du code. Troisièmement, cela devrait vous permettre d'économiser et de partager votre travail. Ceci est particulièrement important si vous collaborez avec les autres ou si vous souhaitez présenter votre projet. Enfin, déterminez si la plate-forme a une communauté où vous pouvez partager des idées et obtenir des commentaires.

Comment utiliser le bac à sable de code pour améliorer mes compétences de codage?

Code Sandbox est un excellent outil pour améliorer les compétences de codage. Ils fournissent un environnement s?r où vous pouvez expérimenter différentes techniques de codage et visualiser les résultats en temps réel. Vous pouvez également les utiliser pour pratiquer la résolution de problèmes en créant votre propre projet ou vos défis de codage. De nombreux bacs de sable de code ont également une communauté où vous pouvez apprendre des autres utilisateurs et obtenir des commentaires sur votre travail.

Y a-t-il un bac à sable de code gratuit disponible?

Oui, il y a beaucoup de bacs de sands de code gratuits disponibles. Certains des plus populaires incluent Codepen, Jsfiddle et Rep.it. Ces plateformes fournissent une gamme de fonctionnalités à écrire et à tester le code, et ils ont également une communauté où vous pouvez partager votre travail et apprendre des autres. Cependant, n'oubliez pas que si ces plateformes sont gratuites, elles peuvent offrir des fonctionnalités premium sur une base payante.

Puis-je utiliser le code sandbox de code pour des projets collaboratifs?

bien s?r! De nombreux bacs de sands de code assurent une collaboration facile avec d'autres. Par exemple, vous pouvez partager votre projet avec d'autres et les inviter à contribuer. Certaines plateformes fournissent également une collaboration en temps réel, permettant à plusieurs utilisateurs de traiter le même projet en même temps. Cela peut être un excellent moyen d'obtenir de l'aide avec un projet ou un code d'équipe.

à quel point le bac à sable du code est-il s?r?

La sécurité du bac à sable de code varie d'une plate-forme à l'autre. La plupart des plates-formes réputées prennent des mesures pour protéger votre code et vos informations personnelles. Cependant, n'oubliez pas que tout code que vous partagez publiquement peut être vu et utilisé par d'autres. Si vous travaillez sur des projets sensibles, vous pouvez envisager d'utiliser un référentiel privé ou une plate-forme qui fournit un espace de codage privé.

Puis-je utiliser le bac à sable de code pour créer des portefeuilles?

Oui, le Sandbox de code est un excellent outil pour construire des portefeuilles. Vous pouvez les utiliser pour créer et présenter vos projets, montrant vos compétences de codage aux employeurs ou clients potentiels. De nombreuses plateformes vous permettent également de partager vos projets avec d'autres, vous donnant la possibilité d'obtenir des commentaires et d'améliorer votre travail.

Quelles sont les alternatives à Codepen?

Codepen a plusieurs alternatives, dont JSfiddle, Rep.it et Glitch. Ces plateformes offrent des fonctionnalités similaires à Codepen, telles que la prise en charge de plusieurs langues, une interface facile à utiliser et la possibilité d'économiser et de partager votre travail. Ils ont également une communauté où vous pouvez partager des idées et obtenir des commentaires.

Puis-je utiliser le Sandbox du code hors ligne?

Certains bacs de sable de code fournissent des fonctionnalités hors ligne qui vous permet d'écrire et de tester le code sans connexion Internet. Cependant, toutes les plates-formes n'offrent pas cette fonctionnalité. Si vous avez besoin de codage hors ligne, vous voudrez peut-être envisager d'utiliser un environnement de développement local à la place.

Puis-je utiliser du code Sandbox sur mon appareil mobile?

Oui, de nombreux bacs de sable de code sont adaptés aux mobiles et peuvent être utilisés sur les smartphones et les tablettes. Cela peut être un excellent moyen de coder ou de pratiquer vos compétences à tout moment, n'importe où. Cependant, n'oubliez pas que le codage sur un appareil mobile peut ne pas être aussi confortable ou efficace que le codage sur un grand écran.

Comment puis-je obtenir de l'aide si j'ai des problèmes de codage dans le bac à sable du code?

De nombreux bacs de sable de code ont des communautés où vous pouvez demander de l'aide et obtenir des commentaires sur votre code. Vous pouvez également utiliser des ressources en ligne comme Stack Overflow ou Coding Forums pour poser des questions et trouver des solutions à vos problèmes. De plus, certaines plateformes fournissent également des tutoriels et des guides qui peuvent vous aider à apprendre de nouveaux concepts et techniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!