popcode

Code-pop

PopCode est un simple environnement d'édition HTML / CSS / JavaScript pour une utilisation en classe. C'est un peu comme JSBIN, JSFiddle ou CodePen, mais il se concentre sur les commentaires spécifiques, immédiats et respectueux de l'homme lorsque le code contient des erreurs.

État du projet

Popcode est l'environnement d'édition officiel de la Code Nation Intro to Web Development Program au cours de l'année scolaire 2019-2020.

Essayez-le

Vous pouvez essayer PopCode sur https://popcode.org .

Table des matières

• Caractéristiques
  • À propos de la validation
  • Caractéristique de route
• Détails techniques
  • Aperçu de l'architecture
• Contributif
  • Courir localement
  • Mode de débogage
  • Référence du développeur
• Licence
• Contributeurs
• Grâce à
• Contact

Caractéristiques

• EDIT HTML, CSS et JavaScript dans le navigateur; Mis à jour de l'aperçu in-browser pendant que vous tapez.
• Obtenez des commentaires immédiats, complets et faciles à comprendre sur les problèmes de votre code.
• Les erreurs ne peuvent pas être ignorées. S'il y a des erreurs dans le code, l'aperçu en direct est remplacé par une liste d'erreurs.
• Des erreurs d'exécution JavaScript sont également signalées dans un langage adapté à l'homme, les annotations dans le code source soulignant la source du problème.
• Connexion en un clic à l'aide du compte GitHub; Tous les travaux sont sauvés à distance à Firebase lorsqu'ils sont connectés.
• Apportez un aperçu de la page Web dans sa propre fenêtre.
• Exporter vers GitHub Gist.
• Importez du code de démarrage à partir d'un gist github.

À propos de la validation

Le système de validation est le point principal de ce projet. La plupart des vérificateurs de syntaxe, des liners et des applicateurs de style ont tendance à fournir des commentaires en utilisant un langage qui s'adresse aux codeurs expérimentés, et non aux débutants. Ainsi, fournir une traduction de messages d'erreur en anglais simple pour les étudiants est la préoccupation primordiale de ce projet.

Popcode tend à l'application stricte du style de peluche et de code, même lorsque les décisions de style appliquées sont arbitraires, sous la philosophie que donner aux étudiants une bonne façon de le faire élimine l'ambiguïté et aide le processus d'apprentissage.

Détails techniques

PopCode utilise React to Render Views, Redux pour gérer l'état d'application, ACE en tant qu'éditeur de code, WebPack pour emballer l'application côté client et Babel pour compiler JavaScript moderne pour compatibilité avec les versions de navigateur hérité.

Popcode détecte les erreurs dans le code étudiant à l'aide de SlowParse, HTMllint, Inspecteur HTML, Reménagé CSS, PrettyCSS, Stylelint, Jshint et Esprima.

Contributif

PopCode est un projet entièrement bénévole et les contributions sont les bienvenues. J'encourage les nouveaux contributeurs à commencer par le Guide de démarrage , ce qui donne une ventilation amicale et détaillée de chaque étape vers la contribution de votre première demande de traction.

Démarrage rapide

Si vous voulez vous impliquer mais que vous n'avez pas une idée spécifique de la façon dont, vérifiez le bon premier numéro et aidez les étiquettes. Si vous avez déjà une idée qui vous passionne, allez-y.

Popcode est livré avec un environnement de développement inclué des batteries construit sur nodeenv . Vous devrez installer Python; Toute version 2.7+ fonctionnera. Pour configurer l'environnement, exécutez:

$ tools/setup.py

Cela installera node et yarn dans un environnement isolé dans le répertoire nodeenv de la racine du projet. Il n'interfère pas avec aucune installation à l'échelle du système de ces outils.

Une fois la configuration terminée, pour exécuter un serveur de développement, exécutez:

$ tools/yarn.py start

Cela démarrera un serveur sur http: // localhost: 3000

Pour commencer les tests en mode montre, exécutez:

$ tools/yarn.py autotest

Vérifiez la section "scripts" de package.json pour d'autres outils utiles.

Développement dans VS Code

PopCode est livré avec une configuration de code personnalisée vs robuste, qui est automatiquement activée par tools/setup.py . Si vous utilisez VS Code, vous pouvez:

• Exécutez la commande Show Recommended Extensions pour installer facilement des extensions qui améliorent l'expérience du développeur popcode
• Démarrez un serveur, exécutez des tests et plus en tapant task dans la barre ouverte rapide pour s'assurer automatiquement la tâche pour exécuter
• Déboguez soit votre environnement de développement ou un test de plaisanterie en tapant debug dans la barre ouverte rapide

Utilisation d'autres éditeurs

PopCode utilise des outils comme plus bettrial, Eslint et Stylelint pour formater automatiquement le code. Nous recommandons la configuration des plugins d'éditeur sur le format automatique sur SAVE; Alternativement, vous pouvez exécuter tools/yarn.py lintfix avant de vous engager à formater et à Autofix Lint. L'intégration officielle vs de code officielle de PopCode (avec des extensions recommandées installées) le fait hors de la boîte.

Environnements de développement alternatifs (avancé)

Il n'y a aucune exigence que vous utilisez l'environnement de développement officiel pour travailler sur Popcode; Vous aurez surtout besoin des bonnes versions de nœud et de fil installées sur votre machine (vérifiez la section "engines" de package.json pour les versions actuelles).

Référence du développeur

PopCode s'efforce d'utiliser des technologies à jour et des conventions de code pour rendre le développement aussi agréable que possible. Vous trouverez ci-dessous des liens vers la documentation de référence sur les principaux outils:

• Réagir pour la construction de l'interface utilisateur
• Redux pour la gestion de l'état de demande
• POSTCSS-PRESET-ENV nous offre des fonctionnalités CSS de pointe
• Le modificateur d'élément bloc fournit une convention pour organiser les classes DOM
• WebPack construit le javascript
• Jest est le cadre de test

Licence

Popcode est distribué sous la licence du MIT. Voir le fichier de licence joint pour tous les détails sordides.

Contributeurs

• Mat Brown (mainteneur)
• Alejandro Ar
• Vaibhav Verma
• Alex Pelan
• Carol Chau
• Jesse Wang
• Eric Lewis
• Razzi Abuissa
• Jeremy Schrader
• Leo McLay
• Frédéric Brodbeck
• Ben Yelsey
• Aaron Greenberg
• Peter Jablonski
• Dix-young guh
• Marque 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 Samee
• Ronald Martin
• Ian Plunkett
• Adrian Falleiro
• Katie a connecté connecté le nom popcode
• Conception du logo, concept "pop" et éléments de marque de l'équipe de Red Peak: Andrew Haug, Aya Kawabata, Jieun Lee, Achu Fones, Iwona Waluk, Stewart Devlin et Katie Connelyly
• Interface utilisateur conçue par Ariel Liu, Ian Jones, Meghan Knoll et Simon moins.

Grâce à

Ces sociétés offrent généreusement un accès pop-code aux niveaux payants de leurs excellents services, gratuitement:

Contact

N'hésitez pas à m'envoyer un e-mail à [email protected] si vous avez des questions.

Vous pouvez trouver notre équipe Slack, y compris notre chaîne #DEV, ici.