Episode 52: Reactive Programming, CSS Spacing, Image Loading

I'm Nick Pettit. >>I'm Jason Seifer. [Jason Seifer - @jseifer] [Nick Pettit - @nickrp] 0:00 And you're watching The Treehouse Show, your weekly dose of Internets 0:02 where we talk about all things web design, web development and more. 0:04 In this episode we'll be talking about reactive programming, 0:08 CSS spacing, image loading and more. 0:10 Let's check it out. 0:14 [? music ?] [treehouse show] 0:16 First up is tidyTime.js. 0:21 This is a jQuery plugin that will transform times into, well, basically different formatting. 0:24 So let's take a look at tidyTime here. 0:32 On the home page they say, "Hey Dude! It's 9 Minutes To 4 And I'm Feeling Good!" 0:35 If we scroll down here, we can see a couple more examples 0:41 of how it transforms a digital time into more of a friendly sentence. 0:44 You can include tidyTime in your website just after including jQuery. 0:51 And then to instantiate the plugin all you have to do is attach tidyTime just like that 0:57 after the DOM is loaded, and you can configure a couple options there 1:03 and it will transform your times. 1:08 It's pretty cool. Not a whole lot to say about it. 1:11 Normally this type of thing is actually done server side, 1:13 but this is a really nice way to do it on the front end. 1:17 I would like to express my disappointment. 1:21 I got very excited when you said we could manipulate time. 1:23 Not quite what you're thinking, but I see where you're going with that. 1:27 I was hoping for a time machine. >>I think we all are hoping for that. 1:31 Next up we have a project called Ractive.js. 1:35 I think I'm pronouncing that right. 1:39 Anyway, this is really interesting. 1:41 This brings functional reactive programming to JavaScript. 1:43 Well, what does that mean? >>I understood some of those words. 1:45 So essentially what that means is if you have a variable, 1:48 with functional reactive programming if that variable changes 1:52 you don't really need to do anything to update the code somewhere else. 1:56 So if you have, say, a count of the number of dishes in the sink 2:00 that your roommate didn't clean—I mean, they could just take 5 minutes to do it— 2:03 if for some reason that increments, you don't have to change anything in the DOM. 2:07 So if you take a look at the website right here, 2:09 it says, "HTML is an amazing language for creating static documents, 2:12 but it wasn't really designed for interactive web apps." 2:17 So when you use Ractive, you can use these templates right here. 2:21 It says, "Hello user. You have messages.unread." 2:25 So then you instantiate a new Ractive object, 2:28 give it the data that you need, and if the data changes at all, 2:31 then it automatically updates in the DOM and you don't have to do a single thing 2:36 in order to change it. 2:42 There are obviously more examples and a really great API to work with. 2:44 It's also extremely fast. 2:47 So check that out in the show notes, which you can get to at YouTube.com/gotreehouse, 2:49 or in iTunes search for us at The Treehouse Show. 2:54 Pretty cool stuff. 2:57 Next up we have this cool little app that will allow you to wrap your app screenshots 2:59 into, say, an iPhone or an iPad or any other type of device. 3:05 This is typically pretty difficult to do in Photoshop— 3:11 well, not difficult; it's just very tedious and takes a lot of time— 3:15 but this app does it for you. 3:18 So if we take a look, you can see all the various devices laid out here. 3:20 And when I hover over each one, 3:25 it will give me examples of what that device will look like. 3:27 Of course your app will be displayed here on the screen. 3:31 And when we go ahead and pick one of these devices, 3:35 it will load up this interface where I can go ahead and drag and drop an image file here 3:39 or I can go ahead and click a button to upload. 3:44 So I have a file here that's just a screenshot of the new Treehouse iPad app, 3:48 which you can check out at TeamTreehouse.com/iPad. 3:54 It looks like this screenshot is not actually formatted to the proper aspect ratio here, 3:58 so this isn't going to look quite right. 4:07 But I can go ahead and click Generate product mockup 4:09 and, hey, look at that. Our iPad app is sideways and not even the right aspect ratio. 4:12 [Jason laughing] >>[Nick] But you get the idea. Pretty cool. 4:18 It's called mock U phone, 4:20 and you can definitely get into a lot of different devices here. 4:22 Pretty cool stuff. >>I am waiting for mockups with a toaster. 4:28 It says you can request devices, so let's see if we can get some kitchen appliances in there. 4:32 Perhaps a blender. Mix things up. >>Yeah. One of those nice silver ones. >>Sweet. 4:37 Next up the Google Web Tracing Framework has been released. 4:42 Otherwise known as WTF. >>Yeah. That's the acronym. Their words, not ours. 4:47 So what is WTF? 4:53 Google says it's rich tools for instrumenting, analyzing, and visualizing web apps. 4:56 So if you have, let's say, a game that you're developing in JavaScript, 5:01 this is going to help you troubleshoot performance problems that you might have 5:06 inside of the game. 5:10 And there are just a ton of tools and a ton of things you can do inside. 5:11 Let's take a look at it. 5:14 Here is a quick screenshot of what you get in the app. 5:16 So what does all of this mean? 5:20 Well, it can go through and show you exactly what is happening, 5:22 chunk all the way down into the code, and you can see where the repaints 5:26 and where the different pain points are in the application. It's really wonderful. 5:29 As you can see right here, you just click on it to enable it 5:35 and then it will load a trace file. 5:38 There's an example trace that they have right over here. 5:41 It's saying, "Warning: results may be skewed." This is just a sample. 5:43 And you actually get a timeline from when you click Enable 5:46 all the way to when you disable or finish doing this query. 5:50 So once you get this, you can zoom in and see exactly what is happening in the app. 5:55 Over on the right it will tell you exactly what was called, 6:00 the total time it took, the user time it took, and how many times this was called. 6:04 This is just an amazing set of tools to go through 6:09 if you're developing these JavaScript graphics-heavy web applications. 6:14 And yeah, Google Web Tracing Framework. Incredible name. 6:18 Yeah, yeah. It's actually really incredible stuff. 6:22 I know the name is a little bit funny, but it's really cool what Google has done here, 6:25 especially when you're developing games for the Web. 6:30 Performance is always important, but with games it's like priority A1. >>Yeah. 6:33 Kind of like the steak sauce. >>Ooh, delicious. 6:40 Not a sponsor of the show. Shame on them. >>Yeah. 6:43 Next up is some browser logos from Paul Irish. 6:46 Whenever you're making a web app, you might want to say, 6:49 "Hey, you can do these things in these browsers." 6:53 Maybe some features aren't supported in, say, older versions of Internet Explorer 6:56 and you need to show some nice browser logos 7:01 to demonstrate where the app support is. 7:04 "You need Netscape Navigator 4.0 or above to view this website." >>Exactly. 7:07 "Resolution needs to be 1024x768 and you need Flash." Right. No. 7:11 These high-res browser logos are pretty cool, 7:17 but it can be difficult to find all them or find the most current one, 7:22 and you can mix things up pretty easily, so this repo on GitHub is maintained 7:27 to have the latest versions of all the browser logos at high resolution, and it's pretty handy. 7:32 They even have a few browsers in here that honestly I have never heard of before, 7:39 but I guess I'll have to check those out. 7:43 And if you scroll down, you even have My Little Pony versions 7:44 of all the different browsers. Look at that. 7:48 They have absolutely everything here. >>[Jason] That's adorable. 7:51 [Nick] Pretty cool stuff. 7:54 [chuckling] Next up, Nick, "Your app makes me fat." >>Really? >>Yeah. 7:56 I'm so sorry about that. 8:00 This is a blog post from Kathy Sierra talking about UI and what you have to consider 8:02 when making your users do things on the Web. 8:07 So she starts off with a psychology experiment that was done 8:10 where people were given 2 different tasks, right? 8:13 One group has to remember 2 numbers, 8:16 and one group has to remember 7 different numbers. 8:18 Afterwards they're offered a snack. 8:22 They could either choose something healthy, like fruits and vegetables, or cake. 8:25 For the group that had to remember 7 numbers, 8:29 they were 50% more likely to choose the cake. >>Wow. 8:32 So what does this have to do with web applications and UI? 8:36 Well, the more that you ask your users to do, the more you're depleting their willpower. 8:40 So what you want to do is make your apps as simple as possible 8:44 and don't make your users jump through all of these hoops 8:48 when building your web applications. 8:50 Make everything simple, don't make them do a lot of things— 8:52 the kind of things we talk about on this show. 8:55 Make it as simple and good UI as possible. 8:57 That's really good advice. 9:00 Actually, rather than going out, exercising, and eating healthy, 9:02 it's better to sit around all day and just optimize our web apps 9:07 and have no physical activity. >>100%. >>I think that's the message here. 9:11 For a little more background on that, check out the link to the blog post in the show notes. 9:15 But yeah, Nick, you pretty much nailed it. >>Nice. 9:18 Actually, it is a really cool blog post. 9:21 I know I was making fun of it, but please do check it out. >>Yeah. No. It's really good. 9:23 So next up is a post from CSS-Tricks by Chris Coyier 9:27 about spacing at the bottom of modules. 9:31 What is a module? 9:35 Chris Coyier describes it as a "content-y and app-y" type thing 9:36 and basically, it's just any time you have kind of a box like this on a web page. 9:42 The problem is the spacing in each one of these content modules. 9:49 Right now this box is all evenly padded and it just has some raw content 9:55 or some raw text inside of it. 10:01 But when you start adding a couple different things inside of the module 10:03 such as a third level headline or a paragraph, 10:08 you start to get uneven spacing. 10:11 You can see down here at the bottom that there's some extra margin 10:13 on the bottom of this paragraph. 10:17 And here is actually a colored example to illustrate that even further. 10:20 You could do a couple of things here, and Chris walks through them. 10:24 You could remove the margin on the paragraph. That's kind of messy. 10:28 You could remove the margin on the last child of a paragraph. 10:32 That's also not that great, though. 10:37 What Chris actually suggests doing is to remove the margin on any last child 10:40 inside of the element, and he even gives an example here 10:46 where you can nest each last child element further. 10:50 I'm not exactly sure how to phrase that. It's a little bit complicated. 10:54 But do check out the code, and there's even an example from CodePen here 10:58 showing how that is reflected across several different types of elements 11:03 inside of these modules. 11:07 Pretty nifty technique, and it's actually a problem 11:09 that when developing the CSS for an app you're constantly removing the margin 11:13 from the bottom of these stupid content boxes, 11:18 and it's really a waste of time. 11:21 So just applying this one catch-all could save you a lot of time. 11:23 Good work, Chris Coyier. >>Yeah. As usual. 11:28 Next up we have a blog post by Patrick Kunka on taking control of image loading. 11:31 He's been working on a lot of photographically-heavy websites recently, 11:36 and something that kind of winds up bothering him 11:41 is when images don't completely load as you're scrolling down a page. 11:43 You know, sometimes the browser hasn't fetched an entire image. 11:47 This is going to be for really big images. 11:50 As we're doing with responsive and retina-heavy websites, 11:53 the bigger images can be something to take into account. >>Definitely. 11:58 He says that broadband has mitigated some of these problems, 12:02 but it's still an issue that you want to take into account. >>Yeah. 12:05 So how do you solve this? 12:08 He has 4 different solutions that he goes through in the blog post. 12:09 The first one is pretty easy. Just wrap the element in a div. 12:13 This is for a single asset. 12:17 Wrap it in a div with a class of img_wrapper, 12:20 and this allows you to manipulate the image in the div just a little bit differently. 12:23 You can constrain it to a 4:3 aspect ratio 12:28 and put the image inside there with an absolute position 12:32 and a width of 100%. 12:36 Then he adds an onload attribute to the image tag 12:39 which lets you fire some JavaScript as soon as this is loaded. 12:43 One thing that he says is, "Hey, people are going to really be a little bit offended at this." 12:47 "You really shouldn't be using inline attributes and inline JavaScript." 12:54 And he says, "Well, for the most part I agree with you, 12:58 but every once in a while I'm not opposed to a solution if it works." 13:01 And he says this does most of the time. 13:05 The next solution that he presents is grouping multiple assets inside of a slideshow div. 13:07 So doing something like that, same thing. 13:14 One bigger div with a slideshow contains your 3 images, 13:18 and then onload, you call the slideLoaded function which finds the image 13:22 and then adds and loads all of them in the background. 13:27 Also he has this little percentLoaded variable 13:31 which will tell you how much the image has loaded so far. 13:34 That's going to be good for more of a slideshow 13:39 where you have only a few images to load, 13:43 but what do you do if you want to have more images on the page and preload them? 13:45 That's something else you can do. You can preload images beforehand. 13:50 He has a JavaScript, just a quick array of images, 13:53 and then preload those in the background. 13:58 And finally, the last solution is going to be lazy loading images 14:00 as you scroll down the page. 14:03 He has another solution in there as well. 14:05 We're not going to go into that because this is getting a little bit heavy, 14:07 but I definitely recommend checking out that link. 14:09 And if you want to check out lazy loading, just go to Pinterest. 14:12 Oh yeah. There you go. >>Simple. >>Great example. >>All right. 14:15 I am @nickrp on Twitter. >>I am @jseifer. 14:18 For more information on anything we talked about, check out our show notes 14:21 at YouTube.com/gotreehouse. 14:24 And of course if you'd like to see more videos like this one about web design, 14:27 web development, business and so much more, 14:30 be sure to check us out at TeamTreehouse.com. 14:33 Thanks so much for watching, and we'll see you next week. 14:36 [? music ?] [treehouse show] 14:39

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

Sign up