aboutsummaryrefslogtreecommitdiff
path: root/readme.md
diff options
context:
space:
mode:
authorDawson Botsford <dawsonbotsford@gmail.com>2017-09-20 15:09:54 -0700
committerDawson Botsford <DawsonBotsford@gmail.com>2017-09-20 15:54:37 -0700
commitd44e65eace24a28f47706b8f203b8ce44d622f74 (patch)
treefd798d35cc35e0fb977a694d82c9d2f0a2dfecad /readme.md
downloadbest-practices-d44e65eace24a28f47706b8f203b8ce44d622f74.tar.gz
best-practices-d44e65eace24a28f47706b8f203b8ce44d622f74.tar.bz2
best-practices-d44e65eace24a28f47706b8f203b8ce44d622f74.zip
๐ŸŽ‰ init
Diffstat (limited to 'readme.md')
-rw-r--r--readme.md55
1 files changed, 55 insertions, 0 deletions
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..5b6912f
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,55 @@
+# Best Practices
+
+Make your code ๐Ÿ’ฏ - A collection of best practices for software
+
+## โ˜•๏ธ JavaScript โ˜•๏ธ
+
+* 2 spaces (instead of tabs)
+* Lint with `eslint:recommended` at a minimum
+* Promises (not callbacks)
+
+### โš›๏ธ 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 `<div>`โ€™s
+* If `this.props.<variable name>` 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)
+
+### ๐“ฃ๐“ข 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 (`let patientId;`)
+* In components which use `mapStateToProps`, separate `ownProps` from `connectedProps` into separate interfaces
+
+## ๐Ÿ’… CSS ๐Ÿ’…
+
+* Prefer Flexbox
+* Classes should describe elements and not be generic (`Bigbox` -> `FAQContainer`)
+* Mobile: <= 620px
+* Tablet: 620px - 1024px
+* Desktop: > 1024px
+
+## HTML
+
+* Use `<button>` tags over `<a>` tags for actions.
+* Use svg's over all other image formats when possible.
+* All `<img>` tags should have `โ€œaltโ€` text.
+* Only use tables for tabular data (not for layout)
+* Make use of html5 elements like `<header>`, `<footer>`, `<nav>`, `<section>`, etc.
+
+## Npm
+
+* Support the following `script`'s in your root `package.json`:
+
+1. `โ€œwatchโ€`: Starts the dev server
+2. `โ€œbuildโ€`: Builds static assets (if they exist)
+4. `โ€œtestโ€`: Runs all tests (linting first, then unit tests)
+
+## ๐Ÿ•ธ Browsers ๐Ÿ•ธ
+
+* Avoid supporting versions of Internet Explorer before IE11.