1
00:00:00,150 --> 00:00:00,930
I'm Nick Pettit.

2
00:00:00,930 --> 00:00:01,900
>> I'm Jason Seifer.

3
00:00:01,900 --> 00:00:04,480
>> And you're watching the Treehouse Show,
your weekly dose of

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

5
00:00:08,060 --> 00:00:08,860
>> In this episode,

6
00:00:08,860 --> 00:00:13,835
we'll be talking about vendor prefixes,
media queries, JavaScript, and more.

7
00:00:13,835 --> 00:00:14,556
>> Let's check it out.

8
00:00:14,556 --> 00:00:20,320
[MUSIC]

9
00:00:20,320 --> 00:00:21,485
Before we get started,

10
00:00:21,485 --> 00:00:25,461
we wanted to let you know about a brand
new Treehouse course all about MailChimp.

11
00:00:25,461 --> 00:00:27,013
>> Now when we say MailChimp,

12
00:00:27,013 --> 00:00:31,530
we are talking about the amazing email
marketing tool and not a boy ape.

13
00:00:31,530 --> 00:00:34,170
Anyways, this free course on
Treehouse will teach you how to

14
00:00:34,170 --> 00:00:37,570
use the MailChimp API, and
I just wanna make it clear,

15
00:00:37,570 --> 00:00:40,910
you do not have to be a TreeHouse
member to take this course.

16
00:00:40,910 --> 00:00:44,190
You can just head on over to Treehouse
from the link in the show notes and

17
00:00:44,190 --> 00:00:45,870
immediately jump right in.

18
00:00:45,870 --> 00:00:50,520
>> And of course, the MailChimp API allows
you to connect MailChimp to hundreds of

19
00:00:50,520 --> 00:00:54,000
third party add-ons and
plug-ins and other useful services.

20
00:00:54,000 --> 00:00:56,750
You can add newsletter
sign-ups to your website,

21
00:00:56,750 --> 00:01:00,660
sync email activity with your database,
integrate MailChimp and Shopify,

22
00:01:00,660 --> 00:01:04,730
and a whole bunch of other
stuff with the MailChimp API.

23
00:01:04,730 --> 00:01:09,040
>> So anyways, go ahead and take this
free course now, over on Treehouse.

24
00:01:09,040 --> 00:01:12,690
And again, make sure to check
out the link in the show notes.

25
00:01:12,690 --> 00:01:17,830
>> First up is this really
cool tool called autoprefixer.

26
00:01:17,830 --> 00:01:21,760
>> Which automatically sets the menu
price, if you're eating the entire menu.

27
00:01:21,760 --> 00:01:23,650
>> That is not correct.

28
00:01:23,650 --> 00:01:31,980
Actually, it parces your CSS and adds
vendor prefixes to rules based on CanIUse,

29
00:01:31,980 --> 00:01:37,240
which is of course the popular service for
determining browser compatibility.

30
00:01:37,240 --> 00:01:39,520
>> Which we have covered
on this show before.

31
00:01:39,520 --> 00:01:45,000
>> If we scroll down here,
you can see Autoprefixer here in action,

32
00:01:45,000 --> 00:01:47,120
actually it's just
an example of how it works.

33
00:01:47,120 --> 00:01:50,940
But basically, you can write your
CSS just as you normally would.

34
00:01:50,940 --> 00:01:55,840
So let's say you're using something
more advanced like Flexbox,

35
00:01:55,840 --> 00:02:02,060
that may not necessarily be
supported in every browser just yet.

36
00:02:02,060 --> 00:02:04,880
Well, it will automatically prefix it for

37
00:02:04,880 --> 00:02:08,320
you so
here's an example of what that looks like.

38
00:02:08,320 --> 00:02:13,430
Its added the webkit prefixes for
the older and

39
00:02:13,430 --> 00:02:18,900
newer syntaxes,
as well as the Microsoft syntax, and

40
00:02:18,900 --> 00:02:24,470
then it just has the final W3C
recommendation down there at the bottom.

41
00:02:24,470 --> 00:02:30,390
So you can write in pure CSS
as you would to the W3C specs,

42
00:02:30,390 --> 00:02:35,610
and then autoprefixer will produce
the code for older browsers.

43
00:02:35,610 --> 00:02:38,430
So it works just like that.

44
00:02:38,430 --> 00:02:43,090
Also, if you have prefixes
that are no longer needed, so

45
00:02:43,090 --> 00:02:47,850
let's say, maybe you're using some other
plug-in or something and it's added things

46
00:02:47,850 --> 00:02:52,890
that are not necessary, or you're just not
able to break the habit of say writing

47
00:02:52,890 --> 00:02:57,965
webkit border radius, and then a proper
border radius right after that.

48
00:02:57,965 --> 00:03:02,440
Autoprefixer will actually
remove that because a prefix for

49
00:03:02,440 --> 00:03:08,410
border radius based on browser
popularity is really no longer needed.

50
00:03:08,410 --> 00:03:12,290
Theres lots of other cool
features in autoprefixer.

51
00:03:12,290 --> 00:03:16,060
So definitely be sure
to check this one out.

52
00:03:16,060 --> 00:03:16,710
>> Very cool.

53
00:03:16,710 --> 00:03:19,790
Next up we have a project
called Clusterize,js.

54
00:03:19,790 --> 00:03:24,910
This takes all the letter i's on the page
and puts them into one dumb object.

55
00:03:24,910 --> 00:03:27,840
No, I'm just kidding,
it doesn't cluster i's.

56
00:03:27,840 --> 00:03:29,860
>> That didn't sound quite right.

57
00:03:29,860 --> 00:03:30,470
>> Nope.

58
00:03:30,470 --> 00:03:36,580
This is a tiny plug-in to
display large datasets easily.

59
00:03:36,580 --> 00:03:37,510
So here, check this out.

60
00:03:37,510 --> 00:03:41,870
They have a nice little thing right on the
page here that shows you what's going on.

61
00:03:41,870 --> 00:03:44,970
We fill this table with 5,000 rows.

62
00:03:44,970 --> 00:03:48,160
I scroll and it's pretty laggy.

63
00:03:48,160 --> 00:03:51,360
What happens, let's go ahead and
use clusterize, right?

64
00:03:51,360 --> 00:03:56,870
We initialize it, now we scroll this,
and look at how smooth it is.

65
00:03:56,870 --> 00:04:03,750
Now there are 100,000 rows in this table,
and it scrolls just as smoothly.

66
00:04:03,750 --> 00:04:05,060
Now how does this work?

67
00:04:05,060 --> 00:04:06,900
So this is really interesting.

68
00:04:06,900 --> 00:04:10,780
What this does is it doesn't
pollute the DOM with tags,

69
00:04:10,780 --> 00:04:13,445
it splits a list into clusters.

70
00:04:13,445 --> 00:04:17,515
Then shows element for the scroll
position, and adds rows to the top and

71
00:04:17,515 --> 00:04:21,015
bottom, to emulate a full
height of the table.

72
00:04:21,015 --> 00:04:26,587
So it's kinda tricking the browser into
displaying only a little bit at a time.

73
00:04:26,587 --> 00:04:30,677
But still, it does a great job and
is very, very quick.

74
00:04:30,677 --> 00:04:33,187
So look at that,
it supports more than tables.

75
00:04:33,187 --> 00:04:34,867
We have an ordered list right here.

76
00:04:34,867 --> 00:04:36,757
All of these, that has 50,000 rows.

77
00:04:36,757 --> 00:04:39,403
I scrolled a little bit too far here.

78
00:04:39,403 --> 00:04:43,203
Here's an unordered list and
also different DIV's.

79
00:04:43,203 --> 00:04:47,153
So they can it can be used with
basically any tag that you want.

80
00:04:47,153 --> 00:04:52,161
So you can install clusterize with Bower,
include it on your page,

81
00:04:52,161 --> 00:04:56,471
and then give it the data,
and call a new clusterize.

82
00:04:56,471 --> 00:05:00,741
As you'd expect, it supports different
options for initialization, tags,

83
00:05:00,741 --> 00:05:04,441
how many rows are in a block, and
how many blocks are in a cluster.

84
00:05:04,441 --> 00:05:05,891
So really great plug-in,

85
00:05:05,891 --> 00:05:09,661
especially if you have large datasets
that you need to display on your page.

86
00:05:09,661 --> 00:05:10,801
Go ahead and check that out.

87
00:05:10,801 --> 00:05:13,470
We'll have a link in the show
notes right below this video.

88
00:05:13,470 --> 00:05:18,140
>> Next up on the Sass Break Blog,
there is an article titled

89
00:05:18,140 --> 00:05:23,060
Making our
Media Query Mixins More Flexible.

90
00:05:23,060 --> 00:05:25,550
And there's a great
picture here demonstrating

91
00:05:25,550 --> 00:05:28,760
how you need to code these
in a flexible manner.

92
00:05:28,760 --> 00:05:32,420
>> I think if I were to do that,
I would Sass Break my back.

93
00:05:32,420 --> 00:05:33,195
>> Probably.

94
00:05:33,195 --> 00:05:39,450
[LAUGH] So
here is a mixin demonstrating how

95
00:05:39,450 --> 00:05:45,110
many queries are sometimes written and
then how that mixin is used.

96
00:05:45,110 --> 00:05:50,930
So you might have something like this,
where you have a mixin called breakpoint,

97
00:05:50,930 --> 00:05:54,990
and you're passing in a variable point,
and you say something like,

98
00:05:54,990 --> 00:05:59,840
well if it's small,
then apply this media query.

99
00:05:59,840 --> 00:06:01,495
And if it's medium, do this.

100
00:06:01,495 --> 00:06:03,350
If it's large, do this.

101
00:06:03,350 --> 00:06:05,800
And of course, they're using ems here.

102
00:06:05,800 --> 00:06:10,490
Well, that may not necessarily
be the best way to do it.

103
00:06:10,490 --> 00:06:14,980
You want to have something that may be
a little bit more flexible than that,

104
00:06:14,980 --> 00:06:18,170
rather than just predefining these ems.

105
00:06:18,170 --> 00:06:22,090
Because the problem is that
it's hard to figure out

106
00:06:22,090 --> 00:06:25,895
what ems are representing anyway.

107
00:06:25,895 --> 00:06:29,720
You have to sort of do the calculation on
your own beforehand, and it's difficult

108
00:06:29,720 --> 00:06:33,430
because we're a little bit more used
to dealing with things in pixels.

109
00:06:33,430 --> 00:06:37,180
We're always given the width
of the browser in pixels, for

110
00:06:37,180 --> 00:06:40,960
example, with lots of developer tools.

111
00:06:40,960 --> 00:06:46,820
So if we scroll down here, the article
does talk about that a little bit.

112
00:06:46,820 --> 00:06:49,430
And there's also some nice links

113
00:06:49,430 --> 00:06:53,510
to why you would want to use ems
over pixels in your media queries.

114
00:06:53,510 --> 00:06:58,570
Basically, the reasoning is that
when you zoom in on the browser,

115
00:06:59,570 --> 00:07:01,800
it will adjust accordingly.

116
00:07:01,800 --> 00:07:05,410
So if you're maybe leaned back
in your chair a little bit, or

117
00:07:05,410 --> 00:07:08,120
if you need the browser
size to be larger so

118
00:07:08,120 --> 00:07:12,920
you can read it more easily, using ems in
your media queries will make the browser

119
00:07:12,920 --> 00:07:17,510
adjust a little bit more nicely,
whereas pixels are fixed units.

120
00:07:17,510 --> 00:07:22,920
So the solution here,
instead of using those fixed,

121
00:07:22,920 --> 00:07:26,910
small, medium, and
large mixins that are named, or

122
00:07:26,910 --> 00:07:32,630
media queries that are named, you can
actually use a mixin that looks like this.

123
00:07:32,630 --> 00:07:37,950
And you can do
the calculation using pixels,

124
00:07:37,950 --> 00:07:42,720
and the base font size, and
then get the em results.

125
00:07:42,720 --> 00:07:47,480
So instead, you could say something like,
well I want this

126
00:07:47,480 --> 00:07:52,060
to happen if the browser is 600 pixels or

127
00:07:52,060 --> 00:07:55,590
what have you, and
then it automatically takes that in and

128
00:07:55,590 --> 00:08:00,750
does the calculation for you, and
you get something that looks like this.

129
00:08:00,750 --> 00:08:04,902
So that's a much more
flexible way to handle SASS

130
00:08:04,902 --> 00:08:09,376
mixin media queries, and I think

131
00:08:09,376 --> 00:08:14,310
it's a much better way of approaching
it than using small, medium, and large.

132
00:08:14,310 --> 00:08:14,810
>> Me too.

133
00:08:16,030 --> 00:08:19,270
Next up we have
a re-introduction to JavaScript

134
00:08:19,270 --> 00:08:22,570
over on the Mozilla Development Network.

135
00:08:22,570 --> 00:08:25,970
Now, why in the world do you want
a re-introduction to JavaScript?

136
00:08:25,970 --> 00:08:26,885
Well let's go ahead and

137
00:08:26,885 --> 00:08:31,170
re-write a JavaScript tutorial
based on modern JavaScript.

138
00:08:31,170 --> 00:08:32,370
So this is a really great article.

139
00:08:32,370 --> 00:08:35,990
It starts off with a little bit of history
of JavaScript, and when I say a little

140
00:08:35,990 --> 00:08:40,500
bit, I mean there's only five paragraphs
and one of them is a single sentence.

141
00:08:40,500 --> 00:08:44,755
So that catches you up to speed with
the previous versions of JavaScript.

142
00:08:44,755 --> 00:08:48,780
And what's nice about this tutorial
is it goes over the built in types,

143
00:08:48,780 --> 00:08:52,540
including symbols,
which are new in ECMAScript 6.

144
00:08:52,540 --> 00:08:58,540
So this is going to be a very modern
JavaScript tutorial and introduction.

145
00:08:58,540 --> 00:09:00,460
So what I really liked about this, and

146
00:09:00,460 --> 00:09:04,600
we're not gonna go into the whole thing
because this is a very, very long article.

147
00:09:04,600 --> 00:09:08,750
But what I really liked about this
was how they talk about functions and

148
00:09:08,750 --> 00:09:13,400
then lead up to using your own objects and
classes.

149
00:09:13,400 --> 00:09:19,380
So they talk about using a Person
object or a Person class,

150
00:09:19,380 --> 00:09:22,480
and there's more depth if you wanna
go into object-oriented JavaScript.

151
00:09:22,480 --> 00:09:27,630
But they show you how you would do the
same thing using just functions to create

152
00:09:27,630 --> 00:09:33,765
a Person, and then this builds
up all the way into a class and

153
00:09:33,765 --> 00:09:38,640
object-oriented based function for
creating a Person.

154
00:09:38,640 --> 00:09:41,630
So anyway this is a great introduction.

155
00:09:41,630 --> 00:09:45,150
If you're familiar with JavaScript
already, you can even get a little bit out

156
00:09:45,150 --> 00:09:48,930
of this, just kind of have a refresher
on maybe some of the finer points.

157
00:09:48,930 --> 00:09:52,560
And if you know anybody who is learning
JavaScript, send them to this page,

158
00:09:52,560 --> 00:09:56,530
just for a general introduction of
what modern JavaScript is like.

159
00:09:56,530 --> 00:10:00,970
>> Next up is this neat tool
that basically will take

160
00:10:00,970 --> 00:10:04,758
your confirmation boxes and
just make them a little bit nicer.

161
00:10:04,758 --> 00:10:10,640
It's called medium-style-confirmed and
it's available on GitHub and

162
00:10:10,640 --> 00:10:14,650
right here,
we have some examples of how it works.

163
00:10:14,650 --> 00:10:20,110
So, I can just click on this simple
example, where I'm presented with this

164
00:10:20,110 --> 00:10:25,600
confirmation box that says, delete?,
and I can either choose OK or CANCEL.

165
00:10:25,600 --> 00:10:27,840
I'll say CANCEL and it will just close.

166
00:10:27,840 --> 00:10:32,200
However, if I hit OK,
I'll be presented with a JavaScript alert

167
00:10:32,200 --> 00:10:35,990
in the browser that says,
the post has been deleted.

168
00:10:35,990 --> 00:10:41,240
Now this is useful because when
you present confirmation boxes,

169
00:10:41,240 --> 00:10:46,110
typically just using the Nella JavaScript,
it's often hard

170
00:10:46,110 --> 00:10:50,870
to phrase the confirmations the way
that you might want to phrase them.

171
00:10:50,870 --> 00:10:52,079
It's hard to say

172
00:10:53,390 --> 00:10:56,780
what you're doing or what you're deleting-
>> Are you not sure you don't wanna

173
00:10:56,780 --> 00:10:57,620
delete this?

174
00:10:57,620 --> 00:11:01,750
>> Are you gonna cancel the deletion, or-
>> Do you have any regrets

175
00:11:01,750 --> 00:11:03,170
about cancelling this deletion?

176
00:11:03,170 --> 00:11:03,850
Yes or no.

177
00:11:03,850 --> 00:11:05,160
>> It's very confusing and

178
00:11:05,160 --> 00:11:08,220
you end up with situations where
there's a lot of double negatives and

179
00:11:08,220 --> 00:11:14,680
the user isn't necessarily sure what it
is, OK or CANCEL is actually going to do.

180
00:11:14,680 --> 00:11:20,780
So this kind of prettifies that whole
situation and makes it look a lot nicer,

181
00:11:20,780 --> 00:11:26,130
and you can even do it with a subtitle
to add some further clarification.

182
00:11:26,130 --> 00:11:29,320
Saying, delete,
are you sure you want to delete this post?

183
00:11:29,320 --> 00:11:30,710
And you can say OK or CANCEL.

184
00:11:30,710 --> 00:11:33,760
So of course, you could do this for
more than just deletions.

185
00:11:33,760 --> 00:11:37,540
You could do this for any type of
action that you might want, and

186
00:11:37,540 --> 00:11:39,890
you can customize the text
however you want.

187
00:11:39,890 --> 00:11:44,730
But really, it just simplifies
those confirmations a whole lot and

188
00:11:44,730 --> 00:11:50,060
makes it much better for say,
a copywriter on your team.

189
00:11:50,060 --> 00:11:54,280
So, to use it,
you can install it via Bower, or

190
00:11:54,280 --> 00:12:02,610
you can download the
media-style-confirmation-style.css file.

191
00:12:02,610 --> 00:12:04,120
Wow, that was difficult to say.

192
00:12:04,120 --> 00:12:07,940
And you have to get the associated
JavaScript file, as well.

193
00:12:07,940 --> 00:12:12,930
And then you just include it into
your HTML as you normally would.

194
00:12:12,930 --> 00:12:17,680
And then you can just call
the code mscConfirm()

195
00:12:17,680 --> 00:12:20,840
function as you see in these demos.

196
00:12:20,840 --> 00:12:22,710
So pretty easy to use, and

197
00:12:22,710 --> 00:12:27,700
solves a typically somewhat
difficult problem, really nicely.

198
00:12:27,700 --> 00:12:28,800
I really like this.

199
00:12:28,800 --> 00:12:31,560
>> So let me just confirm,
is that all we have time for this week.

200
00:12:31,560 --> 00:12:32,990
>> I think it is.

201
00:12:32,990 --> 00:12:34,490
I am @nickrpm twitter.

202
00:12:34,490 --> 00:12:35,550
>> And I am @jseifer.

203
00:12:35,550 --> 00:12:37,290
For more information on
anything we've talked about,

204
00:12:37,290 --> 00:12:39,400
check out the show notes
right below this video.

205
00:12:39,400 --> 00:12:41,416
Thanks everybody for watching,
and well see you next week.

206
00:12:41,416 --> 00:12:50,914
[MUSIC]