Best Practices Frontend/React/CI

README.md

A bunch of best practices/packages/whatever-i-find-convenient that I've gathered from work and people for coding in javascript.

General react

• eslint
• prettier
• eslint-config-sexy
• eslint-config-prettier
• eslint-plugin-prettier
• jest/mocha/chai Unit testing
• react-testing-library
• eslint-plugin-react-hooks
• avoid HOCS as much as possible
• avoid render props as much as possible
• Ramda/Lodash for util
• Use react hooks
• Use react.memo to avoid re rendering

Testing

• Mock side effects

General styling

• Use color and weight instead of size for elements
• Don't go lower than 400 font weight
• Don't use gray text on colored backgrounds by reducing opacity on white text or choosing similar(lighter) background color
• Offset shadows
• Use fewer borders by:
  • Using box shadow
  • Two different background colors
  • Extra spacing
• Use accent borders to add color to a bland design
• Not every button needs a background color
• Line-height and font size are inversely proportional — use a taller line-height for small text and a shorter line-height for large text.
• When using uppercase letters give them more letter spacing
• Space between inputs and labels below should be around half the amount of the input height
• https://fonts.adobe.com/fonts for finding interesting fonts besides google fonts
• Build a color palette
• Try to avoid labels

General CI

• coveralls
• semver
• semantic-release
• travis-deploy-once
• circle-ci

Commit guidelines && Git

• feat: A new feature

• fix: A bug fix

• docs: Documentation only changes

• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)

• refactor: A code change that neither fixes a bug nor adds a feature

• perf: A code change that improves performance

• test: Adding missing or correcting existing tests

• chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

• Pull requests should not contain more than 400 lines of human-written code

• /.github/PULL_REQUEST_TEMPLATE.md

• /.github/ISSUE_TEMPLATE.md

• /CODEOWNERS

• /CONTRIBUTING.md

Gitignore

• Project build output e.g. "/dist/", "/build/"
• Testing and build tool output e.g. "/coverage/", "/.nyc_output"
• Vendor directories and dependencies handled by a package manager, e.g. "/node_modules/"
• Log files Caches It SHOULD NOT contain:
• OS-specific files, e.g. ".DS_Store"
• Personal configuration and Editor-specific files, e.g. "/*.workspace"