1
00:00:00,230 --> 00:00:00,930
Im Nick Pettit.

2
00:00:00,930 --> 00:00:03,542
>> I'm Jason Seifer
>> And you're watching the Treehouse Show,

3
00:00:03,542 --> 00:00:06,468
your weekly dose of internet where
we talk about all things web design,

4
00:00:06,468 --> 00:00:07,860
web development, and more.

5
00:00:07,860 --> 00:00:11,780
>> In this episode we'll be talking
about data binding, nesting components,

6
00:00:11,780 --> 00:00:13,500
image zooms, and more.

7
00:00:13,500 --> 00:00:14,629
>> Let's check it out!

8
00:00:14,629 --> 00:00:19,545
[MUSIC]

9
00:00:19,545 --> 00:00:24,322
First up is this really cool
website where you can test

10
00:00:24,322 --> 00:00:27,940
any website for low vision conditions.

11
00:00:27,940 --> 00:00:32,160
So this can help you with
accessibility testing.

12
00:00:32,160 --> 00:00:37,990
So here I've just typed in
a Wikipedia article on dandelions.

13
00:00:37,990 --> 00:00:41,780
It has this scientific name I'm
not going to attempt to pronounce.

14
00:00:41,780 --> 00:00:46,080
But you can go up here and
pick a low vision condition, so

15
00:00:46,080 --> 00:00:48,485
I'm going to pick cataracts here.

16
00:00:48,485 --> 00:00:52,240
And this is just, of course,
a simulation, but

17
00:00:52,240 --> 00:00:57,230
it can give you some sense of what
people with these different low

18
00:00:57,230 --> 00:01:00,840
vision conditions might see
when they come to your website.

19
00:01:00,840 --> 00:01:05,500
So this site looks a lot blurrier here,
obviously,

20
00:01:05,500 --> 00:01:10,470
so things like this text might be
a little bit more difficult to read.

21
00:01:10,470 --> 00:01:16,672
So if you know that your audience does
consist of a lot of people that might

22
00:01:16,672 --> 00:01:21,010
have some of these conditions, you may
want to try to optimize for some of them.

23
00:01:21,010 --> 00:01:24,340
For example,
this text is a little bit more legible.

24
00:01:24,340 --> 00:01:26,160
It would probably need to be larger and

25
00:01:26,160 --> 00:01:30,460
a bit more spaced out and so
on, but you get the idea.

26
00:01:30,460 --> 00:01:32,700
Let's pick some of these other ones.

27
00:01:34,020 --> 00:01:36,760
So, these are different
color blindness conditions.

28
00:01:36,760 --> 00:01:41,860
So, if you look over here at
the picture of this dandelion here

29
00:01:41,860 --> 00:01:44,500
you'll see what that looks like, and

30
00:01:44,500 --> 00:01:49,325
of course there is monochromacy
which is completely grayscale.

31
00:01:49,325 --> 00:01:53,370
And I assume, actually,
these are using CSS Filters.

32
00:01:53,370 --> 00:01:56,880
I didn't look into it but I think
that's probably what's going on here.

33
00:01:56,880 --> 00:02:02,290
It's a pretty clever usage of CSS
filters for testing access ability.

34
00:02:02,290 --> 00:02:03,960
I thought this was pretty neat.

35
00:02:03,960 --> 00:02:05,260
>> Yeah, low vision's important.

36
00:02:05,260 --> 00:02:08,790
Nick, I just want to say, I don't
say it enough, but you are a vision.

37
00:02:08,790 --> 00:02:09,870
>> You're a vision.

38
00:02:09,870 --> 00:02:10,930
>> Thank you.

39
00:02:10,930 --> 00:02:15,110
Next up,
we have a plug in called jquery.my and

40
00:02:15,110 --> 00:02:20,970
this is building support for
two way data binding in jQuery.

41
00:02:20,970 --> 00:02:21,770
So, what does that mean?

42
00:02:21,770 --> 00:02:26,377
You might be used to seeing data binding
in frameworks like Angular and Ember and

43
00:02:26,377 --> 00:02:27,690
React].

44
00:02:27,690 --> 00:02:31,410
Well, this brings all
of that over to jQuery.

45
00:02:31,410 --> 00:02:34,220
So, the example that is
on the page right here,

46
00:02:34,220 --> 00:02:38,910
there is this form, it's got two inputs,
one for name and one for age.

47
00:02:38,910 --> 00:02:42,820
And then there is a JSON object,
which is the data.

48
00:02:42,820 --> 00:02:46,810
And then you call this my function,

49
00:02:46,810 --> 00:02:51,320
pass it a UI, and
what it binds to in the data,

50
00:02:51,320 --> 00:02:56,120
as well as the data object, and
then you get this little form right here.

51
00:02:56,120 --> 00:03:01,000
And you'll see it says drag me, and watch,
as I drag this, you'll see in the middle

52
00:03:01,000 --> 00:03:06,870
column the age updates in real
time as the slider is dragged.

53
00:03:06,870 --> 00:03:10,110
Now, this is all the code that
you need to get that done.

54
00:03:10,110 --> 00:03:15,860
So, we can start editing the name
here if we wanna make it pluralized.

55
00:03:15,860 --> 00:03:20,650
And you can see this all updates
in the data attribute right here.

56
00:03:20,650 --> 00:03:24,720
Now, there are a ton of different
demos on the the site right here.

57
00:03:24,720 --> 00:03:29,086
And this is going to work with almost
every Jquery UI plugin that there is.

58
00:03:29,086 --> 00:03:32,180
So here we see sorting and filtering,

59
00:03:32,180 --> 00:03:38,660
we've got this age being updated to
filter this little chart right here.

60
00:03:38,660 --> 00:03:40,910
It also works on maps.

61
00:03:40,910 --> 00:03:41,836
Here's an example with a map.

62
00:03:41,836 --> 00:03:46,677
And you'll notice this has a zoom of
2.5x and 5x and then it shows you

63
00:03:46,677 --> 00:03:51,270
the data over on the right here,
so we can see if we're going slow.

64
00:03:51,270 --> 00:03:55,720
That zoom level changes
in the data attribute.

65
00:03:55,720 --> 00:04:01,710
Now another thing right here, this Bezier
curve example was built entirely jQuery,

66
00:04:01,710 --> 00:04:05,390
and you can see, once again, as I drag
this all around using the drag and

67
00:04:05,390 --> 00:04:09,690
drop and adjust these sliders, everything
automatically changes in real time.

68
00:04:09,690 --> 00:04:13,440
You can look at the code and
see exactly what went into it,

69
00:04:13,440 --> 00:04:17,640
or, you can go through and
check out the API.

70
00:04:17,640 --> 00:04:21,610
Now, this is a relatively complicated API,
but

71
00:04:21,610 --> 00:04:23,437
they do their best to simplify it down.

72
00:04:23,437 --> 00:04:29,230
So, everything works on objects but
there is the ability to nest forms.

73
00:04:29,230 --> 00:04:32,292
But at the heart it's actually very,
very easy to use so

74
00:04:32,292 --> 00:04:37,030
we just give it some data and then it all
works by something called a manifest.

75
00:04:37,030 --> 00:04:41,560
Specify the data, initialization, and
UI bindings then just call that, and

76
00:04:41,560 --> 00:04:42,910
you are good to go.

77
00:04:42,910 --> 00:04:47,420
Now, I'm not gonna get into the entire API
on the show, but definitely check this out

78
00:04:47,420 --> 00:04:50,490
if you're primarily using
jQuery on your projects and

79
00:04:50,490 --> 00:04:54,620
you wanted to get more into data binding,
and maybe didn't wanna check out

80
00:04:54,620 --> 00:04:58,380
a full framework like Angular,
Ember, Reactor, something like that.

81
00:04:58,380 --> 00:04:59,020
>> Very cool stuff.

82
00:04:59,020 --> 00:05:04,960
Well, next up is this really cool
blog post on nesting CSS components.

83
00:05:04,960 --> 00:05:08,160
>> The CSS components they
just settled into a house, and

84
00:05:08,160 --> 00:05:10,090
they want to decorate,
really make it their own.

85
00:05:11,430 --> 00:05:13,210
That's what this is talking about, right?

86
00:05:13,210 --> 00:05:14,520
>> It's a bit of a stretch.

87
00:05:14,520 --> 00:05:15,210
>> Nesting.

88
00:05:15,210 --> 00:05:18,290
>> Okay, we'll go with that.

89
00:05:18,290 --> 00:05:23,640
So, this article points out three
different ways that you can nest

90
00:05:23,640 --> 00:05:24,750
CSS components.

91
00:05:24,750 --> 00:05:25,870
So what does that mean?

92
00:05:25,870 --> 00:05:30,150
Well let's just go down
to the example here.

93
00:05:30,150 --> 00:05:36,360
Let's say that we have this header and
we also have a button.

94
00:05:36,360 --> 00:05:41,400
And we want the button to be
a certain size on its own, but

95
00:05:41,400 --> 00:05:47,750
when we put it inside of a header we
actually want maybe a smaller button.

96
00:05:47,750 --> 00:05:49,970
So, how do you do that?

97
00:05:49,970 --> 00:05:54,970
Well, there's a couple of different
ways that you could create these nested

98
00:05:56,250 --> 00:05:57,190
components, so.

99
00:05:57,190 --> 00:05:58,330
>> Easy, we just give it an ID and

100
00:05:58,330 --> 00:06:01,230
apply all the formatting right
on the ID no matter where it is.

101
00:06:01,230 --> 00:06:04,050
>> That is, terrible advice.

102
00:06:04,050 --> 00:06:07,220
So here is the first option,
Descendant selector.

103
00:06:07,220 --> 00:06:09,320
So you have a selector
that looks like this,

104
00:06:09,320 --> 00:06:14,310
you say well normally we have this
button class but, then we're also

105
00:06:14,310 --> 00:06:18,390
going to have this descendant selector
where we have the header class,

106
00:06:18,390 --> 00:06:22,480
then the button class, and
then we sort of reset the font size.

107
00:06:22,480 --> 00:06:24,010
Well, that's okay.

108
00:06:24,010 --> 00:06:29,050
The problem is,
where do we put a component like that?

109
00:06:29,050 --> 00:06:34,880
Does that go in our header CSS or
in this case SCSS file?

110
00:06:34,880 --> 00:06:37,870
Or does it go in the button file?

111
00:06:37,870 --> 00:06:40,640
And it's kinda hard to split

112
00:06:40,640 --> 00:06:43,454
these components up when you're
using the sentence selectors.

113
00:06:43,454 --> 00:06:48,096
And it may not sound like a big deal but
it can be in a pretty large project,

114
00:06:48,096 --> 00:06:52,836
such as an e-commerce site where
multiple people are working on the CSS.

115
00:06:52,836 --> 00:06:55,465
You really have to have standards for
this kind of stuff, or

116
00:06:55,465 --> 00:06:57,300
it can get out of hand very quickly.

117
00:06:57,300 --> 00:07:00,550
>> I think that's what's important
to note about this is it's for

118
00:07:00,550 --> 00:07:02,630
larger sites with a lot
of people working on it.

119
00:07:02,630 --> 00:07:06,110
If you're just doing a small one page site
like, yeah, throw the CSS everywhere.

120
00:07:06,110 --> 00:07:07,030
Who cares?
>> Whatever, right?

121
00:07:07,030 --> 00:07:09,530
>> You only have yourself
to hate later on.

122
00:07:09,530 --> 00:07:12,450
No, this is for standards and
larger organizations.

123
00:07:12,450 --> 00:07:13,480
>> Exactly.

124
00:07:13,480 --> 00:07:16,900
So, option 2 is variations, right?

125
00:07:16,900 --> 00:07:22,610
So, let's say we have this class button's
small and then we do something like this.

126
00:07:22,610 --> 00:07:26,050
We say, well, we're going to have
a header and then we have this button and

127
00:07:26,050 --> 00:07:31,090
then we're also going to have this button
small class which is slightly more of

128
00:07:31,090 --> 00:07:37,300
a specific selector and it will change
the font size to something like this.

129
00:07:37,300 --> 00:07:40,411
But the problem with that is,
what happens when you want,

130
00:07:40,411 --> 00:07:43,920
say a font size that's slightly
different or slightly smaller?

131
00:07:43,920 --> 00:07:46,840
Do you create another variation of button?

132
00:07:46,840 --> 00:07:48,250
>> You create a whole new website.

133
00:07:48,250 --> 00:07:50,325
>> Just a little bit smaller?

134
00:07:50,325 --> 00:07:53,420
No, neither one of those things.

135
00:07:53,420 --> 00:07:57,290
Because that can start to get pretty out
of hand because you can really start to

136
00:07:57,290 --> 00:08:02,380
lose track of where all of these
different variations are used.

137
00:08:02,380 --> 00:08:07,620
And you might start to look at a CSS file
that has a ton of different variations and

138
00:08:07,620 --> 00:08:10,360
if you're trying to clean it
up you might look at that and

139
00:08:10,360 --> 00:08:13,730
think, well,
which one of these are used where?

140
00:08:13,730 --> 00:08:19,300
Is just a little smaller actually just
a little smaller than button small?

141
00:08:19,300 --> 00:08:21,070
It can be hard to tell.

142
00:08:21,070 --> 00:08:26,440
Option three is what's called
Adopted Child, and this is an interesting

143
00:08:26,440 --> 00:08:33,140
technique where you have, say,
this header class and then header item.

144
00:08:33,140 --> 00:08:37,230
And if we scroll down a little
further here, we have something

145
00:08:37,230 --> 00:08:42,170
actually that looks like this, so you
have header item plus the button class.

146
00:08:42,170 --> 00:08:44,680
So, you have the button class
just like you normally would, so

147
00:08:44,680 --> 00:08:46,380
there's the font size.

148
00:08:46,380 --> 00:08:52,030
Of 1 em, and
that would go in your button file.

149
00:08:52,030 --> 00:08:56,280
But then you might have
something like this in

150
00:08:56,280 --> 00:09:01,350
your header.css file where it says header,
header item, and

151
00:09:01,350 --> 00:09:05,650
it adjusts the font size here for
anything that is inside the header.

152
00:09:05,650 --> 00:09:10,550
And the reason this works is
because of selector specificity.

153
00:09:10,550 --> 00:09:16,120
This is a slightly more specific
selector than this button class,

154
00:09:16,120 --> 00:09:21,190
so it's going to get overridden and
it will actually apply this font size.

155
00:09:21,190 --> 00:09:25,210
And that's a great way to sort of

156
00:09:25,210 --> 00:09:29,070
break up all of these different styles and
group them appropriately.

157
00:09:29,070 --> 00:09:33,050
>> Nick, if you're going with
the adopted child approach,

158
00:09:33,050 --> 00:09:35,500
when do you think is the right
time to tell these DOM elements?

159
00:09:37,300 --> 00:09:40,320
>> I am not really sure I can answer that,
Jason.

160
00:09:40,320 --> 00:09:41,590
I have no idea.

161
00:09:43,290 --> 00:09:46,260
>> I just think you really need to put
some thought into that before you.

162
00:09:46,260 --> 00:09:49,620
>> It's true, before you just,
you know, go adopting child elements.

163
00:09:50,650 --> 00:09:53,760
There's a couple more options listed here,
but

164
00:09:53,760 --> 00:09:57,070
I will let you check
those out on your own.

165
00:09:58,080 --> 00:10:02,030
>> Next up we have a very
quick plug in called zoom.js.

166
00:10:02,030 --> 00:10:05,070
This is from one of the authors
of Twitter bootstrap and

167
00:10:05,070 --> 00:10:08,820
implements mediums image zoom for jQuery.

168
00:10:08,820 --> 00:10:12,920
Now, if you have never seen image
zooming on the website medium,

169
00:10:12,920 --> 00:10:14,685
there is a demo right here.

170
00:10:14,685 --> 00:10:17,590
So look at this,
we've got this image in the page and

171
00:10:17,590 --> 00:10:19,850
when I click it, whoa, here we are.

172
00:10:19,850 --> 00:10:21,660
Oh, wow, it's in zoom.

173
00:10:21,660 --> 00:10:22,810
Wow.
A webpage,

174
00:10:22,810 --> 00:10:25,230
roller coaster, I don't know I lost track.

175
00:10:25,230 --> 00:10:25,850
Here's another one.

176
00:10:25,850 --> 00:10:26,570
Whoa!

177
00:10:26,570 --> 00:10:29,040
Are we actually at the beach in black and

178
00:10:29,040 --> 00:10:32,150
white in front of these palm trees
like a painful childhood memory?

179
00:10:32,150 --> 00:10:34,200
No, It's just a webpage.

180
00:10:34,200 --> 00:10:37,890
So this is really easy to use,
you just throw in the CSS and

181
00:10:37,890 --> 00:10:39,530
JavaScript on your page.

182
00:10:39,530 --> 00:10:44,665
You also need to make sure that you have
the bootstrap transition file, JavaScript,

183
00:10:44,665 --> 00:10:49,995
and then just add data-action"zoom" on
your images and you are good to go.

184
00:10:49,995 --> 00:10:53,335
So, this should be good to
go in all relevant browsers,

185
00:10:53,335 --> 00:10:56,065
which I believe includes IE8 and up.

186
00:10:56,065 --> 00:10:56,702
Very easy to use.

187
00:10:56,702 --> 00:10:58,932
If you want to just check
it out in show notes.

188
00:10:58,932 --> 00:11:02,152
>> Thanks for zooming through that, Jason
>> No problem.

189
00:11:02,152 --> 00:11:04,132
>> Last up is Flickity.

190
00:11:04,132 --> 00:11:08,022
This is touch, responsive,
flickable galleries.

191
00:11:08,022 --> 00:11:12,102
So we've all seen this before, the little
dots at the bottom and arrows and

192
00:11:12,102 --> 00:11:16,652
you can kinda go through this slider,
or carouse,l or gallery.

193
00:11:16,652 --> 00:11:19,280
There's many names for
this particular design pattern.

194
00:11:19,280 --> 00:11:25,520
But, I can also click with my mouse and
drag just like that.

195
00:11:25,520 --> 00:11:28,580
I think actually I have to release there,
there we go.

196
00:11:28,580 --> 00:11:31,790
And I can just flick right through these,
and

197
00:11:31,790 --> 00:11:36,760
of course, it is also touch supported,
so this will work on mobile.

198
00:11:36,760 --> 00:11:40,700
And, you can swipe just like
I'm doing here with the mouse.

199
00:11:40,700 --> 00:11:45,650
So, that's pretty neat and
it's pretty simple and straight-forward.

200
00:11:45,650 --> 00:11:49,220
You just have this CSS file and
this JavaScript file, and

201
00:11:49,220 --> 00:11:52,500
you just have to include
those into your web page and

202
00:11:52,500 --> 00:11:58,500
then add js-flickity class
to the gallery elements.

203
00:11:58,500 --> 00:12:06,190
So you have some HTML that looks like this
and then you are good to go, that's it.

204
00:12:06,190 --> 00:12:09,870
So, that is all we have time for
this week.

205
00:12:09,870 --> 00:12:10,900
I am @nickrp on twitter.

206
00:12:10,900 --> 00:12:12,070
>> I am @jseifer.

207
00:12:12,070 --> 00:12:15,010
For more information on anything we
talked about check out the links in

208
00:12:15,010 --> 00:12:16,500
the show notes right below this video.

209
00:12:16,500 --> 00:12:19,172
Thanks everybody for watching,
and we will see you next week.

210
00:12:19,172 --> 00:12:26,378
[MUSIC]