# Technical Notes

## Frontend

- **Code Mirror**
    - [CodeMirror manual docs](https://codemirror.net/doc/manual.html)
    - [Use react-codemirror2 to wrap CodeMirror](https://github.com/scniro/react-codemirror2)
- [Configuring eslint](https://eslint.org/docs/user-guide/configuring)
- [async/await and synchronous fetch](https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait)
- [redux integration with react-router](https://reacttraining.com/react-router/web/guides/redux-integration)
- **Flexbox**
    - [Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
    - [Flexbox Froggy - Flexbox Training Game](http://flexboxfroggy.com/)

## Preact + Bootstrap
- [reactstrap for bootstrap components](https://reactstrap.github.io)
- [fix for modals](https://github.com/developit/preact-compat/issues/308#issuecomment-331732422)
- [preact-transition-group as drop-in replacement for react-transition-group](https://github.com/mauron85/preact-transition-group)
- [Bootstrap 4 documentation](https://getbootstrap.com/docs/4.0/)

### Preact
- using [preact](https://github.com/developit/preact) for a smaller setup that 
    is compatible with React.
- [importing preact into modules](https://github.com/developit/preact#import-what-you-need)
- [replacing react with preact](https://blog.gaya.ninja/articles/replacing-react-with-preact/)
    - using [preact-compat](https://www.npmjs.com/package/preact-compat) to 
    avoid migrating all of React code to preact.
    - official guide of [switching preact from react](https://preactjs.com/guide/switching-to-preact)
- [server side rendering in preact](http://thecodebarbarian.com/server-side-rendering-with-preact-and-firebase.html)
- [preact-transition-group](https://github.com/mauron85/preact-transition-group)
to replace react CSS transition.

### Testing
- Test Preact JSX using [preact-jsx-chai](https://github.com/developit/preact-jsx-chai)
- [Rewire components using the `rewire` 
plugin](https://www.npmjs.com/package/babel-plugin-rewire) to allow for stubbing.


### webpack
- use `process.env.MY_FLAG' using 
  [webpack's DefinePlugin to pass in envs](https://webpack.js.org/plugins/define-plugin/#feature-flags).
    - this is useful when dealing with separating server-only and client-only code.
- use [proxy to connect to full API server](https://webpack.js.org/configuration/dev-server/#devserver-proxy) 
while using webpack-dev-server
- why we [moved away from LESS to CSS modules after converting to 
webpack](https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335)
- example for [compiling fontawesome using 
webpack](https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md)


### CouchDB

- [CouchDB 2.1.0 docs](http://docs.couchdb.org/en/2.1.0/index.html)
- [Docker Image for CouchDB](https://github.com/apache/couchdb-docker)
- [Exporting and Importing a DB in CouchDB](http://www.greenacorn-websolutions.com/couchdb/export-import-a-database-with-couchdb.php)
