1
00:00:00,443 --> 00:00:03,599
Welcome back to Emacs Rocks

2
00:00:03,599 --> 00:00:10,016
Today we're taking a look at the glorious stuff to be done with swank-js

3
00:00:10,016 --> 00:00:13,849
It's a REPL for JavaScript

4
00:00:13,849 --> 00:00:15,748
I found it a little hard to install,

5
00:00:15,748 --> 00:00:19,899
and I've added some convenient functions to set it up for myself.

6
00:00:19,899 --> 00:00:24,820
but now I can jack into the JavaScript REPL

7
00:00:28,066 --> 00:00:32,082
It has autocompletion, which is nice

8
00:00:32,082 --> 00:00:35,248
But I can also run JavaScript straight from the buffer.

9
00:00:35,248 --> 00:00:38,915
Eval is C-x C-e like in elisp

10
00:00:38,915 --> 00:00:41,198
and the results are at the bottom

11
00:00:41,198 --> 00:00:44,641
Let's square these numbers.

12
00:00:52,287 --> 00:00:56,882
And I can eval-and-replace

13
00:00:56,882 --> 00:00:59,032
That's pretty sweet

14
00:00:59,032 --> 00:01:01,748
Okay, now for the awesome part ...

15
00:01:01,748 --> 00:01:07,100
I made a little bouncy ball in Canvas

16
00:01:07,100 --> 00:01:09,165
I am now connecting to it,

17
00:01:09,165 --> 00:01:14,922
and I can do stuff with the browser from the REPL

18
00:01:25,137 --> 00:01:26,840
But check it out -

19
00:01:26,840 --> 00:01:30,036
I can write code straight in my editor too

20
00:01:30,036 --> 00:01:35,550
Like setting the vertical and horizontal speed of the ball.

21
00:01:43,703 --> 00:01:48,235
Both at the same time, please ... yeah!

22
00:01:52,696 --> 00:01:55,406
Or I can change the elasticity of the ball,

23
00:01:55,406 --> 00:02:00,567
to the point where it's gaining speed as it's bouncing.

24
00:02:03,459 --> 00:02:07,298
whoa! - come back here!

25
00:02:28,236 --> 00:02:30,377
Okay, let's check out the CSS

26
00:02:30,377 --> 00:02:34,373
what about a nice red background?

27
00:02:36,403 --> 00:02:38,148
nah ..

28
00:02:38,148 --> 00:02:41,594
some stars then

29
00:02:43,748 --> 00:02:47,252
yeah! cool

30
00:02:53,514 --> 00:02:55,295
Now, time for some fun ...

31
00:02:55,295 --> 00:02:58,865
Change the opacity, I'll make a new ball every time,

32
00:02:58,865 --> 00:03:02,474
and then loop the anim 200 times.

33
00:03:24,028 --> 00:03:26,721
See? There's the bouncy pattern.

34
00:03:26,721 --> 00:03:31,769
Now we can change the entry speed ...

35
00:03:37,492 --> 00:03:40,596
or the bounciness ...

36
00:03:40,596 --> 00:03:43,700
This should dampen it quickly.

37
00:03:43,700 --> 00:03:46,577
And this should make for some serious bouncing.

38
00:03:49,377 --> 00:03:53,710
I can even change the gravity.

39
00:04:02,787 --> 00:04:06,655
Okay, back to real animation

40
00:04:13,901 --> 00:04:18,172
See, there's the pattern we just made

41
00:04:18,726 --> 00:04:21,726
That's it for Emacs Rocks this time around

42
00:04:21,726 --> 00:04:24,727
Swank-js is some pretty awesome stuff

43
00:04:24,727 --> 00:04:29,058
If you can get it up and running that is

44
00:04:30,227 --> 00:04:34,325
Till next time!