1
00:00:00,290 --> 00:00:01,110
I'm Nick Pettit.

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

3
00:00:02,040 --> 00:00:04,570
>> And you're watching the Tree House show
your weekly dose of

4
00:00:04,570 --> 00:00:08,270
internets where we talk about all things
web design, web development, and more.

5
00:00:08,270 --> 00:00:11,360
>> In this episode we'll be talking about
[SOUND] building OS X

6
00:00:11,360 --> 00:00:14,901
applications with JavaScript, [SOUND]
fixed headers, and more.

7
00:00:14,901 --> 00:00:15,402
[SOUND].

8
00:00:15,402 --> 00:00:16,461
>> Let's check it out.

9
00:00:16,461 --> 00:00:21,402
[MUSIC]

10
00:00:21,402 --> 00:00:25,923
>> First up, we have a very thorough blog
post from tylerga on

11
00:00:25,923 --> 00:00:30,060
building OS X applications with
JavaScript.

12
00:00:30,060 --> 00:00:35,290
In OS X Yosemite, JavaScript is now a
first-class citizen for

13
00:00:35,290 --> 00:00:38,910
building native OS X applications.

14
00:00:38,910 --> 00:00:45,410
Now OS X Yosemite can be used with
JavaScript very, very simply.

15
00:00:45,410 --> 00:00:48,200
First going through and creating an
Objective-C application,

16
00:00:48,200 --> 00:00:53,110
just say Import, Cocoa, and boom you are
done, that's it.

17
00:00:53,110 --> 00:00:55,970
Your application is now completely built
in JavaScript.

18
00:00:55,970 --> 00:00:57,000
No, I'm just kidding.

19
00:00:57,000 --> 00:01:01,070
There is a whole example application that
he goes through and

20
00:01:01,070 --> 00:01:03,360
creates using JavaScript.

21
00:01:03,360 --> 00:01:11,220
This is just a very simple and very nice
looking image selector and displayer.

22
00:01:11,220 --> 00:01:16,320
It just grabs an image and then displays
it right there inside this native OS X

23
00:01:16,320 --> 00:01:19,450
application and this is done entirely in
JavaScript.

24
00:01:19,450 --> 00:01:22,050
So, like I said, very thorough walk
through.

25
00:01:22,050 --> 00:01:26,850
Go through create the application, specify
how it needs to run,

26
00:01:26,850 --> 00:01:29,460
and then like I said, this is extremely
thorough.

27
00:01:29,460 --> 00:01:31,960
It's a really long application like, I'm
just holding the space bar and

28
00:01:31,960 --> 00:01:34,030
scrolling through, really long.

29
00:01:34,030 --> 00:01:38,920
But it's actually really great, go ahead
read it, follow along and

30
00:01:38,920 --> 00:01:41,630
then you can write OS X applications in
JavaScript.

31
00:01:41,630 --> 00:01:44,020
Link in the show notes, too long to
summarize.

32
00:01:44,020 --> 00:01:45,050
>> That is wonderful.

33
00:01:45,050 --> 00:01:49,970
Well, next up is CSStyle or CS, sty.

34
00:01:51,700 --> 00:01:54,470
>> No, I think it's just style because the
two minuses means you

35
00:01:54,470 --> 00:01:56,600
don't say the c and the s.

36
00:01:56,600 --> 00:01:57,480
>> Oh, okay.

37
00:01:57,480 --> 00:01:58,450
That makes more sence now.

38
00:01:58,450 --> 00:01:59,545
So.

39
00:01:59,545 --> 00:02:02,400
Anyway this is a modern approach for

40
00:02:02,400 --> 00:02:06,130
crafting beautifully maintainable style
sheets.

41
00:02:06,130 --> 00:02:10,760
Basically it is a collection of SASS
mix-ins that make your

42
00:02:10,760 --> 00:02:13,290
CSS readable and semantic.

43
00:02:13,290 --> 00:02:15,090
So, what does that mean?

44
00:02:15,090 --> 00:02:18,550
Well, this kind of an interesting project
and

45
00:02:18,550 --> 00:02:21,560
frankly I'm not sure how I feel about it
just yet.

46
00:02:21,560 --> 00:02:25,240
I haven't tried it myself in a large
project.

47
00:02:25,240 --> 00:02:28,470
But let me know what you think along the
way.

48
00:02:28,470 --> 00:02:30,560
So basically there's-

49
00:02:30,560 --> 00:02:31,850
>> That's pretty neat.

50
00:02:31,850 --> 00:02:33,310
>> You think it's pretty neat?

51
00:02:33,310 --> 00:02:35,990
I think that's just what the, the button
says right there.

52
00:02:37,050 --> 00:02:40,230
Basically we have this button here, right,
and

53
00:02:40,230 --> 00:02:46,600
there's a, there's a class called Button,
and you can include this component,

54
00:02:46,600 --> 00:02:53,490
which is what CSS Style organizes things
into, these reusable components.

55
00:02:53,490 --> 00:02:55,490
And you would pass it button.

56
00:02:55,490 --> 00:02:57,920
So, so far, pretty basic stuff.

57
00:02:57,920 --> 00:03:02,640
It's actually very similar to any other
SASS mix-in.

58
00:03:02,640 --> 00:03:07,200
However, you can also pass these
components options.

59
00:03:07,200 --> 00:03:12,060
So, here we have this option called
action.

60
00:03:12,060 --> 00:03:16,410
And, this would basically specify some
styling that would say okay,

61
00:03:16,410 --> 00:03:17,790
this is a button.

62
00:03:17,790 --> 00:03:20,740
But, it's an action button and so,

63
00:03:20,740 --> 00:03:24,340
we want to have, sort of this different
color for it.

64
00:03:24,340 --> 00:03:26,880
And you would have a button, and

65
00:03:26,880 --> 00:03:31,220
then you would have these options that are
passed as arguments.

66
00:03:31,220 --> 00:03:32,810
Just like that.

67
00:03:32,810 --> 00:03:36,220
And, then there's also parts.

68
00:03:36,220 --> 00:03:41,250
So, here's yet another thing building on
top of components.

69
00:03:41,250 --> 00:03:42,540
They're composed of parts.

70
00:03:42,540 --> 00:03:46,410
And these are child elements of the
component that can be styled.

71
00:03:46,410 --> 00:03:49,800
And, so, you end up with some syntax like
this.

72
00:03:49,800 --> 00:03:55,000
So you have a button, but inside of that
button you also have an icon.

73
00:03:55,000 --> 00:03:58,650
And that icon can be changed out

74
00:03:58,650 --> 00:04:03,390
using another one of those options, and
you end up with something like this.

75
00:04:03,390 --> 00:04:07,130
So we have a button, but then we also have
an icon inside of that, and

76
00:04:07,130 --> 00:04:09,520
then we specify what icon we want.

77
00:04:09,520 --> 00:04:14,950
And, we do that using options, there's
also a couple of other things here,

78
00:04:14,950 --> 00:04:19,030
this is kind of neat, locations you can
basically specify, you know,

79
00:04:19,030 --> 00:04:25,040
I only want these styles, and a particular
part of my site, a lot of cool stuff here.

80
00:04:25,040 --> 00:04:30,870
I personally feel like this is maybe
getting into territory where you might

81
00:04:30,870 --> 00:04:35,740
actually be overcomplicating your CSS in
certain ways that it doesn't need to be,

82
00:04:35,740 --> 00:04:41,110
or just including a lot of stuff into the
markup that maybe could've just been

83
00:04:41,110 --> 00:04:44,950
bundled into one class or something like
that.

84
00:04:44,950 --> 00:04:51,830
Anyway it's a little hard to say if this
is actually going to be very useful.

85
00:04:51,830 --> 00:04:56,820
Or if it will lead you to a place that's
very difficult to maintain.

86
00:04:56,820 --> 00:04:57,680
Hard to tell.

87
00:04:57,680 --> 00:04:59,010
But anyway.

88
00:04:59,010 --> 00:05:01,260
>> Use it in your project, and let us know
how it works.

89
00:05:01,260 --> 00:05:01,820
>> Yeah, yeah.

90
00:05:01,820 --> 00:05:04,250
This would be a great thing to discuss in
the forum.

91
00:05:04,250 --> 00:05:06,430
>> Yeah.
>> Maybe figure out what you think.

92
00:05:06,430 --> 00:05:07,895
>> Go, go ahead and check it out, let us
know.

93
00:05:07,895 --> 00:05:09,050
>> Mm-hm.

94
00:05:09,050 --> 00:05:13,200
>> Next up we have a really interesting
project called JuliusJS.

95
00:05:13,200 --> 00:05:17,800
This is speech recognition for the web.

96
00:05:17,800 --> 00:05:21,790
So it uses the Julius speech recognition
engine.

97
00:05:21,790 --> 00:05:25,330
This is a full part, full port to
JavaScript.

98
00:05:25,330 --> 00:05:28,880
Let's go ahead and try the live demo.

99
00:05:28,880 --> 00:05:33,960
I'm going to allow this website access to
my microphone.

100
00:05:33,960 --> 00:05:38,190
And we'll say you're watching The
Treehouse Show with Nick Pettit and

101
00:05:38,190 --> 00:05:38,950
Jason Seifer.

102
00:05:38,950 --> 00:05:44,270
>> And then it says, dial two, three,
eight,

103
00:05:44,270 --> 00:05:50,820
oh, oh, two, oh, four, two, eight, two,
oh, six, two, seven, four.

104
00:05:50,820 --> 00:05:54,410
And then when you dial that phone number
you'll hear what Jason just said

105
00:05:54,410 --> 00:05:55,540
in a recording.

106
00:05:55,540 --> 00:05:57,448
>> One, two, three, four, five, six.

107
00:05:57,448 --> 00:06:00,668
[BLANK_AUDIO]

108
00:06:00,668 --> 00:06:02,148
>> See, it got the numbers perfect.

109
00:06:02,148 --> 00:06:02,968
>> Hm?

110
00:06:02,968 --> 00:06:06,670
>> Look, it says the vocabulary is limited
for this demo.

111
00:06:06,670 --> 00:06:07,310
>> Oh, okay.

112
00:06:07,310 --> 00:06:09,860
We probably should have read the
instructions before we started.

113
00:06:09,860 --> 00:06:13,140
>> I guess.
Who know, who knows what the reasoning is.

114
00:06:13,140 --> 00:06:16,580
Anyway, this is actually really simple to
use.

115
00:06:16,580 --> 00:06:22,370
Just instantiate a new Julius element I'm
sorry object on your page.

116
00:06:22,370 --> 00:06:28,240
And then it gives you this event right
here on recognition passing the sentence

117
00:06:28,240 --> 00:06:31,525
or the words that were recognized and then
you can manipulate that.

118
00:06:31,525 --> 00:06:37,640
Console.log here is just going to log the
sentence that was heard to the console.

119
00:06:37,640 --> 00:06:41,580
Now this is transcribed in real time.

120
00:06:41,580 --> 00:06:44,440
You can use the provided grammar or write
your own.

121
00:06:44,440 --> 00:06:48,190
And this is 100% done in JavaScript.

122
00:06:48,190 --> 00:06:52,680
And this is really interesting, because it
uses background workers.

123
00:06:52,680 --> 00:06:55,140
So, simple to use.

124
00:06:55,140 --> 00:07:00,230
You can get started really quickly using
Express 4.0.

125
00:07:00,230 --> 00:07:04,400
Just install it with Bower, and include
Julius JS on your page.

126
00:07:04,400 --> 00:07:07,470
Require it, and then you are good to go.

127
00:07:07,470 --> 00:07:12,050
Now this is still maybe a little bit early
to use in production, but

128
00:07:12,050 --> 00:07:14,900
very, very interesting to see what's going
on, and

129
00:07:14,900 --> 00:07:19,050
kinda get a sneak peek at the future
today.

130
00:07:19,050 --> 00:07:21,190
>> Wow, tomorrow is today.

131
00:07:21,190 --> 00:07:23,110
Well next up is Midnight.JS.

132
00:07:23,110 --> 00:07:24,230
This is-

133
00:07:24,230 --> 00:07:25,550
>> Is that your Halloween costume?

134
00:07:25,550 --> 00:07:31,750
>> Nope, it's a project that allows you to
switch fixed headers on the fly.

135
00:07:31,750 --> 00:07:34,080
So if I scroll down here.

136
00:07:34,080 --> 00:07:36,120
Whoa, look at that.

137
00:07:36,120 --> 00:07:39,530
>> What?
>> The header is just sort of changing

138
00:07:39,530 --> 00:07:42,050
on the fly, as I scroll down the page.

139
00:07:42,050 --> 00:07:43,460
How is that happening?

140
00:07:43,460 --> 00:07:49,130
Well, Midnight.js tells you to specify
your normal fixed navigation.

141
00:07:49,130 --> 00:07:54,090
So, you have navigation or your header
kind of fixed at a particular point.

142
00:07:54,090 --> 00:07:56,870
Usually that would be closer to the top of
the page, but for

143
00:07:56,870 --> 00:07:59,180
the purposes of the Midnight.js example,

144
00:07:59,180 --> 00:08:02,880
they kind of have it towards the middle
cuz that is the focus here.

145
00:08:02,880 --> 00:08:06,500
Then you have different sections of your
website, right?

146
00:08:06,500 --> 00:08:10,530
So you have maybe a section, maybe a div,
maybe a footer.

147
00:08:10,530 --> 00:08:13,520
However you are organizing your site and

148
00:08:13,520 --> 00:08:19,980
then you give it a data attribute, so you
say data midnight.

149
00:08:19,980 --> 00:08:23,020
So you're not using a CSS class here,
right?

150
00:08:23,020 --> 00:08:25,920
And you tell it, I want this part to be
white,

151
00:08:25,920 --> 00:08:30,350
I want this part to be blue, kind of like
that.

152
00:08:30,350 --> 00:08:35,490
And then, you can use those as actual CSS
classes.

153
00:08:35,490 --> 00:08:41,240
So slightly different things there, if you
specify the data attribute.

154
00:08:41,240 --> 00:08:46,430
You tell it where your class is the class
you're going to use to style that

155
00:08:46,430 --> 00:08:47,320
header, right?

156
00:08:47,320 --> 00:08:52,900
So this needs to be reflected in your CSS,
even though it's not an actual class.

157
00:08:52,900 --> 00:08:57,950
So here, you style your headers, right,
and you say, I want the background to be

158
00:08:57,950 --> 00:09:02,420
none on this particular section and then I
want to be black and

159
00:09:02,420 --> 00:09:05,290
then I want the background to be white and
the color to be black.

160
00:09:05,290 --> 00:09:08,590
The background to be blue the color white
and so on and

161
00:09:08,590 --> 00:09:13,940
as you scroll down the page it will change
colors.

162
00:09:13,940 --> 00:09:16,692
Now this is of course a jQuery plugin so

163
00:09:16,692 --> 00:09:21,170
you just go ahead and load jQuery then you
load Midnight.

164
00:09:21,170 --> 00:09:25,950
And then you call it on your fixed
navigation.

165
00:09:25,950 --> 00:09:29,690
So, you just select your fixed navigation
there, and

166
00:09:29,690 --> 00:09:32,730
then you call the Midnight function.

167
00:09:32,730 --> 00:09:34,130
Anyway, pretty simple to use,

168
00:09:34,130 --> 00:09:38,435
of course, there's a couple of ways that
you can customize it with options,

169
00:09:38,435 --> 00:09:43,470
as is is the case with most jQuery plugins
that we talk about here on the show.

170
00:09:43,470 --> 00:09:48,240
And you can download it right there, or
you can get it on Git Hub.

171
00:09:48,240 --> 00:09:49,190
Pretty cool stuff.

172
00:09:49,190 --> 00:09:50,430
>> Yeah.
Very nice.

173
00:09:50,430 --> 00:09:51,120
Next up, we have a blog

174
00:09:51,120 --> 00:09:55,170
post called 5 Array Methods That You
Should Be Using Now.

175
00:09:55,170 --> 00:09:58,690
And when they say now, they mean like
kinda, you know, in this day and

176
00:09:58,690 --> 00:10:02,870
age it's okay to be using these array
methods, not stop what you're doing, and

177
00:10:02,870 --> 00:10:04,150
just call these in the browser.

178
00:10:04,150 --> 00:10:06,310
>> But maybe after you've read the
article.

179
00:10:06,310 --> 00:10:07,250
>> Yeah.
>> Okay.

180
00:10:07,250 --> 00:10:09,680
>> Yeah, cuz you won't know them until you
read it.

181
00:10:09,680 --> 00:10:10,540
>> Right.

182
00:10:10,540 --> 00:10:17,550
>> But did you know that when the
ECMAScript 5 was published in December

183
00:10:17,550 --> 00:10:24,310
of 2009 it brought with it array methods
that improved existing array methods.

184
00:10:24,310 --> 00:10:30,170
But this did not really catch on, because
it's only been relatively recently

185
00:10:30,170 --> 00:10:36,470
that all of the modern browsers supported
these array additions or extras.

186
00:10:36,470 --> 00:10:41,650
So this is a blog post that kinda
summarizes five that you should be using.

187
00:10:41,650 --> 00:10:45,090
Here's an example of Index Of, which will
check for

188
00:10:45,090 --> 00:10:47,980
any occurrence of an item in an array.

189
00:10:47,980 --> 00:10:52,170
Without this method, you have to pretty
much create a For

190
00:10:52,170 --> 00:10:55,740
loop and another variable called found.

191
00:10:55,740 --> 00:10:58,950
And then if it was found in the array, you
could log that.

192
00:10:58,950 --> 00:11:04,820
But with Index Of you can just call the
method index of and

193
00:11:04,820 --> 00:11:08,990
specify whether or not it is equal to
negative one,

194
00:11:08,990 --> 00:11:13,500
zero or one depending on whether or not it
was found in the array.

195
00:11:14,720 --> 00:11:17,630
The Filter method will let you find all of

196
00:11:17,630 --> 00:11:21,770
the items in a array that pass a certain
test.

197
00:11:21,770 --> 00:11:27,250
So, in this example we have an array of
objects with names and counts and

198
00:11:27,250 --> 00:11:31,420
using the filter method instead of again
doing a for loop and

199
00:11:31,420 --> 00:11:35,570
creating a new array, we can do this all
in one statement.

200
00:11:35,570 --> 00:11:39,020
Just say Filter, with this particular
condition and

201
00:11:39,020 --> 00:11:40,710
the new array will contain that.

202
00:11:41,710 --> 00:11:43,410
There's also the For

203
00:11:43,410 --> 00:11:48,310
Each method, which will iterate over
different items using the index.

204
00:11:48,310 --> 00:11:49,910
So here we have an array.

205
00:11:49,910 --> 00:11:53,450
Using a For loop, we could start from
zero, count all the way up to

206
00:11:53,450 --> 00:11:57,150
the array's length, and then increment the
iterator and

207
00:11:57,150 --> 00:12:02,560
log it or we could use the For Each method
to pass the item in and

208
00:12:02,560 --> 00:12:07,160
the position inside of the array and then
just log it that way.

209
00:12:08,640 --> 00:12:10,410
Now, there are a couple of different items
in here.

210
00:12:10,410 --> 00:12:15,960
Map and Reduce, which you may familiar
with from programming languages like Ruby.

211
00:12:15,960 --> 00:12:20,490
Or even extension libraries that you've
used to make writing or, and

212
00:12:20,490 --> 00:12:22,420
working with arrays easy, easier.

213
00:12:22,420 --> 00:12:26,580
For example, _.js has this functionality.

214
00:12:26,580 --> 00:12:28,130
So anyway, thorough blog post.

215
00:12:28,130 --> 00:12:30,190
Check it out.
We'll have a link in the Show Notes.

216
00:12:30,190 --> 00:12:34,480
Hopefully, it's taught you something that
you can actually begin using now.

217
00:12:34,480 --> 00:12:35,330
>> Very cool stuff.

218
00:12:35,330 --> 00:12:36,810
>> Now that we've gone over it.

219
00:12:36,810 --> 00:12:38,850
>> Well, that's all we have time for this
week.

220
00:12:38,850 --> 00:12:40,400
I am @nickrp on Twitter.

221
00:12:40,400 --> 00:12:41,210
>> And I am @jseifer.

222
00:12:41,210 --> 00:12:42,560
For more information on what we talked
about,

223
00:12:42,560 --> 00:12:44,310
check out the Show Notes below the video.

224
00:12:44,310 --> 00:12:46,451
And feel free to discuss it in the forum.

225
00:12:46,451 --> 00:12:54,606
[MUSIC]

226
00:12:54,606 --> 00:12:57,596
Thanks so much for watching and we'll talk
to you next week.

227
00:12:57,596 --> 00:12:59,847
>> [LAUGH]

228
00:12:59,847 --> 00:13:03,351
>> [LAUGH]
>> Oh boy