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

2
00:00:01,100 --> 00:00:02,180
>> I'm Jason Seifer.

3
00:00:02,180 --> 00:00:04,500
>> And you're watching the Tree House
Show, your weekly dose of

4
00:00:04,500 --> 00:00:08,060
internet where we talk about all web
design, web development and more.

5
00:00:08,060 --> 00:00:09,960
>> In this episode we will be talking
about really

6
00:00:09,960 --> 00:00:15,610
good emails, detecting credit cards in
JavaScript, Mark-Down Editing and more.

7
00:00:15,610 --> 00:00:16,600
>> Let's check it out.

8
00:00:21,720 --> 00:00:25,380
First up is really good emails, which
just.

9
00:00:25,380 --> 00:00:26,945
>> That's all the emails I send.

10
00:00:26,945 --> 00:00:32,350
>> [LAUGH] Just as the name implies, this
is a website dedicated to Jason's emails.

11
00:00:32,350 --> 00:00:33,410
No actually, it's.

12
00:00:33,410 --> 00:00:33,730
>> Oh.

13
00:00:33,730 --> 00:00:34,970
Don't scroll down.

14
00:00:34,970 --> 00:00:38,940
>> It's a website for really great
marketing emails,

15
00:00:38,940 --> 00:00:41,250
and look at that, Treehouse is up at the
top.

16
00:00:41,250 --> 00:00:43,000
That's really all you need to know about
this site.

17
00:00:43,000 --> 00:00:43,840
>> Yeah.

18
00:00:43,840 --> 00:00:47,050
>> Now on the left side here, they have a
bunch

19
00:00:47,050 --> 00:00:51,350
of different categories for different
types of marketing emails you might send.

20
00:00:51,350 --> 00:00:54,990
For example, if your on boarding new users
you

21
00:00:54,990 --> 00:00:59,670
might send them an email welcoming them to
the site.

22
00:00:59,670 --> 00:01:06,260
So here's a couple of examples of how that
works from Flow and from [INAUDIBLE].

23
00:01:06,260 --> 00:01:10,080
If we go back here, you'll see that
there's quite

24
00:01:10,080 --> 00:01:13,840
a few on this site that you can check out.

25
00:01:13,840 --> 00:01:17,350
And just has, continuous loading here or
lazy loading.

26
00:01:17,350 --> 00:01:20,020
So you can just scroll through these.

27
00:01:20,020 --> 00:01:23,340
Not a whole lot to say about the site, but
if you're trying

28
00:01:23,340 --> 00:01:25,990
to write, maybe, a newsletter on an

29
00:01:25,990 --> 00:01:29,860
onboarding email, or maybe a support
email.

30
00:01:29,860 --> 00:01:32,700
There's some pretty good examples on this

31
00:01:32,700 --> 00:01:36,160
site, and you should definitely check it
out.

32
00:01:36,160 --> 00:01:38,445
>> Then you'll know how to send really
good email, like me.

33
00:01:38,445 --> 00:01:39,690
>> Mm-hm.

34
00:01:39,690 --> 00:01:45,740
>> Next up, we have a blog post from
Joyant, on handling errors in Node.js.

35
00:01:45,740 --> 00:01:48,670
This is actually a bit more complicated
than it might seem at first,

36
00:01:48,670 --> 00:01:50,900
so let's go through, and take a look at
some of the things.

37
00:01:50,900 --> 00:01:53,360
This is actually an extremely long
article,

38
00:01:53,360 --> 00:01:56,000
so we're not going to get into everything.

39
00:01:56,000 --> 00:02:01,440
But it can be really difficult to handle
certain errors in Node.js.

40
00:02:01,440 --> 00:02:05,280
So, this post goes through and breaks down
the different kinds of

41
00:02:05,280 --> 00:02:07,380
errors that you might encounter, for

42
00:02:07,380 --> 00:02:11,000
example, operational errors versus
programming errors.

43
00:02:11,000 --> 00:02:13,440
Now, this is gonna be an example of,

44
00:02:13,440 --> 00:02:16,820
let's say something, like you're doing a
DNS call.

45
00:02:16,820 --> 00:02:22,280
And operationally, your server can't
figure out what the DNS

46
00:02:22,280 --> 00:02:25,030
address, or the IP address is, or a DNS
server.

47
00:02:25,030 --> 00:02:29,020
Well that's not gonna be programmer error,
that's gonna be an operational error.

48
00:02:29,020 --> 00:02:33,290
And in that case, sometimes all that you
can do is just log the error and move on.

49
00:02:34,490 --> 00:02:36,730
This blog post takes the stance that

50
00:02:36,730 --> 00:02:39,920
for programmer errors, sometimes it's
better to just

51
00:02:39,920 --> 00:02:44,920
have your app fail, log that, and then
have a different process that restarts it.

52
00:02:44,920 --> 00:02:48,390
So, there's just a ton of different
options, and different

53
00:02:48,390 --> 00:02:52,850
types of errors that can happen inside of
a Node.js application.

54
00:02:52,850 --> 00:02:55,870
Now, here is some of their suggestions for

55
00:02:55,870 --> 00:02:58,920
handling the operational errors that we
talked about.

56
00:02:58,920 --> 00:03:02,560
Not handling or handling programmer errors

57
00:03:02,560 --> 00:03:05,300
and even patterns for writing different
functions.

58
00:03:05,300 --> 00:03:08,130
And what you're going to do, should you
throw an error, should you

59
00:03:08,130 --> 00:03:11,940
catch an error, should you handle it in a
call back or not?

60
00:03:11,940 --> 00:03:14,700
Anyway, this is an extremely detailed blog
post.

61
00:03:14,700 --> 00:03:16,150
We don't have time to go through it all.

62
00:03:16,150 --> 00:03:17,830
Definitely check it out in the show notes,
which you

63
00:03:17,830 --> 00:03:22,200
can get to at youtube.com/gotreehouse, or
search for us on iTunes.

64
00:03:22,200 --> 00:03:23,680
We are the Treehouse show.

65
00:03:24,980 --> 00:03:25,580
>> Nice.

66
00:03:25,580 --> 00:03:28,590
Well, next up is refills, and refills are.

67
00:03:28,590 --> 00:03:31,240
>> I could go for a refill on this show.

68
00:03:31,240 --> 00:03:35,200
>> Refills are prepackaged patterns and
components,

69
00:03:35,200 --> 00:03:38,500
built on top of Bourbon, Bitters and Neat.

70
00:03:38,500 --> 00:03:39,710
>> It all sounds delicious.

71
00:03:39,710 --> 00:03:41,040
>> It does.

72
00:03:41,040 --> 00:03:43,130
Bourbon if you're not familiar with it.

73
00:03:43,130 --> 00:03:44,290
>> Oh I'm familiar with it.

74
00:03:44,290 --> 00:03:48,560
>> It is a simple and lightweight mixing
library for Sass.

75
00:03:48,560 --> 00:03:51,110
And of course, Bitters and Neat go very

76
00:03:51,110 --> 00:03:54,700
well with Bourbon, both the framework and
the beverage.

77
00:03:54,700 --> 00:03:58,420
If we scroll down here you can see exactly
what the site is all about, they

78
00:03:58,420 --> 00:04:01,730
have these different design patterns such
as Navigation,

79
00:04:01,730 --> 00:04:04,190
or a hero unit or an icon bullet points.

80
00:04:04,190 --> 00:04:10,200
And if you click on the button show code,
you can see exactly what the markup looks

81
00:04:10,200 --> 00:04:17,550
like for this example, as well as the Sass
that you can go ahead and click Copy.

82
00:04:17,550 --> 00:04:22,770
And it will copy it to your clipboard, and
you can use it on your site.

83
00:04:22,770 --> 00:04:27,900
If you click over here on the left, you
can get to the navigation to drop in

84
00:04:27,900 --> 00:04:30,810
directly into any one of these patterns,
and

85
00:04:30,810 --> 00:04:34,000
they also have components a little bit
further down.

86
00:04:34,000 --> 00:04:38,730
So if you need something a little bit
smaller such as a modal window, or a

87
00:04:38,730 --> 00:04:44,840
sliding menu or badges and so forth, you
can use some of these components.

88
00:04:44,840 --> 00:04:46,310
Pretty cool stuff.

89
00:04:46,310 --> 00:04:48,930
If you're not familiar with Bourbon, I
highly recommend you

90
00:04:48,930 --> 00:04:53,120
check it out, and try out some of these
patterns.

91
00:04:53,120 --> 00:04:55,550
>> Oh I, oh, I think I will check it out,
Nick.

92
00:04:55,550 --> 00:04:56,750
Think I'll check out some bourbon.

93
00:04:57,750 --> 00:05:02,700
Next up we h ave a post on how to
correctly detect credit card types.

94
00:05:02,700 --> 00:05:07,420
This is actually a little bit more in
depth than you might think at first.

95
00:05:07,420 --> 00:05:09,660
And this is a post that goes through
avoiding the

96
00:05:09,660 --> 00:05:14,620
common mistakes when you're trying to
implement credit card type detection.

97
00:05:14,620 --> 00:05:19,220
Now it gives you the different card types,
and what the card number prefix

98
00:05:19,220 --> 00:05:23,910
will be and then, hey, should I use a
regular expression to detect these?

99
00:05:23,910 --> 00:05:27,180
Well, no, because now you have two
problems.

100
00:05:27,180 --> 00:05:28,990
So what is it say you should do?

101
00:05:28,990 --> 00:05:34,000
Well it goes through and suggest using an
inversion map to look

102
00:05:34,000 --> 00:05:37,680
at all of the different card types, and
then render it declaratively.

103
00:05:38,890 --> 00:05:41,560
Now it's also a bonus here, they tell you
a

104
00:05:41,560 --> 00:05:45,790
pretty good user experience pattern when
implementing a credit card form.

105
00:05:45,790 --> 00:05:47,070
Let's take a look at it here.

106
00:05:47,070 --> 00:05:51,920
So, here is an example of the confusing
card type user interface.

107
00:05:51,920 --> 00:05:55,660
So, it wants you to enter a card number
and then above it, okay, well it

108
00:05:55,660 --> 00:05:59,190
accepts these cards, do I have to click on
the type of credit card I have?

109
00:05:59,190 --> 00:06:00,220
I don't know.

110
00:06:00,220 --> 00:06:01,450
I, I'll just post my credit card on

111
00:06:01,450 --> 00:06:03,010
Twitter, and have somebody else do it for
me.

112
00:06:04,170 --> 00:06:08,480
No, a better way of doing this type of
form is having a text field for

113
00:06:08,480 --> 00:06:11,110
your credit card, and then right below
that

114
00:06:11,110 --> 00:06:13,410
it shows you which kind of cards are
accepted.

115
00:06:13,410 --> 00:06:16,220
It removes the confusion of having to
click on that.

116
00:06:16,220 --> 00:06:18,870
They're also dimmed, quite a little bit.

117
00:06:18,870 --> 00:06:22,140
Now they do have a, a really nice user
interface on here where it

118
00:06:22,140 --> 00:06:25,290
shows you the card number that you can
enter, along with the security code.

119
00:06:25,290 --> 00:06:27,210
And as you enter it, it shows on the

120
00:06:27,210 --> 00:06:30,640
bottom right what type of credit card it
is.

121
00:06:30,640 --> 00:06:34,090
And also you'll notice it uses
combinations

122
00:06:34,090 --> 00:06:36,580
of bigger, and smaller type to accomplish
this.

123
00:06:36,580 --> 00:06:38,740
Anyway, there's a really good blog post
that goes a little bit

124
00:06:38,740 --> 00:06:41,160
more in depth than what I talked about, so
definitely check it out.

125
00:06:42,560 --> 00:06:43,120
>> Very nice.

126
00:06:43,120 --> 00:06:46,780
Well next up is Font To Width, and if your

127
00:06:46,780 --> 00:06:52,890
familiar with the FitText.js project this
one is actually very similar.

128
00:06:52,890 --> 00:06:58,950
And they do call out the FitText.js
project, but they say unlike other text

129
00:06:58,950 --> 00:07:05,880
fitting tools like FitText.js, Font To
Width does not scale the font size.

130
00:07:05,880 --> 00:07:10,560
So, if your familiar with FitText.js
you'll know that, that is a kind

131
00:07:10,560 --> 00:07:14,700
of a weird limitation of it, so where it
does scale the font size.

132
00:07:14,700 --> 00:07:18,210
Instead this tries to use font variance.

133
00:07:18,210 --> 00:07:21,100
Now, I might be getting a little bit ahead
of myself.

134
00:07:21,100 --> 00:07:21,870
What does this do?

135
00:07:21,870 --> 00:07:27,940
Well, it's great for titles that go across
the width of a containing element.

136
00:07:27,940 --> 00:07:32,230
So, for example, we have shuffleboard
standings across the top here.

137
00:07:32,230 --> 00:07:34,200
And it expands across the full width of

138
00:07:34,200 --> 00:07:37,570
this element, and then inside here, we
have

139
00:07:37,570 --> 00:07:41,370
a ton of different names, or different
teams,

140
00:07:41,370 --> 00:07:43,600
I guess, yeah, looks like these are teams.

141
00:07:43,600 --> 00:07:50,550
And you'll notice that they have different
lengths, so some of these are really

142
00:07:50,550 --> 00:07:56,280
short, some of them are really long, and
they fill up the width of the container.

143
00:07:56,280 --> 00:08:01,200
Regardless of their length and do that
again not by adjusting

144
00:08:01,200 --> 00:08:05,140
the font size, but they do it by adjusting
the font variance.

145
00:08:05,140 --> 00:08:08,050
So they look for a variance that has
different

146
00:08:09,240 --> 00:08:13,090
letter spacing, or might be slightly color
and so on.

147
00:08:13,090 --> 00:08:14,610
So, a couple of notes about this.

148
00:08:14,610 --> 00:08:18,310
It's not meant for paragraph text, so it's
just

149
00:08:18,310 --> 00:08:22,810
good for headlines and other short pieces
of text.

150
00:08:22,810 --> 00:08:27,390
And yeah shuffleboard pucks are called
biscuits.

151
00:08:27,390 --> 00:08:28,010
Who knew?

152
00:08:28,010 --> 00:08:31,180
>> I didn't know, know that at all.

153
00:08:31,180 --> 00:08:34,130
Next up, we have a book, it, that

154
00:08:34,130 --> 00:08:37,440
is, right now, for free called Speaking
JavaScript.

155
00:08:37,440 --> 00:08:40,510
This is written by Dr. Axel Rauschmayer.

156
00:08:40,510 --> 00:08:46,400
Now, the eBook is going to be available to
buy online by O'Reilly.

157
00:08:46,400 --> 00:08:48,380
You could also buy it in print starting
March

158
00:08:48,380 --> 00:08:52,150
7th, 2014 or 014, as we say on the show.

159
00:08:52,150 --> 00:08:53,750
But why are we talking about it here,
because they're not

160
00:08:53,750 --> 00:08:58,350
sponsoring the show, well, there is a free
online version in HTML.

161
00:08:58,350 --> 00:09:02,560
Now we're just gonna take a look at the
Table of Contents right here.

162
00:09:02,560 --> 00:09:03,670
it's, it's pretty wonderful.

163
00:09:03,670 --> 00:09:08,020
It goes through basic syntax of
JavaScript, gives you the syntax, all the

164
00:09:08,020 --> 00:09:09,760
different built in types, talks about

165
00:09:09,760 --> 00:09:13,750
functions, exception handling, and so much
more.

166
00:09:13,750 --> 00:09:18,110
Then it goes through, talks about why you
would want to use Javascript, what you

167
00:09:18,110 --> 00:09:21,510
should watch for, what is elegant about
Javascript,

168
00:09:21,510 --> 00:09:23,780
hint not much, its a very short chapter.

169
00:09:23,780 --> 00:09:27,360
And then a little bit more of the history.

170
00:09:27,360 --> 00:09:29,670
Finally it goes into a little bit more
depth in

171
00:09:29,670 --> 00:09:31,410
JavaScript, talks about the syntax,

172
00:09:31,410 --> 00:09:34,430
different values, operators, Booleans,
numbers.

173
00:09:34,430 --> 00:09:37,920
It's really just a great overview of the
JavaScript language.

174
00:09:37,920 --> 00:09:40,630
If you're new to JavaScript, definitely
recommend checking this out

175
00:09:40,630 --> 00:09:44,610
because it is free it's very thorough and
easy to learn.

176
00:09:45,880 --> 00:09:46,510
>> Very nice.

177
00:09:46,510 --> 00:09:48,370
Well, next is EpicEditor.

178
00:09:48,370 --> 00:09:49,590
>> Sounds pretty epic.

179
00:09:49,590 --> 00:09:52,210
>> And I do have to say, it is pretty
epic.

180
00:09:52,210 --> 00:09:53,360
I'm pretty impressed by this.

181
00:09:53,360 --> 00:09:56,710
It's an Embeddable JavaScript Markdown
Editor.

182
00:09:56,710 --> 00:10:02,320
So, if you're familiar with markdown, it's
basically this syntax where you can use

183
00:10:02,320 --> 00:10:07,410
maybe like a pound sign like this, and it
will turn this into a headline.

184
00:10:07,410 --> 00:10:13,060
Or you can use maybe underscores, and turn
this text into Italics and so on.

185
00:10:13,060 --> 00:10:15,100
So there is a bunch of different little

186
00:10:15,100 --> 00:10:19,230
language tokens here where you can format
text.

187
00:10:19,230 --> 00:10:22,660
And if we click the Preview button down in
the bottom right,

188
00:10:22,660 --> 00:10:25,730
you can see exactly what this text is
going to look like.

189
00:10:25,730 --> 00:10:30,180
So, there's the headline then there's the
italicized [INAUDIBLE].

190
00:10:30,180 --> 00:10:30,860
>> Pretty fast.

191
00:10:30,860 --> 00:10:33,650
>> You can also go full screen with this.

192
00:10:33,650 --> 00:10:34,400
So look at that.

193
00:10:34,400 --> 00:10:38,520
Wow, it uses the full screen API from the
browser, and you

194
00:10:38,520 --> 00:10:43,240
can edit text on the left and see the
preview on the right.

195
00:10:43,240 --> 00:10:45,520
So that's pretty handy, and yeah like you
said Jason,

196
00:10:45,520 --> 00:10:50,500
it is pretty fast it's pretty amazing that
they're doing this.

197
00:10:50,500 --> 00:10:52,610
So, why would you want to do this?

198
00:10:52,610 --> 00:10:56,770
Well, this markdown language is actually
used in a

199
00:10:56,770 --> 00:11:02,320
number of different places across the
internet and most [UNKNOWN]

200
00:11:02,320 --> 00:11:05,570
editors are not very good, so it's really
nice to

201
00:11:05,570 --> 00:11:09,920
have one that actually does seem to look
pretty great.

202
00:11:09,920 --> 00:11:13,360
To use it, just go ahead and download it
off

203
00:11:13,360 --> 00:11:16,390
of your hub, you create your container
element, just like

204
00:11:16,390 --> 00:11:20,410
this, then you add the epic editor.js file
and you

205
00:11:20,410 --> 00:11:23,850
just initialize it, and it should take
care of the rest.

206
00:11:23,850 --> 00:11:26,070
But if you want to get more into it, there
is

207
00:11:26,070 --> 00:11:30,560
an API, so you can go ahead and check that
out.

208
00:11:31,740 --> 00:11:32,690
>> Alright, very very cool.

209
00:11:32,690 --> 00:11:33,990
I would say it's, it is epic.

210
00:11:33,990 --> 00:11:35,560
It does, it does earn its moniker.

211
00:11:36,570 --> 00:11:38,770
Finally, we have a blog post on

212
00:11:38,770 --> 00:11:42,780
debugging asynchronous JavaScript, with
the Chrome dev tools.

213
00:11:42,780 --> 00:11:43,210
>> Wow.

214
00:11:43,210 --> 00:11:47,170
>> Yeah, this is a brand new feature in
the latest builds of Chrome

215
00:11:47,170 --> 00:11:51,220
Canary, so you'll have to be on the really
total bleeding edge to use it.

216
00:11:51,220 --> 00:11:53,800
But, it lets you, like it says,

217
00:11:53,800 --> 00:11:57,000
asynchronously debug JavaScript with the
Chrome dev tools.

218
00:11:57,000 --> 00:12:00,180
Now, why in the world would you want to do
something like that?

219
00:12:00,180 --> 00:12:04,270
Well, it can be really difficult to get
through and find an error in the

220
00:12:04,270 --> 00:12:07,310
function with JavaScript when it's doing
postbacks

221
00:12:07,310 --> 00:12:09,960
to the server, and tons of different ajax.

222
00:12:09,960 --> 00:12:14,800
So this is a wonderful blog post that has
animated GIFS showing

223
00:12:14,800 --> 00:12:20,090
what exactly you can do when you enable
the async functionality right here.

224
00:12:20,090 --> 00:12:25,450
And you can see the differences later on
in the post let's

225
00:12:25,450 --> 00:12:30,370
see, so they give an example of the late
timer events and responses.

226
00:12:30,370 --> 00:12:32,660
Really nice walk through of what's going
on in gmail

227
00:12:32,660 --> 00:12:36,360
and say alright, oops the system
encountered a problem, retrying now.

228
00:12:36,360 --> 00:12:39,460
Well, here is a nice little breakdown of
how that happens.

229
00:12:39,460 --> 00:12:44,770
And, without the async handling, all you
get with your

230
00:12:44,770 --> 00:12:49,360
debugging, is seeing these few different
steps in the code.

231
00:12:49,360 --> 00:12:52,890
Now, if you do enable the async
functionality, you can go

232
00:12:52,890 --> 00:12:57,740
a lot farther back in the stream, and see
exactly what happened

233
00:12:57,740 --> 00:13:03,150
before the HTTP request went out, when it
came back, all the

234
00:13:03,150 --> 00:13:07,420
different call stack and places that it
went through when that happened.

235
00:13:07,420 --> 00:13:10,010
Now, in addition to just this, it shows
you how

236
00:13:10,010 --> 00:13:15,330
to watch the expressions asynchronously
even evaluating code from past scopes.

237
00:13:15,330 --> 00:13:15,930
Isn't that awesome?

238
00:13:15,930 --> 00:13:18,710
It's basically like time travel in your
browser.

239
00:13:18,710 --> 00:13:24,630
In fact they even use a nice little little
Doctor Who TARDIS there to unravel that.

240
00:13:24,630 --> 00:13:26,770
Now this doesn't support Java Script
promises

241
00:13:26,770 --> 00:13:28,680
just yet, but that is coming soon.

242
00:13:28,680 --> 00:13:31,690
>> So you could say they're promising
support for that?

243
00:13:31,690 --> 00:13:33,750
>> You could say that if you were awesome.

244
00:13:33,750 --> 00:13:37,120
So anyway, yeah great blog post.

245
00:13:37,120 --> 00:13:38,850
Definitely recommend checking this out
because it

246
00:13:38,850 --> 00:13:41,360
really does make debugging so much easier.

247
00:13:41,360 --> 00:13:43,790
>> Very nice stuff, well I am @nickrp on
twitter.

248
00:13:43,790 --> 00:13:44,810
>> And I am @jseifer.

249
00:13:44,810 --> 00:13:47,180
For more information on anything we talked
about, check out

250
00:13:47,180 --> 00:13:50,490
our show notes, which you can get to at
youtube.com/gotreehouse.

251
00:13:50,490 --> 00:13:52,020
You can also check em out in iTunes.

252
00:13:52,020 --> 00:13:54,480
Search for us, we are The Treehouse Show.

253
00:13:54,480 --> 00:13:57,610
And by the way, if you like this show and
wanna sign up for Treehouse,

254
00:13:57,610 --> 00:14:02,220
use the code at the bottom of this video,
to get a free one-month trial.

255
00:14:02,220 --> 00:14:04,470
And of course, if you'd like to see more
videos like this

256
00:14:04,470 --> 00:14:08,810
one about web design, web development,
mobile business, and so much more.

257
00:14:08,810 --> 00:14:12,030
Be sure to check us out at
teamtreehouse.com.

258
00:14:12,030 --> 00:14:14,620
And use that link to get a free month.

259
00:14:14,620 --> 00:14:21,021
Thank you so much for watching, and we
will see you next week.

260
00:14:21,021 --> 00:14:24,130
[MUSIC]