UI Guidelines

& Code Review Process

Everyone on same page

Metric system adoption map

On September 23, 1999 NASA lost the $125 million Mars Climate Orbiter spacecraft after a 286-day journey to Mars. Lockheed Martin, was sending thruster data in English units (pounds) to NASA, while NASA's navigation team was expecting metric units (Newtons).

The best way to write bug free code

Use boilerplates

H5BP

Create React App

Yeoman

"But my manager still wants me to write code"

Use IDE

VS Code

Nuclide

"But i use SublimeText"

Looks Dont matter

editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_size = 4

.editorconfig

Lint Your Code

ESlint | VS Code

{
  "extends": "google",
  "installedESLint": true,
  "rules": {
    "max-len": 0
  },
  "parserOptions": {
    "ecmaVersion": 7
  }
}

.eslintrc.json

StyleLint | VS Code

TSLint | VS Code

{
  "rules": {
    "no-duplicate-variable": true,
    "no-unused-variable": [
      true
    ]
  },
  "rulesDirectory": [
    "node_modules/tslint-eslint-rules/dist/rules"
  ]
}

.tslint.json

Dangal

Match #1

Less vs Scss

Winner

Scss with compass

Match #2

Flux vs Redux

Winner

Redux

Match #3

Mocha vs Jest

Tie

Jest for React
Mocha for rest (for now)

Match #4

ES 5 vs ES 6

Winner

ES 7

Use Validators

Wave  | Chrome 

BS 8878 compliant

or WCAG 2.0 compliant

Fun Fact:

Why is FB logo blue

W3C | Chrome 

< 10 Errors + Warnings

Lighthouse  | Chrome 

90/100

Istanbul

80%

YSlow  | Chrome 

B Grade

webpagetest  | Chrome 

4 A's 

Dareboost

Git to rescue

pre-commit

-   repo: https://github.com/pre-commit/pre-commit-hooks
    sha: 96fb7fa10f2f4c11ed33482a9ad7474251e5e97f
    hooks:
    -   id: trailing-whitespace
    -   id: check-json
    -   id: pretty-format-json
        args:
        - --indent
        - '2'
        - --no-sort-keys
    -   id: check-merge-conflict
    -   id: check-symlinks
    -   id: check-json
-   repo: https://github.com/pre-commit/mirrors-eslint
    sha: 3f5585a65eeec878e779a5630628db158ba3dab1
    hooks:
    -   id: eslint
        additional_dependencies: ['eslint@3.12.2', 'eslint-config-google@0.7.1']

Github Templates

<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->

## Related Issue
<!--- This project only accepts pull requests related to open issues. Provide issue link: -->

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes
<!--- What types of changes does code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
- [ ] Wave no errors.
- [ ] W3c no errors.
- [ ] YSlow > B grade.
- [ ] Lighthouse > 95/100

pull_request_template.md

Github Integrations

Master

(prod env)

Dev

F Branch 1

F Branch 2

Hotfix

Tag Rel 1

Staging

 (pre-prod env)

Tag Rel 2

Bug fixes

RI
FI

Woo hoo

my code is live

Sentry

• Use VS Code 
• Use 2 spaces for indentation with no trailing space
• Google's version of eslint
• Pre-commit checks must
• Every commit pass the min validator score
• No Commits on dev or master
• Create github templates for PR n issues

• Keep commits atomic
• Give a proper commit msg to each commit

• Every PR to be as small as possible

• One external reviewer must for each project

End 

Part I