Skip to content
Darshan edited this page Feb 26, 2018 · 6 revisions

Overall Goal and Expectations

Our team goal is to clone the atomist.com site and help each other to learn. Our expectation is that each of us maintain a general understanding and desire to help one another through this process.

Specific Goal

Create a responsive, pixel perfect, and functionally complete copy of atomist.com website front page.

  • We'll attempt to copy the design and function of the page to the best of our abilities.
  • If there's some function we can't copy, we'll leave a placeholder.
  • Also, we can add to or modify the design if we feel we can do better.

Vision

Work together, support one another, and learn from one another to finish our project.

GitHub Issues and Project Board

We will log issues in GitHub to assign tasks and discuss issues. We'll use waffle.io to keep track of the overall project.

Our Stack

  • HTML5
  • CSS3
    • Flexbox
    • Grid
  • JavaScript
    • jQuery (if needed)

Git and GitHub Process

We will host the site from the master branch. All pull requests will be merged into the development branch and once it's determined that the changes are successful, with no additional bugs (through manual testing), the project manager will merge from the development branch to the master branch for publication.

Coding Standards

HTML

  • Large sections are separated with a comment formatted like this: <!--SECTION NAME, BUILT BY NAME-->
  • Small chunks of code within sections are separated with a comment formatted like this: <!--short name-->
  • Id names are simple and short. Long id names are formatted like this: <div id="long-id-name"></div>
  • Class names are simple and short. Long class names are formatted like this: <div class="long-class-name"></div>
  • All styles must be in the CSS file. No inline styles or <style> tag in the HTML file.
  • All JS must be in the JS file. No scripts in the HTML file.

CSS

  • Id selectors are only used for JS. Never use an id selector for CSS styles.
  • Class selectors are used for CSS styles.

JavaScript

  • Don't Repeat Yourself (DRY) code as often as possible.
  • Variable, Function, Class, etc... names should be as semantic as possible.

Github + Project management automated :

  • Add an issue, look at the number on the card.
  • Make a branch with a number of an issue at the end :
$ git checkout -b refactor/license#33
  • Push a branch to origin. It would move to In Progress -
$ git push -u origin refactor/license#33
  • Do commits
  • Push all the work done :-
$ git push
  • Issue a pull request at Github - add closes #33 in description - It will move to review.
  • Close PR and it moves to Done. (works only for merging into default branch.)
  • Delete the feature branch
git branch -d <feature-branch>
git push origin :<feature-branch>

Naming branches

* bug/fixed-all-caps
* feature/giant-duck-modal
* refactor/add-prop-types
* style/everything-is-black

Commit titles

  • Capitalize the first letter.
  • Keep it short and clear. Sample:
$ git commit -m “Fix routes priority"
  • If you have more to say, use the commit body. Sample:
$ git commit -m “My commit title” -m “My commit body message”

Acknowledgments

  • (Anton Tymczenko)[https://github.com/AntonTymczenko]
  • (Francesco Agnoletto)[https://github.com/Kornil]