JavaScript

Promise.resolve("We start here")
+            What problem to promises solve?
+            
+                
+                    Asynchronous request management
+                    Error handling for computations which may fail
+                    Probably more too
+                
+            
+            What are promises then?
+            
+                
+                    A value (which may or may not be available yet) wrapped in some additional context
+                    Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
+                    
A rule for composing these wrapped values (then)
+                
+            
+


+    
+        =<< Promises >>=
+        
+            Terminology/syntax recap
+            JavaScript arrow functions
+            
+                x => x + 1;
+            
+            
+                is equivalent to:
+            
+            
+                function(x) {
+    return x+1;
+}
+            
+            Composition
+            
+                A method of combining two things of the same type in to another thing that is also of the same type
+            
+        
+    
+    
+        =<< Promises >>=
+        
+            Promise composition
+            
+                The `then` method of a promise accepts a function as an argument. This function takes a value and returns a new promise. The result of `then` is now a new promise that combines the previous two using the "composition rule" given to `then`.
+            
+            
+                Promise.resolve("Some value").then(x => Promise.resolve(x + " and another value")).then(x => Promise.resolve(x + "and another one!"));
+            
+            
+                There are three promises in the above snippet. One, two, three.
+            
+            
+                Promise.resolve("Some value").then(x => Promise.reject("It's all gone wrong")).then(x => Promise.resolve(x + "and another one!"));
+            
+            
+                The above snippet still results in a promise, but it is a "failed" one. Any subsequent `then` after the `reject` has no effect.
+            
+        
+    
+    
+        =<< Promises >>=
+        
+            OK great but who cares?
+            
+                
+                    We are declaring how we want promises to compose
+                    
+                        The order that the promises actually resolve their values in is not important
+                        In other words, we don't have to worry about timing anymore
+                    
+                    We can declare a failure anywhere in the chain
+                
+            
+        
+    
+    
+        =<< Promises >>=
+        
+            
+                
+                atemporality?
+                declaritive?
+                functions?
+                composition?
+            
+        
+    
+


+        =<< Promises >>=
+


+            Woah!
+            JavaScript
+            Promise.resolve("We start here")
     .then(x => Promise.resolve(x + " then get here"))
     .then(x => Promise.resolve(x + " and finally here!"))
-            Haskell
+            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 >>=

JavaScript

Promise.resolve("We start here")
+            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!"))
-            Haskell
+            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!"))

@@ -275,8 +394,10 @@ document.getElementById('slide-' + currentSlide).style.display = 'block'; } + console.log(currentSlide); } + function activateFriends(n) { f = document.querySelectorAll('.code-friends' + n); @@ -296,6 +417,20 @@ } } + function activatePromise(n) { + p = document.querySelectorAll('.promise' + n); + for (fr = 0; fr< p.length; fr++) { + p[fr].classList.add('on'); + } + } + + function deactivatePromise(n) { + p = document.querySelectorAll('.promise' + n); + for (fr = 0; fr< p.length; fr++) { + p[fr].classList.remove('on'); + } + } + cloudGuyQuotes = [ "Welcome to the talk!", "I hope we'll have fun exploring functional programming together!", @@ -342,5 +477,52 @@ angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]); usedPositions.push(thing); } + + thonkings = document.querySelectorAll(".thonkingWrap"); + shakes = ["shake-slow", "shake-little", "shake-opacity"]; + usedPositions = []; + for (a = 0; a < thonkings.length; a++) { + thing = Math.floor(Math.random() * 4) + 1; + randomnessX = -(Math.round(Math.random() * 50) + 1); + randomnessY = -(Math.round(Math.random() * 50) + 1); + + while (usedPositions.includes(thing)) { + thing = Math.floor(Math.random() * 4) + 1; + } + + switch(thing) { + case 1: + thonkings[a].style.left = randomnessX + 'px'; + thonkings[a].style.top = randomnessY + 'px'; + thonkings[a].children[0].style.transform = 'rotate(-45deg) scale(1, 1.5)' + thonkings[a].classList.add("shake-constant"); + thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]); + break; + case 2: + thonkings[a].style.right = randomnessX + 'px'; + thonkings[a].style.top = randomnessY + 'px'; + thonkings[a].classList.add("shake-constant"); + thonkings[a].children[0].style.transform = 'rotate(45deg) scale(1, 1.5)' + thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]); + break; + case 3: + thonkings[a].style.right = randomnessX + 'px'; + thonkings[a].style.bottom = randomnessY + 'px'; + thonkings[a].classList.add("shake-constant"); + thonkings[a].children[0].style.transform = 'rotate(-225deg) scale(1, 1.5)' + thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]); + break; + case 4: + thonkings[a].style.left = randomnessX + 'px'; + thonkings[a].style.bottom = randomnessY + 'px'; + thonkings[a].classList.add("shake-constant"); + thonkings[a].children[0].style.transform = 'rotate(225deg) scale(1, 1.5)' + thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]); + break; + } + + + usedPositions.push(thing); + }