From 011b1e7c5181b8c2835d879e9d538405af82ae5b Mon Sep 17 00:00:00 2001 From: Cameron Ball Date: Mon, 23 Mar 2020 20:26:16 +0800 Subject: [PATCH] Notes system, lots more slides --- img/composition.png | Bin 0 -> 541 bytes img/problem-solving.png | Bin 0 -> 479 bytes index.html | 381 ++++++++++++++++++++++++++++++++++++++++-------- notes.html | 25 ++++ notes.txt | 39 +++++ 5 files changed, 388 insertions(+), 57 deletions(-) create mode 100644 img/composition.png create mode 100644 img/problem-solving.png create mode 100644 notes.html create mode 100644 notes.txt diff --git a/img/composition.png b/img/composition.png new file mode 100644 index 0000000000000000000000000000000000000000..7c89ae6697ff7577ec3b7cb69abad0a4073d035d GIT binary patch literal 541 zcmeAS@N?(olHy`uVBq!ia0vp^;Xtg%!3HE_pSGp~Db50q$YKTtz9S&aI8~cZnt_4w zyr+v}NJit^S=L3(1_Ev3{#r&)1Wqb?JUz6NDRZaSvG9ew=^l=$d=F!qIM)VcvVCFr z7_sH`&Gnydbo~4=v1N-zBWK=pAK$-n&EMzib-vxeedW;7XU4~aa~cKO7QQ+!Q}sb} zn*&GM1evC}t+x!8JX3Z#V!3BueDLb_nt$Iewkd_rzbL*dF!0+o&evLB=dp0VvpczA z;p&N=w^Q0}0-S1JY1yhgFtuB*%FD>`srb2!SoNkO%QdPu+38G6it(IN{`B-aj<2^r zXRJFY)u(8;%sWSZdT{L0f3mk;Bpg54m-Zs~&Q#+E5q1m=u9@I-4( z8v$z7>)M0@Ka)KwNB*+s?+qH3hf3$ne*Lge zBmB4Bt~p}wFKE2)Sn<;%m+_+eswC|N&y;5bto~E{`J-4~iF1~?OY4N1C0g5yfAI5j$_m+aOxp`~{+zO7u~`cPzcptS$m}}mxnaV)YW9i#d6&Ma&KCKxkc0HxL|E>BqJEd(&L53%Hf0EO0`S`K! z+nR$~$4%`Pa&PrNl_|69sqn2gkB+3Q{aE|v;~btDr`Q<|eEVqH{qWXf`K}P%ef*^x zvQMsyVQ*jHEYHc9E^U723DC&~47ayQG5n}LePa0sr^Vkm=g#Txn5HcAZ0FKAIbX{o z-wmH``Pp*pr^}JE?$z8KcDF=VH_YxAI<)q){#kcv^Qk)$iW#$ah_*C_g-+RGl;eBS z{g~pR=I8@g@0^iWbeg}jBVz|95?|0Ot+J)C`G~Js-j2e;$8OB)p3BR;QSk2Xnvw^M OF$PapKbLh*2~7Y;G}=Z0 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 20de7a2..6a1b39b 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,8 @@ margin: 20px; text-shadow: 10px 10px 0 #00000069; text-align: center; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: black; } .slide { @@ -71,7 +73,7 @@ flex-wrap: wrap; } - #slide-0 #cloudguy { + #cloudguy { height: 100%; display: flex; justify-content: center; @@ -84,7 +86,7 @@ text-shadow: 2px 2px 0 #000; } - #slide-1 .slide div { + .idk div { display: flex; width: 40%; } @@ -107,15 +109,15 @@ text-align: center; } - #slide-1 .shake-constant, .crazy, .span { + #rant .shake-constant, .crazy, .span { display: inline-block; } - #slide-1 .shake-opacity { + #rant .shake-opacity { color: #f98012; } - #slide-1 #rant { + #rant { padding: 20px; height: 80%; font-size: 14px; @@ -154,6 +156,10 @@ margin-top: 10px; } + .notes { + display: none; + } + @@ -164,10 +170,25 @@
Welcome to the talk!
+
+
    +
  • Thanks for the opporunity to talk about programming with you all
    • +
+
=<< What's up with that Title? >>=
-
+
+
+
+
    +
  • A few people asked me about the title, so I thought I'd clear up what it means
    • +
+
+
+
+
=<< What's up with that Title? >>=
+
@@ -180,54 +201,158 @@
Fig 1.1 What most people thing a typical functional programming advocate looks like
+
+
    +
  • Regarded as eccentric crazies with wild ideas
    • +
  • Spout nonsense like "monads" every 2 seconds
    • +
  • Often bald
    • +
+
-
+
=<< Obligatory Quote >>=
+
+
    +
  • Before I get to far in to it, I want to add some framing to the talk
    • +
  • My goal is not to teach you functional programming, my goal is to spark some curiosityt
    • +
+
-
+
=<< Obligatory Quote >>=
If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.
+
+
    +
  • Before I get to far in to it, I want to add some framing to the talk
    • +
  • My goal is not to teach you functional programming, my goal is to spark some curiosityt
    • +
  • And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides
    • +
  • Also we like boats and ships and stuff like that here, so make sense I guess.
    • +
+
-
+
=<< Obligatory Quote >>=
If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.

- Some French Guy. Idk. Who cares, I'm not cultured. I'm Australian.
+
+
    +
  • Before I get to far in to it, I want to add some framing to the talk
    • +
  • My goal is not to teach you functional programming, my goal is to spark some curiosityt
    • +
  • And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides
    • +
  • Also we like boats and ships and stuff like that here, so make sense I guess.
    • +
  • And of course, don't forget attribution. So that everyone knows you're cultured and read important things
    • +
  • With that in mind, don't take any code examples too seriously, they are to demonstrate the big picture idea.
    • +
+
-
+
=<< What is this Talk About? >>=
+
+
    +
  • So what is this talk about?
    • +
  • Let me start by telling you some things it is not about
    • +
  • Which is something you're not supposed to do as an educator but whatever
    • +
+
-
+
+
=<< What is this Talk About? >>=
+
+

This talk is not about:

+
+
    +
  • Haskell
    • +
  • Convincing you to stop using whichever language you like
    • +
  • Maths nonsense
    • +
  • So what is it about?
    • +
+
+
+
+
=<< What is this Talk About? >>=
Perspective
+
+
    +
  • When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from. For this discussion, I've settled on a very meta one. Perspective itself. As said, this is not a talk about haskell, it's about viewing programming through different perspectives"
    • +
+
-
+
=<< What is Functional Programming? >>=
Programming with functions.
-
+
+
=<< What is Functional Programming? >>=
+
+
Programming with functions.

No, really. Everything is a function.
+
+
+
=<< What is a Function? >>=
A mapping between sets that associates every element of the first set to exactly one element of the second set.
+
+
    +
  • It's important to understand that that's it.
    • +
  • This is different to functions in procedural languages - actually the name "function" is a misnomer in that context. Really they should be called prodedures or subroutines (hence the name procedural)
    • +
  • A function is a mapping. It's equivalent to something like an array in PHP. It associates one value to another one
    • +
  • In the same way that a PHP array cannot mutate state, a function cannot
    • +
  • This has some interesting consequences...
    • +
+
-
-
=<< Huh? >>=
+
+
=<< What is a Function? >>=
-

Why would you wanna do that?!

+

This means a functional language has no equivalent construct for:

+
+
    +
  • For loops
    • +
  • While loops
    • +
  • Gotos
    • +
  • Variables*
    • +
  • Probably a bunch of other constructs I forgot
    • +
+
+
*In pure functional programming, there are true variables. That is, once you declare the value of a variable, you cannot change it. Contrast this with procedural languages where you can reassign a variable whenever you like.
-
+
+
=<< Huh? >>=
+
+
+
    +
  • And of course this all begs the question....
    • +
+
+ +
+
+
=<< Huh? >>=
+
+
Who in their right mind would wanna do that?!
+
+
+
    +
  • You're trying to tell me FP is awesome be because it has ... less features?
    • +
  • This is true, but it makes no difference. You can accomplish anything in FP that you can accomplish in a procedural language
    • +
+
+
+
=<< Huh? >>=

Why would you wanna do that?!

@@ -239,14 +364,30 @@
+
+
    +
  • The best answer I can give is, "learning is good". I think that's something everyone at moodle can agree on
    • +
  • Learning FP is gonna require you to wrestle your brain in to shapes it's never taken before. Which will leave it with the plasticity to learn a greater variety of things you encounter.
    • +
  • It will also make the math/logic part of your brain very buff
    • +
  • As we know, the brain has 3 main cortexes. The passion cortex, the power cortext, and the logic cortex
    • +
  • As programmers we need to engorge mostly the logic cortext, but also the passion cortex - as this is a profession that involves other people.
    • +
  • Communicating about programs written in the functional style is actually easier than the programs written in the procedural style. More on that later
    • +
+
-
+
=<< Paradigms >>=
Paradigms
+
+
    +
  • Let's talk about paradigms for a bit
    • +
  • In particular, let's talk about the two most widely used paradigms. Which also happen to be the most at odds
    • +
+
-
+
=<< Paradigms >>=
@@ -274,8 +415,17 @@
+
+
    +
  • So here they are. Declaritive and imperative, and inside those we see sub-paradigms (there are more, for example SQL is declaritive but not functional, and Assembly is imperative but not procedural - although the vast majority of imperative languages are indeed procedural):
    • +
  • And then inside the boxes we see some examples of language that embody that paradigm
    • +
  • For the purposes of this talk it's probably OK to just think of declaritive and functional as interchangeable, and some for imperative and procedural. I'll probably mix them up
    • +
  • So why am I showing this? Well, let's look at this through a different perspective... Some of you might have realised that imperative and declaritive are both words used to describe human language, and that's relevant
    • +
  • Learning a new paradigm is beneficial the same way learning a new human language is
    • +
+
-
+
=<< Gramatical Mood >>=
@@ -299,6 +449,12 @@
+
+
    +
  • We can see here that in the declaritive mood you express statements of fact. They aren't instrcutions
    • +
  • Contrast this with the imperative style of expression where there is a very clear instruction to carry out
    • +
+
=<< Gramatical Mood >>=
@@ -312,37 +468,60 @@ Do this.
+
+
    +
  • To make it more concise... here's the smallest definition I can think of
    • +
  • And this applies to programs too. In the functional paradigm we no longer have the "instruction words" - things like, for, while, goto, variable reassignment
    • +
+
=<< Big Brain Moment >>=
+
+
+
+
+
=<< Big Brain Moment >>=
Programming languages ARE human languages.
-
+
=<< Why is declaritive mood good? >>=
+
+
    +
  • But in both cases, it seems like we lose something useful in the declaritive mode. What do we get by giving up these things?
    • +
+
-
+
=<< Why is declaritive mood good? >>=
Atemporality
-
+
=<< Why is declaritive mood good? >>=
Independant of or unaffected by time.
-
+
=<< Why is declaritive mood good? >>=
Declarative programs express what they actually do Leaving more "brain space" to focus on solving the problem.
+
+
    +
  • A declaritive program expresses its operation in terms of relationships.
    • +
  • In an imperative paradigm, thinking about the program means thinking about changes over time
    • +
  • In a declaritive one, thinking about the program means thinking about relationships
    • +
+
-
+
=<< To Recap >>=

Why would you wanna do that?

@@ -353,20 +532,27 @@
  • "Constraints liberate, liberties constrain"
    • +
    +
      +
    • Some problems are simply very difficult to solve in an imperative way.
      • +
    • Especially when we are talking about events that are happening in parallel and may run at different speed/times
      • +
    • In the imperative paradigm, you quite easily come up against data races by virtue of the way the program is expressed
      • +
    +
    -
    +
    =<< Some Code (Finally) >>=
    -
    +
    =<< Some Code (Finally) >>=
    Enough of this philosophy and linguistics mumbo jumbo, already!
    -
    +
    =<< Some Code (Finally) >>=

    The Great Dividers

    @@ -379,8 +565,8 @@ 
    function repeat(x) {
-    return x + repeat(x);
-}
    + return x + repeat(x); + }

    OK, so what?

    @@ -388,7 +574,7 @@
    -
    +
    =<< Some Code (Finally) >>=
    @@ -408,7 +594,7 @@
    -
    +
    =<< Some Code (Finally) >>=
    @@ -430,13 +616,13 @@
    -
    +
    =<< Big Brain Moment >>=
    Programming languages ARE human languages.
    -
    +
    =<< Some Code (Finally) >>=

    Real Haskell Code That Runs

    @@ -446,8 +632,14 @@ threeFs = take 3 (repeat "f") > "fff"
    +
    +
      +
    • Let's think about the way this is understood
      • +
    • To get 3 fs, take 3 fs from an infinite list of fs - totally fine, makes complete sense
      • +
    +
    -
    +
    =<< Some Code (Finally) >>=

    Real JavaScript Code That Hangs

    @@ -460,8 +652,38 @@ threeFs = repeat("f").substr(0,3); > InternalError: too much recursion
    +
    +
      +
    • By contrast, this reads as "First compute an infinite list of fs" - which as we saw before was a problem. And even that human sentence clearly has a problem.
      • +
    +
    -
    +
    +
    =<< Big Brain Moment >>=
    +
    +

    What did declaritive mode give us?

    +
    +
      +
    • Atemporality
      • +
    • The ability to wield infinity!
      • +
    +
    +
    +
    +
    +
    =<< Big Brain Moment >>=
    +
    +

    Promises

    +
    +
    +
      +
    • Let's think about promises...
      • +
    • Seems like an odd tangent but let's go with it
      • +
    • And just as before, I'm gonna break one of the carinal rules of teaching by telling you what promises are not...
      • +
    +
    +
    +
    =<< Promises >>=
    @@ -478,7 +700,7 @@ threeFs = repeat("f").substr(0,3); Promises do not make things asynchronous!
    -
    +
    =<< Promises >>=

    What problems do promises solve?

    @@ -493,13 +715,13 @@ threeFs = repeat("f").substr(0,3);
    • A value (which may or may not be available yet) wrapped in some additional context
      • -
    • Functions to instantiate the wrapper (Promise.resolve, Promise.reject) +
    • Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
    • A rule for composing these wrapped values (then)
    -
    +
    =<< Promises >>=

    Terminology/syntax recap

    @@ -520,8 +742,13 @@ threeFs = repeat("f").substr(0,3);
    A method of combining two things of the same type in to another thing that is also of the same type
    +
    +
      +
    • A quick note on composition: So far you may have come across function composition. There's lots of different kinds of composition, but function composition is incredibly common, especially in programming. However in the example we are talking the composition of promises. In the sense that we combine to promises, and get another promise.
      • +
    +
    -
    +
    =<< Promises >>=

    Promise composition

    @@ -542,7 +769,7 @@ threeFs = repeat("f").substr(0,3);
    -
    +
    =<< Promises >>=

    OK great but who cares?

    @@ -558,7 +785,7 @@ threeFs = repeat("f").substr(0,3);
    -
    +
    =<< Promises >>=
    @@ -569,35 +796,62 @@ threeFs = repeat("f").substr(0,3);
    composition?
    +
    +
      +
    • This sure is starting to sound familiar.
      • +
    +
    -
    +
    =<< Promises >>=

    Woah!

    JavaScript

    Promise.resolve("We start here")
-    .then(x => Promise.resolve(x + " then get here"))
-    .then(x => Promise.resolve(x + " and finally here!"))
    + .then(x => Promise.resolve(x + " then get here")) + .then(x => Promise.resolve(x + " and finally here!"))

    Haskell

    Right("We start here")
-     >>= (\x -> Right (x ++ " then get here"))
-     >>= (\x -> Right (x ++ " and finally here!"))
    + >>= (\x -> Right (x ++ " then get here")) + >>= (\x -> Right (x ++ " and finally here!"))
    -
    +
    =<< Promises >>=

    Woah!

    JavaScript

    Promise.resolve("We start here")
-    .then(x => Promise.resolve(x + " then get here"))
-    .then(x => Promise.reject("Oh noes!"))
-    .then(x => Promise.resolve(x + " and finally here!"))
    + .then(x => Promise.resolve(x + " then get here")) + .then(x => Promise.reject("Oh noes!")) + .then(x => Promise.resolve(x + " and finally here!"))

    Haskell

    Right("We start here")
-    >>= (\x -> Right (x ++ " then get here"))
-    >>= (\x -> Left ("Oh noes!"))
-    >>= (\x -> Right (x ++ " and finally here!"))
    + >>= (\x -> Right (x ++ " then get here")) + >>= (\x -> Left ("Oh noes!")) + >>= (\x -> Right (x ++ " and finally here!")) +
    +
    +
      +
    • So, if you've ever used promises, you've been doing declaritive style programming without even realising it!
      • +
    • They give us some new powers, we can now write atemporal code, which explains why they emerged in JS, a place where people are constantly dealing with requests that can finish in any order
      • +
    • So it's super cool that people using a language very far removed from haskell ended up solving the problem in the same way
      • +
    • Although both are independed discoveries, I don't think it's a coincidence promises appeared given the nature of the JS world.
      • +
    +
    +
    +
    +
    =<< Composition >>=
    +
    +

    Composition

    +
    +
    +
      +
    • Let's think about composition...
      • +
    • I touched on it before, but it's so important that I think it deserves its own little bit
      • +
    • I don't really have that many slides for this bit because composition is not really something you can make drawings of easily
      • +
    • I do have a few illustrations though
      • +
    @@ -643,6 +897,7 @@ threeFs = repeat("f").substr(0,3); urlParts = document.URL.split('#'); window.console.log(urlParts); var currentSlide = urlParts.length > 1 ? urlParts[1] : 0; + var bc = new BroadcastChannel('test_channel'); document.getElementById('slide-' + currentSlide).style.display = 'block'; document.onkeydown = checkKey; @@ -655,6 +910,11 @@ threeFs = repeat("f").substr(0,3); } currentSlide--; document.getElementById('slide-' + currentSlide).style.display = 'block'; + + notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes'); + if(!!notes[0]) { + bc.postMessage(notes[0].innerHTML); + } } else if (e.keyCode == '39') { if (document.getElementById('slide-' + currentSlide)) { @@ -662,9 +922,13 @@ threeFs = repeat("f").substr(0,3); } currentSlide++; document.getElementById('slide-' + currentSlide).style.display = 'block'; - } - console.log(currentSlide); + notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes'); + if(!!notes[0]) { + bc.postMessage(notes[0].innerHTML); + } + + } } @@ -713,7 +977,9 @@ threeFs = repeat("f").substr(0,3); "1729 is the best number (I checked them all).", "The secret to strengh is to eat only a banana for breakfast.", "All of Back to the Future happened in the past.", - "Everything is in the future." + "Everything is in the future.", + "We owe functional and procedural programming to the pre-Socratics, Heraclitus and Anaximander respectively.", + "Preservative has a very different meaning in many European languages" ]; cgq = document.getElementById("cgquotes"); @@ -794,5 +1060,6 @@ threeFs = repeat("f").substr(0,3); usedPositions.push(thing); } + diff --git a/notes.html b/notes.html new file mode 100644 index 0000000..e633dca --- /dev/null +++ b/notes.html @@ -0,0 +1,25 @@ + + + + + + +
    + hello +
    + + + diff --git a/notes.txt b/notes.txt new file mode 100644 index 0000000..6fa9bf7 --- /dev/null +++ b/notes.txt @@ -0,0 +1,39 @@ +- Main slide plus the crazy slide + +- Foreward: Pls don't nitpick, pls pay close attention and keep the slides full screen or whatever, pls ask questions + +- Outline the sections + +- Show the quote about making people want to explore the ocean instead of forcing them to build boats +- Perspective slide: Explain that the talk is not about haskell, "When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from. For this discussion, I've settled on a very meta one. Perspective itself. This is not a talk about haskell, it's about viewing programming through different perspectives" +- More on that in a second +- Explain what FP is in words (define pure functions) +- Ask wtf you would wanna do that +- The best answer I have is "learning is good", "brain plasticity" +- Show the paradigm diagrams - "while w're on the topic of looking at things through different perspectives.... imerative and declaritive are used to describe human languages. Programming languages are human languages too. In fact I prefer to think of them this way" +- The same way learning a new human language can help your POV, so can learning a new programming paradigm +- Discuss "Perspective, brain plasticity, relate to human language (emphasise that programming languages are also human languages). + - Makes you a better communicator + - By making programs declarative we remove the temporal dimension, which makes what the program does clearer and leaves our brains free to do other things + - Bring it full circle to the "why would you wanna do that" - "functional programming is awesome because it doesn't give you the ability to do thing which other languages do" + - "Liberties constrain, constraints liberate" + - Imperative programming is not always the right tool - doing the same thing over and over but expecting different results can be considered madness + +- Enough philosophy mumbo jumbo +- Show the x = x + 1 thing +- "Do this Vs This is this" +- Elaborate on perspective and how changing it can give you powerful new tools (infinite lists, atemporality for example) +- Communication is key, and the functional paradigm is brilliant for this (expressivity) +- Functional: Thinking -> Relations +- Procedural: Thinking -> change +- Jump to promises + - Explain what they are not + - Explain what they are trying to solve (actions that take random time to complete, or may fail) + - Reveal that they allow you to write atemporal code which is why they work so well when dealing with asynchronous actions +- Relate to Either type + +- Composition is key to getting things done + - Pyramids, LIGO, LHC, McDonald's + - Nature's greatest hack +- Speed increase in computation is no longer mainly driven by Moore's law, it is mainly driven by the parallelisation of programs, once again we arrive at the need to write atemporal programs +- FP lends it self to composition naturally -- 2.11.0