Compare commits
No commits in common. "master" and "gh-pages" have entirely different histories.
11
.gitignore
vendored
@ -1,11 +0,0 @@
|
|||||||
# based on https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
|
|
||||||
|
|
||||||
*.DS_Store
|
|
||||||
.AppleDouble
|
|
||||||
.LSOverride
|
|
||||||
|
|
||||||
# Thumbnails
|
|
||||||
._*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
240
assignments-conf.html
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="pandoc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
<title>CTH-2016 / Assignments Configuration</title>
|
||||||
|
<style type="text/css">code{white-space: pre;}</style>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<style type="text/css">
|
||||||
|
div.sourceCode { overflow-x: auto; }
|
||||||
|
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
|
||||||
|
margin: 0; padding: 0; vertical-align: baseline; border: none; }
|
||||||
|
table.sourceCode { width: 100%; line-height: 100%; }
|
||||||
|
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
|
||||||
|
td.sourceCode { padding-left: 5px; }
|
||||||
|
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
|
||||||
|
code > span.dt { color: #902000; } /* DataType */
|
||||||
|
code > span.dv { color: #40a070; } /* DecVal */
|
||||||
|
code > span.bn { color: #40a070; } /* BaseN */
|
||||||
|
code > span.fl { color: #40a070; } /* Float */
|
||||||
|
code > span.ch { color: #4070a0; } /* Char */
|
||||||
|
code > span.st { color: #4070a0; } /* String */
|
||||||
|
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
|
||||||
|
code > span.ot { color: #007020; } /* Other */
|
||||||
|
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
|
||||||
|
code > span.fu { color: #06287e; } /* Function */
|
||||||
|
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
|
||||||
|
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
|
||||||
|
code > span.cn { color: #880000; } /* Constant */
|
||||||
|
code > span.sc { color: #4070a0; } /* SpecialChar */
|
||||||
|
code > span.vs { color: #4070a0; } /* VerbatimString */
|
||||||
|
code > span.ss { color: #bb6688; } /* SpecialString */
|
||||||
|
code > span.im { } /* Import */
|
||||||
|
code > span.va { color: #19177c; } /* Variable */
|
||||||
|
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
|
||||||
|
code > span.op { color: #666666; } /* Operator */
|
||||||
|
code > span.bu { } /* BuiltIn */
|
||||||
|
code > span.ex { } /* Extension */
|
||||||
|
code > span.pp { color: #bc7a00; } /* Preprocessor */
|
||||||
|
code > span.at { color: #7d9029; } /* Attribute */
|
||||||
|
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
|
||||||
|
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
|
||||||
|
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
|
||||||
|
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="style/html5.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<content>
|
||||||
|
<header>
|
||||||
|
<h1 class="title">CTH-2016 / Assignments Configuration</h1>
|
||||||
|
</header>
|
||||||
|
<nav id="TOC">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#initialising-your-assignments-repository">Initialising your assignments repository</a><ul>
|
||||||
|
<li><a href="#step-1-create-repository-on-github">Step 1: Create repository on Github</a></li>
|
||||||
|
<li><a href="#step-2.0-clone-the-repository-to-your-own-machine-using-git">Step 2.0: Clone the repository to your own machine using git</a></li>
|
||||||
|
<li><a href="#alternative-step-2.1-clone-the-repository-to-your-own-machine-using-github-desktop">(Alternative) Step 2.1: Clone the repository to your own machine using Github Desktop</a></li>
|
||||||
|
</ul></li>
|
||||||
|
<li><a href="#creating-a-new-assignment-node-git">Creating a new assignment (Node + Git)</a><ul>
|
||||||
|
<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="#step-2-initialise-you-project-with-npm-init">Step 2: Initialise you project with npm init</a></li>
|
||||||
|
<li><a href="#step-3-optional-npm-install---save-commander">Step 3 (optional): npm install --save commander</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="#step-5-run-you-script">Step 5: Run you script</a></li>
|
||||||
|
<li><a href="#step-6-create-a-readme">Step 6: Create a README</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="#step-8-commit-your-changes-and-push-to-github">Step 8: Commit your changes and push to Github</a></li>
|
||||||
|
<li><a href="#alternative-steps-7-8-add-commit-and-synchronise-your-work-with-github-desktop">(Alternative) Steps 7-8: Add, Commit and Synchronise your work with Github Desktop</a></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="#alternative-updating-your-assignment-as-you-make-progress-using-github-desktop">(Alternative) Updating your assignment as you make progress using Github Desktop</a></li>
|
||||||
|
<li><a href="#external-resources">External Resources</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<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>
|
||||||
|
<h3 id="step-1-create-repository-on-github">Step 1: Create repository on Github</h3>
|
||||||
|
<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>
|
||||||
|
<p><img src="./img/github-new-repo.png" width='250px' class='inline-img'/></p>
|
||||||
|
<p>Then fill in the information for the assignments repo.</p>
|
||||||
|
<p><strong>* Note 1: Select "Initialize this repository with a README"</strong> <strong>* Note 2: From the "Add .gitignore" drop down menu, selecte Node</strong></p>
|
||||||
|
<p><img src="./img/github-new-repo-name.png" class='inline-img'/></p>
|
||||||
|
<h3 id="step-2.0-clone-the-repository-to-your-own-machine-using-git">Step 2.0: Clone the repository to your own machine using git</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 "Clone or download" 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>Coming back to your terminal, simply type the following to <code>clone</code> the repo on your machine:</p>
|
||||||
|
<pre><code>$ git clone your-github-repo-url</code></pre>
|
||||||
|
<p>(where your-github-repo-url is your copied/pasted url from github)</p>
|
||||||
|
<p>This will create a directory under the current folder where your terminal is. To view the changes, simply type:</p>
|
||||||
|
<pre><code>$ ls -al</code></pre>
|
||||||
|
<h3 id="alternative-step-2.1-clone-the-repository-to-your-own-machine-using-github-desktop">(Alternative) Step 2.1: Clone the repository to your own machine using Github Desktop</h3>
|
||||||
|
<p>This is an alternative to Step 2.0: Clone the repository to your own machine using git</p>
|
||||||
|
<p>You can download a special Github GUI interface for git here: <a href="https://desktop.github.com" class="uri">https://desktop.github.com</a></p>
|
||||||
|
<p>Now to clone your repository (created on Step 1), select "Clone or download" menu on your githib repo's page and click on the "Open in Desktop":</p>
|
||||||
|
<p><img src="./img/github-new-repo-clone-desktop.png" class='inline-img'/></p>
|
||||||
|
<p>This will open Gihub Desktop and ask where you what to clone your Gihub repository on your machine.</p>
|
||||||
|
<p>For more information, please visit: <a href="https://help.github.com/desktop/guides/contributing/cloning-a-repository-from-github-to-github-desktop/" class="uri">https://help.github.com/desktop/guides/contributing/cloning-a-repository-from-github-to-github-desktop/</a></p>
|
||||||
|
<hr />
|
||||||
|
<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>
|
||||||
|
<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 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>
|
||||||
|
<p>To create a new assigment, you need to point your terminal to the repo:</p>
|
||||||
|
<pre><code>$ cd ~/Desktop/cth2016-assignments/</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>
|
||||||
|
<pre><code>$ mkdir assignment-x
|
||||||
|
$ cd assignment-x </code></pre>
|
||||||
|
<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>
|
||||||
|
<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 <'enter'> 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>
|
||||||
|
<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>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">"commander"</a> for our applications. To install it for you assignment, use the following command:</p>
|
||||||
|
<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>
|
||||||
|
<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 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>Though since I am not following a proper assignment per se, I will simply create a simple tri-lingual script that will output <code>"Hello!"</code>, <code>"Dag!"</code> or <code>"Allô!"</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>
|
||||||
|
<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">
|
||||||
|
<span class="co">// simplest tri-lingual program </span>
|
||||||
|
|
||||||
|
<span class="kw">var</span> program <span class="op">=</span> <span class="at">require</span>(<span class="st">'commander'</span>)<span class="op">;</span>
|
||||||
|
|
||||||
|
program
|
||||||
|
.<span class="at">version</span>(<span class="st">'0.1'</span>)
|
||||||
|
.<span class="at">option</span>(<span class="st">'-l, --language [code]'</span><span class="op">,</span> <span class="st">'Language'</span><span class="op">,</span> <span class="ss">/</span><span class="sc">^(</span><span class="ss">en</span><span class="sc">|</span><span class="ss">nl</span><span class="sc">|</span><span class="ss">fr</span><span class="sc">)$</span><span class="ss">/i</span>)
|
||||||
|
.<span class="at">parse</span>(<span class="va">process</span>.<span class="at">argv</span>)<span class="op">;</span>
|
||||||
|
|
||||||
|
<span class="cf">switch</span>(<span class="va">program</span>.<span class="at">language</span>)
|
||||||
|
<span class="op">{</span>
|
||||||
|
<span class="cf">case</span>(<span class="st">'en'</span>)<span class="op">:</span>
|
||||||
|
<span class="va">console</span>.<span class="at">log</span>(<span class="st">'Hello!'</span>)<span class="op">;</span>
|
||||||
|
<span class="cf">break</span><span class="op">;</span>
|
||||||
|
<span class="cf">case</span>(<span class="st">'nl'</span>)<span class="op">:</span>
|
||||||
|
<span class="va">console</span>.<span class="at">log</span>(<span class="st">'Dag!'</span>)<span class="op">;</span>
|
||||||
|
<span class="cf">break</span><span class="op">;</span>
|
||||||
|
<span class="cf">case</span>(<span class="st">'fr'</span>)<span class="op">:</span>
|
||||||
|
<span class="va">console</span>.<span class="at">log</span>(<span class="st">'Allô!'</span>)<span class="op">;</span>
|
||||||
|
<span class="cf">break</span><span class="op">;</span>
|
||||||
|
<span class="dt">default</span><span class="op">:</span>
|
||||||
|
<span class="va">console</span>.<span class="at">log</span>(<span class="st">'...'</span>)<span class="op">;</span>
|
||||||
|
<span class="cf">break</span><span class="op">;</span>
|
||||||
|
<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>
|
||||||
|
<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>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>"help"</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>
|
||||||
|
<pre><code>$ node index.js --help</code></pre>
|
||||||
|
<pre><code> Usage: index [options]
|
||||||
|
|
||||||
|
Options:
|
||||||
|
|
||||||
|
-h, --help output usage information
|
||||||
|
-V, --version output the version number
|
||||||
|
-l, --language [code] Language
|
||||||
|
</code></pre>
|
||||||
|
<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 "helper documentation".</p>
|
||||||
|
<p>To initialise a README and add the <code>help</code> output from your script:</p>
|
||||||
|
<pre><code>$ node index.js --help > README</code></pre>
|
||||||
|
<p>Alternatively, you can create the README with Sublime Text and copy/paste the result of the <code>--help</code> manually.</p>
|
||||||
|
<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>To view which file needs to be added to git type:</p>
|
||||||
|
<pre><code>$ git status</code></pre>
|
||||||
|
<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>
|
||||||
|
<p>To make sure git properly added the new assignment, simply type (again):</p>
|
||||||
|
<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>
|
||||||
|
<pre><code>$ git commit -a -m "initial commit for assignment-x"</code></pre>
|
||||||
|
<p>And push the commit to your assignments github repo:</p>
|
||||||
|
<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><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>
|
||||||
|
<h3 id="alternative-steps-7-8-add-commit-and-synchronise-your-work-with-github-desktop">(Alternative) Steps 7-8: Add, Commit and Synchronise your work with Github Desktop</h3>
|
||||||
|
<p>This is an alternative to Steps 7 and 8.</p>
|
||||||
|
<p>When you have cloned your repository using Github Desktop, you can synchronize the changes you have made in Steps 1 to 6 using the Github desktop interface:</p>
|
||||||
|
<p><img src="./img/github-repo-commit-synchronise-desktop.png" class='inline-img'/></p>
|
||||||
|
<p>First, commit your changes with the "Commit button" then synchronize your changes using the "Sync" button.</p>
|
||||||
|
<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 "message for the commit"</code></li>
|
||||||
|
<li><code>git push origin master</code></li>
|
||||||
|
<li>work a bit more</li>
|
||||||
|
<li>loop and goto 1.</li>
|
||||||
|
</ol>
|
||||||
|
<hr />
|
||||||
|
<h2 id="alternative-updating-your-assignment-as-you-make-progress-using-github-desktop">(Alternative) Updating your assignment as you make progress using Github Desktop</h2>
|
||||||
|
<p>When you have cloned your repository using Github Desktop, you can synchronize the changes you are making using the Github desktop interface:</p>
|
||||||
|
<p><img src="./img/github-repo-commit-synchronise-desktop.png" class='inline-img'/></p>
|
||||||
|
<p>First, commit your changes with the "Commit button" then synchronize your changes using the "Sync" button.</p>
|
||||||
|
<p>For more information: <a href="https://help.github.com/desktop/guides/contributing/committing-and-reviewing-changes-to-your-project/" class="uri">https://help.github.com/desktop/guides/contributing/committing-and-reviewing-changes-to-your-project/</a></p>
|
||||||
|
<h2 id="external-resources">External Resources</h2>
|
||||||
|
<p>Github</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://help.github.com/articles/set-up-git/">Github Help - Set Up Git</a></li>
|
||||||
|
<li><a href="https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/">Github Help - Adding an existing project</a></li>
|
||||||
|
<li><a href="https://help.github.com/desktop/guides/">Github Desktop</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>Git</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://git-scm.com/book/en/v1/Getting-Started">Git - Getting Started</a></li>
|
||||||
|
<li><a href="https://git-scm.com/videos">Git - Getting Started (Videos)</a></li>
|
||||||
|
<li><a href="http://swcarpentry.github.io/git-novice/">Software Carpentry - Git Tutorial</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>Node</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://nodeschool.io/#workshopper-list">Nodeschool</a></li>
|
||||||
|
</ul>
|
||||||
|
</content>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
274
assignments-conf.md
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
---
|
||||||
|
title: CTH-2016 / Assignments Configuration
|
||||||
|
---
|
||||||
|
|
||||||
|
## Initialising your assignments repository
|
||||||
|
|
||||||
|
What follows is a recipe to initialise a git repository for your class assignments.
|
||||||
|
|
||||||
|
### Step 1: Create repository on Github
|
||||||
|
|
||||||
|
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'
|
||||||
|
|
||||||
|
<img src="./img/github-new-repo.png" width='250px' class='inline-img'/>
|
||||||
|
|
||||||
|
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'/>
|
||||||
|
|
||||||
|
### Step 2.0: Clone the repository to your own machine using git
|
||||||
|
|
||||||
|
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'/>
|
||||||
|
|
||||||
|
Coming back to your terminal, simply type the following to ```clone``` the repo on your machine:
|
||||||
|
|
||||||
|
$ git clone your-github-repo-url
|
||||||
|
|
||||||
|
(where your-github-repo-url is your copied/pasted url from github)
|
||||||
|
|
||||||
|
This will create a directory under the current folder where your terminal is. To view the changes, simply type:
|
||||||
|
|
||||||
|
$ ls -al
|
||||||
|
|
||||||
|
### (Alternative) Step 2.1: Clone the repository to your own machine using Github Desktop
|
||||||
|
|
||||||
|
This is an alternative to Step 2.0: Clone the repository to your own machine using git
|
||||||
|
|
||||||
|
You can download a special Github GUI interface for git here: [https://desktop.github.com](https://desktop.github.com)
|
||||||
|
|
||||||
|
Now to clone your repository (created on Step 1), select "Clone or download" menu on your githib repo's page and click on the "Open in Desktop":
|
||||||
|
|
||||||
|
<img src="./img/github-new-repo-clone-desktop.png" class='inline-img'/>
|
||||||
|
|
||||||
|
This will open Gihub Desktop and ask where you what to clone your Gihub repository on your machine.
|
||||||
|
|
||||||
|
For more information, please visit: [https://help.github.com/desktop/guides/contributing/cloning-a-repository-from-github-to-github-desktop/](https://help.github.com/desktop/guides/contributing/cloning-a-repository-from-github-to-github-desktop/)
|
||||||
|
|
||||||
|
-------
|
||||||
|
|
||||||
|
## Creating a new assignment (Node + Git)
|
||||||
|
|
||||||
|
What follows is a recipe to create a new assignment in your newly initialised git assignments repository.
|
||||||
|
|
||||||
|
### Step 1: Create a new directory under your assignments repository
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
$ mkdir assignment-x
|
||||||
|
$ cd assignment-x
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### Step 2: Initialise you project with npm init
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|
As in the first session of the class on the Command Line Interface (CLI), we will be using ["commander"](https://www.npmjs.com/package/commander) for our applications. To install it for you assignment, use the following command:
|
||||||
|
|
||||||
|
$ npm install --save commander
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### Step 4: Create your actual assigment script(s)
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
Now open the file usign Sublime Text, copy/paste or input the desired code and save:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
// simplest tri-lingual program
|
||||||
|
|
||||||
|
var program = require('commander');
|
||||||
|
|
||||||
|
program
|
||||||
|
.version('0.1')
|
||||||
|
.option('-l, --language [code]', 'Language', /^(en|nl|fr)$/i)
|
||||||
|
.parse(process.argv);
|
||||||
|
|
||||||
|
switch(program.language)
|
||||||
|
{
|
||||||
|
case('en'):
|
||||||
|
console.log('Hello!');
|
||||||
|
break;
|
||||||
|
case('nl'):
|
||||||
|
console.log('Dag!');
|
||||||
|
break;
|
||||||
|
case('fr'):
|
||||||
|
console.log('Allô!');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log('...');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 5: Run you script
|
||||||
|
|
||||||
|
To run the script
|
||||||
|
|
||||||
|
$ node index.js -l fr
|
||||||
|
Allô!
|
||||||
|
|
||||||
|
where you can replace ```fr``` by ```en``` or ```nl``` or nothing. Try it out!
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
To see this help output, simply type:
|
||||||
|
|
||||||
|
$ node index.js --help
|
||||||
|
|
||||||
|
```
|
||||||
|
Usage: index [options]
|
||||||
|
|
||||||
|
Options:
|
||||||
|
|
||||||
|
-h, --help output usage information
|
||||||
|
-V, --version output the version number
|
||||||
|
-l, --language [code] Language
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
It is very common for command line scripts to feature such ```--help``` 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 "helper documentation".
|
||||||
|
|
||||||
|
To initialise a README and add the ```help``` output from your script:
|
||||||
|
|
||||||
|
$ node index.js --help > README
|
||||||
|
|
||||||
|
Alternatively, you can create the README with Sublime Text and copy/paste the result of the ```--help``` manually.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
To view which file needs to be added to git type:
|
||||||
|
|
||||||
|
$ git status
|
||||||
|
|
||||||
|
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 ./
|
||||||
|
|
||||||
|
To make sure git properly added the new assignment, simply type (again):
|
||||||
|
|
||||||
|
$ 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:
|
||||||
|
|
||||||
|
$ git commit -a -m "initial commit for assignment-x"
|
||||||
|
|
||||||
|
And push the commit to your assignments github repo:
|
||||||
|
|
||||||
|
$ git push origin master
|
||||||
|
|
||||||
|
You should now see these changes online in your new ```cth2016-assignments/assignment-x/``` directory:
|
||||||
|
|
||||||
|
<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```.
|
||||||
|
|
||||||
|
### (Alternative) Steps 7-8: Add, Commit and Synchronise your work with Github Desktop
|
||||||
|
|
||||||
|
This is an alternative to Steps 7 and 8.
|
||||||
|
|
||||||
|
When you have cloned your repository using Github Desktop, you can synchronize the changes you have made in Steps 1 to 6 using the Github desktop interface:
|
||||||
|
|
||||||
|
<img src="./img/github-repo-commit-synchronise-desktop.png" class='inline-img'/>
|
||||||
|
|
||||||
|
First, commit your changes with the "Commit button" then synchronize your changes using the "Sync" button.
|
||||||
|
|
||||||
|
-------
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
----------
|
||||||
|
|
||||||
|
## (Alternative) Updating your assignment as you make progress using Github Desktop
|
||||||
|
|
||||||
|
When you have cloned your repository using Github Desktop, you can synchronize the changes you are making using the Github desktop interface:
|
||||||
|
|
||||||
|
<img src="./img/github-repo-commit-synchronise-desktop.png" class='inline-img'/>
|
||||||
|
|
||||||
|
First, commit your changes with the "Commit button" then synchronize your changes using the "Sync" button.
|
||||||
|
|
||||||
|
For more information: [https://help.github.com/desktop/guides/contributing/committing-and-reviewing-changes-to-your-project/](https://help.github.com/desktop/guides/contributing/committing-and-reviewing-changes-to-your-project/)
|
||||||
|
|
||||||
|
|
||||||
|
## External Resources
|
||||||
|
|
||||||
|
Github
|
||||||
|
|
||||||
|
* [Github Help - Set Up Git](https://help.github.com/articles/set-up-git/)
|
||||||
|
* [Github Help - Adding an existing project](https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/)
|
||||||
|
* [Github Desktop](https://help.github.com/desktop/guides/)
|
||||||
|
|
||||||
|
Git
|
||||||
|
|
||||||
|
* [Git - Getting Started](https://git-scm.com/book/en/v1/Getting-Started)
|
||||||
|
* [Git - Getting Started (Videos)](https://git-scm.com/videos)
|
||||||
|
* [Software Carpentry - Git Tutorial](http://swcarpentry.github.io/git-novice/)
|
||||||
|
|
||||||
|
Node
|
||||||
|
|
||||||
|
* [Nodeschool](https://nodeschool.io/#workshopper-list)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
94
assignments.html
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="pandoc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
<title>CTH-2016 / Assignments</title>
|
||||||
|
<style type="text/css">code{white-space: pre;}</style>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<link rel="stylesheet" href="style/html5.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<content>
|
||||||
|
<header>
|
||||||
|
<h1 class="title">CTH-2016 / Assignments</h1>
|
||||||
|
</header>
|
||||||
|
<nav id="TOC">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#assignment-1-bookstore-cli">Assignment #1: Bookstore (CLI)</a><ul>
|
||||||
|
<li><a href="#grading">Grading</a></li>
|
||||||
|
</ul></li>
|
||||||
|
<li><a href="#assignment-2-love-letters">Assignment #2: (Love) Letters</a><ul>
|
||||||
|
<li><a href="#grading-1">Grading</a></li>
|
||||||
|
<li><a href="#helpful-links">Helpful links</a></li>
|
||||||
|
</ul></li>
|
||||||
|
<li><a href="#assignment-3-localhosts-imitation-game">Assignment #3: Localhost's Imitation Game</a><ul>
|
||||||
|
<li><a href="#grading-2">Grading</a></li>
|
||||||
|
</ul></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h2 id="assignment-1-bookstore-cli">Assignment #1: Bookstore (CLI)</h2>
|
||||||
|
<p>For this assignment you will be developing a command line interface for a fake "bookstore". Using the node library <a href="https://www.npmjs.com/package/commander">commander</a> you will make available a command line interface to your program which, when executed, will output information of books that match the following criteria: (1) book title, (2) author name, (3) price, and (4) kind (paperback or hardcover).</p>
|
||||||
|
<p>In order to gather data for your script, select 5 books from either the <a href="http://www.athenaeum.nl">Athenaeum Boekhandel</a> or the <a href="http://www.abc.nl">American Book Center</a> and construct a simple "hardcoded" database out of these (see example from the class).</p>
|
||||||
|
<p>Below are two examples of inputs and outputs where the data was taken from the Athenaeum Boekhandel</p>
|
||||||
|
<pre><code>$ node bookstore.js --author "Hans Ulrich Orbist"
|
||||||
|
|
||||||
|
Title: Ways of Curating
|
||||||
|
Author: Hans Ulrich Orbist
|
||||||
|
Price: 16.95
|
||||||
|
Kind: Paperback
|
||||||
|
</code></pre>
|
||||||
|
<pre><code>$ node bookstore.js --title "The Hatred of Poetry"
|
||||||
|
|
||||||
|
Title: The Hatred of Poetry
|
||||||
|
Author: Ben Lerner
|
||||||
|
Price: 13.95
|
||||||
|
Kind: Paperback</code></pre>
|
||||||
|
<h3 id="grading">Grading</h3>
|
||||||
|
<p>This assignment will be graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented (don't forget your README!) and 3) is the code efficient.</p>
|
||||||
|
<p>You will hand in your assignment through your account on Github. Please refer to <a href="./assignments-conf.html">CTH-2016 / Assignments Configuration</a> on how to set up your assignments portfolio properly.</p>
|
||||||
|
<p>The dues date for this assignment is — Tuesday November 8 2016 at 13:00.</p>
|
||||||
|
<h2 id="assignment-2-love-letters">Assignment #2: (Love) Letters</h2>
|
||||||
|
<p>In this assignment you will write a script that will generate a love letter each time it is executed, producing similar letters, yet not exactly the same, as the ones of computing pioneer Christopher Strachey's.</p>
|
||||||
|
<p>The basic sentence structure of your letter will resemble this: "determiner + adjective + noun + adverb + verb + determiner + adjective + noun". Based on this, as an example, your script could output a sentence such as the following: "MY SWEET LONGING BREATHLESSLY ADORES YOUR ANXIOUS WISH". Furthermore, your script should allow for variations of this sentence structure, that is, exclude (or not) certain components depending on randomness and yet keep the sentence grammatically correct. For example the sentence above could become: "MY SWEET LONGING ADORES YOUR WISH".</p>
|
||||||
|
<p>The output of your script (what is printed on the terminal) needs to be well formatted, meaning that it needs to resemble a letter with margins and spaces. Moreover, the number of sentences and their width needs to be parametric, that is, your script will have options for both number of sentences and sentence width (in characters).</p>
|
||||||
|
<p>As an example (based on Strachey's), below is a generated letter of 80 characters wide and of 5 sentence:</p>
|
||||||
|
<pre><code>$ node letter.js -w 80 -s 5
|
||||||
|
|
||||||
|
|
||||||
|
DEAR DUCK
|
||||||
|
|
||||||
|
|
||||||
|
YOUR ARE MY ADORABLE YEARNING. MY AMBITION HOLDS DEAR YOUR FOND YEARNING. MY
|
||||||
|
RAPTURE CHERISHES YOUR INFATUATION. YOUR ARE MY KEEN AFFECTION. : MY AVID FANCY.
|
||||||
|
|
||||||
|
|
||||||
|
YOURS KEENLY
|
||||||
|
M.U.C.
|
||||||
|
</code></pre>
|
||||||
|
<p>Please be creative with your choice of words and sentence composition. As mentioned above, the default theme of the letter is a love one, though you are more than welcome to come up with another theme (Bank letter, Government letter, Birthday letter, etc.) as long as it produces grammatically correct sentences and addresses the reader meaningfully.</p>
|
||||||
|
<h3 id="grading-1">Grading</h3>
|
||||||
|
<p>This assignment will be graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented (is the output well formatted) and 3) is the code efficient and generative.</p>
|
||||||
|
<p>You will hand in your assignment through your account on Github (as in week 1).</p>
|
||||||
|
<p>The dues date for this assignment is — Tuesday November 15 2016 at 13:00.</p>
|
||||||
|
<h3 id="helpful-links">Helpful links</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://learnenglish.britishcouncil.org/en/english-grammar/determiners-and-quantifiers">Determiners and quantifiers</a></li>
|
||||||
|
<li><a href="https://learnenglish.britishcouncil.org/en/english-grammar/adverbials">Adverbials</a></li>
|
||||||
|
<li><a href="https://learnenglish.britishcouncil.org/en/english-grammar">(General) English Grammar</a></li>
|
||||||
|
<li><a href="http://www.alpha60.de/art/love_letters/archive/muc/">Archive of emulated Christopher Strachey's Love Letters</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="assignment-3-localhosts-imitation-game">Assignment #3: Localhost's Imitation Game</h2>
|
||||||
|
<p>This assignment is inspired by Alan Turing's <a href="http://www.loebner.net/Prizef/TuringArticle.html">Imitation Game</a> and Joseph Weizenbaum's <a href="https://en.wikipedia.org/wiki/ELIZA">ELIZA</a>.</p>
|
||||||
|
<p>You will write a client / server application that puts into conversation a human (client) and a very basic artificial intelligence (server). The idea is to produce a HTML "chat" interface where a human subject can discuss and converse with your server-side script. Your script should be able to recognise certain sentences, phrases or keywords that are sent to it by the human subject and, in turn, reply to these queries appropriately and meaningfully using basic randomly generated sentences (similar to the ones you created in assignment #2).</p>
|
||||||
|
<p>A minimum of 3 variation is expected from your script, meaning that it should recognise and reply to at least 3 types of sentences, phrases or keywords.</p>
|
||||||
|
<h3 id="grading-2">Grading</h3>
|
||||||
|
<p>This assignment will be graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented (is the output well formatted) and 3) is the code efficient and generative.</p>
|
||||||
|
<p>You will hand in your assignment through your account on Github (as in weeks 1 and 2).</p>
|
||||||
|
<p>The dues date for this assignment is — Tuesday November 22 2016 at 13:00.</p>
|
||||||
|
</content>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
99
assignments.md
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
title: CTH-2016 / Assignments
|
||||||
|
---
|
||||||
|
|
||||||
|
## Assignment #1: Bookstore (CLI)
|
||||||
|
|
||||||
|
For this assignment you will be developing a command line interface for a fake "bookstore". Using the node library [commander](https://www.npmjs.com/package/commander) you will make available a command line interface to your program which, when executed, will output information of books that match the following criteria: (1) book title, (2) author name, (3) price, and (4) kind (paperback or hardcover).
|
||||||
|
|
||||||
|
In order to gather data for your script, select 5 books from either the [Athenaeum Boekhandel](http://www.athenaeum.nl) or the [American Book Center](http://www.abc.nl) and construct a simple "hardcoded" database out of these (see example from the class).
|
||||||
|
|
||||||
|
Below are two examples of inputs and outputs where the data was taken from the Athenaeum Boekhandel
|
||||||
|
|
||||||
|
```
|
||||||
|
$ node bookstore.js --author "Hans Ulrich Orbist"
|
||||||
|
|
||||||
|
Title: Ways of Curating
|
||||||
|
Author: Hans Ulrich Orbist
|
||||||
|
Price: 16.95
|
||||||
|
Kind: Paperback
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
$ node bookstore.js --title "The Hatred of Poetry"
|
||||||
|
|
||||||
|
Title: The Hatred of Poetry
|
||||||
|
Author: Ben Lerner
|
||||||
|
Price: 13.95
|
||||||
|
Kind: Paperback
|
||||||
|
```
|
||||||
|
|
||||||
|
### Grading
|
||||||
|
|
||||||
|
This assignment will be graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented (don't forget your README!) and 3) is the code efficient.
|
||||||
|
|
||||||
|
You will hand in your assignment through your account on Github. Please refer to [CTH-2016 / Assignments Configuration](./assignments-conf.html) on how to set up your assignments portfolio properly.
|
||||||
|
|
||||||
|
The dues date for this assignment is — Tuesday November 8 2016 at 13:00.
|
||||||
|
|
||||||
|
## Assignment #2: (Love) Letters
|
||||||
|
|
||||||
|
In this assignment you will write a script that will generate a love letter each time it is executed, producing similar letters, yet not exactly the same, as the ones of computing pioneer Christopher Strachey's.
|
||||||
|
|
||||||
|
The basic sentence structure of your letter will resemble this: "determiner + adjective + noun + adverb + verb + determiner + adjective + noun". Based on this, as an example, your script could output a sentence such as the following: "MY SWEET LONGING BREATHLESSLY ADORES YOUR ANXIOUS WISH". Furthermore, your script should allow for variations of this sentence structure, that is, exclude (or not) certain components depending on randomness and yet keep the sentence grammatically correct. For example the sentence above could become: "MY SWEET LONGING ADORES YOUR WISH".
|
||||||
|
|
||||||
|
The output of your script (what is printed on the terminal) needs to be well formatted, meaning that it needs to resemble a letter with margins and spaces. Moreover, the number of sentences and their width needs to be parametric, that is, your script will have options for both number of sentences and sentence width (in characters).
|
||||||
|
|
||||||
|
As an example (based on Strachey's), below is a generated letter of 80 characters wide and of 5 sentence:
|
||||||
|
|
||||||
|
```
|
||||||
|
$ node letter.js -w 80 -s 5
|
||||||
|
|
||||||
|
|
||||||
|
DEAR DUCK
|
||||||
|
|
||||||
|
|
||||||
|
YOUR ARE MY ADORABLE YEARNING. MY AMBITION HOLDS DEAR YOUR FOND YEARNING. MY
|
||||||
|
RAPTURE CHERISHES YOUR INFATUATION. YOUR ARE MY KEEN AFFECTION. : MY AVID FANCY.
|
||||||
|
|
||||||
|
|
||||||
|
YOURS KEENLY
|
||||||
|
M.U.C.
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
Please be creative with your choice of words and sentence composition. As mentioned above, the default theme of the letter is a love one, though you are more than welcome to come up with another theme (Bank letter, Government letter, Birthday letter, etc.) as long as it produces grammatically correct sentences and addresses the reader meaningfully.
|
||||||
|
|
||||||
|
### Grading
|
||||||
|
|
||||||
|
This assignment will be graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented (is the output well formatted) and 3) is the code efficient and generative.
|
||||||
|
|
||||||
|
You will hand in your assignment through your account on Github (as in week 1).
|
||||||
|
|
||||||
|
The dues date for this assignment is — Tuesday November 15 2016 at 13:00.
|
||||||
|
|
||||||
|
### Helpful links
|
||||||
|
|
||||||
|
* [Determiners and quantifiers](https://learnenglish.britishcouncil.org/en/english-grammar/determiners-and-quantifiers)
|
||||||
|
* [Adverbials](https://learnenglish.britishcouncil.org/en/english-grammar/adverbials)
|
||||||
|
* [(General) English Grammar](https://learnenglish.britishcouncil.org/en/english-grammar)
|
||||||
|
* [Archive of emulated Christopher Strachey's Love Letters](http://www.alpha60.de/art/love_letters/archive/muc/)
|
||||||
|
|
||||||
|
## Assignment #3: Localhost's Imitation Game
|
||||||
|
|
||||||
|
This assignment is inspired by Alan Turing's [Imitation Game](http://www.loebner.net/Prizef/TuringArticle.html) and Joseph Weizenbaum's [ELIZA](https://en.wikipedia.org/wiki/ELIZA).
|
||||||
|
|
||||||
|
You will write a client / server application that puts into conversation a human (client) and a very basic artificial intelligence (server). The idea is to produce a HTML "chat" interface where a human subject can discuss and converse with your server-side script. Your script should be able to recognise certain sentences, phrases or keywords that are sent to it by the human subject and, in turn, reply to these queries appropriately and meaningfully using basic randomly generated sentences (similar to the ones you created in assignment #2).
|
||||||
|
|
||||||
|
A minimum of 3 variation is expected from your script, meaning that it should recognise and reply to at least 3 types of sentences, phrases or keywords.
|
||||||
|
|
||||||
|
### Grading
|
||||||
|
|
||||||
|
This assignment will be graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented (is the output well formatted) and 3) is the code efficient and generative.
|
||||||
|
|
||||||
|
You will hand in your assignment through your account on Github (as in weeks 1 and 2).
|
||||||
|
|
||||||
|
The dues date for this assignment is — Tuesday November 22 2016 at 13:00.
|
||||||
|
|
||||||
|
|
||||||
50
final_project.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="pandoc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
<title>CTH-2016 / Final Project</title>
|
||||||
|
<style type="text/css">code{white-space: pre;}</style>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<link rel="stylesheet" href="style/html5.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<content>
|
||||||
|
<header>
|
||||||
|
<h1 class="title">CTH-2016 / Final Project</h1>
|
||||||
|
</header>
|
||||||
|
<p>The final project is the final instalment of the CTH-2016 course. The project is a group assignment whose topic is open ended for you to choose though it must relate to some of the methods and techniques you have learned in class.</p>
|
||||||
|
<p>Each group must create a final project portfolio, which consists of a repository on Github. The deadline to hand in this portfolio is week 7 (14/12). In addition, the project needs to be presented by the members of your group in class during week 7. The duration of the presentation is expected to be 10 mins and 5 mins is allocated for a Q&A (Questions & Answers). A successful presentation will include a demonstrated ability to field questions from the audience.</p>
|
||||||
|
<h3 id="grading">Grading</h3>
|
||||||
|
<p>The final project itself (referred to as 'project portfolio') is worth 45% of your final grade for the entire course, while the project's presentation amounts to 10%.</p>
|
||||||
|
<p>Below are evaluation criteria for the portfolio and a presentation 'guideline' to help you prepare your class intervention.</p>
|
||||||
|
<h4 id="project-portfolio-45-points">Project Portfolio (45 points)</h4>
|
||||||
|
<p><strong>Concept & User Interface (15 points)</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li><p>Is the concept of the project sound?</p></li>
|
||||||
|
<li><p>Is the user interface(s) of the project developed enough so to convey (1) the functionality of the produced software and (2) the concept the project aims to put forth?</p></li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Execution & Efficiency (15 points)</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li><p>Does the code work and executes as intended?</p></li>
|
||||||
|
<li><p>Is the code efficient in its use of programming techniques and methods introduced in class?</p></li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Structure & Documentation (15 points)</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li><p>Is the code structured and legible (layout of the code, meaningful variable names, etc.)?</p></li>
|
||||||
|
<li><p>Is the code and the project properly documented (inline comments, README, etc.)?</p></li>
|
||||||
|
</ul>
|
||||||
|
<h4 id="presentation-10-points">Presentation (10 points)</h4>
|
||||||
|
<p><strong>Duration: 15 mins total -- 10 mins presentation + 5 mins questions</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li><p>Concept: What is your project’s name and concept? Why did you choose this concept?</p></li>
|
||||||
|
<li><p>Demo: How does your prototype function? How does one interact with the software?</p></li>
|
||||||
|
<li><p>Techniques: What are the programming methods and techniques employed?</p></li>
|
||||||
|
<li><p>Reflection: What parts of the project were difficult (and/or easy) to build and why? What could/would you have done differently? How were the team dynamics within your group?</p></li>
|
||||||
|
</ul>
|
||||||
|
</content>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
final_project.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
title: CTH-2016 / Final Project
|
||||||
|
---
|
||||||
|
|
||||||
|
The final project is the final instalment of the CTH-2016 course. The project is a group assignment whose topic is open ended for you to choose though it must relate to some of the methods and techniques you have learned in class.
|
||||||
|
|
||||||
|
Each group must create a final project portfolio, which consists of a repository on Github. The deadline to hand in this portfolio is week 7 (14/12). In addition, the project needs to be presented by the members of your group in class during week 7. The duration of the presentation is expected to be 10 mins and 5 mins is allocated for a Q&A (Questions & Answers). A successful presentation will include a demonstrated ability to field questions from the audience.
|
||||||
|
|
||||||
|
### Grading
|
||||||
|
|
||||||
|
The final project itself (referred to as 'project portfolio') is worth 45% of your final grade for the entire course, while the project's presentation amounts to 10%.
|
||||||
|
|
||||||
|
Below are evaluation criteria for the portfolio and a presentation 'guideline' to help you prepare your class intervention.
|
||||||
|
|
||||||
|
####Project Portfolio (45 points)
|
||||||
|
|
||||||
|
__Concept & User Interface (15 points)__
|
||||||
|
|
||||||
|
* Is the concept of the project sound?
|
||||||
|
|
||||||
|
* Is the user interface(s) of the project developed enough so to convey (1) the functionality of the produced software and (2) the concept the project aims to put forth?
|
||||||
|
|
||||||
|
__Execution & Efficiency (15 points)__
|
||||||
|
|
||||||
|
* Does the code work and executes as intended?
|
||||||
|
|
||||||
|
* Is the code efficient in its use of programming techniques and methods introduced in class?
|
||||||
|
|
||||||
|
__Structure & Documentation (15 points)__
|
||||||
|
|
||||||
|
* Is the code structured and legible (layout of the code, meaningful variable names, etc.)?
|
||||||
|
|
||||||
|
* Is the code and the project properly documented (inline comments, README, etc.)?
|
||||||
|
|
||||||
|
####Presentation (10 points)
|
||||||
|
|
||||||
|
__Duration: 15 mins total -- 10 mins presentation + 5 mins questions__
|
||||||
|
|
||||||
|
* Concept: What is your project’s name and concept? Why did you choose this concept?
|
||||||
|
|
||||||
|
* Demo: How does your prototype function? How does one interact with the software?
|
||||||
|
|
||||||
|
* Techniques: What are the programming methods and techniques employed?
|
||||||
|
|
||||||
|
* Reflection: What parts of the project were difficult (and/or easy) to build and why? What could/would you have done differently? How were the team dynamics within your group?
|
||||||
|
|
||||||
|
|
||||||
BIN
img/14.1.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
img/14.2.png
Normal file
|
After Width: | Height: | Size: 85 KiB |
BIN
img/14.png
Normal file
|
After Width: | Height: | Size: 140 KiB |
BIN
img/cli0.png
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
img/datapoint-3300.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
img/github-assignment-x.png
Normal file
|
After Width: | Height: | Size: 182 KiB |
BIN
img/github-done.png
Normal file
|
After Width: | Height: | Size: 78 KiB |
BIN
img/github-new-repo-clone-desktop.png
Normal file
|
After Width: | Height: | Size: 239 KiB |
BIN
img/github-new-repo-clone.png
Normal file
|
After Width: | Height: | Size: 200 KiB |
BIN
img/github-new-repo-name.png
Normal file
|
After Width: | Height: | Size: 244 KiB |
BIN
img/github-new-repo.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
img/github-repo-commit-synchronise-desktop.png
Normal file
|
After Width: | Height: | Size: 514 KiB |
BIN
img/one+dimension+array.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
img/one_dim_ar.jpg
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
img/rkwk101.gif
Normal file
|
After Width: | Height: | Size: 28 KiB |
179
index.html
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="pandoc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
<title>CTH-2016</title>
|
||||||
|
<style type="text/css">code{white-space: pre;}</style>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<link rel="stylesheet" href="style/html5.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<content>
|
||||||
|
<header>
|
||||||
|
<h1 class="title">CTH-2016</h1>
|
||||||
|
</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="#final-project">Final Project</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>
|
||||||
|
<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>
|
||||||
|
<ul>
|
||||||
|
<li>Apply knowledge of basic programming skills that carry over to almost all programming languages</li>
|
||||||
|
<li>Demonstrate a comprehension of software’s composition and functioning that goes beyond its mere usage</li>
|
||||||
|
<li>Demonstrate a basic knowledge of natural language processing and automatic text generation</li>
|
||||||
|
<li>Demonstrate knowledge of contemporary browser-based scripting and client-server networking</li>
|
||||||
|
<li>Demonstrate a critical understanding of the place code and software literacy has within the Humanities</li>
|
||||||
|
<li>Reflect on experience in project-based collaborative humanities research</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="syllabus">Syllabus</h2>
|
||||||
|
<h4 id="week-1-0211-command-line-interface-cli">Week 1 (02/11) — Command Line Interface (CLI)</h4>
|
||||||
|
<p>Topics:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Setup environment</li>
|
||||||
|
<li>Command Line Interface</li>
|
||||||
|
<li>Version Control</li>
|
||||||
|
</ul>
|
||||||
|
<p>Texts:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Friedrich Kittler. <a href="./texts/kittler-code.pdf">"Code (or, How You Can Write Something Differently)"</a></li>
|
||||||
|
<li>Vilém Flusser. <a href="./texts/Flusser-The_Codified_World.pdf">"The Codified World"</a></li>
|
||||||
|
<li>Stephen Ramsey. <a href="http://stephenramsay.us/2012/06/10/learning-to-program/">"Learning to Program"</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>Links:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./setup.html">Setup (Git, Node, Sublime Text)</a></li>
|
||||||
|
<li><a href="./assignments-conf.html">Assignments Configuration</a></li>
|
||||||
|
<li><a href="https://github.com/gauthiier/cth2016">Weekly Repository</a></li>
|
||||||
|
</ul>
|
||||||
|
<h4 id="week-2-0911-scripts-executions">Week 2 (09/11) — Scripts & Executions</h4>
|
||||||
|
<p>Topics:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Scripts & Interpretation</li>
|
||||||
|
<li>Variables, Arrays, Loops & Functions</li>
|
||||||
|
<li>Librairies</li>
|
||||||
|
</ul>
|
||||||
|
<p>Texts:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Nick Montfort. Introduction (p.1-16) / <a href="./texts/10_PRINT_121114.pdf">10 PRINT CHR$(205.5+RND(1)); : GOTO 10</a></li>
|
||||||
|
<li>Geoff Cox & Alex McLean. <a href="./texts/CoxMcLean-Double_Coding.pdf">Double Coding / Speaking Code: Coding as Aesthetic and Political Expression</a></li>
|
||||||
|
<li><a href="http://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/#_edn4">Christopher Strachey</a>. Love Letters
|
||||||
|
<ul>
|
||||||
|
<li>Noah Wardrip-Fruin. <a href="https://grandtextauto.soe.ucsc.edu/2005/08/01/christopher-strachey-first-digital-artist/">"Christopher Strachey: The first digital artist?"</a></li>
|
||||||
|
<li>Noah Wardrip-Fruin. <a href="./texts/noah-wardripfruin-DigitalMediaArchaeology.pdf">"Digital Media Archeology"</a><br />
|
||||||
|
</li>
|
||||||
|
<li>David Link. <a href="http://www.alpha60.de/art/love_letters/">LoveLetters_1.0</a> - <a href="http://www.alpha60.de/art/love_letters/archive/muc/">Archive</a></li>
|
||||||
|
</ul></li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Assignment#1 due (08/11/16 13:00)</strong></p>
|
||||||
|
<h4 id="week-3-1611-clients-servers-browsers">Week 3 (16/11) — Clients, Servers & Browsers</h4>
|
||||||
|
<p>Topics:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Synchrounous Processing / Asynchrounous I/O</li>
|
||||||
|
<li>Network Protocols, Topologies & Infrastructure</li>
|
||||||
|
</ul>
|
||||||
|
<p>Texts:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Tim Berners-Lee. <a href="https://www.w3.org/People/Berners-Lee/1996/ppf.html">"The World Wide Web: Past, Present and Future"</a></li>
|
||||||
|
<li>Alex Galloway. <a href="./texts/Galloway-Phy.pdf">Physical Media / Protocol: How Control Exists After Decentralization</a></li>
|
||||||
|
<li>Paul Dourish. <a href="./texts/Dourish-PPP.pdf">"Protocols, Packets, and Proximity"</a></li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Assignment#2 due (15/11/16 13:00)</strong></p>
|
||||||
|
<p>Teams for final project are formed during the class.</p>
|
||||||
|
<h4 id="week-4-2311-graphical-programming-interfaces">Week 4 (23/11) — Graphical & Programming Interfaces</h4>
|
||||||
|
<p>Topics:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Interface: Foregrounds / Backgrounds</li>
|
||||||
|
<li>Browser Interpretation, Rendering & Events</li>
|
||||||
|
<li>Librairies & Application Programing Interfaces (API)</li>
|
||||||
|
</ul>
|
||||||
|
<p>Texts:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Christian Ulrik Andersen & Søren Pold. <a href="http://mediacommons.futureofthebook.org/tne/pieces/manifesto-post-digital-interface-criticism">"Manifesto for a Post-Digital Interface Criticism"</a></li>
|
||||||
|
<li><a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/">Critical Rendering Path</a></li>
|
||||||
|
<li>W.J.T. Mitchell. <a href="./texts/Mitchell-Image.pdf">Image / Ctitical Terms for Media Studies</a></li>
|
||||||
|
</ul>
|
||||||
|
<p><strong>Assignment#2 due (22/11/16 13:00)</strong></p>
|
||||||
|
<p>Each team pitch their project ideas during the class.</p>
|
||||||
|
<h4 id="week-5-3011-natural-language-processing">Week 5 (30/11) — Natural Language Processing</h4>
|
||||||
|
<p>Topics:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Text & Interpretation</li>
|
||||||
|
<li>Text Analysis</li>
|
||||||
|
<li>Close / Distant Reading</li>
|
||||||
|
<li>Close / Distant Writing</li>
|
||||||
|
</ul>
|
||||||
|
<p>Texts:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://www.nytimes.com/2011/06/26/books/review/the-mechanic-muse-what-is-distant-reading.html">"What Is Distant Reading?"</a></li>
|
||||||
|
<li>Stephen Ramsay. <a href="http://www.digitalhumanities.org/companion/view?docId=blackwell/9781405148641/9781405148641.xml&chunk.id=ss1-6-7">"Algorithmic Criticism"</a></li>
|
||||||
|
<li>Mark V Shaney. <a href="http://glenda.cat-v.org/friends/mark-v-shaney/grain-of-salt">“I Spent an Interesting Evening Recently with a Grain of Salt”</a></li>
|
||||||
|
<li>William S. Burroughs. <a href="http://www.ubu.com/papers/burroughs_gysin.html">"The Cut-Up Method of Brion Gysin"</a> <!-- Script/Program: [cutup.py](https://github.com/rossgoodwin/cutup) --></li>
|
||||||
|
<li><a href="./texts/six-oulipo.pdf">Six Selections by the Oulipo</a>
|
||||||
|
<ul>
|
||||||
|
<li>William Gillepsie. <a href="http://archive.is/E5wXK#selection-219.0-219.41">"The Oulipo: Constraints and Collaboration"</a></li>
|
||||||
|
</ul></li>
|
||||||
|
</ul>
|
||||||
|
<h4 id="week-6-0712-advanced-topics-reflections">Week 6 (07/12) — Advanced Topics / Reflections</h4>
|
||||||
|
<p>Topics: On demand</p>
|
||||||
|
<p>Texts:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Alan Liu. <a href="http://dhdebates.gc.cuny.edu/debates/text/20">"Where is the Cultural Criticism in the Digital Humanitites?"</a></li>
|
||||||
|
<li>Michael Dieter. <a href="./texts/Dieter-CTP.pdf">“The Virtues of Critical Technical Practice”</a></li>
|
||||||
|
<li><a href="http://www.e-flux.com/journal/74/59810/jodi-s-infrastructure/">"Jodi's Infrastructure"</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>During this session, time will be allocated to answer questions regarding final projects.</p>
|
||||||
|
<h4 id="week-7-1412-final-project-presentations">Week 7 (14/12) — Final Project Presentations</h4>
|
||||||
|
<h2 id="assignments">Assignments</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./assignments.html">Assignment #1: Bookstore (CLI)</a></li>
|
||||||
|
<li><a href="./assignments.html">Assignment #2: (Love) Letters</a></li>
|
||||||
|
<li><a href="./assignments.html">Assignment #3: Localhost's Imitation Game</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>Each individual assignment will be posted on the day of the class (weeks 1, 2, 3).</p>
|
||||||
|
<h2 id="final-project">Final Project</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./final_project.html">Final Project Evaluation Criteria</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>The final project is a group project that needs to be presented and handed in in the final week of the course (week 7). The topic of the project is open for you to decide but must be signed off by the instrutor not later than two weeks (week 5) before the presentation.</p>
|
||||||
|
<h2 id="assessment-grading">Assessment / Grading</h2>
|
||||||
|
<p>Grading for the module consists of (1) three assigments scheduled to be delivered during first part the block and (2) a final group project that will be presentated during the last session of the semester.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Assignment #1 (15%) - due week 2 (08/11/16 13:00)</li>
|
||||||
|
<li>Assignment #2 (15%) - due week 3 (15/11/16 13:00)</li>
|
||||||
|
<li>Assignment #3 (15%) - due week 4 (22/11/16 13:00)</li>
|
||||||
|
<li>Final group project (45% — individually graded) - due week 7 (14/12/16)</li>
|
||||||
|
<li>15-minute presentation of final project (10% — individually graded) (14/12/16)</li>
|
||||||
|
</ul>
|
||||||
|
<p>Assignments are handed in on the day before the next scheduled session, that is, <strong>Tuesday at 13:00</strong> at the latest. Assignments are graded on three aspects: 1) does the code work and execute as intended, 2) is the code clearly structured and documented and 3) is the code efficient.</p>
|
||||||
|
<p>The final project and presentation is a group assignment. Groups will be arranged at the start of the semester on week 2 and each group will give a short pitch of their final project on week 4. Students are free to choose their topic, but must gain approval at least two weeks in advance of the final project's due date (14/12).</p>
|
||||||
|
<p>Each group must create a final project portfolio (a repository on Github). The deadline to hand in this portfolio is week 7 (14/12). The final project presentation also takes place in week 7. A successful presentation will include a demonstrated ability to field questions from the audience.</p>
|
||||||
|
<h2 id="study-load">Study load</h2>
|
||||||
|
<p>This course is equivalent to 6 EC, or a study load of 168 hours, resulting in approximately 24 hours per week:</p>
|
||||||
|
<ul>
|
||||||
|
<li>7 x classes of 2 hours (14 hours total)</li>
|
||||||
|
<li>3 x assignments (30 hours total)</li>
|
||||||
|
<li>Weekly required tutorials and further reading work (72 hours total)</li>
|
||||||
|
<li>Final project (52 hours total)</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="instructor">Instructor</h2>
|
||||||
|
<p>David Gauthier<br />
|
||||||
|
d.gauthier@uva.nl<br />
|
||||||
|
BG1 - Turfdraagsterpad 9<br />
|
||||||
|
Kamernummer: 1.01E<br />
|
||||||
|
Office hours by appointment</p>
|
||||||
|
</content>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -2,10 +2,6 @@
|
|||||||
title: CTH-2016
|
title: CTH-2016
|
||||||
---
|
---
|
||||||
|
|
||||||
_Course prepared for the UvA in 2016_
|
|
||||||
|
|
||||||
_Full content available [here](https://le-club-des-sans-sujets.org/w/cth2016/)_
|
|
||||||
|
|
||||||
## Course Synopsis / Description
|
## Course Synopsis / Description
|
||||||
|
|
||||||
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.
|
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.
|
||||||
@ -31,15 +27,15 @@ Topics:
|
|||||||
|
|
||||||
Texts:
|
Texts:
|
||||||
|
|
||||||
* Friedrich Kittler. ["Code (or, How You Can Write Something Differently)"](https://le-club-des-sans-sujets.org/w/cth2016/texts/kittler-code.pdf)
|
* Friedrich Kittler. ["Code (or, How You Can Write Something Differently)"](./texts/kittler-code.pdf)
|
||||||
* Vilém Flusser. ["The Codified World"](https://le-club-des-sans-sujets.org/w/cth2016/texts/Flusser-The_Codified_World.pdf)
|
* Vilém Flusser. ["The Codified World"](./texts/Flusser-The_Codified_World.pdf)
|
||||||
* Stephen Ramsey. ["Learning to Program"](http://stephenramsay.us/2012/06/10/learning-to-program/)
|
* Stephen Ramsey. ["Learning to Program"](http://stephenramsay.us/2012/06/10/learning-to-program/)
|
||||||
|
|
||||||
Links:
|
Links:
|
||||||
|
|
||||||
* [Setup (Git, Node, Sublime Text)](https://le-club-des-sans-sujets.org/w/cth2016/setup.html)
|
* [Setup (Git, Node, Sublime Text)](./setup.html)
|
||||||
* [Assignments Configuration](https://le-club-des-sans-sujets.org/w/cth2016/assignments-conf.html)
|
* [Assignments Configuration](./assignments-conf.html)
|
||||||
* [Weekly Repository](https://git.le-club-des-sans-sujets.org/gauthiier/cth2016)
|
* [Weekly Repository](https://github.com/gauthiier/cth2016)
|
||||||
|
|
||||||
#### Week 2 (09/11) — Scripts & Executions
|
#### Week 2 (09/11) — Scripts & Executions
|
||||||
|
|
||||||
@ -51,11 +47,11 @@ Topics:
|
|||||||
|
|
||||||
Texts:
|
Texts:
|
||||||
|
|
||||||
* Nick Montfort. Introduction (p.1-16) / [10 PRINT CHR$(205.5+RND(1)); : GOTO 10](https://le-club-des-sans-sujets.org/w/cth2016/texts/10_PRINT_121114.pdf)
|
* Nick Montfort. Introduction (p.1-16) / [10 PRINT CHR$(205.5+RND(1)); : GOTO 10](./texts/10_PRINT_121114.pdf)
|
||||||
* Geoff Cox & Alex McLean. [Double Coding / Speaking Code: Coding as Aesthetic and Political Expression](https://le-club-des-sans-sujets.org/w/cth2016/texts/CoxMcLean-Double_Coding.pdf)
|
* Geoff Cox & Alex McLean. [Double Coding / Speaking Code: Coding as Aesthetic and Political Expression](./texts/CoxMcLean-Double_Coding.pdf)
|
||||||
* [Christopher Strachey](http://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/#_edn4). Love Letters
|
* [Christopher Strachey](http://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/#_edn4). Love Letters
|
||||||
* Noah Wardrip-Fruin. ["Christopher Strachey: The first digital artist?"](https://grandtextauto.soe.ucsc.edu/2005/08/01/christopher-strachey-first-digital-artist/)
|
* Noah Wardrip-Fruin. ["Christopher Strachey: The first digital artist?"](https://grandtextauto.soe.ucsc.edu/2005/08/01/christopher-strachey-first-digital-artist/)
|
||||||
* Noah Wardrip-Fruin. ["Digital Media Archeology"](https://le-club-des-sans-sujets.org/w/cth2016/texts/noah-wardripfruin-DigitalMediaArchaeology.pdf)
|
* Noah Wardrip-Fruin. ["Digital Media Archeology"](./texts/noah-wardripfruin-DigitalMediaArchaeology.pdf)
|
||||||
* David Link. [LoveLetters_1.0](http://www.alpha60.de/art/love_letters/) - [Archive](http://www.alpha60.de/art/love_letters/archive/muc/)
|
* David Link. [LoveLetters_1.0](http://www.alpha60.de/art/love_letters/) - [Archive](http://www.alpha60.de/art/love_letters/archive/muc/)
|
||||||
|
|
||||||
__Assignment#1 due (08/11/16 13:00)__
|
__Assignment#1 due (08/11/16 13:00)__
|
||||||
@ -70,8 +66,8 @@ Topics:
|
|||||||
Texts:
|
Texts:
|
||||||
|
|
||||||
* Tim Berners-Lee. ["The World Wide Web: Past, Present and Future"](https://www.w3.org/People/Berners-Lee/1996/ppf.html)
|
* Tim Berners-Lee. ["The World Wide Web: Past, Present and Future"](https://www.w3.org/People/Berners-Lee/1996/ppf.html)
|
||||||
* Alex Galloway. [Physical Media / Protocol: How Control Exists After Decentralization](https://le-club-des-sans-sujets.org/w/cth2016/texts/Galloway-Phy.pdf)
|
* Alex Galloway. [Physical Media / Protocol: How Control Exists After Decentralization](./texts/Galloway-Phy.pdf)
|
||||||
* Paul Dourish. ["Protocols, Packets, and Proximity"](https://le-club-des-sans-sujets.org/w/cth2016/texts/Dourish-PPP.pdf)
|
* Paul Dourish. ["Protocols, Packets, and Proximity"](./texts/Dourish-PPP.pdf)
|
||||||
|
|
||||||
__Assignment#2 due (15/11/16 13:00)__
|
__Assignment#2 due (15/11/16 13:00)__
|
||||||
|
|
||||||
@ -89,7 +85,7 @@ Texts:
|
|||||||
|
|
||||||
* Christian Ulrik Andersen & Søren Pold. ["Manifesto for a Post-Digital Interface Criticism"](http://mediacommons.futureofthebook.org/tne/pieces/manifesto-post-digital-interface-criticism)
|
* Christian Ulrik Andersen & Søren Pold. ["Manifesto for a Post-Digital Interface Criticism"](http://mediacommons.futureofthebook.org/tne/pieces/manifesto-post-digital-interface-criticism)
|
||||||
* [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
|
* [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
|
||||||
* W.J.T. Mitchell. [Image / Ctitical Terms for Media Studies](https://le-club-des-sans-sujets.org/w/cth2016/texts/Mitchell-Image.pdf)
|
* W.J.T. Mitchell. [Image / Ctitical Terms for Media Studies](./texts/Mitchell-Image.pdf)
|
||||||
|
|
||||||
__Assignment#2 due (22/11/16 13:00)__
|
__Assignment#2 due (22/11/16 13:00)__
|
||||||
|
|
||||||
@ -121,7 +117,7 @@ Topics: On demand
|
|||||||
Texts:
|
Texts:
|
||||||
|
|
||||||
* Alan Liu. ["Where is the Cultural Criticism in the Digital Humanitites?"](http://dhdebates.gc.cuny.edu/debates/text/20)
|
* Alan Liu. ["Where is the Cultural Criticism in the Digital Humanitites?"](http://dhdebates.gc.cuny.edu/debates/text/20)
|
||||||
* Michael Dieter. [“The Virtues of Critical Technical Practice”](https://le-club-des-sans-sujets.org/w/cth2016/texts/Dieter-CTP.pdf)
|
* Michael Dieter. [“The Virtues of Critical Technical Practice”](./texts/Dieter-CTP.pdf)
|
||||||
* ["Jodi's Infrastructure"](http://www.e-flux.com/journal/74/59810/jodi-s-infrastructure/)
|
* ["Jodi's Infrastructure"](http://www.e-flux.com/journal/74/59810/jodi-s-infrastructure/)
|
||||||
|
|
||||||
During this session, time will be allocated to answer questions regarding final projects.
|
During this session, time will be allocated to answer questions regarding final projects.
|
||||||
@ -131,15 +127,15 @@ During this session, time will be allocated to answer questions regarding final
|
|||||||
|
|
||||||
## Assignments
|
## Assignments
|
||||||
|
|
||||||
* [Assignment #1: Bookstore (CLI)](https://le-club-des-sans-sujets.org/w/cth2016/assignments.html)
|
* [Assignment #1: Bookstore (CLI)](./assignments.html)
|
||||||
* [Assignment #2: (Love) Letters](https://le-club-des-sans-sujets.org/w/cth2016/assignments.html)
|
* [Assignment #2: (Love) Letters](./assignments.html)
|
||||||
* [Assignment #3: Localhost's Imitation Game](https://le-club-des-sans-sujets.org/w/cth2016/assignments.html)
|
* [Assignment #3: Localhost's Imitation Game](./assignments.html)
|
||||||
|
|
||||||
Each individual assignment will be posted on the day of the class (weeks 1, 2, 3).
|
Each individual assignment will be posted on the day of the class (weeks 1, 2, 3).
|
||||||
|
|
||||||
## Final Project
|
## Final Project
|
||||||
|
|
||||||
* [Final Project Evaluation Criteria](https://le-club-des-sans-sujets.org/w/cth2016/final_project.html)
|
* [Final Project Evaluation Criteria](./final_project.html)
|
||||||
|
|
||||||
The final project is a group project that needs to be presented and handed in in the final week of the course (week 7). The topic of the project is open for you to decide but must be signed off by the instrutor not later than two weeks (week 5) before the presentation.
|
The final project is a group project that needs to be presented and handed in in the final week of the course (week 7). The topic of the project is open for you to decide but must be signed off by the instrutor not later than two weeks (week 5) before the presentation.
|
||||||
|
|
||||||
1
ppp
Normal file
@ -0,0 +1 @@
|
|||||||
|
pandoc -s index.md --template=style/template.html5 -c style/html5.css -o index.html --toc
|
||||||
50
setup.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="pandoc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
<title>CTH-2016 / Setup (Git, Node, Sublime Text)</title>
|
||||||
|
<style type="text/css">code{white-space: pre;}</style>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<link rel="stylesheet" href="style/html5.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<content>
|
||||||
|
<header>
|
||||||
|
<h1 class="title">CTH-2016 / Setup (Git, Node, Sublime Text)</h1>
|
||||||
|
</header>
|
||||||
|
<h3 id="git">Git</h3>
|
||||||
|
<h4 id="download">1. Download</h4>
|
||||||
|
<p><a href="https://git-scm.com/downloads">Git dowload page</a> -- install current version</p>
|
||||||
|
<h4 id="test-installation">2. Test Installation</h4>
|
||||||
|
<p>Open a terminal and type:</p>
|
||||||
|
<pre><code>$ git --version</code></pre>
|
||||||
|
<p>And you should have this printed out if the install has been successful:</p>
|
||||||
|
<pre><code>git version 2.10.1</code></pre>
|
||||||
|
<h4 id="configuring-git-credentials">3. Configuring git (credentials)</h4>
|
||||||
|
<p>If this is the first time you use git, please make sure you give yourself a user name/email:</p>
|
||||||
|
<pre><code>$ git config --global user.name "Felix the Cat"
|
||||||
|
$ git config --global user.name "felix@miauw.org"</code></pre>
|
||||||
|
<p>These credentials will be used to identify your work when committing to a git repository.</p>
|
||||||
|
<h3 id="node.js">Node.js</h3>
|
||||||
|
<h4 id="download-1">1. Download</h4>
|
||||||
|
<p><a href="https://nodejs.org/en/download/">Node.js download page</a> -- install LTS verion v6.9.1</p>
|
||||||
|
<h4 id="test-installation-1">2. Test Installation</h4>
|
||||||
|
<p>Open a terminal and type:</p>
|
||||||
|
<pre><code>$ node --version</code></pre>
|
||||||
|
<p>And you should have this printed out if the install has been successful:</p>
|
||||||
|
<pre><code>v6.9.1</code></pre>
|
||||||
|
<h3 id="sublime-text">Sublime Text</h3>
|
||||||
|
<h4 id="download-2">Download</h4>
|
||||||
|
<p><a href="http://www.sublimetext.com/3">Sublime Text 3 download page</a></p>
|
||||||
|
<h3 id="github">Github</h3>
|
||||||
|
<h4 id="create-account">Create account</h4>
|
||||||
|
<p><a href="https://github.com">Github</a></p>
|
||||||
|
<h3 id="slack">Slack</h3>
|
||||||
|
<p><a href="https://cth2016.slack.com">cth2016.slack.com</a></p>
|
||||||
|
</content>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
62
setup.md
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
title: CTH-2016 / Setup (Git, Node, Sublime Text)
|
||||||
|
---
|
||||||
|
|
||||||
|
### Git
|
||||||
|
|
||||||
|
#### 1. Download
|
||||||
|
|
||||||
|
[Git dowload page](https://git-scm.com/downloads) -- install current version
|
||||||
|
|
||||||
|
#### 2. Test Installation
|
||||||
|
|
||||||
|
Open a terminal and type:
|
||||||
|
|
||||||
|
$ git --version
|
||||||
|
|
||||||
|
And you should have this printed out if the install has been successful:
|
||||||
|
|
||||||
|
git version 2.10.1
|
||||||
|
|
||||||
|
#### 3. Configuring git (credentials)
|
||||||
|
|
||||||
|
If this is the first time you use git, please make sure you give yourself a user name/email:
|
||||||
|
|
||||||
|
$ git config --global user.name "Felix the Cat"
|
||||||
|
$ git config --global user.name "felix@miauw.org"
|
||||||
|
|
||||||
|
These credentials will be used to identify your work when committing to a git repository.
|
||||||
|
|
||||||
|
### Node.js
|
||||||
|
|
||||||
|
#### 1. Download
|
||||||
|
|
||||||
|
[Node.js download page](https://nodejs.org/en/download/) -- install LTS verion v6.9.1
|
||||||
|
|
||||||
|
#### 2. Test Installation
|
||||||
|
|
||||||
|
Open a terminal and type:
|
||||||
|
|
||||||
|
$ node --version
|
||||||
|
|
||||||
|
And you should have this printed out if the install has been successful:
|
||||||
|
|
||||||
|
v6.9.1
|
||||||
|
|
||||||
|
### Sublime Text
|
||||||
|
|
||||||
|
#### Download
|
||||||
|
|
||||||
|
[Sublime Text 3 download page](http://www.sublimetext.com/3)
|
||||||
|
|
||||||
|
### Github
|
||||||
|
|
||||||
|
#### Create account
|
||||||
|
|
||||||
|
[Github](https://github.com)
|
||||||
|
|
||||||
|
### Slack
|
||||||
|
|
||||||
|
[cth2016.slack.com](https://cth2016.slack.com)
|
||||||
|
|
||||||
|
|
||||||
BIN
style/BigCaslon.ttf
Normal file
483
style/html5.css
Normal file
@ -0,0 +1,483 @@
|
|||||||
|
/*
|
||||||
|
Style.css
|
||||||
|
A revised Pandoc/Markdown/Multi-Markdown CSS stylesheet tailored for html5
|
||||||
|
output for the wwwriting site hosted on ....
|
||||||
|
Author: gauthiier
|
||||||
|
Revised: 10 Feb 2015
|
||||||
|
|
||||||
|
This file is based on:
|
||||||
|
|
||||||
|
Buttondown
|
||||||
|
A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet
|
||||||
|
Author: Ryan Gray
|
||||||
|
Date: 15 Feb 2011
|
||||||
|
Revised: 21 Feb 2012
|
||||||
|
|
||||||
|
General style is clean, with minimal re-definition of the defaults or
|
||||||
|
overrides of user font settings. The body text and header styles are
|
||||||
|
left alone except title, author and date classes are centered. A Pandoc TOC
|
||||||
|
is not printed, URLs are printed after hyperlinks in parentheses.
|
||||||
|
Block quotes are italicized. Tables are lightly styled with lines above
|
||||||
|
and below the table and below the header with a boldface header. Code
|
||||||
|
blocks are line wrapped.
|
||||||
|
|
||||||
|
All elements that Pandoc and MultiMarkdown use should be listed here, even
|
||||||
|
if the style is empty so you can easily add styling to anything.
|
||||||
|
|
||||||
|
There are some elements in here for HTML5 output of Pandoc, but I have not
|
||||||
|
gotten around to testing that yet.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* NOTES:
|
||||||
|
|
||||||
|
Stuff tried and failed:
|
||||||
|
|
||||||
|
It seems that specifying font-family:serif in Safari will always use
|
||||||
|
Times New Roman rather than the user's preferences setting.
|
||||||
|
|
||||||
|
Making the font size different or a fixed value for print in case the screen
|
||||||
|
font size is making the print font too big: Making font-size different for
|
||||||
|
print than for screen causes horizontal lines to disappear in math when using
|
||||||
|
MathJax under Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ---- Front Matter ---- */
|
||||||
|
|
||||||
|
/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
|
||||||
|
Only appears if one of those three are in the document.
|
||||||
|
*/
|
||||||
|
|
||||||
|
div#header, header
|
||||||
|
{
|
||||||
|
/* Put border on bottom. Separates it from TOC or body that comes after it. */
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title /* Pandoc title header (h1.title) */
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pandoc table of contents DIV when using the --toc option.
|
||||||
|
NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
|
||||||
|
Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
|
||||||
|
*/
|
||||||
|
|
||||||
|
div#TOC, nav#TOC
|
||||||
|
{
|
||||||
|
/* Put border on bottom to separate it from body. */
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
div#TOC, nav#TOC
|
||||||
|
{
|
||||||
|
/* Don't display TOC in print */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Headers and sections ---- */
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
{
|
||||||
|
/* font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
|
||||||
|
|
||||||
|
font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */
|
||||||
|
|
||||||
|
page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pandoc with --section-divs option */
|
||||||
|
|
||||||
|
div div, section section /* Nested sections */
|
||||||
|
{
|
||||||
|
margin-left: 2em; /* This will increasingly indent nested header sections */
|
||||||
|
}
|
||||||
|
|
||||||
|
p {}
|
||||||
|
|
||||||
|
/* Main container for the whole content / body section -- html5 */
|
||||||
|
content {
|
||||||
|
padding: 0.9em;
|
||||||
|
max-width: 45em;
|
||||||
|
display: block;
|
||||||
|
text-align: justify;
|
||||||
|
margin: auto;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.references {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
li /* All list items */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
li > p /* Loosely spaced list item */
|
||||||
|
{
|
||||||
|
margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
|
||||||
|
}
|
||||||
|
|
||||||
|
ul /* Whole unordered list */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li /* Unordered list item */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ol /* Whole ordered list */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ol li /* Ordered list item */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {}
|
||||||
|
|
||||||
|
/* ---- Some span elements --- */
|
||||||
|
|
||||||
|
sub /* Subscripts. Pandoc: H~2~O */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
sup /* Superscripts. Pandoc: The 2^nd^ try. */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong /* Markdown **strong** or __strong__ */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Links (anchors) ---- */
|
||||||
|
|
||||||
|
a /* All links */
|
||||||
|
{
|
||||||
|
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen
|
||||||
|
{
|
||||||
|
a:hover
|
||||||
|
{
|
||||||
|
/* On hover, we indicate a bit more that it is a link. */
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
a {
|
||||||
|
/* In print, a colored link is useless, so un-style it. */
|
||||||
|
color: black;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^="http://"]:after, a[href^="https://"]:after
|
||||||
|
{
|
||||||
|
/* However, links that go somewhere else, might be useful to the reader,
|
||||||
|
so for http and https links, print the URL after what was the link
|
||||||
|
text in parens
|
||||||
|
*/
|
||||||
|
content: " (" attr(href) ") ";
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Images ---- */
|
||||||
|
|
||||||
|
img
|
||||||
|
{
|
||||||
|
/* Let it be inline left/right where it wants to be, but verticality make
|
||||||
|
it in the middle to look nicer, but opinions differ, and if in a multi-line
|
||||||
|
paragraph, it might not be so great.
|
||||||
|
*/
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure /* Pandoc figure-style image */
|
||||||
|
{
|
||||||
|
/* Center the image and caption */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** EXXXTRA **/
|
||||||
|
figure /* Pandoc figure-style image */
|
||||||
|
{
|
||||||
|
/* Center the image and caption */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.caption /* Pandoc figure-style caption within div.figure */
|
||||||
|
{
|
||||||
|
/* Inherits div.figure props by default */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Code blocks and spans ---- */
|
||||||
|
|
||||||
|
pre, code
|
||||||
|
{
|
||||||
|
background-color: #fdf7ee;
|
||||||
|
/* BEGIN word wrap */
|
||||||
|
/* Need all the following to word wrap instead of scroll box */
|
||||||
|
/* This will override the overflow:auto if present */
|
||||||
|
white-space: pre-wrap; /* css-3 */
|
||||||
|
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
|
||||||
|
white-space: -pre-wrap; /* Opera 4-6 */
|
||||||
|
white-space: -o-pre-wrap; /* Opera 7 */
|
||||||
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||||
|
/* END word wrap */
|
||||||
|
}
|
||||||
|
|
||||||
|
pre /* Code blocks */
|
||||||
|
{
|
||||||
|
/* Distinguish pre blocks from other text by more than the font with a background tint. */
|
||||||
|
padding: 0.5em; /* Since we have a background color */
|
||||||
|
border-radius: 5px; /* Softens it */
|
||||||
|
/* Give it a some definition */
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
/* Set it off left and right, seems to look a bit nicer when we have a background */
|
||||||
|
margin-left: 0.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen
|
||||||
|
{
|
||||||
|
pre
|
||||||
|
{
|
||||||
|
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
|
||||||
|
white-space: pre;
|
||||||
|
overflow: auto;
|
||||||
|
/* Dotted looks better on screen and solid seems to print better. */
|
||||||
|
border: 1px dotted #777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code /* All inline code spans */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
p > code, li > code /* Code spans in paragraphs and tight lists */
|
||||||
|
{
|
||||||
|
/* Pad a little from adjacent text */
|
||||||
|
padding-left: 2px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > p code /* Code span in a loose list */
|
||||||
|
{
|
||||||
|
/* We have room for some more background color above and below */
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Math ---- */
|
||||||
|
|
||||||
|
span.math /* Pandoc inline math default and --jsmath inline math */
|
||||||
|
{
|
||||||
|
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.math /* Pandoc --jsmath display math */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
span.LaTeX /* Pandoc --latexmathml math */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
eq /* Pandoc --gladtex math */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Tables ---- */
|
||||||
|
|
||||||
|
/* A clean textbook-like style with horizontal lines above and below and under
|
||||||
|
the header. Rows highlight on hover to help scanning the table on screen.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table
|
||||||
|
{
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; /* IE 6 */
|
||||||
|
|
||||||
|
border-bottom: 2pt solid #000;
|
||||||
|
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
|
||||||
|
|
||||||
|
/* Center */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead /* Entire table header */
|
||||||
|
{
|
||||||
|
border-bottom: 1pt solid #000;
|
||||||
|
background-color: #eee; /* Does this BG print well? */
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.header /* Each header row */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody /* Entire table body */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table body rows */
|
||||||
|
|
||||||
|
tr {
|
||||||
|
}
|
||||||
|
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
|
||||||
|
{
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Odd and even rows */
|
||||||
|
tr.odd {}
|
||||||
|
tr.even {}
|
||||||
|
|
||||||
|
td, th /* Table cells and table header cells */
|
||||||
|
{
|
||||||
|
vertical-align: top; /* Word */
|
||||||
|
vertical-align: baseline; /* Others */
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
padding-top: 0.2em;
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
|
||||||
|
/*
|
||||||
|
tr td:last-child, tr th:last-child
|
||||||
|
{
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
tr td:first-child, tr th:first-child
|
||||||
|
{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
th /* Table header cells */
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot /* Table footer (what appears here if caption is on top?) */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
|
||||||
|
{
|
||||||
|
caption-side: top;
|
||||||
|
border: none;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.3em; /* Good for when on top */
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Definition lists ---- */
|
||||||
|
|
||||||
|
dl /* The whole list */
|
||||||
|
{
|
||||||
|
border-top: 2pt solid black;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
border-bottom: 2pt solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt /* Definition term */
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd+dt /* 2nd or greater term in the list */
|
||||||
|
{
|
||||||
|
border-top: 1pt solid black;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd /* A definition */
|
||||||
|
{
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd+dd /* 2nd or greater definition of a term */
|
||||||
|
{
|
||||||
|
border-top: 1px solid black; /* To separate multiple definitions */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Footnotes ---- */
|
||||||
|
|
||||||
|
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
|
||||||
|
font-size: small;
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
|
||||||
|
{
|
||||||
|
/* Don't display these at all in print since the arrow is only something to click on */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.footnotes /* Pandoc footnotes div at end of the document */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
div.footnotes li[id^="fn"] /* A footnote item within that div */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* You can class stuff as "noprint" to not print.
|
||||||
|
Useful since you can't set this media conditional inside an HTML element's
|
||||||
|
style attribute (I think), and you don't want to make another stylesheet that
|
||||||
|
imports this one and adds a class just to do this.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
.noprint
|
||||||
|
{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
490
style/style.css
Normal file
@ -0,0 +1,490 @@
|
|||||||
|
/*
|
||||||
|
Style.css
|
||||||
|
A revised Pandoc/Markdown/Multi-Markdown CSS stylesheet tailored for html5
|
||||||
|
output for the wwwriting site hosted on ....
|
||||||
|
Author: gauthiier
|
||||||
|
Revised: 10 Feb 2015
|
||||||
|
|
||||||
|
This file is based on:
|
||||||
|
|
||||||
|
Buttondown
|
||||||
|
A Markdown/MultiMarkdown/Pandoc HTML output CSS stylesheet
|
||||||
|
Author: Ryan Gray
|
||||||
|
Date: 15 Feb 2011
|
||||||
|
Revised: 21 Feb 2012
|
||||||
|
|
||||||
|
General style is clean, with minimal re-definition of the defaults or
|
||||||
|
overrides of user font settings. The body text and header styles are
|
||||||
|
left alone except title, author and date classes are centered. A Pandoc TOC
|
||||||
|
is not printed, URLs are printed after hyperlinks in parentheses.
|
||||||
|
Block quotes are italicized. Tables are lightly styled with lines above
|
||||||
|
and below the table and below the header with a boldface header. Code
|
||||||
|
blocks are line wrapped.
|
||||||
|
|
||||||
|
All elements that Pandoc and MultiMarkdown use should be listed here, even
|
||||||
|
if the style is empty so you can easily add styling to anything.
|
||||||
|
|
||||||
|
There are some elements in here for HTML5 output of Pandoc, but I have not
|
||||||
|
gotten around to testing that yet.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* NOTES:
|
||||||
|
|
||||||
|
Stuff tried and failed:
|
||||||
|
|
||||||
|
It seems that specifying font-family:serif in Safari will always use
|
||||||
|
Times New Roman rather than the user's preferences setting.
|
||||||
|
|
||||||
|
Making the font size different or a fixed value for print in case the screen
|
||||||
|
font size is making the print font too big: Making font-size different for
|
||||||
|
print than for screen causes horizontal lines to disappear in math when using
|
||||||
|
MathJax under Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ---- Front Matter ---- */
|
||||||
|
|
||||||
|
/* Pandoc header DIV. Contains .title, .author and .date. Comes before div#TOC.
|
||||||
|
Only appears if one of those three are in the document.
|
||||||
|
*/
|
||||||
|
|
||||||
|
div#header, header
|
||||||
|
{
|
||||||
|
/* Put border on bottom. Separates it from TOC or body that comes after it. */
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title /* Pandoc title header (h1.title) */
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author, .date /* Pandoc author(s) and date headers (h2.author and h3.date) */
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pandoc table of contents DIV when using the --toc option.
|
||||||
|
NOTE: this doesn't support Pandoc's --id-prefix option for #TOC and #header.
|
||||||
|
Probably would need to use div[id$='TOC'] and div[id$='header'] as selectors.
|
||||||
|
*/
|
||||||
|
|
||||||
|
div#TOC, nav#TOC
|
||||||
|
{
|
||||||
|
/* Put border on bottom to separate it from body. */
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
div#TOC, nav#TOC
|
||||||
|
{
|
||||||
|
/* Don't display TOC in print */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Headers and sections ---- */
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6
|
||||||
|
{
|
||||||
|
/* font-family: "Helvetica Neue", Helvetica, "Liberation Sans", Calibri, Arial, sans-serif; /* Sans-serif headers */
|
||||||
|
|
||||||
|
font-family: "Liberation Serif", "Georgia", "Times New Roman", serif; /* Serif headers */
|
||||||
|
|
||||||
|
page-break-after: avoid; /* Firefox, Chrome, and Safari do not support the property value "avoid" */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pandoc with --section-divs option */
|
||||||
|
|
||||||
|
div div, section section /* Nested sections */
|
||||||
|
{
|
||||||
|
margin-left: 2em; /* This will increasingly indent nested header sections */
|
||||||
|
}
|
||||||
|
|
||||||
|
p {}
|
||||||
|
|
||||||
|
/* Main container for the whole content / body section -- html5 */
|
||||||
|
content {
|
||||||
|
padding: 0.9em;
|
||||||
|
max-width: 45em;
|
||||||
|
display: block;
|
||||||
|
text-align: justify;
|
||||||
|
margin: auto;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.references {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
li /* All list items */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
li > p /* Loosely spaced list item */
|
||||||
|
{
|
||||||
|
margin-top: 1em; /* IE: lack of space above a <li> when the item is inside a <p> */
|
||||||
|
}
|
||||||
|
|
||||||
|
ul /* Whole unordered list */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li /* Unordered list item */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ol /* Whole ordered list */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ol li /* Ordered list item */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {}
|
||||||
|
|
||||||
|
/* ---- Some span elements --- */
|
||||||
|
|
||||||
|
sub /* Subscripts. Pandoc: H~2~O */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
sup /* Superscripts. Pandoc: The 2^nd^ try. */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
em /* Emphasis. Markdown: *emphasis* or _emphasis_ */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
em > em /* Emphasis within emphasis: *This is all *emphasized* except that* */
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong /* Markdown **strong** or __strong__ */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Links (anchors) ---- */
|
||||||
|
|
||||||
|
a /* All links */
|
||||||
|
{
|
||||||
|
/* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen
|
||||||
|
{
|
||||||
|
a:hover
|
||||||
|
{
|
||||||
|
/* On hover, we indicate a bit more that it is a link. */
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
a {
|
||||||
|
/* In print, a colored link is useless, so un-style it. */
|
||||||
|
color: black;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^="http://"]:after, a[href^="https://"]:after
|
||||||
|
{
|
||||||
|
/* However, links that go somewhere else, might be useful to the reader,
|
||||||
|
so for http and https links, print the URL after what was the link
|
||||||
|
text in parens
|
||||||
|
*/
|
||||||
|
content: " (" attr(href) ") ";
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Images ---- */
|
||||||
|
|
||||||
|
img
|
||||||
|
{
|
||||||
|
/* Let it be inline left/right where it wants to be, but verticality make
|
||||||
|
it in the middle to look nicer, but opinions differ, and if in a multi-line
|
||||||
|
paragraph, it might not be so great.
|
||||||
|
*/
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure /* Pandoc figure-style image */
|
||||||
|
{
|
||||||
|
/* Center the image and caption */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** EXXXTRA **/
|
||||||
|
figure /* Pandoc figure-style image */
|
||||||
|
{
|
||||||
|
/* Center the image and caption */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.caption /* Pandoc figure-style caption within div.figure */
|
||||||
|
{
|
||||||
|
/* Inherits div.figure props by default */
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-img
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Code blocks and spans ---- */
|
||||||
|
|
||||||
|
pre, code
|
||||||
|
{
|
||||||
|
background-color: #fdf7ee;
|
||||||
|
/* BEGIN word wrap */
|
||||||
|
/* Need all the following to word wrap instead of scroll box */
|
||||||
|
/* This will override the overflow:auto if present */
|
||||||
|
white-space: pre-wrap; /* css-3 */
|
||||||
|
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
|
||||||
|
white-space: -pre-wrap; /* Opera 4-6 */
|
||||||
|
white-space: -o-pre-wrap; /* Opera 7 */
|
||||||
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||||
|
/* END word wrap */
|
||||||
|
}
|
||||||
|
|
||||||
|
pre /* Code blocks */
|
||||||
|
{
|
||||||
|
/* Distinguish pre blocks from other text by more than the font with a background tint. */
|
||||||
|
padding: 0.5em; /* Since we have a background color */
|
||||||
|
border-radius: 5px; /* Softens it */
|
||||||
|
/* Give it a some definition */
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
/* Set it off left and right, seems to look a bit nicer when we have a background */
|
||||||
|
margin-left: 0.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen
|
||||||
|
{
|
||||||
|
pre
|
||||||
|
{
|
||||||
|
/* On screen, use an auto scroll box for long lines, unless word-wrap is enabled */
|
||||||
|
white-space: pre;
|
||||||
|
overflow: auto;
|
||||||
|
/* Dotted looks better on screen and solid seems to print better. */
|
||||||
|
border: 1px dotted #777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code /* All inline code spans */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
p > code, li > code /* Code spans in paragraphs and tight lists */
|
||||||
|
{
|
||||||
|
/* Pad a little from adjacent text */
|
||||||
|
padding-left: 2px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li > p code /* Code span in a loose list */
|
||||||
|
{
|
||||||
|
/* We have room for some more background color above and below */
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Math ---- */
|
||||||
|
|
||||||
|
span.math /* Pandoc inline math default and --jsmath inline math */
|
||||||
|
{
|
||||||
|
/* Tried font-style:italic here, and it messed up MathJax rendering in some browsers. Maybe don't mess with at all. */
|
||||||
|
}
|
||||||
|
|
||||||
|
div.math /* Pandoc --jsmath display math */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
span.LaTeX /* Pandoc --latexmathml math */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
eq /* Pandoc --gladtex math */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Tables ---- */
|
||||||
|
|
||||||
|
/* A clean textbook-like style with horizontal lines above and below and under
|
||||||
|
the header. Rows highlight on hover to help scanning the table on screen.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table
|
||||||
|
{
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0; /* IE 6 */
|
||||||
|
|
||||||
|
border-bottom: 2pt solid #000;
|
||||||
|
border-top: 2pt solid #000; /* The caption on top will not have a bottom-border */
|
||||||
|
|
||||||
|
/* Center */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead /* Entire table header */
|
||||||
|
{
|
||||||
|
border-bottom: 1pt solid #000;
|
||||||
|
background-color: #eee; /* Does this BG print well? */
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.header /* Each header row */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody /* Entire table body */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table body rows */
|
||||||
|
|
||||||
|
tr {
|
||||||
|
}
|
||||||
|
tr.odd:hover, tr.even:hover /* Use .odd and .even classes to avoid styling rows in other tables */
|
||||||
|
{
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Odd and even rows */
|
||||||
|
tr.odd {}
|
||||||
|
tr.even {}
|
||||||
|
|
||||||
|
td, th /* Table cells and table header cells */
|
||||||
|
{
|
||||||
|
vertical-align: top; /* Word */
|
||||||
|
vertical-align: baseline; /* Others */
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
padding-top: 0.2em;
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Removes padding on left and right of table for a tight look. Good if thead has no background color*/
|
||||||
|
/*
|
||||||
|
tr td:last-child, tr th:last-child
|
||||||
|
{
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
tr td:first-child, tr th:first-child
|
||||||
|
{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
th /* Table header cells */
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot /* Table footer (what appears here if caption is on top?) */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
caption /* This is for a table caption tag, not the p.caption Pandoc uses in a div.figure */
|
||||||
|
{
|
||||||
|
caption-side: top;
|
||||||
|
border: none;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.3em; /* Good for when on top */
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Definition lists ---- */
|
||||||
|
|
||||||
|
dl /* The whole list */
|
||||||
|
{
|
||||||
|
border-top: 2pt solid black;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
border-bottom: 2pt solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt /* Definition term */
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd+dt /* 2nd or greater term in the list */
|
||||||
|
{
|
||||||
|
border-top: 1pt solid black;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd /* A definition */
|
||||||
|
{
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd+dd /* 2nd or greater definition of a term */
|
||||||
|
{
|
||||||
|
border-top: 1px solid black; /* To separate multiple definitions */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- Footnotes ---- */
|
||||||
|
|
||||||
|
a.footnote, a.footnoteRef { /* Pandoc, MultiMarkdown footnote links */
|
||||||
|
font-size: small;
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown, ?? footnote back links */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
a[href^="#fnref"], a.reversefootnote /* Pandoc, MultiMarkdown */
|
||||||
|
{
|
||||||
|
/* Don't display these at all in print since the arrow is only something to click on */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.footnotes /* Pandoc footnotes div at end of the document */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
div.footnotes li[id^="fn"] /* A footnote item within that div */
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/* You can class stuff as "noprint" to not print.
|
||||||
|
Useful since you can't set this media conditional inside an HTML element's
|
||||||
|
style attribute (I think), and you don't want to make another stylesheet that
|
||||||
|
imports this one and adds a class just to do this.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media print
|
||||||
|
{
|
||||||
|
.noprint
|
||||||
|
{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
71
style/template.html5
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html$if(lang)$ lang="$lang$"$endif$>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="generator" content="pandoc">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
$for(author-meta)$
|
||||||
|
<meta name="author" content="$author-meta$">
|
||||||
|
$endfor$
|
||||||
|
$if(date-meta)$
|
||||||
|
<meta name="dcterms.date" content="$date-meta$">
|
||||||
|
$endif$
|
||||||
|
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
|
||||||
|
<style type="text/css">code{white-space: pre;}</style>
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
$if(quotes)$
|
||||||
|
<style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
|
||||||
|
$endif$
|
||||||
|
$if(highlighting-css)$
|
||||||
|
<style type="text/css">
|
||||||
|
$highlighting-css$
|
||||||
|
</style>
|
||||||
|
$endif$
|
||||||
|
$for(css)$
|
||||||
|
<link rel="stylesheet" href="$css$">
|
||||||
|
$endfor$
|
||||||
|
$if(math)$
|
||||||
|
$math$
|
||||||
|
$endif$
|
||||||
|
$for(header-includes)$
|
||||||
|
$header-includes$
|
||||||
|
$endfor$
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
$for(include-before)$
|
||||||
|
$include-before$
|
||||||
|
$endfor$
|
||||||
|
<content>
|
||||||
|
$if(title)$
|
||||||
|
<header>
|
||||||
|
<h1 class="title">$title$</h1>
|
||||||
|
$if(subtitle)$
|
||||||
|
<h1 class="subtitle">$subtitle$</h1>
|
||||||
|
$endif$
|
||||||
|
$if(cover)$
|
||||||
|
<figure>
|
||||||
|
<img src="$cover$"/>
|
||||||
|
</figure>
|
||||||
|
$endif$
|
||||||
|
$for(author)$
|
||||||
|
<h2 class="author">$author$</h2>
|
||||||
|
$endfor$
|
||||||
|
$if(date)$
|
||||||
|
<h3 class="date">$date$</h3>
|
||||||
|
$endif$
|
||||||
|
</header>
|
||||||
|
$endif$
|
||||||
|
$if(toc)$
|
||||||
|
<nav id="$idprefix$TOC">
|
||||||
|
$toc$
|
||||||
|
</nav>
|
||||||
|
$endif$
|
||||||
|
$body$
|
||||||
|
</content>
|
||||||
|
$for(include-after)$
|
||||||
|
$include-after$
|
||||||
|
$endfor$
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
texts/10_PRINT_121114.pdf
Normal file
BIN
texts/CoxMcLean-Double_Coding.pdf
Normal file
3739
texts/Dieter-CTP.pdf
Normal file
BIN
texts/Dourish-PPP.pdf
Normal file
BIN
texts/Flusser-The_Codified_World.pdf
Normal file
BIN
texts/Galloway-Phy.pdf
Normal file
BIN
texts/Mitchell-Image copy.pdf
Normal file
BIN
texts/Mitchell-Image.pdf
Normal file
BIN
texts/kittler-code.pdf
Normal file
BIN
texts/noah-wardripfruin-DigitalMediaArchaeology.pdf
Normal file
BIN
texts/six-oulipo.pdf
Normal file
@ -1,9 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
[commander](https://www.npmjs.com/package/commander)
|
|
||||||
|
|
||||||
[Athenaeum Boekhandel](http://www.athenaeum.nl)
|
|
||||||
|
|
||||||
[American Book Center](http://www.abc.nl)
|
|
||||||
|
|
||||||
[CTH-2016 / Assignments Configuration](https://gauthiier.github.io/cth2016/assignments-conf.html)
|
|
||||||
44
week1/person-gr01/.gitignore
vendored
@ -1,44 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
node_modules
|
|
||||||
jspm_packages
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
|
|
||||||
Usage: person [options]
|
|
||||||
|
|
||||||
Options:
|
|
||||||
|
|
||||||
-h, --help output usage information
|
|
||||||
-V, --version output the version number
|
|
||||||
-n, --name [value] Name of the person to match
|
|
||||||
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "person",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "find person from database",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"commander": "^2.9.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
/*
|
|
||||||
file: person.js
|
|
||||||
desc: simple script that matches incoming arguments (--name)
|
|
||||||
with a simple database
|
|
||||||
author: gauthier
|
|
||||||
date: 03/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// import 'commander' (https://www.npmjs.com/package/commander)
|
|
||||||
var program = require('commander');
|
|
||||||
|
|
||||||
// database of persons
|
|
||||||
var person1_name = "Maurice";
|
|
||||||
var person1_age = 83;
|
|
||||||
var person1_lan = "french";
|
|
||||||
|
|
||||||
var person2_name = "Lotte";
|
|
||||||
var person2_age = 32;
|
|
||||||
var person2_lan = "danish";
|
|
||||||
|
|
||||||
var person3_name = "Geert";
|
|
||||||
var person3_age = 42;
|
|
||||||
var person3_lan = "dutch";
|
|
||||||
|
|
||||||
// initialise program (aka commander)
|
|
||||||
program
|
|
||||||
.version('0.0.1')
|
|
||||||
.option('-n, --name [value]', 'Name of the person to match', 'empty') // add option --name with default value "empty"
|
|
||||||
.parse(process.argv);
|
|
||||||
|
|
||||||
// check what the value of name is regardless of if it matches or not
|
|
||||||
console.log(program.name); // this line can be commented out
|
|
||||||
|
|
||||||
// match value of input's "name" argument
|
|
||||||
switch(program.name)
|
|
||||||
{
|
|
||||||
case person1_name:
|
|
||||||
// input match person1
|
|
||||||
console.log(person1_name);
|
|
||||||
console.log(person1_age);
|
|
||||||
console.log(person1_lan);
|
|
||||||
break;
|
|
||||||
case person2_name:
|
|
||||||
// input match person2
|
|
||||||
console.log(person2_name);
|
|
||||||
console.log(person2_age);
|
|
||||||
console.log(person2_lan);
|
|
||||||
break;
|
|
||||||
case person3_name:
|
|
||||||
// input match person3
|
|
||||||
console.log(person3_name);
|
|
||||||
console.log(person3_age);
|
|
||||||
console.log(person3_lan);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// default message if no match
|
|
||||||
console.log('No match...');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
44
week1/person-gr02/.gitignore
vendored
@ -1,44 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
node_modules
|
|
||||||
jspm_packages
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
|
|
||||||
Usage: person [options]
|
|
||||||
|
|
||||||
Options:
|
|
||||||
|
|
||||||
-h, --help output usage information
|
|
||||||
-V, --version output the version number
|
|
||||||
-n, --name [string] Name of the person to match
|
|
||||||
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "person",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "select person from database",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"commander": "^2.9.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
/*
|
|
||||||
file: person.js
|
|
||||||
desc: simple script that matches incoming arguments (--name)
|
|
||||||
with a simple database
|
|
||||||
author: gauthier
|
|
||||||
date: 03/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
// import 'commander' (https://www.npmjs.com/package/commander)
|
|
||||||
var program = require('commander');
|
|
||||||
|
|
||||||
// database of persons
|
|
||||||
var person1_name = "James";
|
|
||||||
var person1_age = 25;
|
|
||||||
var person1_lan = "english";
|
|
||||||
|
|
||||||
var person2_name = "Rita";
|
|
||||||
var person2_age = 7;
|
|
||||||
var person2_lan = "danish";
|
|
||||||
|
|
||||||
var person3_name = "Geert";
|
|
||||||
var person3_age = 51;
|
|
||||||
var person3_lan = "dutch";
|
|
||||||
|
|
||||||
// initialise program (aka commander)
|
|
||||||
program
|
|
||||||
.version('0.1')
|
|
||||||
.option('-n, --name [string]', 'Name of the person to match', 'empty') // add option --name with default value "empty"
|
|
||||||
.parse(process.argv);
|
|
||||||
|
|
||||||
// check what the value of name is regardless of if it matches or not
|
|
||||||
console.log(program.name); // this line can be commented out
|
|
||||||
|
|
||||||
// match value of input's "name" argument
|
|
||||||
switch(program.name)
|
|
||||||
{
|
|
||||||
case person1_name:
|
|
||||||
// input match person1
|
|
||||||
console.log(person1_name); // print name
|
|
||||||
console.log(person1_age); // print age
|
|
||||||
console.log(person1_lan); // print language
|
|
||||||
break;
|
|
||||||
case person2_name:
|
|
||||||
// input match person2
|
|
||||||
console.log(person2_name);
|
|
||||||
console.log(person2_age);
|
|
||||||
console.log(person2_lan);
|
|
||||||
break;
|
|
||||||
case person3_name:
|
|
||||||
// input match person3
|
|
||||||
console.log(person3_name);
|
|
||||||
console.log(person3_age);
|
|
||||||
console.log(person3_lan);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// default message if no match
|
|
||||||
console.log('...');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
|
|
||||||
Usage: bookstore [options]
|
|
||||||
|
|
||||||
Options:
|
|
||||||
|
|
||||||
-h, --help output usage information
|
|
||||||
-V, --version output the version number
|
|
||||||
-a, --author [name] Book author's name
|
|
||||||
-p, --price [price] Book price
|
|
||||||
-t, --title [name] Book title
|
|
||||||
-k, --kind [kind] Kind of book
|
|
||||||
-m, --max [price] Maximum price for a book
|
|
||||||
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
/*
|
|
||||||
file: bookstore.js
|
|
||||||
desc: simple script that matches incoming arguments about books
|
|
||||||
(--name) with a simple hardcoded database
|
|
||||||
author: gauthier
|
|
||||||
date: 03/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
// import 'commander' (https://www.npmjs.com/package/commander)
|
|
||||||
var program = require('commander');
|
|
||||||
|
|
||||||
/*
|
|
||||||
var book1_title = "Ways of Curating";
|
|
||||||
var book1_price = 16.95;
|
|
||||||
var book1_author = "Hans Ulrich Orbist";
|
|
||||||
|
|
||||||
var book2_title = "Ardor";
|
|
||||||
var book2_price = 39.5;
|
|
||||||
var book2_author = "Roberto Calasso";
|
|
||||||
|
|
||||||
var book3_title = "Why Grow Up?";
|
|
||||||
var book3_price = 15.95;
|
|
||||||
var book3_author = "Susan Neiman";
|
|
||||||
|
|
||||||
|
|
||||||
var book3 = {
|
|
||||||
'title': "Why Grow Up?",
|
|
||||||
'price': 15.95,
|
|
||||||
'author': "Susan Neiman"
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
console.log(book3_price);
|
|
||||||
|
|
||||||
console.log(book3);
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//etc...
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// database of books
|
|
||||||
var books = [
|
|
||||||
{'title': "Ways of Curating",
|
|
||||||
'author': "Hans Ulrich Orbist",
|
|
||||||
'price': 16.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "Ardor",
|
|
||||||
'author': "Roberto Calasso",
|
|
||||||
'price': 39.50,
|
|
||||||
'kind': "Hardcover"
|
|
||||||
},
|
|
||||||
{'title': "Why Grow Up?",
|
|
||||||
'author': "Susan Neiman",
|
|
||||||
'price': 15.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "The Complete Stories",
|
|
||||||
'author': "Flannery O'connor",
|
|
||||||
'price': 19.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "The Hatred of Poetry",
|
|
||||||
'author': "Ben Lerner",
|
|
||||||
'price': 13.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// initialise program (aka commander)
|
|
||||||
program
|
|
||||||
.version('0.1')
|
|
||||||
.option('-a, --author [name]', "Book author's name")
|
|
||||||
.option('-p, --price [price]', 'Book price')
|
|
||||||
.option('-t, --title [name]', 'Book title')
|
|
||||||
.option('-k, --kind [kind]', 'Kind of book')
|
|
||||||
.option('-m, --max [price]', 'Maximum price for a book')
|
|
||||||
.parse(process.argv);
|
|
||||||
|
|
||||||
if(program.title) {
|
|
||||||
for(var i = 0; i < books.length; i++) {
|
|
||||||
if(program.title === books[i].title) {
|
|
||||||
print_book(books[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(program.author) {
|
|
||||||
for(var i = 0; i < books.length; i++) {
|
|
||||||
if(program.author === books[i].author) {
|
|
||||||
print_book(books[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(program.kind) {
|
|
||||||
for(var i = 0; i < books.length; i++) {
|
|
||||||
if(program.kind === books[i].kind) {
|
|
||||||
print_book(books[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(program.max) {
|
|
||||||
for(var i = 0; i < books.length; i++) {
|
|
||||||
if(books[i].price < program.max) {
|
|
||||||
print_book(books[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log("nothing...");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function print_book(book) {
|
|
||||||
console.log('- - - - - - - ');
|
|
||||||
console.log('Title: ' + book.title);
|
|
||||||
console.log('Author: ' + book.author);
|
|
||||||
console.log('Price: ' + book.price);
|
|
||||||
console.log('Kind: ' + book.kind);
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "bookstore",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "fake bookstore for CTH2016 assigment 1",
|
|
||||||
"main": "bookstore.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"commander": "^2.9.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
// bookstore.js
|
|
||||||
|
|
||||||
/*
|
|
||||||
var book1_title = "Ways of Curating";
|
|
||||||
var book1_price = 16.95;
|
|
||||||
var book1_author = "Hans Ulrich Orbist";
|
|
||||||
|
|
||||||
var book2_title = "Ardor";
|
|
||||||
var book2_price = 39.5;
|
|
||||||
var book2_author = "Roberto Calasso";
|
|
||||||
|
|
||||||
var book3_title = "Why Grow Up?";
|
|
||||||
var book3_price = 15.95;
|
|
||||||
var book3_author = "Susan Neiman";
|
|
||||||
*/
|
|
||||||
|
|
||||||
var book1 = {
|
|
||||||
'title': "Ways of Curating",
|
|
||||||
'price': 16.95,
|
|
||||||
'author': "Hans Ulrich Orbist"
|
|
||||||
};
|
|
||||||
|
|
||||||
var book2 = {
|
|
||||||
'title': "Ardor",
|
|
||||||
'price': 39.5,
|
|
||||||
'author': "Roberto Calasso"
|
|
||||||
};
|
|
||||||
|
|
||||||
var book3 = {
|
|
||||||
'title': "Why Grow Up?",
|
|
||||||
'price': 15.95,
|
|
||||||
'author': "Susan Neiman"
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var array_of_books = [
|
|
||||||
{ 'title': "Ways of Curating",
|
|
||||||
'price': 16.95,
|
|
||||||
'author': "Hans Ulrich Orbist"
|
|
||||||
},
|
|
||||||
|
|
||||||
{ 'title': "Ardor",
|
|
||||||
'price': 39.5,
|
|
||||||
'author': "Roberto Calasso"
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
'title': "Why Grow Up?",
|
|
||||||
'price': 15.95,
|
|
||||||
'author': "Susan Neiman"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
function print_the_book(a_book) {
|
|
||||||
console.log('--------------');
|
|
||||||
console.log('Title: ' + a_book.title);
|
|
||||||
console.log('Price: ' + a_book.price);
|
|
||||||
console.log('Author: ' + a_book.author);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
for(var i = 0; i < array_of_books.length; i++) {
|
|
||||||
print_the_book(array_of_books[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// console.log(book1);
|
|
||||||
// console.log(book2);
|
|
||||||
// console.log(book3);
|
|
||||||
|
|
||||||
|
|
||||||
//console.log(book3.author);
|
|
||||||
//console.log(book3_author);
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "bookstore",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "test code for gr01 bookstore",
|
|
||||||
"main": "bookstore.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC"
|
|
||||||
}
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
/*
|
|
||||||
file: letter.js
|
|
||||||
desc: simple script that generates a (skeleton) letter
|
|
||||||
based on Christopher Stratchey's Love Letter as
|
|
||||||
analysed by Noah Wardrip-Fruin in "Digital Media Archeology"
|
|
||||||
author: gauthier
|
|
||||||
date: 11/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
// import chance (http://chancejs.com)
|
|
||||||
var chance = require('chance').Chance(); // npm install --save chance
|
|
||||||
|
|
||||||
// import word-wrap (https://www.npmjs.com/package/word-wrap)
|
|
||||||
var wrap = require('word-wrap'); // npm install --save word-wrap
|
|
||||||
|
|
||||||
// Stratchey's Love letter vocabulary database
|
|
||||||
// based on Noah Wardrip-Fruin's "Digital Media Archeology" Table 14.1
|
|
||||||
const first = ['DARLING', 'DEAR', 'HONEY', 'JEWEL'];
|
|
||||||
|
|
||||||
const second = ['DUCK', 'LOVE', 'MOPPET', 'SWEETHEART'];
|
|
||||||
|
|
||||||
const adjectives = ['ADORABLE', 'AFFECTIONATE', 'AMOROUS', 'ANXIOUS', 'ARDENT', 'AVID', 'BREATHLESS', 'BURNING', 'COVETOUS', 'CRAVING', 'CURIOUS', 'DARLING', 'DEAR', 'DEVOTED', 'EAGER', 'EROTIC', 'FERVENT', 'FOND', 'IMPATIENT', 'KEEN', 'LITTLE', 'LOVEABLE', 'LOVESICK', 'LOVING', 'PASSIONATE', 'PRECIOUS', 'SWEET', 'SYMPATHETIC', 'TENDER', 'UNSATISFIED', 'WISTFUL'];
|
|
||||||
|
|
||||||
const nouns = ['ADORATION', 'AFFECTION', 'AMBITION', 'APPETITE', 'ARDOUR', 'CHARM', 'DESIRE', 'DEVOTION', 'EAGERNESS', 'ENCHANTMENT', 'ENTHUSIASM', 'FANCY', 'FELLOW FEELING', 'FERVOUR', 'FONDNESS', 'HEART', 'HUNGER', 'INFATUATION', 'LIKING', 'LONGING', 'LOVE', 'LUST', 'PASSION', 'RAPTURE', 'SYMPATHY', 'TENDERNESS', 'THIRST', 'WISH', 'YEARNING'];
|
|
||||||
|
|
||||||
const adverbs = ['AFFECTIONATELY', 'ANXIOUSLY', 'ARDENTLY', 'AVIDLY', 'BEAUTIFULLY', 'BREATHLESSLY', 'BURNINGLY', 'COVETOUSLY', 'CURIOUSLY', 'DEVOTEDLY', 'EAGERLY', 'FERVENTLY', 'FONDLY', 'IMPATIENTLY', 'KEENLY', 'LOVINGLY', 'PASSIONATELY', 'SEDUCTIVELY', 'TENDERLY', 'WINNINGLY', 'WISTFULLY'];
|
|
||||||
|
|
||||||
const verbs = ['ADORES', 'ATTRACTS', 'CARES FOR', 'CHERISHES', 'CLINGS TO', 'DESIRES','HOLDS DEAR', 'HOPES FOR', 'HUNGERS FOR', 'IS WEDDED TO', 'LIKES', 'LONGS FOR', 'LOVES', 'LUSTS AFTER', 'PANTS FOR', 'PINES FOR', 'PRIZES', 'SIGHS FOR', 'TEMPTS', 'THIRSTS FOR', 'TREASURES', 'WANTS', 'WISHES', 'WOOS', 'YEARNS FOR'];
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Picks a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
*/
|
|
||||||
function choice(array) {
|
|
||||||
var index = chance.natural({'min': 0, 'max': array.length - 1});
|
|
||||||
return array[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Randomly picks or not a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
* @return {String} empty string
|
|
||||||
*/
|
|
||||||
function maybe(array) {
|
|
||||||
if( chance.bool() ) {
|
|
||||||
return choice(array);
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generates a short phrase consisting of a randomly chosen
|
|
||||||
* adjective and noun
|
|
||||||
* @return {String} phrase
|
|
||||||
*/
|
|
||||||
function short() {
|
|
||||||
return choice(adjectives) + ' ' + choice(nouns);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generates a sentence composed of randomly chosen
|
|
||||||
* adjective, noun, adverb, verb, adjective and noun
|
|
||||||
* @return {String} sentence
|
|
||||||
*/
|
|
||||||
function long() {
|
|
||||||
return 'MY ' + maybe(adjectives) + ' ' + choice(nouns) + ' ' +
|
|
||||||
maybe(adverbs) + ' ' + choice(verbs) + ' ' +
|
|
||||||
'YOUR ' + maybe(adjectives) + ' ' + choice(nouns) + '. ';
|
|
||||||
}
|
|
||||||
|
|
||||||
// format the output (header)
|
|
||||||
console.log('\n\n\n\n'); // 4 x newline ('\n')
|
|
||||||
|
|
||||||
// in order to use word-wrap, I need to construct a single string
|
|
||||||
// (text) containing all generated sentences
|
|
||||||
var text = '';
|
|
||||||
|
|
||||||
// loop generating 5 sentences
|
|
||||||
for(var i = 0; i < 5; i++) {
|
|
||||||
|
|
||||||
// concatenate the new sentence generated by long() with the text string
|
|
||||||
text += long(); // (+=) text = text + long()
|
|
||||||
}
|
|
||||||
|
|
||||||
// wrap the text with a width of 65 characters and log (output) it to the console
|
|
||||||
console.log(wrap(text, {'width': 65}));
|
|
||||||
|
|
||||||
// format for the output (footer)
|
|
||||||
console.log('\n\n\n\n'); // 4 x newline ('\n')
|
|
||||||
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "letter",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "letter generation example gr01",
|
|
||||||
"main": "letter.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"chance": "^1.0.4",
|
|
||||||
"commander": "^2.9.0",
|
|
||||||
"word-wrap": "^1.1.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
// import 'commander' (https://www.npmjs.com/package/commander)
|
|
||||||
var program = require('commander');
|
|
||||||
|
|
||||||
/*
|
|
||||||
var book1_title = "Ways of Curating";
|
|
||||||
var book1_price = 16.95;
|
|
||||||
var book1_author = "Hans Ulrich Orbist";
|
|
||||||
|
|
||||||
var book2_title = "Ardor";
|
|
||||||
var book2_price = 39.5;
|
|
||||||
var book2_author = "Roberto Calasso";
|
|
||||||
|
|
||||||
var book3_title = "Why Grow Up?";
|
|
||||||
var book3_price = 15.95;
|
|
||||||
var book3_author = "Susan Neiman";
|
|
||||||
*/
|
|
||||||
|
|
||||||
var book1 = {
|
|
||||||
'title': "Ways of Curating",
|
|
||||||
'price': 16.95,
|
|
||||||
'author': "Hans Ulrich Orbist"
|
|
||||||
};
|
|
||||||
|
|
||||||
var book2 = {
|
|
||||||
'title': "Ardor",
|
|
||||||
'price': 39.5,
|
|
||||||
'author': "Roberto Calasso"
|
|
||||||
};
|
|
||||||
|
|
||||||
var book3 = {
|
|
||||||
'title': "Why Grow Up?",
|
|
||||||
'price': 15.95,
|
|
||||||
'author': "Susan Neiman"
|
|
||||||
};
|
|
||||||
|
|
||||||
var array_of_books = [
|
|
||||||
{ 'title': "Ways of Curating",
|
|
||||||
'price': 16.95,
|
|
||||||
'author': "Hans Ulrich Orbist"
|
|
||||||
},
|
|
||||||
{ 'title': "Ardor",
|
|
||||||
'price': 39.5,
|
|
||||||
'author': "Roberto Calasso"
|
|
||||||
},
|
|
||||||
{'title': "Why Grow Up?",
|
|
||||||
'price': 15.95,
|
|
||||||
'author': "Susan Neiman"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
function print_the_book(a_book) {
|
|
||||||
console.log("----------");
|
|
||||||
console.log("Title: " + a_book.title);
|
|
||||||
console.log("Price: " + a_book.price);
|
|
||||||
console.log("Author: " + a_book.author);
|
|
||||||
}
|
|
||||||
|
|
||||||
// LOOP
|
|
||||||
|
|
||||||
for(var i = 0; i < array_of_books.length; i++) {
|
|
||||||
print_the_book(array_of_books[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//--------------------------------------------
|
|
||||||
|
|
||||||
// old code
|
|
||||||
|
|
||||||
/*
|
|
||||||
console.log(array_of_books[0]);
|
|
||||||
console.log(array_of_books[1]);
|
|
||||||
console.log(array_of_books[2]);
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
//console.log(array_of_books.length);
|
|
||||||
|
|
||||||
//console.log(book3_price);
|
|
||||||
|
|
||||||
//console.log(book3);
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "gr01-bookstore",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "test code for week2 gr01",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"commander": "^2.9.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
/*
|
|
||||||
file: letter.js
|
|
||||||
desc: simple script that generates a (skeleton) letter
|
|
||||||
based on Christopher Stratchey's Love Letter as
|
|
||||||
analysed by Noah Wardrip-Fruin in "Digital Media Archeology"
|
|
||||||
author: gauthier
|
|
||||||
date: 11/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
// import chance (http://chancejs.com)
|
|
||||||
var chance = require('chance').Chance(); // npm install --save chance
|
|
||||||
|
|
||||||
// import word-wrap (https://www.npmjs.com/package/word-wrap)
|
|
||||||
var wrap = require('word-wrap'); // npm install --save word-wrap
|
|
||||||
|
|
||||||
// Stratchey's Love letter vocabulary database
|
|
||||||
// based on Noah Wardrip-Fruin's "Digital Media Archeology" Table 14.1
|
|
||||||
const first = ['DARLING', 'DEAR', 'HONEY', 'JEWEL'];
|
|
||||||
|
|
||||||
const second = ['DUCK', 'LOVE', 'MOPPET', 'SWEETHEART'];
|
|
||||||
|
|
||||||
const adjectives = ['ADORABLE', 'AFFECTIONATE', 'AMOROUS', 'ANXIOUS', 'ARDENT', 'AVID', 'BREATHLESS', 'BURNING', 'COVETOUS', 'CRAVING', 'CURIOUS', 'DARLING', 'DEAR', 'DEVOTED', 'EAGER', 'EROTIC', 'FERVENT', 'FOND', 'IMPATIENT', 'KEEN', 'LITTLE', 'LOVEABLE', 'LOVESICK', 'LOVING', 'PASSIONATE', 'PRECIOUS', 'SWEET', 'SYMPATHETIC', 'TENDER', 'UNSATISFIED', 'WISTFUL'];
|
|
||||||
|
|
||||||
const nouns = ['ADORATION', 'AFFECTION', 'AMBITION', 'APPETITE', 'ARDOUR', 'CHARM', 'DESIRE', 'DEVOTION', 'EAGERNESS', 'ENCHANTMENT', 'ENTHUSIASM', 'FANCY', 'FELLOW FEELING', 'FERVOUR', 'FONDNESS', 'HEART', 'HUNGER', 'INFATUATION', 'LIKING', 'LONGING', 'LOVE', 'LUST', 'PASSION', 'RAPTURE', 'SYMPATHY', 'TENDERNESS', 'THIRST', 'WISH', 'YEARNING'];
|
|
||||||
|
|
||||||
const adverbs = ['AFFECTIONATELY', 'ANXIOUSLY', 'ARDENTLY', 'AVIDLY', 'BEAUTIFULLY', 'BREATHLESSLY', 'BURNINGLY', 'COVETOUSLY', 'CURIOUSLY', 'DEVOTEDLY', 'EAGERLY', 'FERVENTLY', 'FONDLY', 'IMPATIENTLY', 'KEENLY', 'LOVINGLY', 'PASSIONATELY', 'SEDUCTIVELY', 'TENDERLY', 'WINNINGLY', 'WISTFULLY'];
|
|
||||||
|
|
||||||
const verbs = ['ADORES', 'ATTRACTS', 'CARES FOR', 'CHERISHES', 'CLINGS TO', 'DESIRES','HOLDS DEAR', 'HOPES FOR', 'HUNGERS FOR', 'IS WEDDED TO', 'LIKES', 'LONGS FOR', 'LOVES', 'LUSTS AFTER', 'PANTS FOR', 'PINES FOR', 'PRIZES', 'SIGHS FOR', 'TEMPTS', 'THIRSTS FOR', 'TREASURES', 'WANTS', 'WISHES', 'WOOS', 'YEARNS FOR'];
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Picks a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
*/
|
|
||||||
function choice(array) {
|
|
||||||
var index = chance.natural({'min': 0, 'max': array.length - 1}); // **** NOTE: 'max': array.length - 1
|
|
||||||
return array[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Randomly picks or not a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
* @return {String} empty string
|
|
||||||
*/
|
|
||||||
function maybe(array) {
|
|
||||||
if( chance.bool() ) {
|
|
||||||
return choice(array);
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generates a short phrase consisting of a randomly chosen
|
|
||||||
* adjective and noun
|
|
||||||
* @return {String} phrase
|
|
||||||
*/
|
|
||||||
function short() {
|
|
||||||
return choice(adjectives) + ' ' + choice(nouns);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generates a sentence composed of randomly chosen
|
|
||||||
* adjective, noun, adverb, verb, adjective and noun
|
|
||||||
* @return {String} sentence
|
|
||||||
*/
|
|
||||||
function long() {
|
|
||||||
return 'MY ' + maybe(adjectives) + ' ' + choice(nouns) + ' ' +
|
|
||||||
maybe(adverbs) + ' ' + choice(verbs) + ' ' +
|
|
||||||
'YOUR ' + maybe(adjectives) + ' ' + choice(nouns) + '. ';
|
|
||||||
}
|
|
||||||
|
|
||||||
// format the output (header)
|
|
||||||
console.log('\n\n\n\n'); // 4 x newline ('\n')
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Group 02: During the class I did not have time to add the word-wrapping
|
|
||||||
to the example we coded in class. It is here used to format the output of the script.
|
|
||||||
|
|
||||||
What is different from what you may have, is that I construct a single string called 'text'
|
|
||||||
which holds all generated sentences in the loop below. Thus, in the loop, rather than
|
|
||||||
outputting the sentence (console.log(long())), I simply concatenate the new sentence with
|
|
||||||
'text' (text += long()), which, in turn, holds all 5 sentences. The I use word-wrap to
|
|
||||||
format the 'text' depending on the width (in characters) I want the resulting letter to
|
|
||||||
be (here 65 characters).
|
|
||||||
|
|
||||||
for more information https://www.npmjs.com/package/word-wrap
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// in order to use word-wrap, I need to construct a single string
|
|
||||||
// (text) containing all generated sentences
|
|
||||||
var text = '';
|
|
||||||
|
|
||||||
// loop generating 5 sentences
|
|
||||||
for(var i = 0; i < 5; i++) {
|
|
||||||
|
|
||||||
// concatenate the new sentence generated by long() with the text string
|
|
||||||
text += long(); // (+=) text = text + long()
|
|
||||||
}
|
|
||||||
|
|
||||||
// wrap the text with a width of 65 characters and log (output) it to the console
|
|
||||||
console.log(wrap(text, {'width': 65}));
|
|
||||||
|
|
||||||
// format for the output (footer)
|
|
||||||
console.log('\n\n\n\n'); // 4 x newline ('\n')
|
|
||||||
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "letter",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "generated letters",
|
|
||||||
"main": "letter.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"chance": "^1.0.4",
|
|
||||||
"commander": "^2.9.0",
|
|
||||||
"word-wrap": "^1.1.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
Arrays:
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Letter:
|
|
||||||
|
|
||||||
[commander](https://www.npmjs.com/package/commander)
|
|
||||||
|
|
||||||
[chance](http://chancejs.com)
|
|
||||||
|
|
||||||
[word-wrap](https://www.npmjs.com/package/word-wrap)
|
|
||||||
|
|
||||||
```
|
|
||||||
// letter.js
|
|
||||||
|
|
||||||
var chance = require('chance').Chance();
|
|
||||||
|
|
||||||
var wrap = require('word-wrap');
|
|
||||||
|
|
||||||
const first = ['DARLING', 'DEAR', 'HONEY', 'JEWEL'];
|
|
||||||
|
|
||||||
const second = ['DUCK', 'LOVE', 'MOPPET', 'SWEETHEART'];
|
|
||||||
|
|
||||||
const adjectives = ['ADORABLE', 'AFFECTIONATE', 'AMOROUS', 'ANXIOUS', 'ARDENT', 'AVID', 'BREATHLESS', 'BURNING', 'COVETOUS', 'CRAVING', 'CURIOUS', 'DARLING', 'DEAR', 'DEVOTED', 'EAGER', 'EROTIC', 'FERVENT', 'FOND', 'IMPATIENT', 'KEEN', 'LITTLE', 'LOVEABLE', 'LOVESICK', 'LOVING', 'PASSIONATE', 'PRECIOUS', 'SWEET', 'SYMPATHETIC', 'TENDER', 'UNSATISFIED', 'WISTFUL'];
|
|
||||||
|
|
||||||
const nouns = ['ADORATION', 'AFFECTION', 'AMBITION', 'APPETITE', 'ARDOUR', 'CHARM', 'DESIRE', 'DEVOTION', 'EAGERNESS', 'ENCHANTMENT', 'ENTHUSIASM', 'FANCY', 'FELLOW FEELING', 'FERVOUR', 'FONDNESS', 'HEART', 'HUNGER', 'INFATUATION', 'LIKING', 'LONGING', 'LOVE', 'LUST', 'PASSION', 'RAPTURE', 'SYMPATHY', 'TENDERNESS', 'THIRST', 'WISH', 'YEARNING'];
|
|
||||||
|
|
||||||
const adverbs = ['AFFECTIONATELY', 'ANXIOUSLY', 'ARDENTLY', 'AVIDLY', 'BEAUTIFULLY', 'BREATHLESSLY', 'BURNINGLY', 'COVETOUSLY', 'CURIOUSLY', 'DEVOTEDLY', 'EAGERLY', 'FERVENTLY', 'FONDLY', 'IMPATIENTLY', 'KEENLY', 'LOVINGLY', 'PASSIONATELY', 'SEDUCTIVELY', 'TENDERLY', 'WINNINGLY', 'WISTFULLY'];
|
|
||||||
|
|
||||||
const verbs = ['ADORES', 'ATTRACTS', 'CARES FOR', 'CHERISHES', 'CLINGS TO', 'DESIRES','HOLDS DEAR', 'HOPES FOR', 'HUNGERS FOR', 'IS WEDDED TO', 'LIKES', 'LONGS FOR', 'LOVES', 'LUSTS AFTER', 'PANTS FOR', 'PINES FOR', 'PRIZES', 'SIGHS FOR', 'TEMPTS', 'THIRSTS FOR', 'TREASURES', 'WANTS', 'WISHES', 'WOOS', 'YEARNS FOR'];
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||

|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>TALK TO ME LOCALHOST</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
#frame {
|
|
||||||
width: 30em;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #888;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
#inputs, #text_field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<label>Talk to me Localhost</label>
|
|
||||||
<div id="frame">
|
|
||||||
|
|
||||||
<!-- text area where the conversation is displayed -->
|
|
||||||
<textarea id="conversation" text="..." rows="10" cols="65">...</textarea>
|
|
||||||
|
|
||||||
<!-- inputs from human to send to server -->
|
|
||||||
<div id="inputs">
|
|
||||||
<label>To Localhost: </label>
|
|
||||||
<input id="text_field" type="text" onkeydown="enter_message();"/>
|
|
||||||
<input type="button" value="Send" onclick="send_message();"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('human connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// when receiving a custom message form the server ('message from robot')
|
|
||||||
socket.on('message from robot', function(msg) {
|
|
||||||
console.log('robot message: ' + msg);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "server",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "simple http and websocket server",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"socket.io": "^1.5.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
//io.emit('message from robot', 'Hi! my name is Reihtuag!'); // greetings
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages ('message from human')
|
|
||||||
socket.on('message from human', function(msg) {
|
|
||||||
|
|
||||||
console.log('got a human message: ' + msg);
|
|
||||||
//io.emit('message from robot', msg);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>TALK TO ME LOCALHOST</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
#frame {
|
|
||||||
width: 30em;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #888;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
#inputs, #text_field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<label>Talk to me Localhost</label>
|
|
||||||
<div id="frame">
|
|
||||||
|
|
||||||
<!-- text area where the conversation is displayed -->
|
|
||||||
<textarea id="conversation" text="..." rows="10" cols="65">...</textarea>
|
|
||||||
|
|
||||||
<!-- inputs from human to send to server -->
|
|
||||||
<div id="inputs">
|
|
||||||
<label>To Localhost: </label>
|
|
||||||
<input id="text_field" type="text" onkeydown="enter_message();"/>
|
|
||||||
<input type="button" value="Send" onclick="send_message();"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('human connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// when receiving a custom message form the server ('message from robot')
|
|
||||||
socket.on('message from robot', function(msg) {
|
|
||||||
|
|
||||||
document.getElementById("conversation").value += '> ' + msg + '\n';
|
|
||||||
|
|
||||||
console.log('robot message: ' + msg);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function send_message() {
|
|
||||||
|
|
||||||
var text = document.getElementById("text_field").value;
|
|
||||||
|
|
||||||
document.getElementById("conversation").value += '* ' + text + '\n';
|
|
||||||
|
|
||||||
socket.emit('message from human', text);
|
|
||||||
|
|
||||||
document.getElementById("text_field").value = '';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "TALK TO ME LOCALHOST",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "simple http and websocket server used to play an imitation game",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"chance": "^1.0.4",
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"socket.io": "^1.5.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
/*
|
|
||||||
file: server.js
|
|
||||||
desc: script that configures a HTTP server that listens to incoming client connections.
|
|
||||||
Clients are expected to send chat-like messages (see index.html) which are replied
|
|
||||||
to depending if certain patterns are recognised in the message (or not). The idea
|
|
||||||
is to create a simple artificial conversation between the a human subject and the
|
|
||||||
script. The work is inspired by Alan Turing's Imitation Game and Joseph Weizenbaum's
|
|
||||||
ELIZA.
|
|
||||||
author: gauthier
|
|
||||||
date: 17/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
// import chance (http://chancejs.com)
|
|
||||||
var chance = require('chance').Chance(); // npm install --save chance
|
|
||||||
|
|
||||||
/* ---------------------
|
|
||||||
Answers & Responses
|
|
||||||
------------------------*/
|
|
||||||
|
|
||||||
// the two patterns which the script looks for when
|
|
||||||
// receiving message from the client
|
|
||||||
var pattern_1 = ['How do you do?', "What's up"];
|
|
||||||
var pattern_2 = ['No', "Are you crazy", 'Hmmm'];
|
|
||||||
|
|
||||||
// helpful punctuation
|
|
||||||
var ponctuation = ['!', '.', '...'];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Iterates through and array of clauses or words and
|
|
||||||
* search them inside a given sentence (msg). Returns
|
|
||||||
* true if the search is successful and false otherwise.
|
|
||||||
* @param {Array of strings} array_of_patterns
|
|
||||||
* @param {String} msg
|
|
||||||
* @return {boolean}
|
|
||||||
*/
|
|
||||||
function matches(msg, array_of_patterns) {
|
|
||||||
|
|
||||||
var msg_lower = msg.toLowerCase();
|
|
||||||
|
|
||||||
for(var i = 0; i < array_of_patterns.length; i++) {
|
|
||||||
|
|
||||||
var pattern_lower = array_of_patterns[i].toLowerCase();
|
|
||||||
|
|
||||||
if(msg_lower.search(pattern_lower) > -1) {
|
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Picks a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
*/
|
|
||||||
function choice(array) {
|
|
||||||
|
|
||||||
var index = chance.natural({'min': 0, 'max': array.length - 1}); // **** NOTE: 'max': array.length - 1
|
|
||||||
|
|
||||||
return array[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Randomly picks or not a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
* @return {String} empty string
|
|
||||||
*/
|
|
||||||
function maybe(array) {
|
|
||||||
|
|
||||||
if( chance.bool() ) {
|
|
||||||
|
|
||||||
return choice(array);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
return '';
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructs a single randomly generate answer
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
function patter_1_answer() {
|
|
||||||
return choice(['Hmmm', 'Ah!', '...']) + ' ' + 'I am ' + choice(['feeling', 'doing']) + ' '
|
|
||||||
+ choice(['great', 'fabulous', 'cat-like', 'miserable', 'fine', 'confused']) + ' '
|
|
||||||
+ choice(ponctuation);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructs a randomly generate answer out of three random possibilities
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
function patter_2_answer() {
|
|
||||||
|
|
||||||
switch(choice([1, 2, 3]))
|
|
||||||
{
|
|
||||||
case 1:
|
|
||||||
return choice(['Please', 'Hmmm', 'Ok']) + " don't be "
|
|
||||||
+ maybe(['avidly', 'impatiently', 'eagerly', 'anxiously']) + ' '
|
|
||||||
+ choice(['superficial', 'mean', 'joyful', 'negative', 'pickled', 'angry'])
|
|
||||||
+ choice(ponctuation);
|
|
||||||
case 2:
|
|
||||||
return choice(['I am sorry', 'Excuse me', 'Eh...']) + ' I do ' + choice(['not', 'indeed']) + ' '
|
|
||||||
+ choice(['understand', 'share the same worldview as', 'empathise with']) + ' you'
|
|
||||||
+ choice(ponctuation);
|
|
||||||
case 3:
|
|
||||||
return choice(['YES', 'Ok', 'Zzzzz']) + choice(ponctuation) + choice(ponctuation) + choice(ponctuation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructs a single randomly generate answer
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
function default_answer() {
|
|
||||||
|
|
||||||
return choice(['Sorry, come again.', 'I do not understand.', 'Can you repeat.',
|
|
||||||
'No comprendo...', 'Ne me quitte pas!']);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Matches a message to the above two patterns (pattern_1, pattern_2)
|
|
||||||
* and calls their respective answers (functions patter_1_answer and patter_2_answer )
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
|
|
||||||
function answer(msg) {
|
|
||||||
|
|
||||||
if(matches(msg, pattern_1)) {
|
|
||||||
|
|
||||||
return patter_1_answer();
|
|
||||||
|
|
||||||
} else if(matches(msg, pattern_2)) {
|
|
||||||
|
|
||||||
return patter_2_answer();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
return default_answer();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
//io.emit('message from robot', 'Hi! my name is Reihtuag!'); // greetings
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages ('message from human')
|
|
||||||
// and call the function answer to produce a response
|
|
||||||
socket.on('message from human', function(msg) {
|
|
||||||
|
|
||||||
console.log('got a human message: ' + msg);
|
|
||||||
|
|
||||||
io.emit('message from robot', answer(msg)); /// <--- call of the function answer defined above
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>TALK TO ME LOCALHOST</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
#frame {
|
|
||||||
width: 30em;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #888;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
#inputs, #text_field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<label>Talk to me Localhost</label>
|
|
||||||
<div id="frame">
|
|
||||||
|
|
||||||
<!-- text area where the conversation is displayed -->
|
|
||||||
<textarea id="conversation" text="..." rows="10" cols="65">...</textarea>
|
|
||||||
|
|
||||||
<!-- inputs from human to send to server -->
|
|
||||||
<div id="inputs">
|
|
||||||
<label>To Localhost: </label>
|
|
||||||
<input id="text_field" type="text" onkeydown="enter_message();"/>
|
|
||||||
<input type="button" value="Send" onclick="send_message();"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('human connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// when receiving a custom message form the server ('message from robot')
|
|
||||||
socket.on('message from robot', function(msg) {
|
|
||||||
|
|
||||||
document.getElementById("conversation").value += '> ' + msg + '\n';
|
|
||||||
|
|
||||||
console.log('robot message: ' + msg);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function send_message() {
|
|
||||||
|
|
||||||
var text = document.getElementById("text_field").value;
|
|
||||||
|
|
||||||
document.getElementById("conversation").value += '* ' + text + '\n';
|
|
||||||
|
|
||||||
socket.emit('message from human', text);
|
|
||||||
|
|
||||||
document.getElementById("text_field").value = '';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "TALK TO ME LOCALHOST",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "simple http and websocket server used to play an imitation game",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"chance": "^1.0.4",
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"socket.io": "^1.5.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,207 +0,0 @@
|
|||||||
/*
|
|
||||||
file: server.js
|
|
||||||
desc: script that configures a HTTP server that listens to incoming client connections.
|
|
||||||
Clients are expected to send chat-like messages (see index.html) which are replied
|
|
||||||
to depending if certain patterns are recognised in the message (or not). The idea
|
|
||||||
is to create a simple artificial conversation between the a human subject and the
|
|
||||||
script. The work is inspired by Alan Turing's Imitation Game and Joseph Weizenbaum's
|
|
||||||
ELIZA.
|
|
||||||
author: gauthier
|
|
||||||
date: 17/11/16
|
|
||||||
*/
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
// import chance (http://chancejs.com)
|
|
||||||
var chance = require('chance').Chance(); // npm install --save chance
|
|
||||||
|
|
||||||
/* ---------------------
|
|
||||||
Answers & Responses
|
|
||||||
------------------------*/
|
|
||||||
|
|
||||||
// the two patterns which the script looks for when
|
|
||||||
// receiving message from the client
|
|
||||||
|
|
||||||
const pattern_1 = ['How do you do?', 'Wazzup?'];
|
|
||||||
const pattern_2 = ['Why?', 'No', "ok"];
|
|
||||||
|
|
||||||
// helpful punctuation
|
|
||||||
var ponctuation = ['!', '.', '...'];
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Iterates through and array of clauses or words and
|
|
||||||
* search them inside a given sentence (msg). Returns
|
|
||||||
* true if the search is successful and false otherwise.
|
|
||||||
* @param {Array of strings} array_of_patterns
|
|
||||||
* @param {String} msg
|
|
||||||
* @return {boolean}
|
|
||||||
*/
|
|
||||||
function matches(msg, array_of_patterns) {
|
|
||||||
|
|
||||||
var msg_lower = msg.toLowerCase();
|
|
||||||
|
|
||||||
for(var i = 0; i < array_of_patterns.length; i++) {
|
|
||||||
|
|
||||||
var pattern_lower = array_of_patterns[i].toLowerCase();
|
|
||||||
|
|
||||||
if(msg_lower.search(pattern_lower) > -1) {
|
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Picks a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
*/
|
|
||||||
function choice(array) {
|
|
||||||
|
|
||||||
var index = chance.natural({'min': 0, 'max': array.length - 1}); // **** NOTE: 'max': array.length - 1
|
|
||||||
|
|
||||||
return array[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Randomly picks or not a random element from an array
|
|
||||||
* @param {Array} array
|
|
||||||
* @return {Object} choice
|
|
||||||
* @return {String} empty string
|
|
||||||
*/
|
|
||||||
function maybe(array) {
|
|
||||||
|
|
||||||
if( chance.bool() ) {
|
|
||||||
|
|
||||||
return choice(array);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
return '';
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructs a single randomly generate answer
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
function patter_1_answer() {
|
|
||||||
return choice(['Hmmm', 'Ah!', '...']) + ' ' + 'I am ' + choice(['feeling', 'doing']) + ' '
|
|
||||||
+ choice(['great', 'fabulous', 'cat-like', 'miserable', 'fine', 'confused']) + ' '
|
|
||||||
+ choice(ponctuation);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructs a randomly generate answer out of three random possibilities
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
function patter_2_answer() {
|
|
||||||
|
|
||||||
switch(choice([1, 2, 3]))
|
|
||||||
{
|
|
||||||
case 1:
|
|
||||||
return choice(['Please', 'Hmmm', 'Ok']) + " don't be "
|
|
||||||
+ maybe(['avidly', 'impatiently', 'eagerly', 'anxiously']) + ' '
|
|
||||||
+ choice(['superficial', 'mean', 'joyful', 'negative', 'pickled', 'angry'])
|
|
||||||
+ choice(ponctuation);
|
|
||||||
case 2:
|
|
||||||
return choice(['I am sorry', 'Excuse me', 'Eh...']) + ' I do ' + choice(['not', 'indeed']) + ' '
|
|
||||||
+ choice(['understand', 'share the same worldview as', 'empathise with']) + ' you'
|
|
||||||
+ choice(ponctuation);
|
|
||||||
case 3:
|
|
||||||
return choice(['YES', 'Ok', 'Zzzzz']) + choice(ponctuation) + choice(ponctuation) + choice(ponctuation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructs a single randomly generate answer
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
function default_answer() {
|
|
||||||
|
|
||||||
return choice(['Sorry, come again.', 'I do not understand.', 'Can you repeat.',
|
|
||||||
'No comprendo...', 'Ne me quitte pas!']);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Matches a message to the above two patterns (pattern_1, pattern_2)
|
|
||||||
* and calls their respective answers (functions patter_1_answer and patter_2_answer )
|
|
||||||
* @return {String}
|
|
||||||
*/
|
|
||||||
|
|
||||||
function answer(msg) {
|
|
||||||
|
|
||||||
if(matches(msg, pattern_1)) {
|
|
||||||
|
|
||||||
return patter_1_answer();
|
|
||||||
|
|
||||||
} else if(matches(msg, pattern_2)) {
|
|
||||||
|
|
||||||
return patter_2_answer();
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
return default_answer();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
//io.emit('message from robot', 'Hi! my name is Reihtuag!'); // greetings
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages ('message from human')
|
|
||||||
// and call the function answer to produce a response
|
|
||||||
socket.on('message from human', function(msg) {
|
|
||||||
|
|
||||||
console.log('got a human message: ' + msg);
|
|
||||||
|
|
||||||
var response = answer(msg); /// <--- call of the function answer defined above
|
|
||||||
|
|
||||||
io.emit('message from robot', response);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
Network Topologies
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
OSI Model
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
----
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
[Turing: The Imitation Game](http://www.loebner.net/Prizef/TuringArticle.html)
|
|
||||||
|
|
||||||
[Turing Test](http://plato.stanford.edu/entries/turing-test/)
|
|
||||||
|
|
||||||
[What is the Turing test? And are we all doomed now?](https://www.theguardian.com/technology/2014/jun/09/what-is-the-alan-turing-test)
|
|
||||||
|
|
||||||
[Why Aren't We Reading Turing](http://furtherfield.org/features/articles/why-arent-we-reading-turing)
|
|
||||||
|
|
||||||
----
|
|
||||||
|
|
||||||
[ELIZA](https://en.wikipedia.org/wiki/ELIZA)
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
----
|
|
||||||
|
|
||||||
__Localhost's Imitation Game__
|
|
||||||
|
|
||||||
[socket.io](http://socket.io)
|
|
||||||
|
|
||||||
[express](http://expressjs.com)
|
|
||||||
|
|
||||||
[chance](http://chancejs.com)
|
|
||||||
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
APIs (major vendors):
|
|
||||||
|
|
||||||
[Youtube](https://developers.google.com/youtube/v3/)
|
|
||||||
|
|
||||||
[Soundcloud](https://developers.soundcloud.com/docs/api/sdks)
|
|
||||||
|
|
||||||
[Soundcloud -- source](https://github.com/soundcloud/soundcloud-javascript)
|
|
||||||
|
|
||||||
[Twitter](https://dev.twitter.com/rest/public)
|
|
||||||
|
|
||||||
[Google Maps](https://developers.google.com/maps/web/)
|
|
||||||
|
|
||||||
[Github](https://developer.github.com/v3/)
|
|
||||||
|
|
||||||
[Europeana](http://labs.europeana.eu/api/introduction)
|
|
||||||
|
|
||||||
|
|
||||||
Interesting Projects:
|
|
||||||
|
|
||||||
Tactical Bots + Media jamming: [https://it-was-fun-at-first.net/](https://it-was-fun-at-first.net/)
|
|
||||||
|
|
||||||
#NaBoMaMo
|
|
||||||
|
|
||||||
[NaNoGenMo](https://github.com/NaNoGenMo/2016)
|
|
||||||
|
|
||||||
[#NaNoGenMo](https://twitter.com/hashtag/NaBoMaMo)
|
|
||||||
|
|
||||||
example:
|
|
||||||
|
|
||||||
[Bot - rpgoptions](https://twitter.com/rpgoptions)
|
|
||||||
|
|
||||||
[Source code - rpgoptions](https://github.com/Harrison-M/rpg-options)
|
|
||||||
|
|
||||||
bot framework:
|
|
||||||
|
|
||||||
[Hubot](https://hubot.github.com/docs/)
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Bookstore (remember?!)</title>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
/* CSS Styling */
|
|
||||||
|
|
||||||
#frame {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#inputs {
|
|
||||||
width: 30em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.book {
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px dashed red;
|
|
||||||
}
|
|
||||||
|
|
||||||
#books {
|
|
||||||
width: 30em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title_style {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 120;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import handlebars -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
|
|
||||||
<!-- import jquery -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<label>Bookstore (remember?!)</label>
|
|
||||||
<div id="frame">
|
|
||||||
|
|
||||||
<div id="inputs">
|
|
||||||
<input type="button" value="Get some books" onclick="get_books();"/>
|
|
||||||
<input id="nbr_books" type="number" value="2" min="1" max="5">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="books">
|
|
||||||
<script id="books-template" type="text/x-handlebars-template">
|
|
||||||
{{#each this}}
|
|
||||||
<div class="book">
|
|
||||||
<div class="title_style">Title: {{title}}</div>
|
|
||||||
<div class="author_style">Author: {{author}}</div>
|
|
||||||
<div class="price_style">Price: {{price}}</div>
|
|
||||||
<div class="kind_style">Kind: {{kind}}</div>
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// when receiving a custom message form the server
|
|
||||||
socket.on('all the books we have', function(msg) {
|
|
||||||
console.log('all the books: ' + JSON.stringify(msg));
|
|
||||||
|
|
||||||
compile_results_and_display(msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
function get_books() {
|
|
||||||
socket.emit('give some books', "nothing");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function compile_results_and_display(results) {
|
|
||||||
|
|
||||||
var template_script = $("#books-template").html();
|
|
||||||
|
|
||||||
var template = Handlebars.compile(template_script);
|
|
||||||
|
|
||||||
//$('.book').remove();
|
|
||||||
|
|
||||||
$('#books').append(template(results));
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "templating",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "example of templating using handlebars.js",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"socket.io": "^1.6.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
var books = [
|
|
||||||
{'title': "Ways of Curating",
|
|
||||||
'author': "Hans Ulrich Orbist",
|
|
||||||
'price': 16.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "Ardor",
|
|
||||||
'author': "Roberto Calasso",
|
|
||||||
'price': 39.50,
|
|
||||||
'kind': "Hardcover"
|
|
||||||
},
|
|
||||||
{'title': "Why Grow Up?",
|
|
||||||
'author': "Susan Neiman",
|
|
||||||
'price': 15.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "The Complete Stories",
|
|
||||||
'author': "Flannery O'connor",
|
|
||||||
'price': 19.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "The Hatred of Poetry",
|
|
||||||
'author': "Ben Lerner",
|
|
||||||
'price': 13.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages
|
|
||||||
socket.on('give some books', function(msg) {
|
|
||||||
|
|
||||||
console.log('got a give some books: ' + msg);
|
|
||||||
|
|
||||||
io.emit('all the books we have', books);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Bookstore (remember?!)</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
#frame {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#inputs {
|
|
||||||
width: 30em;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import handlebars -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
|
|
||||||
<!-- import jquery -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<label>Bookstore (remember?!)</label>
|
|
||||||
<div id="frame">
|
|
||||||
|
|
||||||
<div id="inputs">
|
|
||||||
<input type="button" value="Get some books" onclick="get_books();"/>
|
|
||||||
<input id="nbr_books" type="number" value="2" min="1" max="5">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<div id="books">
|
|
||||||
<script id="books-template" type="text/x-handlebars-template">
|
|
||||||
{{#each this}}
|
|
||||||
<div class="book">
|
|
||||||
<div class="title">Title: {{title}}</div>
|
|
||||||
<div class="author">Author: {{author}}</div>
|
|
||||||
<div class="price">Price: {{price}}</div>
|
|
||||||
<div class="kind">Kind: {{kind}}</div>
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// when receiving a custom message form the server
|
|
||||||
socket.on('all the books we have', function(msg) {
|
|
||||||
|
|
||||||
console.log('all the books: ' + JSON.stringify(msg));
|
|
||||||
|
|
||||||
//compile_results_and_display(msg);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
function compile_results_and_display(results) {
|
|
||||||
|
|
||||||
var template_script = $("#books-template").html();
|
|
||||||
|
|
||||||
var template = Handlebars.compile(template_script);
|
|
||||||
|
|
||||||
//$('.book').remove();
|
|
||||||
|
|
||||||
$('#books').append(template(results));
|
|
||||||
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "templating",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "example of templating using handlebars.js",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"socket.io": "^1.6.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
var books = [
|
|
||||||
{'title': "Ways of Curating",
|
|
||||||
'author': "Hans Ulrich Orbist",
|
|
||||||
'price': 16.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "Ardor",
|
|
||||||
'author': "Roberto Calasso",
|
|
||||||
'price': 39.50,
|
|
||||||
'kind': "Hardcover"
|
|
||||||
},
|
|
||||||
{'title': "Why Grow Up?",
|
|
||||||
'author': "Susan Neiman",
|
|
||||||
'price': 15.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "The Complete Stories",
|
|
||||||
'author': "Flannery O'connor",
|
|
||||||
'price': 19.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
},
|
|
||||||
{'title': "The Hatred of Poetry",
|
|
||||||
'author': "Ben Lerner",
|
|
||||||
'price': 13.95,
|
|
||||||
'kind': "Paperback"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages
|
|
||||||
socket.on('give some books', function(msg) {
|
|
||||||
|
|
||||||
console.log('got a give some books: ' + msg);
|
|
||||||
|
|
||||||
io.emit('all the books we have', books);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>SEARCH TWITTER</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
#frame {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#inputs{
|
|
||||||
width: 50em;
|
|
||||||
bborder: 1px solid black;
|
|
||||||
}
|
|
||||||
.hit {
|
|
||||||
bborder: 1px solid green;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1em;
|
|
||||||
max-width: 400px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.tweet_image img {
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import handlebars -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
|
|
||||||
<!-- import jquery -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<label>SEARCH TWITTER</label>
|
|
||||||
<div id="frame">
|
|
||||||
<!-- inputs for the search to send to server -->
|
|
||||||
<div id="inputs">
|
|
||||||
<label>keyword: </label>
|
|
||||||
<input id="text_field" type="text"/>
|
|
||||||
<label>results </label>
|
|
||||||
<input id="nbr_results" type="number" value="20" min="1" max="50">
|
|
||||||
<label>filters: </label>
|
|
||||||
<label>images </label>
|
|
||||||
<input id="radio_images" type="radio" checked/>
|
|
||||||
<label>links </label>
|
|
||||||
<input id="radio_links" type="radio"/>
|
|
||||||
<label>videos </label>
|
|
||||||
<input id="radio_videos" type="radio"/>
|
|
||||||
<!-- search button -->
|
|
||||||
<input type="button" value="Search" onclick="search();"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="results">
|
|
||||||
<script id="results-template" type="text/x-handlebars-template">
|
|
||||||
{{#each this}}
|
|
||||||
<div class="hit">
|
|
||||||
<div class='tweet_text'>{{text}}</div>
|
|
||||||
{{#if images}}
|
|
||||||
{{#each images}}
|
|
||||||
<div class='tweet_image'>
|
|
||||||
<img src={{this}} />
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
// when receiving a custom message form the server ('search_twitter_results')
|
|
||||||
socket.on('search_twitter_results', function(msg) {
|
|
||||||
|
|
||||||
console.log('search_twitter_results: ' + JSON.stringify(msg));
|
|
||||||
|
|
||||||
compile_results_and_dispay(msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
// when search button is pressed
|
|
||||||
function search() {
|
|
||||||
|
|
||||||
var keyword = document.getElementById("text_field").value;
|
|
||||||
var hits = document.getElementById("nbr_results").value;
|
|
||||||
|
|
||||||
// radio buttons -- filter
|
|
||||||
var filter = null;
|
|
||||||
if(document.getElementById("radio_images").checked) {
|
|
||||||
filter = "images";
|
|
||||||
document.getElementById("radio_images").checked = false;
|
|
||||||
} else if (document.getElementById("radio_links").checked) {
|
|
||||||
filter = "links";
|
|
||||||
document.getElementById("radio_links").checked = false;
|
|
||||||
} else if (document.getElementById("radio_videos").checked) {
|
|
||||||
filter = "videos";
|
|
||||||
document.getElementById("radio_videos").checked = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// create search parameters that will be sent to the server
|
|
||||||
var search_params = {keyword_value: keyword, nbr_hits: hits, filter_value: filter}
|
|
||||||
|
|
||||||
// send request to the server
|
|
||||||
socket.emit('search_twitter', search_params);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function compile_results_and_dispay(results) {
|
|
||||||
|
|
||||||
var template_script = $("#results-template").html();
|
|
||||||
|
|
||||||
var template = Handlebars.compile(template_script);
|
|
||||||
|
|
||||||
$('.hit').remove();
|
|
||||||
|
|
||||||
$('#results').append(template(results));
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "search-twitter",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "simple twitter search",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"socket.io": "^1.6.0",
|
|
||||||
"twitter": "^1.4.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
// import filesystem (aka fs)
|
|
||||||
var fs = require('fs');
|
|
||||||
|
|
||||||
//import twitter
|
|
||||||
var twitter = require('twitter'); // npm install --save twitter
|
|
||||||
|
|
||||||
|
|
||||||
/* ----------------------
|
|
||||||
Twitter Configuration
|
|
||||||
-------------------------*/
|
|
||||||
|
|
||||||
// load configuration file with all secrets, etc.
|
|
||||||
var config_file = "./twitter_credentials.json";
|
|
||||||
var config = JSON.parse(fs.readFileSync(config_file, "utf8"));
|
|
||||||
|
|
||||||
// create the twitter client
|
|
||||||
var client = new twitter(config);
|
|
||||||
|
|
||||||
function search_twitter(keyword_value, nbr_hits, filter_value) {
|
|
||||||
|
|
||||||
|
|
||||||
//https://dev.twitter.com/rest/reference/get/search/tweets
|
|
||||||
var twitter_search_params = {q: keyword_value, count: nbr_hits};
|
|
||||||
|
|
||||||
// if there is a filter
|
|
||||||
if(filter_value) {
|
|
||||||
twitter_search_params.filter = filter_value;
|
|
||||||
}
|
|
||||||
|
|
||||||
client.get('search/tweets', twitter_search_params, function(error, tweets, response) {
|
|
||||||
|
|
||||||
var results = [];
|
|
||||||
|
|
||||||
console.log(tweets);
|
|
||||||
|
|
||||||
if(!error) {
|
|
||||||
//console.log("got " + tweets.statuses.length + " hits")
|
|
||||||
for(tweet of tweets.statuses) {
|
|
||||||
// console.log(tweet);
|
|
||||||
|
|
||||||
var r = {};
|
|
||||||
r.text = tweet.text;
|
|
||||||
|
|
||||||
if(tweet.entities.media) {
|
|
||||||
|
|
||||||
r.images = [];
|
|
||||||
|
|
||||||
for(media of tweet.entities.media) {
|
|
||||||
|
|
||||||
if(media.type == 'photo')
|
|
||||||
|
|
||||||
r.images.push(media.media_url);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
results.push(r);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
console.log('* ERROR *: ' + error);
|
|
||||||
}
|
|
||||||
|
|
||||||
// send results to client
|
|
||||||
io.emit('search_twitter_results', results);
|
|
||||||
|
|
||||||
//callback(results);
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function timeline_user(username, nbr_hits) {
|
|
||||||
|
|
||||||
var twitter_search_params = {screen_name: username, count: nbr_hits};
|
|
||||||
|
|
||||||
client.get('statuses/user_timeline', twitter_search_params, function(error, tweets, response) {
|
|
||||||
|
|
||||||
var results = [];
|
|
||||||
|
|
||||||
if(error) {
|
|
||||||
console.log(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
for(tweet of tweets) {
|
|
||||||
|
|
||||||
console.log(tweet);
|
|
||||||
|
|
||||||
var r = {text: tweet.text};
|
|
||||||
|
|
||||||
if(tweet.extended_entities && tweet.extended_entities.media) {
|
|
||||||
|
|
||||||
r.images = [];
|
|
||||||
|
|
||||||
for(media of tweet.extended_entities.media) {
|
|
||||||
|
|
||||||
if(media.type == 'photo')
|
|
||||||
|
|
||||||
r.images.push(media.media_url);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
results.push(r);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// send results to client
|
|
||||||
io.emit('search_twitter_results', results);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
//io.emit('message from robot', 'Hi! my name is Reihtuag!'); // greetings
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages ('message from human')
|
|
||||||
socket.on('search_twitter', function(msg) {
|
|
||||||
|
|
||||||
console.log('searching twitter with: ' + msg.toString());
|
|
||||||
|
|
||||||
search_twitter(msg.keyword_value, msg.nbr_hits, msg.filter_value);
|
|
||||||
|
|
||||||
//timeline_user(msg.keyword_value, msg.nbr_hits);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
{
|
|
||||||
"consumer_key": "jKMz31iuQMImQpDZOEKlFelb2",
|
|
||||||
"consumer_secret": "IAfen9GcPSKsmiFZcXv23qVLDdI6PhHAFfJidc8UWbg8qIJnmH",
|
|
||||||
"access_token_key": "801125183360745472-eMpgT1Cscw86Mm31KG8DTq336L5g4RB",
|
|
||||||
"access_token_secret": "xZEuPLawdBwOgPCSWHaWsUAgbYlobAztYmwMMGeJvtsli"
|
|
||||||
}
|
|
||||||
@ -1,278 +0,0 @@
|
|||||||
## Final Projects
|
|
||||||
|
|
||||||
### Group 01
|
|
||||||
|
|
||||||
__Team members:__
|
|
||||||
|
|
||||||
Rahul & Randy
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Let’s meet..
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
We are going to create a program that combines the Twitter geolocation with a Geomap server (Google Maps, for instance). How about a web-interface that searches for two tweeters that share a hashtag, and give them a route navigation to each other? Bringing people around the world together, whether they’re having a tweet feud or share common interests. Our focus once again, will be on the now past election and thus Hillary or Donald related hashtags. Let’s reunite!
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
- [http://tweetedtrips.com/](http://tweetedtrips.com/) which is a program that generates travel routes through hashtag use. This is very applicable to what we are planning on creating.
|
|
||||||
|
|
||||||
- Inspiration also came from the fact that we wanted to use Google Maps since it has a beautiful interface and it seemed fun to combine it with a more social media-esque website such as twitter.
|
|
||||||
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
- Twitter API – to find hashtags.
|
|
||||||
|
|
||||||
- Google Maps API – to display the route.
|
|
||||||
|
|
||||||
- Javascript to generate the functions.
|
|
||||||
|
|
||||||
- HTML to create the interface.
|
|
||||||
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
We’ll continue on each others work, which is quite easy since we’re housemates. We might divide the work that needs to be done through the Twitter and the Google Maps API code. Randy will provide cups, while Rahul boils water. Each session the oracle will tell us who’s providing tea.
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__ Inés & Johnny
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Literacy Links
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
We will program an educational program to assist teachers in creating reading resources for their students. The program will intake text from a user interface and the alter the text, swapping out words for other words using a thesaurus API. It will then output a text that should have the same message, just using different words.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
We were inspired by a site called Newsela, which posts news articles at different reading levels for students. Unfortunately, however, this process isn't automated and requires individuals to read and then rewrite the articles. We hope to create a program that will automate this process in order to make it quicker and applicable to any article, not only the ones selected by the Newsela writers.
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
We will use html to set up an interface and then javascript to create the physical program. The program will take in a plain text file and then feed the individual words into an array. Then we will use loops to go through the array and then determine what kinds of words are in each position. If the words are adjectives, adverbs, or verbs, we will utilize the thesaurus API to swap out the words with other words.
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
As of right now, Johnny will be in charge of the interface and I will be in charge of the program that substitutes words.
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__ Cecilie & Joanna
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Harry Potter Fortune Quiz
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
We're going to make a quiz based on the Harry Potter-universe, but we will especially use the fortunes given in the books. We're going to create a webpage where you can play the quiz - it will contain around 15 questions. The program gives you a fortune and three possible answers. It will tell you right away whether you were right or wrong.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
We came up with the idea after talking about Harry Potter and the online quiz-program Kahoot.
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
The same as in class - javascript and HTML.
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
We are trying to do it all together, because the last assignment showed us that we work really well as a team.
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__ Eva & Nicole
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
The HONY search machine project
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
We want to make the individual stories and photos of the HONY (Humans of New York) project searchable via a search-engine and we want to show the results in an interface on a server. We will make use of the Instagram API to enable the searchengine.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
- [http://mashable.com/2013/09/19/instagram-api-uses/#FIt.Df3COkqX](http://mashable.com/2013/09/19/instagram-api-uses/#FIt.Df3COkqX)
|
|
||||||
|
|
||||||
- [https://www.instagram.com/humansofny/](https://www.instagram.com/humansofny/)
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
We want to use the twitterscraping idea that was shown in the last lessons, as well as using .js with options (such as gender) and showing the options via an index.html connection to a server.
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
Not specified yet at this moment.
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__ Lenka, Vivien and Laura
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Anti-procrastination bot
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
A code that you can use as an anti-procrastination bot. It is going to have multiple steps, the first one is a template that you need to fill out to let the bot know how many words you need to type and what the deadline is for a paper. Then, it is able to read how far along you are with your paper. Based on the deadline the bot can change the background music; study-music when you need to study, or 'break'-music (which you can set up yourself) for when you can take a break. We're exploring the idea of the code also being able to read out what you're doing at the moment, for example Facebooking, and then reminding you of working on your paper by changing the music into study-music. The genre of music functions as a reminder from the code about your paper.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
We got the inspiration from combining the ideas that Vivien and Laura had about 'making' music with code and Lenka her, very handy, idea of creating an anti-procrastination device for herself.
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
We're going to use the methods we learned in class, java and html. Lenka does have some experience with other programming, so we might diverge a bit as well.
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
We're trying to make sure we all do it together, we're very positive about that working out.
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
|
|
||||||
### Group 02
|
|
||||||
|
|
||||||
|
|
||||||
__Team members:__ Julia & Johanna
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Make up store
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
Create a webshop for make up that will be easy to use and will attract both young and old customers.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
[ http://www.yves-rocher.se/control/makeup/nyheter-makeup/]( http://www.yves-rocher.se/control/makeup/nyheter-makeup/)
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
javascript!
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
We will both try to participate during the whole project, and if necessary we will divide the tasks equally.
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__
|
|
||||||
|
|
||||||
Martin & Bram
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Spotify Randomizer
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
For this final project we would like to create a randomizer for Spotify where you can pick a genre and the Spotify recommendation system will then randomly choose a song for you.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
For this, we would have to request the Spotify API, which will enable us to obtain data from the Spotify music catalog and manage our playlists and saved music.
|
|
||||||
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__
|
|
||||||
|
|
||||||
Wietske, Dave & Judith
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Road trip generator
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
Our application will allow the user to input a destination and will suggest a road trip to the user. It will show the user all the sights on the route they want to travel.
|
|
||||||
|
|
||||||
The user will be able to plan a route with the app. The user inputs a place of departure and a destination and the app will suggest a route to travel. This route contains both the travel information as suggestions for sightseeing along the way. The user will be able to see some information about the different sights on the route they want to travel and see a picture of the sight.
|
|
||||||
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
- Using the Google Maps API to create a route planner.
|
|
||||||
|
|
||||||
- Using the Google Places API and the points_of_interest label to collect sights on a route.
|
|
||||||
|
|
||||||
- Using the Instagram API to connect pictures to sights on the route.
|
|
||||||
|
|
||||||
- Combine the use of these API’s in an interface for the user.
|
|
||||||
|
|
||||||
- Create an attractive front end and make it user friendly with a clear overview.
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__
|
|
||||||
|
|
||||||
Annabel & Maxim
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
chat platform
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
The concept is to make a platform where people can chat to each other via text and also video.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
www.chatroulette.com and assignment 3
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
javascript, HTML, socket.io
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
everything together because we’re only with two
|
|
||||||
|
|
||||||
---------
|
|
||||||
|
|
||||||
__Team members:__
|
|
||||||
|
|
||||||
Cassandra & Léna
|
|
||||||
|
|
||||||
__Name of the project:__
|
|
||||||
|
|
||||||
Random Quizz
|
|
||||||
|
|
||||||
__What is the concept:__
|
|
||||||
|
|
||||||
This is an HTLM page displayed thanks to a localhost with proposes the user to complete a quizz. This quizz is built randomly each time the user submits a question. For instance questions are made following a pattern like « Wh-word + be + your + adjective + noun ». Answers will be displayed randomly too. Sometimes it will be sentences builded by the program (and look like an exquisite cadaver) and sometimes the choice of answer will be determined by the questions itself. For instance if noun = « color » the computer will display « blue, red, green » as choices. We would like to make something humorous. Idea of question may be what the user would do in the situation stated by the program. After around 10 questions the program display a « profile » to the user in function of his choices. This profile will be a small paragraph also builded by chance. We would like to add images related to the topic of the question. Maybe we will use a database of images to match the key words of the questions with a research on the data base.
|
|
||||||
|
|
||||||
__Inspiration / examples (links, url if applicable):__
|
|
||||||
|
|
||||||
We can found a lot of « personality quizzes » on the Internet.
|
|
||||||
|
|
||||||
__Which technology / method are you planning on using:__
|
|
||||||
|
|
||||||
local server, random text generation (inspired by the letters we have coded for week 3) with arrays and chance.js
|
|
||||||
|
|
||||||
__Who is doing what in the team:__
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||

|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>TENDER BUTTONS -- RENDER MUTTONS</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
.frame {
|
|
||||||
width: 30em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #888;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<div class="frame">
|
|
||||||
<label>TENDER BUTTONS</label>
|
|
||||||
<!-- text area where the conversation is displayed -->
|
|
||||||
<textarea id="tender_buttons" text="..." rows="65" cols="65">...</textarea>
|
|
||||||
|
|
||||||
<!-- inputs from human to send to server -->
|
|
||||||
<div>
|
|
||||||
<input type="button" value="Markov Generate" onclick="generate_text();"/>
|
|
||||||
<label>nbr. verses </label>
|
|
||||||
<input id="tender_buttons_verses" type="number" min="1" max="25" value="10"/>
|
|
||||||
<label>verses width</label>
|
|
||||||
<input id="tender_buttons_verses_width" type="number" min="20" max="100" value="70"/>
|
|
||||||
<label>min. score </label>
|
|
||||||
<input id="tender_buttons_score" type="number" min="5" max="100" value="50"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="frame">
|
|
||||||
<label>RENDER MUTTONS</label>
|
|
||||||
<!-- text area where the conversation is displayed -->
|
|
||||||
<textarea id="render_muttons" text="..." rows="65" cols="65">...</textarea>
|
|
||||||
|
|
||||||
<!-- inputs from human to send to server -->
|
|
||||||
<div>
|
|
||||||
<input type="button" value="Clear" onclick="clear_text();"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// throbber timer
|
|
||||||
var timer = null;
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
socket.emit('request bare text', 'n/a');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('bare text', function(msg) {
|
|
||||||
document.getElementById('tender_buttons').value = msg;
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('render muttons', function(msg) {
|
|
||||||
|
|
||||||
if(timer) {
|
|
||||||
clearInterval(timer);
|
|
||||||
timer = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('render_muttons').value = msg;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
function clear_text() {
|
|
||||||
document.getElementById('render_muttons').value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function generate_text() {
|
|
||||||
|
|
||||||
clear_text();
|
|
||||||
|
|
||||||
var text = document.getElementById('tender_buttons').value;
|
|
||||||
var verses = document.getElementById('tender_buttons_verses').value;
|
|
||||||
var width = document.getElementById('tender_buttons_verses_width').value;
|
|
||||||
var score = document.getElementById('tender_buttons_score').value;
|
|
||||||
socket.emit('request render muttons', {input: text, nbr_verse: verses, min_score: score, width_verses: width });
|
|
||||||
|
|
||||||
timer = setInterval(function() {
|
|
||||||
document.getElementById('render_muttons').value = document.getElementById('render_muttons').value + '.';
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "render_muttons",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "markov chain text generation based on Gertrude Steiner's Tender Buttons",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"chance": "^1.0.4",
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"markov-strings": "^1.3.2",
|
|
||||||
"socket.io": "^1.7.1",
|
|
||||||
"word-wrap": "^1.1.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
var chance = require('chance').Chance();
|
|
||||||
var wrap = require('word-wrap');
|
|
||||||
|
|
||||||
const Markov = require('markov-strings');
|
|
||||||
|
|
||||||
function generate_text(text, nbr_verses, min_score, width_verses) {
|
|
||||||
|
|
||||||
text = text.replace(/(\r\n|\n|\r)/gm," ")
|
|
||||||
text = text.match( /[^\.!\?]+[\.!\?]+/g );
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
stateSize: 2,
|
|
||||||
checker: sentence => {
|
|
||||||
return sentence.endsWith('.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var markov = new Markov(text, options);
|
|
||||||
markov.buildCorpusSync();
|
|
||||||
|
|
||||||
var result = '';
|
|
||||||
titles = [];
|
|
||||||
|
|
||||||
for(var i = 0; i < nbr_verses; i++) {
|
|
||||||
|
|
||||||
let option_title = {
|
|
||||||
minWords: 2,
|
|
||||||
maxWords: 4,
|
|
||||||
minScore: min_score
|
|
||||||
};
|
|
||||||
|
|
||||||
let title = markov.generateSentenceSync(option_title).string;
|
|
||||||
|
|
||||||
if(title in titles) continue;
|
|
||||||
titles.push(title);
|
|
||||||
|
|
||||||
let option_verse = {
|
|
||||||
minWords: 2,
|
|
||||||
maxWords: chance.natural({min: 7, max: 25}),
|
|
||||||
minScore: min_score,
|
|
||||||
checker: sentence => {
|
|
||||||
return sentence.endsWith('.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let verse = '';
|
|
||||||
for(var j = 0; j < chance.natural({min: 3, max: 20}); j++) {
|
|
||||||
verse += markov.generateSentenceSync(option_verse).string + ' ';
|
|
||||||
}
|
|
||||||
|
|
||||||
result += title.toUpperCase() + '\n\n';
|
|
||||||
result += wrap(verse + '\n\n', {width: width_verses});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.generate_text = generate_text;
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
// import file system (aka fs)
|
|
||||||
var fs = require('fs');
|
|
||||||
|
|
||||||
// import custom script
|
|
||||||
var fender_cottons = require('./render_muttons.js');
|
|
||||||
|
|
||||||
|
|
||||||
var text_file = "./TENDER_BUTTONS.txt";
|
|
||||||
var text = fs.readFileSync(text_file, "utf8");
|
|
||||||
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages
|
|
||||||
socket.on('request bare text', function(msg) {
|
|
||||||
|
|
||||||
// read the file from memory
|
|
||||||
var text_file = "./TENDER_BUTTONS.txt";
|
|
||||||
var text = fs.readFileSync(text_file, "utf8");
|
|
||||||
|
|
||||||
// send back its content
|
|
||||||
io.emit('bare text', text);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('request render muttons', function(msg) {
|
|
||||||
|
|
||||||
console.log('rendering a mutton');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// generate new text using custom script 'fender_cottons.js'
|
|
||||||
var generated_text = fender_cottons.generate_text(msg.input, msg.nbr_verse, msg.min_score, msg.width_verses);
|
|
||||||
// send back its content
|
|
||||||
io.emit('render muttons', generated_text);
|
|
||||||
} catch (e) {
|
|
||||||
io.emit('render muttons', e.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
## Natural Language Processing (NLP) (in Node.js)
|
|
||||||
|
|
||||||
### [natural](https://www.npmjs.com/package/natural)
|
|
||||||
|
|
||||||
### [pos: fasttag part of speech tagger implementation](https://www.npmjs.com/package/pos)
|
|
||||||
|
|
||||||
### [markov-strings](https://www.npmjs.com/package/markov-strings)
|
|
||||||
|
|
||||||
### [tracery-grammar](https://www.npmjs.com/package/tracery-grammar)
|
|
||||||
|
|
||||||
## Other (advanced) Recurrent Neural Network (non Node.js)
|
|
||||||
|
|
||||||
### [Torch-rnn](http://www.jeffreythompson.org/blog/2016/03/25/torch-rnn-mac-install/)
|
|
||||||
|
|
||||||
### [RNN effectiveness](http://karpathy.github.io/2015/05/21/rnn-effectiveness/)
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
# Part of Speech (POS-tagging)
|
|
||||||
|
|
||||||
Example: [http://parts-of-speech.info](http://parts-of-speech.info)
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
[Phrase structure grammar](https://en.wikipedia.org/wiki/Phrase_structure_grammar)
|
|
||||||
|
|
||||||
[Parse Tree](https://en.wikipedia.org/wiki/Parse_tree)
|
|
||||||
|
|
||||||
### [pos: fasttag part of speech tagger implementation](https://www.npmjs.com/package/pos)
|
|
||||||
@ -1,127 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>POS tagging</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
.frame {
|
|
||||||
width: 30em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #888;
|
|
||||||
padding: 3px;
|
|
||||||
font-size: 15;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<div class="frame">
|
|
||||||
<label>INPUT TEXT</label>
|
|
||||||
<textarea id="input_text" rows="35" cols="65"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="frame">
|
|
||||||
<label>OUPUT TEXT</label>
|
|
||||||
<textarea id="output_text" rows="35" cols="65"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="frame">
|
|
||||||
<label>LEGEND</label>
|
|
||||||
<p>
|
|
||||||
CC Coord Conjuncn<br />
|
|
||||||
CD Cardinal number<br />
|
|
||||||
DT Determiner<br />
|
|
||||||
EX Existential there<br />
|
|
||||||
FW Foreign Word<br />
|
|
||||||
IN Preposition<br />
|
|
||||||
JJ Adjective<br />
|
|
||||||
JJR Adj., comparative<br />
|
|
||||||
JJS Adj., superlative<br />
|
|
||||||
LS List item marker<br />
|
|
||||||
MD Modal<br />
|
|
||||||
NN Noun, sing. or mass<br />
|
|
||||||
NNP Proper noun, sing.<br />
|
|
||||||
NNPS Proper noun, plural<br />
|
|
||||||
NNS Noun, plural<br />
|
|
||||||
POS Possessive ending<br />
|
|
||||||
PDT Predeterminer<br />
|
|
||||||
PP$ Possessive pronoun<br />
|
|
||||||
PRP Personal pronoun<br />
|
|
||||||
RB Adverb<br />
|
|
||||||
RBR Adverb, comparative<br />
|
|
||||||
RBS Adverb, superlative<br />
|
|
||||||
RP Particle<br />
|
|
||||||
SYM Symbol<br />
|
|
||||||
TO to<br />
|
|
||||||
UH Interjection<br />
|
|
||||||
VB verb, base form<br />
|
|
||||||
VBD verb, past tense<br />
|
|
||||||
VBG verb, gerund<br />
|
|
||||||
VBN verb, past part<br />
|
|
||||||
VBP Verb, present<br />
|
|
||||||
VBZ Verb, present<br />
|
|
||||||
WDT Wh-determiner<br />
|
|
||||||
WP Wh pronoun<br />
|
|
||||||
WP$ Possessive-Wh<br />
|
|
||||||
WRB Wh-adverb<br />
|
|
||||||
, Comma<br />
|
|
||||||
. Sent-final punct<br />
|
|
||||||
: Mid-sent punct<br />
|
|
||||||
$ Dollar sign<br />
|
|
||||||
# Pound sign<br />
|
|
||||||
" quote<br />
|
|
||||||
( Left paren<br />
|
|
||||||
) Right paren<br />
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
// timer
|
|
||||||
var timer = setInterval(function() {
|
|
||||||
tag_text();
|
|
||||||
}, 1500);
|
|
||||||
|
|
||||||
var old_text = '';
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('tagged text', function(msg) {
|
|
||||||
update_output(msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
function tag_text() {
|
|
||||||
var text = document.getElementById('input_text').value;
|
|
||||||
if(text != old_text) {
|
|
||||||
socket.emit('request tag text', text);
|
|
||||||
old_text = text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function update_output(tagged_text) {
|
|
||||||
|
|
||||||
console.log(tagged_text);
|
|
||||||
|
|
||||||
var text = document.getElementById('input_text').value;
|
|
||||||
var output_text = text;
|
|
||||||
for(var tagged_word of tagged_text) {
|
|
||||||
var word = tagged_word[0];
|
|
||||||
var tag = tagged_word[1];
|
|
||||||
output_text = output_text.replace(word, word + '\\' + tag);
|
|
||||||
}
|
|
||||||
document.getElementById('output_text').value = output_text;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "pos-tagging",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "tags words from textarea",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"pos": "^0.4.2",
|
|
||||||
"socket.io": "^1.7.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
// import pos --
|
|
||||||
var pos = require('pos'); // npm install --save pos
|
|
||||||
|
|
||||||
function tag_text(text) {
|
|
||||||
var words = new pos.Lexer().lex(text);
|
|
||||||
var tagger = new pos.Tagger();
|
|
||||||
return tagger.tag(words);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages
|
|
||||||
socket.on('request tag text', function(msg) {
|
|
||||||
|
|
||||||
// send back tagged text
|
|
||||||
io.emit('tagged text', tag_text(msg));
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
#### (working) notes
|
|
||||||
|
|
||||||
### [natural](https://www.npmjs.com/package/natural)
|
|
||||||
|
|
||||||
### [What does tf-idf mean?](http://www.tfidf.com)
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Term Frequency–Inverse Document Frequency</title>
|
|
||||||
<style>
|
|
||||||
/* CSS Styling */
|
|
||||||
.frame {
|
|
||||||
width: 30em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #888;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
.measure {
|
|
||||||
padding-left:3em
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- HTML -->
|
|
||||||
<div class="frame">
|
|
||||||
<label>INPUT TEXT 0</label>
|
|
||||||
<textarea id="input_text_0" rows="35" cols="65">
|
|
||||||
In information retrieval, tf–idf, short for term frequency–inverse document frequency, is a numerical statistic that is intended to reflect how important a word is to a document in a collection or corpus.[1] It is often used as a weighting factor in information retrieval and text mining. The tf-idf value increases proportionally to the number of times a word appears in the document, but is offset by the frequency of the word in the corpus, which helps to adjust for the fact that some words appear more frequently in general.
|
|
||||||
|
|
||||||
Variations of the tf–idf weighting scheme are often used by search engines as a central tool in scoring and ranking a document's relevance given a user query. tf–idf can be successfully used for stop-words filtering in various subject fields including text summarization and classification.
|
|
||||||
|
|
||||||
One of the simplest ranking functions is computed by summing the tf–idf for each query term; many more sophisticated ranking functions are variants of this simple model.
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
<div class="frame">
|
|
||||||
<label>INPUT TEXT 1</label>
|
|
||||||
<textarea id="input_text_1" rows="35" cols="65">
|
|
||||||
The TB-303 has a single audio oscillator, which may be configured to produce either a sawtooth wave or a square wave. The square wave is derived from the sawtooth waveform using a simple, single-transistor waveshaping circuit.[1] This produces a sound that is subtly different from the square waveform created by the dedicated hardware found in most analog synthesizers. It also includes a simple envelope generator, with a decay control only. A lowpass filter is also included, with -24dB per octave attenuation, and controls for cutoff frequency, resonance, and envelope modulation parameters. It is a common misconception that the filter is a 3 pole 18 dB per octave design when in fact it is 4-pole 24 dB per octave.[2]
|
|
||||||
|
|
||||||
The TB-303 sequencer has some unique features that contribute to its characteristic sound. During the programming of a sequence, the user can determine whether a note should be accented, and whether it should employ portamento, a smooth transition to the following note. The portamento circuitry employs a fixed slide time, meaning that whatever the interval between notes, the time taken to reach the correct pitch is always the same. The accent circuitry, as well as increasing the amplitude of a note, also emphasizes the EG filter's cutoff and resonance, resulting in a distinctive, hollow "wow" sound at higher resonance settings. Roland referred to this as "gimmick" circuitry.[3]
|
|
||||||
|
|
||||||
The instrument also features a 'simple' step-time method for entering note data into the 16-step programmable sequencer. This was notoriously difficult to use, and would often result in entering a different sequence than the one that had been intended. Some users also take advantage of a low voltage failure mode, wherein patterns that are programmed in memory get completely scrambled if the batteries are removed for a time.
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
<div class="frame">
|
|
||||||
<label>INPUT TEXT 2</label>
|
|
||||||
<textarea id="input_text_2" rows="35" cols="65">
|
|
||||||
1960s to 1970s
|
|
||||||
|
|
||||||
From 1955 to 1965, Guattari edited and contributed to La Voie Communiste (Communist Way), a Trotskyist newspaper.[2] He supported anti-colonialist struggles as well as the Italian Autonomists. Guattari also took part in the G.T.P.S.I., which gathered many psychiatrists at the beginning of the sixties and created the Association of Institutional Psychotherapy in November 1965. It was at the same time that he founded, along with other militants, the F.G.E.R.I. (Federation of Groups for Institutional Study & Research) and its review Recherche (Research), working on philosophy, mathematics, psychoanalysis, education, architecture, ethnology, etc. The F.G.E.R.I. came to represent aspects of the multiple political and cultural engagements of Guattari: the Group for Young Hispanics, the Franco-Chinese Friendships (in the times of the people's communes), the opposition activities with the wars in Algeria and Vietnam, the participation in the M.N.E.F., with the U.N.E.F., the policy of the offices of psychological academic aid (B.A.P.U.), the organisation of the University Working Groups (G.T.U.), but also the reorganizations of the training courses with the Centers of Training to the Methods of Education Activities (C.E.M.E.A.) for psychiatric male nurses, as well as the formation of Friendly Male Nurses (Amicales d'infirmiers) (in 1958), the studies on architecture and the projects of construction of a day hospital for "students and young workers".
|
|
||||||
|
|
||||||
In 1967, he appeared as one of the founders of OSARLA (Organization of solidarity and Aid to the Latin-American Revolution). In 1968, Guattari met Daniel Cohn-Bendit, Jean-Jacques Lebel, and Julian Beck. He was involved in the large-scale French protests of 1968, starting from the Movement of March 22. It was in the aftermath of 1968 that Guattari met Gilles Deleuze at the University of Vincennes and began to lay the ground-work for the soon to be infamous Anti-Oedipus (1972), which Michel Foucault described as "an introduction to the non-fascist life" in his preface to the book. In 1970, he created fr:CERFI (Center for the Study and Research of Institutional Formation), which developed the approach explored in the Recherches journal. In 1973, Guattari was tried and fined for committing an "outrage to public decency" for publishing an issue of Recherches on homosexuality.[3] In 1977, he created the CINEL for "new spaces of freedom" before joining in the 1980s the ecological movement with his "ecosophy".
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
<div class="frame">
|
|
||||||
<div id="inputs">
|
|
||||||
<label>Term: </label>
|
|
||||||
<input id="text_field" type="text"/>
|
|
||||||
<input type="button" value="Check" onclick="check_term();"/>
|
|
||||||
</div>
|
|
||||||
<label>Results: </label>
|
|
||||||
<div id="results"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<!-- import socket.io -->
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
// connect to localhost on its port (see server.js -- 8088)
|
|
||||||
var socket = io().connect('http://localhost:8088');
|
|
||||||
|
|
||||||
|
|
||||||
// when connecting
|
|
||||||
socket.on('connect', function (data) {
|
|
||||||
console.log('connected');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('term results', function(msg) {
|
|
||||||
update_results(msg);
|
|
||||||
});
|
|
||||||
|
|
||||||
function check_term() {
|
|
||||||
var term = document.getElementById('text_field').value;
|
|
||||||
var text_0 = document.getElementById('input_text_0').value;
|
|
||||||
var text_1 = document.getElementById('input_text_1').value;
|
|
||||||
var text_2 = document.getElementById('input_text_2').value;
|
|
||||||
var array_texts = [text_0, text_1, text_2];
|
|
||||||
socket.emit('measure term', {term: term, documents: array_texts});
|
|
||||||
}
|
|
||||||
|
|
||||||
function update_results(results) {
|
|
||||||
|
|
||||||
var result_text = 'term: ' + results.term + '<br/>';
|
|
||||||
result_text += '<div class="measure">' + 'TEXT 0: ' + results.measures[0] + '</div>';
|
|
||||||
result_text += '<div class="measure">' + 'TEXT 1: ' + results.measures[1] + '</div>';
|
|
||||||
result_text += '<div class="measure">' + 'TEXT 2: ' + results.measures[2] + '</div>';
|
|
||||||
|
|
||||||
document.getElementById('results').innerHTML = result_text;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "tf-idf",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "looks if a word is part of the topic of a list of document",
|
|
||||||
"main": "server.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"author": "gauthier",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.14.0",
|
|
||||||
"natural": "^0.4.0",
|
|
||||||
"socket.io": "^1.7.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
// server.js
|
|
||||||
|
|
||||||
// import express ()
|
|
||||||
var express = require('express'); // npm install --save express
|
|
||||||
var app = express();
|
|
||||||
|
|
||||||
// import node.js http
|
|
||||||
var server = require('http').Server(app);
|
|
||||||
|
|
||||||
// import socket.io
|
|
||||||
var io = require('socket.io')(server); // npm install --save socket.io
|
|
||||||
|
|
||||||
// import natural
|
|
||||||
var natural = require('natural');
|
|
||||||
|
|
||||||
function measure_term(term, array_documents, callback) {
|
|
||||||
|
|
||||||
var tfidf = new natural.TfIdf();
|
|
||||||
|
|
||||||
for(var doc of array_documents) {
|
|
||||||
|
|
||||||
tfidf.addDocument(doc);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
var measures = [];
|
|
||||||
|
|
||||||
tfidf.tfidfs(term, function(i, m) {
|
|
||||||
|
|
||||||
measures.push(m);
|
|
||||||
|
|
||||||
if(i == array_documents.length - 1) {
|
|
||||||
|
|
||||||
callback(measures);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ----------------------------------
|
|
||||||
Server and Socket Configuration
|
|
||||||
--------------------------------------*/
|
|
||||||
|
|
||||||
// tell express to server our index.html file
|
|
||||||
app.get('/', function (req, res) {
|
|
||||||
res.sendFile(__dirname + '/index.html');
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure socket.io
|
|
||||||
// (1) when there is a connection
|
|
||||||
io.on('connection', function(socket) {
|
|
||||||
|
|
||||||
console.log('got a connection');
|
|
||||||
|
|
||||||
|
|
||||||
// (2) configure the connected socket to receive custom messages
|
|
||||||
socket.on('measure term', function(msg) {
|
|
||||||
|
|
||||||
measure_term(msg.term, msg.documents, function(measures) {
|
|
||||||
io.emit('term results', { term: msg.term, measures: measures});
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('disconnet', function() {
|
|
||||||
|
|
||||||
console.log('got a disconnection');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
/* -------------------
|
|
||||||
Start the server
|
|
||||||
----------------------*/
|
|
||||||
|
|
||||||
// listen to connection on port 8088 --> http://localhost:8088
|
|
||||||
server.listen(8088, function () {
|
|
||||||
console.log('listening on port: ' + 8088);
|
|
||||||
});
|
|
||||||
|
|
||||||