Code Standards

Git

• Ensure you're commiting changes with the Jira Task ID in your commit msg. You can use the prepare-commit-msg git hook to do this automatically by either:
  • Running the pnpm Script:
    • $ pnpm run init:githooks
  • Manually copying the file:
    • Copy the prepare-commit-msg file into your repo's .git/hooks/ folder
    • Ensure the file has execute-permissions: $ chmod +x .git/hooks/prepare-commit-msg

Packages

• The generator-quickstart/app/templates/ Directory structure should mirror the Miva server. The themes folder will sit relative to templates folder but should NOT be uploaded to the server.

PageSpeed

Goals:

• TTFB <= 500ms
• TTI <= 3sec
• PageSpeed score > 90

Code Standards

• Adhere to linters

Browser Support

• Babel/PostCSS

  $ npx browserslist ">0.25%, not android < 5, not IE 11"
  

• Manual QA List

  $ npx browserslist "cover 90% in US and last 1 version, not IE 11"
  

Testing

• Manual Tests
  • Per Issue & Minor Release
    • Personal Unit Tests
    • Pod/Peer/Team Unit Tests
    • Automated Tests (coming soon)
  • Per Major Release
    • Integration tests
    • Cross browser tests
    • QA Team QA

Accessibility

• Passing Axe and Lighthouse accessibility audits

Developer Workflow

Uses our implementation of GitFlow

JavaScript Strategies

• JS Modules
  • ES6 Modules
• jQuery/JS-Library Usage
  • Prefer Vanilla JS; except when it makes sense to leverage a library.
• AJAX
  • Lean on vanilla JS (fetch) as much as we can, especially for the core files.
• DOM Selection
  • Core framework JS files will use vanilla JS selectors to eliminate the need for a dependency in the core framework.
  • Use "js-" prefixed selectors & vanilla JS (ex. document.getElementsByClassName('js-foobar')) as opposed to jQuery Selectors ($('.js-foobar')) and Hook selectors ($.hook('foobar')/<span data-hook="foobar">)
  • Also instead of just using document.getElementsByClassName, consider using a more-specific document.getElementById('js-your-container').getElementsByClassName('js-your-elements') to increase the performance.

CSS Strategies

• BEMIT
• BEMIT Cheatsheet
• Grid Systems

Further Reading

• CSS Architecture For Design Systems
• CSS Guidelines
• SASS Guidelines
• sass-lang.com Code Styleguide
• Quick Tip Name Your Sass Variables Modularly

Resource Group Usage

• Primarily only used for window.mivaJS and the Google Tag Manager window.dataLayer

Naming Conventions

The follow examples illustrate how "Lorem's Ipsum Dalor for ACME!" would be output in each scenario.

Pascal Case

Example: LoremsIpsumDalorForAcme

• JavaScript class files

Camel Case

Example: loremsIpsumDalorForAcme

• JavaScript files, functions, & variable names.

Kebab Case

Example: lorems-ipsum-dalor-for-acme

• Markdown Files
• CSS classes, file-names
• npm packages
• Directories
• Repos

Snake Case

Example: lorems_ipsum_dalor_for_acme

• Miva Variables
• HTML Input names (ex. <input name="foo_bar">)
• SASS variables names

Constant (Snake Case & All Caps)

Example: LOREMS_IPSUM_DALOR_FOR_ACME

• Constants

BEMIT

• CSS classes