Episode 18: Backbone.js, Responsive Background Images, and HTML5 APIs

[The Treehouse Show] 0:00 [Jim]: I'm Jim Hoskins. [Jason]: and I'm Jason Seifer. [Jason Seifer @JSEIFER] [Jim Hoskins @JIMRHOSKINS] 0:02 Welcome to the Treehouse show, your weekly dose of internets, where we talk about all things 0:04 web development, web design, and more. 0:07 In this episode we'll be talking about HTML5 APIs, responsive background images, 0:09 and our app of the week is Sequel Pro. 0:14 Nick Pettit is out this week due to a bizarre fauxhawk accident. 0:16 So, let's get going. ?[music]? 0:20 [The treehouse Show] 0:25 First up this week is a project called Backbone.viewkit. 0:28 [Backbone.viewkit] [https://github.com/scttnlsn/backbone.viewkit] 0:31 Backbone.viewkit is a backbone.js plug-in for managing views and transitions, 0:33 and it's primarily targeted toward mobile devices. 0:37 If you've seen a project like jQuerymobile, 0:41 this gives you very similar transitions to use on your websites. 0:43 [Jim]: Sort of like--move the pages side to side and all those swipe things from iOS? 0:46 [Jason]: Yep, just like that. 0:50 What they're trying to do is really kind of approximate 0:52 more of what a native mobile application is going to look like. 0:54 It doesn't give you too much stuff to work with in the way of fluff, but we have a little demo 0:58 that you can see on the site--it's up on a jsFiddle right here. 1:03 They have a top navigation bar as well as a view right below it, 1:06 and you can see as you click between these different views it slides around using backbone.js 1:11 to just render your different views and manage these very easily for you. 1:18 So, this is a really neat plug-in. 1:23 You can check it out. We'll have a link to it in the show notes. It's over on github.com. 1:25 [Jim]: Ah, very cool. So, I've got a cool tool called the Noise Texture Generator. 1:30 [Jason]: That does sound cool. [Noise Texture Generator] [http://www.noisetexturegenerator.com] 1:35 It does exactly what it says, actually. It generates noise texture. 1:37 And the reason this is cool is it allows you to 1:40 update the opacity and manage the noise density. 1:42 And what this is good for is it will allow you to create a background on your site 1:46 with some very subtle sort of noise on it, which really isn't something that is super noticeable, 1:51 but it's a nice little effect that you can have to sort of break up the page using CSS. 1:56 So, basically you could have a color either defined directly in the image, 2:02 which you can see here, or you can have it actually be a transparent noise texture 2:06 and then overlay it on a CSS-colored background so you can be a little more dynamic. 2:11 You can adjust the size of it, and then it exports as a PNG, which is pretty cool, 2:16 and then you can just use it on your site. 2:20 [Jason]: Hmm. Really nice. Kind of--kind of ties the room together. 2:22 [Jim]: Yeah, it's a little thing. 2:24 [Jason]: So, next up we're going to 5 HTML5 APIs that you didn't know existed. 2:26 [5 More HTML5 APIs You Didn't Know Existed] [http://davidwalsh.name/more-html5-apis] 2:32 I find that a little bit presumptuous, and I'm just going to say you may 2:34 not have known that these APIs existed. 2:36 This is over on David Walsh's blog, which he's called The David Walsh Blog. 2:39 So, kind of a cool few things you can kind of work with with HTML5 is the full screen API. 2:44 Different elements can request that your browser actually go full screen. 2:50 This does require user approval and permission, so you can't just launch your website full screen. 2:54 We all remember how pop-ups went back in the late '90s. 3:00 [Jim]: Always a good feature. [Jason]: Yeah. 3:03 Next up is something called the page visibility API. 3:05 This lets you listen in on events, like when a user focuses on a pages tab 3:08 or if a page is up in another window. 3:14 Now, I'm not entirely sure if this lets you focus on a page when somebody navigates away from it 3:17 or it's hidden, because I think that would be a great time to play a background sound 3:24 like, "Hey come to me. I'm this page that you were looking at." 3:28 I mainly find all these useful for--for different pranks. 3:32 There's also the getUserMedia API, which lets you use the MacBook's camera 3:37 as well as the Battery API and Link Prefetching. 3:41 If you want more information on these as well as code samples, 3:45 check out the link in our show notes, which you can find at youtube.com/gotreehouse. 3:48 [Jim]: Yeah, it all seems like pretty good prank technology, 3:53 including the web cam, which is pretty scary. 3:55 [Jason]: Yeah--you know--I like that we've kind of evolved the web to a point where 3:57 we have so many options for pranking people when they go to our website. 4:01 [Jim]: Well, I've got something that's not really very prank-worthy, but it's a great article 4:03 from Rolf Timmermans about Responsive Background Images 4:06 with fixed or fluid aspect ratios. [Responsive Background Images] [http://goo.gl/kpuKV] 4:10 [Jason]: Oh, cool. [Jim]: And it's a--it's a description of how to create responsive images 4:12 that have aspect ratios that either stay the same as they resize through the responsive spectrum, 4:16 or you can even set it up so that the aspect ratio will change as the page resizes. 4:21 The way that they're doing this is instead of having an image using a figure 4:28 and setting the actual image as the background image and then using the actual sizing 4:32 of the figure all in of itself, and by using some CSS and some math, 4:37 you can set the aspect ratio so it appropriately sizes as you go on through. 4:41 At the bottom, he also has some CSS code, which allows you to do all the calculations 4:46 in code instead of having to type it into your calculator and hard coding it into your CSS, 4:50 which is pretty nice. 4:55 [Jason]: [laughs] That's pretty clever by using the figure to do the background image. 4:58 [Jim]: It's still semantically correct, I guess, although--you know--if background images 5:01 don't work, which, I guess, is pretty much a problem that's not a problem anymore, 5:06 especially if you're worrying about responsive design. 5:09 It should be pretty compatible. So, I really wouldn't worry about it. 5:11 [Jason]: Well, still a pretty neat solution. [Jim]: Yeah. 5:14 [Jason]: Next up is our APP review. 5:16 [APP REVIEW] 5:21 Our App review this week is an App called Sequel Pro. 5:24 [Sequel Pro] [http://www.sequelpro.com] 5:26 This is going to let you manage your ISQ databases 5:28 on Mac OS 10, or OS X as some people say. 5:30 Now, what this is--this provides a nice little GUI for interacting with your MySQL database. 5:34 This is going to be different from a project like phpMyAdmin 5:41 in that it's working only on your local computer. 5:44 So, here's what it looks like. 5:47 This is just a little test database with a test table that I have up on my local machine here, 5:49 and as soon as you select the table it shows you all the different fields 5:55 that you have in the database, and then you can even add more fields as you go on. 5:58 You know--if you wanted to add an integer, go ahead, and then here's another thing-- 6:04 OTHER FIELD--even provides you with a little drop down 6:07 just giving you all the different options for table columns. 6:10 You can even check out the content in the database and just double click in there to add 6:15 different content and--uh--yeah-- 6:20 gives you a really nice way of working with databases on OS 10. 6:23 There's more options like viewing different table infos and even doing custom queries 6:30 from right inside the GUI. 6:34 We'll have a link to this is in show notes. 6:36 I believe you can get this at sequelpro.com. 6:38 It's completely free. 6:41 They're not sponsoring the show because it's free, but you can donate if you like the project. 6:43 Once again, that's at sequelpro.com. 6:48 Kind of a--kind of a neat thing. 6:51 [Jim]: Yeah, usually--I've seen a lot of those projects, and I've tried to manage 6:53 the database and the GUI, and a lot of them can be pretty janky, 6:55 but that one looked like it was a pretty smooth, pretty well-designed, and easy to use. 6:58 So, I'm excited to try it out. [Jason]: Yeah, it's pretty nice. 7:02 Next up, we have a project called Editable for Bootstrap. 7:05 [Editable for Bootstrap] [http://vitalets.github.com/bootstrap-editable] 7:08 This is a sort of Javascript plug-ins that work with Twitter Boostrap to let you do an approximation 7:10 of in-place editing with different fields. 7:15 So, here's an example that they have on the site. 7:18 There is a field for user name. 7:21 You can actually click in there and then change it to something else. 7:23 You click the little button and it edits right in place and updates the HTML client side. 7:27 This works with all sorts of different field types, including dates--it gives you a little date pop-up. 7:33 Click the check mark and wait--pretty much anything you need. 7:40 There's also a ton of different events that you can hook into, and it's pretty easy. 7:45 It works with jQuery and Boostrap greater than or equal to 2.0.4. 7:50 [Jim]: So, is it actually editing form fields and the idea is just to submit them through, 7:55 or is it actually editing sort of in-place content, and then you'd have to handle it in JavaScript. 7:59 What's the deal with this? 8:03 [Jason]: It's editing in-place content, and then you handle that in the JavaScript. 8:05 [Jim]: Or call back with a new content, and then you could use 8:08 Ajax or something to update the server or page. 8:11 [Jason]: Yeah, and it gives you great and--a pretty thorough API to work with. 8:14 [Jim]: Oh, that's pretty cool. 8:17 I got a cool jQuery plug-in. [Jason]: Sweet. 8:19 [Jim]: It's called jPannelMenu. [Jason]: What does that do? 8:21 [Jim]: It creates a panel menu in jQuery. [Jason]: Wow. [jPanelMenu] [http://jpanelmenu.com] 8:24 [Jim]: Hence the name. [Jason]: I get the name, but-- 8:28 [Jim]: Everything cool starts with a J. [Jason]: Agreed. [laughs] 8:30 [Jim]: If you've ever used the mobile Apps for Facebook or Google, 8:34 you're probably familiar with that little menu that's sort of behind the application. 8:37 You can either slide it or hit a little button and it kind of comes out in a little list. 8:42 Well, this allows you to make it pretty easily. 8:45 You install it and click the button an d your whole page moves to the side 8:48 and you have a nice, well-designed little menu that you can click, 8:52 and then they're just normal links, and you can just move it right back. 8:55 It even has animations. It's pretty cool. 8:58 The only thing that I'd say to watch out for is that the way that it works is 9:00 when it's activated, it'll actually take all the content from your body and move it into a div, 9:04 which it then moves to the side. 9:10 So, if you have any JavaScript or CSS, that is, expecting elements to be directly in the body, 9:12 it is slightly changing your structure, so you may have to watch out for that. 9:18 [Jason]: Gotcha. Good tip! Cool plug-in. I--uh--really like it. [Jim]: It's pretty cool. 9:22 [Jason]: So, finally, we're going to wrap this up--a blog post on what every programmer 9:27 absolutely, positively needs to know about 9:32 encoding encodings and character sets when working with text. 9:35 [Encodings And Character Sets With Text] [http://kunststube.net/encoding/] 9:40 This is a very, very thorough blog post that provides a fantastic introduction 9:42 to what's actually happening behind the scenes on your computer when you interact 9:44 with any kind of text in a programmatic way. 9:49 It's not as simple as just writing single letters and characters to the screen. 9:52 We have all sorts of different encodings and encoding styles. 9:56 [Jim]: So, again, the 1s and 0s--you have to have some sort of way of defining 9:59 what 1s and 0s mean what, right? 10:03 [Jason]: Yep, exactly. 10:05 So, this is not something we're going to cover completely on the show, 10:07 but we do want you to read this whole thing, 10:10 because there is going to be a quiz next week on the treehouse show, episode 19. 10:13 [Jim]: Alright, prepare yourself. [Jason]: Yes, definitely be prepared. 10:19 Um--so, that's it--that's all we've got for this week. Jim, who are you on Twitter? 10:22 [Jim]: I am JimRHOSKINS on Twitter. [Jason]: And I am @JSEIFER. ?[music]? 10:25 [Jason Seifer @JSEIFER] [Jim Hoskins @JIMRHOSKINS] 10:29 If you want more information about anything we talked about this week, head over to 10:31 our Youtube channel at youtube.com/gotreehouse. [Treehouse Youtube Channel] [http://youtube.com/gotreehouse] 10:33 [Jim]: This episode is brought to you by Treehouse, the best way 10:38 to learn how to design and develop web applications, websites, and mobile Apps. 10:40 Check us out at teamtreehouse.com. [Treehouse] [http://teamtreehouse.com] 10:45 [Jason]: We'll see you later. 10:48 [The treehouse Show] ?[music]? 10:50

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

Sign up