Fermer

août 14, 2018

7 des meilleurs terrains de jeux de code –


Une variété de terrains de jeux à code frontal ont fait leur apparition au fil des ans. La majorité offre un moyen rapide et sale d'expérimenter le code côté client et de partager avec les autres. Dans cet article, nous examinons rapidement sept des meilleurs.

Les caractéristiques typiques de ces terrains de jeux en ligne incluent:

  • Éditeurs HTML, CSS et JavaScript à code couleur
  • une fenêtre d'aperçu – de nombreuses mises à jour à la volée sans rafraîchissement
  • Pré-processeurs HTML tels que HAML
  • Pré-traitement CSS LESS, SASS et Stylus
  • inclusion de librairies JavaScript populaires
  • consoles de développement et outils de validation de code
  • partage via une URL courte
  • intégration de démonstrations dans d'autres pages
  • création de code
  • coût zéro (ou paiement pour les services premium uniquement)
  • montrant vos compétences en matière de codage au monde!

La meilleure fonctionnalité: ils vous permettent de tester et conservez des extraits de code frontaux expérimentaux sans avoir à créer des fichiers, à lancer votre IDE ou à configurer un serveur local.

 JSFiddle JSFiddle était l'un des premiers jeux de code et une influence majeure pour tous. qui a suivi. Malgré son nom, il peut être utilisé pour toute combinaison de tests HTML, CSS et JavaScript. Il a l'air un peu basique aujourd'hui, mais offre toujours des fonctionnalités avancées telles que la simulation Ajax.

 CodePen Le prix du meilleur terrain de jeu riche en fonctionnalités est attribué à CodePen . Le service, co-fondé par Chris Coyier, met en évidence des démonstrations populaires ("Pens") et Projects un environnement de développement intégré en ligne que vous pouvez utiliser pour créer et déployer des projets Web. Il offre des fonctionnalités avancées telles que le partage et l'incorporation de stylets, l'ajout de bibliothèques JS et CSS externes, des préprocesseurs courants et des tonnes de plus. Le service PRO propose des options de test, de programmation de paires et d’enseignement sur plusieurs navigateurs à partir de seulement 9 dollars par mois.

 CSS Deck Ceci peut être nommé Deck CSS mais c'est un HTML complet , CSS et JavaScript avec des fonctionnalités sociales et de collaboration. Il est similaire à CodePen (je ne sais pas qui a influencé qui!) Mais vous pourriez le préférer.

 JS Bin JS Bin a été créé par JS guru Remy Sharp . Il se concentre sur les bases et les gère très bien. Il offre également une console JavaScript pratique. Recommandé.

 Dabblet Un autre premier terrain de jeu, Dabblet a commencé à fonctionner comme un système de démonstration HTML5 / CSS3 en Lea Verou avec des installations JavaScript.

 Terrains de jeux de code Fron-end: Plunker Plunker vous permet d'ajouter plusieurs fichiers, y compris des modèles générés par la communauté, pour démarrer votre projet. Tout comme CodePen, avec Plunker, vous pouvez créer des démos de travail, également en collaboration avec d'autres développeurs, et partager votre travail. Le code source de Plunker est libre et réside dans son dépôt GitHub .

 Liveweave Code Playground Liveweave est un éditeur HTML5, CSS3 et JavaScript en ligne doté de fonctions de prévisualisation en direct. Il offre des indications de code pour HTML5, CSS3, JavaScript et jQuery et vous permet de télécharger votre projet sous forme de fichier zip.

Vous pouvez également ajouter facilement des bibliothèques externes telles que jQuery, AndgularJS, Bootstrap, etc. dans votre espace de travail. En outre, Liveweave propose une règle pour vous aider à coder des conceptions réactives et une fonctionnalité "Team Up" qui présente les mêmes caractéristiques que l'édition collaborative de JSFiddle.

Autres options

Bien sûr, il existe d'autres options. Avez-vous manqué votre favori? Parlez-nous de cela

Nous n'avons pas parlé ici de terrains de jeux en ligne qui vous permettraient également de partager du code back-end, comme CodeSandbox . Pour plus d'informations, rendez-vous sur le tour d'horizon de James Hibbard pour plus d'informations.

Si vous préférez héberger votre propre environnement de développement en ligne, consultez ICEcoder (nous avons un article à ce sujet ici ).

Et si vous préférez ne pas être en ligne avec du code, mais que vous voulez quelque chose de similaire, regardez quelque chose comme Web Maker (nous avons un article à ce sujet ici ).

Codage heureux!




Source link