Egal, ob Sie ein Programmieranfänger oder ein erfahrener Entwickler sind, Code Playgrounds sind nützlich, wenn Sie mit anderen teilen und lernen.
Ein Code Playground ist ein Onlinedienst, in dem Sie Code schreiben, kompilieren (oder ausführen) und mit anderen teilen können. Sie geben Ihnen auch die Möglichkeit, die Codes anderer zu forken und mit ihnen herumzuspielen.
Wenn Sie Webentwicklung lernen und Ihre HTML oder CSS-Kenntnisse, wäre die Verwendung eines Code-Playgrounds nützlich, um einfache Webseiten online zu erstellen. Außerdem können Sie Trendprojekte auf diesen Plattformen nutzen und sie als Lernressourcen verwenden.
Auf der anderen Seite, wenn Sie ein professioneller Webentwickler sind und Ihre Arbeit zeigen möchten, sind Code Playgrounds der perfekte Ort dafür.
Das Beste daran ist, dass die meisten Code Playgrounds eine kostenlose Stufe haben und Sie Codeergebnisse in Ihre Website einbetten können.
Lassen Sie uns einige von ihnen überprüfen!
JSFiddle
JSFiddle ist eine Code-Spielwiese, auf der Sie HTML, CSS und testen können Javascript Schnipsel. Es stammt aus einer Proof-of-Concept-App im Jahr 2009 und ist heute eine der größten Code-Spielplätze auf dem Markt.
Sie können ein kostenloses Konto erstellen, alle Ihre Geigen speichern und auch die Schnipsel anderer Leute teilen.
Eine weitere beeindruckende Sache an JSFiddle sind die Kollaborationssitzungen. Sie können eine Audio-Chat-Sitzung erstellen, während Sie in der Geige codieren.
Wenn Sie ein Blogger sind, der das Ergebnis von Codeschnipseln und auch deren Quellcode einbetten möchte, wäre JSFiddle eine ausgezeichnete Option.
Natürlich unterstützt diese Code-Spielwiese zum Zeitpunkt des Schreibens keine anderen gängigen Programmiersprachen wie Python, Gobezeichnet, oder PHP, also können Sie nicht erwarten, ein zu bauen Full-Stack-App darauf.
Eigenschaften
- Kostenlose Plattformnutzung
- Minimalistische Benutzeroberfläche
- Unterstützung für HTML, CSS und JS
- Fork ein beliebiges öffentliches Geigen-Snippet auf der Plattform
- Arbeiten Sie mit anderen Personen über den Audio-Chat direkt auf der Website zusammen
- Gut Dokumentation
Codepen
Codepen ist nicht nur eine Code-Spielwiese, sondern eine Gemeinschaft von Entwicklern, die ihre Fähigkeiten verbessern und die bestmögliche Arbeit teilen möchten.
Mit über 6 Millionen Nutzern ist es einer der am häufigsten verwendeten Online-Code-Editoren für Frontend-Entwicklung. Wenn Sie anfangen, Frontend zu lernen, ist es ideal, Ideen und Motivation zu finden, um Ihre Lernreise fortzusetzen.
Wie sieht es mit der Entwicklungserfahrung aus?
Ich kann Ihnen sagen, dass Codepen einen benutzerfreundlichen Editor mit drei anpassbaren Bedienfeldern zum Codieren in HTML, CSS und JS hat. Codepen enthält integrierte Unterstützung für Javascript- und CSS-Präprozessoren wie Typescript und Sass. Wenn Sie sich auf ein npm-Paket verlassen, können Sie es auch über das Einstellungsfenster installieren.
Eigenschaften
- Optional Pro Plan
- Einfach zu bedienender Code-Editor
- Großartige Gemeinschaft
- Die meisten Codepens sind Open Source
- Der ideale Ort, um Frontend-Entwicklung zu üben
CodeSandbox
Das Erstellen eines Prototyps für eine Website kann eine schwierige Aufgabe sein, wenn Sie nicht über das richtige Setup verfügen. Verwenden von Code-Sandbox sollte eine einfache Entscheidung sein, wenn es darum geht, Websites schnell zu erstellen.
Wie der Name schon sagt, bietet CodeSandbox eine Sandbox-Umgebung für die Frontend-Entwicklung.
Von GitHub-Integrationen und Debugging-Tools bis hin zu einer anpassbaren VS-Code-ähnlichen Erfahrung bietet Ihnen dieser Code-Spielplatz alles, um in Sekunden mit dem Codieren zu beginnen.
Wenn Ihr Hauptzweck die Zusammenarbeit ist, müssen Sie lediglich Ihren Sandbox-Link freigeben, und Sie sind bereit für die Paarprogrammierung in Echtzeit.
Sie können zum Beispiel eine handverlesene Liste der beste sandboxen.
Ich könnte keine Zeit mehr haben, alle Eigenschaften von CodeSandbox aufzulisten, also lassen Sie uns seine Killerfunktionen erwähnen.
Eigenschaften
- GitHub-Integration
- Basierend auf Monaco Herausgeber das den beliebten VScode-Editor antreibt
- Zusammenarbeit erste Plattform
- Bereitstellung auf Vercel oder Netlify
- Debugging-Tools
- Gebrauchsfertige Testframeworks
- npm-Unterstützung
Sololearn
Die beliebte Programmier-Lernplattform Sololearn hat seine eigene Codespielplatz für die Webentwicklung.
Um ehrlich zu sein, ist es kein IDE mit vollem Funktionsumfang wie die anderen Online-Editoren, die wir in diesem Artikel gesehen haben, bietet jedoch eine ablenkungsfreie Umgebung, in der Sie Code schreiben und ausführen können.
Dies sollte mehr als genug sein, wenn Sie gerade erst mit der Programmierung beginnen.
Eine weitere nette Sache an Sololearn ist die großartige Community und die Unterstützung für mehrere Programmiersprachen – was ziemlich gut ist, wenn Sie mit anderen Technologien herumspielen möchten.
Eigenschaften
- Kostenlos mit Ihrem Sololearn-Konto zu verwenden
- Einfacher Online-Code-Editor
- Große Community, um deinen Code zu teilen
- Unterstützung für mehrere Sprachen
- Ein tolles Ökosystem mit den Sololearn-Kursen
Zusammenfassend lässt sich sagen, dass der Code-Spielplatz von Sololearn nicht im Akku enthalten ist, aber er funktioniert so, wie er sein soll, und wenn Sie bereits Teil der Millionen von Sololernern sind, sollten Sie es versuchen.
Codeply
Das Beste an Codeply ist die Unterstützung für mehrere Frameworks und Bibliotheken out-of-the-box und der responsive designorientierte Code-Editor.
Wenn Sie gerade erst mit einem neuen Framework beginnen, wie Reagieren, Vue oder Angular ist Codeply ein großartiger Ort, um mit einem vollständigen Satz von Startvorlagen und einer großartigen Community von über 40 Entwicklern anzufangen.
Eigenschaften
- Kostenlose Plattformnutzung
- Einfach und doch unkompliziert Dokumentation
- Einmalige Gebühr pro Plan
- Enthält über 50 Bibliotheken
- Testen Sie Ihren Web-Muck-Up in verschiedenen Bildschirmauflösungen
Replit
Replizieren ist möglicherweise die am besten geeignete Online-IDE für jeden Entwickler da draußen. Es beinhaltet buchstäblich alles Sie müssten von einer einfachen Homepage bis hin zu einer komplexen Web-App mit jeder modernen JS-Bibliothek erstellen.
Mit Replit können Sie in über 50 Sprachen programmieren, Apps synchron mit Ihren Kollegen schreiben, Ihre Programme testen, in GitHub integrieren und Zugang zu einer der größten Entwickler-Communitys erhalten.
Mir könnte buchstäblich das Papier ausgehen, um alle Funktionen von Replit zu erwähnen, also springen wir zu den wichtigsten.
Eigenschaften
- Das kostenlose Starterpaket oder 5$ /Monat Hacker-Plan
- Multiplayer-Modus (Live-Paar-Programmierung)
- Große Gemeinschaft
- Viele Sprachen unterstützt
- Anpassung des Editors
- Schaltfläche „Ausführen“: Führen Sie das Projekt mit anpassbaren Aktionen aus
- Geheimer Speicher
- Gehosteter Code
StackBlitz
Wenn Sie ohne VS-Code nicht leben können, StackBlitz ist die richtige Option für Sie. Genau wie CodeSandbox basiert es auf dem Monaco Herausgeber, die diesen beliebten Code-Editor antreibt.
Melden Sie sich einfach mit Ihrem GitHub-Konto an und voila! Sie erhalten Zugang zu einer vertrauten Umgebung.
Abgesehen von der Erfahrung mit dem Code-Editor ist es eine ziemlich solide Spielwiese. Sie können gebrauchsfertige Vorlagen für Frontend-Frameworks und Bibliotheken wie React, Vue, Angular, Svelte und Ionic verwenden.
Die Haupteigenschaft dieses Tools ist jedoch die Möglichkeit, mit Backend-Frameworks wie Node.js, Next.js und GraphQL herumzuspielen.
Eigenschaften
- Kostenloser „Kadetten“-Plan
- VS-Code-Erfahrung in Ihrem Browser. Dazu gehören Intellisense, Projektsuche und mehr.
- Flüssige (wirklich flüssige) Programmiererfahrung
- Offline-Code-Editor (Hey! könnte nützlich sein, wenn Sie die Verbindung für ein oder zwei Tage trennen)
- URL der gehosteten App: einfaches Live-Sharing
Glitch
Ostatni, ale nie najmniej, Glitch ist eine kollaborative Programmierumgebung, die das Erstellen einer Web-App erleichtert.
Es hat eine der angenehmsten Schnittstellen zum Programmieren! Mal schauen:
Falls Sie sich fragen, ja, es hat einen dunklen Modus.
Abgesehen von der schönen Benutzeroberfläche wird Glitch aufgrund seiner Benutzerfreundlichkeit, der Live-Pair-Programmierung und der freundlichen Community von Millionen verwendet.
Sie können jede Art von Full-Stack-Apps erstellen, die nicht nur HTML, CSS und JS verwenden, sondern auch Node.js (Backend), React oder Eleventy (von der ich nicht wusste, dass sie existiert, bevor ich auf die Seite Glitches ging).
Eigenschaften
- Kostenloser Plan mit Upgrade-Option
- Entwickeln Sie Full-Stack-Apps in Ihrem Browser
- Live-Pair-Programmierung
- Angenehme Benutzeroberfläche
- Starter-Apps
- Remixen (oder forken) Sie die öffentlichen Apps anderer
Fazit
Heutzutage können Sie jede Web-App vollständig erstellen, indem Sie einen Code-Playground verwenden, wie wir ihn oben gesehen haben. Kein Download mehr nötig schwere IDEs auf Ihrem Computer, während Sie bauen können, debuggen, testen und bereitstellen, ohne Ihren Webbrowser zu beenden.
Wenn Sie sich nicht ganz sicher sind, ob Sie diese Tools verwenden möchten, lesen Sie die Die 10 besten Code-Editoren (die Sie auf Ihrem Computer installieren müssen).
