Skip to content
An HTML/CSS/JavaScript editor for use in the classroom
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__factories__/clients Completed redux-logic transition for linkGithubIdentity code (#1672) May 18, 2019
__mocks__ Refactor console reducer to use handleActions, test with Jest (#1687) May 18, 2019
config Support Chromium Dec 26, 2017
locales Archive projects (#1485) May 8, 2019
script Use yarn-deduplicate to resolve duplicate package dependencies (#1654) Mar 11, 2019
src Refactor console reducer to use handleActions, test with Jest (#1687) May 18, 2019
templates restructuring the redux state/flow around project export Nov 28, 2017
test Refactor console reducer to use handleActions, test with Jest (#1687) May 18, 2019
.docker-sync-env Set up docker-sync (#1609) Nov 9, 2018
.dockerignore Self-contained Docker installation Sep 21, 2018
.eslintignore Rip out Mocha spec suite May 31, 2017
.eslintrc Completed redux-logic transition for linkGithubIdentity code (#1672) May 18, 2019
.gitattributes Added compatibility for non-MacOS X developers (#208) Oct 16, 2016
.gitignore Local override for Docker configuration Aug 13, 2018
.node-version Upgrade Node to 8.12.0 Sep 19, 2018
.projections.json Use tape-catch instead of regular tape (#1640) Feb 18, 2019
.stylelintrc.json Add stylelint enforcement of BEM pattern Jun 2, 2017
.travis.yml Transition from redux-saga to redux-logic and using Jest to test - Pa… Mar 19, 2019
Dockerfile Back to yarn (#1638) Feb 16, 2019
LICENSE Name change Nov 3, 2015
README.md Back to yarn (#1638) Feb 16, 2019
TEST_PLAN.md Update test plan Sep 4, 2017
babel.config.js Revert "Run all node_modules through babel (#1674)" (#1691) May 23, 2019
bower.json Source jQuery from npm, not bower (#1646) Feb 28, 2019
docker-compose.bind.yml Add a docker-compose override file for bind mounting dependencies (#1623 Dec 13, 2018
docker-compose.sync.yml Set up docker-sync (#1609) Nov 9, 2018
docker-compose.yml Back to yarn (#1638) Feb 16, 2019
gulpfile.js Improve eslint config (#1671) Mar 17, 2019
jest.config.js Refactor console reducer to use handleActions, test with Jest (#1687) May 18, 2019
karma.conf.js Improve eslint config (#1671) Mar 17, 2019
package.json Completed redux-logic transition for linkGithubIdentity code (#1672) May 18, 2019
webpack.config.js Revert "Run all node_modules through babel (#1674)" (#1691) May 23, 2019
yarn.lock Completed redux-logic transition for linkGithubIdentity code (#1672) May 18, 2019

README.md

Popcode

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.

Project status

Build Status Dependency Status License

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 https://popcode.org.

Table of Contents

Features

  • Edit HTML, CSS, and JavaScript in the browser; in-browser preview updates as you type.
  • 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.
  • JavaScript runtime errors are also reported in human-friendly language, with annotations in the source code pointing out the source of the problem.
  • 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.

About validation

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.

Feature roadmap

Check out the Project Board.

Technical details

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 ES2016+JSX into ES5.

Popcode detects code errors using slowparse, htmllint, HTML Inspector, Rework CSS, PrettyCSS, stylelint, jshint, and esprima.

Architecture Overview

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 Workspace component.
  • The Workspace dispatches 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 Workspace receives updated props from the store and propagates them to its descendants.

Contributing

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.

Running locally

Make sure you have a local installation of Node.js and yarn.

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 Mode

By default, Popcode’s JavaScript code is compiled to ES5 to support a wide array of older browsers. This can make it difficult to debug errors, however, as the compiled code in the debugger can look quite different from the original source code.

To improve the situation, you can use debug mode, which configures Babel to compile the JavaScript to target only the latest version of Chrome, which supports most modern ES features. To run in debug mode, start your development server with:

$ 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

Developer Reference

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:

License

Popcode is distributed under the MIT license. See the attached LICENSE file for all the sordid details.

Contributors

Thanks to

These companies generously offer Popcode access to paid tiers of their excellent services, free of charge:

BrowserStack Bugsnag

Contact

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.

You can’t perform that action at this time.