13 |
47 | Add Record
14 | 46 |
48 |
58 | Registered Records
49 |
50 |
51 |
52 |
53 |
54 |
55 |
57 | ✘ {suiteTitle} {test.title}
34 | });
35 |
36 | const punctuation = !failed ? '.' : '';
37 |
38 | const errors = errorResult.deref();
39 |
40 | return {test.err.message}
41 | {tests
42 | ?
49 | : null}
50 |
;
51 | });
52 |
53 |
54 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/slides/plugin/math/math.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin which enables rendering of math equations inside
3 | * of reveal.js slides. Essentially a thin wrapper for MathJax.
4 | *
5 | * @author Hakim El Hattab
6 | */
7 | var RevealMath = window.RevealMath || (function(){
8 |
9 | var options = Reveal.getConfig().math || {};
10 | options.mathjax = options.mathjax || 'http://cdn.mathjax.org/mathjax/latest/MathJax.js';
11 | options.config = options.config || 'TeX-AMS_HTML-full';
12 |
13 | loadScript( options.mathjax + '?config=' + options.config, function() {
14 |
15 | MathJax.Hub.Config({
16 | messageStyle: 'none',
17 | tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] },
18 | skipStartupTypeset: true
19 | });
20 |
21 | // Typeset followed by an immediate reveal.js layout since
22 | // the typesetting process could affect slide height
23 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
24 | MathJax.Hub.Queue( Reveal.layout );
25 |
26 | // Reprocess equations in slides when they turn visible
27 | Reveal.addEventListener( 'slidechanged', function( event ) {
28 |
29 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
30 |
31 | } );
32 |
33 | } );
34 |
35 | function loadScript( url, callback ) {
36 |
37 | var head = document.querySelector( 'head' );
38 | var script = document.createElement( 'script' );
39 | script.type = 'text/javascript';
40 | script.src = url;
41 |
42 | // Wrapper for callback to make sure it only fires once
43 | var finish = function() {
44 | if( typeof callback === 'function' ) {
45 | callback.call();
46 | callback = null;
47 | }
48 | }
49 |
50 | script.onload = finish;
51 |
52 | // IE
53 | script.onreadystatechange = function() {
54 | if ( this.readyState === 'loaded' ) {
55 | finish();
56 | }
57 | }
58 |
59 | // Normal browsers
60 | head.appendChild( script );
61 |
62 | }
63 |
64 | })();
65 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/agenda.md:
--------------------------------------------------------------------------------
1 | # Utkast til agenda for dag 2
2 |
3 | ## Motivasjon og teoretisk bakgrunn
4 | Ansvarlig: **Felles**
5 |
6 | - Repetisjon av funksjonell programmering (KJ eller Kjetil)
7 | - Motivasjon til FRP (Stian)
8 | - Introduksjon til reactive programming (Mikael)
9 | - Introduksjon til teoretisk FRP (Mikael)
10 |
11 | **(Pause)**
12 |
13 | ## Introduksjon av praktisk FRP
14 | Ansvarlig: **Stian**
15 |
16 | - Nevne forskjellige implementasjoner
17 | - Introdusere Bacon.js (Praktisk I)
18 | - Innkapsling av reaktive datatyper
19 | - Fra event target eller fra data (constant, interval, fromArray)
20 | - Property vs EventStream
21 | - Forskjeller
22 | - Hvordan bytte mellom dem
23 | - Subscribers
24 | - Lazy i utgangspunktet
25 | - onValue og doAction
26 | - log særtilfelle (legger til subscriber!)
27 | - Bacon Love: Introductory
28 | - Gjennomgang av LF
29 |
30 | **(Pause)**
31 |
32 | ## Praktisk FRP
33 | Ansvarlig: **Mikael**
34 |
35 | - Gjennomgang av basic kombinatorer
36 | - Map og Filter
37 | - Fold/Scan/Reduce
38 | - Merge/Combine
39 | - Templates
40 | - Bruke properties som verdier i kombinatorer
41 | - Bacon Love: Combinators
42 | - Gjennomgang av LF
43 |
44 | **(Pause)**
45 |
46 | ## Avansert praktisk FRP del 1
47 | Ansvarlig: **Mikael**
48 |
49 | - Avanserte teknikker for å kombinere reaktive datatyper
50 | - and/or
51 | - sampleby
52 | - debounce/throttle/take/skip
53 | - flatMap
54 | - Bacon Love: Advanced
55 | - Gjennomgang av LF
56 |
57 | **(Pause)**
58 |
59 | ## Avansert pratisk FRP del 2
60 | Ansvarlig: **Stian**
61 |
62 | - Eventuell teori?
63 | - Bacon Love: Beyond
64 | - Gjennomgang av LF
65 | - Enkel case: CRUD-form
66 |
67 | **(Pause)**
68 |
69 | ## Avansert case
70 | Ansvarlig: **Mikael**
71 |
72 | - Presentere case
73 | - Bacon chat?
74 | - Løsing av case.
75 | - LF av case
76 | - Videreutvikling av case basert på forslag/idéer eller egne innslag.
77 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/slides/plugin/notes-server/client.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | // don't emit events from inside the previews themselves
3 | if ( window.location.search.match( /receiver/gi ) ) { return; }
4 |
5 | var socket = io.connect(window.location.origin);
6 | var socketId = Math.random().toString().slice(2);
7 |
8 | console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
9 | window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId);
10 |
11 | // Fires when a fragment is shown
12 | Reveal.addEventListener( 'fragmentshown', function( event ) {
13 | var fragmentData = {
14 | fragment : 'next',
15 | socketId : socketId
16 | };
17 | socket.emit('fragmentchanged', fragmentData);
18 | } );
19 |
20 | // Fires when a fragment is hidden
21 | Reveal.addEventListener( 'fragmenthidden', function( event ) {
22 | var fragmentData = {
23 | fragment : 'previous',
24 | socketId : socketId
25 | };
26 | socket.emit('fragmentchanged', fragmentData);
27 | } );
28 |
29 | // Fires when slide is changed
30 | Reveal.addEventListener( 'slidechanged', function( event ) {
31 | var nextindexh;
32 | var nextindexv;
33 | var slideElement = event.currentSlide;
34 |
35 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') {
36 | nextindexh = event.indexh;
37 | nextindexv = event.indexv + 1;
38 | } else {
39 | nextindexh = event.indexh + 1;
40 | nextindexv = 0;
41 | }
42 |
43 | var notes = slideElement.querySelector('aside.notes');
44 | var slideData = {
45 | notes : notes ? notes.innerHTML : '',
46 | indexh : event.indexh,
47 | indexv : event.indexv,
48 | nextindexh : nextindexh,
49 | nextindexv : nextindexv,
50 | socketId : socketId,
51 | markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
52 |
53 | };
54 |
55 | socket.emit('slidechanged', slideData);
56 | } );
57 | }());
58 |
--------------------------------------------------------------------------------
/_workshop/02-5-lodash.js:
--------------------------------------------------------------------------------
1 | ---
2 | layout: workshop
3 | collection: workshop
4 | title: Using helper liberaries
5 | section: 2
6 | prev: 02-4-reduce
7 | name: 02-5-lodash
8 | next: 02-6-point-free
9 | slides:
10 | info: |
11 | In the examples we have seen so far, we have used methods that live
12 | on an array. We are now going to switch tactics and focus more on
13 | functions instead of methods. For example, in addition to
14 | `Array.prototype.reduce`, there exists a `reduce` functions in
15 | libraries such as Lo-Dash and Underscore. One of the primary values
16 | of using these functions instead is composability. We are going to
17 | look more on what exactly that means later. Another great thing is
18 | that some of these functions are more powerful that the methods on
19 | arrays.
20 |
21 | In this course we will use Lo-Dash, which will be accessible through the `_`
22 | global (however, we could also have chosen Underscore instead).
23 | ---
24 |
25 | describe('_.reduce', function() {
26 | // We'll start by going back to reduce. As for the built-in reduce,
27 | // _.reduce does not need a starting value. (Reduce without an initial
28 | // value is actually a fold, and in fact, in Lo-Dash _.reduce is aliased
29 | // to _.foldl, i.e. fold from the left.)
30 |
31 | function join(arr, chr) {
32 | return _.reduce(arr, function(memo, str) {
33 | return memo + chr + str;
34 | });
35 | }
36 |
37 | it('works the same way as the array method', function() {
38 | var result = join(['a','b','c'], ':');
39 | expect(result).to.equal('a:b:c');
40 | });
41 |
42 | });
43 |
44 | // PROBLEM: Determine the longest word using _.reduce
45 |
46 | function longest(arr) {
47 | }
48 |
49 | describe('longest', function() {
50 |
51 | it('finds the longest word in a collection', function() {
52 |
53 | var result = longest(['test', 'kim', 'winning', 'lol']);
54 | expect(result).to.equal('winning');
55 |
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/small-case/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {passesSummary}{pendingPrefix}{pendingSummary}{failedPrefix}{failedSummary}{punctuation}
43 | : null}
44 | {tests
45 | ? {testResults}
46 | : null }
47 | {errors
48 | ? {errors}Welcome to my awesome record collection
10 |A sample application for keeping track of records.
11 |
BaconChat
16 |
19 |
22 |
23 | -
20 |
24 |
26 |
32 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/slides/plugin/notes-server/index.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var fs = require('fs');
3 | var io = require('socket.io');
4 | var _ = require('underscore');
5 | var Mustache = require('mustache');
6 |
7 | var app = express.createServer();
8 | var staticDir = express.static;
9 |
10 | io = io.listen(app);
11 |
12 | var opts = {
13 | port : 1947,
14 | baseDir : __dirname + '/../../'
15 | };
16 |
17 | io.sockets.on('connection', function(socket) {
18 | socket.on('slidechanged', function(slideData) {
19 | socket.broadcast.emit('slidedata', slideData);
20 | });
21 | socket.on('fragmentchanged', function(fragmentData) {
22 | socket.broadcast.emit('fragmentdata', fragmentData);
23 | });
24 | });
25 |
26 | app.configure(function() {
27 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) {
28 | app.use('/' + dir, staticDir(opts.baseDir + dir));
29 | });
30 | });
31 |
32 | app.get("/", function(req, res) {
33 | res.writeHead(200, {'Content-Type': 'text/html'});
34 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
35 | });
36 |
37 | app.get("/notes/:socketId", function(req, res) {
38 |
39 | fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) {
40 | res.send(Mustache.to_html(data.toString(), {
41 | socketId : req.params.socketId
42 | }));
43 | });
44 | // fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
45 | });
46 |
47 | // Actually listen
48 | app.listen(opts.port || null);
49 |
50 | var brown = '\033[33m',
51 | green = '\033[32m',
52 | reset = '\033[0m';
53 |
54 | var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );
55 |
56 | console.log( brown + "reveal.js - Speaker Notes" + reset );
57 | console.log( "1. Open the slides at " + green + slidesLocation + reset );
58 | console.log( "2. Click on the link your JS console to go to the notes page" );
59 | console.log( "3. Advance through your slides and your notes will advance automatically" );
60 |
--------------------------------------------------------------------------------
/_workshop/01-1-context.js:
--------------------------------------------------------------------------------
1 | ---
2 | layout: workshop
3 | collection: workshop
4 | title: A functions context
5 | section: 1
6 | prev: ''
7 | name: 01-1-context
8 | next: 01-2-arguments
9 | slides:
10 | info: |
11 | It is time to get started. This workshop will start with some of the basics of
12 | JavaScript, with scope and context, to ensure that you fully understand how
13 | functions work in JavaScript.
14 |
15 | We start with how context works when using functions in JavaScript.
16 | ---
17 | //A couple of functions that we will work with during this exercise
18 |
19 | function hello() {
20 | return this + ' says hello';
21 | }
22 |
23 | describe('a functions context', function() {
24 | // In JavaScript we can dynamically choose the value of `this`
25 | // using several techniques. Today we will focus on some of these,
26 | // starting with `call` and `apply`.
27 |
28 | it('is undefined by default', function() {
29 | //call function to observe default behavior
30 | var result = null;
31 | expect(result).to.equal('undefined says hello');
32 | });
33 |
34 | // `call` calls a function with a given `this` value as the first
35 | // parameter, then arguments provided individually:
36 | //
37 | // func.call(this, arg1, arg2, ...)
38 | it('can change when using call', function() {
39 | //change context of `hello` by using `call`
40 | var result = hello();
41 | expect(result).to.equal('kim says hello');
42 | });
43 |
44 | // `apply` calls a function with a given `this` value as the first
45 | // parameter, then arguments provided as an array
46 | //
47 | // func.apply(this, [arg1, arg2, ...])
48 | it('can change when using apply', function() {
49 | //change context of `hello` by using `apply`
50 | var result = hello();
51 | expect(result).to.equal('kim says hello');
52 | });
53 |
54 | });
55 | // If you want to learn more about function invocation in
56 | // JavaScript, I recommend reading:
57 | // http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
58 |
--------------------------------------------------------------------------------
/_workshop/01-3-prototype.js:
--------------------------------------------------------------------------------
1 | ---
2 | layout: workshop
3 | collection: workshop
4 | title: Functions and prototypes
5 | section: 1
6 | prev: 01-2-arguments
7 | name: 01-3-prototype
8 | next: 02-1-applicative
9 | slides:
10 | info: |
11 | Prototypes are another core concept in JavaScript. Functions and prototypes
12 | interact in many interesting ways.
13 |
14 | There will not be much about prototypes in this workshop, but
15 | there is one thing it is important to understand, especially when
16 | working with `arguments`: In JavaScript you can borrow existing
17 | functions that live on a prototype.
18 | ---
19 | var User = function(age) {
20 | this.age = age;
21 | };
22 |
23 | User.prototype.getAge = function() {
24 | return this.age;
25 | };
26 |
27 | describe('prototype-functions', function() {
28 |
29 | it('are usually bound to the context of an object', function() {
30 | var user = new User(25);
31 | var age = user.getAge();
32 |
33 | expect(age).to.equal(25);
34 | });
35 |
36 | // However, in JavaScript we can actually invoke `getAge` without
37 | // creating an instance of `User`.
38 |
39 | // We can say that we are "borrowing" the getAge function
40 | // from the User prototype.
41 | it('can be borrowed and have their context bound at will', function() {
42 | var age = User.prototype.getAge.call({ age: 35 });
43 | expect(age).to.equal(35);
44 | });
45 |
46 | });
47 |
48 | // PROBLEM:
49 | // Create a function that "borrow" `Array.prototype.slice`
50 | // and returns all the arguments given, except the first.
51 |
52 | // NOTE: This has changed in ES2015 (aka ES6), but it is
53 | // still a useful exercise.
54 |
55 | function rest() {
56 | }
57 |
58 | describe('rest', function() {
59 |
60 | it('should return all arguments except the first one', function() {
61 | var result = rest(1);
62 | expect(result).to.deep.equal([]);
63 | });
64 |
65 | it('should return all arguments except the first one', function() {
66 | var result = rest(1, 2, 3);
67 | expect(result).to.deep.equal([2, 3]);
68 | });
69 |
70 | });
71 |
--------------------------------------------------------------------------------
/_workshop/02-7-context.js:
--------------------------------------------------------------------------------
1 | ---
2 | layout: workshop
3 | collection: workshop
4 | title: Applicative functions with context
5 | section: 2
6 | prev: 02-6-point-free
7 | name: 02-7-context
8 | next: 03-1-factories
9 | slides:
10 | info: |
11 | Sometimes you want to use map, filter, reduce or other functions
12 | inside an object and you want want to access something on
13 | `this`. Thankfully this is very simple on _.filter and friends --
14 | just add the context, i.e. what you want `this` to be, as the
15 | last parameter.
16 | ---
17 | describe('filter with context', function() {
18 | var ages = [20, 30, 75, 156, 200];
19 |
20 | var people = {
21 | maxAge: 120,
22 | validAges: function(ages) {
23 |
24 | return _.filter(ages, function(age) {
25 | return age < this.maxAge;
26 | }, this);
27 |
28 | // here we specified that we want `this` inside the function in the
29 | // filter be the same as `this` is inside the current function
30 |
31 | }
32 | };
33 |
34 | it('works by passing a context to the lodash-function which it can bind to', function() {
35 | var result = people.validAges(ages);
36 |
37 | expect(result).to.deep.equal([20, 30, 75]);
38 | });
39 | });
40 |
41 | describe('our filter with context', function() {
42 |
43 | // PROBLEM: Fix our filter implementation below so it handles the
44 | // specified context
45 |
46 | var filter = function(items, fn, context) {
47 | var arr = [];
48 | for (var i = 0; i < items.length; i++) {
49 | if (fn(items[i], i)) {
50 | arr.push(items[i]);
51 | }
52 | }
53 | return arr;
54 | }
55 |
56 | var ages = [20, 30, 75, 156, 200];
57 |
58 | var people = {
59 | maxAge: 120,
60 | validAges: function(ages) {
61 | return filter(ages, function(age) {
62 | return age < this.maxAge;
63 | }, this);
64 | }
65 | };
66 |
67 | it('works when we pass a context that we bind the function to', function() {
68 | var result = people.validAges(ages);
69 | expect(result).to.deep.equal([20, 30, 75]);
70 | });
71 |
72 | });
73 |
--------------------------------------------------------------------------------
/css/vendor/base16-mocha-dark.css:
--------------------------------------------------------------------------------
1 | /*
2 | * https://github.com/idleberg/base16-highlight.js/blob/master/base16-mocha.dark.css
3 |
4 | Name: Base16 Mocha Dark
5 | Author: Chris Kempson (http://chriskempson.com)
6 |
7 | highlight.js v8.0 template by Jan T. Sott (https://github.com/idleberg/base16-highlight.js)
8 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
9 |
10 | */
11 |
12 | /* Mocha Comment */
13 | .hljs-comment,
14 | .hljs-title {
15 | color: #b8afad;
16 | }
17 |
18 | /* Mocha Red */
19 | .hljs-variable,
20 | .hljs-attribute,
21 | .hljs-tag,
22 | .hljs-regexp,
23 | .ruby .hljs-constant,
24 | .xml .hljs-tag .hljs-title,
25 | .xml .hljs-pi,
26 | .xml .hljs-doctype,
27 | .html .hljs-doctype,
28 | .css .hljs-id,
29 | .css .hljs-class,
30 | .css .hljs-pseudo {
31 | color: #cb6077;
32 | }
33 |
34 | /* Mocha Orange */
35 | .hljs-number,
36 | .hljs-preprocessor,
37 | .hljs-built_in,
38 | .hljs-literal,
39 | .hljs-params,
40 | .hljs-constant {
41 | color: #d28b71;
42 | }
43 |
44 | /* Mocha Yellow */
45 | .ruby .hljs-class .hljs-title,
46 | .css .hljs-rules .hljs-attribute {
47 | color: #f4bc87;
48 | }
49 |
50 | /* Mocha Green */
51 | .hljs-string,
52 | .hljs-value,
53 | .hljs-inheritance,
54 | .hljs-header,
55 | .ruby .hljs-symbol,
56 | .xml .hljs-cdata {
57 | color: #beb55b;
58 | }
59 |
60 | /* Mocha Aqua */
61 | .css .hljs-hexcolor {
62 | color:: #7bbda4;
63 | }
64 |
65 | /* Mocha Blue */
66 | .hljs-function,
67 | .python .hljs-decorator,
68 | .python .hljs-title,
69 | .ruby .hljs-function .hljs-title,
70 | .ruby .hljs-title .hljs-keyword,
71 | .perl .hljs-sub,
72 | .javascript .hljs-title,
73 | .coffeescript .hljs-title {
74 | color: #8ab3b5;
75 | }
76 |
77 | /* Mocha Purple */
78 | .hljs-keyword,
79 | .javascript .hljs-function {
80 | color: #a89bb9;
81 | }
82 |
83 | .hljs {
84 | display: block;
85 | background: #3B3228;
86 | color: #d0c8c6;
87 | padding: 0.5em;
88 | }
89 |
90 | .coffeescript .javascript,
91 | .javascript .xml,
92 | .tex .hljs-formula,
93 | .xml .javascript,
94 | .xml .vbscript,
95 | .xml .css,
96 | .xml .hljs-cdata {
97 | opacity: 0.5;
98 | }
99 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/big-case/browser/lib/chat.js:
--------------------------------------------------------------------------------
1 |
2 | var io = require('socket.io-client');
3 | var EventEmitter = require('events').EventEmitter;
4 | var inherits = require('util').inherits;
5 | var humanize = require('humanize');
6 | var config = require('../config');
7 | var toArray = require('lodash-node/modern/collections/toArray');
8 |
9 | var reemit = function (client, type) {
10 | return function () {
11 | var args = toArray(arguments);
12 | args.unshift(type)
13 | client.emit.apply(client, args);
14 | };
15 | };
16 |
17 | var Chat = function () {
18 | this.connected = false;
19 | var client = this;
20 | client.socket = io(config.ws);
21 |
22 | client.socket.on('connect', function(){
23 | client.connected = true;
24 | client.emit('connected');
25 | });
26 | client.socket.on('message', reemit(client, 'message'));
27 | client.socket.on('part', reemit(client, 'part'));
28 | client.socket.on('join', reemit(client, 'join'));
29 | return client;
30 | };
31 | inherits(Chat, EventEmitter);
32 |
33 | Chat.prototype.join = function (username) {
34 | if (!this.connected) {
35 | this.emit('error', new Error('Not connected yet.'));
36 | return this;
37 | }
38 | if (this.username) {
39 | this.emit('error', new Error('Already connected and logged in as ' + this.username));
40 | return this;
41 | }
42 |
43 | this.username = username;
44 | this.socket.emit('join', username);
45 | this.emit('join', username);
46 | return this;
47 | };
48 |
49 | Chat.prototype.message = function (obj) {
50 | if (!this.connected || !this.username) {
51 | this.emit('error', new Error('Not connected yet. Join by using /join Task: {{page.title}}
7 | 8 | {% if page.slides %} 9 |See related slides for this part: {{page.slides}}
10 | {% endif %} 11 | 12 |
13 | {% if page.prev %}
14 | ← Previous task
15 | {% endif %}
16 | {% if page.next %}
17 | Next task →
18 | {% endif %}
19 |
20 |
21 | {% if page.info %}
22 | Information
23 |{{page.info | markdownify}}
24 | {% endif %}
25 |
26 |
27 |
28 | Tasks
29 |-
30 | {% for item in site.workshop %}
31 | {% if item.hide != true %}
32 | {% assign pageID = page.name %}
33 | {% assign itemID = item.name %}
34 | {% assign className = pageID == itemID ? ' class="active"' : '' %}
35 |
- 36 | {% if item.start == true %} 37 | 38 | {% else %} 39 | 40 | {% endif %} 41 | {% if item["section"] %}Part {{item["section"]}}: {% endif %} 42 | {{item["title"]}} 43 | 44 | {% if pageID == itemID %}[Active]{% endif %} 45 | 46 | {% endif %} 47 | {% endfor %} 48 |
51 | {% if page.prev %}
52 | ← Previous task
53 | {% endif %}
54 | {% if page.next %}
55 | Next task →
56 | {% endif %}
57 |
58 |
59 | Help
60 | 61 |Available globals
62 |-
63 |
_: Lo-dash.js
64 | log: log-command that logs to view and console
65 |
Testing
68 |-
69 |
describe: new test suite (mocha)
70 | it: new test (mocha)
71 | xit: pending test (mocha)
72 | xdescribe: pending scenario (mocha)
73 | before/after: run code before or after all tests (mocha)
74 | beforeEach/afterEach: run code before or after each tests (mocha)
75 | chai: chai.js assertion library
76 |
16 |
17 |
70 |
71 |
72 |
73 |
74 |
75 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/assets/component-tree.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/_sass/_syntax-highlighting.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Syntax highlighting styles
3 | */
4 | .highlight {
5 | background: #fff;
6 | @extend %vertical-rhythm;
7 |
8 | .c { color: #998; font-style: italic } // Comment
9 | .err { color: #a61717; background-color: #e3d2d2 } // Error
10 | .k { font-weight: bold } // Keyword
11 | .o { font-weight: bold } // Operator
12 | .cm { color: #998; font-style: italic } // Comment.Multiline
13 | .cp { color: #999; font-weight: bold } // Comment.Preproc
14 | .c1 { color: #998; font-style: italic } // Comment.Single
15 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
16 | .gd { color: #000; background-color: #fdd } // Generic.Deleted
17 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
18 | .ge { font-style: italic } // Generic.Emph
19 | .gr { color: #a00 } // Generic.Error
20 | .gh { color: #999 } // Generic.Heading
21 | .gi { color: #000; background-color: #dfd } // Generic.Inserted
22 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
23 | .go { color: #888 } // Generic.Output
24 | .gp { color: #555 } // Generic.Prompt
25 | .gs { font-weight: bold } // Generic.Strong
26 | .gu { color: #aaa } // Generic.Subheading
27 | .gt { color: #a00 } // Generic.Traceback
28 | .kc { font-weight: bold } // Keyword.Constant
29 | .kd { font-weight: bold } // Keyword.Declaration
30 | .kp { font-weight: bold } // Keyword.Pseudo
31 | .kr { font-weight: bold } // Keyword.Reserved
32 | .kt { color: #458; font-weight: bold } // Keyword.Type
33 | .m { color: #099 } // Literal.Number
34 | .s { color: #d14 } // Literal.String
35 | .na { color: #008080 } // Name.Attribute
36 | .nb { color: #0086B3 } // Name.Builtin
37 | .nc { color: #458; font-weight: bold } // Name.Class
38 | .no { color: #008080 } // Name.Constant
39 | .ni { color: #800080 } // Name.Entity
40 | .ne { color: #900; font-weight: bold } // Name.Exception
41 | .nf { color: #900; font-weight: bold } // Name.Function
42 | .nn { color: #555 } // Name.Namespace
43 | .nt { color: #000080 } // Name.Tag
44 | .nv { color: #008080 } // Name.Variable
45 | .ow { font-weight: bold } // Operator.Word
46 | .w { color: #bbb } // Text.Whitespace
47 | .mf { color: #099 } // Literal.Number.Float
48 | .mh { color: #099 } // Literal.Number.Hex
49 | .mi { color: #099 } // Literal.Number.Integer
50 | .mo { color: #099 } // Literal.Number.Oct
51 | .sb { color: #d14 } // Literal.String.Backtick
52 | .sc { color: #d14 } // Literal.String.Char
53 | .sd { color: #d14 } // Literal.String.Doc
54 | .s2 { color: #d14 } // Literal.String.Double
55 | .se { color: #d14 } // Literal.String.Escape
56 | .sh { color: #d14 } // Literal.String.Heredoc
57 | .si { color: #d14 } // Literal.String.Interpol
58 | .sx { color: #d14 } // Literal.String.Other
59 | .sr { color: #009926 } // Literal.String.Regex
60 | .s1 { color: #d14 } // Literal.String.Single
61 | .ss { color: #990073 } // Literal.String.Symbol
62 | .bp { color: #999 } // Name.Builtin.Pseudo
63 | .vc { color: #008080 } // Name.Variable.Class
64 | .vg { color: #008080 } // Name.Variable.Global
65 | .vi { color: #008080 } // Name.Variable.Instance
66 | .il { color: #099 } // Literal.Number.Integer.Long
67 | }
68 |
--------------------------------------------------------------------------------
/_workshop/03-4-fluent.js:
--------------------------------------------------------------------------------
1 | ---
2 | layout: workshop
3 | collection: workshop
4 | title: Fluent interfaces
5 | section: 3
6 | prev: 03-3-functions-with-functions
7 | name: 03-4-fluent
8 | next: 03-5-arity
9 | slides:
10 | info: |
11 | Many of us are used to jQuery and its fluent apis, e.g.
12 |
13 | ```
14 | $('#test')
15 | .css('color','#333')
16 | .height(200)
17 | .on('click', function() {
18 | console.log('clicked!')
19 | });
20 | ```
21 |
22 | Fluent apis is often referred to as method chaining. and we use it to achieve
23 | code that is as fluently readable as possible and thus quicker to understand.
24 | In the jQuery example above, all functions return `this` so we can keep
25 | calling methods that exists on `$('#test')`.
26 |
27 | Let us create a small helper that simplifies the development of
28 | such fluent apis.
29 | ---
30 | // First, to get an understanding of how we can create a simple
31 | // helper for these fluent interfaces, we start with an entirely
32 | // different example, `maybe`:
33 |
34 | function maybe(fn) {
35 | return function(arg) {
36 | if (arg != null) {
37 | return fn(arg);
38 | }
39 | }
40 | }
41 |
42 | describe('maybe', function() {
43 | var exclamate = maybe(function(val) {
44 | return val + '!';
45 | });
46 |
47 | it('should return when called with an argument', function() {
48 | var result = exclamate('test');
49 | expect(result).to.equal('test!');
50 | });
51 |
52 | it('should not return when called with null argument', function() {
53 | var result = exclamate(null);
54 | expect(result).to.equal(undefined);
55 | });
56 |
57 | it('should not return when called without argument', function() {
58 | var result = exclamate();
59 | expect(result).to.equal(undefined);
60 | });
61 |
62 | // We have now created a helper than only calls the received function is
63 | // the input is neither null nor undefined. Yet another decorator, that is.
64 |
65 | // Btw, why doesn't this work?
66 |
67 | var user = {
68 | setName: maybe(function(name) {
69 | this.name = name;
70 | })
71 | };
72 |
73 | it('to throw', function() {
74 | expect(function() {
75 | user.setName('kim');
76 | }).to.throw(TypeError);
77 | });
78 |
79 | // It throws this error at us:
80 | //
81 | // TypeError: Cannot set property 'name' of undefined
82 | });
83 |
84 | // As is often the case in JavaScript, the problem is `this`. We
85 | // forgot to handle the context when we called `fn` in our `maybe`
86 | // decorator. In decorators we must always use `call` or `apply` --
87 | // make them context agnostic!
88 |
89 | // PROBLEM: Now it's time to create a `fluent` decorator
90 |
91 | function fluent(fn) {
92 | }
93 |
94 | describe('fluent', function() {
95 | // Here we have our example `$`, containing a field `value` that we
96 | // want to read out last. (You shouldn't change anything below here.)
97 |
98 | var $ = function(el) {
99 | return {
100 | value: 'somevalue',
101 |
102 | // using our fluent helper
103 | css: fluent(function(key, val) {}),
104 | height: fluent(function(height) {}),
105 | on: fluent(function(event, cb) {})
106 | }
107 | };
108 |
109 |
110 | it('should enable use of fluent interfaces', function() {
111 | var result = $('#test')
112 | .css('color','#333')
113 | .height(200)
114 | .on('click', function() {
115 | console.log('clicked!')
116 | })
117 | .value;
118 |
119 | expect(result).to.equal('somevalue');
120 | });
121 | });
122 |
--------------------------------------------------------------------------------
/previous_presentations/dag1/slides/remark-styling.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Droid Serif';
3 | font-style: normal;
4 | font-weight: 400;
5 | src: local('Droid Serif'), local('DroidSerif'), url(font/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
6 | }
7 |
8 | @font-face {
9 | font-family: 'Yanone Kaffeesatz';
10 | font-style: normal;
11 | font-weight: 400;
12 | src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(font/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
13 | }
14 |
15 | body {
16 | font-family: 'Droid Serif';
17 | font-size: 20px;
18 | }
19 | h1, h2, h3 {
20 | font-family: 'Yanone Kaffeesatz';
21 | font-weight: 400;
22 | margin-bottom: 0;
23 | }
24 | h1 { font-size: 4em; }
25 | h2 { font-size: 2em; }
26 | h3 { font-size: 1.6em; }
27 | .footnote {
28 | position: absolute;
29 | bottom: 3em;
30 | }
31 | li p { line-height: 1.25em; }
32 | .red { color: #fa0000; }
33 | .gray { color: #999; }
34 | .large { font-size: 2em; }
35 | .very-large { font-size: 3em; }
36 | a, a > code {
37 | color: rgb(249, 38, 114);
38 | text-decoration: none;
39 | }
40 | code {
41 | -moz-border-radius: 5px;
42 | -web-border-radius: 5px;
43 | background: #e7e8e2;
44 | border-radius: 5px;
45 | font-size: 16px;
46 | }
47 | .pull-left {
48 | float: left;
49 | width: 47%;
50 | }
51 | .pull-right {
52 | float: right;
53 | width: 47%;
54 | }
55 | .pull-right ~ p {
56 | clear: both;
57 | }
58 | #slideshow .slide .content code {
59 | font-size: 0.8em;
60 | }
61 | #slideshow .slide .content pre code {
62 | font-size: 0.9em;
63 | padding: 15px;
64 | }
65 | .inverse {
66 | background: #272822;
67 | color: #777872;
68 |
69 | }
70 | .inverse h1, .inverse h2 {
71 | color: #f3f3f3;
72 | line-height: 0.8em;
73 | }
74 |
75 | /* Slide-specific styling */
76 | #slide-inverse .footnote {
77 | bottom: 12px;
78 | left: 20px;
79 | }
80 | #slide-how .slides {
81 | font-size: 0.9em;
82 | position: absolute;
83 | top: 151px;
84 | right: 140px;
85 | }
86 | #slide-how .slides h3 {
87 | margin-top: 0.2em;
88 | }
89 | #slide-how .slides .first, #slide-how .slides .second {
90 | padding: 1px 20px;
91 | height: 90px;
92 | width: 120px;
93 | -moz-box-shadow: 0 0 10px #777;
94 | -webkit-box-shadow: 0 0 10px #777;
95 | box-shadow: 0 0 10px #777;
96 | }
97 | #slide-how .slides .first {
98 | background: #fff;
99 | position: absolute;
100 | top: 20%;
101 | left: 20%;
102 | z-index: 1;
103 | }
104 | #slide-how .slides .second {
105 | position: relative;
106 | background: #fff;
107 | z-index: 0;
108 | }
109 |
110 | /* Two-column layout */
111 | .left-column {
112 | color: #777;
113 | width: 20%;
114 | height: 92%;
115 | float: left;
116 | }
117 | .left-column h2:last-of-type, .left-column h3:last-child {
118 | color: #000;
119 | }
120 | .right-column {
121 | width: 75%;
122 | float: right;
123 | padding-top: 2em;
124 | }
125 |
126 |
127 | /* custom stuff */
128 |
129 | .larger-img img {
130 | max-width: 100%;
131 | max-height: 100%;
132 | }
133 |
134 | img {
135 | max-width: 80%;
136 | max-height: 80%;
137 | }
138 |
139 | .leftcol-large {
140 | width: 55%;
141 | float: left;
142 | }
143 |
144 | .leftcol-medium {
145 | width: 45%;
146 | float: left;
147 | }
148 |
149 | .leftcol-small {
150 | width: 35%;
151 | float: left;
152 | }
153 |
154 | .rightcol-large {
155 | width: 55%;
156 | float: right;
157 | }
158 |
159 | .rightcol-medium {
160 | width: 45%;
161 | float: right;
162 | }
163 |
164 | .rightcol-small {
165 | width: 35%;
166 | float: right;
167 | }
168 |
169 | .no-bullets ul {
170 | padding-left: 0;
171 | list-style-type: none;
172 | }
--------------------------------------------------------------------------------
/previous_presentations/dag1/agenda.md:
--------------------------------------------------------------------------------
1 | # Utkast til agenda
2 |
3 | - Hei og velkommen
4 | - Intro: Hva er funksjonell programmering
5 | - "Funksjonelle språk" finnes ikke, men språk legger til rette for funksjonell programmering i ulik grad
6 | - Høyere ordens funksjoner
7 | - dvs, komponering av funksjonalitet vha funksjoner
8 | - Immutable state
9 | - mindre kompleksitet
10 | - eksempel med Angular sin run-loop som ikke er immutable? (sammenlign med shouldComponentUpdate i react+immutable.js)
11 | - Begreper vi kommer til å bruke, som deltagerne må kjenne (veldig kort)
12 | - Closures
13 | - Lexical scoping
14 | - Monad: "Monoid in the category of endofunctors." (for LOLs)
15 | + ref: http://james-iry.blogspot.no/2009/05/brief-incomplete-and-mostly-wrong.html
16 | - Praktisk: Hvordan komme i gang med kodingen på en praktisk måte
17 |
18 | - Hva er en funksjon (i JS)
19 | + fn som objekter -> funksjoner kan ha funksjoner som "members"
20 | + `this`
21 | + prototyper
22 | + konstruktør-funksjoner
23 | + `call`, `apply`, `arguments`
24 |
25 | - Høyere ordens funksjoner
26 | - Kort: Hva er en HOF / førsteklasses funksjon
27 | - bruke lodash
28 | - the use of generic functions built on a collection-centric philosophy
29 | - Funksjon som returnerer funksjon: `makeAdder`
30 | - Funksjon som tar funksjon som arg: ??
31 | - Dekoratorer: `debounce`, `throttle`, `memoize`
32 | - State vha closures: `counter`, `timer`, `uniqeid`
33 | - Presentere `filter`, `map`, `reduce` (fra `_`)
34 | - Oppgaver
35 | + bruke `filter` til ting
36 | + bruke `map` til ting
37 | + bruke `reduce` til ting
38 | + implementere de over selv (optional)
39 |
40 | *(pause)*
41 |
42 | - Partial applicaton
43 | - Teori: Hva er dette / vise megabasic eksempel med _
44 | - Nyttig bruk: `.on('change', _.partial(fn, 'foo')`
45 | - Tips: flip
46 | - Oppgaver:
47 | - Implementere `partial` selv
48 |
49 | - Rekursjon (trenger vi denne?)
50 | + TCO kommer i ES6
51 | + Eksempel: Traversering av trær
52 | + Kode:
53 |
54 | def reverse(liste):
55 | baklengs = []
56 | for x in liste:
57 | baklengs.append(x)
58 | return baklengs
59 |
60 | def reverse(liste):
61 | if liste == []: return []
62 | else: return reverse(liste[1:]) + [liste[0]]
63 |
64 | + Oppgaver:
65 | * ???
66 |
67 | *(lunchpause)*
68 |
69 | - Tilstand
70 | - Hvorfor immutable state? Enklere å debugge og teste
71 | - Pragmatisk: alt må ikke være immutable, state har en plass
72 | - State kan komme og bite deg i ræva
73 | - Pass by reference vs pass by value
74 | - Farligheten med at andre kan modifisere shit etter at vi er ferdig med det
75 | - KJ finner eksempel, cache
76 | - Muligjør memoisering
77 | - Clone vs deepClone
78 | - object.freeze
79 | - Tips: implementere `deepFreeze`
80 | - Teknikker for å abstrahere bort state
81 | + `timer`
82 | + ???
83 | - Oppgaver:
84 | + ???
85 |
86 | - Diverse nyttige funksjoner
87 | + `pluck`
88 | + `find`
89 | + `any`, `all`
90 | + `compose`
91 | + Oppgaver:
92 | * Diverse bruk av funksjonene over
93 |
94 | *(pause)*
95 |
96 | - Idé til større del
97 | + Implementere så mye som mulig av `_` fra bunnen av
98 | + Bruk immutable.js sammen med React.js (til state, props er immutable)
99 | + Litt større ting vha Node
100 | * Presentere data fra et kult API på en ny måte? (som krever en del transformering der funksjonelle konsepter kan passe godt inn)
101 | * Se etter API som er relevant!
102 |
--------------------------------------------------------------------------------
/previous_presentations/dag2/slides/plugin/notes-server/notes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | ' + record.album + '
' + 17 | 'Artist: ' + record.artist + '
' + 18 | 'Year: ' + record.year + '
' + 19 | 'Genre: ' + record.genre + '
' + 20 | '