Development Notes

setup

As with most node/javascript projects, you'll need to run npm install after cloning this repository (or your fork) to download it's dependencies.

workflow

All the source code can be found in src. As mentioned before the index.html page is a working example and can be used to test changes you make to the source code. The build folder contains the compiled source code (which is used by index.html) and can be built by running npm run build. The build process will do the following:

1. First it'll run npm run lint to make sure all the source code conforms to the JavaScript Standard Style, if it does not then it will throw errors in the console letting you know what line is off (I recommend installing the the JS Standard plugin in your code editor so you spot lint errors while you code rather than having to bounce back and fourth between your editor and console everytime you build)

2. Then it'll run npm run compile-css which takes our src/css/main.css (which contains our custom syntax highlighting themes) file as well as the codemirror CSS files and bundles them up into a js module src/css/css.js which is used by the src/main.js to inject the relevant CSS into the page.

3. Then it'll run browserify to bundle all the source code into build/netitor.js as well as terser to create the minified build build/netitor.min.js

To make things easier, you can alternatively run npm run watch which will listen for any changes to any js files in src and auto-run the build process for you everytime you make changes. NOTE: this only watches chaanges to js files, so any changes to js/css/main.css requires a manually running npm run build or npm run compile-css directly.

Code Base overview

The vast majority of the code is in src/main.js you'll notice that netitor makes heavy use of a library called CodeMirror (which is used by the vast majority of web based code editors we've inspected), you can check out their documentation here. Other files/folders to be aware of are:

• src/css/: this directory contains all of the editor's styles (including it's various syntax highlight themes)
• src/edu-data/: this directory contains all the logic and data used to explain code in the editor (the info contained in the 'edu-info' event object returned by the event listener every time you double clicking on a piece of code). The .json files in this folder are automatically generated by running the npm run eduscraper (see eduscraper for more info), with the exception of the .json files inside edu-data/custom/ (which are written by hand)
• src/hinters/: this directory contains all the logic used to create the auto-complete code-hinting lists
• src/linters/: this directory contains all the logic used to create the friendly error messages the 'lint-error' event object returned by the event listener every time the netitor spots an issue in the code.
• src/prependProxyURL.js this handles applying the proxy URLs to necessary paths when the addCustomRoot() method is used.
• index.html: this is the live demo page
• theme/ this is the live theme creator app

NPM Scripts

• npm run build: this is the script that creates (compiles) the library files itself (and places them in the build/ directory).
• npm run watch: runs a watch script which automatically runs the build script anytime changes to JavaScript files are made.
• npm run lint: we're using Standard.js as our code style, so it's best to run the linter to check and make sure everything is up to par before submitting any PRs (NOTE: this runs automatically when you run the build script).
• npm run compile-css: this script compiles any chagnes made to the .js files used to create the .css files (NOTE: this runs automatically when you run the build script).
• npm run eduscraper: runs the eduscraper and updates all the edu data in src/edu-data (see note below)
• npm run update-eduscraper: updates the eduscraper (see note below)
• npm run educustom: adds custom (hand written) edu data to the .json files generated by the eduscraper (see note below)

a note on the eduscraper

Anything having to do with edu-data is arguably the most precarious part of the process. That said, it's not very often that this data will need to be updated and so it's not super likely you will need to rerun the eduscraper (as these data files have already been created and included in this repo). That said, here some important things to know if/when we do end up needing to rerun this.

Most of the educational info/data stored in the src/edu-data/*.json files are automatically generated by the eduscraper. The npm script npm run eduscraper is set to update ALL of the data by default (it's an alias for eduscraper all src/edu-data), but there will be times we only want to update part of the data, as documented in the eduscraper's README this can be edited to update only specific parts of the edu-data like eduscraper attributes src/edu-data or eduscraper colors src/edu-data for example.

Because of the nature of the Web (it's always changing) scrapers constantly have to be updated, the eduscraper is no exception. For this reason there's a script npm run update-eduscraper which will update this dependency and should be run anytime the eduscraper repo has been updated.