Skip to content
Merged
6 changes: 3 additions & 3 deletions developer_docs/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
## Accessibility Guidelines

Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.
Here is a guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/processing/p5.accessibility) library that makes p5.js sketches accessible to screen readers.

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)
* Screen Readers are an assistive technology for vision loss that 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/develop/client/modules/IDE/components/Editor.jsx#L249)
* 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/develop/client/modules/IDE/components/Editor.jsx#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/develop/client/modules/IDE/components/NewFileForm.jsx#L16)

**Labeling**
Expand Down
4 changes: 2 additions & 2 deletions developer_docs/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ WIP.

These are the steps that happen when you deploy the application.

1. Push to `develop` branch, or merge in a pull request to the `develop` branch.
1. Push to the `develop` branch, or merge in a pull request to the `develop` branch.
2. This triggers a build on [Travis CI](https://travis-ci.org/processing/p5.js-web-editor).
3. Travis CI builds a (development) Docker image of the whole application.
4. Travis CI runs some tests, which in this case, is just `npm run lint`. This could be updated in the future to include more extensive tests. If the tests fail, the build stops here.
Expand Down Expand Up @@ -47,7 +47,7 @@ If you are interested in hosting and deploying your own p5.js Web Editor instanc

1. Sign up for a free account at: [Heroku](https://www.heroku.com/)
2. Click here: [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/processing/p5.js-web-editor/tree/develop)
3. Enter a unique *App name*, this will become part of the url (i.e. https://app-name.herokuapp.com/)
3. Enter a unique *App name*, this will become part of the URL (i.e. https://app-name.herokuapp.com/)
4. Update any configuration variables, or accept the defaults for a quick evaluation (they can be changed later to enable full functionality)
5. Click on the "Deploy app" button
6. When complete, click on the "View app" button
4 changes: 2 additions & 2 deletions developer_docs/development.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Follow the [installation guide](./installation.md).
As a person contributing code but not creating production releases (this is most people!), here's what you need to know:
* The default branch is `develop`. All pull requests should be made to this branch. It should be stable, and all commits are visible at a staging server.
* When working on a bug or feature, you should branch from the `develop` branch. When you're done, you should open a pull request from your feature branch to `develop`.
* The `release` branch is the live production branch, and is the code deployed to editor.p5js.org. Changes to this branch should be made carefully, and will be done using git tags.
* The `release` branch is the live production branch and is the code deployed to editor.p5js.org. Changes to this branch should be made carefully and will be done using git tags.
* Emergency hotfix changes should be branched from `release` and merged via a pull request to `release`. After a PR is merged, then the commits can be merged to `develop`.

See the [release guide](./release.md) for information about creating a release.
Expand Down Expand Up @@ -68,7 +68,7 @@ Structure your commit message like this:
* Write the summary line and description of what you have done in the imperative mode, that is as if you were commanding someone. Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed".
* Link the GitHub issue you are working on in the summary line in brackets, e.g. [#123]
* Always leave the second line blank.
* Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
* Be as descriptive as possible in the description. It helps to reason about the intention of commits and gives more context about why changes happened.
* If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.
* Note that you can connect multiple issues to a commit, if necessary: `[#123][#456] Add Button component`

Expand Down
8 changes: 4 additions & 4 deletions developer_docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ _Note_: The installation steps assume you are using a Unix-like shell. If you ar
* For Mac OSX with [homebrew](http://brew.sh/): `brew tap mongodb/brew` then `brew install mongodb-community` and finally start the server with `brew services start mongodb-community` or you can visit the installation guide here [Installation Guide For MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
* For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
7. `$ cp .env.example .env`
8. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
8. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
9. Run `$ npm run fetch-examples` to download the example sketches into a user called 'p5'. Note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
10. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).
11. `$ npm start`
Expand All @@ -47,7 +47,7 @@ Note that this takes up a significant amount of space on your machine. Make sure
2. Clone this repository and cd into it
3. `$ docker-compose -f docker-compose-development.yml build`
4. `$ cp .env.example .env`
5. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
5. (Optional) Update `.env` with necessary keys to enable certain app behaviours, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
6. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` - note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
7. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).

Expand All @@ -66,12 +66,12 @@ If you don't have the full server environment running, you can launch a one-off

## S3 Bucket Configuration

Note that this is optional, unless you are working on the part of the application that allows a user to upload images, videos, etc. Please refer to the following [gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) to set up an S3 bucket to be used with this project.
Note that this is optional unless you are working on the part of the application that allows a user to upload images, videos, etc. Please refer to the following [gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) to set up an S3 bucket to be used with this project.

If your S3 bucket is in the US East (N Virginia) region (us-east-1), you'll
need to set a custom URL base for it, because it does not follow the standard
naming pattern as the rest of the regions. Instead, add the following to your
environment/.env file, changing `BUCKET_NAME` to your bucket name. This is necessary because this override is currently treated as the full path to the bucket rather than as a proper base url:
environment/.env file, changing `BUCKET_NAME` to your bucket name. This is necessary because this override is currently treated as the full path to the bucket rather than as a proper base URL:
`S3_BUCKET_URL_BASE=https://s3.amazonaws.com/{BUCKET_NAME}/`

If you've configured your S3 bucket and DNS records to use a custom domain
Expand Down
4 changes: 2 additions & 2 deletions developer_docs/preparing_a_pull_request.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Pull-requests are easier when your code is up to date! You can use git rebase to


### Find out about changes
Make sure you're tracking upstream p5.js repository.
Make sure you're tracking the upstream p5.js repository.

git remote show upstream

Expand Down Expand Up @@ -43,7 +43,7 @@ Then ask git about the latest changes.
## CONFLICTS
You may have some conflicts! It's okay. Feel free to ask for help. If merging with the latest upstream `develop` branch causes conflicts, you can always make a pull request with the upstream repository, which makes the merge conflicts public.

## And finally, for great glory
## And finally, for the great glory
git push --set-upstream origin your-branch-name-backup

Here's a good reference on rebasing, in case you're intensely curious about the technical details. https://www.atlassian.com/git/tutorials/merging-vs-rebasing
6 changes: 3 additions & 3 deletions developer_docs/public_api.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This API provides a way to programmatically import data into the p5.js Web Edito

# Authentication

Access to the API is available via a Personal Access Token, linked to an existing editor user account. Tokens can be created and deleted via logged-in user’s Settings page.
Access to the API is available via a Personal Access Token, linked to an existing editor user account. Tokens can be created and deleted via the logged-in user’s Settings page.

When contacting the API, the username and token must be sent with every request using basic auth.

Expand Down Expand Up @@ -139,7 +139,7 @@ No body.

Create a new sketch.

A sketch must contain at least one file with the `.html` extension. If none if provided in the payload, a default `index.html` and linked `style.css` file will be created automatically.
A sketch must contain at least one file with the `.html` extension. If none is provided in the payload, a default `index.html` and linked `style.css` file will be created automatically.

### Request format
See `Sketch` in Models above.
Expand Down Expand Up @@ -199,7 +199,7 @@ See `Sketch` in Models above.

## `DELETE /:user/sketches/:id`

Delete a sketch and all it’s associated files.
Delete a sketch and all its associated files.

### Request format
No body
Expand Down
10 changes: 5 additions & 5 deletions developer_docs/public_api_proposed.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Proposed Public API extensions

This describes proposed extensions to the Public API. None of these extensions are confirmed, but are recorded here for reference and discussion.
This describes proposed extensions to the Public API. None of these extensions are confirmed, but they are recorded here for reference and discussion.

Refer to [Public API](./public_api.md) for the current version of the API.

# Authentication

- Support for sending tokens can via the `Authorization: Bearer {your_access_token}` HTTP header instead of just Basic Auth
- Support for sending tokens can be via the `Authorization: Bearer {your_access_token}` HTTP header instead of just Basic Auth

# API Access

Expand Down Expand Up @@ -154,15 +154,15 @@ Returns file contents.

## `PATCH /:user/sketches/:id/files/:path`

Update the name or contents a file or directory.
Update the name or contents of a file or directory.

### Request format
See `File` and `Directory` above.

### Response format
No body.

### Example: Change file name
### Example: Change the file name

PATCH /p5/sketches/Ckhf0APpg/files/assets/something.js

Expand Down Expand Up @@ -206,7 +206,7 @@ Files are added to the directory, in addition to what is there.

## `DELETE /:user/:sketches/files/:path`

Delete a file/directory, and it’s contents.
Delete a file/directory, and its contents.

### Request format
No body.
Expand Down
Loading