├── .eslintrc.js
├── .gitignore
├── PITCHME.html
├── PITCHME.md
├── PITCHME.yaml
├── README.md
├── admin
    ├── EAB20190509
    │   ├── PITCHME.md
    │   ├── README.md
    │   ├── build.sh
    │   └── prerequisites2018.pdf
    ├── awayday2018
    │   └── PITCHME.md
    ├── awayday2019
    │   ├── PITCHME.md
    │   ├── README.md
    │   ├── build.sh
    │   └── module_reviews
    │   │   ├── average_marks.xlsx
    │   │   ├── coursework surveys
    │   │       ├── 1906coursework1stYear.pdf
    │   │       ├── 1906coursework2ndYear.pdf
    │   │       ├── 1906coursework3rdYear.pdf
    │   │       └── 1906coursework4thYear.pdf
    │   │   ├── demonstrators survey
    │   │       ├── 1906demonstrators1stYear.pdf
    │   │       └── 1906demonstrators2ndYear.pdf
    │   │   └── module reviews
    │   │       ├── COMP1021 Mathematics for Computer Science.xlsx
    │   │       ├── COMP1051 Computational Thinking.xlsx
    │   │       ├── COMP1071 Computer Systems (002).xlsx
    │   │       ├── COMP1081 Algorithms and Data Structures (002).xlsx
    │   │       ├── COMP1101 Programming Review.xlsx
    │   │       ├── COMP2181 Theory of Computation.xlsx
    │   │       ├── COMP2211 Networks and Systems.xlsx
    │   │       ├── COMP2221 Programming Paradigms.xlsx
    │   │       ├── COMP2231 Software Methodologies.xlsx
    │   │       ├── COMP2252 Software Engineering.xlsx
    │   │       ├── COMP3371 Computing Methodologies III.xlsx
    │   │       ├── COMP3381 Software, Systems and Applications III.xlsx
    │   │       ├── COMP3391 Theoretical Computer Science III.xlsx
    │   │       ├── COMP3421 Computer Science Into Schools Review.xlsx
    │   │       ├── COMP3431 Advanced Computer Systems III Review.xlsx
    │   │       ├── COMP4031 Computing Methodologies IV.xlsx
    │   │       ├── COMP4061 Software, Systems and Applications IV.xlsx
    │   │       ├── COMP4071 Theoretical Computer Science IV (002).xlsx
    │   │       └── Contemporary Computer Science III, IV.xlsx
    └── curriculum_review
    │   ├── PITCHME.md
    │   ├── README.md
    │   ├── build.sh
    │   └── prerequisites2018.pdf
├── arch
    ├── chip_select
    │   ├── PITCHME.md
    │   ├── PITCHME.yaml
    │   ├── README.md
    │   └── build.sh
    ├── module_intro
    │   ├── PITCHME.md
    │   ├── PITCHME.yaml
    │   ├── README.md
    │   └── build.sh
    └── review_quiz
    │   ├── PITCHME.html
    │   ├── PITCHME.md
    │   ├── README.md
    │   └── build.sh
├── assets
    ├── 800px-AmdahlsLaw.svg.png
    ├── Amdahl_march_13_2008.jpg
    ├── CPUtrends.png
    ├── blas-results.pdf
    └── blasresults.png
├── build.sh
├── md2pdf.sh
├── pedagogy
    ├── ukcse_agm_2020
    │   ├── PITCHME.md
    │   ├── README.md
    │   └── build.sh
    ├── ukcse_agm_2021
    │   ├── PITCHME.html
    │   ├── PITCHME.md
    │   ├── README.md
    │   └── build.sh
    └── ukicse_agm_2019
    │   ├── PITCHME.md
    │   ├── README.md
    │   └── build.sh
└── prog
    ├── PITCHME.yaml
    ├── WP_assignment_1819
        ├── AJAX.msc.txt
        ├── AJAX_msc.png
        ├── PITCHME.md
        ├── README.md
        ├── app.test.js
        └── build.sh
    ├── WP_assignment_1819_resit
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── arch_security
        ├── PITCHME.html
        ├── PITCHME.md
        ├── README.md
        ├── blasresults.png
        └── build.sh
    ├── arch_so_what
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── bad-order.c
        ├── basic.c
        └── build.sh
    ├── arch_trends
        ├── PITCHME.html
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── assessment_1_progblack_2021
        ├── FAQ.md
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── assessment_2_prog_1819
        ├── FAQ.md
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── assessment_2_prog_1819_marking
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── assessment_2_prog_1920
        ├── FAQ.md
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── assessment_2_progblack_2021
        ├── PITCHME.html
        ├── PITCHME.md
        ├── README.html
        ├── README.md
        ├── README.pdf
        ├── build.sh
        └── md2pdf.sh
    ├── assessment_2_progblack_ideas
        ├── PITCHME.html
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── assessment_d3
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── assessment_p5
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── assessment_p5_2
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── assessment_resit_1819
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── code_quality
        ├── PITCHME.html
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── build.sh
        ├── instruments
        │   ├── .eslintrc.js
        │   ├── barchart_d3.html
        │   ├── barchart_d3.js
        │   └── out
        │   │   ├── barchart_d3.js.html
        │   │   ├── fonts
        │   │       ├── OpenSans-Bold-webfont.eot
        │   │       ├── OpenSans-Bold-webfont.svg
        │   │       ├── OpenSans-Bold-webfont.woff
        │   │       ├── OpenSans-BoldItalic-webfont.eot
        │   │       ├── OpenSans-BoldItalic-webfont.svg
        │   │       ├── OpenSans-BoldItalic-webfont.woff
        │   │       ├── OpenSans-Italic-webfont.eot
        │   │       ├── OpenSans-Italic-webfont.svg
        │   │       ├── OpenSans-Italic-webfont.woff
        │   │       ├── OpenSans-Light-webfont.eot
        │   │       ├── OpenSans-Light-webfont.svg
        │   │       ├── OpenSans-Light-webfont.woff
        │   │       ├── OpenSans-LightItalic-webfont.eot
        │   │       ├── OpenSans-LightItalic-webfont.svg
        │   │       ├── OpenSans-LightItalic-webfont.woff
        │   │       ├── OpenSans-Regular-webfont.eot
        │   │       ├── OpenSans-Regular-webfont.svg
        │   │       └── OpenSans-Regular-webfont.woff
        │   │   ├── global.html
        │   │   ├── index.html
        │   │   ├── scripts
        │   │       ├── linenumber.js
        │   │       └── prettify
        │   │       │   ├── Apache-License-2.0.txt
        │   │       │   ├── lang-css.js
        │   │       │   └── prettify.js
        │   │   └── styles
        │   │       ├── jsdoc-default.css
        │   │       ├── prettify-jsdoc.css
        │   │       └── prettify-tomorrow.css
        └── sunburst
        │   ├── README.md
        │   ├── a601aba88046a626@225.js
        │   ├── files
        │       └── e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de
        │   ├── flare-2.json
        │   ├── index.html
        │   ├── index.js
        │   ├── inspector.css
        │   ├── package.json
        │   ├── runtime.js
        │   └── visualisation.js
    ├── comp1101_intro
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── css_battle
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── git
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── build.sh
        ├── layout.css
        ├── merge.png
        ├── merge.svg
        ├── phd101212s.png
        ├── play-changes.png
        ├── play-changes.svg
        ├── versions.png
        └── versions.svg
    ├── git_branch
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── git_collab
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── html
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── http
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── java_revision
        ├── Example
        │   ├── AbstractClassExample.ctxt
        │   ├── AbstractClassExample.java
        │   ├── Example.ctxt
        │   ├── Example.java
        │   ├── InterfaceExample.ctxt
        │   ├── InterfaceExample.java
        │   ├── README.TXT
        │   └── package.bluej
        ├── PITCHME.html
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── js
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── js_dom
        ├── PITCHME.html
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── build.sh
        ├── button.html
        ├── button2.html
        └── button3.html
    ├── js_fetch
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── build.sh
        ├── client
        │   ├── index.html
        │   ├── index.js
        │   ├── indexasync.html
        │   ├── indexasync.js
        │   └── indexasyncexception.js
        ├── package.json
        └── server.js
    ├── js_intro_d3
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── build.sh
        ├── example1.html
        ├── example1.js
        ├── example2.html
        └── example2.js
    ├── js_intro_node
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── build.sh
        ├── express_parameters.js
        ├── express_routing.js
        ├── hello.js
        ├── hello_events.js
        ├── lecture_node.xml
        └── webserver.js
    ├── js_intro_p5
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── build.sh
        ├── index1.html
        ├── index2.html
        ├── index3.html
        ├── index4.html
        └── index5.html
    ├── js_objects
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── ball
        │   ├── index.html
        │   └── index.js
        ├── build.sh
        └── index.html
    ├── js_security
        ├── PITCHME.md
        ├── README.md
        └── build.sh
    ├── nix
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── media
        │   ├── 50s.png
        │   ├── layout.css
        │   └── livefree.png
        └── nix.pptx
    ├── nodejs_rest
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── nodejs_testing
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        ├── app.test.js
        └── build.sh
    ├── nodejs_testing_post
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh
    ├── oo_comparison
        ├── Java
        │   ├── Concertina.ctxt
        │   ├── Concertina.java
        │   ├── Java class, fields and constructor.mov
        │   ├── README.TXT
        │   └── package.bluej
        ├── PITCHME.html
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── Python
        │   └── concertina.py
        ├── README.md
        └── build.sh
    ├── peer_1
        ├── PITCHME.md
        ├── README.md
        ├── bias_chart.png
        ├── build.sh
        └── quality_chart.png
    └── prog_getting_started
        ├── PITCHME.md
        ├── PITCHME.yaml
        ├── README.md
        └── build.sh


/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     "extends": "standard",
3 |     "rules": {
4 |       "semi": [2, "always"],
5 |       "indent": "off"
6 |     }
7 | };
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | .DS_Store
3 | \#*\#
4 | 
5 | node_modules
6 | 


--------------------------------------------------------------------------------
/PITCHME.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="generator" content="pandoc">
 6 |   <title>PITCHME</title>
 7 |   <meta name="apple-mobile-web-app-capable" content="yes">
 8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 9 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
10 |   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reset.css">
11 |   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reveal.css">
12 |   <style>
13 |     code{white-space: pre-wrap;}
14 |     span.smallcaps{font-variant: small-caps;}
15 |     span.underline{text-decoration: underline;}
16 |     div.column{display: inline-block; vertical-align: top; width: 50%;}
17 |     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
18 |     ul.task-list{list-style: none;}
19 |     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
20 |   </style>
21 |   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/theme/simple.css" id="theme">
22 | </head>
23 | <body>
24 |   <div class="reveal">
25 |     <div class="slides">
26 | 
27 | 
28 | <section class="slide level6">
29 | 
30 | <p>Hello world</p>
31 | </section>
32 |     </div>
33 |   </div>
34 | 
35 |   <script src="https://unpkg.com/reveal.js@^4//dist/reveal.js"></script>
36 | 
37 |   // reveal.js plugins
38 |   <script src="https://unpkg.com/reveal.js@^4//plugin/notes/notes.js"></script>
39 |   <script src="https://unpkg.com/reveal.js@^4//plugin/search/search.js"></script>
40 |   <script src="https://unpkg.com/reveal.js@^4//plugin/zoom/zoom.js"></script>
41 | 
42 |   <script>
43 | 
44 |       // Full list of configuration options available at:
45 |       // https://revealjs.com/config/
46 |       Reveal.initialize({
47 |         // Push each slide change to the browser history
48 |         history: true,
49 | 
50 |         // reveal.js plugins
51 |         plugins: [
52 |           RevealNotes,
53 |           RevealSearch,
54 |           RevealZoom
55 |         ]
56 |       });
57 |     </script>
58 |     </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/PITCHME.md:
--------------------------------------------------------------------------------
1 | Hello world
2 | 


--------------------------------------------------------------------------------
/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme : simple
2 | theme-override : layout.css
3 | 
4 | mathjax : TeX-MML-AM_HTMLorMML-full


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Hello world
2 | 


--------------------------------------------------------------------------------
/admin/EAB20190509/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/admin/EAB20190509/prerequisites2018.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/EAB20190509/prerequisites2018.pdf


--------------------------------------------------------------------------------
/admin/awayday2018/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=##7E317B
 2 | 
 3 | # Future of UG Teaching in CS
 4 | 
 5 | ---
 6 | 
 7 | ## The students they are a-changing
 8 | 
 9 | @ul
10 | 
11 | - More students at school (so better qualified)
12 | - More international
13 | - More with special needs
14 | - More consumerist?
15 | - More women (we wish)
16 | 
17 | @ulend
18 | 
19 | ---
20 |     
21 | ## The subject it is a-changing
22 | 
23 | @ul
24 | 
25 | - In schools
26 | - Developing content
27 |     - Security
28 |     - Machine learning
29 |     - The Riemann Hypothesis
30 | 
31 | @ulend
32 | 
33 | ---
34 | 
35 | ## The university it is a-changing
36 | 
37 | @ul
38 | 
39 | - Higher proportion of income from fees
40 | - Focus on curricular efficiency
41 | - New Centre for Academic Development (DCAD)
42 | - Using and providing more learning analytics
43 | - Module changes decentralised
44 | - All depts to engage in curriculum review
45 | 
46 | @ulend
47 | 
48 | ---
49 | 
50 | ## The landscape it is a-changing
51 | 
52 | @ul
53 | 
54 | - TEF and subject-level TEF
55 |     - Learning gain
56 | - Office for students (OfS)
57 | - Inclusion is bigger than ever, esp. for Durham
58 | - Employability is crucial
59 | 
60 | @ulend
61 | 
62 | ---
63 | 
64 | ## What should we do?
65 | 
66 | Working group to look at
67 | 
68 | - Curriculum
69 | - Pedagogy
70 | - Assessment
71 | - Data
72 | - Processes
73 | 
74 | Reporting Feb 2019 To EdComm and BoS
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/admin/awayday2019/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/average_marks.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/average_marks.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/coursework surveys/1906coursework1stYear.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/coursework surveys/1906coursework1stYear.pdf


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/coursework surveys/1906coursework2ndYear.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/coursework surveys/1906coursework2ndYear.pdf


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/coursework surveys/1906coursework3rdYear.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/coursework surveys/1906coursework3rdYear.pdf


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/coursework surveys/1906coursework4thYear.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/coursework surveys/1906coursework4thYear.pdf


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/demonstrators survey/1906demonstrators1stYear.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/demonstrators survey/1906demonstrators1stYear.pdf


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/demonstrators survey/1906demonstrators2ndYear.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/demonstrators survey/1906demonstrators2ndYear.pdf


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP1021 Mathematics for Computer Science.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP1021 Mathematics for Computer Science.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP1051 Computational Thinking.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP1051 Computational Thinking.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP1071 Computer Systems (002).xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP1071 Computer Systems (002).xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP1081 Algorithms and Data Structures (002).xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP1081 Algorithms and Data Structures (002).xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP1101 Programming Review.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP1101 Programming Review.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP2181 Theory of Computation.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP2181 Theory of Computation.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP2211 Networks and Systems.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP2211 Networks and Systems.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP2221 Programming Paradigms.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP2221 Programming Paradigms.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP2231 Software Methodologies.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP2231 Software Methodologies.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP2252 Software Engineering.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP2252 Software Engineering.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP3371 Computing Methodologies III.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP3371 Computing Methodologies III.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP3381 Software, Systems and Applications III.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP3381 Software, Systems and Applications III.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP3391 Theoretical Computer Science III.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP3391 Theoretical Computer Science III.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP3421 Computer Science Into Schools Review.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP3421 Computer Science Into Schools Review.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP3431 Advanced Computer Systems III Review.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP3431 Advanced Computer Systems III Review.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP4031 Computing Methodologies IV.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP4031 Computing Methodologies IV.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP4061 Software, Systems and Applications IV.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP4061 Software, Systems and Applications IV.xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/COMP4071 Theoretical Computer Science IV (002).xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/COMP4071 Theoretical Computer Science IV (002).xlsx


--------------------------------------------------------------------------------
/admin/awayday2019/module_reviews/module reviews/Contemporary Computer Science III, IV.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/awayday2019/module_reviews/module reviews/Contemporary Computer Science III, IV.xlsx


--------------------------------------------------------------------------------
/admin/curriculum_review/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=##7E317B
 2 | 
 3 | # Future of UG Teaching in CS
 4 | 
 5 | ---
 6 | 
 7 | ## Process
 8 | 
 9 | Working group to look at 1 year and 3 year horizon for
10 | 
11 | - Curriculum
12 | - Pedagogy
13 | - Assessment
14 | - Data
15 | - Processes
16 | 
17 | ---
18 | 
19 | ## Working group
20 | 
21 | Balanced by teaching/research group & gender + external
22 | 
23 | - Steven Bradley (chair) teaching
24 | - Toby Breckon ICG
25 | - Beth Bromley Physics
26 | - Alexandra Cristea ICG
27 | - Sarah Drummond teaching
28 | - Max Gadouleau ACiD + Chair of Board of Examiners
29 | - Matthew Johnson ACiD + Director of Education
30 | 
31 | ---
32 | 
33 | ## Progress to date:
34 | 
35 | - Depart awayday on streamlining assessment
36 | - Staff opinions on areas that need: more focus; less focus; updating 
37 | - Student voice: questionnaire circulated to L2,3,4 UGs
38 | - Plan to write up as research paper on gender difference in opinions
39 | - One working group meeting already held, more planned
40 | - Detailed discussions with group leaders
41 | 
42 | ---
43 | 
44 | ## Issues
45 | 
46 | - [Very dynamic subject area](https://www.gartner.com/smarterwithgartner/5-trends-emerge-in-gartner-hype-cycle-for-emerging-technologies-2018/) e.g. machine learning, security, blockchain, quantum
47 | - Student and staff numbers increasing
48 | - Need to be more efficient and creative with assessment and supervision
49 | - Address and improve diversity within student body
50 | - Some theoretical modules have low numbers
51 | 
52 | ---
53 | 
54 | ## Principles
55 | 
56 | - Reduce number of assessment points: synoptic where possible
57 | - Apply software engineering criteria of coupling and cohesion to ease maintenance
58 | - Better integration between theory and practice
59 | 
60 | 
61 | ---
62 | 
63 | - Curriculum development needs to address across levels
64 |    - Group vs individual
65 |    - Presentation types
66 |    - Project work
67 |    - Research skills
68 | 
69 | See current module linkage](prerequisites2018.pdf)
70 | 
71 | ---
72 | 
73 | ## Going forward
74 | 
75 | - Redevelopment of key L1 module for 2019: Sue Black
76 | - Plans for some rationalisation and development of L2 modules for 2019
77 | - 2020 to address issues in L2-L4 around group and individual projects
78 | - Aim for wider module choice at L3/4 as staff numbers increase
79 | - Need to identify and track key metrics (working group)
80 | 


--------------------------------------------------------------------------------
/admin/curriculum_review/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Future of UG Teaching in CS
 3 | 
 4 | 
 5 | ## Process
 6 | 
 7 | Working group to look at 1 year and 3 year horizon for
 8 | 
 9 | - Curriculum
10 | - Pedagogy
11 | - Assessment
12 | - Data
13 | - Processes
14 | 
15 | 
16 | ## Working group
17 | 
18 | Balanced by teaching/research group & gender + external
19 | 
20 | - Steven Bradley (chair) teaching
21 | - Toby Breckon ICG
22 | - Beth Bromley Physics
23 | - Alexandra Cristea ICG
24 | - Sarah Drummond teaching
25 | - Max Gadouleau ACiD + Chair of Board of Examiners
26 | - Matthew Johnson ACiD + Director of Education
27 | 
28 | 
29 | ## Progress to date:
30 | 
31 | - Depart awayday on streamlining assessment
32 | - Staff opinions on areas that need: more focus; less focus; updating 
33 | - Student voice: questionnaire circulated to L2,3,4 UGs
34 | - Plan to write up as research paper on gender difference in opinions
35 | - One working group meeting already held, more planned
36 | - Detailed discussions with group leaders
37 | 
38 | 
39 | ## Issues
40 | 
41 | - [Very dynamic subject area](https://www.gartner.com/smarterwithgartner/5-trends-emerge-in-gartner-hype-cycle-for-emerging-technologies-2018/) e.g. machine learning, security, blockchain, quantum
42 | - Student and staff numbers increasing
43 | - Need to be more efficient and creative with assessment and supervision
44 | - Address and improve diversity within student body
45 | - Some theoretical modules have low numbers
46 | 
47 | 
48 | ## Principles
49 | 
50 | - Reduce number of assessment points: synoptic where possible
51 | - Apply software engineering criteria of coupling and cohesion to ease maintenance
52 | - Better integration between theory and practice
53 | 
54 | 
55 | 
56 | - Curriculum development needs to address across levels
57 |    - Group vs individual
58 |    - Presentation types
59 |    - Project work
60 |    - Research skills
61 | 
62 | See current module linkage](prerequisites2018.pdf)
63 | 
64 | 
65 | ## Going forward
66 | 
67 | - Redevelopment of key L1 module for 2019: Sue Black
68 | - Plans for some rationalisation and development of L2 modules for 2019
69 | - 2020 to address issues in L2-L4 around group and individual projects
70 | - Aim for wider module choice at L3/4 as staff numbers increase
71 | - Need to identify and track key metrics (working group)
72 | 


--------------------------------------------------------------------------------
/admin/curriculum_review/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/admin/curriculum_review/prerequisites2018.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/admin/curriculum_review/prerequisites2018.pdf


--------------------------------------------------------------------------------
/arch/chip_select/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#6A246D
 2 | 
 3 | ## Computer Architecture
 4 | ## Desiging Chip Select
 5 | 
 6 | ---
 7 | 
 8 | ## Steps
 9 | 
10 | * Identify top and bottom of range in hex
11 | * Translate to boolean variables on address bus
12 | * Identify variables that are always the same
13 | * Simplify the rest out
14 | 
15 | ---
16 | 
17 | ## Example
18 | 
19 | The ARM Cortex-M3 processor has a ficed memory map working with a 32-bit address bus. 
20 | 
21 | The memory map allows for up to 1 GiB of external memory, starting at location 0x60000000
22 | 
23 | * Design an address decoder circuit for a 0.5GiB memory device connected to the processor
24 | * Design an address decoder circuit for a 1.0GiB memory device connected to the processor
25 | 
26 | 
27 | ---
28 | 
29 | ## Identify range
30 | 
31 | Specified either as start (low) or end (high) address.
32 | 
33 | Example: 
34 | 
35 | `\[
36 | \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
37 |  \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
38 | \]`
39 | 
40 | `\[
41 | 0.5GiB = 2^{19} B
42 | \]`
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/arch/chip_select/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../../PITCHME.yaml


--------------------------------------------------------------------------------
/arch/chip_select/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Computer Architecture
 3 | ## Desiging Chip Select
 4 | 
 5 | 
 6 | ## Steps
 7 | 
 8 | * Identify top and bottom of range in hex
 9 | * Translate to boolean variables on address bus
10 | * Identify variables that are always the same
11 | * Simplify the rest out
12 | 
13 | 
14 | ## Example
15 | 
16 | The ARM Cortex-M3 processor has a ficed memory map working with a 32-bit address bus. 
17 | 
18 | The memory map allows for up to 1 GiB of external memory, starting at location 0x60000000
19 | 
20 | * Design an address decoder circuit for a 0.5GiB memory device connected to the processor
21 | * Design an address decoder circuit for a 1.0GiB memory device connected to the processor
22 | 
23 | 
24 | 
25 | ## Identify range
26 | 
27 | Specified either as start (low) or end (high) address.
28 | 
29 | Example: 
30 | 
31 | `\[
32 | \left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
33 |  \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
34 | \]`
35 | 
36 | `\[
37 | 0.5GiB = 2^{19} B
38 | \]`
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/arch/chip_select/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/arch/module_intro/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#6A246D
 2 | 
 3 | ## COMP3467 Advanced Computer Systems
 4 | ## Module Introduction
 5 | 
 6 | ---
 7 | 
 8 | ## A New Golden Age for Computer Architecture
 9 | 
10 | ---
11 | 
12 | ## Module content
13 | 
14 | @ul
15 | * Build a (virtual) computer from (virtual) scratch
16 |   * nand2tetris
17 | * Designing for performance
18 |   * pipeline, cache, multicore
19 | * Breaking the abstraction layers
20 |   * security and performance
21 | @ulend
22 | 
23 | ---
24 | 
25 | ## Formalities
26 | 
27 | * Prerequisite: COMP1071 Computer Systems 
28 | * Assessed by exam
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/arch/module_intro/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../../PITCHME.yaml


--------------------------------------------------------------------------------
/arch/module_intro/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## COMP3467 Advanced Computer Systems
 3 | ## Module Introduction
 4 | 
 5 | 
 6 | ## A New Golden Age for Computer Architecture
 7 | 
 8 | 
 9 | ## Module content
10 | 
11 | * Build a (virtual) computer from (virtual) scratch
12 |   * nand2tetris
13 | * Designing for performance
14 |   * pipeline, cache, multicore
15 | * Breaking the abstraction layers
16 |   * security and performance
17 | 
18 | 
19 | ## Formalities
20 | 
21 | * Prerequisite: COMP1071 Computer Systems 
22 | * Assessed by exam
23 | 
24 | 
25 | 


--------------------------------------------------------------------------------
/arch/module_intro/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/arch/review_quiz/PITCHME.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="generator" content="pandoc">
 6 |   <title>PITCHME</title>
 7 |   <meta name="apple-mobile-web-app-capable" content="yes">
 8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 9 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
10 |   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reset.css">
11 |   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reveal.css">
12 |   <style>
13 |     code{white-space: pre-wrap;}
14 |     span.smallcaps{font-variant: small-caps;}
15 |     span.underline{text-decoration: underline;}
16 |     div.column{display: inline-block; vertical-align: top; width: 50%;}
17 |     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
18 |     ul.task-list{list-style: none;}
19 |     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
20 |   </style>
21 |   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/theme/simple.css" id="theme">
22 | </head>
23 | <body>
24 |   <div class="reveal">
25 |     <div class="slides">
26 | 
27 | 
28 | <section>
29 | <section id="advanced-computer-systems-review" class="title-slide slide level1" data-background-color="#7E317B">
30 | <h1 data-background-color="#7E317B">Advanced Computer Systems Review</h1>
31 | 
32 | </section>
33 | <section id="what-is-relevant-background-content" class="slide level2">
34 | <h2>What is relevant background content?</h2>
35 | <div>
36 | <ul>
37 | <li class="fragment">You are going to write a quiz</li>
38 | <li class="fragment">In groups of about four</li>
39 | <li class="fragment">Write two questions relating to previous content</li>
40 | <li class="fragment">Everybody then answers the questions</li>
41 | <li class="fragment">YOu get points for the ones you get right</li>
42 | <li class="fragment">If nobody gets your question right you lose 10 points</li>
43 | <li class="fragment">Team with the most points wins</li>
44 | </ul>
45 | </div>
46 | </section>
47 | <section id="specific-instructions" class="slide level2">
48 | <h2>Specific Instructions</h2>
49 | <ul>
50 | <li>Prepare a document with your two questions, ready to paste</li>
51 | <li>Remember your breakout room number</li>
52 | <li>Have your answers ready, but not in the document</li>
53 | <li>Decide who is going to do the pasting</li>
54 | <li>Remember they can google</li>
55 | <li>You have 8 minutes</li>
56 | </ul>
57 | </section>
58 | <section id="marking" class="slide level2">
59 | <h2>Marking</h2>
60 | <ul>
61 | <li>Group representative please post to the chat
62 | <ul>
63 | <li>your room number</li>
64 | <li>a link to a document with your answers to other questions</li>
65 | </ul></li>
66 | <li>Paste the answers to your questions in the ANSWERS doc (in chat)</li>
67 | <li>Find the document for room n%11 +1</li>
68 | <li>Mark their answers (max 2 marks per question)</li>
69 | </ul>
70 | </section></section>
71 |     </div>
72 |   </div>
73 | 
74 |   <script src="https://unpkg.com/reveal.js@^4//dist/reveal.js"></script>
75 | 
76 |   // reveal.js plugins
77 |   <script src="https://unpkg.com/reveal.js@^4//plugin/notes/notes.js"></script>
78 |   <script src="https://unpkg.com/reveal.js@^4//plugin/search/search.js"></script>
79 |   <script src="https://unpkg.com/reveal.js@^4//plugin/zoom/zoom.js"></script>
80 | 
81 |   <script>
82 | 
83 |       // Full list of configuration options available at:
84 |       // https://revealjs.com/config/
85 |       Reveal.initialize({
86 |         // Push each slide change to the browser history
87 |         history: true,
88 | 
89 |         // reveal.js plugins
90 |         plugins: [
91 |           RevealNotes,
92 |           RevealSearch,
93 |           RevealZoom
94 |         ]
95 |       });
96 |     </script>
97 |     </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/arch/review_quiz/PITCHME.md:
--------------------------------------------------------------------------------
 1 | # Advanced Computer Systems Review {data-background-color=#7E317B}
 2 | 
 3 | ---
 4 | 
 5 | ## What is relevant background content?
 6 | 
 7 | ::: incremental
 8 | 
 9 | - You are going to write a quiz
10 | - In groups of about four
11 | - Write two questions relating to previous content
12 | - Everybody then answers the questions
13 | - YOu get points for the ones you get right
14 | - If nobody gets your question right you lose 10 points
15 | - Team with the most points wins
16 | :::
17 | ---
18 |     
19 | ## Specific Instructions
20 | 
21 | - Prepare a document with your two questions, ready to paste
22 | - Remember your breakout room number
23 | - Have your answers ready, but not in the document
24 | - Decide who is going to do the pasting
25 | - Remember they can google
26 | - You have 8 minutes
27 | 
28 | ---
29 | 
30 | ## Marking
31 | 
32 | - Group representative please post to the chat
33 |   - your room number
34 |   - a link to a document with your answers to other questions
35 | - Paste the answers to your questions in the ANSWERS doc (in chat)
36 | - Find the document for room n%11 +1
37 | - Mark their answers (max 2 marks per question)
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/arch/review_quiz/README.md:
--------------------------------------------------------------------------------
 1 | # Advanced Computer Systems Review 
 2 | 
 3 | 
 4 | ## What is relevant background content?
 5 | 
 6 | ::: incremental
 7 | 
 8 | - You are going to write a quiz
 9 | - In groups of about four
10 | - Write two questions relating to previous content
11 | - Everybody then answers the questions
12 | - YOu get points for the ones you get right
13 | - If nobody gets your question right you lose 10 points
14 | - Team with the most points wins
15 | :::
16 |     
17 | ## Specific Instructions
18 | 
19 | - Prepare a document with your two questions, ready to paste
20 | - Remember your breakout room number
21 | - Have your answers ready, but not in the document
22 | - Decide who is going to do the pasting
23 | - Remember they can google
24 | - You have 8 minutes
25 | 
26 | 
27 | ## Marking
28 | 
29 | - Group representative please post to the chat
30 |   - your room number
31 |   - a link to a document with your answers to other questions
32 | - Paste the answers to your questions in the ANSWERS doc (in chat)
33 | - Find the document for room n%11 +1
34 | - Mark their answers (max 2 marks per question)
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/arch/review_quiz/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/assets/800px-AmdahlsLaw.svg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/assets/800px-AmdahlsLaw.svg.png


--------------------------------------------------------------------------------
/assets/Amdahl_march_13_2008.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/assets/Amdahl_march_13_2008.jpg


--------------------------------------------------------------------------------
/assets/CPUtrends.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/assets/CPUtrends.png


--------------------------------------------------------------------------------
/assets/blas-results.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/assets/blas-results.pdf


--------------------------------------------------------------------------------
/assets/blasresults.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/assets/blasresults.png


--------------------------------------------------------------------------------
/build.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | sed '/^---/ d' PITCHME.md | sed '/^@/ d' | sed '/^:::/ d' | sed 's/{.*}//' > README.md
 3 | 
 4 | PATHEND=$(pwd | rev | cut -d'/' -f-2 | rev)
 5 | 
 6 | pandoc  -V theme=simple -t revealjs -s PITCHME.md -o PITCHME.html
 7 | 
 8 | git add .
 9 | git commit -m "Working on presentation $PATHEND"
10 | git push -u origin master
11 | 
12 | 


--------------------------------------------------------------------------------
/md2pdf.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | pandoc "$1" \
 4 |     -f gfm \
 5 |     -V linkcolor:blue \
 6 |     -V geometry:a4paper \
 7 |     -V geometry:margin=2cm \
 8 |     -V mainfont="DejaVu Serif" \
 9 |     -V monofont="DejaVu Sans Mono" \
10 |     --pdf-engine=xelatex \
11 |     -o "$2"


--------------------------------------------------------------------------------
/pedagogy/ukcse_agm_2020/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=##7E317B
 2 | 
 3 | # UK ACM SIGCSE AGM 2020
 4 | 
 5 | ---
 6 | 
 7 | ## Formal Business
 8 | 
 9 | @ul
10 | 
11 | - Elections as terms end (none)
12 | - Finance report (none)
13 | - Change to charter: Ireland de-merged, still have joint events
14 | @ulend
15 | 
16 | ---
17 |     
18 | ## Who are we
19 | 
20 | - Formed February 2018
21 | - Initially 50 members
22 | - More have joined since
23 | - [Web presence](https://uki-sigcse.hosting.acm.org/contact/)
24 | - Board members
25 | 
26 | ---
27 | 
28 | ## What we do
29 | 
30 | - Events: CEP
31 | - UKICER (first 2019)
32 | - Local events
33 | - Other suggestions for community building?
34 | 
35 | 


--------------------------------------------------------------------------------
/pedagogy/ukcse_agm_2020/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # UK ACM SIGCSE AGM 2020
 3 | 
 4 | 
 5 | ## Formal Business
 6 | 
 7 | 
 8 | - Elections as terms end (none)
 9 | - Finance report (none)
10 | - Change to charter: Ireland de-merged, still have joint events
11 | 
12 |     
13 | ## Who are we
14 | 
15 | - Formed February 2018
16 | - Initially 50 members
17 | - More have joined since
18 | - [Web presence](https://uki-sigcse.hosting.acm.org/contact/)
19 | - Board members
20 | 
21 | 
22 | ## What we do
23 | 
24 | - Events: CEP
25 | - UKICER (first 2019)
26 | - Local events
27 | - Other suggestions for community building?
28 | 
29 | 


--------------------------------------------------------------------------------
/pedagogy/ukcse_agm_2020/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/pedagogy/ukcse_agm_2021/PITCHME.md:
--------------------------------------------------------------------------------
 1 | # UK ACM SIGCSE AGM 2021 {data-background-color=#7E317B}
 2 | 
 3 | ---
 4 | 
 5 | ## Formal Business
 6 | 
 7 | ::: incremental
 8 | 
 9 | - Elections as terms end: forthcoming (February 2021) for 
10 |   - chair (currently Steven Bradley)
11 |   - vice-chair (currently Sally Fincher)
12 |   - membership secretary (currently Samia Kamal)
13 |   - officer can have max two terms
14 |   - to be held via SurveyMonkey
15 | - Finance report (none)
16 | :::
17 | ---
18 |     
19 | ## Who are we
20 | 
21 | - Formed February 2018
22 | - Initially 50 members
23 | - Currently 81 members
24 | - [Web presence](https://uki-sigcse.hosting.acm.org/contact/)
25 | - Board members
26 | 
27 | ---
28 | 
29 | ## What we do & shout-outs
30 | 
31 | - Events: CEP
32 | - UKICER (first 2019), joint with Ireland SIGCSE <https://youtu.be/wXz64RP391g>
33 | - Local events
34 |   - journal club (Duncan Hull)
35 |   - CS pedagogy  (Jane Waite)
36 | 
37 | ---
38 | 
39 | # That's all folks {data-background-color=#7E317B}
40 | 
41 | Thanks for coming
42 | 


--------------------------------------------------------------------------------
/pedagogy/ukcse_agm_2021/README.md:
--------------------------------------------------------------------------------
 1 | # UK ACM SIGCSE AGM 2021 
 2 | 
 3 | 
 4 | ## Formal Business
 5 | 
 6 | ::: incremental
 7 | 
 8 | - Elections as terms end: forthcoming (February 2021) for 
 9 |   - chair (currently Steven Bradley)
10 |   - vice-chair (currently Sally Fincher)
11 |   - membership secretary (currently Samia Kamal)
12 |   - officer can have max two terms
13 |   - to be held via SurveyMonkey
14 | - Finance report (none)
15 | :::
16 |     
17 | ## Who are we
18 | 
19 | - Formed February 2018
20 | - Initially 50 members
21 | - Currently 81 members
22 | - [Web presence](https://uki-sigcse.hosting.acm.org/contact/)
23 | - Board members
24 | 
25 | 
26 | ## What we do & shout-outs
27 | 
28 | - Events: CEP
29 | - UKICER (first 2019), joint with Ireland SIGCSE <https://youtu.be/wXz64RP391g>
30 | - Local events
31 |   - journal club (Duncan Hull)
32 |   - CS pedagogy  (Jane Waite)
33 | 
34 | 
35 | # That's all folks 
36 | 
37 | Thanks for coming
38 | 


--------------------------------------------------------------------------------
/pedagogy/ukcse_agm_2021/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/pedagogy/ukicse_agm_2019/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=##7E317B
 2 | 
 3 | # UK and Ireland ACM SIGCSE AGM 2019
 4 | 
 5 | ---
 6 | 
 7 | ## Formal Business
 8 | 
 9 | @ul
10 | 
11 | - Elections as terms end (none)
12 | - Finance report (none)
13 | 
14 | @ulend
15 | 
16 | ---
17 |     
18 | ## Who are we
19 | 
20 | - Formed February 2018
21 | - Initially 50 members
22 | - A few more have joined over the year
23 | - [Web presence](https://uki-sigcse.hosting.acm.org/contact/)
24 | - Board members
25 | 
26 | ---
27 | 
28 | ## What we do
29 | 
30 | - Events: CEP
31 | - Research conference 5th & 6th September Kent
32 | - Twitter meetups: timing?
33 | - Blogs: volunteers?
34 | - Other suggestions for community building?
35 | 
36 | 


--------------------------------------------------------------------------------
/pedagogy/ukicse_agm_2019/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # UK and Ireland ACM SIGCSE AGM 2019
 3 | 
 4 | 
 5 | ## Formal Business
 6 | 
 7 | 
 8 | - Elections as terms end (none)
 9 | - Finance report (none)
10 | 
11 | 
12 |     
13 | ## Who are we
14 | 
15 | - Formed February 2018
16 | - Initially 50 members
17 | - A few more have joined over the year
18 | - [Web presence](https://uki-sigcse.hosting.acm.org/contact/)
19 | - Board members
20 | 
21 | 
22 | ## What we do
23 | 
24 | - Events: CEP
25 | - Research conference 5th & 6th September Kent
26 | - Twitter meetups: timing?
27 | - Blogs: volunteers?
28 | - Other suggestions for community building?
29 | 
30 | 


--------------------------------------------------------------------------------
/pedagogy/ukicse_agm_2019/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/WP_assignment_1819/AJAX.msc.txt:
--------------------------------------------------------------------------------
 1 | title Client/server interaction
 2 | 
 3 | Client->Server: Static page request
 4 | Server->Client: HTML
 5 | loop each user action
 6 | Client->Server: Dynamic content request (AJAX)
 7 | Server->Client: JSON
 8 | Client->Client: Render JSON content as HTML within DOM
 9 | end
10 | 


--------------------------------------------------------------------------------
/prog/WP_assignment_1819/AJAX_msc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/WP_assignment_1819/AJAX_msc.png


--------------------------------------------------------------------------------
/prog/WP_assignment_1819/app.test.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 'use strict';
 3 | 
 4 | const request = require('supertest');
 5 | const app = require('./app');
 6 | 
 7 | function checkDeliaDerbyshire(res)
 8 | {
 9 | 
10 |     const jContent = res.body;
11 |     if(typeof jContent !== 'object'){
12 | 	throw new Error('not an object');
13 |     }
14 | 
15 |     if(jContent['surname'] !== 'Derbyshire'){
16 | 	console.log(jContent);
17 | 	throw new Error('surname should be Derbyshire');
18 |     }
19 | 
20 |     if(jContent['forename'] !== 'Delia'){
21 | 	throw new Error('forename should be Delia');
22 |     }
23 | }
24 | 
25 | // thanks to Nico Tejera at https://stackoverflow.com/questions/1714786/query-string-encoding-of-a-javascript-object
26 | // returns something like "access_token=concertina&username=bobthebuilder"
27 | function serialise(obj){
28 |     return Object.keys(obj).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&');
29 | }
30 | 
31 | describe('Test the people service', () => {
32 |     test('GET /people succeeds', () => {
33 |         return request(app)
34 | 	    .get('/people')
35 | 	    .expect(200);
36 |     });
37 | 
38 |     test('GET /people returns JSON', () => {
39 |         return request(app)
40 | 	    .get('/people')
41 | 	    .expect('Content-type', /json/);
42 |     });
43 | 
44 |     test('GET /people includes doctorwhocomposer', () => {
45 |         return request(app)
46 | 	    .get('/people')
47 | 	    .expect(/doctorwhocomposer/);
48 |     });
49 | 
50 |     test('GET /people/doctorwhocomposer succeeds', () => {
51 |         return request(app)
52 | 	    .get('/people/doctorwhocomposer')
53 | 	    .expect(200);
54 |     });
55 | 
56 |     test('GET /people/doctorwhocomposer returns JSON', () => {
57 |         return request(app)
58 | 	    .get('/people/doctorwhocomposer')
59 | 	    .expect('Content-type', /json/);
60 |     });
61 | 
62 |     test('GET /people/doctorwhocomposer includes name details', () => {
63 |         return request(app)
64 | 	    .get('/people/doctorwhocomposer')
65 | 	    .expect(checkDeliaDerbyshire);
66 |     });
67 | 
68 | 
69 |     test('POST /people needs access_token', () => {
70 |         return request(app)
71 | 	    .post('/people')
72 | 	    .expect(403);
73 |     });
74 | 
75 |     test('POST /people cannot replicate', () => {
76 | 	const params = {access_token: 'concertina',
77 | 			username: 'doctorwhocomposer',
78 | 			forename: 'Bob',
79 | 			surname: 'Builder'};
80 |         return request(app)
81 | 	    .post('/people')
82 | 	    .send(serialise(params))
83 | 	    .expect(400);
84 |     });
85 | 
86 | });
87 | 


--------------------------------------------------------------------------------
/prog/WP_assignment_1819/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/WP_assignment_1819_resit/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/arch_security/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Knowing about memory 
  3 | 
  4 | For better or for worse
  5 | 
  6 | 
  7 | ## Optimising performance
  8 | ## Security I: Meltdown/Spectre
  9 | ## Quiz
 10 | ## Security II: Rowhammer
 11 | 
 12 | 
 13 | ## Matrix Multiplication
 14 | 
 15 | - Remarkable variation in FLOPS for the same FLOPs
 16 | - All dependent on working with memory architecture
 17 | - Based on [BLIS: a framework for rapidly instantiating BLAS functionality](https://dl.acm.org/citation.cfm?id=2764454)
 18 | 
 19 | 
 20 | ## Basic
 21 | 
 22 | ```
 23 | for (j = 0; j < n; j++) {
 24 |   for (p = 0; p < k; p++) {
 25 |     for (i = 0; i < m; i++) {
 26 |       c[j*ldc + i] = c[j*ldc + i] + a[p*lda + i] * b[j*ldb + p];
 27 |     }
 28 |   }
 29 | }
 30 | ```
 31 | 
 32 | 
 33 | ## Bad order
 34 | 
 35 | ```
 36 | for (j = 0; j < n; j++) {
 37 |   for (i = 0; i < m; i++) {
 38 |     for (p = 0; p < k; p++) {
 39 |       c[j*ldc + i] = c[j*ldc + i] + a[p*lda + i] * b[j*ldb + p];
 40 |     }
 41 |   }
 42 | }
 43 | 
 44 | ```
 45 | 
 46 | 
 47 | ![Results](blasresults.png)
 48 | 
 49 | Thanks to Lawrence Mitchell
 50 | 
 51 | 
 52 | # Disadvantages 
 53 | 
 54 | 
 55 | ## Meltdown/Spectre Vulnerabilities
 56 | 
 57 | 
 58 | - Considered "catastrophic" and "[unbelievable](https://www.bloomberg.com/news/articles/2018-01-08/-it-can-t-be-true-inside-the-semiconductor-industry-s-meltdown)"
 59 | - Identified late 2017, publicised early 2018, [reading privileged memory with a side-channel](https://googleprojectzero.blogspot.com/2018/01/reading-privileged-memory-with-side.html)
 60 | - Spectre uses speculative branching to allow one user process to access another
 61 | - Spectre affects some Intel, AMD and ARM chips
 62 | - Meltdown uses out-of-order execution with exceptions, Intel (from 2011) and possibly ARM
 63 | 
 64 | 
 65 | 
 66 | 
 67 | ## Meltdown
 68 | 
 69 | <https://www.youtube.com/watch?v=mgAN4w7LH2o> 
 70 | 
 71 | 
 72 | ## Spectre
 73 | 
 74 | - Change CPU state depending on memory values you are not allowed to access (at location `data[offset]`)
 75 | - Speculative execution
 76 | 
 77 | ```
 78 | if (offset < arr1->length) {
 79 |  value = arr1->data[offset];
 80 |  index2 = ((value&1)*0x100)+0x200;
 81 |  if (index2 < arr2->length) {
 82 |    value2 = arr2->data[index2];
 83 |  }
 84 | }
 85 | ```
 86 | 
 87 | 
 88 | - Measure time to access `arr2->data[0x200]` and `arr2->data[0x300]`
 89 | - Depends on whether it is in cache i.e. on LSb of `value`
 90 | 
 91 | 
 92 | ## Exploitation
 93 | 
 94 | - None reported in the wild
 95 | - Some variants rely on executing user code in kernel space with verified JIT eBPF bytecode execution
 96 | - Some rely on MESI protocol to keep values in cache for longer by sharing between cores
 97 | - JavaScript potentially allows remote exploitation
 98 | 
 99 | 
100 | ## Mitigation
101 | 
102 | - Many mitigations affect performance by flushing cache (TLB)
103 | - Meltdown has kernel patch, Spectre doesn't
104 | - 'Spectre may haunt us for a while'
105 | - Intel announced fix for new hardware in October 2018
106 | - New variants announced in November 2018
107 | - Performance at price of security
108 | 
109 | 
110 | ## Rowhammer 
111 | 
112 | <https://www.youtube.com/watch?v=rGaF15-ko5w> (start from 3:05)
113 | 
114 | 
115 | ## Mitigation
116 | 
117 | - DDR4 introduced Target Row Refresh (TRR)
118 | - Stops single and double-sided rowhammer attackes
119 | - However, [not all rowhammer attacks](https://www.bleepingcomputer.com/news/security/ddr4-memory-still-at-rowhammer-risk-new-method-bypasses-fixes/)
120 | 
121 | 
122 | ## Summary
123 | 
124 | 
125 | - Knowing how things work can help you
126 |   - Make things better (speedup)
127 |   - Make things worse (vulnerability)
128 | - Long time since anybody knew all about how a computer works
129 | - Integrating knowledge is important
130 | - 'May you live in interesting times'
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 


--------------------------------------------------------------------------------
/prog/arch_security/blasresults.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/arch_security/blasresults.png


--------------------------------------------------------------------------------
/prog/arch_security/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/arch_so_what/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/arch_so_what/bad-order.c:
--------------------------------------------------------------------------------
 1 | void gemm(int m, int n, int k,
 2 |           const double *a, int lda,
 3 |           const double *b, int ldb,
 4 |           double *c, int ldc)
 5 | {
 6 |   int i, j, p;
 7 |   for (j = 0; j < n; j++) {
 8 |     for (i = 0; i < m; i++) {
 9 |       for (p = 0; p < k; p++) {
10 |         c[j*ldc + i] = c[j*ldc + i] + a[p*lda + i] * b[j*ldb + p];
11 |       }
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/prog/arch_so_what/basic.c:
--------------------------------------------------------------------------------
 1 | void gemm(int m, int n, int k,
 2 |           const double *a, int lda,
 3 |           const double *b, int ldb,
 4 |           double *c, int ldc)
 5 | {
 6 |   int i, j, p;
 7 |   for (j = 0; j < n; j++) {
 8 |     for (p = 0; p < k; p++) {
 9 |       for (i = 0; i < m; i++) {
10 |         c[j*ldc + i] = c[j*ldc + i] + a[p*lda + i] * b[j*ldb + p];
11 |       }
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/prog/arch_so_what/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/arch_trends/PITCHME.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # Computer Architecture: Trends {data-background-color=#7E317B}
 4 | 
 5 | ---
 6 | 
 7 | ## Context of Modern Computing
 8 | 
 9 | ::: incremental
10 | 
11 | - [Moore's Law](https://en.wikipedia.org/wiki/Moore%27s_law) keeps on giving
12 | - [Dennard scaling](https://en.wikipedia.org/wiki/Dennard_scaling) doesn't since about 2006
13 | - Power dissipation (switching) goes up with cube of clock speed
14 | - Static power dissipation starts to dominate at small scale
15 | - Trend towards multi-core
16 | - Extreme end is GPU/TPU
17 | 
18 | :::
19 | 
20 | ---
21 | 
22 | [42 years of Microprocessor trend data (2018)](https://www.karlrupp.net/2018/02/42-years-of-microprocessor-trend-data/)
23 | 
24 | ---
25 | 
26 | ## Power is Important
27 | 
28 | ::: incremental
29 | 
30 | - Cooling for integrity (run at 9GHz with liquid nitrogen)
31 | - Battery (mobile)
32 | - Cloud computing power costs (including cooling)
33 |   - [arctic data centres](https://www.bbc.co.uk/news/technology-40922048)
34 |   - [underwater data centres](https://www.bbc.co.uk/news/technology-44368813)
35 | - [Bitcoin is expensive](https://www.bbc.co.uk/news/technology-56012952)
36 | 
37 | :::
38 | 
39 | ---
40 | 
41 | ## Virtualisation vs Parallelisation
42 | 
43 | - Opposite directions
44 | - Number of linear clock cycles not so important
45 | - Some tasks can effectively be parallelised, some can't
46 | - Send the program to the data: google search
47 | - Remember [Amdahl's law](https://en.wikipedia.org/wiki/Amdahl%27s_law)
48 | 
49 | ---
50 | 
51 | ## Cloud Computing
52 | 
53 | - http v1.1 (1997) multiple names for one IP address
54 | - virtualisation vs timesharing
55 | - docker images: multiple machines on same physical machine
56 | 
57 | ---
58 | 
59 | ## Apple M1
60 | 
61 | [How Apple Just Changed the Entire Industry (2020)](https://www.youtube.com/watch?v=OuF9weSkS68)
62 | 
63 | 
64 | 


--------------------------------------------------------------------------------
/prog/arch_trends/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # Computer Architecture: Trends 
 4 | 
 5 | 
 6 | ## Context of Modern Computing
 7 | 
 8 | 
 9 | - [Moore's Law](https://en.wikipedia.org/wiki/Moore%27s_law) keeps on giving
10 | - [Dennard scaling](https://en.wikipedia.org/wiki/Dennard_scaling) doesn't since about 2006
11 | - Power dissipation (switching) goes up with cube of clock speed
12 | - Static power dissipation starts to dominate at small scale
13 | - Trend towards multi-core
14 | - Extreme end is GPU/TPU
15 | 
16 | 
17 | 
18 | [42 years of Microprocessor trend data (2018)](https://www.karlrupp.net/2018/02/42-years-of-microprocessor-trend-data/)
19 | 
20 | 
21 | ## Power is Important
22 | 
23 | 
24 | - Cooling for integrity (run at 9GHz with liquid nitrogen)
25 | - Battery (mobile)
26 | - Cloud computing power costs (including cooling)
27 |   - [arctic data centres](https://www.bbc.co.uk/news/technology-40922048)
28 |   - [underwater data centres](https://www.bbc.co.uk/news/technology-44368813)
29 | - [Bitcoin is expensive](https://www.bbc.co.uk/news/technology-56012952)
30 | 
31 | 
32 | 
33 | ## Virtualisation vs Parallelisation
34 | 
35 | - Opposite directions
36 | - Number of linear clock cycles not so important
37 | - Some tasks can effectively be parallelised, some can't
38 | - Send the program to the data: google search
39 | - Remember [Amdahl's law](https://en.wikipedia.org/wiki/Amdahl%27s_law)
40 | 
41 | 
42 | ## Cloud Computing
43 | 
44 | - http v1.1 (1997) multiple names for one IP address
45 | - virtualisation vs timesharing
46 | - docker images: multiple machines on same physical machine
47 | 
48 | 
49 | ## Apple M1
50 | 
51 | [How Apple Just Changed the Entire Industry (2020)](https://www.youtube.com/watch?v=OuF9weSkS68)
52 | 
53 | 
54 | 


--------------------------------------------------------------------------------
/prog/arch_trends/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_1_progblack_2021/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/assessment_1_progblack_2021/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_2_prog_1819/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_2_prog_1819_marking/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # Marking Programming Summative 2
  4 | 
  5 | ---
  6 | 
  7 | ## Reminder: Exercise Outline
  8 | 
  9 | - Submission by 14:00 Thursday 2/5/2019
 10 | - Return after exam period
 11 | - Contributes 55% of module marks
 12 | - Includes peer review feedback which you will be allocated
 13 | - Peer reviews need to be submitted by 14:00 9/5/2019
 14 | - Quality of your peer reviews contribute 5% to your module mark
 15 | 
 16 | ---
 17 | 
 18 | ## Submission
 19 | 
 20 | Source code (all zipped)
 21 | 
 22 | - HTML and CSS and any media
 23 | - Client and server side JavaScript
 24 | - package.json including test and pretest scripts
 25 | - .eslintrc 
 26 | - jest test cases e.g. app.test.js
 27 | - README.md explaining how to use the site and API
 28 | 
 29 | Should not include `node_modules` in submission
 30 | 
 31 | ---
 32 | 
 33 | ## Assessment Criteria
 34 | 
 35 | Equally weighted
 36 | 
 37 | - Client-side functionality
 38 | - Client-side quality
 39 | - Server-side functionality
 40 | - Server-side quality
 41 | - Extensions
 42 | 
 43 | ---
 44 | 
 45 | ## Client-side functionality criteria
 46 | 
 47 | - User Experience (UX)
 48 |   - Professional appearance
 49 |   - Appropriate, consistent styling
 50 |   - Minimal interaction required (clicks, keypresses)
 51 |   
 52 | ---
 53 | 
 54 | - App complexity
 55 |   - Complexity of data: number of entities; attributes; relationships
 56 |   - Complexity of interaction: list; add; edit; verify
 57 | - 'Single page' style: asynchronous updates
 58 |   - Requests should be sent via fetch. Check XHR requests in devtools > Network
 59 | 
 60 | ---
 61 | 
 62 | ## Client-side quality criteria
 63 | 
 64 | - Standards compliant (HTML5)
 65 |   - Check with <https://validator.w3.org/>
 66 | - Responsive to different viewport sizes
 67 |   - Collapsing navbar (turns into hamburger)
 68 |   - Grid layout
 69 |   - Check with [mobile device simulation](https://developers.google.com/web/tools/chrome-devtools/device-mode/)
 70 |   
 71 | ---
 72 | 
 73 | - Gracefully handles server disconnection
 74 |   - Stop server after loading page
 75 |   - Check for sensible messages
 76 |   - What happens when it starts again?
 77 | - Web site documentation (README.md)
 78 |   - Does not have to be extensive: user instructions
 79 | ---
 80 | 
 81 | ## Server-side functionality criteria
 82 | 
 83 | - More than one entity type
 84 |   - Entities correspond with client-side
 85 | - Installs with `npm install`
 86 | - Starts with `npm start`
 87 | 
 88 | ---
 89 | 
 90 | - REST API provides each entity with appropriate GET/POST methods
 91 |   - consistent API structure
 92 |   - GET only reads, POST only writes
 93 |   - POST has authentication
 94 |   - GET to list/search, returns list of minimal details
 95 |   - GET with ID (query encoded or in path) has more details, including relationships
 96 | 
 97 | ---
 98 | 
 99 | ## Server-side quality criteria
100 | 
101 | - Successful eslint (run with `npm pretest`)
102 |   - Lint rules at least those used in first assigment
103 |   - No problems reported
104 | - API documentation (README.md)
105 |   - Compare with e.g. [twitter API docs](https://developer.twitter.com/en/docs/api-reference-index)
106 | 
107 | ---
108 | 
109 | - Successful jest tests with good coverage (run with `npm test`)
110 |   - All tests passed
111 |   - Black box coverage: ranges of inputs
112 |   - Valid and invalid (e.g. missing parameters)
113 |   - Code coverage i.e. all branches executes
114 | - Testing includes content-type and HTTP code
115 | 
116 | ---
117 | 
118 | ## Extensions criteria
119 | 
120 | - Successful cloud deployment
121 |   - Works on remote server with same functionality
122 |   - Client and REST API work
123 | - Successful integration with remote web service
124 |   - Adds value 
125 |   - Appropriate mocking during testing
126 |   - Copes with service remote service being down (graceful degradation)
127 | 
128 | 


--------------------------------------------------------------------------------
/prog/assessment_2_prog_1819_marking/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Marking Programming Summative 2
  3 | 
  4 | 
  5 | ## Reminder: Exercise Outline
  6 | 
  7 | - Submission by 14:00 Thursday 2/5/2019
  8 | - Return after exam period
  9 | - Contributes 55% of module marks
 10 | - Includes peer review feedback which you will be allocated
 11 | - Peer reviews need to be submitted by 14:00 9/5/2019
 12 | - Quality of your peer reviews contribute 5% to your module mark
 13 | 
 14 | 
 15 | ## Submission
 16 | 
 17 | Source code (all zipped)
 18 | 
 19 | - HTML and CSS and any media
 20 | - Client and server side JavaScript
 21 | - package.json including test and pretest scripts
 22 | - .eslintrc 
 23 | - jest test cases e.g. app.test.js
 24 | - README.md explaining how to use the site and API
 25 | 
 26 | Should not include `node_modules` in submission
 27 | 
 28 | 
 29 | ## Assessment Criteria
 30 | 
 31 | Equally weighted
 32 | 
 33 | - Client-side functionality
 34 | - Client-side quality
 35 | - Server-side functionality
 36 | - Server-side quality
 37 | - Extensions
 38 | 
 39 | 
 40 | ## Client-side functionality criteria
 41 | 
 42 | - User Experience (UX)
 43 |   - Professional appearance
 44 |   - Appropriate, consistent styling
 45 |   - Minimal interaction required (clicks, keypresses)
 46 |   
 47 | 
 48 | - App complexity
 49 |   - Complexity of data: number of entities; attributes; relationships
 50 |   - Complexity of interaction: list; add; edit; verify
 51 | - 'Single page' style: asynchronous updates
 52 |   - Requests should be sent via fetch. Check XHR requests in devtools > Network
 53 | 
 54 | 
 55 | ## Client-side quality criteria
 56 | 
 57 | - Standards compliant (HTML5)
 58 |   - Check with <https://validator.w3.org/>
 59 | - Responsive to different viewport sizes
 60 |   - Collapsing navbar (turns into hamburger)
 61 |   - Grid layout
 62 |   - Check with [mobile device simulation](https://developers.google.com/web/tools/chrome-devtools/device-mode/)
 63 |   
 64 | 
 65 | - Gracefully handles server disconnection
 66 |   - Stop server after loading page
 67 |   - Check for sensible messages
 68 |   - What happens when it starts again?
 69 | - Web site documentation (README.md)
 70 |   - Does not have to be extensive: user instructions
 71 | 
 72 | ## Server-side functionality criteria
 73 | 
 74 | - More than one entity type
 75 |   - Entities correspond with client-side
 76 | - Installs with `npm install`
 77 | - Starts with `npm start`
 78 | 
 79 | 
 80 | - REST API provides each entity with appropriate GET/POST methods
 81 |   - consistent API structure
 82 |   - GET only reads, POST only writes
 83 |   - POST has authentication
 84 |   - GET to list/search, returns list of minimal details
 85 |   - GET with ID (query encoded or in path) has more details, including relationships
 86 | 
 87 | 
 88 | ## Server-side quality criteria
 89 | 
 90 | - Successful eslint (run with `npm pretest`)
 91 |   - Lint rules at least those used in first assigment
 92 |   - No problems reported
 93 | - API documentation (README.md)
 94 |   - Compare with e.g. [twitter API docs](https://developer.twitter.com/en/docs/api-reference-index)
 95 | 
 96 | 
 97 | - Successful jest tests with good coverage (run with `npm test`)
 98 |   - All tests passed
 99 |   - Black box coverage: ranges of inputs
100 |   - Valid and invalid (e.g. missing parameters)
101 |   - Code coverage i.e. all branches executes
102 | - Testing includes content-type and HTTP code
103 | 
104 | 
105 | ## Extensions criteria
106 | 
107 | - Successful cloud deployment
108 |   - Works on remote server with same functionality
109 |   - Client and REST API work
110 | - Successful integration with remote web service
111 |   - Adds value 
112 |   - Appropriate mocking during testing
113 |   - Copes with service remote service being down (graceful degradation)
114 | 
115 | 


--------------------------------------------------------------------------------
/prog/assessment_2_prog_1819_marking/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_2_prog_1920/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/assessment_2_prog_1920/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_2_progblack_2021/README.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/assessment_2_progblack_2021/README.pdf


--------------------------------------------------------------------------------
/prog/assessment_2_progblack_2021/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_2_progblack_2021/md2pdf.sh:
--------------------------------------------------------------------------------
1 | ../../md2pdf.sh


--------------------------------------------------------------------------------
/prog/assessment_2_progblack_ideas/PITCHME.md:
--------------------------------------------------------------------------------
  1 | # Introduction to Assignment 2 {data-background-color=#7E317B}
  2 | 
  3 | ---
  4 | 
  5 | ## Summary
  6 | 
  7 | - This is not the assignment specification
  8 | - General idea
  9 | - Skills to develop
 10 | - Things to do
 11 |   - Contribute to Open Source Software
 12 |   - Take part in a (collaborative) competition
 13 |   - Take part in a hackathon
 14 | 
 15 | ---
 16 | 
 17 | ## This is not the assignment specification
 18 | 
 19 | - That will come later
 20 | - This is to give you time to think/research about what you want to do
 21 | 
 22 | ---
 23 | 
 24 | ## General idea
 25 | 
 26 | ::: incremental
 27 | 
 28 | - You choose an area to develop and apply your skills
 29 | - Be collaborative
 30 | - Make a contribution
 31 | - Record your progress (with git)
 32 | - Assessed by reflective journal
 33 | 
 34 | :::
 35 | 
 36 | ---
 37 | 
 38 | # Skills to develop {data-background-color=#00AEEF}
 39 | 
 40 | - These are examples only
 41 | - Keep track of your progress
 42 | - You could write a learning tutorial as a contribution
 43 | 
 44 | 
 45 | 
 46 | ---
 47 | 
 48 | ## JavaScript Skills
 49 | 
 50 | ::: incremental
 51 | 
 52 | - [TypeScript](https://www.typescriptlang.org/)
 53 | - [React](https://reactjs.org/) or [Vue](https://vuejs.org/)
 54 | - [Progressive Web Apps](https://web.dev/progressive-web-apps/)
 55 | - [d3](https://d3js.org/) with [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
 56 | - [p5](https://p5js.org/) and [openprocessing](https://www.openprocessing.org/)
 57 | - [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) / [WebAudio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) / [Other APIs](https://developer.mozilla.org/en-US/docs/Web/API)
 58 | - [node-RED](https://nodered.org/)
 59 | - Something else from [State of JS](https://2019.stateofjs.com/overview/)
 60 | 
 61 | :::
 62 | 
 63 | ---
 64 | 
 65 | ## Non-JavaScript Skills
 66 | 
 67 | ::: incremental
 68 | 
 69 | - [Django](https://www.djangoproject.com/)
 70 | - [Continuous Integration (CI/CD)](https://www.atlassian.com/continuous-delivery/continuous-integration)
 71 | - Cloud platforms ([AWS](https://aws.amazon.com/) / [Azure](https://azure.microsoft.com/en-gb/) / [Google](https://cloud.google.com/appengine) / [OpenShift](https://www.openshift.com/) / [IBM](https://cloud.ibm.com/docs))
 72 | - [Rust](https://www.rust-lang.org/)
 73 | 
 74 | :::
 75 | 
 76 | ---
 77 | 
 78 | # Things to do {data-background-color=#00AEEF}
 79 | 
 80 | ---
 81 | 
 82 | ## Contribute to Open Source Software
 83 | 
 84 | ::: incremental
 85 | - Choose your favourite project
 86 | - Pick from a [list of things up for grabs](https://up-for-grabs.net/#/) for [first timers](https://www.firsttimersonly.com/)
 87 | - [Code for social good](https://app.code4socialgood.org/project/list/projects)
 88 | :::
 89 | 
 90 | ---
 91 | 
 92 | ## [Don't need to commit code](https://opensource.guide/how-to-contribute/) 
 93 | 
 94 | ::: incremental
 95 | - Review/ translate docs and help
 96 | - Issue gardening (remove duplicates)
 97 | - Answer questions on forums e.g. StackOverflow
 98 | - Make a video of installation process
 99 | :::
100 | 
101 | ---
102 | 
103 | ## Take part in a (collaborative) competition
104 | 
105 | <https://www.showcode.io/unicode/>
106 | 
107 | ---
108 | 
109 | ## Take part in a hackathon
110 | 
111 | <https://hack.athon.uk/>
112 | 
113 | ---
114 | 
115 | # Or do your own thing {data-background-color=#00AEEF}
116 | 
117 | - As long as it is collaborative
118 | 
119 | ---
120 | 
121 | ## You don't need to start it now
122 | 
123 | :::incremental
124 | 
125 | - Handed out in Week 11 (first week of next term)
126 | - Handed in end of Easter vacation
127 | - You might like to thing about it
128 | 
129 | 
130 | :::
131 | 


--------------------------------------------------------------------------------
/prog/assessment_2_progblack_ideas/README.md:
--------------------------------------------------------------------------------
  1 | # Introduction to Assignment 2 
  2 | 
  3 | 
  4 | ## Summary
  5 | 
  6 | - This is not the assignment specification
  7 | - General idea
  8 | - Skills to develop
  9 | - Things to do
 10 |   - Contribute to Open Source Software
 11 |   - Take part in a (collaborative) competition
 12 |   - Take part in a hackathon
 13 | 
 14 | 
 15 | ## This is not the assignment specification
 16 | 
 17 | - That will come later
 18 | - This is to give you time to think/research about what you want to do
 19 | 
 20 | 
 21 | ## General idea
 22 | 
 23 | 
 24 | - You choose an area to develop and apply your skills
 25 | - Be collaborative
 26 | - Make a contribution
 27 | - Record your progress (with git)
 28 | - Assessed by reflective journal
 29 | 
 30 | 
 31 | 
 32 | # Skills to develop 
 33 | 
 34 | - These are examples only
 35 | - Keep track of your progress
 36 | - You could write a learning tutorial as a contribution
 37 | 
 38 | 
 39 | 
 40 | 
 41 | ## JavaScript Skills
 42 | 
 43 | 
 44 | - [TypeScript](https://www.typescriptlang.org/)
 45 | - [React](https://reactjs.org/) or [Vue](https://vuejs.org/)
 46 | - [Progressive Web Apps](https://web.dev/progressive-web-apps/)
 47 | - [d3](https://d3js.org/) with [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
 48 | - [p5](https://p5js.org/) and [openprocessing](https://www.openprocessing.org/)
 49 | - [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) / [WebAudio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) / [Other APIs](https://developer.mozilla.org/en-US/docs/Web/API)
 50 | - [node-RED](https://nodered.org/)
 51 | - Something else from [State of JS](https://2019.stateofjs.com/overview/)
 52 | 
 53 | 
 54 | 
 55 | ## Non-JavaScript Skills
 56 | 
 57 | 
 58 | - [Django](https://www.djangoproject.com/)
 59 | - [Continuous Integration (CI/CD)](https://www.atlassian.com/continuous-delivery/continuous-integration)
 60 | - Cloud platforms ([AWS](https://aws.amazon.com/) / [Azure](https://azure.microsoft.com/en-gb/) / [Google](https://cloud.google.com/appengine) / [OpenShift](https://www.openshift.com/) / [IBM](https://cloud.ibm.com/docs))
 61 | - [Rust](https://www.rust-lang.org/)
 62 | 
 63 | 
 64 | 
 65 | # Things to do 
 66 | 
 67 | 
 68 | ## Contribute to Open Source Software
 69 | 
 70 | - Choose your favourite project
 71 | - Pick from a [list of things up for grabs](https://up-for-grabs.net/#/) for [first timers](https://www.firsttimersonly.com/)
 72 | - [Code for social good](https://app.code4socialgood.org/project/list/projects)
 73 | 
 74 | 
 75 | ## [Don't need to commit code](https://opensource.guide/how-to-contribute/) 
 76 | 
 77 | - Review/ translate docs and help
 78 | - Issue gardening (remove duplicates)
 79 | - Answer questions on forums e.g. StackOverflow
 80 | - Make a video of installation process
 81 | 
 82 | 
 83 | ## Take part in a (collaborative) competition
 84 | 
 85 | <https://www.showcode.io/unicode/>
 86 | 
 87 | 
 88 | ## Take part in a hackathon
 89 | 
 90 | <https://hack.athon.uk/>
 91 | 
 92 | 
 93 | # Or do your own thing 
 94 | 
 95 | - As long as it is collaborative
 96 | 
 97 | 
 98 | ## You don't need to start it now
 99 | 
100 | 
101 | - Handed out in Week 11 (first week of next term)
102 | - Handed in end of Easter vacation
103 | - You might like to thing about it
104 | 
105 | 
106 | 


--------------------------------------------------------------------------------
/prog/assessment_2_progblack_ideas/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_d3/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/assessment_d3/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_p5/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # COMP1101 Programming Summative Assessment 1
  4 | 
  5 | ---
  6 | 
  7 | ## Term 1 Programming Exercise Outline
  8 | 
  9 | - Submission by 14:00 Thursday 17/1/2019
 10 | - Return by 14/2/2019
 11 | - Contributes 35% of module marks
 12 | - Includes peer review feedback which you will be allocated
 13 | - Peer reviews need to be submitted by 14:00 31/1/2019
 14 | - Quality of your peer reviews contribute 5% to your module mark
 15 | 
 16 | ---
 17 | 
 18 | ## Subject-specific Knowledge
 19 | 
 20 | - Interaction between JavaScript progams and the Document Object Model (DOM)
 21 | - Using control statements to loop and make decisions.
 22 | - An understanding of the nature of imperative programming in the object-oriented style.
 23 | - A knowledge and understanding of good programming practice (for example, reuse, documentation and style)
 24 | 
 25 | ---
 26 | 
 27 | ## Key Skills
 28 | 
 29 | - an ability to recognise and apply the principles of abstraction and modelling
 30 | 
 31 | ---
 32 | 
 33 | ## Tasks
 34 | 
 35 | - Choose a sketch from [openprocessing.org](https://www.openprocessing.org/)
 36 | - Adapt it into a reusable component using JavaScript classes
 37 |     - Appropriate constructor
 38 |     - Get and set methods for properties
 39 |     - `draw` method with optional p5.Renderer as parameter
 40 | - Build an example page with properties controlled by form controls
 41 | - Write documentation of your code using [Markdown](https://guides.github.com/features/mastering-markdown/)
 42 | 
 43 | ---
 44 | 
 45 | ## Submission
 46 | 
 47 | - Submit via duo
 48 |    1. a .zip file containing your code and documentation
 49 |    2. a .zip file containing the original code
 50 | - Make a pull request to https://github.com/stevenaeola/Durham-p5-lib with your new component in a subdirectory
 51 | 
 52 | ---
 53 | 
 54 | ## Marking Criteria
 55 | 
 56 | Weighted equally
 57 | 
 58 | - Usability of code
 59 | - Development of original 
 60 | - Quality of example
 61 | - Quality of documentation
 62 | - Code quality
 63 | 
 64 | ---
 65 | 
 66 | ## Usability of code
 67 | 
 68 | - Appropriate parameterisation including defaults
 69 | - Encapsulation (private fields where appropriate)
 70 | - Useful methods including `draw`
 71 | 
 72 | ---
 73 | 
 74 | ## Development of original
 75 | 
 76 | - Original code to be submitted as well as final version
 77 | - Work done in refactoring code to class
 78 | - Work done in useful parameterisation
 79 | - Work done in extending scope 
 80 | 
 81 | ---
 82 | 
 83 | ## Quality of example
 84 | 
 85 | - HTML page is valid
 86 | - Appropriate on-page instructions
 87 | - Appropriate on-page controls (form)
 88 | 
 89 | ---
 90 | 
 91 | ## Quality of documentation
 92 | 
 93 | - All methods and parameters explained (including constructor)
 94 | - Explanation of example
 95 | - Source of initial code acknowledged (including licence)
 96 | 
 97 | ---
 98 | 
 99 | ## Code quality: ESLint
100 | 
101 | Apply rules from [eslint.org/docs/rules/](https://eslint.org/docs/rules/):
102 | 
103 | - Possible Errors
104 | - Best Practices
105 | - Variables
106 | - Stylistic Issues
107 | - ECMAScript 6
108 | 
109 | 
110 | 
111 | 


--------------------------------------------------------------------------------
/prog/assessment_p5/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # COMP1101 Programming Summative Assessment 1
 3 | 
 4 | 
 5 | ## Term 1 Programming Exercise Outline
 6 | 
 7 | - Submission by 14:00 Thursday 17/1/2019
 8 | - Return by 14/2/2019
 9 | - Contributes 35% of module marks
10 | - Includes peer review feedback which you will be allocated
11 | - Peer reviews need to be submitted by 14:00 31/1/2019
12 | - Quality of your peer reviews contribute 5% to your module mark
13 | 
14 | 
15 | ## Subject-specific Knowledge
16 | 
17 | - Interaction between JavaScript progams and the Document Object Model (DOM)
18 | - Using control statements to loop and make decisions.
19 | - An understanding of the nature of imperative programming in the object-oriented style.
20 | - A knowledge and understanding of good programming practice (for example, reuse, documentation and style)
21 | 
22 | 
23 | ## Key Skills
24 | 
25 | - an ability to recognise and apply the principles of abstraction and modelling
26 | 
27 | 
28 | ## Tasks
29 | 
30 | - Choose a sketch from [openprocessing.org](https://www.openprocessing.org/)
31 | - Adapt it into a reusable component using JavaScript classes
32 |     - Appropriate constructor
33 |     - Get and set methods for properties
34 |     - `draw` method with optional p5.Renderer as parameter
35 | - Build an example page with properties controlled by form controls
36 | - Write documentation of your code using [Markdown](https://guides.github.com/features/mastering-markdown/)
37 | 
38 | 
39 | ## Submission
40 | 
41 | - Submit via duo
42 |    1. a .zip file containing your code and documentation
43 |    2. a .zip file containing the original code
44 | - Make a pull request to https://github.com/stevenaeola/Durham-p5-lib with your new component in a subdirectory
45 | 
46 | 
47 | ## Marking Criteria
48 | 
49 | Weighted equally
50 | 
51 | - Usability of code
52 | - Development of original 
53 | - Quality of example
54 | - Quality of documentation
55 | - Code quality
56 | 
57 | 
58 | ## Usability of code
59 | 
60 | - Appropriate parameterisation including defaults
61 | - Encapsulation (private fields where appropriate)
62 | - Useful methods including `draw`
63 | 
64 | 
65 | ## Development of original
66 | 
67 | - Original code to be submitted as well as final version
68 | - Work done in refactoring code to class
69 | - Work done in useful parameterisation
70 | - Work done in extending scope 
71 | 
72 | 
73 | ## Quality of example
74 | 
75 | - HTML page is valid
76 | - Appropriate on-page instructions
77 | - Appropriate on-page controls (form)
78 | 
79 | 
80 | ## Quality of documentation
81 | 
82 | - All methods and parameters explained (including constructor)
83 | - Explanation of example
84 | - Source of initial code acknowledged (including licence)
85 | 
86 | 
87 | ## Code quality: ESLint
88 | 
89 | Apply rules from [eslint.org/docs/rules/](https://eslint.org/docs/rules/):
90 | 
91 | - Possible Errors
92 | - Best Practices
93 | - Variables
94 | - Stylistic Issues
95 | - ECMAScript 6
96 | 
97 | 
98 | 
99 | 


--------------------------------------------------------------------------------
/prog/assessment_p5/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_p5_2/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/assessment_resit_1819/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/code_quality/PITCHME.md:
--------------------------------------------------------------------------------
 1 | # Code Quality {data-background-color=#7E317B}
 2 | 
 3 | ---
 4 | 
 5 | ## Summary
 6 | 
 7 | - ESLint
 8 | - Code review best practice
 9 | - Getting the most out of VSCode
10 | 
11 | ---
12 | 
13 | ## ESLint
14 | 
15 | - Check coding standards are applied
16 | - Install with `npm install -g eslint`
17 | - Use a particular set of rules e.g. standard (need to install)
18 | - Customise (see coursework specification)
19 | - Run with `eslint file.js`
20 | - Beware [bikeshedding](https://exceptionnotfound.net/bikeshedding-the-daily-software-anti-pattern/) over standards
21 | 
22 | ---
23 | 
24 | ## Recommended style
25 | 
26 | Put this in .eslintrc.js
27 | ```
28 | module.exports = {
29 |     "extends": "standard",
30 |     "rules": {
31 |       "semi": [2, "always"],
32 |       "indent": "off"
33 |     }
34 | };
35 | ```
36 | ---
37 | 
38 | ## ESLint tooling
39 | 
40 | - Consider [adding a git pre-commit hook](https://levelup.gitconnected.com/how-to-run-eslint-using-pre-commit-hook-25984fbce17e)
41 | - Install the [ESLint plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint):
42 |   - identify and auto-fix 
43 | 
44 | 
45 | ## Code review best practice
46 | 
47 | [Advice from Michaela Greiler](https://www.michaelagreiler.com/respectful-constructive-code-review-feedback/)
48 | 
49 | ---
50 | 
51 | ## Getting the most out of VSCode
52 | 
53 | - [Advanced code editing](https://code.visualstudio.com/docs/introvideos/codeediting)
54 | - Auto-fix for ESLint problems
55 | - [Live share](https://code.visualstudio.com/learn/collaboration/live-share)
56 | 
57 | ---
58 | 
59 | ## Next time 
60 | 
61 | - Is the last lecture
62 | - I will talk about the second assignment
63 | - If you want me to go over anything then let me know
64 | - Or come and see me in my office hour (see staff contacts)
65 | 
66 | 
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/prog/code_quality/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme : simple
2 | theme-override : layout.css


--------------------------------------------------------------------------------
/prog/code_quality/README.md:
--------------------------------------------------------------------------------
 1 | # Code Quality 
 2 | 
 3 | 
 4 | ## Summary
 5 | 
 6 | - ESLint
 7 | - Code review best practice
 8 | - Getting the most out of VSCode
 9 | 
10 | 
11 | ## ESLint
12 | 
13 | - Check coding standards are applied
14 | - Install with `npm install -g eslint`
15 | - Use a particular set of rules e.g. standard (need to install)
16 | - Customise (see coursework specification)
17 | - Run with `eslint file.js`
18 | - Beware [bikeshedding](https://exceptionnotfound.net/bikeshedding-the-daily-software-anti-pattern/) over standards
19 | 
20 | 
21 | ## Recommended style
22 | 
23 | Put this in .eslintrc.js
24 | ```
25 | module.exports = {
26 |     "extends": "standard",
27 |     "rules": {
28 |       "semi": [2, "always"],
29 |       "indent": "off"
30 |     }
31 | };
32 | ```
33 | 
34 | ## ESLint tooling
35 | 
36 | - Consider [adding a git pre-commit hook](https://levelup.gitconnected.com/how-to-run-eslint-using-pre-commit-hook-25984fbce17e)
37 | - Install the [ESLint plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint):
38 |   - identify and auto-fix 
39 | 
40 | 
41 | ## Code review best practice
42 | 
43 | [Advice from Michaela Greiler](https://www.michaelagreiler.com/respectful-constructive-code-review-feedback/)
44 | 
45 | 
46 | ## Getting the most out of VSCode
47 | 
48 | - [Advanced code editing](https://code.visualstudio.com/docs/introvideos/codeediting)
49 | - Auto-fix for ESLint problems
50 | - [Live share](https://code.visualstudio.com/learn/collaboration/live-share)
51 | 
52 | 
53 | ## Next time 
54 | 
55 | - Is the last lecture
56 | - I will talk about the second assignment
57 | - If you want me to go over anything then let me know
58 | - Or come and see me in my office hour (see staff contacts)
59 | 
60 | 
61 | 
62 | 
63 | 


--------------------------------------------------------------------------------
/prog/code_quality/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/code_quality/instruments/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     "extends": "standard",
3 |     "rules": {
4 |       "semi": [2, "always"],
5 |       "indent": "off"
6 |     }
7 | };
8 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/barchart_d3.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://d3js.org/d3.v5.js"></script>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="720" height="500">
 8 |       <rect x="10" y="50"  height="60"></rect>
 9 |       <rect x="10" y="150" height="60"></rect>
10 |       <rect x="10" y="250" height="60"></rect>
11 |     </svg>
12 |     <script src="barchart_d3.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/barchart_d3.js:
--------------------------------------------------------------------------------
 1 | /** define our data */
 2 | var instruments = [{ name: 'concertina', number: 2 },
 3 |                { name: 'piano', number: 5 },
 4 |                { name: 'harp', number: 25 }];
 5 | 
 6 | /** make the viz
 7 |  - @param scale x multiplier
 8 | */
 9 | function doit (scale) {
10 |     d3.select('body')
11 |         .selectAll('rect')
12 |         .data(instruments)
13 |         .attr('width', function (d) { console.log('name ' + d.name); return d.number * scale; });
14 | }
15 | 
16 | doit(10);
17 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/barchart_d3.js.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>JSDoc: Source: barchart_d3.js</title>
 6 | 
 7 |     <script src="scripts/prettify/prettify.js"> </script>
 8 |     <script src="scripts/prettify/lang-css.js"> </script>
 9 |     <!--[if lt IE 9]>
10 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 |     <![endif]-->
12 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
13 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
14 | </head>
15 | 
16 | <body>
17 | 
18 | <div id="main">
19 | 
20 |     <h1 class="page-title">Source: barchart_d3.js</h1>
21 | 
22 |     
23 | 
24 | 
25 | 
26 |     
27 |     <section>
28 |         <article>
29 |             <pre class="prettyprint source linenums"><code>/** define our data */
30 | instruments = [{name:"concertina", number: 2},
31 |                {name:"piano", number: 5},
32 |                {name:"harp", number :25}]
33 | 
34 | /** make the viz 
35 |  - @param scale x multiplier
36 | */
37 | function doit(scale){
38 |     d3.select("body")
39 |         .selectAll("rect")
40 |         .data(instruments)
41 |         .attr("width", function(d) { console.log("name " + d.name);return d.number*scale; })
42 | }
43 | 
44 | doit(10)
45 | 
46 | 
47 | </code></pre>
48 |         </article>
49 |     </section>
50 | 
51 | 
52 | 
53 | 
54 | </div>
55 | 
56 | <nav>
57 |     <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#doit">doit</a></li><li><a href="global.html#instruments">instruments</a></li></ul>
58 | </nav>
59 | 
60 | <br class="clear">
61 | 
62 | <footer>
63 |     Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Fri Dec 13 2019 15:45:33 GMT+0000 (Greenwich Mean Time)
64 | </footer>
65 | 
66 | <script> prettyPrint(); </script>
67 | <script src="scripts/linenumber.js"> </script>
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Bold-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Bold-webfont.eot


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Bold-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Bold-webfont.woff


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-BoldItalic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-BoldItalic-webfont.eot


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-BoldItalic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-BoldItalic-webfont.woff


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Italic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Italic-webfont.eot


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Italic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Italic-webfont.woff


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Light-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Light-webfont.eot


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Light-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Light-webfont.woff


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-LightItalic-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-LightItalic-webfont.eot


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-LightItalic-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-LightItalic-webfont.woff


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Regular-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Regular-webfont.eot


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/fonts/OpenSans-Regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/code_quality/instruments/out/fonts/OpenSans-Regular-webfont.woff


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>JSDoc: Home</title>
 6 | 
 7 |     <script src="scripts/prettify/prettify.js"> </script>
 8 |     <script src="scripts/prettify/lang-css.js"> </script>
 9 |     <!--[if lt IE 9]>
10 |       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11 |     <![endif]-->
12 |     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
13 |     <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
14 | </head>
15 | 
16 | <body>
17 | 
18 | <div id="main">
19 | 
20 |     <h1 class="page-title">Home</h1>
21 | 
22 |     
23 | 
24 | 
25 | 
26 |     
27 | 
28 | 
29 |     <h3> </h3>
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 |     
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | </div>
51 | 
52 | <nav>
53 |     <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#doit">doit</a></li><li><a href="global.html#instruments">instruments</a></li></ul>
54 | </nav>
55 | 
56 | <br class="clear">
57 | 
58 | <footer>
59 |     Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Fri Dec 13 2019 15:45:33 GMT+0000 (Greenwich Mean Time)
60 | </footer>
61 | 
62 | <script> prettyPrint(); </script>
63 | <script src="scripts/linenumber.js"> </script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/scripts/linenumber.js:
--------------------------------------------------------------------------------
 1 | /*global document */
 2 | (() => {
 3 |     const source = document.getElementsByClassName('prettyprint source linenums');
 4 |     let i = 0;
 5 |     let lineNumber = 0;
 6 |     let lineId;
 7 |     let lines;
 8 |     let totalLines;
 9 |     let anchorHash;
10 | 
11 |     if (source && source[0]) {
12 |         anchorHash = document.location.hash.substring(1);
13 |         lines = source[0].getElementsByTagName('li');
14 |         totalLines = lines.length;
15 | 
16 |         for (; i < totalLines; i++) {
17 |             lineNumber++;
18 |             lineId = `line${lineNumber}`;
19 |             lines[i].id = lineId;
20 |             if (lineId === anchorHash) {
21 |                 lines[i].className += ' selected';
22 |             }
23 |         }
24 |     }
25 | })();
26 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/scripts/prettify/lang-css.js:
--------------------------------------------------------------------------------
1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n"]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
3 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/styles/prettify-jsdoc.css:
--------------------------------------------------------------------------------
  1 | /* JSDoc prettify.js theme */
  2 | 
  3 | /* plain text */
  4 | .pln {
  5 |   color: #000000;
  6 |   font-weight: normal;
  7 |   font-style: normal;
  8 | }
  9 | 
 10 | /* string content */
 11 | .str {
 12 |   color: #006400;
 13 |   font-weight: normal;
 14 |   font-style: normal;
 15 | }
 16 | 
 17 | /* a keyword */
 18 | .kwd {
 19 |   color: #000000;
 20 |   font-weight: bold;
 21 |   font-style: normal;
 22 | }
 23 | 
 24 | /* a comment */
 25 | .com {
 26 |   font-weight: normal;
 27 |   font-style: italic;
 28 | }
 29 | 
 30 | /* a type name */
 31 | .typ {
 32 |   color: #000000;
 33 |   font-weight: normal;
 34 |   font-style: normal;
 35 | }
 36 | 
 37 | /* a literal value */
 38 | .lit {
 39 |   color: #006400;
 40 |   font-weight: normal;
 41 |   font-style: normal;
 42 | }
 43 | 
 44 | /* punctuation */
 45 | .pun {
 46 |   color: #000000;
 47 |   font-weight: bold;
 48 |   font-style: normal;
 49 | }
 50 | 
 51 | /* lisp open bracket */
 52 | .opn {
 53 |   color: #000000;
 54 |   font-weight: bold;
 55 |   font-style: normal;
 56 | }
 57 | 
 58 | /* lisp close bracket */
 59 | .clo {
 60 |   color: #000000;
 61 |   font-weight: bold;
 62 |   font-style: normal;
 63 | }
 64 | 
 65 | /* a markup tag name */
 66 | .tag {
 67 |   color: #006400;
 68 |   font-weight: normal;
 69 |   font-style: normal;
 70 | }
 71 | 
 72 | /* a markup attribute name */
 73 | .atn {
 74 |   color: #006400;
 75 |   font-weight: normal;
 76 |   font-style: normal;
 77 | }
 78 | 
 79 | /* a markup attribute value */
 80 | .atv {
 81 |   color: #006400;
 82 |   font-weight: normal;
 83 |   font-style: normal;
 84 | }
 85 | 
 86 | /* a declaration */
 87 | .dec {
 88 |   color: #000000;
 89 |   font-weight: bold;
 90 |   font-style: normal;
 91 | }
 92 | 
 93 | /* a variable name */
 94 | .var {
 95 |   color: #000000;
 96 |   font-weight: normal;
 97 |   font-style: normal;
 98 | }
 99 | 
100 | /* a function name */
101 | .fun {
102 |   color: #000000;
103 |   font-weight: bold;
104 |   font-style: normal;
105 | }
106 | 
107 | /* Specify class=linenums on a pre to get line numbering */
108 | ol.linenums {
109 |   margin-top: 0;
110 |   margin-bottom: 0;
111 | }
112 | 


--------------------------------------------------------------------------------
/prog/code_quality/instruments/out/styles/prettify-tomorrow.css:
--------------------------------------------------------------------------------
  1 | /* Tomorrow Theme */
  2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
  3 | /* Pretty printing styles. Used with prettify.js. */
  4 | /* SPAN elements with the classes below are added by prettyprint. */
  5 | /* plain text */
  6 | .pln {
  7 |   color: #4d4d4c; }
  8 | 
  9 | @media screen {
 10 |   /* string content */
 11 |   .str {
 12 |     color: #718c00; }
 13 | 
 14 |   /* a keyword */
 15 |   .kwd {
 16 |     color: #8959a8; }
 17 | 
 18 |   /* a comment */
 19 |   .com {
 20 |     color: #8e908c; }
 21 | 
 22 |   /* a type name */
 23 |   .typ {
 24 |     color: #4271ae; }
 25 | 
 26 |   /* a literal value */
 27 |   .lit {
 28 |     color: #f5871f; }
 29 | 
 30 |   /* punctuation */
 31 |   .pun {
 32 |     color: #4d4d4c; }
 33 | 
 34 |   /* lisp open bracket */
 35 |   .opn {
 36 |     color: #4d4d4c; }
 37 | 
 38 |   /* lisp close bracket */
 39 |   .clo {
 40 |     color: #4d4d4c; }
 41 | 
 42 |   /* a markup tag name */
 43 |   .tag {
 44 |     color: #c82829; }
 45 | 
 46 |   /* a markup attribute name */
 47 |   .atn {
 48 |     color: #f5871f; }
 49 | 
 50 |   /* a markup attribute value */
 51 |   .atv {
 52 |     color: #3e999f; }
 53 | 
 54 |   /* a declaration */
 55 |   .dec {
 56 |     color: #f5871f; }
 57 | 
 58 |   /* a variable name */
 59 |   .var {
 60 |     color: #c82829; }
 61 | 
 62 |   /* a function name */
 63 |   .fun {
 64 |     color: #4271ae; } }
 65 | /* Use higher contrast and text-weight for printable form. */
 66 | @media print, projection {
 67 |   .str {
 68 |     color: #060; }
 69 | 
 70 |   .kwd {
 71 |     color: #006;
 72 |     font-weight: bold; }
 73 | 
 74 |   .com {
 75 |     color: #600;
 76 |     font-style: italic; }
 77 | 
 78 |   .typ {
 79 |     color: #404;
 80 |     font-weight: bold; }
 81 | 
 82 |   .lit {
 83 |     color: #044; }
 84 | 
 85 |   .pun, .opn, .clo {
 86 |     color: #440; }
 87 | 
 88 |   .tag {
 89 |     color: #006;
 90 |     font-weight: bold; }
 91 | 
 92 |   .atn {
 93 |     color: #404; }
 94 | 
 95 |   .atv {
 96 |     color: #060; } }
 97 | /* Style */
 98 | /*
 99 | pre.prettyprint {
100 |   background: white;
101 |   font-family: Consolas, Monaco, 'Andale Mono', monospace;
102 |   font-size: 12px;
103 |   line-height: 1.5;
104 |   border: 1px solid #ccc;
105 |   padding: 10px; }
106 | */
107 | 
108 | /* Specify class=linenums on a pre to get line numbering */
109 | ol.linenums {
110 |   margin-top: 0;
111 |   margin-bottom: 0; }
112 | 
113 | /* IE indents via margin-left */
114 | li.L0,
115 | li.L1,
116 | li.L2,
117 | li.L3,
118 | li.L4,
119 | li.L5,
120 | li.L6,
121 | li.L7,
122 | li.L8,
123 | li.L9 {
124 |   /* */ }
125 | 
126 | /* Alternate shading for lines */
127 | li.L1,
128 | li.L3,
129 | li.L5,
130 | li.L7,
131 | li.L9 {
132 |   /* */ }
133 | 


--------------------------------------------------------------------------------
/prog/code_quality/sunburst/README.md:
--------------------------------------------------------------------------------
 1 | # Sunburst
 2 | 
 3 | https://observablehq.com/@d3/sunburst@225
 4 | 
 5 | View this notebook in your browser by running a web server in this folder. For
 6 | example:
 7 | 
 8 | ~~~sh
 9 | python -m SimpleHTTPServer
10 | ~~~
11 | 
12 | Or, use the [Observable Runtime](https://github.com/observablehq/runtime) to
13 | import this module directly into your application. To npm install:
14 | 
15 | ~~~sh
16 | npm install @observablehq/runtime@4
17 | npm install https://api.observablehq.com/@d3/sunburst.tgz?v=3
18 | ~~~
19 | 
20 | Then, import your notebook and the runtime as:
21 | 
22 | ~~~js
23 | import {Runtime, Inspector} from "@observablehq/runtime";
24 | import define from "@d3/sunburst";
25 | ~~~
26 | 
27 | To log the value of the cell named “foo”:
28 | 
29 | ~~~js
30 | const runtime = new Runtime();
31 | const main = runtime.module(define);
32 | main.value("foo").then(value => console.log(value));
33 | ~~~
34 | 


--------------------------------------------------------------------------------
/prog/code_quality/sunburst/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <head>
 4 | <title>Sunburst</title>
 5 | <link rel="stylesheet" type="text/css" href="./inspector.css">
 6 |   <script src="https://d3js.org/d3.v5.js"></script>
 7 | </head>
 8 | <body>
 9 | 
10 |   <div id='holder'>
11 |     </div>
12 |   <script src="visualisation.js"></script>
13 | 
14 | </body>
15 | 
16 | 


--------------------------------------------------------------------------------
/prog/code_quality/sunburst/index.js:
--------------------------------------------------------------------------------
1 | export {default} from "./a601aba88046a626@225.js";
2 | 


--------------------------------------------------------------------------------
/prog/code_quality/sunburst/inspector.css:
--------------------------------------------------------------------------------
1 | :root{--syntax_normal:#1b1e23;--syntax_comment:#a9b0bc;--syntax_number:#20a5ba;--syntax_keyword:#c30771;--syntax_atom:#10a778;--syntax_string:#008ec4;--syntax_error:#ffbedc;--syntax_unknown_variable:#838383;--syntax_known_variable:#005f87;--syntax_matchbracket:#20bbfc;--syntax_key:#6636b4;--mono_fonts:82%/1.5 Menlo,Consolas,monospace}.observablehq--collapsed,.observablehq--expanded,.observablehq--function,.observablehq--gray,.observablehq--import,.observablehq--string:after,.observablehq--string:before{color:var(--syntax_normal)}.observablehq--collapsed,.observablehq--inspect a{cursor:pointer}.observablehq--field{text-indent:-1em;margin-left:1em}.observablehq--empty{color:var(--syntax_comment)}.observablehq--blue,.observablehq--keyword{color:#3182bd}.observablehq--forbidden,.observablehq--pink{color:#e377c2}.observablehq--orange{color:#e6550d}.observablehq--boolean,.observablehq--null,.observablehq--undefined{color:var(--syntax_atom)}.observablehq--bigint,.observablehq--date,.observablehq--green,.observablehq--number,.observablehq--regexp,.observablehq--symbol{color:var(--syntax_number)}.observablehq--index,.observablehq--key{color:var(--syntax_key)}.observablehq--prototype-key{color:#aaa}.observablehq--empty{font-style:oblique}.observablehq--purple,.observablehq--string{color:var(--syntax_string)}.observablehq--error,.observablehq--red{color:#e7040f}.observablehq--inspect{font:var(--mono_fonts);overflow-x:auto;display:block;white-space:pre}.observablehq--error .observablehq--inspect{word-break:break-all;white-space:pre-wrap}


--------------------------------------------------------------------------------
/prog/code_quality/sunburst/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@d3/sunburst",
 3 |   "main": "a601aba88046a626@225.js",
 4 |   "version": "225.0.0",
 5 |   "homepage": "https://observablehq.com/@d3/sunburst",
 6 |   "author": {
 7 |     "name": "D3",
 8 |     "url": "https://observablehq.com/@d3"
 9 |   },
10 |   "type": "module",
11 |   "peerDependencies": {
12 |     "@observablehq/runtime": "4"
13 |   }
14 | }


--------------------------------------------------------------------------------
/prog/comp1101_intro/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#6A246D
 2 | 
 3 | #  COMP1101 Programming (Black)
 4 | ## Introduction to the module
 5 | 
 6 | ---
 7 | 
 8 | ## Why choose this module (poll)?
 9 | 
10 | @ul
11 | - To become more like a professional programmer
12 | - To learn how to do cool things
13 | - To stretch yourself
14 | - Not just for the marks
15 | @ulend
16 | 
17 | ---?color=#6A246D
18 | 
19 | # What tools do developers use (poll)?
20 | 
21 | [...](https://www.jetbrains.com/lp/devecosystem-2020/) [...](https://www.jetbrains.com/lp/devecosystem-2019/)
22 | 
23 | ---
24 | 
25 | ## We will be learning
26 | 
27 | * Web front-end (including HTML, CSS, JavaScript)
28 | * Web back-end (including nodejs, REST API)
29 | * Collaboration tools (git) and processes (code review)
30 | * Automated testing (jest)
31 | 
32 | ---
33 | 
34 | ## Assessment
35 | 
36 | @ul
37 | - Two assignments 
38 | - No exam
39 | - First assignment: single-page app web site
40 |   - you choose what it does
41 |   - peer code review
42 | - Second assignment: contribute and collaborate
43 |   - you choose what you learn
44 |   - collaborate (open source, hackathon, competition)
45 |   - tell others about it (articles, blog, vlog)
46 | - See duo for deadlines and weights
47 | @ulend
48 | 
49 | ---
50 | 
51 | ## Gold vs Black
52 | 
53 | - Black is for more experienced programmers (e.g. with A level)
54 | - Both have the same fixed content
55 | - Gold second assignment = Black first assignment
56 | - Black has no content lectures second term: drop-in tutorials
57 | - Gold has more examples
58 | - You can choose which one
59 | 
60 | 
61 | ---
62 | 
63 | ## Self-assessment
64 | 
65 | - Questionnaire on duo (Module information)
66 | - Your score is only for your information
67 | - I will publish the score distributions to help you choose
68 | 
69 | ---
70 | 
71 | ## Teaching plan
72 | 
73 | - Two lectures a week by zoon term 1 (Wednesday 9:00, Friday 15:00)
74 | - One practical a week term 1 (see allocation on duo)
75 | - Office hours 1-2 Wedensday by zoom (see contacts on duo)
76 | - Term 2 drop-in tutorials: no lectures or practicals
77 | 
78 | ---
79 | 
80 | ## Examples
81 | 
82 | @ul
83 | - This is a practically motivated course
84 | - What should we do as an example?
85 | - Previously have done cheese, memes, hats
86 | - Come up with a suggestion in a group of three (breakout room)
87 | - Then we will have a vote (in fact 5)
88 | @ulend
89 | 
90 | ---?color=#a5c8d0 
91 | 
92 | # Next time
93 | 
94 | Version control with git
95 | 
96 | 


--------------------------------------------------------------------------------
/prog/comp1101_intro/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/comp1101_intro/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | #  COMP1101 Programming (Black)
 3 | ## Introduction to the module
 4 | 
 5 | 
 6 | ## Why choose this module (poll)?
 7 | 
 8 | - To become more like a professional programmer
 9 | - To learn how to do cool things
10 | - To stretch yourself
11 | - Not just for the marks
12 | 
13 | 
14 | # What tools do developers use (poll)?
15 | 
16 | [...](https://www.jetbrains.com/lp/devecosystem-2020/) [...](https://www.jetbrains.com/lp/devecosystem-2019/)
17 | 
18 | 
19 | ## We will be learning
20 | 
21 | * Web front-end (including HTML, CSS, JavaScript)
22 | * Web back-end (including nodejs, REST API)
23 | * Collaboration tools (git) and processes (code review)
24 | * Automated testing (jest)
25 | 
26 | 
27 | ## Assessment
28 | 
29 | - Two assignments 
30 | - No exam
31 | - First assignment: single-page app web site
32 |   - you choose what it does
33 |   - peer code review
34 | - Second assignment: contribute and collaborate
35 |   - you choose what you learn
36 |   - collaborate (open source, hackathon, competition)
37 |   - tell others about it (articles, blog, vlog)
38 | - See duo for deadlines and weights
39 | 
40 | 
41 | ## Gold vs Black
42 | 
43 | - Black is for more experienced programmers (e.g. with A level)
44 | - Both have the same fixed content
45 | - Gold second assignment = Black first assignment
46 | - Black has no content lectures second term: drop-in tutorials
47 | - Gold has more examples
48 | - You can choose which one
49 | 
50 | 
51 | 
52 | ## Self-assessment
53 | 
54 | - Questionnaire on duo (Module information)
55 | - Your score is only for your information
56 | - I will publish the score distributions to help you choose
57 | 
58 | 
59 | ## Teaching plan
60 | 
61 | - Two lectures a week by zoon term 1 (Wednesday 9:00, Friday 15:00)
62 | - One practical a week term 1 (see allocation on duo)
63 | - Office hours 1-2 Wedensday by zoom (see contacts on duo)
64 | - Term 2 drop-in tutorials: no lectures or practicals
65 | 
66 | 
67 | ## Examples
68 | 
69 | - This is a practically motivated course
70 | - What should we do as an example?
71 | - Previously have done cheese, memes, hats
72 | - Come up with a suggestion in a group of three (breakout room)
73 | - Then we will have a vote (in fact 5)
74 | 
75 | 
76 | # Next time
77 | 
78 | Version control with git
79 | 
80 | 


--------------------------------------------------------------------------------
/prog/comp1101_intro/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/css_battle/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # CSS Battle
 4 | 
 5 | ---
 6 | 
 7 | ## Pit your wits against your colleagues
 8 | 
 9 | @ul
10 | - In breakout rooms of four
11 | - One of you log in to <https://cssbattle.dev/> (passwordless)
12 | - Choose battle 1 (Pilot)
13 | - Do target #1 - Simply Square
14 | - Hints on [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started) and the [box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
15 | - You have five minutes
16 | @ulend
17 | 
18 | ---
19 | 
20 | # Did you learn anything?
21 | 
22 | 


--------------------------------------------------------------------------------
/prog/css_battle/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/css_battle/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # CSS Battle
 3 | 
 4 | 
 5 | ## Pit your wits against your colleagues
 6 | 
 7 | - In breakout rooms of four
 8 | - One of you log in to <https://cssbattle.dev/> (passwordless)
 9 | - Choose battle 1 (Pilot)
10 | - Do target #1 - Simply Square
11 | - Hints on [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started) and the [box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
12 | - You have five minutes
13 | 
14 | 
15 | # Did you learn anything?
16 | 
17 | 


--------------------------------------------------------------------------------
/prog/css_battle/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/git/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme: simple
2 | theme-override : layout.css


--------------------------------------------------------------------------------
/prog/git/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Version control and git
  3 | 
  4 | 
  5 | Some material reused and adapted from [Version Control with Git](https://swcarpentry.github.io/git-novice/) by the [Software Carpentry Foundation](https://software-carpentry.org/)
  6 | 
  7 | Licensed under [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/)
  8 | 
  9 | 
 10 | 
 11 |  “Piled Higher and Deeper” by Jorge Cham <http://www.phdcomics.com>)
 12 | 
 13 | 
 14 | ## Linear history
 15 | 
 16 | ![linear development of a document](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/git/play-changes.png)
 17 | 
 18 | 
 19 | ## Multiple authors
 20 | 
 21 | ![different changes](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/git/versions.png)
 22 | 
 23 | 
 24 | ## Merging changes
 25 | 
 26 | ![merges](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/git/merge.png)
 27 | 
 28 | 
 29 | ## Version control software
 30 | 
 31 | - Revision Control System (RCS)
 32 | - Concurrent Versions System (CVS)
 33 | - Microsoft Word Track Changes
 34 | - Subversion
 35 | - git
 36 | - mercurial
 37 | - darcs
 38 | 
 39 | 
 40 | ## All about git
 41 | 
 42 | - Distributed version control system
 43 | - Developed by Linus Torvalds and others to manage the Linux kernel
 44 | - Linus named it after himself
 45 | - Designed to be fast
 46 | - Very widely used in academia and industry
 47 | 
 48 | 
 49 | 
 50 | ## The Linux kernel development under git
 51 | 
 52 | [Visualised with gource](https://www.youtube.com/watch?v=MkJxlKD2bjk)
 53 | 
 54 | 
 55 | ## git under the hood
 56 | 
 57 | - Different from earlier systems such as RCS, CVS and Subversion: no diffs
 58 | - Originally developed under Linux, but available elsewhere
 59 | - No central repository, but can synchronise with remotes
 60 | - Cloud-hosted repository servers: github; gitlab; bitbucket
 61 | 
 62 | Recommend you use github with education: free private repositories
 63 | 
 64 | 
 65 | ## Key concepts in git
 66 | 
 67 | - A __file__ (in a path)
 68 | - A __commit__: a snapshot of a collection of files at a particular time
 69 | - A __branch__: a linear sequence of commits
 70 | - A __repository__: (possibly) many branches of a project
 71 | - A __remote__: another place where a repository is stored
 72 | 
 73 | 
 74 | ## Key commands in git
 75 | 
 76 | Working on the command line
 77 | ```
 78 | git init
 79 | git add
 80 | git status
 81 | git commit
 82 | git push
 83 | ```
 84 | 
 85 | 
 86 | ## git init
 87 | 
 88 | Creates a directory `.git` where everything is stored
 89 | 
 90 | You may also want to do `git config` at this stage
 91 | 
 92 | Think about adding a `.gitignore` file
 93 | 
 94 | 
 95 | ## git add
 96 | 
 97 | Puts the current working version of a file into the staging area
 98 | 
 99 | Preparing for a commit
100 | 
101 | Check what will be committed with `git status`
102 | 
103 | 
104 | ## git commit
105 | 
106 | Makes a commit based on currently staged files
107 | 
108 | Will start an editor (see git config)
109 | 
110 | Consider
111 | ```
112 | git commit -m "message"
113 | ```
114 | to avoid editor
115 | 
116 | 
117 | ## git push
118 | 
119 | Pushes a branch to a remote repository
120 | 
121 | `git push origin master`
122 | 
123 | `origin` defined by
124 | ```
125 | git remote add origin
126 | ```
127 | or
128 | ```
129 | git clone
130 | ```
131 | 
132 | 
133 | ## See also
134 | 
135 | - [Summary of main commands](https://confluence.atlassian.com/bitbucketserver/basic-git-commands-776639767.html)
136 | - [Useful tutorials in particular Getting Started and Collaborating](https://www.atlassian.com/git/tutorials)
137 | - [Git from the bottom up](https://jwiegley.github.io/git-from-the-bottom-up/) an explanation of how git works
138 | 


--------------------------------------------------------------------------------
/prog/git/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/git/layout.css:
--------------------------------------------------------------------------------
1 | .sidebar {
2 |   width: 25%;
3 | }
4 | 
5 | .small {
6 |     font-size: 40%;
7 | }
8 | 


--------------------------------------------------------------------------------
/prog/git/merge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/git/merge.png


--------------------------------------------------------------------------------
/prog/git/merge.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="398px" height="382px" viewBox="0 0 398 382" enable-background="new 0 0 398 382" xml:space="preserve">
 6 | <g>
 7 | 	<rect x="266" y="129" fill="#DCDEE0" width="100" height="127"/>
 8 | 	<rect x="266" y="129" fill="none" stroke="#85888D" stroke-width="2" width="100" height="127"/>
 9 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="279" y1="149" x2="353" y2="149"/>
10 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="279" y1="155" x2="353" y2="155"/>
11 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="279" y1="160" x2="353" y2="160"/>
12 | 	<line fill="none" stroke="#70BF41" stroke-width="2" x1="279" y1="172" x2="353" y2="172"/>
13 | 	<rect x="32" y="41" fill="#DCDEE0" width="100" height="128"/>
14 | 	<rect x="32" y="41" fill="none" stroke="#85888D" stroke-width="2" width="100" height="128"/>
15 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="45" y1="61" x2="119" y2="61"/>
16 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="45" y1="67" x2="119" y2="67"/>
17 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="45" y1="73" x2="119" y2="73"/>
18 | 	<line fill="none" stroke="#70BF41" stroke-width="2" x1="45" y1="85" x2="119" y2="85"/>
19 | 	<line fill="none" stroke="#70BF41" stroke-width="2" x1="162" y1="155" x2="236" y2="155"/>
20 | </g>
21 | <g>
22 | 	<rect x="32" y="221" fill="#DCDEE0" width="100" height="128"/>
23 | 	<rect x="32" y="221" fill="none" stroke="#85888D" stroke-width="2" width="100" height="128"/>
24 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="45" y1="241" x2="119" y2="241"/>
25 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="45" y1="247" x2="119" y2="247"/>
26 | 	<line fill="none" stroke="#000000" stroke-width="2" x1="45" y1="253" x2="119" y2="253"/>
27 | 	<line fill="none" stroke="#C82506" stroke-width="2" x1="45" y1="265" x2="119" y2="265"/>
28 | </g>
29 | <polygon fill="#45BEEE" points="205.711,272.768 210.008,286.822 239.666,246.316 192.428,229.32 196.725,243.375 155.825,255.879 
30 | 	164.812,285.271 "/>
31 | <polygon fill="#45BEEE" points="197.488,131.384 193.191,145.438 240.43,128.443 210.771,87.937 206.475,101.992 165.574,89.487 
32 | 	156.588,118.88 "/>
33 | <g>
34 | 	<line fill="none" stroke="#C82506" stroke-width="2" x1="45" y1="271" x2="119" y2="271"/>
35 | 	<line fill="none" stroke="#C82506" stroke-width="2" x1="162" y1="208" x2="236" y2="208"/>
36 | 	<line fill="none" stroke="#C82506" stroke-width="2" x1="162" y1="214" x2="236" y2="214"/>
37 | 	<line fill="none" stroke="#C82506" stroke-width="2" x1="279" y1="179" x2="353" y2="179"/>
38 | 	<line fill="none" stroke="#C82506" stroke-width="2" x1="279" y1="185" x2="353" y2="185"/>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/prog/git/phd101212s.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/git/phd101212s.png


--------------------------------------------------------------------------------
/prog/git/play-changes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/git/play-changes.png


--------------------------------------------------------------------------------
/prog/git/versions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/git/versions.png


--------------------------------------------------------------------------------
/prog/git_branch/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # git branching
 4 | 
 5 | ---
 6 | 
 7 | ## Today we are going to
 8 | 
 9 | @ul
10 | - Review git branching
11 | - Identify some issues with our example
12 |   - make it editable via [DOM actions](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/README.md)
13 | - Work on the issue(s) one at a time in groups
14 | - Make pull requests
15 | - Merge in the pull requests
16 | 
17 | @ulend
18 | 
19 | ---
20 | 
21 | # Choose some issues
22 | 
23 | ---
24 | 
25 | ## git revisited: basic branching
26 | 
27 | @ul
28 | - create a branch with `git branch iss52`
29 | - check it out with `git checkout iss52`
30 | - do some work, `add` and `commit`
31 | - go back to the main branch: `git checkout main`
32 | - merge your branch: `git merge iss52`
33 | - delete your branch: `git branch -d iss52`
34 | @ulend
35 | 
36 | ---
37 | 
38 | ## What is the point of all that?
39 | 
40 | - Different people can work on different features
41 | - Before merging you can update with `git pull`
42 | - Automatically merges and identifies issues
43 | - See also [`git rebase`](https://git-scm.com/book/en/v2/Git-Branching-Rebasing)
44 | 
45 | ---
46 | 
47 | ## Working with multiple remotes/branches
48 | 
49 | @ul
50 | - Common open source model 
51 |   - you don't have permission to push directly
52 | - Fork the repo at github (c.f. clone to local)
53 | - clone your forked repo into your local machine
54 | - add the original as upstream repo with [set remote](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork)
55 | - you can `git push` and `git pull` with your forked repo
56 | - you can only `git pull` with your upstream repo
57 | @ulend
58 | 
59 | ---
60 | 
61 | ## Let's do it: set up
62 | 
63 | - One of you operate the keyboard and share screen
64 | - Fork, clone and set upstream remote
65 | - This may go horribly wrong: embrace failure!
66 | 
67 | ---
68 | 
69 | ## Let's do it: repeat 
70 | 
71 | - Create an issue branch (numbered with github issue number)
72 | - Change your local code to address the issue
73 | - Add and commit your change (to the issue branch)
74 |   - Do not merge your issue branch into main
75 | - push your branch to forked repo `git push origin issNN`
76 | - on github [make a pull request (PR)](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork)
77 |   - from the issue branch on your fork
78 |   - to the master branch on the upstream repo
79 | 
80 | ---
81 | 
82 | # Select a PR to be merged
83 | 
84 | ---
85 | 
86 | ## Let's do it again
87 | 
88 | - If your PR wasn't chosen you might want to remove that branch
89 | - Switch to master `git checkout master`
90 | - Pull the changes from upstream
91 |   - `git pull upstream`
92 | - Repeat new issue branch/commit/push/PR
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/prog/git_branch/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/git_branch/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # git branching
 3 | 
 4 | 
 5 | ## Today we are going to
 6 | 
 7 | - Review git branching
 8 | - Identify some issues with our example
 9 |   - make it editable via [DOM actions](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/README.md)
10 | - Work on the issue(s) one at a time in groups
11 | - Make pull requests
12 | - Merge in the pull requests
13 | 
14 | 
15 | 
16 | # Choose some issues
17 | 
18 | 
19 | ## git revisited: basic branching
20 | 
21 | - create a branch with `git branch iss52`
22 | - check it out with `git checkout iss52`
23 | - do some work, `add` and `commit`
24 | - go back to the main branch: `git checkout main`
25 | - merge your branch: `git merge iss52`
26 | - delete your branch: `git branch -d iss52`
27 | 
28 | 
29 | ## What is the point of all that?
30 | 
31 | - Different people can work on different features
32 | - Before merging you can update with `git pull`
33 | - Automatically merges and identifies issues
34 | - See also [`git rebase`](https://git-scm.com/book/en/v2/Git-Branching-Rebasing)
35 | 
36 | 
37 | ## Working with multiple remotes/branches
38 | 
39 | - Common open source model 
40 |   - you don't have permission to push directly
41 | - Fork the repo at github (c.f. clone to local)
42 | - clone your forked repo into your local machine
43 | - add the original as upstream repo with [set remote](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork)
44 | - you can `git push` and `git pull` with your forked repo
45 | - you can only `git pull` with your upstream repo
46 | 
47 | 
48 | ## Let's do it: set up
49 | 
50 | - One of you operate the keyboard and share screen
51 | - Fork, clone and set upstream remote
52 | - This may go horribly wrong: embrace failure!
53 | 
54 | 
55 | ## Let's do it: repeat 
56 | 
57 | - Create an issue branch (numbered with github issue number)
58 | - Change your local code to address the issue
59 | - Add and commit your change (to the issue branch)
60 |   - Do not merge your issue branch into main
61 | - push your branch to forked repo `git push origin issNN`
62 | - on github [make a pull request (PR)](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork)
63 |   - from the issue branch on your fork
64 |   - to the master branch on the upstream repo
65 | 
66 | 
67 | # Select a PR to be merged
68 | 
69 | 
70 | ## Let's do it again
71 | 
72 | - If your PR wasn't chosen you might want to remove that branch
73 | - Switch to master `git checkout master`
74 | - Pull the changes from upstream
75 |   - `git pull upstream`
76 | - Repeat new issue branch/commit/push/PR
77 | 
78 | 
79 | 


--------------------------------------------------------------------------------
/prog/git_branch/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/git_collab/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # Collaboration with git
  4 | 
  5 | 
  6 | ---
  7 | 
  8 | ## Formative group task (wk 4)
  9 | 
 10 | - Work in groups of about three from your practical group
 11 | - Develop a set of web pages showcasing societal impact of CS
 12 | - Use a framework e.g. Bootstrap
 13 | - All pages to have author info linking to github and linkedin
 14 | 
 15 | ---
 16 | 
 17 | ## Peer review (week 5)
 18 | 
 19 | - Interesting content
 20 | - Good consistent visual presentation
 21 | - Good written presentation
 22 | - Valid HTML
 23 | - Author info not to be written by author
 24 | - Balanced contributions from members
 25 | - Not done at the last minute
 26 | - Provide comments as pull request
 27 | 
 28 | ---
 29 | 
 30 | ## Working together
 31 | 
 32 | - git supports collaboration
 33 | - It is a tool not a method
 34 | - Need to think about collaboration method
 35 | 
 36 | ---
 37 | 
 38 | ## Questions to ask
 39 | 
 40 | @ul
 41 | - Where to host remote repos (one or many)?
 42 | - Who has control over the remote (one or many)?
 43 | - How will you decide and allocate tasks
 44 | - How will you know if the tasks are complete?
 45 | - (How) will you make a release?
 46 | @ulend
 47 | 
 48 | ---
 49 | 
 50 | ## Who has control?
 51 | 
 52 | Options include:
 53 | 
 54 | 1. One person approves changes, others make pull requests (fork?)
 55 | 2. One person owns the repository, others are collaborators
 56 | 3. Collaborators form an organization for multiple projects
 57 | 
 58 | ---
 59 | 
 60 | ## Task planning
 61 | 
 62 | Outside of scope of version control. Options include:
 63 | 
 64 | 1. spreadsheet
 65 | 2. github issues
 66 | 3. dedicated bug tracking tool e.g. bugzilla
 67 | 4. development 'board' e.g. trello
 68 | 
 69 | ---
 70 | 
 71 | ## Is it any good (complete?)
 72 | 
 73 | - Code review
 74 | - Automated test e.g. html validator
 75 | - Git log
 76 | 
 77 | ---
 78 | 
 79 | ## Making a release
 80 | 
 81 | @ul
 82 | - Push to gitpages
 83 | - Branching: master and develop
 84 | - Feature branching
 85 | - E.g. [gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow)
 86 | - Release vs continuous delivery/deployment
 87 | @ulend
 88 | 
 89 | ---
 90 | 
 91 | ## See also
 92 | 
 93 | - [Collaborating with Git](https://www.atlassian.com/git/tutorials/syncing)
 94 | - [Git Branching](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging)
 95 | 
 96 | ---
 97 | 
 98 | ## Why are we doing this?
 99 | 
100 | See [Comparing Computing Professionals’ Perceptions of Importance of Skills and Knowledge on the Job and Coverage in Undergraduate Experiences](https://dl.acm.org/citation.cfm?id=3218430) (institution sign-in)
101 | 
102 | ---
103 | 
104 | @quote[They noted, for example, that “software craftsmanship and clean code,” “emphasis on coding style and commenting,” and “software maintenance” were not sufficiently stressed within their own undergraduate experiences]
105 | 
106 | ---
107 | 
108 | @quote[One participant recommended "Working on a large code base and making changes/additions to it. Reviewing changes other people are making to the codebase. Testing. Finding and fixing bugs. Using source control software, etc. This way students are actually prepared for developing in the real world upon graduating and have an appreciation for best practices, comments, reviews, developer testing, and so on."]
109 | 
110 | ---
111 | 
112 | @quote[Such projects should be incorporated into early stages of the curriculum "From the get-go people would learn the development environment. Essential tools like git, svn, in unix, and learn some of the history. Then learn languages, design patterns, team interaction, the roles in an agile team, etc"]
113 | 


--------------------------------------------------------------------------------
/prog/git_collab/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme : simple
2 | theme-override : layout.css


--------------------------------------------------------------------------------
/prog/git_collab/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Collaboration with git
 3 | 
 4 | 
 5 | 
 6 | ## Formative group task (wk 4)
 7 | 
 8 | - Work in groups of about three from your practical group
 9 | - Develop a set of web pages showcasing societal impact of CS
10 | - Use a framework e.g. Bootstrap
11 | - All pages to have author info linking to github and linkedin
12 | 
13 | 
14 | ## Peer review (week 5)
15 | 
16 | - Interesting content
17 | - Good consistent visual presentation
18 | - Good written presentation
19 | - Valid HTML
20 | - Author info not to be written by author
21 | - Balanced contributions from members
22 | - Not done at the last minute
23 | - Provide comments as pull request
24 | 
25 | 
26 | ## Working together
27 | 
28 | - git supports collaboration
29 | - It is a tool not a method
30 | - Need to think about collaboration method
31 | 
32 | 
33 | ## Questions to ask
34 | 
35 | - Where to host remote repos (one or many)?
36 | - Who has control over the remote (one or many)?
37 | - How will you decide and allocate tasks
38 | - How will you know if the tasks are complete?
39 | - (How) will you make a release?
40 | 
41 | 
42 | ## Who has control?
43 | 
44 | Options include:
45 | 
46 | 1. One person approves changes, others make pull requests (fork?)
47 | 2. One person owns the repository, others are collaborators
48 | 3. Collaborators form an organization for multiple projects
49 | 
50 | 
51 | ## Task planning
52 | 
53 | Outside of scope of version control. Options include:
54 | 
55 | 1. spreadsheet
56 | 2. github issues
57 | 3. dedicated bug tracking tool e.g. bugzilla
58 | 4. development 'board' e.g. trello
59 | 
60 | 
61 | ## Is it any good (complete?)
62 | 
63 | - Code review
64 | - Automated test e.g. html validator
65 | - Git log
66 | 
67 | 
68 | ## Making a release
69 | 
70 | - Push to gitpages
71 | - Branching: master and develop
72 | - Feature branching
73 | - E.g. [gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow)
74 | - Release vs continuous delivery/deployment
75 | 
76 | 
77 | ## See also
78 | 
79 | - [Collaborating with Git](https://www.atlassian.com/git/tutorials/syncing)
80 | - [Git Branching](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging)
81 | 
82 | 
83 | ## Why are we doing this?
84 | 
85 | See [Comparing Computing Professionals’ Perceptions of Importance of Skills and Knowledge on the Job and Coverage in Undergraduate Experiences](https://dl.acm.org/citation.cfm?id=3218430) (institution sign-in)
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 


--------------------------------------------------------------------------------
/prog/git_collab/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/html/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # HTML
 4 | 
 5 | ## HyperText Markup Language
 6 | 
 7 | ---?color=#a5c8d0 
 8 | 
 9 | ## Last time
10 | 
11 | @ul
12 | * Source code control with git
13 | * File; commit; branch; repository; remote
14 | * init/clone; add; commit; (pull then) push
15 | @ulend
16 | 
17 | --- 
18 | 
19 | ## Today
20 | 
21 | * HTML tags
22 | * What makes a good HTML page
23 | * Interview
24 | * Web front-end frameworks
25 | 
26 | ---
27 | 
28 | ## HTML tags
29 | 
30 | (In groups) 
31 | * Introduce yourselves
32 | * List the HTML tags you are familiar with 
33 |   - five minutes
34 | * One person to create a text file with them in
35 |   - one per line
36 | 
37 | ---
38 | 
39 | ## Putting them together
40 | 
41 | * Paste into second column of shared doc
42 | * We'll make a [word cloud](https://www.wordclouds.com/)
43 | 
44 | ---
45 | 
46 | ## What makes a good HTML page?
47 | 
48 | @ul
49 | * Standards compliant HTML5 [W3C](https://www.w3.org/TR/html52/) @fa[af-html5]
50 |   - Check with <https://validator.w3.org/>
51 |   - Or chrome plugin
52 | * Accessible: alt tags; contrast; [WCAG](https://www.w3.org/TR/WCAG21/); [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
53 | * Mobile-friendly: viewport; lightweight; responsive
54 | * Quick-loading
55 | * Review with e.g. [Lighthouse](https://developers.google.com/web/tools/lighthouse)
56 | @ulend
57 | 
58 | ---
59 | 
60 | ## Interview with Soumya Singh
61 | 
62 | ---
63 | 
64 | ## Web Front-end Frameworks
65 | 
66 | - Provide pre-written HTML and JavaScript
67 | - Apply styles with CSS classes
68 | - Make it easy to make things look nice
69 | - Make it easy to make things responsive
70 | - Can sometimes be heavy (large file size, slow)
71 | - e.g. [Bootstrap](https://getbootstrap.com/) and [Semantic UI](https://semantic-ui.com/)
72 | 
73 | ---
74 | 
75 | ## WeLoveSue
76 | 
77 | And to prove it we can
78 | 
79 | - make our page HTML5 compliant
80 | - include it in a bootstrap template
81 | 
82 | Follow progress at <https://github.com/stevenaeola/WeLoveSue>
83 | 
84 | 
85 | 
86 | 
87 | 


--------------------------------------------------------------------------------
/prog/html/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/html/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # HTML
 3 | 
 4 | ## HyperText Markup Language
 5 | 
 6 | 
 7 | ## Last time
 8 | 
 9 | * Source code control with git
10 | * File; commit; branch; repository; remote
11 | * init/clone; add; commit; (pull then) push
12 | 
13 | 
14 | ## Today
15 | 
16 | * HTML tags
17 | * What makes a good HTML page
18 | * Interview
19 | * Web front-end frameworks
20 | 
21 | 
22 | ## HTML tags
23 | 
24 | (In groups) 
25 | * Introduce yourselves
26 | * List the HTML tags you are familiar with 
27 |   - five minutes
28 | * One person to create a text file with them in
29 |   - one per line
30 | 
31 | 
32 | ## Putting them together
33 | 
34 | * Paste into second column of shared doc
35 | * We'll make a [word cloud](https://www.wordclouds.com/)
36 | 
37 | 
38 | ## What makes a good HTML page?
39 | 
40 | * Standards compliant HTML5 [W3C](https://www.w3.org/TR/html52/) @fa[af-html5]
41 |   - Check with <https://validator.w3.org/>
42 |   - Or chrome plugin
43 | * Accessible: alt tags; contrast; [WCAG](https://www.w3.org/TR/WCAG21/); [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
44 | * Mobile-friendly: viewport; lightweight; responsive
45 | * Quick-loading
46 | * Review with e.g. [Lighthouse](https://developers.google.com/web/tools/lighthouse)
47 | 
48 | 
49 | ## Interview with Soumya Singh
50 | 
51 | 
52 | ## Web Front-end Frameworks
53 | 
54 | - Provide pre-written HTML and JavaScript
55 | - Apply styles with CSS classes
56 | - Make it easy to make things look nice
57 | - Make it easy to make things responsive
58 | - Can sometimes be heavy (large file size, slow)
59 | - e.g. [Bootstrap](https://getbootstrap.com/) and [Semantic UI](https://semantic-ui.com/)
60 | 
61 | 
62 | ## WeLoveSue
63 | 
64 | And to prove it we can
65 | 
66 | - make our page HTML5 compliant
67 | - include it in a bootstrap template
68 | 
69 | Follow progress at <https://github.com/stevenaeola/WeLoveSue>
70 | 
71 | 
72 | 
73 | 
74 | 


--------------------------------------------------------------------------------
/prog/html/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/http/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # HTTP
  4 | 
  5 | ---
  6 | 
  7 | ## Possible responses from a web request
  8 | 
  9 | Responses include (write list in groups)
 10 | - A plain text file
 11 | - A web page: some HTML
 12 | - An image file (jpeg, gif, png)
 13 | - An executable (.exe, .msi)
 14 | - A document (pdf, word)
 15 | - Some data (XML, JSON)
 16 | - A CSS file
 17 | - A JavaScript program
 18 | - A flash movie
 19 | - A redirection (in headers)
 20 | - A cookie value (in headers)
 21 | - An error
 22 | - A combination of the above
 23 | - 
 24 | 
 25 | ---
 26 | 
 27 | 
 28 | ## Sources of requests
 29 | 
 30 | How might requests be generated?
 31 | 
 32 | - URL typed in by user
 33 | - Hyperlink followed
 34 | - Form submitted
 35 | - Clicking in an image map
 36 | - Image included in source file
 37 | - CSS included in source file
 38 | - Frameset or iframe in HTML source (can be recursive)
 39 | - Following a redirection (including 301 error)
 40 | - JavaScript execution (triggered by mouseover etc)
 41 | - Flash execution (or other plug-in e.g. pdf)
 42 | - From a server (e.g. curl, robot, web service request)
 43 | 
 44 | Response to request may be used to update or replace some or all of a web page.
 45 | 
 46 | ---
 47 | 
 48 | ## Hypertext Transfer Protocol (HTTP) basics
 49 | 
 50 | @ul
 51 | 
 52 | -  Underlies many aspects of the web
 53 | -  Based around sockets (usually port 80 for web pages)
 54 | -  Fairly stable:
 55 |     - HTTP 0.9 (1991)
 56 |     - HTTP 1.0 (1996)
 57 |     - HTTP 1.1 (1997)
 58 |     - HTTP 2.0 (2015/2020)
 59 | -  Commonly accepted extensions: cookies 
 60 | @ulend
 61 | 
 62 | ---
 63 | 
 64 | ## HTTP: more
 65 | 
 66 | - HTTP 2 approved in 2015, including compression, push, pipelining and multiplexing
 67 | -  For full details see <https://tools.ietf.org/html/rfc7540>
 68 | -  For tutorial see <http://www.jmarshall.com/easy/http/>
 69 | -  Some knowledge important for web apps
 70 | -  Not just for HTML, but general resource (uRl)
 71 | 
 72 | ---
 73 | 
 74 | ## Overview
 75 | 
 76 | 
 77 | - Client/Server: (usually) no response without request
 78 | - Requests and responses have similar format:
 79 |     - __Request/Status Line__ including HTTP version and Status Codes for response
 80 |     - __Headers__ including the host in HTTP 1.1, allowing for multiple sites on same IP
 81 |     - __Blank Line__
 82 | - Can run manually using curl
 83 | - Default port number is 80 (443 for https)
 84 | 
 85 | ---
 86 | 
 87 | ## curl requests
 88 | 
 89 | At a command prompt:
 90 | 
 91 | ```
 92 |   curl -v google.coom
 93 |   curl -v gooogle.com
 94 |   curl -v google.com
 95 |   curl -v https://www.dur.ac.uk/computer.science/password/current/
 96 | ```
 97 |  
 98 | 
 99 | ---
100 | 
101 | ## Request types include
102 | 
103 | - __GET__ most common
104 | - __POST__ for some forms
105 | - __HEAD__ to check if a page exists
106 | - __PUT__ rarely used outside web services
107 | - __DELETE__ rarely used outside web services
108 | 
109 | Headers can include cookie values
110 | 
111 | ---
112 | 
113 | ## Response
114 | 
115 | Response Codes
116 | 
117 | - __100-199__ Informational (e.g. continue). Client should respond
118 | - __200-299__ Successful
119 | - __300-399__ File has moved (permanently or temporarily)
120 | - __400-499__ Client error (401 Unauthorised, 403 Forbidden, 404 Not Found)
121 | - __500-599__ Server error
122 | 
123 | Headers can include setting cookie values
124 | 
125 | ---
126 | 
127 | ## Summary
128 | 
129 | - A web server responds to http requests, usually on port 80
130 | - Request proivdes data in header and (possibly) body
131 | - Response provides data in body and (possibly) headerH


--------------------------------------------------------------------------------
/prog/http/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/http/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # HTTP
  3 | 
  4 | 
  5 | ## Possible responses from a web request
  6 | 
  7 | Responses include (write list in groups)
  8 | - A plain text file
  9 | - A web page: some HTML
 10 | - An image file (jpeg, gif, png)
 11 | - An executable (.exe, .msi)
 12 | - A document (pdf, word)
 13 | - Some data (XML, JSON)
 14 | - A CSS file
 15 | - A JavaScript program
 16 | - A flash movie
 17 | - A redirection (in headers)
 18 | - A cookie value (in headers)
 19 | - An error
 20 | - A combination of the above
 21 | - 
 22 | 
 23 | 
 24 | 
 25 | ## Sources of requests
 26 | 
 27 | How might requests be generated?
 28 | 
 29 | - URL typed in by user
 30 | - Hyperlink followed
 31 | - Form submitted
 32 | - Clicking in an image map
 33 | - Image included in source file
 34 | - CSS included in source file
 35 | - Frameset or iframe in HTML source (can be recursive)
 36 | - Following a redirection (including 301 error)
 37 | - JavaScript execution (triggered by mouseover etc)
 38 | - Flash execution (or other plug-in e.g. pdf)
 39 | - From a server (e.g. curl, robot, web service request)
 40 | 
 41 | Response to request may be used to update or replace some or all of a web page.
 42 | 
 43 | 
 44 | ## Hypertext Transfer Protocol (HTTP) basics
 45 | 
 46 | 
 47 | -  Underlies many aspects of the web
 48 | -  Based around sockets (usually port 80 for web pages)
 49 | -  Fairly stable:
 50 |     - HTTP 0.9 (1991)
 51 |     - HTTP 1.0 (1996)
 52 |     - HTTP 1.1 (1997)
 53 |     - HTTP 2.0 (2015/2020)
 54 | -  Commonly accepted extensions: cookies 
 55 | 
 56 | 
 57 | ## HTTP: more
 58 | 
 59 | - HTTP 2 approved in 2015, including compression, push, pipelining and multiplexing
 60 | -  For full details see <https://tools.ietf.org/html/rfc7540>
 61 | -  For tutorial see <http://www.jmarshall.com/easy/http/>
 62 | -  Some knowledge important for web apps
 63 | -  Not just for HTML, but general resource (uRl)
 64 | 
 65 | 
 66 | ## Overview
 67 | 
 68 | 
 69 | - Client/Server: (usually) no response without request
 70 | - Requests and responses have similar format:
 71 |     - __Request/Status Line__ including HTTP version and Status Codes for response
 72 |     - __Headers__ including the host in HTTP 1.1, allowing for multiple sites on same IP
 73 |     - __Blank Line__
 74 | - Can run manually using curl
 75 | - Default port number is 80 (443 for https)
 76 | 
 77 | 
 78 | ## curl requests
 79 | 
 80 | At a command prompt:
 81 | 
 82 | ```
 83 |   curl -v google.coom
 84 |   curl -v gooogle.com
 85 |   curl -v google.com
 86 |   curl -v https://www.dur.ac.uk/computer.science/password/current/
 87 | ```
 88 |  
 89 | 
 90 | 
 91 | ## Request types include
 92 | 
 93 | - __GET__ most common
 94 | - __POST__ for some forms
 95 | - __HEAD__ to check if a page exists
 96 | - __PUT__ rarely used outside web services
 97 | - __DELETE__ rarely used outside web services
 98 | 
 99 | Headers can include cookie values
100 | 
101 | 
102 | ## Response
103 | 
104 | Response Codes
105 | 
106 | - __100-199__ Informational (e.g. continue). Client should respond
107 | - __200-299__ Successful
108 | - __300-399__ File has moved (permanently or temporarily)
109 | - __400-499__ Client error (401 Unauthorised, 403 Forbidden, 404 Not Found)
110 | - __500-599__ Server error
111 | 
112 | Headers can include setting cookie values
113 | 
114 | 
115 | ## Summary
116 | 
117 | - A web server responds to http requests, usually on port 80
118 | - Request proivdes data in header and (possibly) body
119 | - Response provides data in body and (possibly) headerH
120 | 


--------------------------------------------------------------------------------
/prog/http/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/java_revision/Example/AbstractClassExample.ctxt:
--------------------------------------------------------------------------------
1 | #BlueJ class context
2 | comment0.target=AbstractClassExample
3 | comment1.params=
4 | comment1.target=AbstractClassExample()
5 | comment2.params=
6 | comment2.target=int\ getField1()
7 | numComments=3
8 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/AbstractClassExample.java:
--------------------------------------------------------------------------------
 1 | public abstract class AbstractClassExample
 2 | {
 3 |      protected static int numberOfObjects = 0;
 4 |      
 5 |      public AbstractClassExample(){
 6 |          numberOfObjects++;
 7 |      }
 8 |      
 9 |      public abstract int getField1();
10 | }
11 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/Example.ctxt:
--------------------------------------------------------------------------------
 1 | #BlueJ class context
 2 | comment0.target=Example
 3 | comment1.params=field1
 4 | comment1.target=Example(int)
 5 | comment2.params=
 6 | comment2.target=int\ getField1()
 7 | comment3.params=toAdd
 8 | comment3.target=void\ addToField2(java.lang.String)
 9 | comment4.params=toAdd
10 | comment4.target=void\ addToField2(int)
11 | comment5.params=
12 | comment5.target=java.lang.String\ toString()
13 | comment6.params=other
14 | comment6.target=int\ compareTo(Example)
15 | comment7.params=args
16 | comment7.target=void\ main(java.lang.String[])
17 | numComments=8
18 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/Example.java:
--------------------------------------------------------------------------------
 1 | import java.util.ArrayList;
 2 | import java.util.List;
 3 | import java.util.Collections;
 4 | 
 5 | // concrete class
 6 | public class Example extends AbstractClassExample implements InterfaceExample, Comparable<Example>
 7 | {
 8 |     // fields
 9 |     // primitive type
10 |     private int field1;
11 |     // object type, type parameter
12 |     private ArrayList<String> field2;
13 | 
14 |     // constructors
15 |     public Example(int field1){
16 |         super();
17 |         // field field1 is not visible
18 |         this.field1 = field1;
19 |         field2 = new ArrayList<String>();
20 |     }
21 | 
22 |     // methods
23 |     // get method (accessor)
24 |     public int getField1(){
25 |         return field1;
26 |     }
27 | 
28 |     // modifier method
29 |     public void addToField2(String toAdd){
30 |         field2.add(toAdd);
31 |     }
32 | 
33 |     // overloaded method
34 |     public void addToField2(int toAdd){
35 |         // operator overloading
36 |         field2.add("Number " + toAdd);
37 |     }
38 | 
39 |     // overriden method from Object
40 |     public String toString(){
41 |         String stuff = "A lovely object " + field1;
42 |         for(String thing: field2){
43 |             stuff += thing;
44 |         }
45 |         return stuff;
46 |     }
47 | 
48 |     public int compareTo(Example other){
49 |         return this.getField1() - other.field1;
50 |     }
51 |     
52 |     
53 |     public static void main(String[] args){
54 |         // referring to static (class) variable
55 |         System.out.println(Example.numberOfObjects + " objects");
56 |         // polymorphism: dynamic type <> static type
57 |         List<Example> objects = new ArrayList<Example>();
58 |         for(int i = 0; i<args.length; i++ ){
59 |             objects.add(new Example(new Integer(args[i])));
60 |         }
61 |         // calling static (class) method
62 |         Collections.sort(objects);
63 |         System.out.println(objects);
64 |         System.out.println(Example.numberOfObjects + " objects");
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/InterfaceExample.ctxt:
--------------------------------------------------------------------------------
1 | #BlueJ class context
2 | comment0.target=InterfaceExample
3 | comment1.params=toAdd
4 | comment1.target=void\ addToField2(java.lang.String)
5 | numComments=2
6 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/InterfaceExample.java:
--------------------------------------------------------------------------------
1 | public interface InterfaceExample {
2 |     void addToField2(String toAdd);
3 | }
4 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/README.TXT:
--------------------------------------------------------------------------------
 1 | ------------------------------------------------------------------------
 2 | This is the project README file. Here, you should describe your project.
 3 | Tell the reader (someone who does not know anything about this project)
 4 | all he/she needs to know. The comments should usually include at least:
 5 | ------------------------------------------------------------------------
 6 | 
 7 | PROJECT TITLE:
 8 | PURPOSE OF PROJECT:
 9 | VERSION or DATE:
10 | HOW TO START THIS PROJECT:
11 | AUTHORS:
12 | USER INSTRUCTIONS:
13 | 


--------------------------------------------------------------------------------
/prog/java_revision/Example/package.bluej:
--------------------------------------------------------------------------------
 1 | #BlueJ package file
 2 | editor.fx.0.height=817
 3 | editor.fx.0.width=1290
 4 | editor.fx.0.x=37
 5 | editor.fx.0.y=36
 6 | objectbench.height=101
 7 | objectbench.width=776
 8 | package.divider.horizontal=0.6
 9 | package.divider.vertical=0.8007380073800738
10 | package.editor.height=427
11 | package.editor.width=674
12 | package.editor.x=127
13 | package.editor.y=253
14 | package.frame.height=600
15 | package.frame.width=800
16 | package.numDependencies=0
17 | package.numTargets=3
18 | package.showExtends=true
19 | package.showUses=true
20 | project.charset=UTF-8
21 | readme.height=58
22 | readme.name=@README
23 | readme.width=47
24 | readme.x=10
25 | readme.y=10
26 | target1.height=50
27 | target1.name=Example
28 | target1.showInterface=false
29 | target1.type=ClassTarget
30 | target1.typeParameters=
31 | target1.width=80
32 | target1.x=220
33 | target1.y=240
34 | target2.height=50
35 | target2.name=AbstractClassExample
36 | target2.showInterface=false
37 | target2.type=AbstractTarget
38 | target2.typeParameters=
39 | target2.width=160
40 | target2.x=70
41 | target2.y=70
42 | target3.height=50
43 | target3.name=InterfaceExample
44 | target3.showInterface=false
45 | target3.type=InterfaceTarget
46 | target3.typeParameters=
47 | target3.width=130
48 | target3.x=320
49 | target3.y=70
50 | 


--------------------------------------------------------------------------------
/prog/java_revision/PITCHME.md:
--------------------------------------------------------------------------------
  1 | # Java Revision {data-background-color=#7E317B}
  2 | 
  3 | ---
  4 | 
  5 | ## Summary
  6 | 
  7 | - Java concepts
  8 | - Java syntax
  9 | - Java classes/interfaces
 10 | 
 11 | ---
 12 | 
 13 | ## Basic Concepts
 14 | 
 15 | ::: incremental
 16 | 
 17 | - Class
 18 | - Object
 19 | - Field (instance and class)
 20 | - Constructor
 21 | - Method (instance and class, including main)
 22 | - Scope and visibility
 23 | 
 24 | :::
 25 | 
 26 | ---
 27 | 
 28 | ## Java-specific Concepts
 29 | 
 30 | ::: incremental
 31 | 
 32 | - Primitive and object types
 33 |  - Assignment and equality
 34 | - Overloading (method and operator)
 35 | - Collections: variable and fixed size
 36 | - Type parameter
 37 | 
 38 | :::
 39 | 
 40 | --- 
 41 | 
 42 | ## Inheritance Concepts
 43 | 
 44 | ::: incremental
 45 | 
 46 | - Overriding
 47 | - Polymorphism
 48 | - Dynamic and static type
 49 | - Type loss
 50 | - Type casting
 51 | - Dynamic method despatch
 52 | - Abstract classes 
 53 | - Interfaces
 54 | 
 55 | :::
 56 | 
 57 | 
 58 | ---
 59 | 
 60 | ## Java Syntax
 61 | 
 62 | ```
 63 | . = ==
 64 | () [] <> {}
 65 | ; :
 66 | ```
 67 | 
 68 | ---
 69 | 
 70 | ## Java Keywords
 71 | 
 72 | ```
 73 | class, public, private, protected
 74 | static, final
 75 | int, float, double, void, boolean
 76 | import
 77 | for (including for-each), while, if, else
 78 | return
 79 | new, this, null
 80 | extends, super, abstract, interface, implements
 81 | 
 82 | ```
 83 | 
 84 | --- 
 85 | 
 86 | ## Java Classes/Interfaces
 87 | 
 88 | ::: incremental
 89 | 
 90 | - Object
 91 |   - .equals()
 92 |   - .toString()
 93 | - String
 94 | - java.util.ArrayList
 95 | - Math
 96 | - System
 97 |   - .out.println()
 98 | - List
 99 | - Comparable
100 | 
101 | :::
102 | 
103 | ---
104 | 
105 | ## Examples
106 | 
107 | See [example classes](https://github.com/stevenaeola/gitpitch/tree/master/prog/java_revision/Example)


--------------------------------------------------------------------------------
/prog/java_revision/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/java_revision/README.md:
--------------------------------------------------------------------------------
 1 | # Java Revision 
 2 | 
 3 | 
 4 | ## Summary
 5 | 
 6 | - Java concepts
 7 | - Java syntax
 8 | - Java classes/interfaces
 9 | 
10 | 
11 | ## Basic Concepts
12 | 
13 | 
14 | - Class
15 | - Object
16 | - Field (instance and class)
17 | - Constructor
18 | - Method (instance and class, including main)
19 | - Scope and visibility
20 | 
21 | 
22 | 
23 | ## Java-specific Concepts
24 | 
25 | 
26 | - Primitive and object types
27 |  - Assignment and equality
28 | - Overloading (method and operator)
29 | - Collections: variable and fixed size
30 | - Type parameter
31 | 
32 | 
33 | 
34 | ## Inheritance Concepts
35 | 
36 | 
37 | - Overriding
38 | - Polymorphism
39 | - Dynamic and static type
40 | - Type loss
41 | - Type casting
42 | - Dynamic method despatch
43 | - Abstract classes 
44 | - Interfaces
45 | 
46 | 
47 | 
48 | 
49 | ## Java Syntax
50 | 
51 | ```
52 | . = ==
53 | () [] <> 
54 | ; :
55 | ```
56 | 
57 | 
58 | ## Java Keywords
59 | 
60 | ```
61 | class, public, private, protected
62 | static, final
63 | int, float, double, void, boolean
64 | import
65 | for (including for-each), while, if, else
66 | return
67 | new, this, null
68 | extends, super, abstract, interface, implements
69 | 
70 | ```
71 | 
72 | 
73 | ## Java Classes/Interfaces
74 | 
75 | 
76 | - Object
77 |   - .equals()
78 |   - .toString()
79 | - String
80 | - java.util.ArrayList
81 | - Math
82 | - System
83 |   - .out.println()
84 | - List
85 | - Comparable
86 | 
87 | 
88 | 
89 | ## Examples
90 | 
91 | See [example classes](https://github.com/stevenaeola/gitpitch/tree/master/prog/java_revision/Example)
92 | 


--------------------------------------------------------------------------------
/prog/java_revision/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme : simple
2 | theme-override : layout.css


--------------------------------------------------------------------------------
/prog/js/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_dom/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # JavaScript and the DOM
  4 | 
  5 | ---
  6 | 
  7 | ## Document Object Model (DOM)
  8 | 
  9 | @ul
 10 | - Internal representation of browser page
 11 | - Read contents with JavaScript
 12 | - Update contents to change page content
 13 | - Historically problematic (so [jQuery](https://jquery.com/))
 14 | - Better in ES6, now widespread
 15 | - [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document)
 16 | @ulend
 17 | 
 18 | ---
 19 | 
 20 | ## Event handling with HTML
 21 | 
 22 | - Add `onclick` attribute to an element
 23 | - JavaScript is executed (without separate tag)
 24 | - Note embedded single quotes
 25 | 
 26 | ```
 27 | <html>
 28 | <button onclick="alert('Sing me a song');">
 29 | </html>
 30 | 
 31 | ```
 32 | - See [Events and the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events)
 33 | - [button.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/button.html)
 34 | 
 35 | 
 36 | ---
 37 | 
 38 | ## [Identifying parts of the page: getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
 39 | 
 40 | `
 41 | var element = document.getElementById(id);
 42 | `
 43 | @ul
 44 | - In a browser you have access to the global `document` object
 45 | - `id` attribute of HTML elements should be unique
 46 | - Returns an [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
 47 | @ulend
 48 | 
 49 | ---
 50 | 
 51 | 
 52 | ## [Identifying parts of the page: querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
 53 | 
 54 | @ul
 55 | - Select item with CSS selector
 56 | - First matching element is selected
 57 | - Can use [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
 58 |    - Use `for` or `.foreach` to iterate
 59 | @ulend
 60 | 
 61 | ---
 62 | 
 63 | ## Listening for events
 64 | 
 65 | @ul
 66 | - Browsers produce events as users interact with page
 67 | - E.g. `click`, `keypress`, `focus`, `submit` see [list](https://developer.mozilla.org/en-US/docs/Web/Events)
 68 | - Use `addEventListener` to attach a function to an element
 69 | - See [button2.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/button2.html)
 70 | - Better to separate JS and HTML in this way (MVC)
 71 | - How would you get a message to appear when hovering over "primary" text?
 72 | @ulend
 73 | 
 74 | ---
 75 | 
 76 | ## Waiting for the DOM to be loaded
 77 | 
 78 | - JS often included in `<head>`
 79 | - But DOM elements not defined when code is executed
 80 | - `document.addEventListener("DOMContentLoaded",f)`
 81 | - Handlers are often anonymous functions
 82 |     - function expression
 83 |     - arrow function expression
 84 | - See [button3.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/button3.html)
 85 | 
 86 | ---
 87 | 
 88 | ## Manipulating the  DOM
 89 | 
 90 | - Change the content of an element with [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property
 91 | - Add/remove elements with [append](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) and [remove](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)
 92 | - Change attributes e.g. class, style with [setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
 93 | 
 94 | ---
 95 | 
 96 | ## Summary
 97 | 
 98 | @ul
 99 | - Select parts of the page (DOM)
100 | - Update the page (DOM)
101 | - Attach actions (functions) to the page
102 | - Allows for dynamic pages e.g. [Progressive Web Apps](https://web.dev/progressive-web-apps/)
103 | @ulend
104 | 
105 | 


--------------------------------------------------------------------------------
/prog/js_dom/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/js_dom/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # JavaScript and the DOM
 3 | 
 4 | 
 5 | ## Document Object Model (DOM)
 6 | 
 7 | - Internal representation of browser page
 8 | - Read contents with JavaScript
 9 | - Update contents to change page content
10 | - Historically problematic (so [jQuery](https://jquery.com/))
11 | - Better in ES6, now widespread
12 | - [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document)
13 | 
14 | 
15 | ## Event handling with HTML
16 | 
17 | - Add `onclick` attribute to an element
18 | - JavaScript is executed (without separate tag)
19 | - Note embedded single quotes
20 | 
21 | ```
22 | <html>
23 | <button onclick="alert('Sing me a song');">
24 | </html>
25 | 
26 | ```
27 | - See [Events and the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events)
28 | - [button.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/button.html)
29 | 
30 | 
31 | 
32 | ## [Identifying parts of the page: getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
33 | 
34 | `
35 | var element = document.getElementById(id);
36 | `
37 | - In a browser you have access to the global `document` object
38 | - `id` attribute of HTML elements should be unique
39 | - Returns an [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
40 | 
41 | 
42 | 
43 | ## [Identifying parts of the page: querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
44 | 
45 | - Select item with CSS selector
46 | - First matching element is selected
47 | - Can use [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
48 |    - Use `for` or `.foreach` to iterate
49 | 
50 | 
51 | ## Listening for events
52 | 
53 | - Browsers produce events as users interact with page
54 | - E.g. `click`, `keypress`, `focus`, `submit` see [list](https://developer.mozilla.org/en-US/docs/Web/Events)
55 | - Use `addEventListener` to attach a function to an element
56 | - See [button2.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/button2.html)
57 | - Better to separate JS and HTML in this way (MVC)
58 | - How would you get a message to appear when hovering over "primary" text?
59 | 
60 | 
61 | ## Waiting for the DOM to be loaded
62 | 
63 | - JS often included in `<head>`
64 | - But DOM elements not defined when code is executed
65 | - `document.addEventListener("DOMContentLoaded",f)`
66 | - Handlers are often anonymous functions
67 |     - function expression
68 |     - arrow function expression
69 | - See [button3.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_dom/button3.html)
70 | 
71 | 
72 | ## Manipulating the  DOM
73 | 
74 | - Change the content of an element with [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property
75 | - Add/remove elements with [append](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) and [remove](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)
76 | - Change attributes e.g. class, style with [setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
77 | 
78 | 
79 | ## Summary
80 | 
81 | - Select parts of the page (DOM)
82 | - Update the page (DOM)
83 | - Attach actions (functions) to the page
84 | - Allows for dynamic pages e.g. [Progressive Web Apps](https://web.dev/progressive-web-apps/)
85 | 
86 | 


--------------------------------------------------------------------------------
/prog/js_dom/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_dom/button.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <button onclick="alert('Sing me a song');">
4 | </html>
5 | 


--------------------------------------------------------------------------------
/prog/js_dom/button2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <button id='squeeze'>Squeeze me</button>
 4 |     
 5 |     <script type="text/javascript">
 6 |      var button = document.getElementById("squeeze");
 7 |      function shout(){
 8 | 	 alert("... and I squeak");
 9 |      }
10 |      button.addEventListener("click", shout);
11 |     </script>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/prog/js_dom/button3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script type="text/javascript">
 5 |      document.addEventListener("DOMContentLoaded", function(){
 6 | 	 var button = document.getElementById("squeeze");
 7 | 	 function shout(){
 8 | 	     alert("... and I squeak");
 9 | 	 }
10 | 	 button.addEventListener("click", shout);
11 |      });
12 |     </script>
13 |     
14 |   </head>
15 | 
16 |   <body>
17 |     <button id='squeeze'>Squeeze me</button>
18 |   </body>
19 |   
20 |     
21 | </html>
22 | 


--------------------------------------------------------------------------------
/prog/js_fetch/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/js_fetch/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_fetch/client/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |     <body>
 5 | 	<div id="content"></div>
 6 | 	<button id="get">Get instruments</button>
 7 | 	<script src="index.js"></script>
 8 |     </body>
 9 | 
10 | </html>
11 | 


--------------------------------------------------------------------------------
/prog/js_fetch/client/index.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('click', function(event){
2 |   fetch('http://127.0.0.1:8090/list')
3 |     .then(response => response.text())
4 |     .then(body => document.getElementById('content').innerHTML=body)
5 |     .catch( (error) => alert(error))
6 | });
7 | 


--------------------------------------------------------------------------------
/prog/js_fetch/client/indexasync.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |     <body>
 5 | 	<div id="content"></div>
 6 | 	<button id="get">Get instruments</button>
 7 | 	<script src="indexasync.js"></script>
 8 |     </body>
 9 | 
10 | </html>
11 | 


--------------------------------------------------------------------------------
/prog/js_fetch/client/indexasync.js:
--------------------------------------------------------------------------------
 1 | window.addEventListener('click', async function(event){
 2 |   try{
 3 |     let response = await fetch('http://127.0.0.1:809/list');
 4 |     let body = await response.text();
 5 |     document.getElementById('content').innerHTML=body;
 6 |   } catch(e) {
 7 |     alert(e);
 8 |   }
 9 | });
10 | 


--------------------------------------------------------------------------------
/prog/js_fetch/client/indexasyncexception.js:
--------------------------------------------------------------------------------
 1 | window.addEventListener('click', async function(event){
 2 |   try{
 3 |     let response = await fetch('http://127.0.0.1:809/list');
 4 |     let body = await response.text();
 5 |     document.getElementById('content').innerHTML=body;
 6 |   } catch(e) {
 7 |     alert(e);
 8 |   }
 9 | });
10 | 


--------------------------------------------------------------------------------
/prog/js_fetch/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "js_fetch",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |       "test": "echo \"Error: no test specified\" && exit 1",
 8 |       "start": "node server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC"
12 | }
13 | 


--------------------------------------------------------------------------------
/prog/js_fetch/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const app = express();
 3 | 
 4 | app.use(express.static('client'));
 5 | 
 6 | let instruments = [ 'piano', 'concertina', 'double bass'];
 7 | 
 8 | app.get('/list', function (req, resp){
 9 |     resp.send(instruments);
10 | });
11 | 
12 | app.listen(8090);
13 | 


--------------------------------------------------------------------------------
/prog/js_intro_d3/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # Introduction to d3
 4 | 
 5 | 
 6 | ---
 7 | 
 8 | ## What is d3?
 9 | 
10 | [Data-Driven Documents](https://d3js.org/)
11 | 
12 | @quote[D3.js is a JavaScript library for manipulating documents based on data]
13 | 
14 | @quote[exposing ... web standards such as HTML, SVG, and CSS]
15 | 
16 | 
17 | ---
18 | 
19 | ## How to use d3
20 | 
21 | Either download from [github](https://github.com/d3/d3)
22 | 
23 | Or link from your HTML page
24 | 
25 | ```
26 | <script src="https://d3js.org/d3.v5.js"></script>
27 | ```
28 | ---
29 | 
30 | ## First example
31 | 
32 | ```
33 | d3.select("body")
34 |   .selectAll("p")
35 |   .data([4, 8, 15, 16, 23, 42])
36 |   .text(function(d) { return "I'm number " + d + "!"; });
37 | ```
38 | 
39 | See this in [example1.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_intro_d3/example1.html)
40 | 
41 | ---
42 | 
43 | ## What is happening?
44 | 
45 | - `d3` is an object that contains functions we can use
46 | - results of functions being applied are chained
47 | - parts of the HTML DOM are being [selected](https://github.com/d3/d3/blob/master/API.md#selections-d3-selection)
48 | - data are being [joined to elements](https://github.com/d3/d3-selection/blob/v1.4.0/README.md#joining-data)
49 | - a function is applied to each element
50 | 
51 | ---
52 | 
53 | ## Not too interesting
54 | 
55 | @ul
56 | - This is (at best) textualization, not visualization
57 | - Use [Scalable Vector Graphics](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html) (SVG) elements
58 | - Not all of the data is being shown
59 | - Use `enter` function to add new elements
60 | @ulend
61 | 
62 | ---
63 | 
64 | ## What is SVG?
65 | 
66 | @ul
67 | - Scalable i.e. can be viewed at any resolution
68 | - Vector, as opposed to pixel-based (raster) images
69 | - Graphics, obviously
70 | - XML language
71 | - Can be embedded in HTML
72 | - Browser support is (now) good
73 | @ulend
74 | 
75 | ---
76 | 
77 | ## SVG in D3
78 | 
79 | Now we can select and change circle properties
80 | 
81 | ```
82 | d3.select("body")
83 |   .selectAll("circle")
84 |   .data([4, 8, 15, 16, 23, 42])
85 |   .attr("r", function(d) { return 5*Math.sqrt(d); });
86 | ```
87 | 
88 | See [example2.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_intro_d3/example2.html)
89 | 
90 | 
91 | 
92 | 
93 | 
94 | 
95 | 


--------------------------------------------------------------------------------
/prog/js_intro_d3/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/js_intro_d3/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Introduction to d3
 3 | 
 4 | 
 5 | 
 6 | ## What is d3?
 7 | 
 8 | [Data-Driven Documents](https://d3js.org/)
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | ## How to use d3
15 | 
16 | Either download from [github](https://github.com/d3/d3)
17 | 
18 | Or link from your HTML page
19 | 
20 | ```
21 | <script src="https://d3js.org/d3.v5.js"></script>
22 | ```
23 | 
24 | ## First example
25 | 
26 | ```
27 | d3.select("body")
28 |   .selectAll("p")
29 |   .data([4, 8, 15, 16, 23, 42])
30 |   .text(function(d) { return "I'm number " + d + "!"; });
31 | ```
32 | 
33 | See this in [example1.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_intro_d3/example1.html)
34 | 
35 | 
36 | ## What is happening?
37 | 
38 | - `d3` is an object that contains functions we can use
39 | - results of functions being applied are chained
40 | - parts of the HTML DOM are being [selected](https://github.com/d3/d3/blob/master/API.md#selections-d3-selection)
41 | - data are being [joined to elements](https://github.com/d3/d3-selection/blob/v1.4.0/README.md#joining-data)
42 | - a function is applied to each element
43 | 
44 | 
45 | ## Not too interesting
46 | 
47 | - This is (at best) textualization, not visualization
48 | - Use [Scalable Vector Graphics](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html) (SVG) elements
49 | - Not all of the data is being shown
50 | - Use `enter` function to add new elements
51 | 
52 | 
53 | ## What is SVG?
54 | 
55 | - Scalable i.e. can be viewed at any resolution
56 | - Vector, as opposed to pixel-based (raster) images
57 | - Graphics, obviously
58 | - XML language
59 | - Can be embedded in HTML
60 | - Browser support is (now) good
61 | 
62 | 
63 | ## SVG in D3
64 | 
65 | Now we can select and change circle properties
66 | 
67 | ```
68 | d3.select("body")
69 |   .selectAll("circle")
70 |   .data([4, 8, 15, 16, 23, 42])
71 |   .attr("r", function(d) { return 5*Math.sqrt(d); });
72 | ```
73 | 
74 | See [example2.html](https://github.com/stevenaeola/gitpitch/blob/master/prog/js_intro_d3/example2.html)
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 


--------------------------------------------------------------------------------
/prog/js_intro_d3/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_intro_d3/example1.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://d3js.org/d3.v5.js"></script>
 5 |   </head>
 6 |   <body>
 7 |     <p>I'm a paragraph</p>
 8 |     <p>I'm another one</p>
 9 |     <p>I'm yet another one</p>
10 |   </body>
11 |   <script src="example1.js"></script>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/prog/js_intro_d3/example1.js:
--------------------------------------------------------------------------------
1 | d3.select("body")
2 |   .selectAll("p")
3 |   .data([4, 8, 15, 16, 23, 42])
4 |   .text(function(d) { return "I'm number " + d + "!"; });
5 | 


--------------------------------------------------------------------------------
/prog/js_intro_d3/example2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://d3js.org/d3.v5.js"></script>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="720" height="120">
 8 |       <circle cx="40" cy="60" r="10"></circle>
 9 |       <circle cx="80" cy="60" r="10"></circle>
10 |       <circle cx="120" cy="60" r="10"></circle>
11 |     </svg>
12 |   </body>
13 |   <script src="example2.js"></script>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/prog/js_intro_d3/example2.js:
--------------------------------------------------------------------------------
1 | d3.select("body")
2 |   .selectAll("circle")
3 |   .data([4, 8, 15, 16, 23, 42])
4 |   .attr("r", function(d) { return 5*Math.sqrt(d); });
5 | 


--------------------------------------------------------------------------------
/prog/js_intro_node/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/js_intro_node/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_intro_node/express_parameters.js:
--------------------------------------------------------------------------------
 1 | var express = require('express')
 2 | var app = express()
 3 | 
 4 | app.get('/random/:max', function(req, resp){
 5 |   max = parseInt(req.params.max)
 6 |   rand = Math.floor(Math.random()*max) +1
 7 |   console.log('Max via url is ' + max + ' rand is ' + rand)
 8 |   resp.send('' + rand)
 9 | })
10 | 
11 | app.get('/r', function(req, resp){
12 |   max = parseInt(req.query.max)
13 |   rand = Math.floor(Math.random()*max) +1
14 |   console.log('Max via query is ' + max + ' rand is ' + rand)
15 |   resp.send('' + rand)
16 | })
17 | 
18 | app.listen(8090)
19 | 


--------------------------------------------------------------------------------
/prog/js_intro_node/express_routing.js:
--------------------------------------------------------------------------------
1 | var express = require('express')
2 | var app = express()
3 | 
4 | app.get('/', function(req, resp){
5 |   resp.send('Hello world')
6 | })
7 | 
8 | app.listen(8090)
9 | 


--------------------------------------------------------------------------------
/prog/js_intro_node/hello.js:
--------------------------------------------------------------------------------
1 | console.log("Goodbye cruel world");
2 | 


--------------------------------------------------------------------------------
/prog/js_intro_node/hello_events.js:
--------------------------------------------------------------------------------
 1 | var events = require('events');
 2 | var e = new events.EventEmitter();
 3 | 
 4 | function say(data){
 5 |   console.log("Hello " + data)
 6 |   e.emit('done')
 7 | }
 8 | 
 9 | e.on('say', say);
10 | 
11 | e.on('done', function(){
12 |   console.log('Message done');
13 | })
14 | 
15 | e.emit('say', 'world');
16 | 
17 | console.log('Program done');
18 | 


--------------------------------------------------------------------------------
/prog/js_intro_node/webserver.js:
--------------------------------------------------------------------------------
 1 | http = require("http")
 2 | 
 3 | http.createServer(function (request, response) {
 4 |     response.writeHead(200, {'Content-Type': 'text/plain'});
 5 |     response.end('Hello World\n');
 6 |     console.log("request received");
 7 | }).listen(8080);
 8 | 
 9 | console.log('Server running at http://127.0.0.1:8080/');
10 | 


--------------------------------------------------------------------------------
/prog/js_intro_p5/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # Introduction to Javascript with p5.js
  4 | 
  5 | ---
  6 | 
  7 | ## [History](https://app.pluralsight.com/player?name=javascript-good-parts-m2&mode=live&clip=0&course=javascript-good-parts&author=douglas-crockford) 
  8 | 
  9 | @ul
 10 | - Originally in browsers
 11 | - Not Java
 12 | - It has some good parts
 13 | - Standardised by Ecma (once ECMA) as EcmaScript
 14 | - Current version is ES8 (2018)
 15 | - Most recent widely-supported version is ES6 (2015)
 16 | - [Support varies](http://kangax.github.io/compat-table/es6/)
 17 | @ulend
 18 | 
 19 | ---
 20 | 
 21 | ## Client- and server- side
 22 | 
 23 | @ul
 24 | - Recently JS is also used server-side: nodejs
 25 | - Good JS engines in mobile browsers
 26 | - JS often used for cross-platform App dev [Cordova](https://cordova.apache.org/)
 27 | - Also for desktop applications with [electron](https://electronjs.org/) e.g. [atom](https://atom.io/)
 28 | - Interpreted, not compiled: errors only happen at run-time
 29 | - `console.log` is your friend
 30 | @ulend
 31 | 
 32 | ---
 33 | 
 34 | ## Hello world
 35 | 
 36 | - Embed javascript in a web page
 37 | - Use `script` tag
 38 | ```HTML
 39 | <html>
 40 |   <script>
 41 |     console.log("Hello World")
 42 |   </script>
 43 | </html>
 44 | ```
 45 | 
 46 | ---
 47 | 
 48 | ## What just happened?
 49 | 
 50 | Nothing?
 51 | 
 52 | Looks the same as this
 53 | ```HTML
 54 | <html>
 55 |   <script>
 56 |     vljbsv123456789!@£$%^&*
 57 |   </script>
 58 | </html>
 59 | ```
 60 | 
 61 | Use developer tools to see the console output and error
 62 | 
 63 | ---
 64 | 
 65 | ## Hello again
 66 | 
 67 | In the browser we can also use the `alert` function
 68 | ```HTML
 69 | <html>
 70 |   <script>
 71 |     alert("Hello World")
 72 |   </script>
 73 | </html>
 74 | ```
 75 | Can run in browser as file, not just with http
 76 | 
 77 | ---
 78 | 
 79 | ## Importing code
 80 | 
 81 | 
 82 | - Link to external javascript code with `src` attribute
 83 | - Usually placed in `head`
 84 | - Can refer to files in same source
 85 | - Can refer to external files via http
 86 | - Content Delivery Networks (CDN)
 87 | ```HTML
 88 | <script
 89 |   src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js">
 90 |   </script>
 91 | ```
 92 | 
 93 | ---?image=https://p5js.org/assets/img/p5js.svg&size=25%&position=top
 94 | 
 95 | 
 96 | @quote[p5.js is a JavaScript library ... to make coding accessible for artists, designers, educators and beginners]
 97 | 
 98 | <https://p5js.org/>
 99 | 
100 | ---?gist=stevenaeola/318210d2868dc2dbc8d085f9630ba97b&lang=HTML&title=p5 Minimal example
101 | 
102 | 
103 | ---?gist=stevenaeola/8354ae0e916982f1320c908f1ed279a8&lang=HTML&title=p5 More interesting
104 | 
105 | ---
106 | 
107 | ## Using p5
108 | 
109 | - p5 provides some (global) functions and variables
110 | - Details given at <https://p5js.org/reference/>
111 | - Tutorials at <https://p5js.org/learn/>
112 | - Nice example at <https://www.openprocessing.org/>
113 | 


--------------------------------------------------------------------------------
/prog/js_intro_p5/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | highlight: docco


--------------------------------------------------------------------------------
/prog/js_intro_p5/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_intro_p5/index1.html:
--------------------------------------------------------------------------------
1 | <html>
2 |   <script>
3 |     console.log("Hello World")
4 |   </script>
5 | </html>
6 | 


--------------------------------------------------------------------------------
/prog/js_intro_p5/index2.html:
--------------------------------------------------------------------------------
1 | <html>
2 |   <script>
3 |     vljbsv123456789!@£$%^&*
4 |   </script>
5 | </html>
6 | 


--------------------------------------------------------------------------------
/prog/js_intro_p5/index3.html:
--------------------------------------------------------------------------------
1 | <html>
2 |   <script>
3 |     alert("Hello World")
4 |   </script>
5 | </html>
6 | 


--------------------------------------------------------------------------------
/prog/js_intro_p5/index4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js">
 5 |     </script>
 6 |     <script type="application/javascript">
 7 |       function setup() {
 8 |       }
 9 |       function draw() {
10 | 	       ellipse(50, 50, 80, 80);
11 |       }
12 |   </script>
13 |   </head>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/prog/js_intro_p5/index5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
 5 |     <script type="application/javascript">
 6 |      function setup() {
 7 | 	 createCanvas(640, 480);
 8 |      }
 9 | 
10 |      function draw() {
11 | 	 background(0,10);
12 | 	 if (mouseIsPressed) {
13 | 	     fill(0);
14 | 	 } else {
15 | 	     fill(255);
16 | 	 }
17 | 	 ellipse(mouseX, mouseY, 80, 80);
18 |      }
19 |     </script>
20 |   </head>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/prog/js_objects/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # Javascript Objects
  4 | 
  5 | ---
  6 | 
  7 | ## Collection of properties
  8 | 
  9 | Each property is named (with a key) and has a value
 10 | 
 11 | In object literal notation (like JavaScript Object Notation (JSON)) we can write
 12 | 
 13 | ```
 14 | let ball = {x: 200, y: 300, radius: 50};
 15 | ```
 16 | 
 17 | ---
 18 | 
 19 | ## obj.prop
 20 | 
 21 | Access properties like this
 22 | 
 23 | ```
 24 | ball.x += 5;
 25 | ball.z = 8;
 26 | ball["colour"] = "red";
 27 | 
 28 | ```
 29 | 
 30 | ---
 31 | 
 32 | ## Function-valued properties
 33 | 
 34 | Object properties can be any type, including functions
 35 | 
 36 | ```
 37 | ball.draw = function(){ alert("I am a ball");}
 38 | ball.draw();
 39 | ```
 40 | 
 41 | ---
 42 | 
 43 | ## this
 44 | 
 45 | `this` refers to the object it was called on
 46 | 
 47 | ```
 48 | ball.draw = function(){
 49 |     alert("I am a ball this big: " + this.radius);
 50 | }
 51 | ball.draw();
 52 | 
 53 | ```
 54 | 
 55 | ---
 56 | ## of and in
 57 | 
 58 | In a `for` loop over a list you can use `of`
 59 | ```
 60 | for (let x of [1,2,3]){console.log(x)}
 61 | ```
 62 | 
 63 | In a `for` loop over an object you can use `in` (gives keys)
 64 | ```
 65 | const me = {name: 'Steven', game: 'Lecturer'};
 66 | for(let k in me){
 67 |     console.log('I have a ' + k);
 68 |     console.log('It is ' + me[k]);
 69 | }
 70 | ```
 71 | 
 72 | ---
 73 | 
 74 | ## Prototypal Inheritance
 75 | 
 76 | @ul
 77 | - Every object has a property `\_\_proto\_\_` which refers to another object
 78 | - If a property isn't found in an object's own properties, then `\_\_proto\_\_` is checked
 79 | - Every function has a property `prototype` which is used when creating an object
 80 | - The `new` keyword is used with a constructor function to create an object and set its `\_\_proto\_\_`
 81 | - Read more at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
 82 | @ulend
 83 | 
 84 | ---
 85 | 
 86 | ## Inheriting behaviour
 87 | 
 88 | @ul
 89 | - In other languages (e.g Java, C#) every object belongs to a *class*
 90 |     - Data values (fields) are associated with objects
 91 |     - Behaviour (methods) are associated with classes
 92 | - Things of the same type (class) can do the same things
 93 | - JS is more flexible: each object can define its own behaviour
 94 | - JS allows inheritance (common behaviour) through prototypes
 95 | @ulend
 96 | 
 97 | ---
 98 | 
 99 | - Java uses *class-based inheritance*
100 | - JS use *prototypal inheritance*
101 | 
102 | 
103 | ---
104 | 
105 | ## Emulating classes in JS
106 | 
107 | [Simple syntax for constructors and prototype functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
108 | 
109 | ```
110 | class Ball{
111 |    constructor(x, y, r){
112 |       this.x = x;
113 |       this.y = y;
114 |       this.radius = r;
115 |    }
116 |    draw(){
117 |        alert("I am a ball this big: " + this.radius);
118 |    }
119 | }
120 | let b = new Ball(400,300,20);
121 | b.draw();
122 | 
123 | ```
124 | 
125 | ---
126 | 
127 | ## Why classes?
128 | 
129 | @ul
130 | - Reduces cut-and-paste: eases maintenance
131 | - Encourages *encapsulation*: hide the details so they can be changed easily
132 | - No global variables: no clashes
133 | - Make reusable components with classes
134 | - Reuse in the same project (multiple balls) or in different projects
135 | @ulend
136 | 


--------------------------------------------------------------------------------
/prog/js_objects/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/js_objects/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Javascript Objects
  3 | 
  4 | 
  5 | ## Collection of properties
  6 | 
  7 | Each property is named (with a key) and has a value
  8 | 
  9 | In object literal notation (like JavaScript Object Notation (JSON)) we can write
 10 | 
 11 | ```
 12 | let ball = {x: 200, y: 300, radius: 50};
 13 | ```
 14 | 
 15 | 
 16 | ## obj.prop
 17 | 
 18 | Access properties like this
 19 | 
 20 | ```
 21 | ball.x += 5;
 22 | ball.z = 8;
 23 | ball["colour"] = "red";
 24 | 
 25 | ```
 26 | 
 27 | 
 28 | ## Function-valued properties
 29 | 
 30 | Object properties can be any type, including functions
 31 | 
 32 | ```
 33 | ball.draw = function(){ alert("I am a ball");}
 34 | ball.draw();
 35 | ```
 36 | 
 37 | 
 38 | ## this
 39 | 
 40 | `this` refers to the object it was called on
 41 | 
 42 | ```
 43 | ball.draw = function(){
 44 |     alert("I am a ball this big: " + this.radius);
 45 | }
 46 | ball.draw();
 47 | 
 48 | ```
 49 | 
 50 | ## of and in
 51 | 
 52 | In a `for` loop over a list you can use `of`
 53 | ```
 54 | for (let x of [1,2,3]){console.log(x)}
 55 | ```
 56 | 
 57 | In a `for` loop over an object you can use `in` (gives keys)
 58 | ```
 59 | const me = {name: 'Steven', game: 'Lecturer'};
 60 | for(let k in me){
 61 |     console.log('I have a ' + k);
 62 |     console.log('It is ' + me[k]);
 63 | }
 64 | ```
 65 | 
 66 | 
 67 | ## Prototypal Inheritance
 68 | 
 69 | - Every object has a property `\_\_proto\_\_` which refers to another object
 70 | - If a property isn't found in an object's own properties, then `\_\_proto\_\_` is checked
 71 | - Every function has a property `prototype` which is used when creating an object
 72 | - The `new` keyword is used with a constructor function to create an object and set its `\_\_proto\_\_`
 73 | - Read more at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
 74 | 
 75 | 
 76 | ## Inheriting behaviour
 77 | 
 78 | - In other languages (e.g Java, C#) every object belongs to a *class*
 79 |     - Data values (fields) are associated with objects
 80 |     - Behaviour (methods) are associated with classes
 81 | - Things of the same type (class) can do the same things
 82 | - JS is more flexible: each object can define its own behaviour
 83 | - JS allows inheritance (common behaviour) through prototypes
 84 | 
 85 | 
 86 | - Java uses *class-based inheritance*
 87 | - JS use *prototypal inheritance*
 88 | 
 89 | 
 90 | 
 91 | ## Emulating classes in JS
 92 | 
 93 | [Simple syntax for constructors and prototype functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
 94 | 
 95 | ```
 96 | class Ball{
 97 |    constructor(x, y, r){
 98 |       this.x = x;
 99 |       this.y = y;
100 |       this.radius = r;
101 |    }
102 |    draw(){
103 |        alert("I am a ball this big: " + this.radius);
104 |    }
105 | }
106 | let b = new Ball(400,300,20);
107 | b.draw();
108 | 
109 | ```
110 | 
111 | 
112 | ## Why classes?
113 | 
114 | - Reduces cut-and-paste: eases maintenance
115 | - Encourages *encapsulation*: hide the details so they can be changed easily
116 | - No global variables: no clashes
117 | - Make reusable components with classes
118 | - Reuse in the same project (multiple balls) or in different projects
119 | 
120 | 
121 | ## git revisited: basic branching
122 | 
123 | - create a branch with `git branch iss52`
124 | - check it out with `git checkout iss52`
125 | - do some work, `add` and `commit`
126 | - go back to the main branch: `git checkout main`
127 | - merge your branch: `git merge iss52`
128 | - delete your branch: `git branch -d iss52`
129 | 
130 | 
131 | ## What is the point of all that?
132 | 
133 | - Different people can work on different features
134 | - Before merging you can update with `git pull`
135 | - Automatically merges and identifies issues
136 | - See also [`git rebase`](https://git-scm.com/book/en/v2/Git-Branching-Rebasing)
137 | 
138 | 


--------------------------------------------------------------------------------
/prog/js_objects/ball/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
 5 | 
 6 |   </head>
 7 | 
 8 |   <body>
 9 | 
10 |     <svg id='container' viewBox="0 0 400 400">
11 |     </svg>
12 |         <script  type="text/javascript" src="index.js"></script>
13 | 
14 |   </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/prog/js_objects/ball/index.js:
--------------------------------------------------------------------------------
 1 | var cx = 100;
 2 | var cy = 200;
 3 | var radius = 50;
 4 | 
 5 | function draw() {
 6 |   d3.select("svg").append("ellipse").attr("cx", cx).attr("cy",cy)
 7 |     .attr("rx",radius).attr("ry",radius);
 8 | }
 9 | 
10 | draw();
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/prog/js_objects/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/js_objects/index.html:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/prog/js_security/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # Authentication and Security
  4 | 
  5 | ---
  6 | 
  7 | ## Outline
  8 | 
  9 | * Attack types
 10 | * OAuth (for brute force)
 11 | * CORS (for XSS)
 12 | * Accessing external services
 13 | 
 14 | ---
 15 | 
 16 | ## Security issues
 17 | 
 18 | Very many! See [OWASP](https://www.owasp.org/index.php/Main_Page).
 19 | 
 20 | Common attacks include
 21 | @ul
 22 | * [Brute force](https://www.owasp.org/index.php/Brute_force_attack)
 23 | * [Cross-site Scripting (XSS)]( https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 )
 24 | * [(Distributed) Denial of service](https://www.owasp.org/index.php/Denial_of_Service)
 25 | * [SQL injection](https://www.owasp.org/index.php/SQL_Injection)
 26 | * The user e.g. [Jeff Bezos](https://www.bbc.co.uk/news/technology-47253869)
 27 | @ulend
 28 | 
 29 | ---
 30 | 
 31 | ## Brute force
 32 | 
 33 | @ul
 34 | * Username/password combinations can be guessed
 35 | * People reuse passwords
 36 | * Hashing helps to prevent password stealing
 37 | * But [SHA1 is broken](https://security.googleblog.com/2017/02/announcing-first-sha1-collision.html)
 38 | * Dictionary attacks and rainbow attacks: use salting
 39 | * See also [multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) and [WebAuthn](https://www.w3.org/TR/webauthn/)
 40 | @ulend
 41 | 
 42 | ---
 43 | 
 44 | ## OAuth
 45 | 
 46 | @ul
 47 | * It's very easy to do auth wrong
 48 | * [OAuth](https://oauth.net/) is [industry standard protocol](https://tools.ietf.org/html/rfc6749)
 49 | * Authentication server issues authorization code and access token
 50 | * Authentication server could be
 51 |   * Same service
 52 |   * Separate microservice
 53 |   * Remote service
 54 | @ulend
 55 | 
 56 | ---
 57 | 
 58 | Thanks to [Amit Kumar Gupta](https://stackoverflow.com/users/453767/amit-kumar-gupta)
 59 | 
 60 | [Message Sequence Chart for OAuth](https://i.stack.imgur.com/lrLe3.png)
 61 | 
 62 | ---
 63 | 
 64 | ## External Authentication
 65 | 
 66 | Using external service is a good idea
 67 | @ul
 68 | * It reduces the likelihood of making a mistake
 69 | * More likely to be kept up to date
 70 | * Can be integrated with MFA
 71 | * Can reduce the number of username/passwords to remember
 72 | * Could choose one ([facebook](https://developers.facebook.com/docs/facebook-login/), [google](https://developers.google.com/identity/), [linkedin](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authentication), [github](https://developer.github.com/v3/auth/))
 73 | * Could choose generic provider e.g. [auth0](https://auth0.com/)
 74 | @ulend
 75 | 
 76 | Do not attempt to do this yourself
 77 | 
 78 | ---
 79 | 
 80 | ## XSS and CORS
 81 | 
 82 | @ul
 83 | * User-provided content may be malicious
 84 | * Might redirect from trusted source or access trusted data
 85 | * Mitigate by
 86 |   * Sanitizing input and
 87 |   * Stopping cross-domain requests (fetch)
 88 | * Causes problems when accessing external web services
 89 |   * Use [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) or
 90 |   * Make the request from the server ([node-fetch](https://www.npmjs.com/package/node-fetch))
 91 | @ulend
 92 | 
 93 | ---
 94 | 
 95 | ## Accessing External Web Services
 96 | 
 97 | * You may need to use OAuth to access
 98 | * You will need to use CORS/server requests to get into browser
 99 | * External OAuth service is a good idea
100 | 
101 | 
102 | 
103 | 


--------------------------------------------------------------------------------
/prog/js_security/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Authentication and Security
 3 | 
 4 | 
 5 | ## Outline
 6 | 
 7 | * Attack types
 8 | * OAuth (for brute force)
 9 | * CORS (for XSS)
10 | * Accessing external services
11 | 
12 | 
13 | ## Security issues
14 | 
15 | Very many! See [OWASP](https://www.owasp.org/index.php/Main_Page).
16 | 
17 | Common attacks include
18 | * [Brute force](https://www.owasp.org/index.php/Brute_force_attack)
19 | * [Cross-site Scripting (XSS)]( https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 )
20 | * [(Distributed) Denial of service](https://www.owasp.org/index.php/Denial_of_Service)
21 | * [SQL injection](https://www.owasp.org/index.php/SQL_Injection)
22 | * The user e.g. [Jeff Bezos](https://www.bbc.co.uk/news/technology-47253869)
23 | 
24 | 
25 | ## Brute force
26 | 
27 | * Username/password combinations can be guessed
28 | * People reuse passwords
29 | * Hashing helps to prevent password stealing
30 | * But [SHA1 is broken](https://security.googleblog.com/2017/02/announcing-first-sha1-collision.html)
31 | * Dictionary attacks and rainbow attacks: use salting
32 | * See also [multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) and [WebAuthn](https://www.w3.org/TR/webauthn/)
33 | 
34 | 
35 | ## OAuth
36 | 
37 | * It's very easy to do auth wrong
38 | * [OAuth](https://oauth.net/) is [industry standard protocol](https://tools.ietf.org/html/rfc6749)
39 | * Authentication server issues authorization code and access token
40 | * Authentication server could be
41 |   * Same service
42 |   * Separate microservice
43 |   * Remote service
44 | 
45 | 
46 | Thanks to [Amit Kumar Gupta](https://stackoverflow.com/users/453767/amit-kumar-gupta)
47 | 
48 | [Message Sequence Chart for OAuth](https://i.stack.imgur.com/lrLe3.png)
49 | 
50 | 
51 | ## External Authentication
52 | 
53 | Using external service is a good idea
54 | * It reduces the likelihood of making a mistake
55 | * More likely to be kept up to date
56 | * Can be integrated with MFA
57 | * Can reduce the number of username/passwords to remember
58 | * Could choose one ([facebook](https://developers.facebook.com/docs/facebook-login/), [google](https://developers.google.com/identity/), [linkedin](https://docs.microsoft.com/en-us/linkedin/shared/authentication/authentication), [github](https://developer.github.com/v3/auth/))
59 | * Could choose generic provider e.g. [auth0](https://auth0.com/)
60 | 
61 | Do not attempt to do this yourself
62 | 
63 | 
64 | ## XSS and CORS
65 | 
66 | * User-provided content may be malicious
67 | * Might redirect from trusted source or access trusted data
68 | * Mitigate by
69 |   * Sanitizing input and
70 |   * Stopping cross-domain requests (fetch)
71 | * Causes problems when accessing external web services
72 |   * Use [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) or
73 |   * Make the request from the server ([node-fetch](https://www.npmjs.com/package/node-fetch))
74 | 
75 | 
76 | ## Accessing External Web Services
77 | 
78 | * You may need to use OAuth to access
79 | * You will need to use CORS/server requests to get into browser
80 | * External OAuth service is a good idea
81 | 
82 | 
83 | 
84 | 


--------------------------------------------------------------------------------
/prog/js_security/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/nix/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # UNIX: history and usage
 4 | 
 5 | ---
 6 | 
 7 | ![UNIX: live free or die](media/livefree.png)
 8 | 
 9 | ---
10 | 
11 | @snap[east sidebar]
12 | ![50s fashion](media/50s.png)
13 | @snapend
14 | 
15 | ## 1958
16 | 
17 | Antitrust case settlement forbids AT&T from them selling computer products
18 | 


--------------------------------------------------------------------------------
/prog/nix/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme-override : media/layout.css


--------------------------------------------------------------------------------
/prog/nix/media/50s.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/nix/media/50s.png


--------------------------------------------------------------------------------
/prog/nix/media/layout.css:
--------------------------------------------------------------------------------
1 | .sidebar img {
2 |   width: 25%;
3 | }
4 | 
5 | 


--------------------------------------------------------------------------------
/prog/nix/media/livefree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/nix/media/livefree.png


--------------------------------------------------------------------------------
/prog/nix/nix.pptx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/nix/nix.pptx


--------------------------------------------------------------------------------
/prog/nodejs_rest/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # REST: 
 4 | ## [Representational State Transfer](https://en.wikipedia.org/wiki/Representational_state_transfer)
 5 | 
 6 | ---
 7 | 
 8 | ## Summary
 9 | 
10 | - Architectural style for web services
11 | - Provides interoperability (language independent)
12 | - Uses http methods (GET, POST, PUT, DELETE ...)
13 | - Like function call
14 |   - Parameters provided in URL (GET) or body (POST) 
15 |   - Results provided in body
16 | - Published as an API e.g. [twitter](https://developer.twitter.com/en/docs/api-reference-index), [github](https://developer.github.com/v3/), [gmail](https://developers.google.com/gmail/api/v1/reference/)
17 | 
18 | ---
19 | 
20 | ## Implementing a REST API in nodejs
21 | 
22 | - Think about your entities
23 | - GET methods for listing/searching and detail
24 | - POST method(s) for adding/updating
25 | - DELETE method (not necessary for the assignment)
26 | - Need to thing about http response code e.g.
27 |   - 200 for OK (sent by default in express)
28 |   - 403 for unauthorised
29 |   - 400 for other request error
30 | - Extract parameters; send response
31 | 
32 | ---
33 | 
34 | ## REST parameters
35 | 
36 | - For GET methods we have [already talked about this](https://github.com/stevenaeola/gitpitch/tree/master/prog/js_intro_node)
37 | - For POST methods you may need to [configure body parser](https://github.com/stevenaeola/proglabs_js/tree/master/node_routing)
38 | 
39 | ```
40 | app.use(express.urlencoded());
41 | ```
42 | 
43 | - Access values with `req.body.var_name`
44 | 
45 | See also [tutorial on nodejs to build a REST API](https://codeburst.io/node-js-by-example-part-1-668376cd4f96)
46 | 
47 | ---
48 | 
49 | ## REST and Single Page App
50 | 
51 | - In a single page app reduce traffic by updating content rather than reloading
52 | - Access REST methods directly from client (using fetch)
53 | - Problem: if we use a form it gets submitted and loads 'action' page
54 | - Solution: stop default form action (client-side)
55 | ```
56 | event.preventDefault();
57 | ```
58 | 
59 | or
60 | 
61 | ```
62 | event.stopPropogation();
63 | ```
64 | 
65 | 


--------------------------------------------------------------------------------
/prog/nodejs_rest/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/nodejs_rest/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # REST: 
 3 | ## [Representational State Transfer](https://en.wikipedia.org/wiki/Representational_state_transfer)
 4 | 
 5 | 
 6 | ## Summary
 7 | 
 8 | - Architectural style for web services
 9 | - Provides interoperability (language independent)
10 | - Uses http methods (GET, POST, PUT, DELETE ...)
11 | - Like function call
12 |   - Parameters provided in URL (GET) or body (POST) 
13 |   - Results provided in body
14 | - Published as an API e.g. [twitter](https://developer.twitter.com/en/docs/api-reference-index), [github](https://developer.github.com/v3/), [gmail](https://developers.google.com/gmail/api/v1/reference/)
15 | 
16 | 
17 | ## Implementing a REST API in nodejs
18 | 
19 | - Think about your entities
20 | - GET methods for listing/searching and detail
21 | - POST method(s) for adding/updating
22 | - DELETE method (not necessary for the assignment)
23 | - Need to thing about http response code e.g.
24 |   - 200 for OK (sent by default in express)
25 |   - 403 for unauthorised
26 |   - 400 for other request error
27 | - Extract parameters; send response
28 | 
29 | 
30 | ## REST parameters
31 | 
32 | - For GET methods we have [already talked about this](https://github.com/stevenaeola/gitpitch/tree/master/prog/js_intro_node)
33 | - For POST methods you may need to [configure body parser](https://github.com/stevenaeola/proglabs_js/tree/master/node_routing)
34 | 
35 | ```
36 | app.use(express.urlencoded());
37 | ```
38 | 
39 | - Access values with `req.body.var_name`
40 | 
41 | See also [tutorial on nodejs to build a REST API](https://codeburst.io/node-js-by-example-part-1-668376cd4f96)
42 | 
43 | 
44 | ## REST and Single Page App
45 | 
46 | - In a single page app reduce traffic by updating content rather than reloading
47 | - Access REST methods directly from client (using fetch)
48 | - Problem: if we use a form it gets submitted and loads 'action' page
49 | - Solution: stop default form action (client-side)
50 | ```
51 | event.preventDefault();
52 | ```
53 | 
54 | or
55 | 
56 | ```
57 | event.stopPropogation();
58 | ```
59 | 
60 | 


--------------------------------------------------------------------------------
/prog/nodejs_rest/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/nodejs_testing/PITCHME.md:
--------------------------------------------------------------------------------
  1 | ---?color=#7E317B
  2 | 
  3 | # Testing nodejs REST
  4 | 
  5 | ---
  6 | 
  7 | ## Why testing?
  8 | 
  9 | @ul
 10 | - Does not prove the absence of bugs
 11 | - Can help identify existing bugs
 12 | - Can avoid introducing new bugs
 13 | - Repeated testing necessary in agile development
 14 | - Automated as far as possible
 15 | - It's in the assignment ...
 16 | @ulend
 17 | 
 18 | ---
 19 | 
 20 | ## Basic Approaches
 21 | 
 22 | - Using browser (manual)
 23 | - Using Postman (partly automatic)
 24 | - Using test scripts (automatic)
 25 | 
 26 | ---
 27 | 
 28 | ## Browser-based testing
 29 | 
 30 | - GET is easy: just type in URL
 31 | - POST is slightly harder: build HTML form
 32 | - Other http methods more difficult
 33 | 
 34 | ---
 35 | 
 36 | ## Postman
 37 | 
 38 | - Originally a chrome plugin
 39 | - Now a [web application](https://www.postman.com/) with Desktop Agent
 40 | - Define a set of requests in a collection
 41 | - Choose GET or POST (or other)
 42 | - Include body parameters for POST
 43 | - Use raw/JSON for JSON
 44 | - Can specify expected responses
 45 | 
 46 | ---
 47 | 
 48 | ## Test scripts
 49 | 
 50 | - There are very many JavaScript unit testing frameworks (mocha, jasmine, ava)
 51 | - I recommend using [Jest](https://jestjs.io/)
 52 | - Read a [2020 review](hhttps://medium.com/welldone-software/an-overview-of-javascript-testing-7ce7298b9870)
 53 | - Read about [tools in demand in 2020](https://blog.logrocket.com/most-in-demand-javascript-testing-tools-in-2020/)
 54 |   - Developed from [StateofJS](https://2019.stateofjs.com/)
 55 | - `npm install --save-dev jest`
 56 | - Tests are js programs (as in jUnit)
 57 | - Put tests in test directory or name .test.js
 58 | 
 59 | ---
 60 | 
 61 | ## Running tests
 62 | 
 63 | - Get it going first
 64 | - Use nodemon to auto-restart server
 65 | - Add test script to your package.json
 66 | - run test with npm test
 67 | - see some [example tests for thing](https://github.com/stevenaeola/gitpitch/blob/master/prog/nodejs_testing/app.test.js) 
 68 | 
 69 | ---
 70 | 
 71 | ## Separate out app from server
 72 | 
 73 | So that running tests does not launch the server
 74 | 
 75 | e.g. app.js file
 76 | ```
 77 | const express = require('express');
 78 | const app = express();
 79 | // ... add routes
 80 | module.exports = app;
 81 | 
 82 | ```
 83 | e.g. server.js file
 84 | ```
 85 | const app = require('./app');
 86 | app.listen(8090);
 87 | 
 88 | ```
 89 | 
 90 | ---
 91 | 
 92 | ## Test coverage
 93 | 
 94 | - In testing we try to improve quality
 95 | - Coverage measures how much functionality has been tested
 96 | - Could measure this in terms of
 97 |   - the space of possible inputs (black box)
 98 |   - the code that has been executed (white box)
 99 | - Unit testing combines the two
100 | - Need to think about  valid and invalid inputs
101 | 
102 | ---
103 | 
104 | ## Mocking
105 | 
106 | @ul
107 | - You want to avoid accessing live systems during tests
108 | - Reading may be brittle
109 | - Writing may be dangerous
110 | - Real system may not be developed yet
111 | - Replace access to live data using [mocking](https://en.wikipedia.org/wiki/Mock_object)
112 | - There are [specific jest functions for this](https://jestjs.io/docs/en/mock-functions.html)
113 | - If you intend to use a remote web service you should use mocking
114 | - Same for a remote database (e.g. Firebase) 
115 | 
116 | @ulend
117 | 


--------------------------------------------------------------------------------
/prog/nodejs_testing/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/nodejs_testing/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # Testing nodejs REST
  3 | 
  4 | 
  5 | ## Why testing?
  6 | 
  7 | - Does not prove the absence of bugs
  8 | - Can help identify existing bugs
  9 | - Can avoid introducing new bugs
 10 | - Repeated testing necessary in agile development
 11 | - Automated as far as possible
 12 | - It's in the assignment ...
 13 | 
 14 | 
 15 | ## Basic Approaches
 16 | 
 17 | - Using browser (manual)
 18 | - Using Postman (partly automatic)
 19 | - Using test scripts (automatic)
 20 | 
 21 | 
 22 | ## Browser-based testing
 23 | 
 24 | - GET is easy: just type in URL
 25 | - POST is slightly harder: build HTML form
 26 | - Other http methods more difficult
 27 | 
 28 | 
 29 | ## Postman
 30 | 
 31 | - Originally a chrome plugin
 32 | - Now a [web application](https://www.postman.com/) with Desktop Agent
 33 | - Define a set of requests in a collection
 34 | - Choose GET or POST (or other)
 35 | - Include body parameters for POST
 36 | - Use raw/JSON for JSON
 37 | - Can specify expected responses
 38 | 
 39 | 
 40 | ## Test scripts
 41 | 
 42 | - There are very many JavaScript unit testing frameworks (mocha, jasmine, ava)
 43 | - I recommend using [Jest](https://jestjs.io/)
 44 | - Read a [2020 review](hhttps://medium.com/welldone-software/an-overview-of-javascript-testing-7ce7298b9870)
 45 | - Read about [tools in demand in 2020](https://blog.logrocket.com/most-in-demand-javascript-testing-tools-in-2020/)
 46 |   - Developed from [StateofJS](https://2019.stateofjs.com/)
 47 | - `npm install --save-dev jest`
 48 | - Tests are js programs (as in jUnit)
 49 | - Put tests in test directory or name .test.js
 50 | 
 51 | 
 52 | ## Running tests
 53 | 
 54 | - Get it going first
 55 | - Use nodemon to auto-restart server
 56 | - Add test script to your package.json
 57 | - run test with npm test
 58 | - see some [example tests for thing](https://github.com/stevenaeola/gitpitch/blob/master/prog/nodejs_testing/app.test.js) 
 59 | 
 60 | 
 61 | ## Separate out app from server
 62 | 
 63 | So that running tests does not launch the server
 64 | 
 65 | e.g. app.js file
 66 | ```
 67 | const express = require('express');
 68 | const app = express();
 69 | // ... add routes
 70 | module.exports = app;
 71 | 
 72 | ```
 73 | e.g. server.js file
 74 | ```
 75 | const app = require('./app');
 76 | app.listen(8090);
 77 | 
 78 | ```
 79 | 
 80 | 
 81 | ## Test coverage
 82 | 
 83 | - In testing we try to improve quality
 84 | - Coverage measures how much functionality has been tested
 85 | - Could measure this in terms of
 86 |   - the space of possible inputs (black box)
 87 |   - the code that has been executed (white box)
 88 | - Unit testing combines the two
 89 | - Need to think about  valid and invalid inputs
 90 | 
 91 | 
 92 | ## Mocking
 93 | 
 94 | - You want to avoid accessing live systems during tests
 95 | - Reading may be brittle
 96 | - Writing may be dangerous
 97 | - Real system may not be developed yet
 98 | - Replace access to live data using [mocking](https://en.wikipedia.org/wiki/Mock_object)
 99 | - There are [specific jest functions for this](https://jestjs.io/docs/en/mock-functions.html)
100 | - If you intend to use a remote web service you should use mocking
101 | - Same for a remote database (e.g. Firebase) 
102 | 
103 | 


--------------------------------------------------------------------------------
/prog/nodejs_testing/app.test.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 'use strict';
 3 | 
 4 | const request = require('supertest');
 5 | const app = require('./app');
 6 | 
 7 | describe('Test the things service', () => {
 8 |     test('GET /thing/list succeeds', () => {
 9 |         return request(app)
10 | 	    .get('/thing/list')
11 | 	    .expect(200);
12 |     });
13 | 
14 |     test('GET /thing/list returns JSON', () => {
15 |         return request(app)
16 | 	    .get('/thing/list')
17 | 	    .expect('Content-type', /json/);
18 |     });
19 | 
20 |     test('GET /thing/list includes red hair', () => {
21 |         return request(app)
22 | 	    .get('/thing/list')
23 | 	    .expect(/red hair/);
24 |     });
25 | 
26 |     test('GET /thing/1 succeeds', () => {
27 |         return request(app)
28 | 	    .get('/thing/1')
29 | 	    .expect(200);
30 |     });
31 | 
32 |     test('GET /thing/1 returns JSON', () => {
33 |         return request(app)
34 | 	    .get('/thing/1')
35 | 	    .expect('Content-type', /json/);
36 |     });
37 | 
38 |     test('GET /thing/1 includes 40', () => {
39 |         return request(app)
40 | 	    .get('/thing/1')
41 | 	    .expect(/40/);
42 |     });
43 | 
44 |     test('POST /thing/add succeeds', () => {
45 |         const params = {'newthing': 'TechUp'};
46 |         return request(app)
47 |         .post('/thing/add')
48 |         .send(params)
49 | 	    .expect(200);
50 |     });
51 | });
52 | 


--------------------------------------------------------------------------------
/prog/nodejs_testing/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/nodejs_testing_post/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # Testing nodejs REST POST
 4 | 
 5 | ---
 6 | 
 7 | ## Summary
 8 | 
 9 | @ul
10 | - Use jest, as described in testing lecture
11 | - Make sure that testing is not going to break real data 
12 | - Consider using [jest functions for mocking](https://jestjs.io/docs/en/mock-functions.html)
13 | - Need to send the parameters appropriately
14 | - Need to test that the POST action has had the desired effect
15 | - See the code from [Monday session](https://github.com/stevenaeola/Prog1920/tree/master/Monday/routing)
16 | @ulend
17 | 
18 | ---
19 | 
20 | ## Sending POST parameters
21 | 
22 | Four main methods:
23 | 
24 | @ul
25 | - URL-encoded, in the body
26 |   - Can share endpoint with a standard HTML form
27 | - multipart form encoded, in the body
28 |   - Used for file attachments etc
29 | - URL-encoded, in the URL (like GET)
30 |   - Limits to data size due to URL limits
31 |   - This is how Twitter API does it
32 | - JSON, in the body
33 |   - Most powerful/flexible
34 | @ulend
35 | 
36 | ---
37 | 
38 | ## Parameters for `.post` 
39 | 
40 | @ul
41 | - URL-encoded, in the body
42 |   - Need to serialise parameters (turn into a string)
43 |   - Use separate `.send` method in supertest
44 | - multipart form encoded, in the body
45 |   - Use `.attach` (see [superagent](http://visionmedia.github.io/superagent/#multipart-requests))
46 | - URL-encoded, in the URL (like GET)
47 |   - Serialise parameters and attach to URL of `.post` method
48 | - JSON, in the body
49 |   - `.send` will automatically do JSON encoding
50 | @ulend
51 | 
52 | ---
53 | 
54 | ## Testing the effect of POST
55 | 
56 | @ul
57 | - Send a GET request to see if POST was successful
58 | - Need to wait for requests to finish within test method if sending multiple requests
59 | - Add `await` and `async` appropriately to achieve this
60 | @ulend
61 | 
62 | ---
63 | 
64 | # That's all folks
65 | 


--------------------------------------------------------------------------------
/prog/nodejs_testing_post/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/nodejs_testing_post/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Testing nodejs REST POST
 3 | 
 4 | 
 5 | ## Summary
 6 | 
 7 | - Use jest, as described in testing lecture
 8 | - Make sure that testing is not going to break real data 
 9 | - Consider using [jest functions for mocking](https://jestjs.io/docs/en/mock-functions.html)
10 | - Need to send the parameters appropriately
11 | - Need to test that the POST action has had the desired effect
12 | - See the code from [Monday session](https://github.com/stevenaeola/Prog1920/tree/master/Monday/routing)
13 | 
14 | 
15 | ## Sending POST parameters
16 | 
17 | Four main methods:
18 | 
19 | - URL-encoded, in the body
20 |   - Can share endpoint with a standard HTML form
21 | - multipart form encoded, in the body
22 |   - Used for file attachments etc
23 | - URL-encoded, in the URL (like GET)
24 |   - Limits to data size due to URL limits
25 |   - This is how Twitter API does it
26 | - JSON, in the body
27 |   - Most powerful/flexible
28 | 
29 | 
30 | ## Parameters for `.post` 
31 | 
32 | - URL-encoded, in the body
33 |   - Need to serialise parameters (turn into a string)
34 |   - Use separate `.send` method in supertest
35 | - multipart form encoded, in the body
36 |   - Use `.attach` (see [superagent](http://visionmedia.github.io/superagent/#multipart-requests))
37 | - URL-encoded, in the URL (like GET)
38 |   - Serialise parameters and attach to URL of `.post` method
39 | - JSON, in the body
40 |   - `.send` will automatically do JSON encoding
41 | 
42 | 
43 | ## Testing the effect of POST
44 | 
45 | - Send a GET request to see if POST was successful
46 | - Need to wait for requests to finish within test method if sending multiple requests
47 | - Add `await` and `async` appropriately to achieve this
48 | 
49 | 
50 | # That's all folks
51 | 


--------------------------------------------------------------------------------
/prog/nodejs_testing_post/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/oo_comparison/Java/Concertina.ctxt:
--------------------------------------------------------------------------------
 1 | #BlueJ class context
 2 | comment0.target=Concertina
 3 | comment1.params=maker\ serial
 4 | comment1.target=Concertina(java.lang.String,\ int)
 5 | comment2.params=buttons
 6 | comment2.target=void\ setButtons(int)
 7 | comment3.params=
 8 | comment3.target=int\ getButtons()
 9 | comment4.params=args
10 | comment4.target=void\ main(java.lang.String[])
11 | numComments=5
12 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/Java/Concertina.java:
--------------------------------------------------------------------------------
 1 | 
 2 | public class Concertina
 3 | {
 4 |     private String maker;
 5 |     private int serial;
 6 |     private int buttons;
 7 |     
 8 |     public Concertina(String maker, int serial){
 9 |         this.maker = maker;
10 |         this.serial = serial;
11 |     }
12 |     
13 |     public void setButtons(int buttons){
14 |         this.buttons = buttons;
15 |     }
16 |     
17 |     public int getButtons(){
18 |         return buttons;
19 |     }
20 |     
21 |     
22 |     public static void main(String args[]){
23 |         Concertina c = new Concertina("Wheatstone", 29999);
24 |         System.out.println(c);
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/Java/Java class, fields and constructor.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/oo_comparison/Java/Java class, fields and constructor.mov


--------------------------------------------------------------------------------
/prog/oo_comparison/Java/README.TXT:
--------------------------------------------------------------------------------
 1 | ------------------------------------------------------------------------
 2 | This is the project README file. Here, you should describe your project.
 3 | Tell the reader (someone who does not know anything about this project)
 4 | all he/she needs to know. The comments should usually include at least:
 5 | ------------------------------------------------------------------------
 6 | 
 7 | PROJECT TITLE:
 8 | PURPOSE OF PROJECT:
 9 | VERSION or DATE:
10 | HOW TO START THIS PROJECT:
11 | AUTHORS:
12 | USER INSTRUCTIONS:
13 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/Java/package.bluej:
--------------------------------------------------------------------------------
 1 | #BlueJ package file
 2 | editor.fx.0.height=722
 3 | editor.fx.0.width=800
 4 | editor.fx.0.x=198
 5 | editor.fx.0.y=127
 6 | objectbench.height=101
 7 | objectbench.width=461
 8 | package.divider.horizontal=0.6
 9 | package.divider.vertical=0.8007380073800738
10 | package.editor.height=427
11 | package.editor.width=674
12 | package.editor.x=520
13 | package.editor.y=225
14 | package.frame.height=600
15 | package.frame.width=800
16 | package.numDependencies=0
17 | package.numTargets=1
18 | package.showExtends=true
19 | package.showUses=true
20 | project.charset=UTF-8
21 | readme.height=58
22 | readme.name=@README
23 | readme.width=47
24 | readme.x=10
25 | readme.y=10
26 | target1.height=50
27 | target1.name=Concertina
28 | target1.showInterface=false
29 | target1.type=ClassTarget
30 | target1.typeParameters=
31 | target1.width=90
32 | target1.x=70
33 | target1.y=10
34 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/PITCHME.md:
--------------------------------------------------------------------------------
 1 | # OOP: Java vs python {data-background-color=#7E317B}
 2 | 
 3 | ---
 4 | 
 5 | ## Summary
 6 | 
 7 | ::: incremental
 8 | 
 9 | - Why object-orientation (OO)?
10 | - Key features of OO
11 | - How do these compare in Java and python
12 | 
13 | :::
14 | 
15 | 
16 | # Why not have one big file for your program? {data-background-color=#BE1E2D}
17 | 
18 | ---
19 | 
20 | ## OO helps maintenance
21 | 
22 | ::: incremental
23 | 
24 | - Smaller files makes for less reading
25 | - Separate files allows for shared development
26 | - Cohesion and coupling
27 | - Encapsulate for decoupling
28 |   - data (properties/fields)
29 |   - code (functions/methods)
30 | - Ease name clashes
31 | - Inheritance
32 | 
33 | :::
34 | 
35 | ---
36 | 
37 | ## python classes
38 | 
39 | - Everything is an object
40 | - Class-based, but classes are mutable
41 | - Classes are objects
42 | - Don't need one class for one file
43 | 
44 | --- 
45 | 
46 | ## python methods
47 | 
48 | - No visibility modifiers (underscore convention)
49 | - Functions become methods via the class
50 | - Need to include `self` as first parameter (also in constructors)
51 | ```
52 | x.m(a)
53 | ```
54 | is the same as
55 | ```
56 | c.m(x,a)
57 | ```
58 | where `x` is in class `c`
59 | 
60 | 
61 | ---
62 | 
63 | ## python fields
64 | 
65 | - Don't exist independently
66 | - Class properties are like java statics
67 | 
68 | ---
69 | 
70 | ## Differences to Java
71 | 
72 | - No static types
73 | - Constructors called with class name (not `new`)
74 | - Multiple inheritance is allowed
75 | - Lists are polymorphic, use array syntax
76 | - See [concertina.py](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/oo_comparison/Python/concertina.py) and [Concertina.java](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/oo_comparison/Java/Concertina.java)
77 | 
78 | ---
79 | 
80 | ## Java programmers look away now
81 | 
82 | > Java programmers will wrinkle their brows, screw up their noses, or even scream with horror when they read the following: The Pythonic way to introduce attributes is to make them public.
83 | 
84 | From [OOP Python Tutorial](https://www.python-course.eu/python3_properties.php)
85 | 
86 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | ../PITCHME.yaml


--------------------------------------------------------------------------------
/prog/oo_comparison/Python/concertina.py:
--------------------------------------------------------------------------------
1 | class Concertina:
2 |     def __init__(self, maker, serial):
3 |         self.maker = maker
4 |         self.serial = serial
5 |         
6 | c = Concertina("Wheatsone", 29999)
7 | print(c)
8 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/README.md:
--------------------------------------------------------------------------------
 1 | # OOP: Java vs python 
 2 | 
 3 | 
 4 | ## Summary
 5 | 
 6 | 
 7 | - Why object-orientation (OO)?
 8 | - Key features of OO
 9 | - How do these compare in Java and python
10 | 
11 | 
12 | 
13 | # Why not have one big file for your program? 
14 | 
15 | 
16 | ## OO helps maintenance
17 | 
18 | 
19 | - Smaller files makes for less reading
20 | - Separate files allows for shared development
21 | - Cohesion and coupling
22 | - Encapsulate for decoupling
23 |   - data (properties/fields)
24 |   - code (functions/methods)
25 | - Ease name clashes
26 | - Inheritance
27 | 
28 | 
29 | 
30 | ## python classes
31 | 
32 | - Everything is an object
33 | - Class-based, but classes are mutable
34 | - Classes are objects
35 | - Don't need one class for one file
36 | 
37 | 
38 | ## python methods
39 | 
40 | - No visibility modifiers (underscore convention)
41 | - Functions become methods via the class
42 | - Need to include `self` as first parameter (also in constructors)
43 | ```
44 | x.m(a)
45 | ```
46 | is the same as
47 | ```
48 | c.m(x,a)
49 | ```
50 | where `x` is in class `c`
51 | 
52 | 
53 | 
54 | ## python fields
55 | 
56 | - Don't exist independently
57 | - Class properties are like java statics
58 | 
59 | 
60 | ## Differences to Java
61 | 
62 | - No static types
63 | - Constructors called with class name (not `new`)
64 | - Multiple inheritance is allowed
65 | - Lists are polymorphic, use array syntax
66 | - See [concertina.py](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/oo_comparison/Python/concertina.py) and [Concertina.java](https://raw.githubusercontent.com/stevenaeola/gitpitch/master/prog/oo_comparison/Java/Concertina.java)
67 | 
68 | 
69 | ## Java programmers look away now
70 | 
71 | > Java programmers will wrinkle their brows, screw up their noses, or even scream with horror when they read the following: The Pythonic way to introduce attributes is to make them public.
72 | 
73 | From [OOP Python Tutorial](https://www.python-course.eu/python3_properties.php)
74 | 
75 | 


--------------------------------------------------------------------------------
/prog/oo_comparison/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/peer_1/bias_chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/peer_1/bias_chart.png


--------------------------------------------------------------------------------
/prog/peer_1/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------
/prog/peer_1/quality_chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevenaeola/gitpitch/0eca661e4cfb67bf060ae06852459cf248f58e2a/prog/peer_1/quality_chart.png


--------------------------------------------------------------------------------
/prog/prog_getting_started/PITCHME.md:
--------------------------------------------------------------------------------
 1 | ---?color=#7E317B
 2 | 
 3 | # Getting Started With Programming
 4 | 
 5 | ---
 6 | 
 7 | ## What Can You Do?
 8 | 
 9 | * Think of something you are good at
10 |   * How did you get good at it?
11 |   * Why did you get good at it?
12 |   
13 | ---
14 | 
15 | ## Practice
16 | 
17 | Programming is more like
18 | 
19 | * Driving a car
20 | * Playing the violin
21 | 
22 | than it is like
23 | 
24 | * English literature
25 | * Biology
26 | 
27 | You need to __PRACTICE__
28 | 
29 | ---
30 | 
31 | ## The good news
32 | 
33 | Computers give pretty much immediate feedback
34 | 
35 | ---
36 | 
37 | ## The bad news
38 | 
39 | They don't break it to you gently
40 | 
41 | So you need to be resilient
42 | 
43 | <https://www.youtube.com/watch?v=hiiEeMN7vbQ>
44 | 
45 | ---?color=#7E317B
46 | 
47 | # There are no programming geniuses
48 | 
49 | ---
50 | 
51 | ## What you will need to learn
52 | 
53 | * python (first)
54 | * command line/UNIX
55 | * git
56 | * HTML/CSS
57 | * JavaScript
58 | 
59 | ---
60 | 
61 | ## How this session will help
62 | 
63 | * Ask questions
64 | * I will answer them
65 | * There are no stupid questions
66 | * If you're shy in lectures ask the person next to you first
67 | 


--------------------------------------------------------------------------------
/prog/prog_getting_started/PITCHME.yaml:
--------------------------------------------------------------------------------
1 | theme : simple


--------------------------------------------------------------------------------
/prog/prog_getting_started/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Getting Started With Programming
 3 | 
 4 | 
 5 | ## What Can You Do?
 6 | 
 7 | * Think of something you are good at
 8 |   * How did you get good at it?
 9 |   * Why did you get good at it?
10 |   
11 | 
12 | ## Practice
13 | 
14 | Programming is more like
15 | 
16 | * Driving a car
17 | * Playing the violin
18 | 
19 | than it is like
20 | 
21 | * English literature
22 | * Biology
23 | 
24 | You need to __PRACTICE__
25 | 
26 | 
27 | ## The good news
28 | 
29 | Computers give pretty much immediate feedback
30 | 
31 | 
32 | ## The bad news
33 | 
34 | They don't break it to you gently
35 | 
36 | So you need to be resilient
37 | 
38 | <https://www.youtube.com/watch?v=hiiEeMN7vbQ>
39 | 
40 | 
41 | # There are no programming geniuses
42 | 
43 | 
44 | ## What you will need to learn
45 | 
46 | * python (first)
47 | * command line/UNIX
48 | * git
49 | * HTML/CSS
50 | * JavaScript
51 | 
52 | 
53 | ## How this session will help
54 | 
55 | * Ask questions
56 | * I will answer them
57 | * There are no stupid questions
58 | * If you're shy in lectures ask the person next to you first
59 | 


--------------------------------------------------------------------------------
/prog/prog_getting_started/build.sh:
--------------------------------------------------------------------------------
1 | ../../build.sh


--------------------------------------------------------------------------------