Popcode is a simple HTML/CSS/JavaScript editing environment for use in the classroom. It's a lot like JSBin or JSFiddle, but with a strong emphasis on novice users.
Popcode is alpha software.
You can try out Popcode at
https://popcode.org.
Try doing something wrong. The main emphasis of this project is giving feedback on code problems that novice users can understand.
- 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.
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 Trello board.
Popcode uses React to render views, Redux to manage application state, Ace as the code editor, Browserify to package the client-side application, and Babel to compile ES2015+JSX into ES5.
Right now, it includes slowparse, htmllint, css, PrettyCSS, and jshint for error checking.
The Ace editor has a built-in system for error checking, but it's really hard to extend, so I've disabled it. Right now the editor just synchronously runs the validations whenever the code changes. It would be reasonably easy to move this into a web worker, although I think a hand-rolled web worker would still be much easier than trying to integrate with Ace's web worker framework.
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
Workspacecomponent. - 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. I don't think there's any way I'm going to make this a viable product on my own. Pull requests are most welcome.
Pretty easy. Just check out the code, then run:
$ npm installThat'll pull down the dependencies. Then run:
$ gulp devThis 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.
Popcode is distributed under the MIT license. See the attached LICENSE file for all the sordid details.
- Mat Brown (maintainer)
- Alejandro AR
- Vaibhav Verma
- Katie Conneally created the name Popcode
Feel free to email me at [email protected] if you have any questions.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent