Episode 138: Semantic UI, Polyfills, HTML 5 Patterns

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