#p5.js Web Editor This project is currently in the early stages of development! It will definitely be announced when it is in alpha/beta/etc. ##Development Installation 1. Clone this repostory and cd into it 2. `$ npm install` 3. Install MongoDB and make sure it is running 4. Create a file called `.env` in the root of this directory that looks like ``` MONGO_URL=mongodb://localhost:27017/p5js-web-editor PORT=8000 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production AWS_ACCESS_KEY= AWS_SECRET_KEY= S3_BUCKET= GITHUB_ID= GITHUB_SECRET= ``` Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I will send you my AWS credentials. 5. `$ npm start` 6. Navigate to [http://localhost:8000](http://localhost:8000) in your browser 7. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). 8. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w` ##Production Installation 1. Clone this repostory and `cd` into it 2. `$ npm install` 3. Install MongoDB and make sure it is running 4. Create a file called `.env` in the root of this directory that looks like ``` MONGO_URL=mongodb://localhost:27017/p5js-web-editor PORT=8000 SESSION_SECRET=make_this_a_long-random_string_like_maybe_126_characters_long AWS_ACCESS_KEY= AWS_SECRET_KEY= S3_BUCKET= GITHUB_ID= GITHUB_SECRET= ``` Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I will send you my AWS credentials. 5. `$ npm run build` 6. `$ npm run start:prod` ###For Production Setup with PM2 1. `$ npm install -g pm2` 2. `$ pm2 start ecosystem.json` ##Accessibility Guidelines The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues. **Code Structure** * Screen Readers are an assistive technology for vision loss which helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body) * All buttons/links/windows need to be accessible by the keyboard ( By tabbing, pressing space etc.) * In cases where tags are not screen reader friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/Editor.js#L249) * When opening a new window or pop up window, ensure the keyboard focus also moves to the new window. [code example](https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/components/NewFileForm.js#L10) **Labeling** * When creating button icons, images, or something without text (this does not include an HTML5 `