Episode 135: BEM, jQuery Plugins, Web Fonts

I'm Nick Pettit >> I'm Jason Seifer 0:00 >> And you're watching 0:01 the tree house show. 0:02 Your weekly dose of Internets. 0:03 Where we talk about all things web design, web development and more. 0:04 >> In this episode we'll be talking about CSS naming conventions, 0:07 jQuery plugins, fonts and more. 0:11 >> Let's check it out. 0:13 [MUSIC] 0:14 First up is this really cool article over on the CSS Tricks blog called BEM 101. 0:19 Now what is BEM? 0:26 Well, it is an acronym that stands for 0:28 >> Be >> Block. 0:30 >> Everything, Man. 0:31 >> Block Element Modifier. 0:33 >> I was close. 0:36 >> Actually, it's not an acronym, it's an initialism. 0:37 Excuse me. 0:40 >> What? >> There is a difference between the two. 0:41 An acronym is something you can pronounce, like SCUBA or RADAR. 0:43 >> You can pronounce B-E-M. 0:48 >> Bem? 0:50 >> Bem. 0:50 >> Okay, sure, it could be an acronym I guess. 0:51 >> Bem. Lawyered. 0:53 Anywho, the Block Element Modifier 0:54 methodology is a way for naming your classes in HTML and CSS just so 0:59 it's a little bit easier, actually a lot easier in some cases to understand them. 1:05 So when you're naming a new top level component, or 1:11 a block component, you would just name the class as you normally would. 1:15 So here's a nice little button. 1:19 And next, we have an element that depends upon that block. 1:22 So in this case, you would use two underscores. 1:28 So, this might be an element that is a child 1:31 of this block component and we'll look at that in HTML in just a moment. 1:35 And then, you have this third type which is a modifier and 1:40 that changes the style of the block. 1:44 So let's say, you have this button class. 1:47 And you maybe want the button to be orange, or 1:50 you want the button to be larger than some of the other buttons. 1:53 So, you have these classes here that modify the base component or 1:56 the block component. 2:01 So, if we scroll down here, we can see this HTML example. 2:04 Of what that might look like. 2:09 So we have this button component, and then we have these two modifiers, 2:11 and then we have these two child elements. 2:17 And using this class naming methodology, 2:20 it's really easy to understand how all these classes relate to one another. 2:24 So if you use this in your CSS and lots of other front-end developers and 2:28 designers start to use it as well, 2:33 it will start to get a little bit easier to understand how things are put together. 2:35 So you can just immediately jump into their HTML or 2:40 their CSS and understand what you can take out and 2:43 what is really an essential component there that you need. 2:47 So, pretty cool stuff. 2:51 Very cool idea. 2:52 I like that a lot >> Yeah, I dig it. 2:53 I don't have any puns for it but still, good project. 2:55 Next up, we have a project called Selectivity.js. 2:58 This is a modular and light weight selection library for jQuery and Zepto.js. 3:02 I know that because it says it in the header of the page. 3:08 >> You're pretty clever. 3:11 >> Was that? 3:14 >> No that, that wasn't a pun. 3:15 >> That wasn't supposed to be a pun? 3:16 >> No. That was literally just commentary. 3:16 >> Oh. 3:20 >> On your commentary. 3:21 >> Gotcha! I thought, thought we were doing puns. 3:22 >> Nope. >> All right, so here's some examples 3:25 of this, this selectivity library. 3:27 Here is a, what would normally be a select dropdown, but this is styled. 3:29 Oh, look at that! 3:34 So you can scroll down here, you can start typing things in. 3:35 So if we wanna filter by things just with the letter, letters H and A, boom. 3:39 Okay, we've got something selected. 3:43 Oh, you don't want that? 3:45 Click the X. 3:45 All right. No, now we have nothing selected. 3:46 If we wanted to select multiple cities, we can do that too. 3:49 So here we've got one and then it comes up into a little tag and 3:53 we can delete those then you can also filter. 3:56 So here we have filtering by country. 4:00 And you can see here, this is the code that makes the selection happen. 4:03 And then you can give it text, which is going to be a header and 4:08 then different children. 4:12 And these are jQuery arrays. 4:13 I'm sorry, these are JavaScript arrays, and this is a jQuery plugin. 4:16 So here is the API. 4:20 It is very simple to use. 4:21 You can load things via AJAX. 4:23 And then you can give it data. 4:26 This is the initial selection data to set. 4:28 You can also call .data and get the current data back. 4:31 You can give it an array of items. 4:35 Tons of different options here. 4:37 Now this plugin is very, very easy to use and 4:39 something that's interesting about it is, since it works with jQuery or Zepto, and 4:43 it does not depend on the Sizzle library. 4:47 It is a very small, very self contained library. 4:49 So if this is really all you need, just a little bit of selection on the page, 4:52 maybe save your mobile users some bandwidth and make it load quicker. 4:55 Anyway, you can find the link to that in the show notes, right below this video. 4:59 >> Very cool stuff. 5:02 Well, next up is this wonderful prism effect over on the Codrops Blog. 5:03 >> You ever been to prison? 5:07 >> I can't say that I have. 5:10 Sounds like you have some experience with that, though. 5:12 So I'm gonna go ahead and click on this demo, and let's get rid of this ad here. 5:14 Just so you can see what's going on, and I'm going to click on these, and woah! 5:21 >> What! >> Look at that. 5:25 >> Wow. 5:26 >> What is happening? 5:27 >> I have no idea, it's like we're seeing this through a, through a diamond. 5:29 >> We are truly through the looking glass here, folks. 5:32 So I'm gonna click on this one, and look at that. 5:35 Pretty cool. 5:38 And let's look at this impossible cube. 5:39 Seems kinda possible when you're looking at it that way. 5:42 >> Yeah, I mean I'm looking at it right here. 5:44 It says impossible and yet, here we are. 5:46 >> Yes, here it is, on this webpage. 5:48 >> So, how is this being put together? 5:51 Well, you can read all about that in this article here, but 5:54 I'll give you a brief summary. 5:59 Basically, what is happening is it's using SVG masks and 6:01 a couple of different canvases. 6:06 So we're actually looking at, 6:08 I think four different canvases here in this particular example. 6:11 I have to look at the Chrome Dev Tools again, but 6:15 basically each one of those canvases is being masked using an SVG. 6:18 So, there's four different canvases all sandwiched on top of one another here and 6:24 then each one of those is only being shown in part by this mask here. 6:29 So if you kind of look, I think this part of the image and 6:37 this part is actually the same maybe. 6:41 No that's not quite right. 6:44 But then through a couple of rotations and stuff, you get this effect that actually 6:46 looks like a refraction of light coming through one of these transparent objects. 6:50 So, pretty clever idea. 6:56 It's actually not as complicated as it sounds or 6:59 as complicated as it looks but it is a very nice effect. 7:02 And to read more about that, you can check it out in the show notes. 7:07 >> Next up, we have a plug-in called X-editable. 7:11 This is a jQuery and Bootstrap plug-in. 7:15 It works with Bootstrap, jQuery UI, or just jQuery. 7:19 And this is for in-place editing of different elements on your page. 7:22 So that sounds great, why don't we just look at a demo of it? 7:27 Here we have the bootstrap three form styling. 7:30 And if we look at a simple text field right here, you can see it's underlined, 7:34 and this kind of gives you a hint that you can click on it and edit it. 7:38 So if I click on superuser, I now have the name editable, 7:41 kinda pops up here and I can change it. 7:46 So now I change it to superuser Nick, gives it a little highlight, and 7:48 it is different on the page. 7:53 Whoa! 7:55 Now, this is an example of an empty text field. 7:56 Hey, it's required. 7:59 All right, I'll just enter some text there. 8:00 Now, what's nice about this is that there are different option types here. 8:01 So you can do dropdowns, you can do a remote array, 8:06 so this is fetching from an AJAX request here. 8:11 And then there are date pickers, time pickers, pretty much anything you need. 8:16 So here's the little time picker. 8:21 Okay, great. And 8:22 not gonna enter the whole thing right now but there's even an option for 8:23 type ahead, so if we start, start typing F here, it preloads Florida. 8:29 Lot of different options here depending on your needs. 8:35 So if we look at the documentation here, it's very, very easy to use. 8:38 Just make sure that you have either a bootstrap or a jQuery in here and 8:41 then throw in the bootstrap editable CSS and 8:46 JavaScript file and you are good to go. 8:50 Then you just mark up your elements. 8:54 Give it a data type data primary key. 8:55 This is gonna be the ID on the server as well as a URL. 8:59 And then you are good to go. 9:04 You just need those few different attributes and boom, 9:06 you are pretty much done. 9:09 Gives it the URL. 9:10 Do the post back for you. 9:11 And there are, of course, a ton of different options. 9:14 You have control over what is displayed, what's editable, what's what 9:16 if something is empty, ways to handle errors, just tons of different options. 9:21 Which, you can cruise at your leisure if you check this out in the show notes. 9:26 >> Very cool stuff. 9:29 Well, speaking of pickers, I have hand-picked type from Google Fonts. 9:30 Now, Google Fonts has over 650 fonts available for 9:37 free and you can use them on your webpage, if you 9:42 haven't checked out Google Fonts yet, definitely be sure to head over there. 9:46 It's pretty amazing. 9:50 But it can be difficult to discover and 9:52 navigate all of the fonts that they have available, so. 9:55 This site just sort of curated some of them and 9:59 put them together in nice combinations. 10:02 So, you can scroll down here and, whoa! 10:04 I feel like I'm on a different website already. 10:07 And here's the two fonts that they used in this particular example. 10:10 So that looks pretty nice. 10:15 You can scroll down. 10:17 Do a couple more here and see a few more examples. 10:18 Oh, I like that. 10:22 The Astronomer, that's pretty cool. 10:23 >> Hey are we, are we in space? 10:24 >> And there's the two fonts that they used for that one, and 10:26 I think you get the idea. 10:30 But they have some really nice examples here. 10:32 And like I said, there's a ton of fonts available on Google Fonts, and it can be 10:36 pretty difficult to navigate them all and figure out what all is available. 10:40 So, it's nice that they have put them together here in a nice curated list. 10:45 >> Yeah, you know, if you, you know, if you like them, great, use them. 10:49 If not, you know, maybe that's not your type. 10:52 Move on to a different font. 10:54 >> Don't. We don't care. 10:56 You know, we're not here to judge, you know. 10:57 Don't use them. 10:58 >> Yeah. >> Or do. 10:59 >> Whatever. 11:00 >> Or don't. >> We're not the boss of you. 11:01 >> That's all we have time for this week. 11:03 I am @nickrp on Twitter. 11:04 >> And I am @jseifer. 11:06 For more on information on anything we talked about. 11:07 Check out the show notes right below this video. 11:08 Thank you so much for watching, and we will see you next week. 11:10 [MUSIC] 11:13

You need to sign up for Treehouse in order to set up Workspace

Sign up