Episode 19: Memory management, wireframing, and JavaScript frameworks

I'm Jim Hoskins. [@jimrhoskins] >>And I'm Jason Seifer. [@jseifer] 0:01 Welcome to The Treehouse Show, your weekly dose of internets 0:03 where we talk about web design, web development, and more. 0:06 In this episode, we'll be talking about memory management techniques, 0:09 wireframes, and micro JavaScript frameworks. 0:13 Nick Pettit is out this week because he was actually attacked 0:16 by a group of his Twitter followers. Hashtag ouch. 0:19 [beeping sound] 0:24 [The Treehouse Show] 0:28 First up this week we have an article over on the Paydirt blog 0:30 about Backbone.js in practice. [http://goo.gl/SUuLz] 0:33 This is Part 1 of an unknown part series on preventing memory leaks 0:36 in your Backbone.js applications. 0:41 This blog post is going to go through and tell you different things that you can do 0:44 to prevent memory leaks when writing Backbone.js applications. 0:48 A lot of the techniques that they go over in here don't apply specifically just to Backbone; 0:52 more so to memory conservation techniques in general. 0:58 See, the problem is when you're working with a larger framework 1:02 or even any larger JavaScript application, you have to keep track of a lot of different things. 1:05 As you're going through and writing your apps, things can become a little bit cumbersome 1:11 to keep track of, and you might wind up with the memory leaking in different places. 1:16 So this blog post, as I said, goes over just a few different ways to start preventing these. 1:21 Go ahead and check it out. 1:26 We'll have a link in the show notes where you can actually read some of the code 1:28 that I have now hyped up. >>What's a memory leak? 1:30 I forgot. >>Okay. 1:34 Well, if you read the blog post, I'm sure you'll find out. 1:36 I have a tool cool called Wireframe.cc. [http://wireframe.cc] 1:39 It's pretty much what it is. It's a wireframing tool on the Webs. It's pretty easy. 1:43 It gives you a nice little template, and you can just drag things out 1:47 and it pops up a nice little menu with the different templates 1:50 of things that you might want to place, 1:52 so if maybe you wanted to put a box there, and you can just quickly drag stuff out, 1:54 maybe place a placeholder for an image, some text, 1:59 and, voila, you have an awesome wireframe. 2:02 In case that wasn't cool enough, I do actually have the demo up here 2:05 so you can see what a more professionally designed wireframe might look like. >>Wow! 2:09 [Hoskins] It's amazing. You can imagine what it really looks like. It's actually pretty cool. 2:13 It even sort of based on the aspect ratio or size you're doing 2:18 will display different widgets that would fit based on if it was really long 2:21 you get these sort of scroll bars or sliders versus if it was a square 2:25 you wouldn't get those; you'd get text and other things. 2:30 So it's pretty smart, pretty easy to use, and it's awesome. >>That's pretty cool. 2:32 Wireframes are really useful for getting an idea of how sites are going to work 2:37 rather than just plunging in to a design. 2:41 Lets you sort of stay away from the details and worry about more the big picture of it. 2:43 Next up, speaking of design, over on the Logo Design Love blog 2:47 [http://logodesignlove.com/brand-identity-style-guides] 2:51 there is a concatenation blog post about different brand identity style guides 2:53 from around the world. 2:57 A brand identity or style guide 2:59 is going to tell you all of the different things that you need to know 3:02 when working with the brand's logo or their corporate identity 3:04 and kind of the whole structure of how they're going to design the site. 3:09 This is going to go through different font sizes, images, where they can be placed, 3:12 colors, different ways of scaling the logo, 3:16 and there is just an absolutely great compilation 3:18 of all of these different possible brand images from around the Web. 3:21 It includes really big companies like Adobe, Cisco, Best Buy, just a ton of different ones. 3:25 Having a brand style guide is something that's really important for a company 3:31 when it leaves just the original couple designers 3:36 and you have more people working on a project. 3:40 It gives them a really good idea of how to work with your brand 3:42 while keeping the whole corporate style intact. 3:45 So definitely check that out. 3:47 Okay. I have a cool little library here. It's called datepicker for Bootstrap. >>What does it do? 3:50 [http://www.eyecon.ro/bootstrap-datepicker/] It's a datepicker for Bootstrap! >>Wow. 3:54 Wow. It's amazing. >>That's a weird name. >>It actually is really cool. 3:56 If you're using Bootstrap, which-- >>[Seifer] Most of the Web is. 3:58 [Hoskins] Yeah, you pretty much are now, right? 4:01 If you want a nice little tool to turn your input boxes into proper datepickers, there it is. 4:04 It's that easy. There are nice little options here. 4:08 It's properly styled, it looks great, it works, and there's a lot of different little options. 4:11 It's all really well documented. 4:16 So if you're looking for a way to define the dates in your Bootstrap sites, 4:18 this is the easiest way that I've found to do it. So check it out. >>Very nice. 4:22 Next up, if you use the Sublime Text 2 text editor, 4:26 there is a blog post over on the Mutually Human blog, 4:30 which is actually a really great blog name [http://goo.gl/Db3p1] 4:34 on creating a plugin for Sublime Text 2. 4:37 For the most part, when you're working with Sublime Text 4:41 there's just a ton of plugins and options out there, 4:43 but every once in a while you're going to run into some functionality 4:46 that maybe you wish you had that isn't available. 4:49 In that case, go ahead and write it yourself. 4:51 This blog walks you through how to get set up starting to write a Sublime Text 2 plugin. 4:54 Sublime Text plugins are written in Python, so if you don't know that, 5:00 maybe check out a tutorial that we have a link to in a previous Treehouse Show, 5:04 which has a link to a ton of different Python books that you can download for free. 5:08 Shameless self-promotion. 5:14 So have you ever tried to prototype a mobile application? >>No. 5:17 Well, it can be a little bit difficult, 5:22 but one of the easiest ways especially us as web developers can do it 5:23 is through HTML as sort of a prototyping tool. 5:26 A really cool thing that's been released is Ratchet. [http://maker.github.com/ratchet/] 5:30 It's a CSS and JavaScript HTML framework not too unlike Bootstrap, 5:34 which allows you to create common components of mobile applications. 5:37 Basically, with some simple HTML you can mock up how your mobile application will look. 5:43 It has common things like different bars and list items with the different widgets, 5:49 buttons, switchers, and so on. 5:55 So using some very simple HTML and then including the JavaScript and CSS, 5:57 you can actually prototype pretty well how a mobile application will work 6:01 in pretty simple terms. 6:05 It even has some cool things like galleries here that slide around-- 6:07 [Seifer] Wow. Look at that. >>[Hoskins] popovers and it even does the page transitions 6:10 if you want to have something you can actually click or touch to move around. 6:14 The reason it kind of looks a little like Bootstrap is because one of the developers of it 6:19 was one of the developers from Bootstrap. 6:23 So it looks kind of like it, but it's a really cool, awesome tool 6:25 for really quickly getting together some sort of basic mobile applications. 6:28 Yeah, it seems like that would be a good way to get a feel for a feature 6:32 before you waste all the time coding it 6:35 if it's just going to be something you don't want to work with anyway. 6:37 Building a UI in mobile can be pretty time-consuming. 6:39 HTML is pretty fast, and you can get it together even in your hand and try it out 6:43 and see if it works. >>Nice. 6:46 Next up we have a JavaScript plugin called Crumble. [http://tommoor.github.com/crumble/] 6:49 Crumble is going to let you do feature tours of a website. 6:52 The what they call blank slate experience when you get to a web application or a website 6:56 can sometimes be intimidating for new users, 7:00 and you want to walk them through it. 7:03 What Crumble is going to do is give you little divs or boxes or callouts 7:05 to call out different features of the site, 7:11 and then you can click on it and then continue on down the page 7:13 and just kind of click through the tour. 7:17 This is going to help you out a lot as a new user visits your site, 7:20 just kind of give them a hint about where everything is, 7:24 don't just leave them hanging. 7:26 I like it. >>Yeah. It's pretty cool. 7:28 And that's the way the cookie crumbles. 7:30 We're not getting into taglines on the show? 7:33 That was a good try. >>That's fine. 7:36 So how big is your JavaScript framework? >>It's average. 7:39 Cool. We all know when it comes to bandwidth, less is more. 7:41 So if you're using jQuery, you may or may not realize it's pretty large. 7:45 And if you're not using every part of it, maybe you should consider a smaller framework, 7:49 a micro framework. 7:54 If you want to find one, microjs.com is a great repository of frameworks [http://microjs.com] 7:56 that do various tasks that are very, very small. 8:01 It's nice and searchable, so if you just want to have maybe a DOM utility 8:05 for manipulating the elements on your page, much like you use with jQuery but smaller, 8:08 it gives you some different tools, and it even tells you how big they are 8:13 so you can measure them against what they're worth. 8:17 So Zepto would be 4k, but there are some smaller ones that may do less 8:19 but exactly what you need that would be smaller. 8:22 So it's a really large repository of very small tools. 8:25 [Seifer] That's really important because we're getting into things today 8:29 where your mobile device might not have a lot of bandwidth 8:33 if you're just on an edge connection. 8:35 And really, when you get to that point, every kilobyte helps. >>Yeah. 8:38 I was on vacation and I hit a lot of edge networks, 8:41 and all of a sudden I was appreciating very fast pages 8:43 that I kind of take for granted in my WiFi and 4G lifestyle here. 8:46 It's an adjustment. >>It is. 8:51 So that's it. That's all we've got for you for this week. 8:54 Jim, who are you on Twitter? >>I am jimrhoskins on Twitter. >>And I am jseifer. 8:56 If you want more information on anything that we talked about this week, 9:01 head on over to our show notes at youtube.com/gotreehouse/. 9:04 This episode was brought to you by Treehouse, the best way to learn how to develop 9:09 and design websites and mobile applications. 9:13 Check us out at teamtreehouse.com. >>We'll catch you next week. 9:15 [beeping sound] [The Treehouse Show] 9:20

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

Sign up