peddybeats / hands-down

Slow the spread of COVID-19 by discouraging people from touching their face
6 stars 1 forks source link

Hands Down

Master Build

Help slow the spread of COVID-19 by discouraging people from touching their face while sitting in front of a computer.

Check it out here!

Design

We break down the problem of inferring whether the subject is touching their face into 2 parts:

Documentation

Data Collection

One of the ways you can help the project is by collecting data to train our model. Note that we don't collect any personally identifiable data (like images); only the key points are collected.

Development

Clone the repo and run:

  1. npm install

  2. npm start or npm run dev (like npm start but the server automatically restarts after any HTML/CSS/JS files are changed)

Then app should be serving at localhost:1234.

Pull Requests

Make sure you have branched off of the latest version of master. Keep commits short and PRs small for a short review process, and install Tidy if you don't already have it on your system. Get HTML-Tidy

There is a pre-commit hook that will check for good code style, and fail commits with an error. Run npm run lint to find out more.

Please check for Markdown linting issues if you're updating the README.md or any Markdown.

Performance Metrics & Insights

We use Lighthouse for metrics and analysis.

Local testing

If you're locally testing the app and want to see how much the metrics change based on your changes, you should do the following:

  1. Run the app on a separate (private) browser window (before applying your changes).
  2. Launch Lighthouse (set on Desktop) by opening the DevTools (CTRL/CMD+SHIFT+I) then going on "Audits" (with all categories enabled) then click Generate report.
  3. Take note of the result (you can also save it as HTML or JSON by clicking on ).
  4. Apply your changes.
  5. Reload the page (if needed).
  6. Do step 2 and 3.

Note: you can run the app in your regular browser session, but it's recommended to open a separate browser window with as few extensions as possible (since those can affect the performance score).

CI

The CI will test several metrics which are: performance, accessibility, best practices, SEO and PWA. Each score (apart from the PWA ones) are percentage.

What are each metrics measuring?

Performance

Accessibility

Best Practices

Search Engine Optimization (SEO)

Progressive Web App (PWA)

If you want to export the results of the CI, you should do the following:

  1. Click on the "Details" link beside the "Lighthouse / static-dist-dir (pull_request)" PR check.
  2. Click on the "static-dist-dir" check below "Lighthouse".
  3. You'll then see an "Artifacts (1)" button on the top right of the check window.
  4. Click that button then click on the "lighthouse-results" link.