From 876fccbbde53e27b3fb820808d2c336ca71aa7e1 Mon Sep 17 00:00:00 2001 From: Jakob Odersky Date: Fri, 14 Sep 2018 17:59:21 -0700 Subject: Make this repo a standalone website These changes add the ability to generate a full website from individual style guides. The website can be viewed [here](drivergroup.github.io/best-practices). Also included, are the following additions: - Improve recommendations for Scala. - Add more recommendations for Git. - Add recommendations for Shell Script. --- readme.md | 119 -------------------------------------------------------------- 1 file changed, 119 deletions(-) delete mode 100644 readme.md (limited to 'readme.md') diff --git a/readme.md b/readme.md deleted file mode 100644 index 1e2bf98..0000000 --- a/readme.md +++ /dev/null @@ -1,119 +0,0 @@ -# Best Practices - -Make your code ๐Ÿ’ฏ - A collection of best practices for software - -Learn more about how Driver is helping cancer patints find hope [here](https://driver.xyz) - -## ๐Ÿ™ GitHub ๐Ÿ™ - -* Branch off `master` and complete your feature. -* Pull request `master` and tag relevant people for review. - -## โ˜•๏ธ JavaScript โ˜•๏ธ - -* Type with flow -* Style with [prettier](https://prettier.io/) ([see section below](#prettier)) -* Lint with eslint and use `eslint:recommended` at a minimum -* Test with [jest](https://facebook.github.io/jest/) and enzyme - -* 2 spaces (instead of tabs) -* Promises (not callbacks) -* No [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) -* No [mobx](https://mobx.js.org/) -* Place tests alongside the file(s) it tests (not in a separate directory) -* End test files with `.test.js` - -### โš›๏ธ React/Redux โš›๏ธ - -* Lint with [`tslint-react`](https://github.com/palantir/tslint-react) or eslint's [`plugin:react/recommended`](https://github.com/yannickcr/eslint-plugin-react) at a minimum. -* No unnecessary and empty `
`โ€™s -* If `this.props.` is used more than once, dereference it at the top of `render`. -* Extract variables used in `render()` to the top of `render()` -* API calls should lie in a testable file outside of components. - -* Components should not wait for promises to resolve, instead listen on props via reduxโ€™ `mapStateToProps()`. -* Declare and export components in separate places (otherwise the web inspector cannot name components properly) - -### Flowtype - -* Any types used in more than one file should be placed in `src/types.js` -* Add flow linting via [eslint-plugin-flowtype](https://github.com/gajus/eslint-plugin-flowtype) -* Disallow "`any`" with [eslint no-weak-types](https://github.com/gajus/eslint-plugin-flowtype#no-weak-types) (use "`Obect`" and "`Function`" to cover complicated use-cases) - -* In components which use `mapStateToProps`, separate `OwnProps` from `ConnectedProps` into separate types. Join them with `type Props = OwnProps & ConnectedProps`. In addition, if using `mapDispatchToProps`, create a type `DispatchProps` and join that with `Props`. - -### ๐“ฃ๐“ข TypeScript ๐“ฃ๐“ข - -* Lint with [`tslint:recommended`](https://github.com/palantir/tslint) at a minimum. -* No implicit any (type everything thatโ€™s not inferable) -* Any variable declared without an initial value should be typed - -### Prettier - -Add the following to `package.json`: - -```json - "prettier": { - "overrides": [ - { - "files": ["*.js", "*.scss", "*.css", "*.pcss"], - "options": { - "singleQuote": true, - "trailingComma": "all" - } - } - ] - } -``` - -The following information about prettier is better described on the prettier documentation [here](https://prettier.io/docs/en/precommit.html#option-1-lint-staged-https-githubcom-okonet-lint-staged). -Use `lint-staged` to auto-call prettier in a `precommit` "`script`": - -```json - "lint-staged": { - "src/**/*.scss": ["prettier --parser scss --write", "git add"], - "src/**/*.{js,css}": ["prettier --parser flow --write", "git add"], - "nightwatch/**/*.js": ["prettier --write", "git add"] - } -``` - -## ๐Ÿ’… CSS ๐Ÿ’… - -* Prefer Flexbox -* Classes should describe elements and not be generic (`Bigbox` -> `FAQContainer`) -* Mobile: <= 620px -* Tablet: 620px - 1024px -* Desktop: > 1024px - -## HTML - -* Use svg's over all other image formats when possible. -* All `` tags should have `โ€œaltโ€` text. -* Only use tables for tabular data (not for layout) -* Make use of html5 elements like `
`, `