3 <link rel=
"stylesheet" href=
"css/csshake.min.css">
4 <link href=
"https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel=
"stylesheet">
6 href=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
7 <script src=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
8 <script>hljs.initHighlightingOnLoad();
</script>
9 <title>Crazy Wide-Eyed Functional Programming
</title>
13 font-family: 'Press Start
2P', cursive;
17 background-color: #f98012;
18 background-image: url(
"img/tile.png");
19 background-repeat: repeat;
21 image-rendering: crisp-edges;
22 background-position-x: -
33px;
23 background-blend-mode: multiply;
32 letter-spacing: -
20px;
33 transform: rotate(
90deg) scale(
1,
1.5);
37 font-family: 'Press Start
2P', cursive;
38 text-shadow:
2px
2px
0 #
000;
44 text-shadow:
2px
2px
0 #
000;
50 text-shadow:
10px
10px
0 #
00000069;
56 justify-content: center;
60 box-shadow:
10px
10px
0 #
00000069;
63 background: #
6187a8e3;
69 justify-content: center;
76 text-shadow:
2px
2px
0 #
000;
85 image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
86 image-rendering: -moz-crisp-edges; /* Firefox */
87 image-rendering: -o-crisp-edges; /* Opera */
88 image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
89 image-rendering: pixelated; /* Chrome */
90 image-rendering: optimize-contrast; /* CSS3 Proposed */
91 -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
94 #slide-
1 .shake-constant, .crazy, .span {
95 display: inline-block;
98 #slide-
1 .shake-opacity {
108 box-shadow:
10px
10px
0 #
00000069;
109 border:
2px solid black;
110 background-color: #
3f6382;
114 box-shadow:
10px
10px
0 #
00000069;
115 border:
2px solid black;
122 span[class^=
"code-friends"].on {
123 color: #f98012 !important;
126 span[class^=
"code-friends"].on
> span {
127 color: #f98012 !important;
135 <div style=
"height: 20%; text-align: center;">
136 <img style=
"height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src=
"img/cloudguy.gif" />
137 <div id=
"cgquotes" style=
"width: 80%; margin: auto;">Welcome to the talk!
</div>
142 <div class=
"slide-title">=<< What's up with that Title?
>>=
</div>
144 <div style=
"justify-content: right;">
145 <img class=
"shake-constant shake" src=
"img/wide-eyed-crazy.png" style=
"width: 70%; margin-right: 10%;">
147 <div style=
"justify-content: left">
148 <div style=
"display: flex; align-items: center; width: 70%">
149 <div id=
"rant" class=
"textbox" style=
"display: block;height: auto; width:100%; margin-left:10%;">
150 <span class=
"crazy">It’s functions,
</span><span class=
"shake-constant shake-opacity">pure
</span><span class=
"crazy"> functions! Pure functions and their values, PURE FUNCTIONS FOREVER AND FOREVER AND FOREVER A HUNDRED YEARS
</span><span class=
"shake-constant shake-opacity">monad
</span><span class=
"crazy">... some... things... Me and
</span><span class=
"shake-constant shake-opacity">monads
</span><span class=
"crazy"> runnin' around and...
</span><span class=
"shake-constant shake-opacity">applicative functor
</span><span class=
"crazy"> time... a- all day long forever... All a - a hundred days
</span><span class=
"shake-constant shake-opacity">applicatives
</span><span class=
"crazy"> and
</span><span class=
"shake-constant shake-opacity">functors
</span><span class=
"crazy">! Forever a hundred times.... OVER and over
</span><span class=
"shake-constant shake-opacity">monad transformers
</span><span class=
"crazy">... adventures dot com... W W W dot at
</span><span class=
"shake-constant shake-opacity">lambda calculus
</span><span class=
"crazy"> and
</span><span class=
"shake-constant shake-opacity">category theory
</span><span class=
"crazy"> dot com w..w..w... function composition adventures... Ah- hundred years… Every minute
</span><span class=
"shake-constant shake-opacity">referential… transparency
</span><span class=
"crazy"> dot com.... w w w a hundred times...
</span><span class=
"shake-constant shake-opacity">composition
</span><span class=
"crazy"> dot com...
</span>
154 <div>Fig
1.1 What most people thing a typical functional programming advocate looks like
</div>
158 <div class=
"slide-title">=<< Obligatory Quote
>>=
</div>
163 <div class=
"slide-title">=<< Obligatory Quote
>>=
</div>
165 <div style=
"text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >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.
</div>
169 <div class=
"slide-title">=<< Promises
>>=
</div>
171 <div style=
"position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
172 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
173 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
174 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
175 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
176 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
177 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
178 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
179 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
180 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
181 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
182 Promises
<span class=
"shake-slow shake-constant" style=
"display: inline-block; color: #f98012">do not
</span> make things asynchronous!
</div>
187 <div class=
"slide-title">=<< Promises
>>=
</div>
190 <pre><code class=
"javascript"><span class=
"code-friends1" onmouseenter=
"activateFriends(1);" onmouseleave=
"deactivateFriends(1);" style=
"display: inline-block">Promise.resolve
</span>(
<span class=
"code-friends2" onmouseenter=
"activateFriends(2);" onmouseleave=
"deactivateFriends(2);" style=
"display: inline-block">"We start here"</span>)
191 <span class=
"code-friends3" onmouseenter=
"activateFriends(3);" onmouseleave=
"deactivateFriends(3);" style=
"display: inline-block">.then
</span>(
<span class=
"code-friends4" onmouseenter=
"activateFriends(4);" onmouseleave=
"deactivateFriends(4);" style=
"display: inline-block">x =
></span> <span class=
"code-friends5" onmouseenter=
"activateFriends(5);" onmouseleave=
"deactivateFriends(5);" style=
"display: inline-block">Promise.resolve
</span>(
<span class=
"code-friends6" onmouseenter=
"activateFriends(6);" onmouseleave=
"deactivateFriends(6);" style=
"display: inline-block">x +
" then get here"</span>))
192 <span class=
"code-friends7" onmouseenter=
"activateFriends(7);" onmouseleave=
"deactivateFriends(7);" style=
"display: inline-block">.then
</span>(
<span class=
"code-friends8" onmouseenter=
"activateFriends(8);" onmouseleave=
"deactivateFriends(8);" style=
"display: inline-block">x =
></span> <span class=
"code-friends9" onmouseenter=
"activateFriends(9);" onmouseleave=
"deactivateFriends(9);" style=
"display: inline-block">Promise.resolve
</span>(
<span class=
"code-friends10" onmouseenter=
"activateFriends(10);" onmouseleave=
"deactivateFriends(10);" style=
"display: inline-block">x +
" and finally here!"</span>))
</code></pre>
194 <pre><code class=
"haskell"><span class=
"code-friends1" onmouseenter=
"activateFriends(1);" onmouseleave=
"deactivateFriends(1);" style=
"display: inline-block">Right
</span>(
<span class=
"code-friends2" onmouseenter=
"activateFriends(2);" onmouseleave=
"deactivateFriends(2);" style=
"display: inline-block">"We start here"</span>)
195 <span class=
"code-friends3" onmouseenter=
"activateFriends(3);" onmouseleave=
"deactivateFriends(3);" style=
"display: inline-block">>>=
</span> (
<span class=
"code-friends4" onmouseenter=
"activateFriends(4);" onmouseleave=
"deactivateFriends(4);" style=
"display: inline-block">\x -
> </span><span class=
"code-friends5" onmouseenter=
"activateFriends(5);" onmouseleave=
"deactivateFriends(5);" style=
"display: inline-block">Right
</span> (
<span class=
"code-friends6" onmouseenter=
"activateFriends(6);" onmouseleave=
"deactivateFriends(6);" style=
"display: inline-block">x ++
" then get here"</span>))
196 <span class=
"code-friends7" onmouseenter=
"activateFriends(7);" onmouseleave=
"deactivateFriends(7);" style=
"display: inline-block">>>=
</span> (
<span class=
"code-friends8" onmouseenter=
"activateFriends(8);" onmouseleave=
"deactivateFriends(8);" style=
"display: inline-block">\x -
></span> <span class=
"code-friends9" onmouseenter=
"activateFriends(9);" onmouseleave=
"deactivateFriends(9);" style=
"display: inline-block">Right
</span> (
<span class=
"code-friends10" onmouseenter=
"activateFriends(10);" onmouseleave=
"deactivateFriends(10);" style=
"display: inline-block">x ++
" and finally here!"</span>))
</code></pre>
200 <div class=
"slide-title">=<< Promises
>>=
</div>
203 <pre><code class=
"javascript"><span class=
"code-friends1" onmouseenter=
"activateFriends(1);" onmouseleave=
"deactivateFriends(1);" style=
"display: inline-block">Promise.resolve
</span>(
<span class=
"code-friends2" onmouseenter=
"activateFriends(2);" onmouseleave=
"deactivateFriends(2);" style=
"display: inline-block">"We start here"</span>)
204 <span class=
"code-friends3" onmouseenter=
"activateFriends(3);" onmouseleave=
"deactivateFriends(3);" style=
"display: inline-block">.then
</span>(
<span class=
"code-friends4" onmouseenter=
"activateFriends(4);" onmouseleave=
"deactivateFriends(4);" style=
"display: inline-block">x =
></span> <span class=
"code-friends5" onmouseenter=
"activateFriends(5);" onmouseleave=
"deactivateFriends(5);" style=
"display: inline-block">Promise.resolve
</span>(
<span class=
"code-friends6" onmouseenter=
"activateFriends(6);" onmouseleave=
"deactivateFriends(6);" style=
"display: inline-block">x +
" then get here"</span>))
205 <span class=
"code-friends11" onmouseenter=
"activateFriends(11);" onmouseleave=
"deactivateFriends(11);" style=
"display: inline-block">.then
</span>(
<span class=
"code-friends12" onmouseenter=
"activateFriends(12);" onmouseleave=
"deactivateFriends(12);" style=
"display: inline-block">x =
></span> <span class=
"code-friends13" onmouseenter=
"activateFriends(13);" onmouseleave=
"deactivateFriends(13);" style=
"display: inline-block">Promise.reject
</span>(
<span class=
"code-friends14" onmouseenter=
"activateFriends(14);" onmouseleave=
"deactivateFriends(14);" style=
"display: inline-block">"Oh noes!"</span>))
206 <span class=
"code-friends7" onmouseenter=
"activateFriends(7);" onmouseleave=
"deactivateFriends(7);" style=
"display: inline-block">.then
</span>(
<span class=
"code-friends8" onmouseenter=
"activateFriends(8);" onmouseleave=
"deactivateFriends(8);" style=
"display: inline-block">x =
></span> <span class=
"code-friends9" onmouseenter=
"activateFriends(9);" onmouseleave=
"deactivateFriends(9);" style=
"display: inline-block">Promise.resolve
</span>(
<span class=
"code-friends10" onmouseenter=
"activateFriends(10);" onmouseleave=
"deactivateFriends(10);" style=
"display: inline-block">x +
" and finally here!"</span>))
</code></pre>
208 <pre><code class=
"haskell"><span class=
"code-friends1" onmouseenter=
"activateFriends(1);" onmouseleave=
"deactivateFriends(1);" style=
"display: inline-block">Right
</span>(
<span class=
"code-friends2" onmouseenter=
"activateFriends(2);" onmouseleave=
"deactivateFriends(2);" style=
"display: inline-block">"We start here"</span>)
209 <span class=
"code-friends3" onmouseenter=
"activateFriends(3);" onmouseleave=
"deactivateFriends(3);" style=
"display: inline-block">>>=
</span> (
<span class=
"code-friends4" onmouseenter=
"activateFriends(4);" onmouseleave=
"deactivateFriends(4);" style=
"display: inline-block">\x -
> </span><span class=
"code-friends5" onmouseenter=
"activateFriends(5);" onmouseleave=
"deactivateFriends(5);" style=
"display: inline-block">Right
</span> (
<span class=
"code-friends6" onmouseenter=
"activateFriends(6);" onmouseleave=
"deactivateFriends(6);" style=
"display: inline-block">x ++
" then get here"</span>))
210 <span class=
"code-friends11" onmouseenter=
"activateFriends(11);" onmouseleave=
"deactivateFriends(11);" style=
"display: inline-block">>>=
</span> (
<span class=
"code-friends12" onmouseenter=
"activateFriends(12);" onmouseleave=
"deactivateFriends(12);" style=
"display: inline-block">\x -
></span> <span class=
"code-friends13" onmouseenter=
"activateFriends(13);" onmouseleave=
"deactivateFriends(13);" style=
"display: inline-block">Left
</span>(
<span class=
"code-friends14" onmouseenter=
"activateFriends(14);" onmouseleave=
"deactivateFriends(14);" style=
"display: inline-block">"Oh noes!"</span>))
211 <span class=
"code-friends7" onmouseenter=
"activateFriends(7);" onmouseleave=
"deactivateFriends(7);" style=
"display: inline-block">>>=
</span> (
<span class=
"code-friends8" onmouseenter=
"activateFriends(8);" onmouseleave=
"deactivateFriends(8);" style=
"display: inline-block">\x -
></span> <span class=
"code-friends9" onmouseenter=
"activateFriends(9);" onmouseleave=
"deactivateFriends(9);" style=
"display: inline-block">Right
</span> (
<span class=
"code-friends10" onmouseenter=
"activateFriends(10);" onmouseleave=
"deactivateFriends(10);" style=
"display: inline-block">x ++
" and finally here!"</span>))
</code></pre>
216 var div, i, j, span, duration =
"";
219 div = document.querySelectorAll(
"#rant > span.crazy");
220 for (j =
0; j < div.length; j++) {
222 for (i =
0; i < div[j].innerText.length; i++) {
223 duration = Math.floor(Math.random() *
5) +
100
224 span +=
"<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration +
"ms\">";
225 span += div[j].innerText[i] ==
" " ?
" " : div[j].innerText[i];
228 crazyTexts.push(span);
231 opacities = document.querySelectorAll(
"#rant > span.shake-opacity");
232 for (k =
0; k < opacities.length; k++) {
234 opacities[k].style.animationDuration = shrek + 's';
235 opacyTexts.push(opacities[k].outerHTML);
239 for (l =
0; l< crazyTexts.length; l++) {
240 allText+=crazyTexts[l] +
" " + (opacyTexts[l] ? opacyTexts[l] :
"") +
" ";
243 document.getElementById('rant').innerHTML = allText;
247 var b = document.querySelectorAll('body')[
0];
248 setInterval(function(){
251 b.style.backgroundPosition = x + 'px ' + y + 'px';
254 urlParts = document.URL.split('#');
255 window.console.log(urlParts);
256 var currentSlide = urlParts.length
> 1 ? urlParts[
1] :
0;
257 document.getElementById('slide-' + currentSlide).style.display = 'block';
258 document.onkeydown = checkKey;
260 function checkKey(e) {
262 e = e || window.event;
263 if (e.keyCode == '
37') {
264 if (document.getElementById('slide-' + currentSlide)) {
265 document.getElementById('slide-' + currentSlide).style.display = 'none';
268 document.getElementById('slide-' + currentSlide).style.display = 'block';
270 else if (e.keyCode == '
39') {
271 if (document.getElementById('slide-' + currentSlide)) {
272 document.getElementById('slide-' + currentSlide).style.display = 'none';
275 document.getElementById('slide-' + currentSlide).style.display = 'block';
280 function activateFriends(n) {
281 f = document.querySelectorAll('.code-friends' + n);
283 for (fr =
0; fr< f.length; fr++) {
284 f[fr].classList.add(
"shake-constant");
285 f[fr].classList.add(
"shake-slow");
286 f[fr].classList.add(
"on");
290 function deactivateFriends(n) {
291 f = document.querySelectorAll('.code-friends' + n);
292 for (fr =
0; fr< f.length; fr++) {
293 f[fr].classList.remove(
"shake-constant");
294 f[fr].classList.remove(
"shake-slow");
295 f[fr].classList.remove(
"on");
300 "Welcome to the talk!",
301 "I hope we'll have fun exploring functional programming together!",
302 "But while we wait let's share interesting facts and anectodes :)",
303 "If you can be disgruntled, can you also be gruntled?",
304 "0.9 recurring is exactly equal to one if you think about it.",
305 "In English, the word \"ghoti\" can be pronounced as \"fish\".",
306 "Your credit card details are somewhere in Pi.",
307 "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
308 "1729 is the best number (I checked them all).",
309 "The secret to strengh is to eat only a banana for breakfast.",
310 "All of Back to the Future happened in the past.",
311 "Everything is in the future."
314 cgq = document.getElementById(
"cgquotes");
315 numQuotes = cloudGuyQuotes.length;
317 setInterval(function(){
318 if (currentQuote ==
0 || currentQuote ==
1) {
321 currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length -
3)) +
3;
322 console.log(currentQuote);
325 cgq.innerText = cloudGuyQuotes[currentQuote];
328 angeries = document.querySelectorAll(
".angereyWrap");
330 shakes = [
"shake",
"shake-hard",
"shake-slow",
"shake-little",
"shake-horizontal",
"shake-vertical",
"shake-rotate",
"shake-opacity",
"shake-crazy",
"shake-chunk"];
331 for (a =
0; a < angeries.length; a++) {
332 randomness = (Math.round(Math.random() *
10) +
1) * -
10;
333 angeries[a].style.top = ((a
> 4) ? (-
180-randomness) : (
180 + randomness)) +
"%" ;
334 thing = ((Math.floor(Math.random() *
10) +
1) *
9) +
"%";
336 while (usedPositions.includes(thing)) {
337 thing = ((Math.floor(Math.random() *
10) +
1) *
9) +
"%";
340 angeries[a].style.left = thing;
341 angeries[a].classList.add(
"shake-constant");
342 angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
343 usedPositions.push(thing);