Episode 97: Data-binding Techniques, CSS Techniques, Zepto.js

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly does of Internet 0:02 where we talk about all things web design, web development, and more. 0:05 >> For a free month of 0:08 Treehouse, make sure to check out: www.teamTreehouse.com/show. 0:09 In this episode, we'll be talking about 0:13 Data-binding techniques, CSS techniques, zepto.js and more. 0:15 >> Let's check it out. 0:21 [MUSIC] 0:22 >> First up, over on the HTML 5 Rocks blog, 0:26 we have an article by Addy Osmani called Data-binding resolutions. 0:29 Revolutions with Object.observe(). 0:34 It's a revolution. 0:37 It's not like data binding has decided to do something. 0:39 It means it's something brand new and amazing. 0:42 So what is brand new and amazing about Object.observe()? 0:44 This is something new in the next version of JavaScript. 0:47 And it is now built in to the next beta of Chrome. 0:51 So what does it do? 0:55 Well, it's part of a future ECMAScript standard 0:56 and it lets you watch objects for different changes. 0:59 So in this example right here, there is a model object, and using object.observe you 1:04 can watch this object, and then when something 1:11 changes, you can do something with that change. 1:14 Now, a lot of different libraries already have something like this built in, for 1:18 example, AngularJS has this built in, but 1:22 this actually kinda goes a roundabout way of 1:26 doing it where the existing libraries watch 1:28 for something called dirty changes, where it 1:31 will either pull the object or wait till something has changed and check for it. 1:34 Using Object.observe, it is completely native functionality. 1:38 Which results in a big speed boost. 1:42 An example that they have is with angular.js, they just 1:45 went from 40 milliseconds to two milliseconds when watching for changes. 1:48 Now, at the end of the day, the big 1:52 benefit of object dot observer is that you will 1:55 be able to much easier keep your DOM elements 1:57 updated without really having to do much of anything. 2:00 So if you have an object in JavaScript, you change something 2:03 the dome will be automatically updated and it will be much quicker. 2:06 This would be especially important on mobile devices. 2:10 So I'm not gonna go into this whole article. 2:13 It is an actually wonderful and very thorough article with a lot of examples. 2:15 Make sure you check it out. 2:19 >> Next up is TTY jif. 2:21 TTY of course stands for teletype. 2:24 >> Which was also a very popular children's show back in the day. 2:27 >> The teletypes. 2:32 If we scroll down here you can see that 2:34 this is a library that allows you to convert 2:37 animated GIF, excuse me, allows you to con, convert 2:40 teletype commands in a terminal into an animated GIF. 2:45 So, you get something that looks like this. 2:49 You can use this by installing it into your terminal and 2:51 then you create the GIF frames and this creates the animated GIF. 2:54 So this, of course, is really good if 2:59 you're trying to explain something in a blog post. 3:00 This has been a pretty popular technique for explaining stuff. 3:03 You might see these animated JIFs in 3:07 >> Pulverquest, on GitHub, demonstrate a little bit of functionality 3:11 >> Exactly 3:13 >> Very good for small snippets of code or 3:14 just something that you want to get across that way. 3:16 >> It might be very good for actually 3:19 showing how you might want to install this. 3:20 >> that, whff, inception. 3:24 >> That's right. 3:26 >> Well, Nick, I have an idea, let's make a bubble map. 3:27 That's what's up next. 3:31 This is a quick blog post, actually not a quick blog post, 3:32 it's a thorough blog post that describes making a basic map with D3.js. 3:36 And topo JSON, which is a library that adds topographical information to geodata. 3:42 So, at the end of the tutorial in this blog post, you get this nice 3:50 map with all of these different, these 3:54 different circles all over it that are red. 3:58 And you do that programmatically in JavaScript. 4:00 What's actually really nice about this tutorial is it 4:02 walks you through every single part, you have to install. 4:05 NodeJS, and then even go out and get different data to work with this project. 4:08 So very, very thorough article. 4:14 Really like how it breaks down into all of 4:17 the different parts, and how it actually massages the data. 4:19 That's what. 4:23 That's what the actual term is, I'm not making that up. 4:24 It's called massaging the data to have it fit your needs. 4:26 And it even goes through finding the data, merging the 4:29 data and at the end you have a bubble map. 4:32 You can put different data on there if you 4:36 want to but this tutorial is a great start. 4:37 You can find a link to it in the show notes, which you can 4:40 get to at youtube.com/gotreehouse or search for 4:42 us in iTunes, we are the treehouse show. 4:44 Also, don't forget to sign up for 4:47 a free month of treehouse at TeamTreeHouse.com/show. 4:49 >> Very nice stuff. 4:52 Well, next up is a blog post called Single Responsibility 4:52 and it applies the principles of object oriented programming to CSS. 4:57 So, for example one of those concepts 5:03 is single responsibility where you should have. 5:06 A CSS class that just does one thing and 5:09 does it really well and it's named very clearly. 5:14 You know exactly what it should do. 5:17 So this is a class called thumb and it creates a 5:19 thumbnail image like the one you see here of Nick Cage. 5:23 Next up is Encapsulation. 5:28 And this is another object-oriented programming concept 5:30 where you wanna keep your classes separated. 5:34 And you don't want them to either know about each other or depend on one another. 5:37 You want to keep them totally separated and there's 5:42 a pretty good example of what they mean by that. 5:46 So, for example, if you had a sidebar, and you wanted to place a button inside of 5:49 that sidebar, and maybe you wanted to position 5:56 it slightly differently than all of your other buttons. 5:58 You could do that by creating a selector that looks like this. 6:01 >> That button sounds really difficult. 6:05 >> Sidebar button. 6:07 But, that's not really a great idea because now. 6:09 You have this little bit of code that entangles 6:13 the responsibility of the sidebar and the button classes. 6:17 Instead, they say it's better to create a single class 6:21 called sidebar button and does exactly what you need it to. 6:26 Anyway, lots of other stuff in this blog post. 6:31 It's pretty fascinating. 6:34 So definitely be sure to check that out. 6:36 Next up we have a project called zepto.JS. 6:38 Zepto is actually a really interesting library 6:43 for modern browsers that is mostly jQuery compatible. 6:45 So it's really nice because they say if you know jQuery, you already know Zepto. 6:50 Well, so why in the world would you want to use it? 6:57 Well it's only 9.2K when it is compressed or 54K uncompressed. 6:59 For comparison jQueries about 30K when compressed and 200K uncompressed. 7:05 So the benefit is that it is a smaller library, 7:11 therefore it will be quicker on your pages, and this 7:14 is going to be better if you're using maybe a 7:17 phone or something like that, either way faster is better. 7:20 Now it supports most of the things that jQuery does. 7:23 You even get the dollar sign operator, where 7:26 you give it a selector and a context. 7:29 So, really like it, like it reports if you do know jQuery, you already know ZEPTO. 7:31 For the most part it's a drop in replacement and there are plugin 7:37 available as well to either add 7:41 more functionality or replicate other jQuery functionality. 7:43 By default it's relatively minimal but you can add more plugins if you want to. 7:46 Anyway, check that out. 7:51 Zepto. 7:53 >> Very cool stuff. 7:54 Next up is a blog post on the CSS Tricks 7:55 Blog from David Walsh, who also runs a popular blog. 7:58 This is about his redesign of the David Walsh Blog using Sass. 8:04 So, he decided to be Sassy. 8:10 He said it really wasn't a question of- 8:14 >> Uh-huh, I get it. 8:15 >> Whether or not to use a library like this. 8:16 It was just a choice between Sass or LESS. 8:19 So he outlines his choices there and it 8:23 basically came down to Chris Coyler told me to. 8:25 That's, probably not bad advice honestly. 8:28 Here is a couple of snippets that he used in designing and redesigning his blog. 8:31 One of them is this vendorize mix in, which makes it really easy to use CSS 8:36 properties and values and then apply vendor prefixes automatically. 8:42 Next up is float clearing, so if you just need to 8:47 quickly clear floated elements you can just use this mix in. 8:50 Off screen text, all sorts of cool stuff. 8:55 And then he goes over some of the mistakes that he made in the redesign. 8:58 Anyway, very equal blog post, if you keep up with the David Walsh blog. 9:03 You should definitely check this one out. 9:07 Lot's of good information in here. 9:09 >> Oh, very nice. 9:10 But I think that's about all we have time for. 9:11 Nick, who are you on Twitter? 9:12 >> I am @nickrp. 9:13 >> And I am @jseifer. 9:14 For more information on anything we talked about, 9:15 make sure to check out the show notes at 9:17 YouTube.com/goTreeHouse or search for us on iTunes, we're 9:18 the Treehouse show, and don't forget to rate us. 9:22 >> And of course if you'd like to see 9:24 more videos like this one about web design, web development, 9:26 mobile business and so much more, be sure and check 9:31 us out at teamtreehouse.com/show to get 30 days for free. 9:34 Thank you so much for watching, and we will see you next week. 9:38 [MUSIC] 9:41

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

Sign up