You've already started watching Episode 138: Semantic UI, Polyfills, HTML 5 Patterns
Welcome to The Treehouse Show, your weekly dose of Internets. Join Nick Pettit (@nickrp) and Jason Seifer (@jseifer) as they talk about the latest in web design, web development, and more!
-
0:00
I'm Nick Pettit.
-
0:00
>> I'm Jason Seifer.
-
0:01
>> And you're watching the Treehouse Show.
-
0:03
Your weekly dose of internets where talk about all things web design,
-
0:06
web development and more.
-
0:07
>> In this episode we'll be talking about CSS frameworks, polyfills,
-
0:11
html five patterns and more.
-
0:13
>> Let's check it out.
-
0:14
[MUSIC]
-
0:19
First up is Semantic UI this is user interface is the language of the web.
-
0:27
That's not really a complete sentence, at least what I said that is.
-
0:30
But no this is a CSS framework so let's take
-
0:35
a look here and, I could just click on each one of these individually, but let's
-
0:40
just click on All UI, that's way more >> We should make a CSS, Nick, and
-
0:44
then we could finally put U and I together.
-
0:46
>> [BLANK_AUDIO]
-
0:50
That was actually very nice, Jason, heh, I'm proud of you.
-
0:52
>> I know it would be nice to get some reciprocation once in a while.
-
0:58
>> So here is All UI, examples of all user-face interface elements.
-
1:03
And here we have some buttons.
-
1:06
So, these are pretty nice looking.
-
1:08
Looks fairly similar to something like Bootstrap, for example.
-
1:12
I do like the this cancel or save button, that's pretty neat.
-
1:17
>> What happens when you hit the or?
-
1:20
Nothing. >> Nothing.
-
1:21
>> Now that's good UI.
-
1:23
>> Wow. >> Or UX.
-
1:24
Is that UI or UX?
-
1:25
>> Actually have, I think, I think they have this element right over top of it.
-
1:31
The, the hover stay is actually pretty impressive here.
-
1:34
Anyway, moving on, they have these nice dividers here.
-
1:38
So that's pretty cool, if you need to split up some sections or
-
1:43
some buttons on website.
-
1:45
All sorts of little flag icons, that's nice.
-
1:48
Here's their different headers styles and their difference sub-headers.
-
1:53
They also have tons of other icons besides the country flags,
-
1:58
so that is always useful.
-
2:01
And then they have a couple of more things like input, really nice labels.
-
2:07
Anyway, you get the idea.
-
2:08
This is a pretty robust CSS framework.
-
2:11
They have lots of different components in here.
-
2:13
So definitely be sure to check this one out, I think it's pretty nice looking.
-
2:16
>> Yeah that's very cool.
-
2:18
Next up we have something called Fetch, which is a polyfill for window.fetch.
-
2:24
Now window.fetch is an ECMAScript six specification and
-
2:30
it also supports Promises.
-
2:32
Now what this is going to do is replace the XML http request functionality and
-
2:38
replace it with one function called Fetch.
-
2:41
>> It'd be nice if you would support some promises every now and then.
-
2:45
>> 'Kay.
-
2:45
I try.
-
2:46
It's just, you know, really hard to get a hold of you sometimes.
-
2:48
So, this is easily installed with Bower, just do Bower install fetch.
-
2:54
Now if you are using an older browther, browser
-
2:57
you need to install the ES6 Promise Library and then you are good to go.
-
3:02
So how do you use this.
-
3:03
It's very easy, you just call the fetch function, then give it a URL or path.
-
3:09
Then, using a Promise, call .then.
-
3:11
And then you get a response object.
-
3:13
You can just return the text of that, pass it to another Promise and
-
3:17
then do anything inside of that function.
-
3:20
Now this works with HTML as well as JSON and
-
3:24
you'll notice that they are chaining promises here.
-
3:27
Also you can check out response meta-data from headers or the status or
-
3:31
the status text.
-
3:33
You can do post with html or JSON and even upload files.
-
3:39
Now you can also do a little bit more, they have some more error handlers and
-
3:44
success handlers if you wanna get into that.
-
3:46
Check out a link in the show notes,
-
3:47
you can find a link to this project right below this video.
-
3:49
>> All right nice, well next up is a really cool post over on the Codrops
-
3:54
blog about how to create animated text fills.
-
3:59
Now this is really cool.
-
4:01
Let's look at this demo here.
-
4:03
Whoa! >> Whoa!
-
4:04
>> What is happening?
-
4:05
>> What? I know are we in a code machine?
-
4:06
>> Is this, is this animated border something or
-
4:11
is this like >> Wow.
-
4:12
>> This is, this is amazing.
-
4:14
>> What? >> Look at that.
-
4:14
You can fill in.
-
4:15
>> Is the Treehouse show or a a big budget Hollywood movie?
-
4:19
>> So you could fill in the text with whatever you want and
-
4:22
this is actually real text on this page.
-
4:24
I can actually highlight this.
-
4:26
>> Real text?
-
4:26
>> So that's pretty amazing.
-
4:28
Yea this isn't like a a svg or something like that or an image.
-
4:33
>> So there's a bunch of other examples here.
-
4:35
You can create some pretty different looking types of effects with.
-
4:41
>> Oh it's our time to shine.
-
4:42
>> Oh yeah, yeah look at that.
-
4:44
>> Oh sick burn.
-
4:45
>> Burn wow.
-
4:47
Man it is like.
-
4:48
It is like.
-
4:49
>> No we are on fire today.
-
4:50
>> It is like the 1995 internet all over again here.
-
4:53
So let's, let's go back to the, to the article here.
-
4:58
Back, back, back, back, back, and let's figure out how this was done.
-
5:03
So, there's actually a number of different techniques that you can use
-
5:08
to make this happen.
-
5:11
And they provide browser support for each one.
-
5:14
So that's pretty handy.
-
5:15
So the first method, and
-
5:18
the method I showed where you can actually highlight the text,
-
5:21
at least I'm assuming that's how they did this, is to use background-clip, text.
-
5:27
Now this is only supported in webkit based browsers so you have to use the webkit
-
5:32
prefix and of course it's not going to work in Firefox or Internet Explorer so
-
5:38
this is probably not something that you could use in production, but.
-
5:42
It is very cool to see what's possible.
-
5:45
So, you would use the background clip text property and
-
5:51
then you could set it to text here and then you set the text fill.
-
5:57
Then you get something that looks like this that's pretty cool.
-
6:01
So, there's more explanation of that method.
-
6:04
There's also SVG text.
-
6:06
Now, this will work in any browser, so that's nice, but it is not normal text
-
6:12
like you would expect, so this is a little >> Or you would text spec.
-
6:16
>> Text spec, that, that's pretty good, that's pretty good.
-
6:19
[LAUGH] so, you can't actually highlight this of course.
-
6:24
But it's still a way to get the same visual effect, at least.
-
6:29
There's a couple more techniques here >> Or text-niques.
-
6:32
>> Text-niques, wow, you're really sneaking them in there today.
-
6:37
>> Ooh. Wow.
-
6:40
There's one more technique here I wanted to mention here.
-
6:43
>> Text-nique.
-
6:45
Method number three.
-
6:46
SVG mask and SVG clippath.
-
6:48
So that is also supported in pretty much every modern browser.
-
6:52
So, anyway there's actually more methods there than the ones that I mentioned,
-
6:57
but definitely be sure to check out this post.
-
6:59
It's, it's pretty amazing, some of the effects that you can get.
-
7:03
Definitely would like nice for like, I don't know, the title of a webpage or
-
7:06
a big header or something like that.
-
7:08
>> Yeah, definitely.
-
7:10
Next up, we have something called HTML5 Pattern.
-
7:13
Now, this lets you, this is a bunch of example patterns for
-
7:17
the Input element, which is supported in HTML5.
-
7:21
So here is an example right here,
-
7:24
if we want to just support alpha numeric values inside of a text field,
-
7:29
and I'm just putting one two three four and then an at symbol.
-
7:32
I press Enter it says please match the required format.
-
7:34
Oh, okay, sorry about that, webpage.
-
7:36
Press enter, alright, cool, it works.
-
7:38
Submitted.
-
7:39
Now, if we look here, and do inspect element.
-
7:44
Check it out down here, it says input, required pattern.
-
7:48
And here is the pattern,
-
7:50
which is a regular expression and >> It doesn't look too regular to me.
-
7:55
>> No it is, that is something called a regular expression.
-
7:57
>> Oh, okay. >> And that is the normal form of it,
-
7:59
therefore, it is a regular, regular expression.
-
8:01
>> Hm >> So lets say we wanna have
-
8:04
a username that supports between two and 20 characters, okay, you want that?
-
8:07
Cool, how about a Twitter username, alright great.
-
8:10
Between one and 15 characters, maybe they should make the at symbol
-
8:14
voluntary at jseifer, nope, sorry, just put my actual twitter name in there.
-
8:18
Go ahead and follow me if you wanna.
-
8:21
It supports dates [LAUGH] a basic date,
-
8:26
full date valificat, validation, leap year checks.
-
8:29
There are some really compular, I'm sorry, complicated regular expressions, I don't.
-
8:34
>> Valification and compular.
-
8:35
>> [LAUGH] I'm just combining words today.
-
8:37
>> All right. >> Trying to save some time.
-
8:39
And here is a time validation.
-
8:41
Anyway, if you need to support some
-
8:44
regular expression patterns in your inputs, go ahead and check this out.
-
8:48
>> Very nice stuff, well next up is bass, base CSS.
-
8:53
>> Now Nick was, is a talking to me about this before.
-
8:55
He said he was all about it.
-
8:57
>> All about that base CSS.
-
9:00
>> Yep.
-
9:00
So this is low level CSS.
-
9:04
Oh, okay so I I get it.
-
9:05
Low-level Bass.
-
9:07
Yeah. >> Yeah.
-
9:08
>> So this is a, this is a low level >> Wait, maybe this is bass.
-
9:11
Eh, for being at like the low level of the water.
-
9:14
>> Oh below sea-level?
-
9:15
>> Yeah. >> Yeah, yeah, yeah.
-
9:16
Okay.
-
9:17
Both makes sense.
-
9:18
So, use your imagination, whatever you want.
-
9:20
It's low level CSS, and it's basically a CSS framework,
-
9:24
so not to dissimilar from Semantic UI, like where we were looking at previously.
-
9:29
Or something like foundation or Boot Strap, the difference here with this one,
-
9:34
is that it's very lightweight.
-
9:36
So, it's only 4.27 kilobytes, and
-
9:41
they show how many modules rules, and CSS declarations are actually in there.
-
9:47
So you can click through here and look at the buttons.
-
9:50
So there's some pretty normal plain looking buttons and
-
9:55
tables that are just basically nicer than the default styling that
-
10:00
the browser typically provides, so let's see if we can look at a few others here.
-
10:05
There is a grid system, so just like you would expect in
-
10:10
any modern CSS framework you have, columns and of course it is all responsive.
-
10:16
Let's look at like borders here.
-
10:19
There's colors, all sorts of nice stuff.
-
10:22
Anyway, you get the idea.
-
10:23
So this is, this is a very light weight CSS framework and
-
10:29
I like this because this can be good for something like prototyping.
-
10:32
So if you're just putting together some HTML content really quickly and you don't
-
10:38
necessarily want to worry too much about the specific styling things just yet.
-
10:43
This is good to just include and kind of make it look
-
10:46
nicer than the default styles, just so you can get an idea of where you're going.
-
10:50
Any way, really cool stuff.
-
10:51
Definitely be sure to check this one out.
-
10:53
>> Yeah, it's like a, it's a nice, like a nice base coat for your website.
-
10:56
>> Yeah. So
-
10:58
that's about all we have time for today.
-
10:59
Nick, who are you on Twitter?
-
11:01
>> I am @nickrp.
-
11:02
>> And I am @jseifer.
-
11:03
For information on anything we talked about check out the show notes right
-
11:05
below this video.
-
11:06
Thank you everybody for watching and we'll see you next week.
-
11:10
[MUSIC]
-
11:19
[BLANK_AUDIO]
You need to sign up for Treehouse in order to download course files.
Sign up