rookeries/docs/devnotes.md

Technical Notes

Frontend

• Configuring eslint
• async/await and synchronous fetch
• Managing Forms in React

MobX

• MobX documentation
• MobX vs Redux
• mobx-observer for preact components
• mobx example

Code Mirror

• CodeMirror manual docs
• Use react-codemirror2 to wrap CodeMirror

Grid + Flexbox Layouts

• Complete Guide to Flexbox
• Flexbox Froggy - Flexbox Training Game
• A Visual Guide to Flexbox
• Flexbox and Grids, your layout's best friends

Preact + Bootstrap

• reactstrap for bootstrap components
• fix for modals
• preact-transition-group as drop-in replacement for react-transition-group
• Bootstrap 4 documentation

Preact

• using preact for a smaller setup that is compatible with React.
• importing preact into modules
• replacing react with preact
  • using preact-compat to avoid migrating all of React code to preact.
  • official guide of switching preact from react
• server side rendering in preact
• preact-transition-group to replace react CSS transition.

Testing

• Test Preact JSX using preact-jsx-chai
• Rewire components using the rewire plugin to allow for stubbing.

webpack

• use `process.env.MY_FLAG' using webpack's DefinePlugin to pass in envs.
  • this is useful when dealing with separating server-only and client-only code.
• use proxy to connect to full API server while using webpack-dev-server
• why we moved away from LESS to CSS modules after converting to webpack
• example for compiling fontawesome using webpack

Libraries

• react-draggabble-list

Backend

Testing

• Faker - for random test data
  • Generate Fake Data for Python Unit Tests
  • Faker documentation
• Visually Debugging UI Tests using VNC

CouchDB

• CouchDB 2.1.0 docs
• Docker Image for CouchDB
• Exporting and Importing a DB in CouchDB