Episode 143: Data Binding, Nesting, Image Zooms

Im Nick Pettit. 0:00 >> I'm Jason Seifer >> And you're watching the Treehouse Show, 0:00 your weekly dose of internet where we talk about all things web design, 0:03 web development, and more. 0:06 >> In this episode we'll be talking about data binding, nesting components, 0:07 image zooms, and more. 0:11 >> Let's check it out! 0:13 [MUSIC] 0:14 First up is this really cool website where you can test 0:19 any website for low vision conditions. 0:24 So this can help you with accessibility testing. 0:27 So here I've just typed in a Wikipedia article on dandelions. 0:32 It has this scientific name I'm not going to attempt to pronounce. 0:37 But you can go up here and pick a low vision condition, so 0:41 I'm going to pick cataracts here. 0:46 And this is just, of course, a simulation, but 0:48 it can give you some sense of what people with these different low 0:52 vision conditions might see when they come to your website. 0:57 So this site looks a lot blurrier here, obviously, 1:00 so things like this text might be a little bit more difficult to read. 1:05 So if you know that your audience does consist of a lot of people that might 1:10 have some of these conditions, you may want to try to optimize for some of them. 1:16 For example, this text is a little bit more legible. 1:21 It would probably need to be larger and 1:24 a bit more spaced out and so on, but you get the idea. 1:26 Let's pick some of these other ones. 1:30 So, these are different color blindness conditions. 1:34 So, if you look over here at the picture of this dandelion here 1:36 you'll see what that looks like, and 1:41 of course there is monochromacy which is completely grayscale. 1:44 And I assume, actually, these are using CSS Filters. 1:49 I didn't look into it but I think that's probably what's going on here. 1:53 It's a pretty clever usage of CSS filters for testing access ability. 1:56 I thought this was pretty neat. 2:02 >> Yeah, low vision's important. 2:03 Nick, I just want to say, I don't say it enough, but you are a vision. 2:05 >> You're a vision. 2:08 >> Thank you. 2:09 Next up, we have a plug in called jquery.my and 2:10 this is building support for two way data binding in jQuery. 2:15 So, what does that mean? 2:20 You might be used to seeing data binding in frameworks like Angular and Ember and 2:21 React]. 2:26 Well, this brings all of that over to jQuery. 2:27 So, the example that is on the page right here, 2:31 there is this form, it's got two inputs, one for name and one for age. 2:34 And then there is a JSON object, which is the data. 2:38 And then you call this my function, 2:42 pass it a UI, and what it binds to in the data, 2:46 as well as the data object, and then you get this little form right here. 2:51 And you'll see it says drag me, and watch, as I drag this, you'll see in the middle 2:56 column the age updates in real time as the slider is dragged. 3:01 Now, this is all the code that you need to get that done. 3:06 So, we can start editing the name here if we wanna make it pluralized. 3:10 And you can see this all updates in the data attribute right here. 3:15 Now, there are a ton of different demos on the the site right here. 3:20 And this is going to work with almost every Jquery UI plugin that there is. 3:24 So here we see sorting and filtering, 3:29 we've got this age being updated to filter this little chart right here. 3:32 It also works on maps. 3:38 Here's an example with a map. 3:40 And you'll notice this has a zoom of 2.5x and 5x and then it shows you 3:41 the data over on the right here, so we can see if we're going slow. 3:46 That zoom level changes in the data attribute. 3:51 Now another thing right here, this Bezier curve example was built entirely jQuery, 3:55 and you can see, once again, as I drag this all around using the drag and 4:01 drop and adjust these sliders, everything automatically changes in real time. 4:05 You can look at the code and see exactly what went into it, 4:09 or, you can go through and check out the API. 4:13 Now, this is a relatively complicated API, but 4:17 they do their best to simplify it down. 4:21 So, everything works on objects but there is the ability to nest forms. 4:23 But at the heart it's actually very, very easy to use so 4:29 we just give it some data and then it all works by something called a manifest. 4:32 Specify the data, initialization, and UI bindings then just call that, and 4:37 you are good to go. 4:41 Now, I'm not gonna get into the entire API on the show, but definitely check this out 4:42 if you're primarily using jQuery on your projects and 4:47 you wanted to get more into data binding, and maybe didn't wanna check out 4:50 a full framework like Angular, Ember, Reactor, something like that. 4:54 >> Very cool stuff. 4:58 Well, next up is this really cool blog post on nesting CSS components. 4:59 >> The CSS components they just settled into a house, and 5:04 they want to decorate, really make it their own. 5:08 That's what this is talking about, right? 5:11 >> It's a bit of a stretch. 5:13 >> Nesting. 5:14 >> Okay, we'll go with that. 5:15 So, this article points out three different ways that you can nest 5:18 CSS components. 5:23 So what does that mean? 5:24 Well let's just go down to the example here. 5:25 Let's say that we have this header and we also have a button. 5:30 And we want the button to be a certain size on its own, but 5:36 when we put it inside of a header we actually want maybe a smaller button. 5:41 So, how do you do that? 5:47 Well, there's a couple of different ways that you could create these nested 5:49 components, so. 5:56 >> Easy, we just give it an ID and 5:57 apply all the formatting right on the ID no matter where it is. 5:58 >> That is, terrible advice. 6:01 So here is the first option, Descendant selector. 6:04 So you have a selector that looks like this, 6:07 you say well normally we have this button class but, then we're also 6:09 going to have this descendant selector where we have the header class, 6:14 then the button class, and then we sort of reset the font size. 6:18 Well, that's okay. 6:22 The problem is, where do we put a component like that? 6:24 Does that go in our header CSS or in this case SCSS file? 6:29 Or does it go in the button file? 6:34 And it's kinda hard to split 6:37 these components up when you're using the sentence selectors. 6:40 And it may not sound like a big deal but it can be in a pretty large project, 6:43 such as an e-commerce site where multiple people are working on the CSS. 6:48 You really have to have standards for this kind of stuff, or 6:52 it can get out of hand very quickly. 6:55 >> I think that's what's important to note about this is it's for 6:57 larger sites with a lot of people working on it. 7:00 If you're just doing a small one page site like, yeah, throw the CSS everywhere. 7:02 Who cares? >> Whatever, right? 7:06 >> You only have yourself to hate later on. 7:07 No, this is for standards and larger organizations. 7:09 >> Exactly. 7:12 So, option 2 is variations, right? 7:13 So, let's say we have this class button's small and then we do something like this. 7:16 We say, well, we're going to have a header and then we have this button and 7:22 then we're also going to have this button small class which is slightly more of 7:26 a specific selector and it will change the font size to something like this. 7:31 But the problem with that is, what happens when you want, 7:37 say a font size that's slightly different or slightly smaller? 7:40 Do you create another variation of button? 7:43 >> You create a whole new website. 7:46 >> Just a little bit smaller? 7:48 No, neither one of those things. 7:50 Because that can start to get pretty out of hand because you can really start to 7:53 lose track of where all of these different variations are used. 7:57 And you might start to look at a CSS file that has a ton of different variations and 8:02 if you're trying to clean it up you might look at that and 8:07 think, well, which one of these are used where? 8:10 Is just a little smaller actually just a little smaller than button small? 8:13 It can be hard to tell. 8:19 Option three is what's called Adopted Child, and this is an interesting 8:21 technique where you have, say, this header class and then header item. 8:26 And if we scroll down a little further here, we have something 8:33 actually that looks like this, so you have header item plus the button class. 8:37 So, you have the button class just like you normally would, so 8:42 there's the font size. 8:44 Of 1 em, and that would go in your button file. 8:46 But then you might have something like this in 8:52 your header.css file where it says header, header item, and 8:56 it adjusts the font size here for anything that is inside the header. 9:01 And the reason this works is because of selector specificity. 9:05 This is a slightly more specific selector than this button class, 9:10 so it's going to get overridden and it will actually apply this font size. 9:16 And that's a great way to sort of 9:21 break up all of these different styles and group them appropriately. 9:25 >> Nick, if you're going with the adopted child approach, 9:29 when do you think is the right time to tell these DOM elements? 9:33 >> I am not really sure I can answer that, Jason. 9:37 I have no idea. 9:40 >> I just think you really need to put some thought into that before you. 9:43 >> It's true, before you just, you know, go adopting child elements. 9:46 There's a couple more options listed here, but 9:50 I will let you check those out on your own. 9:53 >> Next up we have a very quick plug in called zoom.js. 9:58 This is from one of the authors of Twitter bootstrap and 10:02 implements mediums image zoom for jQuery. 10:05 Now, if you have never seen image zooming on the website medium, 10:08 there is a demo right here. 10:12 So look at this, we've got this image in the page and 10:14 when I click it, whoa, here we are. 10:17 Oh, wow, it's in zoom. 10:19 Wow. A webpage, 10:21 roller coaster, I don't know I lost track. 10:22 Here's another one. 10:25 Whoa! 10:25 Are we actually at the beach in black and 10:26 white in front of these palm trees like a painful childhood memory? 10:29 No, It's just a webpage. 10:32 So this is really easy to use, you just throw in the CSS and 10:34 JavaScript on your page. 10:37 You also need to make sure that you have the bootstrap transition file, JavaScript, 10:39 and then just add data-action"zoom" on your images and you are good to go. 10:44 So, this should be good to go in all relevant browsers, 10:49 which I believe includes IE8 and up. 10:53 Very easy to use. 10:56 If you want to just check it out in show notes. 10:56 >> Thanks for zooming through that, Jason >> No problem. 10:58 >> Last up is Flickity. 11:02 This is touch, responsive, flickable galleries. 11:04 So we've all seen this before, the little dots at the bottom and arrows and 11:08 you can kinda go through this slider, or carouse,l or gallery. 11:12 There's many names for this particular design pattern. 11:16 But, I can also click with my mouse and drag just like that. 11:19 I think actually I have to release there, there we go. 11:25 And I can just flick right through these, and 11:28 of course, it is also touch supported, so this will work on mobile. 11:31 And, you can swipe just like I'm doing here with the mouse. 11:36 So, that's pretty neat and it's pretty simple and straight-forward. 11:40 You just have this CSS file and this JavaScript file, and 11:45 you just have to include those into your web page and 11:49 then add js-flickity class to the gallery elements. 11:52 So you have some HTML that looks like this and then you are good to go, that's it. 11:58 So, that is all we have time for this week. 12:06 I am @nickrp on twitter. 12:09 >> I am @jseifer. 12:10 For more information on anything we talked about check out the links in 12:12 the show notes right below this video. 12:15 Thanks everybody for watching, and we will see you next week. 12:16 [MUSIC] 12:19

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

Sign up