New hackers

The information you need to get started with Code for Newark.

Civic Hacking 101

What is Github?

Github is a platform that is used by millions of developers all over the world to help share their projects and allow others to easily collaborate. On the Codefornewark team, we use Github for this exact purpose.

History and Difference between Git and Github

It is important to know that there are two distinct but cooperating tools used by devs called Git and Github. Git is the program used to track changes in a project whereas Github is the hosting platform that is used to make a project available to collaborators. This video dives deeper into the history of how these tools came about. While the whole video is informative and you are recommended to watch, you can skip ahead to 1:26 where the more pertinant information begins.

A Common Git/Github Workflow

This depicts a common way Git and Github are used in actual projects by developers. It walks you through different commands used by these tools. Look through these definitions as you watch the video below.

  • Repository is the project that is being developed. These usually are made using one or more programming languages, is intended to complete a defined purpose, and usually uses a version control system such as Git to track its changes during development.
  • Commit is a snapshot of a project at a specific point in time which can always be revisited later on in a project’s development making it like an enhanced version of saving.
  • Branch is a different version of the repository that allows for potentially breaking changes to be developed safely with the original version still in tact with the intent that once these changes are safe they can be safely merged back into the original repository.
  • Pull brings changes in a different repository than the one currently being used. This merges those changes into the repository.
  • Pull Request is when you have made changes to a repository that is owned by someone else in your own local version and you are requesting that they incorporate those changes into their repository.
  • Push takes your local changes and gives them to a remote repository most commonly the repository hosted on Github.
  • Fork creates a new version of a repository that allows you to develop while having the freedom of not being tied down to the original version of the repository.

Let’s create a Github account!

Talk is cheap. Let’s create our own Github account so we can start developing our own project: a personal website!

Click here to sign up.

Let’s fork this repository

Go to the repository here.

Click on the fork button in the top right corner. Screenshot of Github Fork button

The Github Desktop Client

Normally, developers will use the command line during development to invoke specific commands such as Git’s commands. It can be hard to remember these when you are just starting out with development so often it is nice to have a graphical tool that has the power to execute the same commands on the command line. The desktop client is just that tool. It will give us the power to commit changes, create new branches, push to our Github repository, pull changes from our Github repository all without touching a terminal.

Let’s download the Github desktop client

Login to your Github account with the desktop client then pull your repository down to your local machine.

Once logged in, you will need to clone the repository that already exists on your Github account to your local computer so click the Clone a Repository button.

Screenshot of Github Fork button

Select the small-web-project repository, if you just created your Github account it should be the only project listed.

Screenshot of Github Fork button

Let’s have a small break and enjoy this cat gif :) Alt Text

Screenshot of Github Fork button

What we are looking at now is the project view. On the left panel, at the top, you see what the current project you are viewing is. Right now, it should say small-web-projects. To the right of that is the name of the branch you are currently on. This should say master.

Underneath the current repo header, there should be a tab that says Changes, when this is selected, it will show all the changes that have been made in the project since the last tracked commit. To the right of that is History, this should show the complete history of commits from that branch.

Screenshot of Github Fork button

You now have Github Desktop installed and are ready to start editing your code. But wait … we need an editor to do the editing.

A Tale of three text editors

A text editor is to a software developer as a canvas to a painter. There are many strong feelings in the community about what text editors need to be able to do well and which one is the (queue air quotes) best . Just so you know, there is no best editor, there is only the best for you . This video showcases three popular choices for text editors. Choose one so we can continue working on our website. At some point in time, it is recommended that you atleast try each of these options to get a better feel for what you like from a text editor.

Choose your Pokémon

  • Image of Squirtle Visual Studio Code
    A very composed editor that has many features all included giving you the ability to be productive from initial download.

  • Image of Bulbasaur Atom
    Popular and used by developers all over, support for this editor is managed by Github itself, meaning help using this editor is always a quick Google search away.

  • Image of CharmanderSublime Editor
    This editor is lightning fast and very small. It uses such little memory that you won’t have to worry about using other computer resources during development.

Edit website

Make changes to the code based on information in of project. There are some things which need to be fixed. When finished, push your changes back to your forked repository on Github.

Submit a pull request

Now we need your changes to be put into the version hosted by Code For Newark.

Let’s submit a pull request

Thank you!

You have made it to the end of this tutorial used by Code For Newark. We have a short little survey that we would like you to fill out to help us improve as an organization.

Please complete this survey