Welcome to the Arcade Mode Contributors Guide!
Arcade Mode is an interview preparation app featuring algorithm and data structure questions in a timed environment. The end goal will be its incorporation into freeCodeCamp proper as part of the coding interview preparation section.
We welcome pull requests from freeCodeCamp campers (our students) and seasoned JavaScript developers alike! Follow these steps to contribute:
- Follow the Contribution Guidelines to initially set up the project. You can also watch this video:
- Find an issue that needs assistance by going to the Help Wanted section or by searching for the Help Wanted tag. Specific instructions are provided in each help wanted item.
Feel free to ask for help in our Gitter room.
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub
If you've found a bug that is not on the board, follow these steps.
- Prerequisites
- Forking The Project
- Create A Branch
- Setup Linting
- Setup arcade-mode
- Make Changes
- Run The Test Suite
- Squash Your Commits
- Creating A Pull Request
- Common Steps
- How We Review and Merge Pull Requests
- How We Close Stale Issues
- Next Steps
- Other resources
Prerequisite | Version |
---|---|
Node.js | ~ ^8 |
npm (comes with Node) | ~ ^5 |
Updating to the latest releases is recommended.
If Node is already installed in your machine, run the following commands to validate the versions:
node -v
If your version is lower than the prerequisite version, you should update.
- Install Git or your favorite Git client.
- (Optional) Setup an SSH Key for GitHub.
- Create a parent projects directory on your system. For this guide, it will be assumed that it is
/mean/
- Go to the top level /arcade-mode repository: https://github.com/freeCodeCamp/arcade-mode
- Click the "Fork" Button in the upper right hand corner of the interface (More Details Here)
- After the repository has been forked, you will be taken to your copy of the arcade-mode repo at
yourUsername/arcade-mode
- Open a Terminal / Command Line / Bash Shell in your projects directory (i.e.:
/yourprojectdirectory/
) - Clone your fork of arcade-mode
$ git clone https://github.com/yourUsername/arcade-mode.git
This will download the entire arcade-mode repo to your projects directory.
- Change directory to the new arcade-mode directory (
cd arcade-mode
) - Add a remote to the official arcade-mode repo:
$ git remote add upstream https://github.com/freeCodeCamp/arcade-mode.git
Congratulations, you now have a local copy of the arcade-mode repo!
Now that you have a copy of your fork, there is work you will need to do to keep it current.
Do this prior to every time you create a branch for a PR:
- Make sure you are on the
master
branch
$ git status On branch master Your branch is up-to-date with 'origin/master'.
If your aren't on
master
, resolve outstanding files / commits and checkout themaster
branch
$ git checkout master
- Do a pull with rebase against
upstream
$ git pull --rebase upstream master
This will pull down all of the changes to the official master branch, without making an additional commit in your local repo.
- (Optional) Force push your updated master branch to your GitHub fork
$ git push origin master --force
This will overwrite the master branch of your fork.
Before you start working, you will need to create a separate branch specific to the issue / feature you're working on. You will push your work to this branch.
Name the branch something like fix/xxx
or feature/xxx
where xxx
is a short description of the changes or feature you are attempting to add. For example fix/email-login
would be a branch where you fix something specific to email login.
To create a branch on your local machine (and switch to this branch):
$ git checkout -b [name_of_your_new_branch]
and to push to GitHub:
$ git push origin [name_of_your_new_branch]
If you need more help with branching, take a look at this.
You should have ESLint running in your editor, and it will highlight anything doesn't conform to freeCodeCamp's JavaScript Style Guide (you can find a summary of those rules here).
Please do not ignore any linting errors, as they are meant to help you and to ensure a clean and simple code base.
Once you have arcade-mode cloned, before you start the application, you first need to install all of the dependencies:
# Install NPM dependencies
npm install
If you run into errors with a package not being found, a current workaround is to delete the package-lock.json
file and install over it, generating a new package-lock.json
:
# Workaround for missing packages:
rm package-lock.json
npm install
Once everything is installed, run the following to see the site at localhost:8080
:
npm start
To watch for changes, run this in a separate terminal:
npm run watch-dev
Now navigate to your browser and open http://localhost:3000. If the app loads, congratulations – you're all set. Otherwise, let us know by asking in the Contributors chat room on Gitter. There also might be an error in the console of your browser or in Bash / Terminal / Command Line that will help identify the problem. If the app launches but you are encountering errors with the UI itself, for example if fonts are not being loaded or if the code editor is not displaying properly, you may try the following:
# Remove all installed node modules
rm -rf node_modules
# Reinstall npm packages
npm install
This bit is up to you!
The best way to find out any code you wish to change/add or remove is using the GitHub search bar at the top of the repository page. For example, you could search for a challenge name and the results will display all the files along with line numbers. Then you can proceed to the files and verify this is the area that you were looking forward to edit. Always feel free to reach out to the chat room when you are not certain of any thing specific in the code.
When you're ready to share your code, run the test suite:
$ npm run test:rosetta
and ensure all tests pass.
When you make a pull request, all of your changes need to be in one commit.
If you have made more than one commit, then you will need to squash your commits.
To do this, see Squashing Your Commits.
A pull request (PR) is a method of submitting proposed changes to the arcade-mode Repo (or any Repo, for that matter). You will make changes to copies of the files which make up arcade-mode in a personal fork, then apply to have them accepted by arcade-mode proper.
arcade-mode Issue Mods and staff are on hand to assist with Pull Request related issues in our Contributors chat room.
Take away only one thing from this document: Never, EVER
make edits to the master
branch. ALWAYS make a new branch BEFORE you edit
files. This is critical, because if your PR is not accepted, your copy of
master will be forever sullied and the only way to fix it is to delete your
fork and re-fork.
There are two methods of creating a pull request for arcade-mode:
- Editing files on a local clone (recommended)
- Editing files via the GitHub Interface
This is the recommended method. Read about How to Setup and Maintain a Local Instance of arcade-mode.
- Perform the maintenance step of rebasing
master
. - Ensure you are on the
master
branch usinggit status
:
$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working directory clean
-
If you are not on master or your working directory is not clean, resolve any outstanding files/commits and checkout master
git checkout master
-
Create a branch off of
master
with git:git checkout -B branch/name-here
Note: Branch naming is important. Use a name likefix/short-fix-description
orfeature/short-feature-description
. Review the Contribution Guidelines for more detail. -
Edit your file(s) locally with the editor of your choice
-
Check your
git status
to see unstaged files. -
Add your edited files:
git add path/to/filename.ext
You can also do:git add .
to add all unstaged files. Take care, though, because you can accidentally add files you don't want added. Review yourgit status
first. -
Commit your edits:
git commit -m "Brief Description of Commit"
. Do not add the issue number in the commit message. -
Squash your commits, if there are more than one.
-
Push your commits to your GitHub Fork:
git push -u origin branch/name-here
-
Go to Common Steps
Note: Editing via the GitHub Interface is not recommended, since it is not possible to update your fork via GitHub's interface without deleting and recreating your fork.
Read the Wiki article for further information
-
Once the edits have been committed, you will be prompted to create a pull request on your fork's GitHub Page.
-
By default, all pull requests should be against the arcade-mode main repo,
master
branch. -
Submit a pull request from your branch to arcade-mode's
master
branch. -
The title (also called the subject) of your PR should be descriptive of your changes and succinctly indicates what is being fixed.
-
Do not add the issue number in the PR title or commit message.
-
Examples:
Add Test Cases to Bonfire Drop It
Correct typo in Waypoint Size Your Images
-
-
In the body of your PR include a more detailed summary of the changes you made and why.
- If the PR is meant to fix an existing bug/issue then, at the end of
your PR's description, append the keyword
closes
and #xxxx (where xxxx is the issue number). Example:closes #1337
. This tells GitHub to close the existing issue, if the PR is merged.
- If the PR is meant to fix an existing bug/issue then, at the end of
your PR's description, append the keyword
-
Indicate if you have tested on a local copy of the site or not.
Currently, arcade-mode pull requests will be reviewed personally by the two main developers of arcade-mode, @timolawl and @tpoikela.
We as issue moderators will routinely go through open pull requests in a process called Quality Assurance (QA).
-
If an Issue Moderator QA's a pull request and confirms that the new code does what it is supposed without seeming to introduce any new bugs, they will comment "LGTM" which means "Looks good to me."
-
Another Issue Moderator will QA the same pull request. Once they have also confirmed that the new code does what it is supposed to without seeming to introduce any new bugs, they will merge the pull request.
We will close any issues or pull requests that have been inactive for more than 15 days, except those that match the following criteria:
- bugs that are confirmed
- pull requests that are waiting on other pull requests to be merged
- features that are a part of a GitHub project
Once your PR is accepted, you may delete the branch you created to submit it. This keeps your working fork clean.
You can do this with a press of a button on the GitHub PR interface. You can
delete the local copy of the branch with: git branch -D branch/to-delete-name
Don't despair! You should receive solid feedback from the Issue Moderators as to why it was rejected and what changes are needed.
Many Pull Requests, especially first Pull Requests, require correction or updating. If you have used the GitHub interface to create your PR, you will need to close your PR, create a new branch, and re-submit.
If you have a local copy of the repo, you can make the requested changes and
amend your commit with: git commit --amend
This will update your existing
commit. When you push it to your fork you will need to do a force push to
overwrite your old commit: git push --force
Be sure to post in the PR conversation that you have made the requested changes.
We currently need help with coverting RosettaCode tasks into in-house challenges.
If you would like to contribute, please check the spreadsheet to find a task-to-challenge that has not been worked on yet. Once you have decided on a letter, please add your GitHub username to the Contributor section and note the decision wip
so that others know you are working on it. If you have been vetted by Quincy/Michael, you will be granted write access to the spreadsheet.
Details: Please refer to this directory.
- Preprocessed RosettaCode tasks comes from the
preformatted
directory - Formatted content goes into the
formatted
directory
Workflow steps:
- In considering a preformatted RosettaCode task for conversion, check if it passes the following exclusion criteria test (exclude if):
- There exists no JavaScript solution
- It is a trivial task (e.g., it is not asking for A + B)
- It requires HTML to implement (e.g., requires
<canvas>
) For other exclusion considerations, refer to the spreadsheet.
-
If suitable, copy the preformatted file to its respective formatted letter directory, but replace the
.raw
extension with.js
. -
Conversion process:
- Update the challenge description such that it asks the user to create a function to solve the challenge.
- In formatting the challenge seed and solution, they should take the form of:
function <APT_NAME_FOR_CHALLENGE_FN> (<ANY_ARGS>) {
// Good luck!
return <APT_RETURN_VALUE>;
}
- Visual formatting (i.e., does the challenge look acceptable when viewed in the browser?)
- Add tests using Chai's
assert
. - The
/// tail:
section appends code above the/// test:
phase. If you find you need to add additional code for testing, it goes in the tail section. - If you believe the challenge is benchmark worthy, you can add a benchmark call under
/// benchmark:
. Otherwise, remove the/// benchmark:
and its subsequent line entirely for the time being. - Assign a difficulty number between 1 (easiest) and 9 (hardest) given your best estimate.
- Lastly, be sure to test the challenge:
- via unit testing with
npm run test:rosetta
(be sure thatpublic/json/challenges-rosetta.json
has been regenerated with the updated file content before running the test as it relies on this file) - via the app itself
If you run into an issue or have questions on the porting process, the first and best method would be to refer to already completed ports; see currently formatted challenges in the directories 0-C
and T-Z
for reference. If that does not resolve your issue or question, leave a comment below and we will get back to you as soon as we can. If the issue is more general or of a different nature, please create a separate issue. You can also reach us at our Gitter.
Miscellaneous:
-
There may occasionally be RosettaCode challenges that ask the user to solve multiple tasks. We do not want users to become confused as a result of all the tasks. In these scenarios, please make the best attempt to cut down the number of tasks to one or at most two. The task description will likely have to be rewritten to a degree.
-
For aesthetics and formatting, refer to other already formatted challenges (e.g., formatted challenges in
A-C
) and the Rosetta Code task itself.
Thank you for your help!
We currently need help with converting Project Euler tasks into in-house challenges. This mostly involves adding a solution to the challenge.
Details: Please refer to this path.
- Preformatted Project Euler tasks are located in the
preformatted
directory. - Formatted challenges go into the
formatted
directory; the subdirectory depends on the hundreds-digit (e.g., Problem 53 would go into folder001_to_100
).
The format you see is the in-house format we use to process the challenges into one json file.
What needs to be done:
- A solution under the
/// solutions:
header (it should have the same function name as in thechallengeSeed
) - An estimated difficulty rating between 1 (easiest) and 9 (hardest)
For reference, refer to the finished Problem 2: Even Fibonacci numbers.
Overall progress is updated at this spreadsheet.
Please let us know if you would like to get involved at our Gitter room.
Thank you all for the help!