Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
6 changes: 3 additions & 3 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 All @@ -87,7 +87,7 @@ Structure your commit message like this:

- For common and reusable styles, write OOSCSS (Object-Oriented SCSS) with placeholders and mixins. For organizing styles, follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass.

- We're using [ES6](http://es6-features.org/) and transpiling to ES5 using [Babel](https://babeljs.io/).
- We're using [ES6](http://es6-features.org/) and transpile to ES5 using [Babel](https://babeljs.io/).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think 'transpiling' makes sense here, but could also see this sentence as a whole being rephrased as well!


- For reference to the JavaScript style guide, see the [Airbnb Style Guide](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react).

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
12 changes: 6 additions & 6 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 @@ -116,7 +116,7 @@ List a user’s sketches.
This will not return the files within the sketch, just the sketch metadata.

### Request format
No body.
Nobody.

### Response format
{
Expand All @@ -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,13 +199,13 @@ 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
Nobody

### Response format
No body
Nobody

### Example

Expand Down
24 changes: 12 additions & 12 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 is confirmed but is recorded here for reference and discussion.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the verb "are" is referring to "extensions". Since "extensions" is plural, I think "are" could be kept!


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 All @@ -22,7 +22,7 @@ Refer to [Public API](./public_api.md) for the current version of the API.
Fetch a sketch.

### Request format
No body.
Nobody.

### Response format
Returns `Sketch`.
Expand Down Expand Up @@ -56,7 +56,7 @@ Replace the sketch with an entirely new one, maintaining the same ID. Any existi
See `Sketch` in Models above.

### Response format
No body.
Nobody.

### Example

Expand Down Expand Up @@ -90,7 +90,7 @@ Update the sketch whilst maintaining existing data:
See `Sketch` in Models above.

### Response format
No body.
Nobody.

### Example
Change the name of the sketch
Expand Down Expand Up @@ -131,7 +131,7 @@ Files within a sketch can be individually accessed via their `path` e.g. `data/s
Fetch the contents of a file.

### Request format
No body.
Nobody.

### Response format
Returns file contents.
Expand All @@ -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.
Nobody.

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

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

Expand Down Expand Up @@ -206,13 +206,13 @@ 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.
Nobody.

### Response format
No body.
Nobody.

### Example: Delete file

Expand Down
Loading