Popcode is a simple HTML/CSS/JavaScript editing environment for use in the classroom. It's a lot like JSBin, JSFiddle, or CodePen, but it focuses on giving specific, immediate, human-friendly feedback when the code contains errors.
Popcode is the official editing environment for the Code Nation Intro to Web Development program in the 2019–2020 school year.
You can try out Popcode at
https://popcode.org
.
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.
Popcode uses React to render views, Redux to manage application state, Ace as the code editor, Webpack to package the client-side application, and Babel to compile modern JavaScript for compatibility with legacy browser versions.
Popcode detects mistakes in student code using slowparse, htmllint, HTML Inspector, Rework CSS, PrettyCSS, stylelint, jshint, and esprima.
Popcode is an all-volunteer project and contributions are welcome. I encourage first-time contributors to start with the Getting Started guide, which gives a friendly and detailed breakdown of each step toward contributing your first pull request.
If you want to get involved but don’t have a specific idea of how, check the good first issue and help wanted labels. If you already have an idea you’re passionate about, go for it.
Popcode comes with a batteries-included development environment built on
nodeenv
. You will need to have
Python installed; any version 2.7+ will
work. To set up the environment, run:
$ tools/setup.py
This will install node
and yarn
in an isolated environment in the
nodeenv
directory of the project root. It won’t interfere with any
system-wide installation of those tools.
Once setup is complete, to run a development server, run:
$ tools/yarn.py start
This will start a server on http://localhost:3000
To start tests in watch mode, run:
$ tools/yarn.py autotest
Check the "scripts"
section of package.json
for other useful tools.
Popcode comes with a robust custom VS Code configuration, which is
automatically enabled by tools/setup.py
. If you use VS Code, you can:
Show Recommended Extensions
command to easily install extensions
that improve the Popcode developer experiencetask
into the Quick Open bar to autocomplete the task to rundebug
into the Quick Open barPopcode uses tools like Prettier,
ESLint, and
Stylelint
to automatically format code. We recomment setting up editor plugins to
auto-format on save; alternatively, you can run tools/yarn.py lintfix
before
committing to format and autofix lint. Popcode’s official VS Code integration
(with recommended extensions installed) does this out of the box.
There is no requirement that you use the official development environment to
work on Popcode; you’ll mostly just need the right versions of Node and Yarn
installed on your machine (check the "engines"
section of package.json
for the current versions).
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:
Popcode is distributed under the MIT license. See the attached LICENSE file for all the sordid details.
These companies generously offer Popcode access to paid tiers of their excellent services, free of charge:
Feel free to email me at mat.a.brown@gmail.com if you have any questions.
You can find our Slack team, including our #dev channel, here.