1
00:00:00,430 --> 00:00:01,220
I'm Nick Pettit.

2
00:00:01,220 --> 00:00:02,110
>> I'm Jason Seifer.

3
00:00:02,110 --> 00:00:04,860
>> And you're watching The Treehouse Show,
your weekly dose of Internets

4
00:00:04,860 --> 00:00:07,990
where we talk about all things web design,
web development, and more.

5
00:00:07,990 --> 00:00:12,820
>> For a free month of Treehouse join us
over at teamtreehouse.com/show.

6
00:00:12,820 --> 00:00:14,257
In this episode we'll be talking

7
00:00:14,257 --> 00:00:16,888
about [SOUND] Human JavaScript, [SOUND]
interactive graphs.

8
00:00:16,888 --> 00:00:18,950
Side comments and more.

9
00:00:18,950 --> 00:00:20,116
>> Let's check it out.

10
00:00:20,116 --> 00:00:25,087
[MUSIC]

11
00:00:25,087 --> 00:00:30,149
>> First up, we have a project or a book
actually called Human Javascript.

12
00:00:30,149 --> 00:00:33,035
Now, this is not about JavaScript that has
gained

13
00:00:33,035 --> 00:00:35,920
sentience and tries to take over the human
race.

14
00:00:35,920 --> 00:00:38,560
>> It's also not JavaScript, larping.

15
00:00:38,560 --> 00:00:39,120
Just what we thought.

16
00:00:39,120 --> 00:00:40,500
>> That is a very good point.

17
00:00:40,500 --> 00:00:42,720
No, instead this is an e-book on how you
can

18
00:00:42,720 --> 00:00:46,730
code JavaScript very well that can be read
by humans.

19
00:00:46,730 --> 00:00:49,860
So this has a, great, great thorough table
of

20
00:00:49,860 --> 00:00:52,020
contents, right here you can see this
actually a.

21
00:00:52,020 --> 00:00:56,380
Pretty long book, it's got 15 different
chapters, and, it goes through everything

22
00:00:56,380 --> 00:01:02,090
you need to know to write great, client
side and server side JavaScript.

23
00:01:02,090 --> 00:01:05,880
Now, there is a ton of stuff, this is a
great book, so we're not gonna go over

24
00:01:05,880 --> 00:01:10,020
it, but there are some things that I did
want to, bring up for you to check out.

25
00:01:10,020 --> 00:01:12,460
First is, write code for humans.

26
00:01:12,460 --> 00:01:15,050
This is a really, really great thing to

27
00:01:15,050 --> 00:01:17,590
keep in mind, not matter what language
you're writing.

28
00:01:17,590 --> 00:01:20,030
But this shows you, how to write good

29
00:01:20,030 --> 00:01:23,250
code for humans that they can understand
in JavaScript.

30
00:01:23,250 --> 00:01:24,530
The great thing about this book is it

31
00:01:24,530 --> 00:01:27,500
shows you examples of what you should not
do

32
00:01:27,500 --> 00:01:29,060
and then shows you how to clean them

33
00:01:29,060 --> 00:01:33,750
up, and then expands upon that with
different examples.

34
00:01:33,750 --> 00:01:37,560
I also particularly like the, chapter on
models.

35
00:01:37,560 --> 00:01:38,890
Now if this shows you how to

36
00:01:38,890 --> 00:01:42,950
implement models inside of a, very simple
application.

37
00:01:42,950 --> 00:01:46,380
So on the client's side they're saying,
okay let's say you have a list

38
00:01:46,380 --> 00:01:51,360
of items and when you click something you
want to do something to those items.

39
00:01:51,360 --> 00:01:54,260
Well in the first case you add the class
selected.

40
00:01:54,260 --> 00:01:57,400
And, that probably works well for a little
while but as your

41
00:01:57,400 --> 00:02:02,720
application grows, well you might wanna do
more things with those selected items.

42
00:02:02,720 --> 00:02:05,900
So maybe you'll add on to it, perform an
AJAX request.

43
00:02:05,900 --> 00:02:08,000
And, this can work for a little while.

44
00:02:08,000 --> 00:02:12,010
But, let's say your application starts
expanding, well, then

45
00:02:12,010 --> 00:02:14,820
you might need to implement models in your
code.

46
00:02:14,820 --> 00:02:18,260
And then you can go through, grab the,
different elements and then

47
00:02:18,260 --> 00:02:21,150
implement what the exact same
functionality

48
00:02:21,150 --> 00:02:23,810
in your models, listening to Offence.

49
00:02:23,810 --> 00:02:27,450
So, there are just a ton of different
things that this book goes over.

50
00:02:27,450 --> 00:02:29,040
I really recommend reading it.

51
00:02:29,040 --> 00:02:30,630
You can, find the link in our show

52
00:02:30,630 --> 00:02:33,550
notes, which you can get to at
youtube.com/gotreehouse.

53
00:02:33,550 --> 00:02:34,740
Which works for us on iTunes.

54
00:02:34,740 --> 00:02:36,850
We are the Treehouse Show.

55
00:02:36,850 --> 00:02:37,530
>> Very cool stuff.

56
00:02:37,530 --> 00:02:40,980
Well next up is, The Simpsons in CSS.

57
00:02:40,980 --> 00:02:44,740
So, if you are familiar with the, popular
television show.

58
00:02:44,740 --> 00:02:50,510
This is how you can, recreate the same
characters using HTML and CSS.

59
00:02:50,510 --> 00:02:55,000
There's not really a whole lot of
practical, reason as to why you might

60
00:02:55,000 --> 00:03:00,280
do something like this but it's still
really great to learn from so, if I

61
00:03:00,280 --> 00:03:05,860
open up the Chrome dev tools by hitting
command option I on my Mac

62
00:03:05,860 --> 00:03:11,960
I can hit the Inspector here and I can
hover over any one of these characters.

63
00:03:11,960 --> 00:03:17,350
And, you see that they're actually
composed of multiple divs here and

64
00:03:17,350 --> 00:03:21,580
they're just rotated into place based on
where they need to be.

65
00:03:21,580 --> 00:03:26,020
If you click on any of the, buttons here
that says View

66
00:03:26,020 --> 00:03:30,360
CSS it will take you over to GitHub and
you can see.

67
00:03:30,360 --> 00:03:34,300
What the CSS looks like, for that
particular character.

68
00:03:34,300 --> 00:03:37,160
So there's some CSS that they're, for
example, applying

69
00:03:37,160 --> 00:03:42,650
to every element, or just the wrapper
element itself.

70
00:03:42,650 --> 00:03:44,420
So it looks like they're using,

71
00:03:44,420 --> 00:03:48,880
content box sizing, and positioning
everything absolutely.

72
00:03:48,880 --> 00:03:51,320
So, that makes sense if you're trying to,

73
00:03:51,320 --> 00:03:53,560
position things exactly where you need
them to be.

74
00:03:53,560 --> 00:03:57,580
And then they have some styling here for
each one

75
00:03:57,580 --> 00:04:02,550
of the individual elements and, each
character is obviously slightly

76
00:04:02,550 --> 00:04:05,570
different, but the way you would build
something out like

77
00:04:05,570 --> 00:04:08,800
this is, like I said, by positioning
elements into place.

78
00:04:08,800 --> 00:04:14,260
Or by using, box shadows, and you can
actually get, a lot of nice looking

79
00:04:14,260 --> 00:04:20,230
effects by using multiple box shadows and
separating them with, commas.

80
00:04:20,230 --> 00:04:22,330
Anyway, like I said, not a whole lot of

81
00:04:22,330 --> 00:04:26,020
practical applications here, but it's
still really nice to learn

82
00:04:26,020 --> 00:04:28,910
from, to learn how you might build
something a

83
00:04:28,910 --> 00:04:32,390
little bit more complex in CSS, should you
need to.

84
00:04:32,390 --> 00:04:34,220
>> Yeah, and, and if it goes really well
maybe

85
00:04:34,220 --> 00:04:36,970
you can get a, a television, series out of
it.

86
00:04:36,970 --> 00:04:38,050
>> Maybe, who knows.

87
00:04:38,050 --> 00:04:38,320
>> Yeah.

88
00:04:38,320 --> 00:04:39,890
We, we're not, we're not here to stop you.

89
00:04:39,890 --> 00:04:40,930
We're here to propel you forward.

90
00:04:42,260 --> 00:04:45,360
Next up we have a project called Rickshaw,
Rickshaw is a

91
00:04:45,360 --> 00:04:50,210
really great library for creating grafts
and interactive time series grafts.

92
00:04:50,210 --> 00:04:53,190
So if we look at the Rickshaw website
right here, we can

93
00:04:53,190 --> 00:04:57,910
see it is a JavaScript tool kit for
creating interactive time series graphs.

94
00:04:57,910 --> 00:05:01,440
Lets go ahead and see what that means by
clicking on See Demo.

95
00:05:01,440 --> 00:05:01,590
Wow.

96
00:05:01,590 --> 00:05:02,470
Look at this graph.

97
00:05:02,470 --> 00:05:04,740
We have an area graph right here.

98
00:05:04,740 --> 00:05:06,830
Is it, is it called a chart?

99
00:05:06,830 --> 00:05:07,300
Graph?

100
00:05:07,300 --> 00:05:07,990
Chart?

101
00:05:07,990 --> 00:05:08,560
>> A line chart?

102
00:05:08,560 --> 00:05:10,010
>> Line, line area graph?

103
00:05:10,010 --> 00:05:10,480
>> Line graph?

104
00:05:10,480 --> 00:05:10,810
>> Chart, yeah.

105
00:05:10,810 --> 00:05:11,340
>> I'm not really sure.

106
00:05:11,340 --> 00:05:12,340
>> It's a, it's one of those.

107
00:05:12,340 --> 00:05:14,680
It's a, it's a, it's a chart or a graph.

108
00:05:14,680 --> 00:05:17,780
And, as you can see, there are a ton of
different options as I hover.

109
00:05:17,780 --> 00:05:21,190
As I hover over different parts of the
graph, it is telling

110
00:05:21,190 --> 00:05:25,440
me the information right there, at that
particular point in the series.

111
00:05:25,440 --> 00:05:28,400
You can also scroll back and forth and
this will

112
00:05:28,400 --> 00:05:32,130
either zoom in or out on the graph and
allow you.

113
00:05:32,130 --> 00:05:34,150
Finer grain control over it.

114
00:05:34,150 --> 00:05:36,350
Now I it's either a ton of different
options

115
00:05:36,350 --> 00:05:37,730
that we have on the left we control what

116
00:05:37,730 --> 00:05:42,090
kind of graph we are displaying, area,
bar, line,

117
00:05:42,090 --> 00:05:45,250
scatter, and we can even choose how we
want.

118
00:05:45,250 --> 00:05:49,910
The data to be, displayed in these
different graph types.

119
00:05:49,910 --> 00:05:57,040
So if we go back to the page here, we can
see this is built on d3.js.

120
00:05:57,040 --> 00:06:00,970
Now this is nice because you may already
know d3.

121
00:06:00,970 --> 00:06:03,760
But it can take quite a bit of work to
implement some

122
00:06:03,760 --> 00:06:08,800
of these things inside of D3, and that is
where RIckshaw comes in.

123
00:06:08,800 --> 00:06:11,650
It gives you a, very, very simple and

124
00:06:11,650 --> 00:06:15,120
minimal way of building these different d3
graphs.

125
00:06:15,120 --> 00:06:18,550
Now as you can see you're just creating a,

126
00:06:18,550 --> 00:06:24,210
graph element right here, and initializing
a new RIckshaw.graph model.

127
00:06:24,210 --> 00:06:28,820
You give it the element and the, width and
height, as well as the series.

128
00:06:28,820 --> 00:06:33,690
And then you call the render method and
you get that pretty graph right there.

129
00:06:33,690 --> 00:06:37,710
Now the same API applies to area graphs
and all

130
00:06:37,710 --> 00:06:41,190
of the different kinds of graphs that we
talked about before.

131
00:06:41,190 --> 00:06:43,540
Now we're not gonna go into everything
here but this is

132
00:06:43,540 --> 00:06:46,860
a, a very thorough library which I
encourage you to check out.

133
00:06:46,860 --> 00:06:50,610
Remember you can check it out in the show
notes at youtube.com/gotreehouse.

134
00:06:50,610 --> 00:06:52,420
Or search for us in iTunes, we're the
Treehouse Show.

135
00:06:52,420 --> 00:06:55,560
And don't forget to join us at
teamtreehouse.com/show,

136
00:06:55,560 --> 00:06:58,000
for a 30 day free trial, of Treehouse.

137
00:06:58,000 --> 00:06:59,900
>> Very nice, well, if you've ever tried

138
00:06:59,900 --> 00:07:02,670
to integrate with another brand on your
site.

139
00:07:02,670 --> 00:07:05,170
Say for example you were trying to add.

140
00:07:05,170 --> 00:07:10,230
A, logo for Behance or Dribbble or
something like that.

141
00:07:10,230 --> 00:07:12,640
All of them have different branding
guidelines,

142
00:07:12,640 --> 00:07:13,610
and you wanna make sure that you

143
00:07:13,610 --> 00:07:17,805
follow them, and don't put, you know, a
logo on the wrong color background.

144
00:07:17,805 --> 00:07:18,170
>> [LAUGH] Yeah, no.

145
00:07:18,170 --> 00:07:21,380
>> Because something like that, because
that would be, can be disastrous.

146
00:07:21,380 --> 00:07:23,470
>> Yeah, the web police will get you.

147
00:07:23,470 --> 00:07:26,750
>> More importantly, the people that are
policing that brand.

148
00:07:26,750 --> 00:07:29,610
Could get you and ask you to change it or
take it down.

149
00:07:29,610 --> 00:07:32,800
So it's better to just have it right from
the start.

150
00:07:32,800 --> 00:07:35,400
Because those things could affect your
design.

151
00:07:35,400 --> 00:07:38,970
So this is a website that says Find
Guidelines on the Web.

152
00:07:38,970 --> 00:07:42,900
And it's the fastest way to find brand
assets.

153
00:07:42,900 --> 00:07:47,230
So you can just hit Cmd+F to find a brand
quickly on the page.

154
00:07:47,230 --> 00:07:49,300
And it will actually take over.

155
00:07:49,300 --> 00:07:51,770
The normal Cmd+F functionality.

156
00:07:51,770 --> 00:07:56,070
So I could type in say Google, or
something like that.

157
00:07:56,070 --> 00:07:58,320
And it will give me the different Google

158
00:07:58,320 --> 00:08:02,080
brands, such as Google+ or the normal
Google brand.

159
00:08:02,080 --> 00:08:04,260
And they have a whole bunch here that they

160
00:08:04,260 --> 00:08:06,789
support, and when you click on one of
these.

161
00:08:08,220 --> 00:08:09,780
It will actually take you to the

162
00:08:09,780 --> 00:08:13,580
official Brand Guidelines for that
particular brand.

163
00:08:13,580 --> 00:08:16,220
So for example with Dribbble, they say
here are

164
00:08:16,220 --> 00:08:20,260
the vector versions of our logo, and logo
mark.

165
00:08:20,260 --> 00:08:24,490
So here's the Dribbble logo and here's
just the ball icon.

166
00:08:24,490 --> 00:08:26,770
And then they say, do.

167
00:08:26,770 --> 00:08:29,370
These things and don't, do these things.

168
00:08:29,370 --> 00:08:32,270
These are a very common thing for brand
guidelines.

169
00:08:32,270 --> 00:08:35,790
And they give their official colors, and,
a couple of others

170
00:08:35,790 --> 00:08:41,840
things to do when writing about, the
particular brand for example.

171
00:08:41,840 --> 00:08:44,180
Anyway, I thought this was pretty cool.

172
00:08:44,180 --> 00:08:48,510
So definitely be sure to, check this out
if you want to add some brands.

173
00:08:48,510 --> 00:08:50,210
To your site
>> And I do

174
00:08:50,210 --> 00:08:50,410
>> Yeah

175
00:08:50,410 --> 00:08:53,390
>> I don't want the web police knocking at
my door.

176
00:08:53,390 --> 00:08:54,320
I don't know about you.

177
00:08:56,820 --> 00:09:00,120
Next up we have a project called
sidecomments.js.

178
00:09:00,120 --> 00:09:03,710
If you've ever been to a medium website,
and

179
00:09:03,710 --> 00:09:06,700
when I say medium I mean medium.com, you
know,

180
00:09:06,700 --> 00:09:08,910
not, the temperature that you might like
your hamburger

181
00:09:08,910 --> 00:09:13,150
cooked, Obviously a lot of people get that
wrong.

182
00:09:13,150 --> 00:09:14,990
Medium has a really nice interface where

183
00:09:14,990 --> 00:09:17,950
as you're scrolling down an article, you
will

184
00:09:17,950 --> 00:09:22,840
see on the right of the article there is a
little box right there and

185
00:09:22,840 --> 00:09:27,070
it has a number on it if somebody has
commented in that section, and then

186
00:09:27,070 --> 00:09:32,200
you can click the number and it will show
you the comments for that particular.

187
00:09:32,200 --> 00:09:33,560
Piece of text.

188
00:09:33,560 --> 00:09:36,750
Now if you want to, you can go ahead and
comment beneath that.

189
00:09:36,750 --> 00:09:40,150
Or, at any other point in the paragraph.

190
00:09:40,150 --> 00:09:45,820
So I'm going to comment and say, Hello,
and then click Post, and there it is.

191
00:09:45,820 --> 00:09:48,450
Now, if you want to implement something
like this

192
00:09:48,450 --> 00:09:52,970
in your own site, you just download the
SideComments.js file.

193
00:09:52,970 --> 00:09:55,760
And then include it in your project.

194
00:09:55,760 --> 00:09:58,090
It also includes a theme.

195
00:09:58,090 --> 00:10:01,380
So you get the, same thing right here that
we

196
00:10:01,380 --> 00:10:04,870
have, with the icon and the number inside
of it.

197
00:10:04,870 --> 00:10:10,650
Then it goes through, tells you how to set
up your HTML and then how to initialize

198
00:10:10,650 --> 00:10:15,400
the side comment object as well as how you
have to format your current user.

199
00:10:16,450 --> 00:10:19,040
Then, you can go through, and get existing

200
00:10:19,040 --> 00:10:21,670
comments which will be applied to the
different

201
00:10:21,670 --> 00:10:25,680
paragraphs, and you can even listen on the

202
00:10:25,680 --> 00:10:30,200
hosted events and on the deleted events
for comments.

203
00:10:30,200 --> 00:10:32,680
Now there's a whole bunch more in the
documentation.

204
00:10:32,680 --> 00:10:36,240
As usual, this project has a great number
of options for

205
00:10:36,240 --> 00:10:39,310
you to configure the plug-in and you can
check that out.

206
00:10:39,310 --> 00:10:42,060
In the show notes which I think I've said
the address of already.

207
00:10:43,100 --> 00:10:44,930
>> Well that's all we have time for this
week.

208
00:10:44,930 --> 00:10:46,670
I am @nickrp on Twitter.

209
00:10:46,670 --> 00:10:47,950
>> And I am @jseifer.

210
00:10:47,950 --> 00:10:49,740
For more, information on anything we've
talked

211
00:10:49,740 --> 00:10:52,800
about, check out the show notes at
youtube.com/gotreehouse.

212
00:10:52,800 --> 00:10:56,320
Search for us on iTunes we're the
Treehouse Show and also, don't forget

213
00:10:56,320 --> 00:11:01,670
to sign up for a 30 day free trial of
Treehouse at teamtreehouse.com/show.

214
00:11:01,670 --> 00:11:02,690
>> And of course, if you'd like to

215
00:11:02,690 --> 00:11:05,230
see more videos like this one about web
design.

216
00:11:05,230 --> 00:11:08,350
Web development, mobile, business, and, so
much more,

217
00:11:08,350 --> 00:11:10,970
be sure to check us out at
teamtreehouse.com/show.

218
00:11:10,970 --> 00:11:15,489
Thank you so much for watching and we will
see you next week.

219
00:11:15,489 --> 00:11:15,994
[SOUND]

220
00:11:15,994 --> 00:11:22,239
[MUSIC]