1
00:00:00,190 --> 00:00:00,840
I'm Nick Pettit.

2
00:00:00,840 --> 00:00:01,590
>> I'm Jason Seifer.

3
00:00:01,590 --> 00:00:03,480
>> And you're watching the Treehouse Show.

4
00:00:03,480 --> 00:00:06,370
Your weekly dose of internets where talk
about all things web design,

5
00:00:06,370 --> 00:00:07,800
web development and more.

6
00:00:07,800 --> 00:00:11,460
>> In this episode we'll be talking about
CSS frameworks, polyfills,

7
00:00:11,460 --> 00:00:13,900
html five patterns and more.

8
00:00:13,900 --> 00:00:14,795
>> Let's check it out.

9
00:00:14,795 --> 00:00:19,795
[MUSIC]

10
00:00:19,795 --> 00:00:25,810
First up is Semantic UI this is user
interface is the language of the web.

11
00:00:27,000 --> 00:00:30,850
That's not really a complete sentence, at
least what I said that is.

12
00:00:30,850 --> 00:00:35,940
But no this is a CSS framework so let's
take

13
00:00:35,940 --> 00:00:40,890
a look here and, I could just click on
each one of these individually, but let's

14
00:00:40,890 --> 00:00:44,044
just click on All UI, that's way more
>> We should make a CSS, Nick, and

15
00:00:44,044 --> 00:00:46,171
then we could finally put U and I
together.

16
00:00:46,171 --> 00:00:50,295
>> [BLANK_AUDIO]

17
00:00:50,295 --> 00:00:52,880
That was actually very nice, Jason, heh,
I'm proud of you.

18
00:00:52,880 --> 00:00:56,890
>> I know it would be nice to get some
reciprocation once in a while.

19
00:00:58,050 --> 00:01:03,870
>> So here is All UI, examples of all
user-face interface elements.

20
00:01:03,870 --> 00:01:06,440
And here we have some buttons.

21
00:01:06,440 --> 00:01:08,090
So, these are pretty nice looking.

22
00:01:08,090 --> 00:01:12,660
Looks fairly similar to something like
Bootstrap, for example.

23
00:01:12,660 --> 00:01:17,320
I do like the this cancel or save button,
that's pretty neat.

24
00:01:17,320 --> 00:01:18,380
>> What happens when you hit the or?

25
00:01:20,390 --> 00:01:21,440
Nothing.
>> Nothing.

26
00:01:21,440 --> 00:01:23,100
>> Now that's good UI.

27
00:01:23,100 --> 00:01:24,460
>> Wow.
>> Or UX.

28
00:01:24,460 --> 00:01:25,770
Is that UI or UX?

29
00:01:25,770 --> 00:01:31,370
>> Actually have, I think, I think they
have this element right over top of it.

30
00:01:31,370 --> 00:01:34,180
The, the hover stay is actually pretty
impressive here.

31
00:01:34,180 --> 00:01:38,620
Anyway, moving on, they have these nice
dividers here.

32
00:01:38,620 --> 00:01:43,070
So that's pretty cool, if you need to
split up some sections or

33
00:01:43,070 --> 00:01:45,570
some buttons on website.

34
00:01:45,570 --> 00:01:48,940
All sorts of little flag icons, that's
nice.

35
00:01:48,940 --> 00:01:53,170
Here's their different headers styles and
their difference sub-headers.

36
00:01:53,170 --> 00:01:58,660
They also have tons of other icons besides
the country flags,

37
00:01:58,660 --> 00:02:01,160
so that is always useful.

38
00:02:01,160 --> 00:02:07,200
And then they have a couple of more things
like input, really nice labels.

39
00:02:07,200 --> 00:02:08,370
Anyway, you get the idea.

40
00:02:08,370 --> 00:02:11,260
This is a pretty robust CSS framework.

41
00:02:11,260 --> 00:02:13,930
They have lots of different components in
here.

42
00:02:13,930 --> 00:02:16,980
So definitely be sure to check this one
out, I think it's pretty nice looking.

43
00:02:16,980 --> 00:02:18,770
>> Yeah that's very cool.

44
00:02:18,770 --> 00:02:24,749
Next up we have something called Fetch,
which is a polyfill for window.fetch.

45
00:02:24,749 --> 00:02:30,147
Now window.fetch is an ECMAScript six
specification and

46
00:02:30,147 --> 00:02:32,840
it also supports Promises.

47
00:02:32,840 --> 00:02:38,700
Now what this is going to do is replace
the XML http request functionality and

48
00:02:38,700 --> 00:02:41,500
replace it with one function called Fetch.

49
00:02:41,500 --> 00:02:45,280
>> It'd be nice if you would support some
promises every now and then.

50
00:02:45,280 --> 00:02:45,870
>> 'Kay.

51
00:02:45,870 --> 00:02:46,450
I try.

52
00:02:46,450 --> 00:02:48,910
It's just, you know, really hard to get a
hold of you sometimes.

53
00:02:48,910 --> 00:02:54,020
So, this is easily installed with Bower,
just do Bower install fetch.

54
00:02:54,020 --> 00:02:57,320
Now if you are using an older browther,
browser

55
00:02:57,320 --> 00:03:02,320
you need to install the ES6 Promise
Library and then you are good to go.

56
00:03:02,320 --> 00:03:03,610
So how do you use this.

57
00:03:03,610 --> 00:03:09,070
It's very easy, you just call the fetch
function, then give it a URL or path.

58
00:03:09,070 --> 00:03:11,230
Then, using a Promise, call .then.

59
00:03:11,230 --> 00:03:13,660
And then you get a response object.

60
00:03:13,660 --> 00:03:17,930
You can just return the text of that, pass
it to another Promise and

61
00:03:17,930 --> 00:03:20,720
then do anything inside of that function.

62
00:03:20,720 --> 00:03:24,420
Now this works with HTML as well as JSON
and

63
00:03:24,420 --> 00:03:27,250
you'll notice that they are chaining
promises here.

64
00:03:27,250 --> 00:03:31,880
Also you can check out response meta-data
from headers or the status or

65
00:03:31,880 --> 00:03:33,570
the status text.

66
00:03:33,570 --> 00:03:39,820
You can do post with html or JSON and even
upload files.

67
00:03:39,820 --> 00:03:44,130
Now you can also do a little bit more,
they have some more error handlers and

68
00:03:44,130 --> 00:03:46,140
success handlers if you wanna get into
that.

69
00:03:46,140 --> 00:03:47,190
Check out a link in the show notes,

70
00:03:47,190 --> 00:03:49,676
you can find a link to this project right
below this video.

71
00:03:49,676 --> 00:03:54,680
>> All right nice, well next up is a
really cool post over on the Codrops

72
00:03:54,680 --> 00:03:59,610
blog about how to create animated text
fills.

73
00:03:59,610 --> 00:04:01,030
Now this is really cool.

74
00:04:01,030 --> 00:04:03,140
Let's look at this demo here.

75
00:04:03,140 --> 00:04:04,030
Whoa!
>> Whoa!

76
00:04:04,030 --> 00:04:05,300
>> What is happening?

77
00:04:05,300 --> 00:04:06,790
>> What?
I know are we in a code machine?

78
00:04:06,790 --> 00:04:11,050
>> Is this, is this animated border
something or

79
00:04:11,050 --> 00:04:12,181
is this like
>> Wow.

80
00:04:12,181 --> 00:04:14,035
>> This is, this is amazing.

81
00:04:14,035 --> 00:04:14,630
>> What?
>> Look at that.

82
00:04:14,630 --> 00:04:15,940
You can fill in.

83
00:04:15,940 --> 00:04:19,152
>> Is the Treehouse show or a a big budget
Hollywood movie?

84
00:04:19,152 --> 00:04:22,340
>> So you could fill in the text with
whatever you want and

85
00:04:22,340 --> 00:04:24,660
this is actually real text on this page.

86
00:04:24,660 --> 00:04:26,255
I can actually highlight this.

87
00:04:26,255 --> 00:04:26,845
>> Real text?

88
00:04:26,845 --> 00:04:28,270
>> So that's pretty amazing.

89
00:04:28,270 --> 00:04:33,440
Yea this isn't like a a svg or something
like that or an image.

90
00:04:33,440 --> 00:04:35,520
>> So there's a bunch of other examples
here.

91
00:04:35,520 --> 00:04:41,170
You can create some pretty different
looking types of effects with.

92
00:04:41,170 --> 00:04:42,670
>> Oh it's our time to shine.

93
00:04:42,670 --> 00:04:44,170
>> Oh yeah, yeah look at that.

94
00:04:44,170 --> 00:04:45,430
>> Oh sick burn.

95
00:04:45,430 --> 00:04:47,360
>> Burn wow.

96
00:04:47,360 --> 00:04:48,810
Man it is like.

97
00:04:48,810 --> 00:04:49,390
It is like.

98
00:04:49,390 --> 00:04:50,920
>> No we are on fire today.

99
00:04:50,920 --> 00:04:53,930
>> It is like the 1995 internet all over
again here.

100
00:04:53,930 --> 00:04:58,030
So let's, let's go back to the, to the
article here.

101
00:04:58,030 --> 00:05:03,600
Back, back, back, back, back, and let's
figure out how this was done.

102
00:05:03,600 --> 00:05:08,810
So, there's actually a number of different
techniques that you can use

103
00:05:08,810 --> 00:05:11,030
to make this happen.

104
00:05:11,030 --> 00:05:14,060
And they provide browser support for each
one.

105
00:05:14,060 --> 00:05:15,980
So that's pretty handy.

106
00:05:15,980 --> 00:05:18,560
So the first method, and

107
00:05:18,560 --> 00:05:21,580
the method I showed where you can actually
highlight the text,

108
00:05:21,580 --> 00:05:27,190
at least I'm assuming that's how they did
this, is to use background-clip, text.

109
00:05:27,190 --> 00:05:32,200
Now this is only supported in webkit based
browsers so you have to use the webkit

110
00:05:32,200 --> 00:05:38,180
prefix and of course it's not going to
work in Firefox or Internet Explorer so

111
00:05:38,180 --> 00:05:42,350
this is probably not something that you
could use in production, but.

112
00:05:42,350 --> 00:05:45,160
It is very cool to see what's possible.

113
00:05:45,160 --> 00:05:51,930
So, you would use the background clip text
property and

114
00:05:51,930 --> 00:05:57,560
then you could set it to text here and
then you set the text fill.

115
00:05:57,560 --> 00:06:01,610
Then you get something that looks like
this that's pretty cool.

116
00:06:01,610 --> 00:06:04,500
So, there's more explanation of that
method.

117
00:06:04,500 --> 00:06:06,170
There's also SVG text.

118
00:06:06,170 --> 00:06:12,320
Now, this will work in any browser, so
that's nice, but it is not normal text

119
00:06:12,320 --> 00:06:16,800
like you would expect, so this is a little
>> Or you would text spec.

120
00:06:16,800 --> 00:06:19,886
>> Text spec, that, that's pretty good,
that's pretty good.

121
00:06:19,886 --> 00:06:24,120
[LAUGH] so, you can't actually highlight
this of course.

122
00:06:24,120 --> 00:06:29,530
But it's still a way to get the same
visual effect, at least.

123
00:06:29,530 --> 00:06:32,680
There's a couple more techniques here
>> Or text-niques.

124
00:06:32,680 --> 00:06:37,280
>> Text-niques, wow, you're really
sneaking them in there today.

125
00:06:37,280 --> 00:06:38,000
>> Ooh.
Wow.

126
00:06:40,630 --> 00:06:43,025
There's one more technique here I wanted
to mention here.

127
00:06:43,025 --> 00:06:43,664
>> Text-nique.

128
00:06:45,110 --> 00:06:46,030
Method number three.

129
00:06:46,030 --> 00:06:48,260
SVG mask and SVG clippath.

130
00:06:48,260 --> 00:06:52,628
So that is also supported in pretty much
every modern browser.

131
00:06:52,628 --> 00:06:57,590
So, anyway there's actually more methods
there than the ones that I mentioned,

132
00:06:57,590 --> 00:06:59,430
but definitely be sure to check out this
post.

133
00:06:59,430 --> 00:07:03,610
It's, it's pretty amazing, some of the
effects that you can get.

134
00:07:03,610 --> 00:07:06,980
Definitely would like nice for like, I
don't know, the title of a webpage or

135
00:07:06,980 --> 00:07:08,720
a big header or something like that.

136
00:07:08,720 --> 00:07:10,280
>> Yeah, definitely.

137
00:07:10,280 --> 00:07:13,790
Next up, we have something called HTML5
Pattern.

138
00:07:13,790 --> 00:07:17,820
Now, this lets you, this is a bunch of
example patterns for

139
00:07:17,820 --> 00:07:21,920
the Input element, which is supported in
HTML5.

140
00:07:21,920 --> 00:07:24,360
So here is an example right here,

141
00:07:24,360 --> 00:07:29,550
if we want to just support alpha numeric
values inside of a text field,

142
00:07:29,550 --> 00:07:32,310
and I'm just putting one two three four
and then an at symbol.

143
00:07:32,310 --> 00:07:34,560
I press Enter it says please match the
required format.

144
00:07:34,560 --> 00:07:36,790
Oh, okay, sorry about that, webpage.

145
00:07:36,790 --> 00:07:38,520
Press enter, alright, cool, it works.

146
00:07:38,520 --> 00:07:39,770
Submitted.

147
00:07:39,770 --> 00:07:44,120
Now, if we look here, and do inspect
element.

148
00:07:44,120 --> 00:07:48,900
Check it out down here, it says input,
required pattern.

149
00:07:48,900 --> 00:07:50,860
And here is the pattern,

150
00:07:50,860 --> 00:07:55,620
which is a regular expression and
>> It doesn't look too regular to me.

151
00:07:55,620 --> 00:07:57,870
>> No it is, that is something called a
regular expression.

152
00:07:57,870 --> 00:07:59,480
>> Oh, okay.
>> And that is the normal form of it,

153
00:07:59,480 --> 00:08:01,920
therefore, it is a regular, regular
expression.

154
00:08:01,920 --> 00:08:04,660
>> Hm
>> So lets say we wanna have

155
00:08:04,660 --> 00:08:07,950
a username that supports between two and
20 characters, okay, you want that?

156
00:08:07,950 --> 00:08:10,820
Cool, how about a Twitter username,
alright great.

157
00:08:10,820 --> 00:08:14,580
Between one and 15 characters, maybe they
should make the at symbol

158
00:08:14,580 --> 00:08:18,820
voluntary at jseifer, nope, sorry, just
put my actual twitter name in there.

159
00:08:18,820 --> 00:08:20,390
Go ahead and follow me if you wanna.

160
00:08:21,460 --> 00:08:26,130
It supports dates [LAUGH] a basic date,

161
00:08:26,130 --> 00:08:29,440
full date valificat, validation, leap year
checks.

162
00:08:29,440 --> 00:08:34,150
There are some really compular, I'm sorry,
complicated regular expressions, I don't.

163
00:08:34,150 --> 00:08:35,235
>> Valification and compular.

164
00:08:35,235 --> 00:08:37,890
>> [LAUGH] I'm just combining words today.

165
00:08:37,890 --> 00:08:39,900
>> All right.
>> Trying to save some time.

166
00:08:39,900 --> 00:08:41,760
And here is a time validation.

167
00:08:41,760 --> 00:08:44,300
Anyway, if you need to support some

168
00:08:44,300 --> 00:08:48,210
regular expression patterns in your
inputs, go ahead and check this out.

169
00:08:48,210 --> 00:08:53,080
>> Very nice stuff, well next up is bass,
base CSS.

170
00:08:53,080 --> 00:08:55,330
>> Now Nick was, is a talking to me about
this before.

171
00:08:55,330 --> 00:08:57,676
He said he was all about it.

172
00:08:57,676 --> 00:09:00,328
>> All about that base CSS.

173
00:09:00,328 --> 00:09:00,842
>> Yep.

174
00:09:00,842 --> 00:09:04,280
So this is low level CSS.

175
00:09:04,280 --> 00:09:05,725
Oh, okay so I I get it.

176
00:09:05,725 --> 00:09:07,810
Low-level Bass.

177
00:09:07,810 --> 00:09:08,540
Yeah.
>> Yeah.

178
00:09:08,540 --> 00:09:11,660
>> So this is a, this is a low level
>> Wait, maybe this is bass.

179
00:09:11,660 --> 00:09:14,312
Eh, for being at like the low level of the
water.

180
00:09:14,312 --> 00:09:15,560
>> Oh below sea-level?

181
00:09:15,560 --> 00:09:16,350
>> Yeah.
>> Yeah, yeah, yeah.

182
00:09:16,350 --> 00:09:17,250
Okay.

183
00:09:17,250 --> 00:09:18,190
Both makes sense.

184
00:09:18,190 --> 00:09:20,310
So, use your imagination, whatever you
want.

185
00:09:20,310 --> 00:09:24,700
It's low level CSS, and it's basically a
CSS framework,

186
00:09:24,700 --> 00:09:29,890
so not to dissimilar from Semantic UI,
like where we were looking at previously.

187
00:09:29,890 --> 00:09:34,478
Or something like foundation or Boot
Strap, the difference here with this one,

188
00:09:34,478 --> 00:09:36,384
is that it's very lightweight.

189
00:09:36,384 --> 00:09:41,740
So, it's only 4.27 kilobytes, and

190
00:09:41,740 --> 00:09:47,780
they show how many modules rules, and CSS
declarations are actually in there.

191
00:09:47,780 --> 00:09:50,630
So you can click through here and look at
the buttons.

192
00:09:50,630 --> 00:09:55,640
So there's some pretty normal plain
looking buttons and

193
00:09:55,640 --> 00:10:00,370
tables that are just basically nicer than
the default styling that

194
00:10:00,370 --> 00:10:05,040
the browser typically provides, so let's
see if we can look at a few others here.

195
00:10:05,040 --> 00:10:10,190
There is a grid system, so just like you
would expect in

196
00:10:10,190 --> 00:10:16,130
any modern CSS framework you have, columns
and of course it is all responsive.

197
00:10:16,130 --> 00:10:19,190
Let's look at like borders here.

198
00:10:19,190 --> 00:10:22,610
There's colors, all sorts of nice stuff.

199
00:10:22,610 --> 00:10:23,550
Anyway, you get the idea.

200
00:10:23,550 --> 00:10:29,270
So this is, this is a very light weight
CSS framework and

201
00:10:29,270 --> 00:10:32,870
I like this because this can be good for
something like prototyping.

202
00:10:32,870 --> 00:10:38,570
So if you're just putting together some
HTML content really quickly and you don't

203
00:10:38,570 --> 00:10:43,840
necessarily want to worry too much about
the specific styling things just yet.

204
00:10:43,840 --> 00:10:46,590
This is good to just include and kind of
make it look

205
00:10:46,590 --> 00:10:50,310
nicer than the default styles, just so you
can get an idea of where you're going.

206
00:10:50,310 --> 00:10:51,330
Any way, really cool stuff.

207
00:10:51,330 --> 00:10:53,490
Definitely be sure to check this one out.

208
00:10:53,490 --> 00:10:56,660
>> Yeah, it's like a, it's a nice, like a
nice base coat for your website.

209
00:10:56,660 --> 00:10:57,180
>> Yeah.
So

210
00:10:58,370 --> 00:10:59,720
that's about all we have time for today.

211
00:10:59,720 --> 00:11:01,265
Nick, who are you on Twitter?

212
00:11:01,265 --> 00:11:02,038
>> I am @nickrp.

213
00:11:02,038 --> 00:11:03,080
>> And I am @jseifer.

214
00:11:03,080 --> 00:11:05,990
For information on anything we talked
about check out the show notes right

215
00:11:05,990 --> 00:11:06,850
below this video.

216
00:11:06,850 --> 00:11:10,671
Thank you everybody for watching and we'll
see you next week.

217
00:11:10,671 --> 00:11:19,753
[MUSIC]

218
00:11:19,753 --> 00:11:20,299
[BLANK_AUDIO]