rookeries/docs/devnotes.md

78 lines
3.8 KiB
Markdown

# Technical Notes
## Frontend
- [Configuring eslint](https://eslint.org/docs/user-guide/configuring)
- [async/await and synchronous fetch](https://dev.to/johnpaulada/synchronous-fetch-with-asyncawait)
- [Managing Forms in React](https://reactjs.org/docs/forms.html)
### MobX
- [MobX documentation](https://mobx.js.org/index.html)
- [MobX vs Redux](https://www.sitepoint.com/redux-vs-mobx-which-is-best/)
- [mobx-observer for preact components](https://github.com/capaj/mobx-observer)
- [mobx example](https://github.com/rota-rossi/todo_mobx/tree/with_mobx)
### Code Mirror
- [CodeMirror manual docs](https://codemirror.net/doc/manual.html)
- [Use react-codemirror2 to wrap CodeMirror](https://github.com/scniro/react-codemirror2)
### Grid + Flexbox Layouts
- [Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox Froggy - Flexbox Training Game](http://flexboxfroggy.com/)
- [A Visual Guide to Flexbox](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)
- [Flexbox and Grids, your layout's best friends](https://aerolab.co/blog/flexbox-grids/)
## 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)
### Libraries
- [react-draggabble-list](https://github.com/StreakYC/react-draggable-list/)
## Backend
### Testing
- Faker - for random test data
- [Generate Fake Data for Python Unit Tests](https://semaphoreci.com/community/tutorials/generating-fake-data-for-python-unit-tests-with-faker)
- [Faker documentation](https://faker.readthedocs.io/en/latest/index.html)
- [Visually Debugging UI Tests using VNC](https://github.com/SeleniumHQ/docker-selenium#debugging)
### 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)