|
@@ -4,7 +4,7 @@ type: docs
|
|
order: 4
|
|
order: 4
|
|
---
|
|
---
|
|
|
|
|
|
-## Uppy Development
|
|
|
|
|
|
+## Uppy development
|
|
|
|
|
|
Fork the repository into your own account first. See the [GitHub Help](https://help.github.com/articles/fork-a-repo/) article for instructions.
|
|
Fork the repository into your own account first. See the [GitHub Help](https://help.github.com/articles/fork-a-repo/) article for instructions.
|
|
|
|
|
|
@@ -16,7 +16,7 @@ cd uppy
|
|
npm install
|
|
npm install
|
|
```
|
|
```
|
|
|
|
|
|
-Our website’s examples section is also our playground, please read [Local Previews](#Local-Previews) section to get up and running.
|
|
|
|
|
|
+Our website’s examples section is also our playground, please read the [Local Previews](#Local-Previews) section to get up and running.
|
|
|
|
|
|
## Tests
|
|
## Tests
|
|
|
|
|
|
@@ -24,7 +24,7 @@ Unit tests are using Jest and can be run with:
|
|
|
|
|
|
`npm run test:unit`
|
|
`npm run test:unit`
|
|
|
|
|
|
-For acceptance (or end to end) tests, we use [Webdriverio](http://webdriver.io). For it to run locally, you need to install selenium standalone server, just follow [the guide](http://webdriver.io/guide.html) to do so. You can also install Selenium Standalone server from NPM:
|
|
|
|
|
|
+For acceptance (or end-to-end) tests, we use [Webdriverio](http://webdriver.io). For it to run locally, you need to install a Selenium standalone server. Just follow [the guide](http://webdriver.io/guide.html) to do so. You can also install a Selenium standalone server from NPM:
|
|
|
|
|
|
```bash
|
|
```bash
|
|
npm install selenium-standalone -g
|
|
npm install selenium-standalone -g
|
|
@@ -35,30 +35,31 @@ And then launch it:
|
|
|
|
|
|
`selenium-standalone start`
|
|
`selenium-standalone start`
|
|
|
|
|
|
-After you’ve installed and launched the selenium standalone server, run:
|
|
|
|
|
|
+After you have installed and launched the selenium standalone server, run:
|
|
|
|
|
|
`npm run test:acceptance:local`
|
|
`npm run test:acceptance:local`
|
|
|
|
|
|
These tests are also run automatically on Travis builds with [SauceLabs](https://saucelabs.com/) cloud service using different OSes.
|
|
These tests are also run automatically on Travis builds with [SauceLabs](https://saucelabs.com/) cloud service using different OSes.
|
|
|
|
|
|
-## Website Development
|
|
|
|
|
|
+## Website development
|
|
|
|
|
|
-We keep the [uppy.io](http://uppy.io) website in `./website` so it’s easy to keep docs & code in sync as we’re still iterating at high velocity.
|
|
|
|
|
|
+We keep the [uppy.io](http://uppy.io) website in `./website`, so it’s easy to keep docs and code in sync as we are still iterating at high velocity.
|
|
|
|
|
|
The site is built with [Hexo](http://hexo.io/), and Travis automatically deploys this onto GitHub Pages (it overwrites the `gh-pages` branch with Hexo's build at every change to `master`). The content is written in Markdown and located in `./website/src`. Feel free to fork & hack!
|
|
The site is built with [Hexo](http://hexo.io/), and Travis automatically deploys this onto GitHub Pages (it overwrites the `gh-pages` branch with Hexo's build at every change to `master`). The content is written in Markdown and located in `./website/src`. Feel free to fork & hack!
|
|
|
|
|
|
-Even though bundled in this repo, the website is regarded as a separate project. So it has its own `package.json` and we aim to keep the surface where the two projects interface as small as possible. `./website/update.js` is called during website builds to inject the Uppy knowledge into the site.
|
|
|
|
|
|
+Even though bundled in this repo, the website is regarded as a separate project. As such, it has its own `package.json` and we aim to keep the surface where the two projects interface as small as possible. `./website/update.js` is called during website builds to inject the Uppy knowledge into the site.
|
|
|
|
|
|
-### Local Previews
|
|
|
|
|
|
+### Local previews
|
|
|
|
|
|
-It's recommended to exclude `./website/public/` from your editor if you want efficient searches.
|
|
|
|
|
|
+It is recommended to exclude `./website/public/` from your editor if you want efficient searches.
|
|
|
|
|
|
To install the required node modules, type:
|
|
To install the required node modules, type:
|
|
|
|
+
|
|
```bash
|
|
```bash
|
|
npm install && cd website && npm install && cd ..
|
|
npm install && cd website && npm install && cd ..
|
|
```
|
|
```
|
|
|
|
|
|
-For local previews on http://127.0.0.1:4000 type:
|
|
|
|
|
|
+For local previews on http://127.0.0.1:4000, type:
|
|
|
|
|
|
```bash
|
|
```bash
|
|
npm start
|
|
npm start
|
|
@@ -66,7 +67,7 @@ npm start
|
|
|
|
|
|
This will watch the website, as well as Uppy, as the examples, and rebuild everything and refresh your browser as files change.
|
|
This will watch the website, as well as Uppy, as the examples, and rebuild everything and refresh your browser as files change.
|
|
|
|
|
|
-Then, to work on e.g. the XHRUpload example, you'd edit the following files:
|
|
|
|
|
|
+Then, to work on, for instance, the XHRUpload example, you would edit the following files:
|
|
|
|
|
|
```bash
|
|
```bash
|
|
atom src/core/Core.js \
|
|
atom src/core/Core.js \
|
|
@@ -75,13 +76,13 @@ atom src/core/Core.js \
|
|
website/src/examples/xhrupload/app.es6
|
|
website/src/examples/xhrupload/app.es6
|
|
```
|
|
```
|
|
|
|
|
|
-And open <http://0.0.0.0:4000/examples/xhrupload/> in your webbrowser.
|
|
|
|
|
|
+And open <http://0.0.0.0:4000/examples/xhrupload/> in your web browser.
|
|
|
|
|
|
-## CSS Guidelines
|
|
|
|
|
|
+## CSS guidelines
|
|
|
|
|
|
-The CSS standards followed in this project closely resemble those from [Medium's CSS Guidelines](https://gist.github.com/fat/a47b882eb5f84293c4ed). If it's not mentioned here, follow their guidelines.
|
|
|
|
|
|
+The CSS standards followed in this project closely resemble those from [Medium's CSS Guidelines](https://gist.github.com/fat/a47b882eb5f84293c4ed). If something is not mentioned here, follow their guidelines.
|
|
|
|
|
|
-### Naming Conventions
|
|
|
|
|
|
+### Naming conventions
|
|
|
|
|
|
This project uses naming conventions adopted from the SUIT CSS framework.
|
|
This project uses naming conventions adopted from the SUIT CSS framework.
|
|
[Read about them here](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
|
|
[Read about them here](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
|
|
@@ -118,7 +119,7 @@ Syntax: [<namespace>-]<ComponentName>[-descendentName][--modifierName]
|
|
|
|
|
|
### SASS
|
|
### SASS
|
|
|
|
|
|
-This project uses SASS, with some limitations on nesting. One-level deep nesting is allowed, but nesting may not extend a selector by using the `&` operator. For example:
|
|
|
|
|
|
+This project uses SASS, with some limitations on nesting. One-level-deep nesting is allowed, but nesting may not extend a selector by using the `&` operator. For example:
|
|
|
|
|
|
```sass
|
|
```sass
|
|
/* BAD */
|
|
/* BAD */
|
|
@@ -138,11 +139,11 @@ This project uses SASS, with some limitations on nesting. One-level deep nestin
|
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
-### Mobile-first Responsive Approach
|
|
|
|
|
|
+### Mobile-first responsive approach
|
|
|
|
|
|
Style to the mobile breakpoint with your selectors, then use `min-width` media queries to add any styles to the tablet or desktop breakpoints.
|
|
Style to the mobile breakpoint with your selectors, then use `min-width` media queries to add any styles to the tablet or desktop breakpoints.
|
|
|
|
|
|
-### Selector, Rule Ordering
|
|
|
|
|
|
+### Selector, rule ordering
|
|
|
|
|
|
- All selectors are sorted alphabetically and by type.
|
|
- All selectors are sorted alphabetically and by type.
|
|
- HTML elements go above classes and IDs in a file.
|
|
- HTML elements go above classes and IDs in a file.
|