1
00:00:00,490 --> 00:00:01,330
I'm Nick Pettit.

2
00:00:01,330 --> 00:00:02,360
>> I'm Jason Seifer.

3
00:00:02,360 --> 00:00:03,830
>> And you're watching the treehouse show.

4
00:00:03,830 --> 00:00:05,090
Your weekly dose of internet,

5
00:00:05,090 --> 00:00:08,250
where we talk about all things web design,
web development, and more.

6
00:00:08,250 --> 00:00:12,830
>> In this episode we'll be talking about
field validation, CSS reference,

7
00:00:12,830 --> 00:00:14,890
progress bars, and more.

8
00:00:14,890 --> 00:00:16,011
>> Let's check it out.

9
00:00:16,011 --> 00:00:18,127
[MUSIC]

10
00:00:18,127 --> 00:00:20,888
[MUSIC]

11
00:00:20,888 --> 00:00:24,420
>> First up we have a project called
FieldVal.

12
00:00:24,420 --> 00:00:29,440
This as you might expect form the name,
lets you create error reports for

13
00:00:29,440 --> 00:00:30,945
your JavaScript data.

14
00:00:30,945 --> 00:00:34,525
Essentially, it does field validation.

15
00:00:34,525 --> 00:00:36,805
>> Oh, so it's like a shorter version of
that.

16
00:00:36,805 --> 00:00:37,575
>> Yeah.
>> Okay, cool.

17
00:00:37,575 --> 00:00:38,755
>> Yeah, they compressed it.

18
00:00:38,755 --> 00:00:39,365
>> I'm on board.

19
00:00:39,365 --> 00:00:45,120
>> So let's go ahead and just quickly
check out a demo, because that is easy.

20
00:00:45,120 --> 00:00:49,180
We can see, if I click into the email
field right here, and then tab out, and

21
00:00:49,180 --> 00:00:53,940
hit submit, that changes from saying that
the field was missing to,

22
00:00:53,940 --> 00:00:56,930
it was an invalid email address format.

23
00:00:56,930 --> 00:00:59,340
Now, the output that you get is
interesting.

24
00:00:59,340 --> 00:01:03,520
You get a JSON object which has all of the
different fields in it.

25
00:01:03,520 --> 00:01:07,940
Says it's missing or it's invalid, along
with the different keys which

26
00:01:07,940 --> 00:01:10,980
correspond to the different parts of the
form.

27
00:01:10,980 --> 00:01:13,240
Now, why in the world would you wanna do
something like this?

28
00:01:13,240 --> 00:01:17,440
Well, when you are validating data why,
why would you wanna do that?

29
00:01:17,440 --> 00:01:20,180
Here is an example of poor validation
where you

30
00:01:20,180 --> 00:01:23,060
can really only run one at a time.

31
00:01:23,060 --> 00:01:26,340
So this library fixes that by allowing you
to

32
00:01:26,340 --> 00:01:28,980
get a bunch of different validations at
the same time.

33
00:01:28,980 --> 00:01:33,590
It allows you to just give your users a
little bit better of an experience because

34
00:01:33,590 --> 00:01:36,860
you can catch more things before you send
the data up to the server.

35
00:01:36,860 --> 00:01:38,730
Anyway, we will have a link in the show
notes,

36
00:01:38,730 --> 00:01:42,470
which you can check out right below this
video if you're interested.

37
00:01:42,470 --> 00:01:47,390
>> Next up is Matter.js, this is a physics
library or

38
00:01:47,390 --> 00:01:54,190
a physics engine for the web, as you might
guess from it being written in JavaScript.

39
00:01:54,190 --> 00:01:59,420
This is only 2D for now but perhaps it
will be 3D in the future.

40
00:01:59,420 --> 00:02:03,840
And this picture is pretty boring so let's
go to the full demo here.

41
00:02:03,840 --> 00:02:04,510
>> What?

42
00:02:04,510 --> 00:02:07,280
>> Whoa.
What is happening?

43
00:02:07,280 --> 00:02:08,330
>> What is happening?

44
00:02:08,330 --> 00:02:08,960
Wow.

45
00:02:08,960 --> 00:02:11,840
>> This is physics in the browser.

46
00:02:13,400 --> 00:02:14,110
>> Is this the future?

47
00:02:15,750 --> 00:02:16,630
>> Tomorrow is today.

48
00:02:16,630 --> 00:02:18,690
Now-
>> Yesterday already happened.

49
00:02:18,690 --> 00:02:21,820
>> You might be wondering why would you
use something like this?

50
00:02:21,820 --> 00:02:22,920
>> Why would I?

51
00:02:22,920 --> 00:02:23,440
>> Why does it-
>> Yeah.

52
00:02:23,440 --> 00:02:24,910
>> Why does it matter?

53
00:02:24,910 --> 00:02:30,420
Well, if you are making a game, that's a
pretty useful use case.

54
00:02:30,420 --> 00:02:36,260
But perhaps you might want to use this to
do some sort of cool animation,

55
00:02:36,260 --> 00:02:38,570
maybe something like kind of drops down
and

56
00:02:38,570 --> 00:02:41,170
you want a few things to kinda like bounce
around.

57
00:02:41,170 --> 00:02:43,430
Could be good for like a marketing page.

58
00:02:43,430 --> 00:02:45,150
It is a little bit frivolous but

59
00:02:45,150 --> 00:02:50,600
there's definitely some good use cases
where it could add some extra wow factor.

60
00:02:50,600 --> 00:02:52,380
So this is pretty easy to install.

61
00:02:52,380 --> 00:02:56,650
You can just include the script directly
into your page.

62
00:02:56,650 --> 00:03:01,250
Or you can install it with Bower or the
node package manager.

63
00:03:01,250 --> 00:03:04,000
And it has a lot of pretty robust
features.

64
00:03:04,000 --> 00:03:09,330
It has physical properties such as mass,
area, and density.

65
00:03:09,330 --> 00:03:12,950
It can do rigid bodies of any convex
polygon.

66
00:03:12,950 --> 00:03:20,240
And it has gravity, all sorts of stuff,
you might expect in a physics engine.

67
00:03:20,240 --> 00:03:21,600
So, pretty neat stuff,

68
00:03:21,600 --> 00:03:26,730
not a whole lot to say about it but it is
definitely pretty impressive.

69
00:03:26,730 --> 00:03:29,200
>> You know, as far a physics engine
libraries go,

70
00:03:29,200 --> 00:03:32,240
I think I prefer mind.js over matter.js.

71
00:03:34,560 --> 00:03:39,210
Next up we have a project called Material
Progress.

72
00:03:39,210 --> 00:03:45,060
This is a quick little combination of
CSS3, and pure JavaScript,

73
00:03:45,060 --> 00:03:50,620
to implement progress bars based on
Google's Material Design.

74
00:03:50,620 --> 00:03:53,370
There are a few different types, I believe
there are four different types here.

75
00:03:53,370 --> 00:03:57,860
The first one is a determinate progress
bar, and you can see right here a little

76
00:03:57,860 --> 00:04:02,080
example on the screen just going from left
to right filling up the progress.

77
00:04:02,080 --> 00:04:04,880
It's really easy to use, just include in
your page and

78
00:04:04,880 --> 00:04:10,460
call new m progress then you get start and
set and increment.

79
00:04:10,460 --> 00:04:11,570
There are a few different kinds,

80
00:04:11,570 --> 00:04:15,540
we've got buffers as well which can, gives
you a little bit

81
00:04:15,540 --> 00:04:21,530
of another progress bar that's intended to
represent a buffer as things are loading.

82
00:04:21,530 --> 00:04:24,990
An indeterminate progress bar, which just
means things are gonna take forever and

83
00:04:24,990 --> 00:04:28,320
making no progress, kinda like mine and
Nick's relationship.

84
00:04:28,320 --> 00:04:33,290
And then there's also a fourth type, which
is query indeterminate and determinate,

85
00:04:33,290 --> 00:04:38,420
that kinda goes a few different ways
depending on what is going on.

86
00:04:38,420 --> 00:04:40,550
Anyway, you can see a few more details and

87
00:04:40,550 --> 00:04:44,000
check out the project on GitHub, which
we'll have a link to in the show notes.

88
00:04:44,000 --> 00:04:47,520
>> We are definitely living in a material
world.

89
00:04:47,520 --> 00:04:50,620
And I guess it's also pretty cool if you
just wanna make like, a cool like,

90
00:04:50,620 --> 00:04:54,200
laser light show on your website not
really for loading bars, necessarily.

91
00:04:54,200 --> 00:04:55,330
>> Yeah, that's true, they do.

92
00:04:55,330 --> 00:04:56,840
>> Cool little web disco there.

93
00:04:56,840 --> 00:04:57,450
All right.

94
00:04:57,450 --> 00:04:58,590
>> Web disco.

95
00:04:58,590 --> 00:05:02,690
>> Next up is a CSS reference from
codrops.

96
00:05:02,690 --> 00:05:04,560
This is very cool.

97
00:05:04,560 --> 00:05:09,170
It's an incredibly robust CSS reference.

98
00:05:09,170 --> 00:05:11,980
So you can click on any property here.

99
00:05:11,980 --> 00:05:14,890
Let's click on, say, animation.

100
00:05:14,890 --> 00:05:20,010
And, once you click on one of those, you
can see that the animation

101
00:05:20,010 --> 00:05:24,980
property is short hand for all of these
other properties.

102
00:05:24,980 --> 00:05:28,750
And of course, those are all linked within
the reference.

103
00:05:28,750 --> 00:05:33,290
And there's just a great article for every
single one of these.

104
00:05:33,290 --> 00:05:35,250
There's some trivia and notes.

105
00:05:35,250 --> 00:05:37,380
There is the official syntax.

106
00:05:37,380 --> 00:05:42,430
There's the different values, and then
some examples and not only that there is

107
00:05:42,430 --> 00:05:49,850
also a live demo and, then of course
browser support from, caniuse.com.

108
00:05:49,850 --> 00:05:52,100
>> Wow, this is very thorough.

109
00:05:52,100 --> 00:05:57,250
>> It's really incredibly thorough, I mean
it's remarkable the.

110
00:05:57,250 --> 00:05:59,670
There's so much detail for every single
one of these.

111
00:05:59,670 --> 00:06:03,600
It's definitely one of the best CSS
references I've ever seen.

112
00:06:03,600 --> 00:06:09,290
So if there's maybe a couple of elements
that you're kinda stuck on and you want

113
00:06:09,290 --> 00:06:13,000
to learn a little bit more about them, or
kinda just get a different perspective on

114
00:06:13,000 --> 00:06:16,730
them, then this is definitely something
that's worth checking out.

115
00:06:16,730 --> 00:06:19,090
And even if you feel like you know a lot
about CSS,

116
00:06:19,090 --> 00:06:22,870
it's still worth checking out because
every time I look through here,

117
00:06:22,870 --> 00:06:26,930
I always find something that maybe is new
to me or

118
00:06:26,930 --> 00:06:30,680
I just haven't looked at in a while and I
see how it could be used in a new way.

119
00:06:30,680 --> 00:06:31,280
>> Very, very.

120
00:06:31,280 --> 00:06:31,910
>> It's pretty cool.

121
00:06:31,910 --> 00:06:32,745
>> Yeah very cool stuff.

122
00:06:32,745 --> 00:06:33,460
>> Mm-hm.

123
00:06:33,460 --> 00:06:38,370
>> And finally we have a library called
vissense, which is for

124
00:06:38,370 --> 00:06:43,520
observing changes in the visibility of DOM
elements.

125
00:06:43,520 --> 00:06:48,520
Now, let's see if we have a demo that we
can take a look at.

126
00:06:48,520 --> 00:06:49,930
Oh, here we go, demo page.

127
00:06:51,230 --> 00:06:54,110
You can just see how it works here.

128
00:06:54,110 --> 00:06:56,410
If we're looking at different sections of
a page, for

129
00:06:56,410 --> 00:07:01,320
example, you can see there are three
different sections and it shows whether or

130
00:07:01,320 --> 00:07:03,330
not something is visible or hidden.

131
00:07:03,330 --> 00:07:05,950
And then as we scroll down the page,

132
00:07:05,950 --> 00:07:10,760
you'll be able to see on the bottom left
these change between visible,

133
00:07:10,760 --> 00:07:15,980
fully visible, and hidden, depending on
what is viewable inside the browser.

134
00:07:15,980 --> 00:07:19,770
Now, you could use this for certain things
like showing whether or

135
00:07:19,770 --> 00:07:25,435
not a video is playing, if a video is
visible on a page, you could maybe

136
00:07:25,435 --> 00:07:28,935
make it play automatically, or as you
scroll, you could have it stop playing.

137
00:07:28,935 --> 00:07:30,615
That's something that could be really
useful.

138
00:07:30,615 --> 00:07:33,885
A ton of different uses, and it's actually
really, really easy to use.

139
00:07:33,885 --> 00:07:39,875
You just give it the DOM element of what
you want to, what, what you want to track,

140
00:07:39,875 --> 00:07:44,325
and then, you can call the is fully
visible method, and then,

141
00:07:44,325 --> 00:07:46,420
inside there, you get a little bit of a
call back.

142
00:07:46,420 --> 00:07:47,740
So there is more documentation.

143
00:07:47,740 --> 00:07:49,110
We're not gonna get all the way into that.

144
00:07:49,110 --> 00:07:53,010
You can check it out in the show notes if
you are interested in it.

145
00:07:53,010 --> 00:07:53,730
>> Very cool stuff.

146
00:07:53,730 --> 00:07:58,550
You could probably use that in combination
with like the page visibility API,

147
00:07:58,550 --> 00:08:01,570
which both I mean is really good for
battery life.

148
00:08:01,570 --> 00:08:02,640
So, like you were saying.

149
00:08:02,640 --> 00:08:04,510
>> Yeah.
>> You're not like playing videos or,

150
00:08:04,510 --> 00:08:08,130
you know, showing like a photo gallery,
whatever if it's not visible.

151
00:08:08,130 --> 00:08:09,960
It's pretty cool, cool idea.

152
00:08:09,960 --> 00:08:12,600
Well, that is all we have time for this
week.

153
00:08:12,600 --> 00:08:14,010
Jason, who are you on Twitter?

154
00:08:14,010 --> 00:08:15,400
>> I am @jseifer.

155
00:08:15,400 --> 00:08:16,290
>> And I am @nickrp.

156
00:08:16,290 --> 00:08:16,790
And-

157
00:08:17,980 --> 00:08:19,200
>> For more information on anything we

158
00:08:19,200 --> 00:08:21,110
talked about check out the show notes
below the video.

159
00:08:21,110 --> 00:08:24,840
We want to thank everybody for watching
and we'll talk to you next week.

160
00:08:24,840 --> 00:08:25,912
See you later.

161
00:08:25,912 --> 00:08:32,928
[MUSIC]

162
00:08:32,928 --> 00:08:35,650
What, why is google chrome wanna access my
contacts?

163
00:08:35,650 --> 00:08:37,908
That's awkward Google Chrome, we just-

164
00:08:37,908 --> 00:08:39,000
>> I wanna see your contacts.

165
00:08:39,000 --> 00:08:40,980
>> We just started hanging out Google
Chrome, why would