You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
||1 week ago|
|.github/workflows||1 week ago|
|public||1 month ago|
|src||1 week ago|
|.dockerignore||2 years ago|
|.editorconfig||5 years ago|
|.env.development||7 months ago|
|.env.production||4 months ago|
|.eslintignore||4 years ago|
|.eslintrc.js||5 months ago|
|.gitignore||4 months ago|
|Dockerfile||1 week ago|
|LICENSE||4 years ago|
|README.md||1 year ago|
|config.js.template||2 years ago|
|craco.config.js||4 months ago|
|jest-puppeteer.build.config.js||2 years ago|
|jest-puppeteer.config.js||2 years ago|
|lighthouserc.js||5 months ago|
|motd||2 years ago|
|nginx.conf||4 months ago|
|package.json||1 week ago|
|sentry.properties||6 months ago|
|yarn.lock||1 week ago|
The frontend to the comma connect progressive web app. This a react app using Create React App
- Development (local machine) http://localhost:3000
- Staging (docker)
- packages/images are build by CI, and put on staging branch
- Production (docker) https://connect.comma.ai
- pushed manually
There's a ton of them, but these are worth mentioning because they sort of affect everything.
React- Object oriented components with basic lifecycle callbacks rendered by state and prop changes.
Redux- Sane formal global scope. This is not a replacement for component state, which is the best way to store local component level variables and trigger re-renders. Redux state is for global state that many unrelated components care about. No free-form editing, only specific pre-defined actions. Redux DevTools can be very helpful.
@material-ui- Lots of fully featured highly customizable components for building the UIs with. Theming system with global and per-component overrides of any CSS values.
react-router-redux- the newer one, 5.x.... Mindlessly simple routing with convenient global access due to redux
How things works
The current playback is tracked not by storing the current offset, but instead storing the local time that the player began, the offset it began at, and the playback rate. Any time any of these values change, it rebases them all back to the current time. It means that at any arbitrary moment you can calculate the current offset with...
(Date.now() - state.startTime) * state.playSpeed + state.offset
With this central authority on current offset time, it becomes much easier to have each data source keep themselves in sync instead of trying to manage synchronizing all of them.
- Use best practices
- Write test cases
- Keep files small and clean
- Use branches / pull requests to isolate work. Don't do work that can't be merged quickly, find ways to break it up