popcode

Popcode

Popcode ist eine einfache HTML/CSS/JavaScript -Bearbeitungsumgebung für die Verwendung im Klassenzimmer. Es ist sehr ähnlich wie JSBIN, JSFIDDLE oder CODEPEN, aber es konzentriert sich darauf, spezifisches, unmittelbares, menschlich-freundliches Feedback zu geben, wenn der Code Fehler enthält.

Projektstatus

PopCode ist das offizielle Bearbeitungsumfeld für das Intro -Programm Code Nation in das Webentwicklungsprogramm im Schuljahr 2019–2020.

Probieren Sie es aus

Sie können Popcode unter https://popcode.org ausprobieren.

Inhaltsverzeichnis

• Merkmale
  • Über Validierung
  • Roadmap
• Technische Details
  • Architekturübersicht
• Beitragen
  • Vor Ort laufen
  • Debug -Modus
  • Entwicklerreferenz
• Lizenz
• Mitwirkende
• Dank
• Kontakt

Merkmale

• Bearbeiten Sie HTML, CSS und JavaScript im Browser; In-Browser-Vorschau-Aktualisierungen beim Eingeben.
• Holen Sie sich ein sofortiges, umfassendes und leicht verständliches Feedback zu Problemen in Ihrem Code.
• Fehler können nicht ignoriert werden. Wenn der Code Fehler gibt, wird die Live -Vorschau durch eine Fehlerliste ersetzt.
• JavaScript-Laufzeitfehler werden auch in menschenfreundlicher Sprache angegeben, wobei Anmerkungen im Quellcode auf die Quelle des Problems hinweisen.
• One-Click-Login mit GitHub-Konto; Alle Arbeiten werden bei Anmeldung aus der Ferne auf Firebase gespeichert.
• Popiew der Webseite in einem eigenen Fenster.
• Export in Github Gist.
• Importieren Sie den Startercode aus einem Github -Gist.

Über Validierung

Das Validierungssystem ist der Hauptpunkt dieses Projekts. Die meisten Syntax -Prüfer, Linter und Stildurchsetzer geben tendenziell Feedback mithilfe von Sprache, die auf erfahrene Codierer und nicht an Anfänger ausgerichtet sind. Daher ist die Bereitstellung einer Übersetzung von Fehlermeldungen in ein einfaches Englisch für die Schüler das übergeordnete Anliegen dieses Projekts.

Popcode tendiert dazu, strenge Durchsetzung von Lint- und Code -Stil zu strikten, selbst wenn erzwungene Stilentscheidungen willkürlich sind, unter der Philosophie, dass die Verleihung eines richtigen Weges einen Weg zu Unklarheiten und unterstützt den Lernprozess.

Technische Details

PopCode verwendet React to Render Views, Redux, um den Anwendungsstatus zu verwalten, ACE als Code-Editor, Webpack , um die clientseitige Anwendung zu verpacken, und Babel, um modernes JavaScript für die Kompatibilität mit Legacy-Browser-Versionen zu kompilieren.

Popcode erkennt Fehler im Student -Code mit SlowParse, HTMlint, HTML -Inspektor, Rework CSS, PrettyCSS, Stylelint, JSHINT und Esprima.

Beitragen

PopCode ist ein All-Volunteer-Projekt und Beiträge sind willkommen. Ich ermutige Erstmals, mit dem Leitfaden für den ersten Start zu beginnen , der eine freundliche und detaillierte Aufschlüsselung jedes Schritts für die Beitrag zu Ihrer ersten Pull-Anfrage bietet.

Schneller Start

Wenn Sie sich engagieren möchten, aber keine spezifische Vorstellung davon haben, wie Sie das gute erste Problem und die gewünschten Etiketten helfen möchten. Wenn Sie bereits eine Idee haben, für die Sie sich leidenschaftlich begeistern, machen Sie es.

PopCode verfügt über eine auf Batterien eingestellte Entwicklungsumgebung, die auf nodeenv basiert. Sie müssen Python installieren lassen; Jede Version 2.7+ funktioniert. Um die Umgebung einzurichten, rennen Sie:

$ tools/setup.py

Dadurch wird node und yarn in einer isolierten Umgebung im nodeenv -Verzeichnis der Projektwurzel installiert. Es stört keine systemweite Installation dieser Tools.

Sobald das Setup abgeschlossen ist, um einen Entwicklungsserver auszuführen, rennen Sie:

$ tools/yarn.py start

Dadurch startet ein Server auf http: // localhost: 3000

Um Tests im Uhrenmodus zu starten, laufen Sie:

$ tools/yarn.py autotest

Überprüfen Sie den Abschnitt "scripts" von package.json auf andere nützliche Tools.

Entwicklung im VS -Code

PopCode verfügt über eine robuste benutzerdefinierte VS -Code -Konfiguration, die automatisch durch tools/setup.py aktiviert wird. Wenn Sie VS -Code verwenden, können Sie:

• Führen Sie den Befehl Show Recommended Extensions aus, um Erweiterungen zu installieren, die das Popcode -Entwicklererlebnis verbessern
• Starten Sie einen Server, führen Sie Tests und mehr aus, indem Sie task in die schnelle offene Leiste eingeben, um die zu ausgeführte Aufgabe automatisch zu vervollständigen
• Debuggen Sie entweder Ihre Entwicklungsumgebung oder einen Scherztest, indem Sie debug in die Quick Open Bar eingeben

Verwenden Sie andere Herausgeber

Popcode verwendet Tools wie schöner, Eslint und Stylelint, um den automatischen Code automatisch zu formatieren. Wir empfehlen, die Editor-Plugins auf Save fortzusetzen. Alternativ können Sie tools/yarn.py lintfix ausführen, bevor Sie sich für Format- und Autofix -Lint verpflichten. Die offizielle VS -Code -Integration von Popcode (mit den empfohlenen Erweiterungen) erledigt dies.

Alternative Entwicklungsumgebungen (Fortgeschrittene)

Es ist nicht erforderlich, dass Sie die offizielle Entwicklungsumgebung nutzen, um an Popcode zu arbeiten. Sie benötigen meistens nur die richtigen Versionen von Knoten und Garn auf Ihrem Computer (überprüfen Sie den Abschnitt "engines" von package.json auf die aktuellen Versionen).

Entwicklerreferenz

Popcode bemüht sich, aktuelle Technologien zu verwenden und Konventionen zu codieren, um die Entwicklung so angenehm wie möglich zu gestalten. Im Folgenden finden Sie Links zur Referenzdokumentation zu den wichtigsten Tools:

• Reagieren Sie für die Erstellung der Benutzeroberfläche
• Redux für die Verwaltung des Anwendungszustands
• Postcss-Preset-Env gibt uns modernste CSS-Funktionen
• Blockelement -Modifikator bietet eine Konvention für die Organisation von DOM -Klassen
• Webpack erstellt das JavaScript
• Scherz ist der Testframework

Lizenz

Popcode wird unter der MIT -Lizenz verteilt. In der beigefügten Lizenzdatei finden Sie alle schmutzigen Details.

Mitwirkende

• Mat Brown (Betreuer)
• Alejandro ar
• Vaibhav Verma
• Alex Pelan
• Carol Chau
• Jesse Wang
• Eric Lewis
• Razzi Abuissa
• Jeremy Schrader
• Leo McLay
• Frederic Brodbeck
• Ben Yelsey
• Aaron Greenberg
• Peter Jablonski
• Ten-Young Guh
• Marke Ilona
• Kaylee Knowles
• Felicia Wong
• Tim Miller
• Bruno Garcia
• Cory Etzkorn
• Nick Volpe
• Craig Iturbe
• Wylie Conlon
• Gary Pang
• Alessia Bellisario
• Roan Kattouw
• Harpreet Singh
• Limon Monte
• Matthew Armstrong
• Matt Garbis
• Ilya Gribov
• Chase Starr
• Alec Merdler
• Eric Snell
• Omar de Leo
• David Shen
• Maggie Walker
• Joshua Ling
• Taimur gleich
• Ronald Martin
• Ian Plunkett
• Adrian Falleio
• Katie hat den Namen PopCode miteinander erstellt
• Logo -Design, "Pop" -Konzept und Brandingelemente des Teams am Red Peak: Andrew Haug, Aya Kawabata, Jieun Lee, Achu Fones, Iwona Waluk, Stewart Devlin und Katie Conneally
• Benutzeroberfläche, die von Ariel Liu, Ian Jones, Meghan Knoll und Simon Lesser entworfen wurde.

Dank

Diese Unternehmen bieten großzügig Popcode -Zugang zu kostenlosen Stufen ihrer hervorragenden Dienstleistungen an, kostenlos:

Kontakt

Fühlen Sie sich gerne eine E -Mail an [email protected], wenn Sie Fragen haben.

Hier finden Sie unser Slack -Team, einschließlich unseres #dev -Kanals, hier.