1
00:00:00,208 --> 00:00:04,771
Our colaboration starts with developers from Mozilla Labs and the Webmaker team.

2
00:00:04,771 --> 00:00:08,157
Webmaker runs events all over the world, we share what we know

3
00:00:08,157 --> 00:00:11,861
in schools, in homes, one and one, and everywhere!

4
00:00:11,876 --> 00:00:17,621
With ToghetherJS, two lines of JavaScript inserted into any web page

5
00:00:17,621 --> 00:00:20,877
gives you instant, feature-aware collaboration

6
00:00:20,877 --> 00:00:23,474
You can't get that with closed platforms or Skype!

7
00:00:23,474 --> 00:00:27,128
Out-of-the-box you get text chat, collaborative editing, and

8
00:00:27,128 --> 00:00:33,553
audio chat through WebRTC audio.
So we started experimenting using ToghetherJS

9
00:00:33,553 --> 00:00:36,105
and Thimble, WebMaker's code editor.

10
00:00:36,105 --> 00:00:39,714
Here's Ankit, in Brunei, and Amati, in Chennai, creating a postcard

11
00:00:39,714 --> 00:00:43,437
with HTML.
It says: "Hello Mozillians" in Hindi.

12
00:00:43,437 --> 00:00:46,887
Now listen to what happens when Paul Max in Vancouver and Michelle in Berlin

13
00:00:46,948 --> 00:00:49,017
get together to learn JavaScript.

14
00:00:49,017 --> 00:00:50,973
Powered by WebRTC audio.

15
00:00:52,695 --> 00:00:54,580
Pomax joined the session.

16
00:00:54,580 --> 00:00:57,027
Yeah, yeah, yeah... This rain dot js thing...

17
00:00:57,027 --> 00:01:03,131
Does really cool graphic stuff by just drawing rain drops in a picture

18
00:01:03,131 --> 00:01:09,182
and if you look on line 24 through 29, it'll tell you what it wants

19
00:01:09,182 --> 00:01:13,207
in terms of rain drops. So, you can see this, I'm gonna actually change the size

20
00:01:13,207 --> 00:01:18,199
of the rain drops, just by adding a couple of 1s.

21
00:01:18,199 --> 00:01:19,790
Oh yeah.

22
00:01:22,329 --> 00:01:27,549
And what it's actually doing is it's generating rain drops based on this array.

23
00:01:27,549 --> 00:01:31,393
If you've covered that in your JavaScript courses already, you can actually give it

24
00:01:31,393 --> 00:01:35,559
all kinds of different rain drops. So I can say I want this small rain drop

25
00:01:35,559 --> 00:01:40,493
and I want that to kick in half the time, and the other half of the time I want

26
00:01:40,493 --> 00:01:46,067
one big rain drop. So this should be a bit bigger.

27
00:01:46,067 --> 00:01:49,134
"So if you want to see..."
"Can I make it 150?"

28
00:01:49,134 --> 00:01:51,647
Go for it. Change that number.

29
00:01:51,647 --> 00:01:55,289
Hahaha. That's a huge rain drop.

30
00:01:56,473 --> 00:01:59,737
I'll just kick that back to 15 instead.

31
00:02:01,045 --> 00:02:05,833
You can also take the image URL which is right here.

32
00:02:05,833 --> 00:02:07,434
image URL!

33
00:02:07,434 --> 00:02:12,666
Well, I live in Berlin, so maybe I'll make it very... like a gray image of Berlin

34
00:02:15,374 --> 00:02:17,656
Oh, nice!

35
00:02:17,656 --> 00:02:21,173
That's my... there right around the corner from my house

36
00:02:21,173 --> 00:02:24,397
Oh so then according to that it's raining quite hard

37
00:02:24,397 --> 00:02:31,535
So let's just say... You know what? engine.preset(... big drops

38
00:02:31,535 --> 00:02:34,574
There we go! That's rain in Berlin