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;
33 letter-spacing: -
20px;
34 transform: rotate(
90deg) scale(
1,
1.5);
42 font-family: 'Press Start
2P', cursive;
43 text-shadow:
2px
2px
0 #
000;
49 text-shadow:
2px
2px
0 #
000;
55 text-shadow:
10px
10px
0 #
00000069;
61 box-shadow:
10px
10px
0 #
00000069;
64 background: #
6187a8e3;
69 justify-content: center;
77 justify-content: center;
84 text-shadow:
2px
2px
0 #
000;
97 image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
98 image-rendering: -moz-crisp-edges; /* Firefox */
99 image-rendering: -o-crisp-edges; /* Opera */
100 image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
101 image-rendering: pixelated; /* Chrome */
102 image-rendering: optimize-contrast; /* CSS3 Proposed */
103 -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
110 #slide-
1 .shake-constant, .crazy, .span {
111 display: inline-block;
114 #slide-
1 .shake-opacity {
126 box-shadow:
10px
10px
0 #
00000069;
127 border:
2px solid black;
128 background-color: #
3f6382;
133 box-shadow:
10px
10px
0 #
00000069;
134 border:
2px solid black;
141 span[class^=
"code-friends"].on, span[class^=
"code-friends"].on
> span {
142 color: #f98012 !important;
145 span[class^=
"promise"].on, span[class^=
"promise"].on
> span, span[class^=
"promise"].on
> span
> span, span[class^=
"promise"].on
> span
> span
> span {
146 color: #f98012 !important;
161 <div style=
"height: 20%; text-align: center;">
162 <img style=
"height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src=
"img/cloudguy.gif" />
163 <div id=
"cgquotes" style=
"width: 80%; margin: auto;">Welcome to the talk!
</div>
168 <div class=
"slide-title">=<< What's up with that Title?
>>=
</div>
169 <div class=
"slide flexotron">
170 <div style=
"justify-content: right;">
171 <img class=
"shake-constant shake" src=
"img/wide-eyed-crazy.png" style=
"width: 70%; margin-right: 10%;">
173 <div style=
"justify-content: left">
174 <div style=
"display: flex; align-items: center; width: 70%">
175 <div id=
"rant" class=
"textbox" style=
"display: block;height: auto; width:100%; margin-left:10%;">
176 <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>
180 <div class=
"fig">Fig
1.1 What most people thing a typical functional programming advocate looks like
</div>
184 <div class=
"slide-title">=<< Obligatory Quote
>>=
</div>
189 <div class=
"slide-title">=<< Obligatory Quote
>>=
</div>
191 <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>
195 <div class=
"slide-title">=<< Promises
>>=
</div>
196 <div class=
"slide flexotron">
197 <div style=
"position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
198 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
199 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
200 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
201 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
202 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
203 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
204 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
205 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
206 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
207 <div class=
"angereyWrap"><div class=
"angerey">>:(
</div></div>
208 Promises
<span class=
"shake-slow shake-constant" style=
"display: inline-block; color: #f98012">do not
</span> make things asynchronous!
</div>
212 <div class=
"slide-title">=<< Promises
>>=
</div>
214 <h1>What problems do promises solve?
</h1>
215 <div class=
"textbox" style=
"width: 60%; margin: auto; text-align: left;">
217 <li>Asynchronous request management
</li>
218 <li>Error handling for computations which may fail
</li>
219 <li>Probably more too
</li>
222 <h1 style=
"margin-top: 50px;">What are promises then?
</h1>
223 <div class=
"textbox" style=
"width: 60%; margin: auto; text-align: left;">
225 <li>A value (which may or may not be available yet) wrapped in some additional context
</li>
226 <li>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
227 <li>A rule for composing these wrapped values (then)
</li>
233 <div class=
"slide-title">=<< Promises
>>=
</div>
235 <h1>Terminology/syntax recap
</h1>
236 <h2>JavaScript arrow functions
</h2>
237 <div style=
"display: flex;">
238 <pre style=
"margin: auto;"><code style=
"font-size: 20px;">x =
> x +
1;
</code></pre>
240 <div style=
"display: flex; margin-top: 20px; margin-bottom: 20px;">
241 <span style=
"margin: auto;">is equivalent to:
</span>
243 <div style=
"display: flex; margin-bottom:50px;">
244 <pre style=
"margin: auto;"><code style=
"font-size: 20px;">function(x) {
249 <div style=
"display: flex;">
250 <div class=
"textbox" style=
"margin: auto; width: 60%; font-size: 20px;">A method of combining two things of the same type in to another thing that is also of the same type
</div>
255 <div class=
"slide-title">=<< Promises
>>=
</div>
257 <h1>Promise composition
</h1>
258 <div style=
"display: flex;">
259 <div class=
"textbox" style=
"margin: auto; width: 60%; font-size: 20px;">The `then` method of a promise accepts a function as an argument. This function takes a value and returns a new promise. The new promise
"combines" the previous two using the
"composition rule" given to `then`.
</div>
261 <div style=
"display: flex; margin-top: 100px">
262 <pre style=
"margin: auto;"><code style=
"font-size: 12px;"><span class=
"promise3"><span class=
"promise2"><span class=
"promise1">Promise.resolve(
"Some value")
</span>.then(x =
> Promise.resolve(x +
" and another value"))
</span>.then(x =
> Promise.resolve(x +
" and another one!"))
</span>;
</code></pre>
264 <div style=
"display: flex;">
265 <div class=
"textbox" style=
"margin: auto; width: 60%; font-size: 20px; margin-top: 50px;">There are three promises in the above snippet.
<span onmouseenter=
"activatePromise(1)" onmouseleave=
"deactivatePromise(1)" class=
"promise1">One
</span>,
<span onmouseenter=
"activatePromise(2)" onmouseleave=
"deactivatePromise(2)" class=
"promise2">two
</span>,
<span onmouseenter=
"activatePromise(3)" onmouseleave=
"deactivatePromise(3)" class=
"promise3">three
</span>.
</div>
267 <div style=
"display: flex; margin-top: 100px">
268 <pre style=
"margin: auto;"><code style=
"font-size: 12px;">Promise.resolve(
"Some value").then(x =
> Promise.reject(
"It's all gone wrong")).then(x =
> Promise.resolve(x +
" and another one!"));
</code></pre>
270 <div style=
"display: flex;">
271 <div class=
"textbox" style=
"margin: auto; width: 60%; font-size: 20px; margin-top: 50px;">The above snippet still results in a promise, but it is a
"failed" one. Any subsequent `then` after the `reject` has no effect.
</div>
276 <div class=
"slide-title">=<< Promises
>>=
</div>
278 <h1>OK great but who cares?
</h1>
279 <div class=
"textbox" style=
"width: 60%; margin: auto; text-align: left;">
281 <li>We are
<span class=
"shake-constant shake-opacity highlight" style=
"display: inline-block;">declaring
</span> how we want promises to compose
</li>
283 The order that the promises actually resolve their values in is not important
284 <ul><li>In other words, we don't have to worry about
<span class=
"shake-constant shake-opacity highlight" style=
"display: inline-block;">timing
</span> anymore
</li></ul>
286 <li>We can
<span class=
"shake-constant shake-opacity highlight" style=
"display: inline-block;">declare
</span> a failure anywhere in the chain
</li>
292 <div class=
"slide-title">=<< Promises
>>=
</div>
293 <div class=
"slide flexotron">
294 <div style=
"position: relative;">
295 <img src=
"img/thonking.gif" />
296 <div class=
"thonkingWrap"><div class=
"thonk">atemporality?
</div></div>
297 <div class=
"thonkingWrap"><div class=
"thonk">declaritive?
</div></div>
298 <div class=
"thonkingWrap"><div class=
"thonk">functions?
</div></div>
299 <div class=
"thonkingWrap"><div class=
"thonk">composition?
</div></div>
304 <div class=
"slide-title">=<< Promises
>>=
</div>
308 <pre style=
"margin-bottom: 50px;"><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>)
309 <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>))
310 <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>
312 <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>)
313 <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>))
314 <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>
318 <div class=
"slide-title">=<< Promises
>>=
</div>
322 <pre style=
"margin-bottom: 50px;"><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>)
323 <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>))
324 <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>))
325 <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>
327 <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>)
328 <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>))
329 <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>))
330 <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>
335 var div, i, j, span, duration =
"";
338 div = document.querySelectorAll(
"#rant > span.crazy");
339 for (j =
0; j < div.length; j++) {
341 for (i =
0; i < div[j].innerText.length; i++) {
342 duration = Math.floor(Math.random() *
5) +
100
343 span +=
"<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration +
"ms\">";
344 span += div[j].innerText[i] ==
" " ?
" " : div[j].innerText[i];
347 crazyTexts.push(span);
350 opacities = document.querySelectorAll(
"#rant > span.shake-opacity");
351 for (k =
0; k < opacities.length; k++) {
353 opacities[k].style.animationDuration = shrek + 's';
354 opacyTexts.push(opacities[k].outerHTML);
358 for (l =
0; l< crazyTexts.length; l++) {
359 allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] :
"");
362 document.getElementById('rant').innerHTML = allText;
366 var b = document.querySelectorAll('body')[
0];
367 setInterval(function(){
370 b.style.backgroundPosition = x + 'px ' + y + 'px';
373 urlParts = document.URL.split('#');
374 window.console.log(urlParts);
375 var currentSlide = urlParts.length
> 1 ? urlParts[
1] :
0;
376 document.getElementById('slide-' + currentSlide).style.display = 'block';
377 document.onkeydown = checkKey;
379 function checkKey(e) {
381 e = e || window.event;
382 if (e.keyCode == '
37') {
383 if (document.getElementById('slide-' + currentSlide)) {
384 document.getElementById('slide-' + currentSlide).style.display = 'none';
387 document.getElementById('slide-' + currentSlide).style.display = 'block';
389 else if (e.keyCode == '
39') {
390 if (document.getElementById('slide-' + currentSlide)) {
391 document.getElementById('slide-' + currentSlide).style.display = 'none';
394 document.getElementById('slide-' + currentSlide).style.display = 'block';
397 console.log(currentSlide);
401 function activateFriends(n) {
402 f = document.querySelectorAll('.code-friends' + n);
404 for (fr =
0; fr< f.length; fr++) {
405 f[fr].classList.add(
"shake-constant");
406 f[fr].classList.add(
"shake-slow");
407 f[fr].classList.add(
"on");
411 function deactivateFriends(n) {
412 f = document.querySelectorAll('.code-friends' + n);
413 for (fr =
0; fr< f.length; fr++) {
414 f[fr].classList.remove(
"shake-constant");
415 f[fr].classList.remove(
"shake-slow");
416 f[fr].classList.remove(
"on");
420 function activatePromise(n) {
421 p = document.querySelectorAll('.promise' + n);
422 for (fr =
0; fr< p.length; fr++) {
423 p[fr].classList.add('on');
427 function deactivatePromise(n) {
428 p = document.querySelectorAll('.promise' + n);
429 for (fr =
0; fr< p.length; fr++) {
430 p[fr].classList.remove('on');
435 "Welcome to the talk!",
436 "I hope we'll have fun exploring functional programming together!",
437 "But while we wait let's share interesting facts and anectodes :)",
438 "If you can be disgruntled, can you also be gruntled?",
439 "0.9 recurring is exactly equal to one if you think about it.",
440 "In English, the word \"ghoti\" can be pronounced as \"fish\".",
441 "Your credit card details are somewhere in Pi.",
442 "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
443 "1729 is the best number (I checked them all).",
444 "The secret to strengh is to eat only a banana for breakfast.",
445 "All of Back to the Future happened in the past.",
446 "Everything is in the future."
449 cgq = document.getElementById(
"cgquotes");
450 numQuotes = cloudGuyQuotes.length;
452 setInterval(function(){
453 if (currentQuote ==
0 || currentQuote ==
1) {
456 currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length -
3)) +
3;
457 console.log(currentQuote);
460 cgq.innerText = cloudGuyQuotes[currentQuote];
463 angeries = document.querySelectorAll(
".angereyWrap");
465 shakes = [
"shake",
"shake-hard",
"shake-slow",
"shake-little",
"shake-horizontal",
"shake-vertical",
"shake-rotate",
"shake-opacity",
"shake-crazy",
"shake-chunk"];
466 for (a =
0; a < angeries.length; a++) {
467 randomness = (Math.round(Math.random() *
10) +
1) * -
10;
468 angeries[a].style.top = ((a
> 4) ? (-
180-randomness) : (
180 + randomness)) +
"%" ;
469 thing = ((Math.floor(Math.random() *
10) +
1) *
9) +
"%";
471 while (usedPositions.includes(thing)) {
472 thing = ((Math.floor(Math.random() *
10) +
1) *
9) +
"%";
475 angeries[a].style.left = thing;
476 angeries[a].classList.add(
"shake-constant");
477 angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
478 usedPositions.push(thing);
481 thonkings = document.querySelectorAll(
".thonkingWrap");
482 shakes = [
"shake-slow",
"shake-little",
"shake-opacity"];
484 for (a =
0; a < thonkings.length; a++) {
485 thing = Math.floor(Math.random() *
4) +
1;
486 randomnessX = -(Math.round(Math.random() *
100) +
1);
487 randomnessY = -(Math.round(Math.random() *
50) +
1);
489 while (usedPositions.includes(thing)) {
490 thing = Math.floor(Math.random() *
4) +
1;
495 thonkings[a].style.left = randomnessX + 'px';
496 thonkings[a].style.top = randomnessY + 'px';
497 thonkings[a].children[
0].style.transform = 'rotate(-
40deg) scale(
1,
1.5)'
498 thonkings[a].classList.add(
"shake-constant");
499 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
502 thonkings[a].style.right = randomnessX + 'px';
503 thonkings[a].style.top = randomnessY + 'px';
504 thonkings[a].classList.add(
"shake-constant");
505 thonkings[a].children[
0].style.transform = 'rotate(
40deg) scale(
1,
1.5)'
506 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
509 thonkings[a].style.right = randomnessX + 'px';
510 thonkings[a].style.bottom = randomnessY + 'px';
511 thonkings[a].classList.add(
"shake-constant");
512 thonkings[a].children[
0].style.transform = 'rotate(-
215deg) scale(
1,
1.5)'
513 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
516 thonkings[a].style.left = randomnessX + 'px';
517 thonkings[a].style.bottom = randomnessY + 'px';
518 thonkings[a].classList.add(
"shake-constant");
519 thonkings[a].children[
0].style.transform = 'rotate(
215deg) scale(
1,
1.5)'
520 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
525 usedPositions.push(thing);