{"id":172,"date":"2018-12-04T22:17:34","date_gmt":"2018-12-04T22:17:34","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&p=172"},"modified":"2019-11-15T17:48:46","modified_gmt":"2019-11-15T17:48:46","slug":"submitting-coding-assignments-and-using-github","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/submitting-coding-assignments-and-using-github\/","title":{"raw":"Submitting Coding Assignments and Using GitHub","rendered":"Submitting Coding Assignments and Using GitHub"},"content":{"raw":"Note:\u00a0<\/strong>If you are here as part of a course, please read on. Otherwise, submitting coding assignments is not required.\r\n\r\n
\r\n\r\nMost assignments that follow are various inaccessible web page widgets that we will ask you to make accessible by rewriting their code (HTML, CSS, or JavaScript). If you are participating here as part of a course, you will need the link to a live web page with your solution. Before the code is reviewed, the page will be checked for accessibility (using ChromeVox and other tools).\r\n\r\nIt is your decision where you want to host the pages that you will submit for review. If you have your own domain and server space, you can upload completed assignments there and submit the URL. Another option is to submit the URL of a file on GitHub to GitHack<\/a> (https:\/\/raw.githack.com<\/a>),\u00a0then submit the URL to the output it generates as your assignment submission.\r\n\r\nFeel free to download the activity files<\/a> from our repository now, or if you are going to use GitHub, keep reading for instructions on how to fork it to your own account.\r\n\r\nIf you don\u2019t have a website, we recommend using GitHub as your platform for submitting assignments. Below we describe GitHub and GitHub Pages. If you are familiar with using GitHub or you have your own web server, you can skip the rest of this page or just scan it.\r\n

Set Up a GitHub Account<\/h2>\r\nIf you do not already have one, you should create a GitHub account. For any developer, it is an invaluable tool for sharing and collaborating on code development. A GitHub account is free. Though you can download the activity files from GitHub, then unzip them and work from a local directory on your hard drive, we recommend creating a fork of the activity files to your own account and cloning your fork into a local directory. Follow the link below to set up an account, then read on.\r\n
Toolkit:<\/strong> Join GitHub<\/a><\/div>\r\n

Set Up a Local Git Environment<\/h2>\r\nDepending on the operating system you are using, there are specific versions of Git for each platform. You may choose to use a Git client, or you may choose to use Git from the command line. Here we will present command line options. If you choose to use a client, see the documentation associated with the client for details on cloning, committing, pulling, and pushing.\r\n\r\nFor Windows and Mac users, if you are going to use a client instead of working from a command line, we suggest installing SourceTree. GitHub Desktop is a good alternative if you prefer to use an open source client. Feel free to choose another Git client if you like.\r\n
Toolkit:<\/strong> Download SourceTree<\/a>\u00a0or GitHub Desktop<\/a> if you need a desktop Git client application.<\/div>\r\nFor Linux users you can use your system\u2019s package manager to install Git for command line use. On Ubuntu, for instance, at the command prompt you can run apt-get<\/code> as the root user to install Git:\r\n\r\n#> sudo apt-get install git<\/strong><\/i>\r\n
Suggested Reading:<\/strong> For more about Git setup on Ubuntu<\/a> see the tutorial on DigitalOcean.<\/div>\r\nIf you are using another Linux distribution, use Google to find details on installing Git on your version of Linux.\r\n
Suggested Reading:<\/strong> For details on installing Git, see the Git Book.<\/a><\/div>\r\n

Assignment Submissions via GitHub<\/h2>\r\nMost of the assignments that follow require submitting a URL to a publicly accessible version of the widgets that are the focus of the activities.\r\n\r\nIf you need a place to post your activity assignments, GitHub Pages can be a good option. Or, you may just prefer to use GitHub Pages to organize your files so they are not cluttering your web server. You will create a fork of the activity files (learnaria.github.io<\/a>), rename the repository to create your own version, and either upload it to a site of your choosing or use GitHub Pages. The GitHub Pages option is outlined here.\r\n
Suggested Reading:<\/strong> Using GitHub Pages.<\/a><\/div>\r\nIf you choose to use GitHub Pages, follow these steps to create a copy of the files under your own GitHub account.\r\n
    \r\n \t
  1. \r\n
      \r\n \t
    1. Logged into GitHub, find your way to the activity files<\/a>, and fork that repository. The fork button is at the top right of the GitHub screen while viewing a repository. This creates a copy of the repository under your own GitHub account where you will work from.<\/li>\r\n \t
    2. After you have forked the activity files, go into the settings for that repository and change the name from learnaria.github.io to [username].github.io, where username is your GitHub account username. This will automatically create your GitHub Pages website at https:\/\/[username].github.io<\/em><\/strong>.<\/li>\r\n \t
    3. Now you will want to create a clone of your forked activity files repository on your computer, through which you will do your work. From the command line issue the following command to create a clone of the forked version of the activity files you created, where [username] is your GitHub account username. You can also copy the https link from a field that opens when you click on the \u201cClone or download\u201d button in your repo.\r\n#><\/i> git clone <\/i><\/strong><\/li>\r\n \t
    4. If you are using SourceTree, click on \u201c+ New Repository\u201d and choose \u201cClone from URL\u201d and enter the above URL into the \u201cSource URL\u201d field. Set the \u201cDestination Path\u201d to your preferred work directory.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n
      Suggested Reading:<\/strong> Cloning a repository.<\/a><\/div>\r\nYou should now have a copy of the activity files available locally that you can edit and commit back as your assignment updates, which become part of your GitHub Pages website.\r\n\r\nNote that it can take a few seconds or a minute for changes committed to your GitHub Pages repository to actually show up on the website.\r\n

      If You Already Have a GitHub Pages Site<\/h2>\r\nTo add the files to an existing GitHub Pages site, open the settings for the forked repository you created. In the GitHub Pages section shown in the screenshot below, choose the Source (typically, the master branch) and click Save. This will create a subdirectory under your existing GitHub Pages site with the name of the forked repository (i.e.,\u00a0learnaria.github.io<\/a>).\r\n\r\nYou may want to rename the repository to something shorter (e.g., learnaria) before enabling it in GitHub Pages. This would produce a URL to the activity files, something like:\r\n\r\nhttps:\/\/[username].github.io\/learnaria\/<\/strong>\r\n\r\n[caption id=\"attachment_158\" align=\"alignnone\" width=\"781\"]\"screenshot Figure:\u00a0<\/strong>A screenshot of the GitHub Pages settings[\/caption]\r\n

      Basic Git Commands<\/h2>\r\nYou do not need to be an expert Git user, but you should know a few basic commands if you are working from a command prompt. The commands you\u2019ll likely use are the following:\r\n
      \r\n\r\ngit status<\/strong> \u00a0(displays a list of changed and untracked files)\r\n\r\ngit add<\/strong> [filename] (prepares a files for committing)\r\n\r\ngit commit<\/strong> -m \u201c[message]\u201d (describe the nature of the commit)\r\n\r\ngit push<\/strong> [origin master] (sends the committed change to your GitHub repository master branch)\r\n\r\ngit diff<\/strong> [filename] (shows the changes in a file)\r\n\r\n<\/div>\r\nOf course there are many other potential commands, but these are the most common. If you are using a Git client, such as SourceTree, these commands will be clickable in the UI buttons and menus. For more about using Git from the command line, see the Git Book.\r\n
      Suggested Reading:<\/strong> The Git Book.<\/a><\/div>\r\n

      What the Activity Files Look Like<\/h2>\r\nHere is what to expect once you have successfully set up the activity files. You\u2019ll note that the widgets are inaccessible. Your job throughout the activities will be to fix the accessibility of each widget.\r\n
      [h5p id=\"1\"]<\/div>\r\n","rendered":"
      \n

      Contents<\/p>\n