gauthiier/cth2016
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

assignments-conf update

Browse Source
This commit is contained in:
gauthiier 2016-11-03 17:23:46 +01:00
parent 5bfe87c70d
commit 879df0ab79
7 changed files with 165 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
assignments-conf.html
View File

@ -55,87 +55,72 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
</header> </header>
<nav id="TOC"> <nav id="TOC">
<ul> <ul>
<li><a href="#initialising-your-assignments-directory">Initialising your assignments directory</a><ul> <li><a href="#initialising-your-assignments-repository">Initialising your assignments repository</a><ul>
<li><a href="#git-init">git init</a></li> <li><a href="#step-1-create-repository-on-github">Step 1: Create repository on Github</a></li>
<li><a href="#git-add">git add</a></li> <li><a href="#step-2-clone-the-repository-to-your-own-machine">Step 2: Clone the repository to your own machine</a></li>
<li><a href="#git-commit">git commit</a></li>
<li><a href="#github">github</a></li>
<li><a href="#git-push">git push</a></li>
</ul></li> </ul></li>
<li><a href="#creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</a><ul> <li><a href="#creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</a><ul>
<li><a href="#assignment-x">assignment-x</a></li> <li><a href="#step-1-create-a-new-directory-under-your-assignments-repository">Step 1: Create a new directory under your assignments repository</a></li>
<li><a href="#npm-init">npm init</a></li> <li><a href="#step-2-initialise-you-project-with-npm-init">Step 2: Initialise you project with npm init</a></li>
<li><a href="#npm-install---save-commander">npm install --save commander</a></li> <li><a href="#step-3-optional-npm-install---save-commander">Step 3 (optional): npm install --save commander</a></li>
<li><a href="#index.js">index.js</a></li> <li><a href="#step-4-create-your-actual-assigment-scripts">Step 4: Create your actual assigment script(s)</a></li>
<li><a href="#readme">README</a></li> <li><a href="#step-5-run-you-script">Step 5: Run you script</a></li>
<li><a href="#git-add-1">git add</a></li> <li><a href="#step-6-create-a-readme">Step 6: Create a README</a></li>
<li><a href="#git-commit-1">git commit</a></li> <li><a href="#step-7-add-your-created-files-to-git">Step 7: Add your created files to git</a></li>
<li><a href="#git-push-1">git push</a></li> <li><a href="#step-8-commit-your-changes-and-push-to-github">Step 8: Commit your changes and push to Github</a></li>
</ul></li> </ul></li>
<li><a href="#updating-your-assignment-as-you-make-progress">Updating your assignment as you make progress</a></li>
<li><a href="#external-resources">External Resources</a></li> <li><a href="#external-resources">External Resources</a></li>
</ul> </ul>
</nav> </nav>
<h2 id="initialising-your-assignments-directory">Initialising your assignments directory</h2> <h2 id="initialising-your-assignments-repository">Initialising your assignments repository</h2>
<p>What follows is a recipe to initialise a git repository for your class assignments.</p> <p>What follows is a recipe to initialise a git repository for your class assignments.</p>
<h3 id="git-init">git init</h3> <h3 id="step-1-create-repository-on-github">Step 1: Create repository on Github</h3>
<p>Let's assume you have a directory on your machine <code>~/cth2016</code> where you intend to place all your assignments. To create a dedicated assignments directory:</p> <p>First create a repository under your github account. To do so, login to <a href="https://github.com">Github</a> and on the top/right corner of the page select the '+' symbol and 'New repository'</p>
<pre><code>$ cd ~/cth2016
$ mkdir cth2016-assignments
$ cd cth2016-assignments</code></pre>
<p>This will create a new directory <code>~/cth2016/cth2016-assignments/</code> that will be turned into a git repository with the following commands:</p>
<pre><code>$ git init</code></pre>
<h3 id="git-add">git add</h3>
<p>Your directory is now under version control, though there is nothing in there yet. Let's first create a README file describing what the repo is about:</p>
<pre><code>$ echo &#39;Repository of CTH2016 assignments&#39; &gt; README</code></pre>
<p>This command will create a new README file on your system and add to it the <code>echo</code> string. You can, of course, create the file manually using Sublime. To make sure git is keeping track of this new file, emit the following command:</p>
<pre><code>$ git status</code></pre>
<p>The above should display the new file in the list of changes to the repo since it has been created. Yet the README file <em>is not</em> currently added to the repo (marked in red). To add the file to the repo:</p>
<pre><code>$ git add README</code></pre>
<p>Now <code>git status</code> should list the file in green and mark it as new. Any files that will be added to the directory will need to be added to the repo using the <code>git add</code> command.</p>
<h3 id="git-commit">git commit</h3>
<p>When adding new files or changing them, you need to commit these to the repo:</p>
<pre><code>$ git commit -a -m &#39;initial commit&#39;</code></pre>
<p>From the git command above <code>-a</code> means to you are committing all changes listed by <code>git status</code> and <code>-m</code> is the message for the commit. If you do a <code>git status</code> you should now see that the README file dissapeared from the list of changes since it has just been committed. Changing the README file will re-introduce it to list of changes. A commit is like a recorded snapshot of the repo, any changes that occur after the commit will be flagged in <code>git status</code>.</p>
<h3 id="github">github</h3>
<p>Now that you have added a README file and committed this change to your local repo, it is time to link it to Github so that your instructor and your peers can &quot;clone&quot; it. To do so, login to <a href="https://github.com">Github</a> and on the top/right corner of the page select the '+' symbol and 'New repository'</p>
<p><img src="./img/github-new-repo.png" width='250px' class='inline-img'/></p> <p><img src="./img/github-new-repo.png" width='250px' class='inline-img'/></p>
<p>and give it a name, make it public and do not initialise it with a README since you already have one:</p> <p>Then fill in the information for the assignments repo.</p>
<ul>
<li>Note 1: Select &quot;Initialize this repository with a README&quot;</li>
<li>Note 2: From the &quot;Add .gitignore&quot; drop down menu, selecte Node</li>
</ul>
<p><img src="./img/github-new-repo-name.png" class='inline-img'/></p> <p><img src="./img/github-new-repo-name.png" class='inline-img'/></p>
<p>When your (now empty) github repo is created, you need to copy its url:</p> <h3 id="step-2-clone-the-repository-to-your-own-machine">Step 2: Clone the repository to your own machine</h3>
<p>Now that you have a github repo, you need to <code>clone</code> it to your machine. Open a terminal and navigate (<code>cd</code> and <code>ls</code>) to a prefered directory on your machine where you want your assignments to reside (for instance the Desktop).</p>
<p>When this is done, select the &quot;Clone or download&quot; menu on your githib repo's page and copy the listed url:</p>
<p><img src="./img/github-new-repo-clone.png" class='inline-img'/></p> <p><img src="./img/github-new-repo-clone.png" class='inline-img'/></p>
<p>and add a &quot;remote origin&quot; to your local git repo with this command</p> <p>Coming back to your terminal, simply type the following to <code>clone</code> the repo on your machine:</p>
<pre><code>git remote add origin your-github-https-url</code></pre> <pre><code>$ git clone your-github-repo-url</code></pre>
<p>where you replace &quot;your-github-https-url&quot; with your actual github url (for instance, on my repo it is: https://github.com/gauthiier/cth2016-assignments.git)</p> <p>(where your-github-repo-url is your copied/pasted url from github)</p>
<h3 id="git-push">git push</h3> <p>This will create a directory under the current folder where your terminal is. To view the changes, simply type:</p>
<p>When this is done, you can now <code>push</code> your local changes to the online github repo</p> <pre><code>$ ls -al</code></pre>
<pre><code>git push origin master</code></pre>
<p>If you refresh the github webpage, you should now see it updated with your README file</p>
<p><img src="./img/github-done.png" class='inline-img'/></p>
<p>Your local repo and your github repo are now linked and ready to go!</p>
<hr /> <hr />
<h2 id="creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</h2> <h2 id="creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</h2>
<p>What follows is a recipe to create a new assignment in your newly initialised git assignments repository.</p> <p>What follows is a recipe to create a new assignment in your newly initialised git assignments repository.</p>
<h3 id="assignment-x">assignment-x</h3> <h3 id="step-1-create-a-new-directory-under-your-assignments-repository">Step 1: Create a new directory under your assignments repository</h3>
<p>If you have followed the previous section, you should now have a directory named <code>~/cth2016/cth2016-assignments/</code> under which you will add a new <code>assignment-x</code>. To create the new directory:</p> <p>If you have followed the previous section, you should now have a repositroy on your machine which is linked to your github account. Let's assume that your repo is named <code>cth2016-assignments/</code> and resides on your Desktop.</p>
<pre><code>$ cd ~/cth2016/cth2016-assignments/ <p>To create a new assigment, you need to point your terminal to the repo:</p>
$ mkdir assignment-x <pre><code>$ cd ~/Desktop/cth2016-assignments/</code></pre>
$ cd assignment-x</code></pre> <p>and then create a new directory, which I will call <code>assignment-x</code>. To do so, on the terminal, simply type:</p>
<h3 id="npm-init">npm init</h3> <pre><code>$ mkdir assignment-x
<p>Node has a package manager named <code>npm</code> (n-ode, p-ackage, m-anager) that automates the task of creating a project from scratch and configures it in a way that is compatible with other node projects. We will use <code>npm</code> during the course of the module.</p> $ cd assignment-x </code></pre>
<p>To initialise a new project/assignment, simply emit the follow command:</p> <p>This will create a new direcory <code>assignment-x</code> under <code>~/Desktop/cth2016-assignments/</code>. The <code>cd</code> command puts your terminal inside this newly created directory so that you can initialise your actual project in step 2.</p>
<h3 id="step-2-initialise-you-project-with-npm-init">Step 2: Initialise you project with npm init</h3>
<p>Node has a package manager named <code>npm</code> (n-ode, p-ackage, m-anager) that automates the task of creating a project from scratch and configures it in a way that is compatible with other node projects. We will use <code>npm</code> during the module.</p>
<p>To initialise your new assignment under <code>assignment-x</code>, simply emit the follow command:</p>
<pre><code>$ npm init</code></pre> <pre><code>$ npm init</code></pre>
<p>and you will be asked various questions regarding your project's name, version, description, entry point, author, etc. which you can configure at will (press &lt;'enter'&gt; to select and move to the next configuration step).</p> <p>With this commad you will be asked various questions regarding your project's name, version, description, entry point, author, etc. which you can configure at will (press &lt;'enter'&gt; to select and move to the next configuration step).</p>
<p>A <code>package.json</code> file is created upon the completion of <code>npm init</code>. This file contains all the configurations you selected and can be edited manually.</p> <p>A <code>package.json</code> file is created upon the completion of <code>npm init</code>. This file contains all the configurations you selected and can be edited manually.</p>
<h3 id="npm-install---save-commander">npm install --save commander</h3> <h3 id="step-3-optional-npm-install---save-commander">Step 3 (optional): npm install --save commander</h3>
<p>This step is optional, yet recommended for your assignment. When making a node application, modules/libraries can be made part of your project using <code>npm</code>. Thousands of javascript libraries are available on <a href="https://www.npmjs.com">www.npmjs.com</a> which you can install with a simple <code>npm</code> command.</p> <p>This step is optional, yet recommended for your assignment. When making a node application, modules/libraries can be made part of your project using <code>npm</code>. Thousands of javascript libraries are available on <a href="https://www.npmjs.com">www.npmjs.com</a> which you can install with a simple <code>npm</code> command.</p>
<p>As in the first session of the class on the Command Line Interface (CLI), we will be using <a href="https://www.npmjs.com/package/commander">&quot;commander&quot;</a> for our applications. To install it for you assignment, use the following command:</p> <p>As in the first session of the class on the Command Line Interface (CLI), we will be using <a href="https://www.npmjs.com/package/commander">&quot;commander&quot;</a> for our applications. To install it for you assignment, use the following command:</p>
<pre><code>$ npm install --save commander</code></pre> <pre><code>$ npm install --save commander</code></pre>
<p>This will create a <code>node_modules</code> directory next to <code>package.json</code> where the commander code is placed. All modules installed using <code>npm</code> will reside in this <code>node_modules</code> directory.</p> <p>This will create a <code>node_modules</code> directory next to <code>package.json</code> where the commander code is placed. All modules installed using <code>npm</code> will reside in this <code>node_modules</code> directory.</p>
<h3 id="index.js">index.js</h3> <h3 id="step-4-create-your-actual-assigment-scripts">Step 4: Create your actual assigment script(s)</h3>
<p>Now that you have an npm project created and installed commander it is time to create an <code>index.js</code> file containing the code for the assignment. Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output <code>&quot;Hello!&quot;</code>, <code>&quot;Dag!&quot;</code> or <code>&quot;Allô!&quot;</code> depending on a command line arguments passed to the script which can be of the type <code>en</code> (english), <code>nl</code> (nederlands), <code>fr</code> (français) or nothing.</p> <p>Now that you have an npm project created and installed commander it is time to create your script(s). For instance, in this example, I will create <code>index.js</code> file containing the code for the fake assignment. This file can be called anything (for instance, person.js as in the example in class during week1).</p>
<p>To create <code>index.js</code> simply type (or, alternatively, create it with Sublime):</p> <p>Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output <code>&quot;Hello!&quot;</code>, <code>&quot;Dag!&quot;</code> or <code>&quot;Allô!&quot;</code> depending on a command line arguments passed to the script which can be of the type <code>en</code> (english), <code>nl</code> (nederlands), <code>fr</code> (français) or nothing.</p>
<p>To create <code>index.js</code> simply type (or, alternatively, create it with Sublime Text):</p>
<pre><code>$ touch index.js</code></pre> <pre><code>$ touch index.js</code></pre>
<p>Now open the file and input the desired code:</p> <p>Now open the file usign Sublime Text, copy/paste or input the desired code and save:</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"> <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">
<span class="co">// simplest tri-lingual program </span> <span class="co">// simplest tri-lingual program </span>
@ -161,13 +146,16 @@ program
<span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;...&#39;</span>)<span class="op">;</span> <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;...&#39;</span>)<span class="op">;</span>
<span class="cf">break</span><span class="op">;</span> <span class="cf">break</span><span class="op">;</span>
<span class="op">}</span></code></pre></div> <span class="op">}</span></code></pre></div>
<h3 id="step-5-run-you-script">Step 5: Run you script</h3>
<p>To run the script</p> <p>To run the script</p>
<pre><code>$ node index.js -l fr</code></pre> <pre><code>$ node index.js -l fr
Allô!</code></pre>
<p>where you can replace <code>fr</code> by <code>en</code> or <code>nl</code> or nothing. Try it out!</p> <p>where you can replace <code>fr</code> by <code>en</code> or <code>nl</code> or nothing. Try it out!</p>
<h3 id="readme">README</h3> <p>If you called you script another name (for instance, person.js), please change the above <code>index.js</code> with the name of your own script.</p>
<h3 id="step-6-create-a-readme">Step 6: Create a README</h3>
<p>One of the interesting feature of commander is that it can auto generate a <code>&quot;help&quot;</code> output from your script based on the command line options you have listed in your program.</p> <p>One of the interesting feature of commander is that it can auto generate a <code>&quot;help&quot;</code> output from your script based on the command line options you have listed in your program.</p>
<p>To see this help output, simply type:</p> <p>To see this help output, simply type:</p>
<pre><code>node index.js --help</code></pre> <pre><code>$ node index.js --help</code></pre>
<pre><code> Usage: index [options] <pre><code> Usage: index [options]
Options: Options:
@ -179,26 +167,39 @@ program
<p>It is very common for command line scripts to feature such <code>--help</code> argument that when executed, displays what the program expects as input. Thus, for this class, each README you will create (for both assignments and final project) is expected to have (at least) this type of &quot;helper documentation&quot;.</p> <p>It is very common for command line scripts to feature such <code>--help</code> argument that when executed, displays what the program expects as input. Thus, for this class, each README you will create (for both assignments and final project) is expected to have (at least) this type of &quot;helper documentation&quot;.</p>
<p>To initialise a README and add the <code>help</code> output from your script:</p> <p>To initialise a README and add the <code>help</code> output from your script:</p>
<pre><code>$ node index.js --help &gt; README</code></pre> <pre><code>$ node index.js --help &gt; README</code></pre>
<p>You can, of course, edit this README manually. It is nonetheless a very good practice to start the redaction with the <code>help</code> as it signals how to use your script to people that may be interested in it.</p> <p>Alternatively, you can create the README with Sublime Text and copy/paste the result of the <code>--help</code> manually.</p>
<h3 id="git-add-1">git add</h3> <p>It is a very good practice to start the redaction with the <code>--help</code> as it signals how to use your script to people that may be interested in it.</p>
<h3 id="step-7-add-your-created-files-to-git">Step 7: Add your created files to git</h3>
<p>Now that you have a proper project initialised, the next step is to add all its files to git.</p> <p>Now that you have a proper project initialised, the next step is to add all its files to git.</p>
<p>Yet before we do so, there one important file you need to fetch from github which will instruct git not to include to you repository unwanted files that may be installed by <code>npm</code> or by your operating system. Git has a special file called <code>.gitignore</code> that lists files and file patterns that have to be ignored by git. Luckily, there is a <a href="https://github.com/github/gitignore">github repository</a> maintained by the git community that lists common files to ignore depending on the programming language and environment your are using.</p> <p>To view which file needs to be added to git type:</p>
<p>To download the Node <code>.gitignore</code> and install it under the current <code>assignment-x</code>, type the following command:</p>
<pre><code>$ wget https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -O .gitignore</code></pre>
<p>It is now time to look which file needs to be added to git. In order to do so type:</p>
<pre><code>$ git status</code></pre> <pre><code>$ git status</code></pre>
<p>This should indicate which directories and/or files that are untracked. If you have followed the previous steps, <code>git status</code> should simply signal that the current directory <code>./</code> is untracked. To add it to git:</p> <p>This should indicate which directories and/or files are untracked by git.</p>
<p>If you have followed the previous steps, <code>git status</code> should simply signal that the current directory <code>./</code> is untracked. To add it to git:</p>
<pre><code>$ git add ./</code></pre> <pre><code>$ git add ./</code></pre>
<p>To make sure git properly added the new assignment, simply check with <code>git status</code> that your <code>package.json</code>, <code>index.js</code>, <code>README</code>, and various file in <code>node_modules</code> are marked as new files (green).</p> <p>To make sure git properly added the new assignment, simply type (again):</p>
<h3 id="git-commit-1">git commit</h3> <pre><code>$ git status</code></pre>
<p>and check that your <code>package.json</code>, <code>index.js</code> (or whatever you have called your file(s)), and <code>README</code> are marked as new files (green).</p>
<h3 id="step-8-commit-your-changes-and-push-to-github">Step 8: Commit your changes and push to Github</h3>
<p>The next step is to commit these new files to your local git repo:</p> <p>The next step is to commit these new files to your local git repo:</p>
<pre><code>$ git commit -a -m &quot;initial commit for assignment-x&quot;</code></pre> <pre><code>$ git commit -a -m &quot;initial commit for assignment-x&quot;</code></pre>
<h3 id="git-push-1">git push</h3>
<p>And push the commit to your assignments github repo:</p> <p>And push the commit to your assignments github repo:</p>
<pre><code>$ git push origin master</code></pre> <pre><code>$ git push origin master</code></pre>
<p>You should now see these changes online in your new <code>cth2016-assignments/assignment-x/</code> directory:</p> <p>You should now see these changes online in your new <code>cth2016-assignments/assignment-x/</code> directory:</p>
<p><img src="./img/github-assignment-x.png" class='inline-img'/></p> <p><img src="./img/github-assignment-x.png" class='inline-img'/></p>
<p>NOTE: <code>node_modules</code> is not be pushed to github, why? Because when someone will clone your project (your instructor for example), she/he will <code>npm install</code> it her/himself as it is listed as a dependency in <code>package.json</code>.</p>
<hr /> <hr />
<h2 id="updating-your-assignment-as-you-make-progress">Updating your assignment as you make progress</h2>
<p>It is assumed that you will make many changes to your assigment while your a working on it.</p>
<p>The ususall cycle of working on some piece of code is to first (1) add you files to the repo (re: Step 7), (2) modify your files while you are working, and (3) when your code is working as inteted, commit your changes and push to github (re: Step 8).</p>
<p>The usual updating loop looks a bit like this:</p>
<ol style="list-style-type: decimal">
<li><code>git status</code></li>
<li>(optional) <code>git add</code> xyz depending on what was added to the project while working on it.</li>
<li><code>git commit -a -m &quot;message for the commit&quot;</code></li>
<li><code>git push origin master</code></li>
<li>work a bit more</li>
<li>loop and goto 1.</li>
</ol>
<h2 id="external-resources">External Resources</h2> <h2 id="external-resources">External Resources</h2>
<p>Github</p> <p>Github</p>
<ul> <ul>

160
assignments-conf.md
View File

@ -2,77 +2,41 @@
title: CTH-2016 / Assignments Configuration title: CTH-2016 / Assignments Configuration
--- ---
## Initialising your assignments directory ## Initialising your assignments repository
What follows is a recipe to initialise a git repository for your class assignments. What follows is a recipe to initialise a git repository for your class assignments.
### git init ### Step 1: Create repository on Github
Let's assume you have a directory on your machine ```~/cth2016``` where you intend to place all your assignments. To create a dedicated assignments directory: First create a repository under your github account. To do so, login to [Github](https://github.com) and on the top/right corner of the page select the '+' symbol and 'New repository'
$ cd ~/cth2016
$ mkdir cth2016-assignments
$ cd cth2016-assignments
This will create a new directory ```~/cth2016/cth2016-assignments/``` that will be turned into a git repository with the following commands:
$ git init
### git add
Your directory is now under version control, though there is nothing in there yet. Let's first create a README file describing what the repo is about:
$ echo 'Repository of CTH2016 assignments' > README
This command will create a new README file on your system and add to it the ```echo``` string. You can, of course, create the file manually using Sublime. To make sure git is keeping track of this new file, emit the following command:
$ git status
The above should display the new file in the list of changes to the repo since it has been created. Yet the README file _is not_ currently added to the repo (marked in red). To add the file to the repo:
$ git add README
Now ```git status``` should list the file in green and mark it as new. Any files that will be added to the directory will need to be added to the repo using the ```git add``` command.
### git commit
When adding new files or changing them, you need to commit these to the repo:
$ git commit -a -m 'initial commit'
From the git command above ```-a``` means to you are committing all changes listed by ```git status``` and ```-m``` is the message for the commit. If you do a ```git status``` you should now see that the README file dissapeared from the list of changes since it has just been committed. Changing the README file will re-introduce it to list of changes. A commit is like a recorded snapshot of the repo, any changes that occur after the commit will be flagged in ```git status```.
### github
Now that you have added a README file and committed this change to your local repo, it is time to link it to Github so that your instructor and your peers can "clone" it. To do so, login to [Github](https://github.com) and on the top/right corner of the page select the '+' symbol and 'New repository'
<img src="./img/github-new-repo.png" width='250px' class='inline-img'/> <img src="./img/github-new-repo.png" width='250px' class='inline-img'/>
and give it a name, make it public and do not initialise it with a README since you already have one: Then fill in the information for the assignments repo.
* Note 1: Select "Initialize this repository with a README"
* Note 2: From the "Add .gitignore" drop down menu, selecte Node
<img src="./img/github-new-repo-name.png" class='inline-img'/> <img src="./img/github-new-repo-name.png" class='inline-img'/>
When your (now empty) github repo is created, you need to copy its url:
### Step 2: Clone the repository to your own machine
Now that you have a github repo, you need to ```clone``` it to your machine. Open a terminal and navigate (```cd``` and ```ls```) to a prefered directory on your machine where you want your assignments to reside (for instance the Desktop).
When this is done, select the "Clone or download" menu on your githib repo's page and copy the listed url:
<img src="./img/github-new-repo-clone.png" class='inline-img'/> <img src="./img/github-new-repo-clone.png" class='inline-img'/>
and add a "remote origin" to your local git repo with this command Coming back to your terminal, simply type the following to ```clone``` the repo on your machine:
git remote add origin your-github-https-url $ git clone your-github-repo-url
where you replace "your-github-https-url" with your actual github url (for instance, on my repo it is: https://github.com/gauthiier/cth2016-assignments.git) (where your-github-repo-url is your copied/pasted url from github)
### git push This will create a directory under the current folder where your terminal is. To view the changes, simply type:
When this is done, you can now ```push``` your local changes to the online github repo $ ls -al
git push origin master
If you refresh the github webpage, you should now see it updated with your README file
<img src="./img/github-done.png" class='inline-img'/>
Your local repo and your github repo are now linked and ready to go!
------- -------
@ -80,27 +44,34 @@ Your local repo and your github repo are now linked and ready to go!
What follows is a recipe to create a new assignment in your newly initialised git assignments repository. What follows is a recipe to create a new assignment in your newly initialised git assignments repository.
### assignment-x ### Step 1: Create a new directory under your assignments repository
If you have followed the previous section, you should now have a directory named ```~/cth2016/cth2016-assignments/``` under which you will add a new ```assignment-x```. To create the new directory: If you have followed the previous section, you should now have a repositroy on your machine which is linked to your github account. Let's assume that your repo is named ```cth2016-assignments/``` and resides on your Desktop.
To create a new assigment, you need to point your terminal to the repo:
$ cd ~/Desktop/cth2016-assignments/
and then create a new directory, which I will call ```assignment-x```. To do so, on the terminal, simply type:
$ cd ~/cth2016/cth2016-assignments/
$ mkdir assignment-x $ mkdir assignment-x
$ cd assignment-x $ cd assignment-x
### npm init This will create a new direcory ```assignment-x``` under ```~/Desktop/cth2016-assignments/```. The ```cd``` command puts your terminal inside this newly created directory so that you can initialise your actual project in step 2.
Node has a package manager named ```npm``` (n-ode, p-ackage, m-anager) that automates the task of creating a project from scratch and configures it in a way that is compatible with other node projects. We will use ```npm``` during the course of the module. ### Step 2: Initialise you project with npm init
To initialise a new project/assignment, simply emit the follow command: Node has a package manager named ```npm``` (n-ode, p-ackage, m-anager) that automates the task of creating a project from scratch and configures it in a way that is compatible with other node projects. We will use ```npm``` during the module.
To initialise your new assignment under ```assignment-x```, simply emit the follow command:
$ npm init $ npm init
and you will be asked various questions regarding your project's name, version, description, entry point, author, etc. which you can configure at will (press <'enter'> to select and move to the next configuration step). With this commad you will be asked various questions regarding your project's name, version, description, entry point, author, etc. which you can configure at will (press <'enter'> to select and move to the next configuration step).
A ```package.json``` file is created upon the completion of ```npm init```. This file contains all the configurations you selected and can be edited manually. A ```package.json``` file is created upon the completion of ```npm init```. This file contains all the configurations you selected and can be edited manually.
### npm install --save commander ### Step 3 (optional): npm install --save commander
This step is optional, yet recommended for your assignment. When making a node application, modules/libraries can be made part of your project using ```npm```. Thousands of javascript libraries are available on [www.npmjs.com](https://www.npmjs.com) which you can install with a simple ```npm``` command. This step is optional, yet recommended for your assignment. When making a node application, modules/libraries can be made part of your project using ```npm```. Thousands of javascript libraries are available on [www.npmjs.com](https://www.npmjs.com) which you can install with a simple ```npm``` command.
@ -110,15 +81,17 @@ As in the first session of the class on the Command Line Interface (CLI), we wil
This will create a ```node_modules``` directory next to ```package.json``` where the commander code is placed. All modules installed using ```npm``` will reside in this ```node_modules``` directory. This will create a ```node_modules``` directory next to ```package.json``` where the commander code is placed. All modules installed using ```npm``` will reside in this ```node_modules``` directory.
### index.js ### Step 4: Create your actual assigment script(s)
Now that you have an npm project created and installed commander it is time to create an ```index.js``` file containing the code for the assignment. Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output ```"Hello!"```, ```"Dag!"``` or ```"Allô!"``` depending on a command line arguments passed to the script which can be of the type ```en``` (english), ```nl``` (nederlands), ```fr``` (français) or nothing. Now that you have an npm project created and installed commander it is time to create your script(s). For instance, in this example, I will create ```index.js``` file containing the code for the fake assignment. This file can be called anything (for instance, person.js as in the example in class during week1).
To create ```index.js``` simply type (or, alternatively, create it with Sublime): Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output ```"Hello!"```, ```"Dag!"``` or ```"Allô!"``` depending on a command line arguments passed to the script which can be of the type ```en``` (english), ```nl``` (nederlands), ```fr``` (français) or nothing.
To create ```index.js``` simply type (or, alternatively, create it with Sublime Text):
$ touch index.js $ touch index.js
Now open the file and input the desired code: Now open the file usign Sublime Text, copy/paste or input the desired code and save:
```javascript ```javascript
@ -148,19 +121,24 @@ switch(program.language)
} }
``` ```
### Step 5: Run you script
To run the script To run the script
$ node index.js -l fr $ node index.js -l fr
Allô!
where you can replace ```fr``` by ```en``` or ```nl``` or nothing. Try it out! where you can replace ```fr``` by ```en``` or ```nl``` or nothing. Try it out!
### README If you called you script another name (for instance, person.js), please change the above ```index.js``` with the name of your own script.
### Step 6: Create a README
One of the interesting feature of commander is that it can auto generate a ```"help"``` output from your script based on the command line options you have listed in your program. One of the interesting feature of commander is that it can auto generate a ```"help"``` output from your script based on the command line options you have listed in your program.
To see this help output, simply type: To see this help output, simply type:
node index.js --help $ node index.js --help
``` ```
Usage: index [options] Usage: index [options]
@ -179,36 +157,36 @@ To initialise a README and add the ```help``` output from your script:
$ node index.js --help > README $ node index.js --help > README
You can, of course, edit this README manually. It is nonetheless a very good practice to start the redaction with the ```help``` as it signals how to use your script to people that may be interested in it. Alternatively, you can create the README with Sublime Text and copy/paste the result of the ```--help``` manually.
### git add It is a very good practice to start the redaction with the ```--help``` as it signals how to use your script to people that may be interested in it.
### Step 7: Add your created files to git
Now that you have a proper project initialised, the next step is to add all its files to git. Now that you have a proper project initialised, the next step is to add all its files to git.
Yet before we do so, there one important file you need to fetch from github which will instruct git not to include to you repository unwanted files that may be installed by ```npm``` or by your operating system. Git has a special file called ```.gitignore``` that lists files and file patterns that have to be ignored by git. Luckily, there is a [github repository](https://github.com/github/gitignore) maintained by the git community that lists common files to ignore depending on the programming language and environment your are using. To view which file needs to be added to git type:
To download the Node ```.gitignore``` and install it under the current ```assignment-x```, type the following command:
$ wget https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -O .gitignore
It is now time to look which file needs to be added to git. In order to do so type:
$ git status $ git status
This should indicate which directories and/or files that are untracked. If you have followed the previous steps, ```git status``` should simply signal that the current directory ```./``` is untracked. To add it to git: This should indicate which directories and/or files are untracked by git.
If you have followed the previous steps, ```git status``` should simply signal that the current directory ```./``` is untracked. To add it to git:
$ git add ./ $ git add ./
To make sure git properly added the new assignment, simply check with ```git status``` that your ```package.json```, ```index.js```, ```README```, and various file in ```node_modules``` are marked as new files (green). To make sure git properly added the new assignment, simply type (again):
### git commit $ git status
and check that your ```package.json```, ```index.js``` (or whatever you have called your file(s)), and ```README``` are marked as new files (green).
### Step 8: Commit your changes and push to Github
The next step is to commit these new files to your local git repo: The next step is to commit these new files to your local git repo:
$ git commit -a -m "initial commit for assignment-x" $ git commit -a -m "initial commit for assignment-x"
### git push
And push the commit to your assignments github repo: And push the commit to your assignments github repo:
$ git push origin master $ git push origin master
@ -217,8 +195,26 @@ You should now see these changes online in your new ```cth2016-assignments/assig
<img src="./img/github-assignment-x.png" class='inline-img'/> <img src="./img/github-assignment-x.png" class='inline-img'/>
NOTE: ```node_modules``` is not be pushed to github, why? Because when someone will clone your project (your instructor for example), she/he will ```npm install``` it her/himself as it is listed as a dependency in ```package.json```.
------- -------
## Updating your assignment as you make progress
It is assumed that you will make many changes to your assigment while your a working on it.
The ususall cycle of working on some piece of code is to first (1) add you files to the repo (re: Step 7), (2) modify your files while you are working, and (3) when your code is working as inteted, commit your changes and push to github (re: Step 8).
The usual updating loop looks a bit like this:
1. ```git status```
2. (optional) ```git add``` xyz depending on what was added to the project while working on it.
3. ```git commit -a -m "message for the commit"```
4. ```git push origin master```
5. work a bit more
6. loop and goto 1.
## External Resources ## External Resources
Github Github

BIN
img/github-assignment-x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 182 KiB

BIN
img/github-new-repo-clone.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 200 KiB

BIN
img/github-new-repo-name.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 244 KiB

10
index.html
View File

@ -16,6 +16,16 @@
<header> <header>
<h1 class="title">CTH-2016</h1> <h1 class="title">CTH-2016</h1>
</header> </header>
<nav id="TOC">
<ul>
<li><a href="#course-synopsis-description">Course Synopsis / Description</a></li>
<li><a href="#syllabus">Syllabus</a></li>
<li><a href="#assignments">Assignments</a></li>
<li><a href="#assessment-grading">Assessment / Grading</a></li>
<li><a href="#study-load">Study load</a></li>
<li><a href="#instructor">Instructor</a></li>
</ul>
</nav>
<h2 id="course-synopsis-description">Course Synopsis / Description</h2> <h2 id="course-synopsis-description">Course Synopsis / Description</h2>
<p>In this module students will learn how to read and write computer code. Rather than writing discursive texts to address certain cultural artefacts, as it is usually and rightly practiced in the Humanities, students learn how to write software to perform machinic readings of these artefacts. By learning how to write code in a contemporary programming language and how to interpret the workings and effects of their programs, students develop a type of literacy that allow them to conduct novel types of Humanities observations, explorations and expressions when addressing contemporary culture and its digitally mediated objects and subjects.</p> <p>In this module students will learn how to read and write computer code. Rather than writing discursive texts to address certain cultural artefacts, as it is usually and rightly practiced in the Humanities, students learn how to write software to perform machinic readings of these artefacts. By learning how to write code in a contemporary programming language and how to interpret the workings and effects of their programs, students develop a type of literacy that allow them to conduct novel types of Humanities observations, explorations and expressions when addressing contemporary culture and its digitally mediated objects and subjects.</p>
<p>At the end of the course the student is able to:</p> <p>At the end of the course the student is able to:</p>

1
ppp Normal file
View File

@ -0,0 +1 @@
pandoc -s index.md --template=style/template.html5 -c style/html5.css -o index.html --toc