1

00:00:00,630  -->  00:00:05,190
Normally my weekly videos are in technology and libraries that are authored by other people.

2

00:00:05,190  -->  00:00:09,420
And so this week I'm really really excited to say that I've got something to show off to all of you

3

00:00:09,420  -->  00:00:12,230
that I actually wrote myself and I want to walk you through it.

4

00:00:12,240  -->  00:00:16,170
I think it's going to be an interesting and fun tool for a lot of people out there in the community

5

00:00:16,170  -->  00:00:16,590
.

6

00:00:16,590  -->  00:00:21,010
And so I'm kind of calling it JS playgrounds right now but I'm not really dead set on the name.

7

00:00:21,180  -->  00:00:24,510
If you want to follow along with this presentation you can order this video.

8

00:00:24,510  -->  00:00:27,930
And with that presentation we're going to go live and go to this address right here.

9

00:00:27,930  -->  00:00:33,640
So Stephen Grider which is my name dot github I.O. slash JS playgrounds.

10

00:00:33,660  -->  00:00:39,960
And right now JS playgrounds Hauspie capitalized to make sure you get capital G capital S s capital

11

00:00:39,960  -->  00:00:41,220
P on there as well.

12

00:00:41,520  -->  00:00:43,250
So what does this and what do I have on the screen.

13

00:00:43,260  -->  00:00:47,990
Well first off we've got a couple of different panels on the left hand side is a code Edr.

14

00:00:48,170  -->  00:00:53,280
And so in the code it or I can put in some amount of code and you'll see that instantly I get some feedback

15

00:00:53,280  -->  00:00:58,410
on the top right hand side all the different panels and here are resizable so feel free to drag them

16

00:00:58,410  -->  00:01:01,740
around to whatever layout you find preferable.

17

00:01:01,770  -->  00:01:05,060
So besides just being a coder you know what's what's really what's the point.

18

00:01:05,100  -->  00:01:05,800
Right.

19

00:01:05,820  -->  00:01:09,690
So let's say I've got some number and it's start off at just 10.

20

00:01:09,720  -->  00:01:11,740
I can print that number which we just saw.

21

00:01:12,060  -->  00:01:18,020
I can divide that number by five or something I can multiply it by 20.

22

00:01:18,060  -->  00:01:21,300
I can also put that number into a string.

23

00:01:21,300  -->  00:01:26,550
Your number is number like so now.

24

00:01:26,640  -->  00:01:27,940
Boom I got my string.

25

00:01:28,190  -->  00:01:33,060
I can even if I want to throw some GSX J S X in here as well excuse me.

26

00:01:33,210  -->  00:01:40,560
So I can put in a death and maybe have got inside of here number like so that's kind of boring So let's

27

00:01:40,560  -->  00:01:43,460
put that inside of the H-1.

28

00:01:43,500  -->  00:01:44,790
Make it nice and big.

29

00:01:45,090  -->  00:01:46,090
And there you go.

30

00:01:46,160  -->  00:01:47,670
Nice big edge one.

31

00:01:47,760  -->  00:01:52,750
And then just to spruce it out put a h r in there as well so I've got the horizontal divide as well

32

00:01:52,760  -->  00:01:53,000
.

33

00:01:53,300  -->  00:01:53,570
OK.

34

00:01:53,580  -->  00:01:55,980
So everything I've got on here so far.

35

00:01:55,980  -->  00:01:58,380
Kind of interesting you know it's printing out each individual line.

36

00:01:58,380  -->  00:02:03,810
So where it starts to get really fun is if I start changing a number or a value in here all the other

37

00:02:03,810  -->  00:02:07,700
values automatically recalculate and update on the fly.

38

00:02:07,710  -->  00:02:12,120
So basically the point of this tool is to give you some type of rapid prototyping environment something

39

00:02:12,120  -->  00:02:17,970
to kind of mess around with different technology concepts figure out what's going on and just experiment

40

00:02:18,290  -->  00:02:19,920
to irksomeness syntax in general.

41

00:02:19,920  -->  00:02:23,670
So I've had a lot of fun putting it together the whole thing you'll notice is that on the bottom right

42

00:02:23,670  -->  00:02:28,100
hand side you get some automatic air or I should say just parsing.

43

00:02:28,350  -->  00:02:33,570
So in this case I've got a number and then the number and then a slash which is not valid syntax right

44

00:02:33,570  -->  00:02:34,210
here.

45

00:02:34,230  -->  00:02:37,120
So I got an error about an unexpected token.

46

00:02:37,350  -->  00:02:39,380
And presumably it's somewhere on this line.

47

00:02:39,390  -->  00:02:41,850
So just something to help you figure out what's going wrong.

48

00:02:41,850  -->  00:02:46,910
If your code isn't running quite too well I can also make re-act components in here.

49

00:02:46,920  -->  00:02:53,550
All I want let's say I've got Kunst greeting and I'll make this a functional components and maybe I'll

50

00:02:53,550  -->  00:02:55,510
return from here.

51

00:02:55,770  -->  00:03:00,560
I now we want to make the change for why not.

52

00:03:01,260  -->  00:03:02,500
Hello.

53

00:03:03,240  -->  00:03:10,560
And so now on the next block I have down here I can put my greeting company as well and boom I've got

54

00:03:10,570  -->  00:03:11,550
help right there.

55

00:03:11,580  -->  00:03:14,000
I can also make class based components if I so chose.

56

00:03:14,010  -->  00:03:19,320
But you know there will be a lot of typing but yeah you can definitely make a class based reaction on

57

00:03:19,330  -->  00:03:22,710
it and tossed it into a block of GSX to get to render.

58

00:03:22,990  -->  00:03:26,960
I also got really good support for objects as well.

59

00:03:27,000  -->  00:03:35,120
So if I get Konst object and me it's got a color of red and I can just place object like so.

60

00:03:35,160  -->  00:03:37,760
And there's my string of FIDE object.

61

00:03:37,770  -->  00:03:39,220
Color is red.

62

00:03:39,540  -->  00:03:40,590
So very handy tool.

63

00:03:40,590  -->  00:03:41,370
I like it a lot.

64

00:03:41,370  -->  00:03:44,040
I'd be really excited to get some feedback from everyone.

65

00:03:44,070  -->  00:03:48,000
You can make pull requests whatever you want to do you want to help me out with it.

66

00:03:48,000  -->  00:03:50,320
I would love feedback.

67

00:03:50,490  -->  00:03:55,700
The repo is that Steven Grider slash Yes playgrounds.

68

00:03:55,710  -->  00:03:57,970
Right now I don't have any reusable reading or anything like that.

69

00:03:57,990  -->  00:04:00,960
You can take a look at the source and Faried what's going on if there's anything you want to help me

70

00:04:00,960  -->  00:04:01,950
out with that.

71

00:04:01,950  -->  00:04:03,320
Fantastic.

72

00:04:03,850  -->  00:04:07,440
So what to spend the most is video to tell you a little bit about how this thing is put together because

73

00:04:07,440  -->  00:04:11,730
that's probably the most interesting part and the part that I suspect a lot of people are really curious

74

00:04:11,730  -->  00:04:12,360
about.

75

00:04:12,630  -->  00:04:17,910
So behind the scenes the entire thing is just a reaction redux application and it's surprisingly not

76

00:04:17,910  -->  00:04:19,030
that complicated.

77

00:04:19,140  -->  00:04:22,140
Well I didn't say that it took me a heck of a long time to figure out how to do it.

78

00:04:22,270  -->  00:04:25,190
But I mean to say is that there are not a lot of moving pieces.

79

00:04:25,200  -->  00:04:27,150
I think there would be more accurate to say.

80

00:04:27,540  -->  00:04:30,050
So I've got my code Arafura here is the project.

81

00:04:30,150  -->  00:04:31,540
A lot of the stuff is still pretty rough.

82

00:04:31,550  -->  00:04:38,250
I can use a little bit of clean up which is part of what I hope to get some maybe some PR to help me

83

00:04:38,250  -->  00:04:43,860
out with those walk through the events or kind of the cycle of this of this thing.

84

00:04:43,860  -->  00:04:48,490
First off I'm using code more as the code editor so Code me or is a in browser code editor.

85

00:04:48,480  -->  00:04:50,720
And that's what we saw on the left hand side of panel.

86

00:04:50,730  -->  00:04:53,790
I used a very popular package from Jed Watson.

87

00:04:53,790  -->  00:04:56,380
Thanks very much Jed called React CodeMirror Editor.

88

00:04:56,470  -->  00:04:59,680
It can give me a React compatible version of that editor.

89

00:05:00,090  -->  00:05:05,160
So whenever you type in some amount of code into the editor it fires in onchange event and I pass it

90

00:05:05,160  -->  00:05:10,440
off to an action creator and the action care is very simple it just takes that code produces an action

91

00:05:10,500  -->  00:05:14,400
and returns it where eventually ends up in the producer and the producer catches it.

92

00:05:14,400  -->  00:05:17,230
So let's let's follow that could path around.

93

00:05:17,250  -->  00:05:19,330
So here is my editor.

94

00:05:19,610  -->  00:05:21,290
Here's code in your right here.

95

00:05:21,420  -->  00:05:24,590
And whenever coding your gets changed.

96

00:05:24,600  -->  00:05:26,570
We call on could change right here.

97

00:05:26,610  -->  00:05:31,100
And that calls my action creator of this dot props dot update code.

98

00:05:31,170  -->  00:05:33,240
So not too bad right here.

99

00:05:33,240  -->  00:05:34,410
Not too bad.

100

00:05:34,500  -->  00:05:36,570
We go into the action creators file.

101

00:05:36,570  -->  00:05:38,050
Here's my single action creator.

102

00:05:38,070  -->  00:05:41,200
Is this only just one action creator for the entire thing.

103

00:05:41,230  -->  00:05:42,710
I call that update code.

104

00:05:42,840  -->  00:05:44,040
And here's my action.

105

00:05:44,040  -->  00:05:44,310
Yup.

106

00:05:44,340  -->  00:05:45,810
It just returns some amount of code.

107

00:05:45,810  -->  00:05:50,280
So everything up to this point kinda you know not too crazy on the redux side of things.

108

00:05:50,280  -->  00:05:51,020
Not too bad.

109

00:05:51,060  -->  00:05:56,310
So we're just taking some amount of code and dispatching or returning an action where things start to

110

00:05:56,310  -->  00:06:00,870
get a little bit more complicated is after we hit the reducer.

111

00:06:01,200  -->  00:06:07,080
So here's my co-producer re-attaching the case did update code in which case I just say OK here's the

112

00:06:07,080  -->  00:06:10,760
new code and the code at this point in time is literally a string.

113

00:06:10,770  -->  00:06:16,560
It's just a string of characters string characters that say here is like the exact bit of code you have

114

00:06:16,570  -->  00:06:16,890
.

115

00:06:17,190  -->  00:06:22,370
So where things start to get really nasty is inside of the selector and the viewer component.

116

00:06:22,680  -->  00:06:27,780
So the selector is a select selector and if you're not familiar three slacked up got another video on

117

00:06:27,780  -->  00:06:29,700
it from a month or two ago.

118

00:06:29,760  -->  00:06:33,570
You can go to check out our recycling bin if you so chose.

119

00:06:34,290  -->  00:06:41,250
So this is my reast select selector right here and like I said it's a nasty little bit of code I would

120

00:06:41,250  -->  00:06:45,140
love to get a little bit of refactoring in here would be just fantastic.

121

00:06:45,360  -->  00:06:48,480
So let's just do a little bit of a walkthrough and talk about how it works.

122

00:06:48,600  -->  00:06:53,730
In general the way with this the way that you know I kind of figure out how to parse the entire expression

123

00:06:54,000  -->  00:07:00,000
or you know all this code on in here is I use library called Esprit mounts so as Prema I've no idea

124

00:07:00,000  -->  00:07:01,720
if I'm pronouncing that correctly.

125

00:07:01,800  -->  00:07:03,250
But here it is right here.

126

00:07:03,420  -->  00:07:10,980
I use a method Esprit mode called tokenize so it tokenized does it turns all of the code in a string

127

00:07:10,990  -->  00:07:11,030
.

128

00:07:11,070  -->  00:07:16,800
You know you give it a string and it takes that code and it tokenize it by tokenize I mean it turns

129

00:07:16,800  -->  00:07:23,850
it into an array of objects where each object represents one specific token of our code and a token

130

00:07:23,850  -->  00:07:30,290
can be like a parenthesis C a variable name an equal sign in multiplication sign whatever it might be

131

00:07:30,310  -->  00:07:36,480
just some token of code after I turn it into a tokenize version of the code.

132

00:07:36,630  -->  00:07:41,610
I then take a look at all the different parentheses combinations we could possibly have and eventually

133

00:07:41,610  -->  00:07:45,570
figure out what are the valid expressions in the snippet of code right here.

134

00:07:45,780  -->  00:07:49,870
So valid expressions would be line one by itself.

135

00:07:50,070  -->  00:07:53,220
Line 2 by itself 4 5 6 7 8.

136

00:07:53,220  -->  00:07:56,340
Those are all valid single line expressions.

137

00:07:56,340  -->  00:08:01,660
Line 10 however is not a valid expression because it has an opening parentheses only.

138

00:08:01,950  -->  00:08:08,190
When we go from line 10 to 12 do we get entire valid expression and the same thing down on line 14 as

139

00:08:08,190  -->  00:08:08,610
well.

140

00:08:08,610  -->  00:08:11,930
So line 14 I have an opening div that's not a valid expression.

141

00:08:11,940  -->  00:08:14,130
I need to have a closing div as well.

142

00:08:14,130  -->  00:08:17,910
So lines 14 through 18 would be a valid expression.

143

00:08:17,910  -->  00:08:22,100
After suffering everything out into these you know what I consider to be a valid expression.

144

00:08:22,210  -->  00:08:27,450
I then kind of do a little bit of what am I refered to as like a waterfall execution of code where I

145

00:08:27,450  -->  00:08:29,620
first execute line 1.

146

00:08:29,620  -->  00:08:35,290
I decide whether or not it it produces a value that I should log over here on the right hand side.

147

00:08:35,550  -->  00:08:42,870
If it does not then execute lines 1 and 2 and decide if it produces a usable value I then execute lines

148

00:08:42,900  -->  00:08:46,800
1 2 3 and 4 and decide if it produces a usable value.

149

00:08:46,820  -->  00:08:48,430
In that case it does object.

150

00:08:48,490  -->  00:08:51,810
Right here is a value that I can log off to screen.

151

00:08:51,840  -->  00:08:54,250
I then do one two three four five.

152

00:08:54,330  -->  00:08:59,690
There's our number 1 two three four five six number 1 3 7 so on and so on.

153

00:08:59,790  -->  00:09:07,350
And basically this snippet of code right here will be executed something like a 1 to you know maybe

154

00:09:07,350  -->  00:09:13,440
about nine times or so all with incrementing lines of code and that's how I get these individual values

155

00:09:13,440  -->  00:09:15,150
to actually print up on the screen over here.

156

00:09:15,150  -->  00:09:21,870
So for every time you type in a character it's running your code many many times it with ink incrementally

157

00:09:21,870  -->  00:09:25,020
increasing large snippets of code.

158

00:09:25,050  -->  00:09:31,260
So once I actually get a value out of here like say an object or a number a string or even a re-act

159

00:09:31,270  -->  00:09:36,640
component as we have down here I then need to figure out how to actually render this screen.

160

00:09:36,660  -->  00:09:39,040
And that's the purpose of the component.

161

00:09:39,300  -->  00:09:45,850
So the viewer component Your ego has a method called evaluate expressions.

162

00:09:45,900  -->  00:09:50,080
And so for each expression that I returned from that.

163

00:09:50,680  -->  00:09:53,510
And that's Lechter I evaluate the expression.

164

00:09:53,520  -->  00:09:59,170
So yes this is horridly vulnerable to excess S. attacks.

165

00:09:59,190  -->  00:10:02,900
So I could probably pretty arbitrarily put in something like you know alert.

166

00:10:03,180  -->  00:10:04,310
Yeah and there's there's an alert.

167

00:10:04,320  -->  00:10:09,750
So it is pretty darn susceptible to excess as attacks if you are curious.

168

00:10:10,020  -->  00:10:16,740
But anyways inside of evaluate expressions I look at each expression are the results of each expression

169

00:10:17,130  -->  00:10:20,100
and I decide based on the type of the expression.

170

00:10:20,100  -->  00:10:27,690
So going to do some divination to see like OK's is a function is a boolean is it an object or is it

171

00:10:27,690  -->  00:10:30,190
an array or whatever it might be.

172

00:10:30,230  -->  00:10:32,660
I then decide how to print up the value.

173

00:10:32,820  -->  00:10:38,280
So after I decide how to print up the value I take all those values and actually render them on to the

174

00:10:38,280  -->  00:10:39,300
screen.

175

00:10:39,480  -->  00:10:40,620
So that's how this tool works.

176

00:10:40,620  -->  00:10:42,610
Just a very high level overview.

177

00:10:42,930  -->  00:10:46,170
Definitely still could use some help in different areas.

178

00:10:46,170  -->  00:10:50,250
I hope to get some time over the next couple of days to spruce up the read me a little bit and give

179

00:10:50,250  -->  00:10:52,440
some directions on where I want to take the project.

180

00:10:52,650  -->  00:10:57,240
I do this is kind of a competitor to you know a lot of code Penan are things out there like code pen

181

00:10:57,240  -->  00:11:03,770
or jazz fiddle mostly because this editor or this you know whole construct right here does not require

182

00:11:03,770  -->  00:11:09,030
you to actually render something to an 8 T.M. document it just automatically takes all the principal

183

00:11:09,030  -->  00:11:11,960
values and tosses it onto the screen over here.

184

00:11:11,970  -->  00:11:16,440
You also note something this really important as well that it's distinctly different than just running

185

00:11:16,440  -->  00:11:22,290
code in your terminal because if I take those code and just run it all I get is the last character down

186

00:11:22,290  -->  00:11:22,720
here.

187

00:11:22,860  -->  00:11:26,450
It's got some GSX in there so that won't run.

188

00:11:26,580  -->  00:11:31,920
So if I instead just do this snippet of code the result is just the very last string here.

189

00:11:31,920  -->  00:11:37,470
So the reason I like this editor so much is I get to see incrementally what are all the different values

190

00:11:37,470  -->  00:11:39,630
they're fooling about my application.

191

00:11:40,110  -->  00:11:40,440
OK.

192

00:11:40,440  -->  00:11:41,560
So this is it.

193

00:11:41,640  -->  00:11:46,770
I hope you found this interesting I hope someone out there finds it as interesting as I find it.

194

00:11:46,770  -->  00:11:51,570
It's really great for teaching people about javascript just because you can see the value of every single

195

00:11:51,570  -->  00:11:53,850
expression as it gets executed.

196

00:11:53,850  -->  00:11:57,480
So again you can check it out at Steven Grider dot get her IO.

197

00:11:57,620  -->  00:12:03,600
JS playgrounds if you want to contribute in any way shape or form Feel free to leave me a comment here

198

00:12:03,810  -->  00:12:07,150
or drop me an email tweet me whatever you want.

199

00:12:07,150  -->  00:12:09,410
If you enjoyed this video check me out weekly.

200

00:12:09,450  -->  00:12:11,860
I have videos on the japes ecosystem.

201

00:12:11,860  -->  00:12:16,200
A lot of fun different topics and we get to look at pretty neat tools just like this.

202

00:12:16,230  -->  00:12:18,280
So I'll catch you next week.