Popcode is the official first semester editing environment for the ScriptEd program in the 2018–2019 school year.
Try it out
You can try out Popcode at
Table of Contents
- Technical details
- Thanks to
- Get immediate, comprehensive, easy-to-understand feedback about problems in your code.
- Errors can't be ignored. If there are any errors in the code, the live preview is replaced by an error list.
- One-click login using GitHub account; all work is saved remotely to Firebase when logged in.
- Pop out preview of web page in its own window.
- Export to GitHub gist.
- Import starter code from a GitHub gist.
The validation system is the main point of this project. Most syntax checkers, linters, and style enforcers tend to provide feedback using language that is geared toward experienced coders, not beginners. Thus, providing a translation of error messages into plain English for students is the overriding concern of this project.
Popcode tends toward strict enforcement of lint and code style, even when enforced style decisions are arbitrary, under the philosophy that giving students one right way to do it eliminates ambiguity and aids the learning process.
Check out the Project Board.
The architecture of Popcode’s code base is best understood through the lifecycle of a user interaction:
- User interactions are first captured by handlers in React components.
- These components propagate the event to the view controller, the
Workspacedispatches one or more Redux actions.
- Dispatched actions are consumed by the reducers, which update the store.
- Action creators also perform other business logic, such as initiating validation of project code and persisting changes to persistent storage.
- When the action lifecycle is complete, the
Workspacereceives updated props from the store and propagates them to its descendants.
Yes please! There are a ton of ways Popcode could be made better. Pull requests, bug reports, feature suggestions are all very very welcome.
When you’re first getting started, I recommend picking a good first issue so you can get your feet wet and make sure you can run a development environment smoothly.
Everyone is welcome to submit pull requests that implement a new feature or fix a bug that you’re particularly passionate about. But if you just want to help out and you’re looking for ideas, I recommend checking out the help wanted label and the ScriptEd Program Managers’ Roadmap, which lists the features and enhancements that the ScriptEd PMs have identified as most beneficial based on observation of hundreds of student users and feedback from dozens of instructors.
Once you’ve got it run:
$ yarn install
That'll pull down the dependencies. Then run:
$ yarn start
This will start a local static server, and open it in your browser. The first pageload will be rather slow as it compiles the bundle; after you change files, assets are recompiled incrementally and your browser automatically reloads.
When you're done, lint and make sure tests pass before opening a pull request:
$ yarn test
$ DEBUG=true yarn start
Running with Docker
Popcode also comes with a
docker-compose file to support running inside Docker
with no local Node installation needed. If you’re a Docker user, you can install
and run Popcode locally with:
$ docker pull popcodeorg/popcode:latest # Not required, but will speed up installation $ docker-compose up
Popcode endeavors to use up-to-date technologies and code conventions to make development as pleasant as possible. Below are links to reference documentation on the major tools:
- React for constructing the user interface
- Redux for managing application state
- postcss-preset-env gives us cutting-edge CSS features
- Block Element Modifier provides a convention for organizing DOM classes
- Tape provides the test harness
Popcode is distributed under the MIT license. See the attached LICENSE file for all the sordid details.
- Mat Brown (maintainer)
- 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
- Ilona Brand
- 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
- Katie Conneally created the name Popcode
- Logo design, "Pop" concept, and branding elements by the team at Red Peak: Andrew Haug, Aya Kawabata, Jieun Lee, Achu Fones, Iwona Waluk, Stewart Devlin, and Katie Conneally
- User interface designed by Ariel Liu, Ian Jones, Meghan Knoll, and Simon Lesser.
These companies generously offer Popcode access to paid tiers of their excellent services, free of charge:
Feel free to email me at firstname.lastname@example.org if you have any questions.
You can find our Slack team, including our #dev channel, here.