1 00:00:00,000 --> 00:00:02,000 [The Treehouse Show] 2 00:00:02,000 --> 00:00:04,000 [Jim]: I'm Jim Hoskins. [Jason]: and I'm Jason Seifer. [Jason Seifer @JSEIFER] [Jim Hoskins @JIMRHOSKINS] 3 00:00:04,000 --> 00:00:07,360 Welcome to the Treehouse show, your weekly dose of internets, where we talk about all things 4 00:00:07,360 --> 00:00:09,679 web development, web design, and more. 5 00:00:09,679 --> 00:00:14,500 In this episode we'll be talking about HTML5 APIs, responsive background images, 6 00:00:14,500 --> 00:00:16,521 and our app of the week is Sequel Pro. 7 00:00:16,521 --> 00:00:20,272 Nick Pettit is out this week due to a bizarre fauxhawk accident. 8 00:00:20,769 --> 00:00:22,769 So, let's get going. ?[music]? 9 00:00:25,229 --> 00:00:27,229 [The treehouse Show] 10 00:00:28,199 --> 00:00:31,509 First up this week is a project called Backbone.viewkit. 11 00:00:31,509 --> 00:00:33,509 [Backbone.viewkit] [https://github.com/scttnlsn/backbone.viewkit] 12 00:00:33,509 --> 00:00:37,560 Backbone.viewkit is a backbone.js plug-in for managing views and transitions, 13 00:00:37,560 --> 00:00:40,271 and it's primarily targeted toward mobile devices. 14 00:00:41,039 --> 00:00:43,690 If you've seen a project like jQuerymobile, 15 00:00:43,690 --> 00:00:46,910 this gives you very similar transitions to use on your websites. 16 00:00:46,910 --> 00:00:50,581 [Jim]: Sort of like--move the pages side to side and all those swipe things from iOS? 17 00:00:50,581 --> 00:00:52,581 [Jason]: Yep, just like that. 18 00:00:52,581 --> 00:00:54,630 What they're trying to do is really kind of approximate 19 00:00:54,630 --> 00:00:58,511 more of what a native mobile application is going to look like. 20 00:00:58,989 --> 00:01:03,031 It doesn't give you too much stuff to work with in the way of fluff, but we have a little demo 21 00:01:03,031 --> 00:01:06,780 that you can see on the site--it's up on a jsFiddle right here. 22 00:01:06,899 --> 00:01:11,060 They have a top navigation bar as well as a view right below it, 23 00:01:11,060 --> 00:01:18,420 and you can see as you click between these different views it slides around using backbone.js 24 00:01:18,420 --> 00:01:23,222 to just render your different views and manage these very easily for you. 25 00:01:23,578 --> 00:01:25,779 So, this is a really neat plug-in. 26 00:01:25,779 --> 00:01:30,571 You can check it out. We'll have a link to it in the show notes. It's over on github.com. 27 00:01:30,571 --> 00:01:35,149 [Jim]: Ah, very cool. So, I've got a cool tool called the Noise Texture Generator. 28 00:01:35,378 --> 00:01:37,378 [Jason]: That does sound cool. [Noise Texture Generator] [http://www.noisetexturegenerator.com] 29 00:01:37,678 --> 00:01:39,860 It does exactly what it says, actually. It generates noise texture. 30 00:01:40,418 --> 00:01:42,810 And the reason this is cool is it allows you to 31 00:01:42,810 --> 00:01:46,445 update the opacity and manage the noise density. 32 00:01:46,445 --> 00:01:51,150 And what this is good for is it will allow you to create a background on your site 33 00:01:51,150 --> 00:01:56,890 with some very subtle sort of noise on it, which really isn't something that is super noticeable, 34 00:01:56,890 --> 00:02:02,040 but it's a nice little effect that you can have to sort of break up the page using CSS. 35 00:02:02,169 --> 00:02:06,000 So, basically you could have a color either defined directly in the image, 36 00:02:06,000 --> 00:02:11,381 which you can see here, or you can have it actually be a transparent noise texture 37 00:02:11,381 --> 00:02:15,812 and then overlay it on a CSS-colored background so you can be a little more dynamic. 38 00:02:16,729 --> 00:02:20,762 You can adjust the size of it, and then it exports as a PNG, which is pretty cool, 39 00:02:20,762 --> 00:02:22,161 and then you can just use it on your site. 40 00:02:22,204 --> 00:02:24,749 [Jason]: Hmm. Really nice. Kind of--kind of ties the room together. 41 00:02:24,749 --> 00:02:26,749 [Jim]: Yeah, it's a little thing. 42 00:02:26,749 --> 00:02:32,208 [Jason]: So, next up we're going to 5 HTML5 APIs that you didn't know existed. 43 00:02:32,208 --> 00:02:34,208 [5 More HTML5 APIs You Didn't Know Existed] [http://davidwalsh.name/more-html5-apis] 44 00:02:34,208 --> 00:02:36,309 I find that a little bit presumptuous, and I'm just going to say you may 45 00:02:36,309 --> 00:02:38,840 not have known that these APIs existed. 46 00:02:39,468 --> 00:02:44,221 This is over on David Walsh's blog, which he's called The David Walsh Blog. 47 00:02:44,221 --> 00:02:50,320 So, kind of a cool few things you can kind of work with with HTML5 is the full screen API. 48 00:02:50,848 --> 00:02:54,400 Different elements can request that your browser actually go full screen. 49 00:02:54,400 --> 00:03:00,010 This does require user approval and permission, so you can't just launch your website full screen. 50 00:03:00,010 --> 00:03:03,911 We all remember how pop-ups went back in the late '90s. 51 00:03:03,911 --> 00:03:05,911 [Jim]: Always a good feature. [Jason]: Yeah. 52 00:03:05,911 --> 00:03:08,632 Next up is something called the page visibility API. 53 00:03:08,632 --> 00:03:14,590 This lets you listen in on events, like when a user focuses on a pages tab 54 00:03:14,590 --> 00:03:17,141 or if a page is up in another window. 55 00:03:17,729 --> 00:03:24,290 Now, I'm not entirely sure if this lets you focus on a page when somebody navigates away from it 56 00:03:24,290 --> 00:03:28,382 or it's hidden, because I think that would be a great time to play a background sound 57 00:03:28,382 --> 00:03:31,641 like, "Hey come to me. I'm this page that you were looking at." 58 00:03:32,595 --> 00:03:36,300 I mainly find all these useful for--for different pranks. 59 00:03:37,002 --> 00:03:40,822 There's also the getUserMedia API, which lets you use the MacBook's camera 60 00:03:41,398 --> 00:03:44,392 as well as the Battery API and Link Prefetching. 61 00:03:45,608 --> 00:03:48,055 If you want more information on these as well as code samples, 62 00:03:48,055 --> 00:03:52,881 check out the link in our show notes, which you can find at youtube.com/gotreehouse. 63 00:03:53,468 --> 00:03:55,670 [Jim]: Yeah, it all seems like pretty good prank technology, 64 00:03:55,670 --> 00:03:57,839 including the web cam, which is pretty scary. 65 00:03:57,839 --> 00:04:01,009 [Jason]: Yeah--you know--I like that we've kind of evolved the web to a point where 66 00:04:01,009 --> 00:04:03,380 we have so many options for pranking people when they go to our website. 67 00:04:03,380 --> 00:04:06,980 [Jim]: Well, I've got something that's not really very prank-worthy, but it's a great article 68 00:04:06,980 --> 00:04:10,159 from Rolf Timmermans about Responsive Background Images 69 00:04:10,159 --> 00:04:12,160 with fixed or fluid aspect ratios. [Responsive Background Images] [http://goo.gl/kpuKV] 70 00:04:12,160 --> 00:04:16,320 [Jason]: Oh, cool. [Jim]: And it's a--it's a description of how to create responsive images 71 00:04:16,320 --> 00:04:21,483 that have aspect ratios that either stay the same as they resize through the responsive spectrum, 72 00:04:21,877 --> 00:04:26,900 or you can even set it up so that the aspect ratio will change as the page resizes. 73 00:04:28,428 --> 00:04:32,310 The way that they're doing this is instead of having an image using a figure 74 00:04:32,869 --> 00:04:37,180 and setting the actual image as the background image and then using the actual sizing 75 00:04:37,180 --> 00:04:41,133 of the figure all in of itself, and by using some CSS and some math, 76 00:04:41,133 --> 00:04:45,190 you can set the aspect ratio so it appropriately sizes as you go on through. 77 00:04:46,000 --> 00:04:50,714 At the bottom, he also has some CSS code, which allows you to do all the calculations 78 00:04:50,714 --> 00:04:55,230 in code instead of having to type it into your calculator and hard coding it into your CSS, 79 00:04:55,230 --> 00:04:57,410 which is pretty nice. 80 00:04:58,120 --> 00:05:01,760 [Jason]: [laughs] That's pretty clever by using the figure to do the background image. 81 00:05:01,760 --> 00:05:06,760 [Jim]: It's still semantically correct, I guess, although--you know--if background images 82 00:05:06,760 --> 00:05:09,752 don't work, which, I guess, is pretty much a problem that's not a problem anymore, 83 00:05:09,752 --> 00:05:11,752 especially if you're worrying about responsive design. 84 00:05:11,752 --> 00:05:14,150 It should be pretty compatible. So, I really wouldn't worry about it. 85 00:05:14,150 --> 00:05:16,150 [Jason]: Well, still a pretty neat solution. [Jim]: Yeah. 86 00:05:16,150 --> 00:05:18,150 [Jason]: Next up is our APP review. 87 00:05:21,235 --> 00:05:23,348 [APP REVIEW] 88 00:05:24,349 --> 00:05:26,777 Our App review this week is an App called Sequel Pro. 89 00:05:26,777 --> 00:05:28,777 [Sequel Pro] [http://www.sequelpro.com] 90 00:05:28,777 --> 00:05:30,777 This is going to let you manage your ISQ databases 91 00:05:30,777 --> 00:05:33,500 on Mac OS 10, or OS X as some people say. 92 00:05:34,628 --> 00:05:40,880 Now, what this is--this provides a nice little GUI for interacting with your MySQL database. 93 00:05:41,241 --> 00:05:44,080 This is going to be different from a project like phpMyAdmin 94 00:05:44,080 --> 00:05:46,864 in that it's working only on your local computer. 95 00:05:47,659 --> 00:05:49,659 So, here's what it looks like. 96 00:05:49,659 --> 00:05:54,920 This is just a little test database with a test table that I have up on my local machine here, 97 00:05:55,406 --> 00:05:58,540 and as soon as you select the table it shows you all the different fields 98 00:05:58,540 --> 00:06:03,411 that you have in the database, and then you can even add more fields as you go on. 99 00:06:04,028 --> 00:06:07,720 You know--if you wanted to add an integer, go ahead, and then here's another thing-- 100 00:06:07,720 --> 00:06:10,580 OTHER FIELD--even provides you with a little drop down 101 00:06:10,580 --> 00:06:14,982 just giving you all the different options for table columns. 102 00:06:15,818 --> 00:06:20,920 You can even check out the content in the database and just double click in there to add 103 00:06:20,920 --> 00:06:23,869 different content and--uh--yeah-- 104 00:06:23,869 --> 00:06:29,290 gives you a really nice way of working with databases on OS 10. 105 00:06:30,218 --> 00:06:34,000 There's more options like viewing different table infos and even doing custom queries 106 00:06:34,000 --> 00:06:36,319 from right inside the GUI. 107 00:06:36,320 --> 00:06:38,340 We'll have a link to this is in show notes. 108 00:06:38,340 --> 00:06:41,091 I believe you can get this at sequelpro.com. 109 00:06:41,091 --> 00:06:43,091 It's completely free. 110 00:06:43,091 --> 00:06:48,060 They're not sponsoring the show because it's free, but you can donate if you like the project. 111 00:06:48,060 --> 00:06:50,442 Once again, that's at sequelpro.com. 112 00:06:51,739 --> 00:06:53,739 Kind of a--kind of a neat thing. 113 00:06:53,739 --> 00:06:55,939 [Jim]: Yeah, usually--I've seen a lot of those projects, and I've tried to manage 114 00:06:55,939 --> 00:06:58,660 the database and the GUI, and a lot of them can be pretty janky, 115 00:06:58,660 --> 00:07:02,489 but that one looked like it was a pretty smooth, pretty well-designed, and easy to use. 116 00:07:02,489 --> 00:07:04,810 So, I'm excited to try it out. [Jason]: Yeah, it's pretty nice. 117 00:07:05,688 --> 00:07:08,219 Next up, we have a project called Editable for Bootstrap. 118 00:07:08,219 --> 00:07:10,219 [Editable for Bootstrap] [http://vitalets.github.com/bootstrap-editable] 119 00:07:10,219 --> 00:07:15,109 This is a sort of Javascript plug-ins that work with Twitter Boostrap to let you do an approximation 120 00:07:15,109 --> 00:07:18,239 of in-place editing with different fields. 121 00:07:18,239 --> 00:07:21,120 So, here's an example that they have on the site. 122 00:07:21,120 --> 00:07:23,381 There is a field for user name. 123 00:07:23,381 --> 00:07:27,510 You can actually click in there and then change it to something else. 124 00:07:27,510 --> 00:07:33,877 You click the little button and it edits right in place and updates the HTML client side. 125 00:07:33,877 --> 00:07:40,630 This works with all sorts of different field types, including dates--it gives you a little date pop-up. 126 00:07:40,630 --> 00:07:45,491 Click the check mark and wait--pretty much anything you need. 127 00:07:45,491 --> 00:07:50,600 There's also a ton of different events that you can hook into, and it's pretty easy. 128 00:07:50,600 --> 00:07:55,122 It works with jQuery and Boostrap greater than or equal to 2.0.4. 129 00:07:55,699 --> 00:07:59,810 [Jim]: So, is it actually editing form fields and the idea is just to submit them through, 130 00:07:59,810 --> 00:08:03,988 or is it actually editing sort of in-place content, and then you'd have to handle it in JavaScript. 131 00:08:03,988 --> 00:08:05,988 What's the deal with this? 132 00:08:05,988 --> 00:08:08,900 [Jason]: It's editing in-place content, and then you handle that in the JavaScript. 133 00:08:08,900 --> 00:08:11,269 [Jim]: Or call back with a new content, and then you could use 134 00:08:11,269 --> 00:08:14,010 Ajax or something to update the server or page. 135 00:08:14,010 --> 00:08:17,700 [Jason]: Yeah, and it gives you great and--a pretty thorough API to work with. 136 00:08:17,700 --> 00:08:19,700 [Jim]: Oh, that's pretty cool. 137 00:08:19,700 --> 00:08:21,960 I got a cool jQuery plug-in. [Jason]: Sweet. 138 00:08:21,960 --> 00:08:24,679 [Jim]: It's called jPannelMenu. [Jason]: What does that do? 139 00:08:24,679 --> 00:08:28,349 [Jim]: It creates a panel menu in jQuery. [Jason]: Wow. [jPanelMenu] [http://jpanelmenu.com] 140 00:08:28,349 --> 00:08:30,399 [Jim]: Hence the name. [Jason]: I get the name, but-- 141 00:08:30,399 --> 00:08:34,440 [Jim]: Everything cool starts with a J. [Jason]: Agreed. [laughs] 142 00:08:34,440 --> 00:08:37,240 [Jim]: If you've ever used the mobile Apps for Facebook or Google, 143 00:08:37,240 --> 00:08:42,039 you're probably familiar with that little menu that's sort of behind the application. 144 00:08:42,039 --> 00:08:45,680 You can either slide it or hit a little button and it kind of comes out in a little list. 145 00:08:45,680 --> 00:08:48,160 Well, this allows you to make it pretty easily. 146 00:08:48,160 --> 00:08:52,230 You install it and click the button an d your whole page moves to the side 147 00:08:52,230 --> 00:08:55,660 and you have a nice, well-designed little menu that you can click, 148 00:08:55,660 --> 00:08:58,479 and then they're just normal links, and you can just move it right back. 149 00:08:58,479 --> 00:09:00,880 It even has animations. It's pretty cool. 150 00:09:00,880 --> 00:09:04,510 The only thing that I'd say to watch out for is that the way that it works is 151 00:09:04,510 --> 00:09:10,540 when it's activated, it'll actually take all the content from your body and move it into a div, 152 00:09:10,540 --> 00:09:12,540 which it then moves to the side. 153 00:09:12,540 --> 00:09:18,580 So, if you have any JavaScript or CSS, that is, expecting elements to be directly in the body, 154 00:09:18,580 --> 00:09:22,360 it is slightly changing your structure, so you may have to watch out for that. 155 00:09:22,928 --> 00:09:27,480 [Jason]: Gotcha. Good tip! Cool plug-in. I--uh--really like it. [Jim]: It's pretty cool. 156 00:09:27,978 --> 00:09:32,421 [Jason]: So, finally, we're going to wrap this up--a blog post on what every programmer 157 00:09:32,421 --> 00:09:35,940 absolutely, positively needs to know about 158 00:09:35,940 --> 00:09:40,378 encoding encodings and character sets when working with text. 159 00:09:40,378 --> 00:09:42,378 [Encodings And Character Sets With Text] [http://kunststube.net/encoding/] 160 00:09:42,378 --> 00:09:44,800 This is a very, very thorough blog post that provides a fantastic introduction 161 00:09:44,800 --> 00:09:49,500 to what's actually happening behind the scenes on your computer when you interact 162 00:09:49,500 --> 00:09:52,091 with any kind of text in a programmatic way. 163 00:09:52,094 --> 00:09:56,380 It's not as simple as just writing single letters and characters to the screen. 164 00:09:56,380 --> 00:09:59,519 We have all sorts of different encodings and encoding styles. 165 00:09:59,519 --> 00:10:03,618 [Jim]: So, again, the 1s and 0s--you have to have some sort of way of defining 166 00:10:03,618 --> 00:10:05,618 what 1s and 0s mean what, right? 167 00:10:05,618 --> 00:10:07,618 [Jason]: Yep, exactly. 168 00:10:07,629 --> 00:10:10,872 So, this is not something we're going to cover completely on the show, 169 00:10:10,872 --> 00:10:13,390 but we do want you to read this whole thing, 170 00:10:13,390 --> 00:10:18,673 because there is going to be a quiz next week on the treehouse show, episode 19. 171 00:10:19,100 --> 00:10:21,680 [Jim]: Alright, prepare yourself. [Jason]: Yes, definitely be prepared. 172 00:10:22,289 --> 00:10:25,740 Um--so, that's it--that's all we've got for this week. Jim, who are you on Twitter? 173 00:10:25,740 --> 00:10:29,569 [Jim]: I am JimRHOSKINS on Twitter. [Jason]: And I am @JSEIFER. ?[music]? 174 00:10:29,569 --> 00:10:31,569 [Jason Seifer @JSEIFER] [Jim Hoskins @JIMRHOSKINS] 175 00:10:31,569 --> 00:10:33,248 If you want more information about anything we talked about this week, head over to 176 00:10:33,248 --> 00:10:37,670 our Youtube channel at youtube.com/gotreehouse. [Treehouse Youtube Channel] [http://youtube.com/gotreehouse] 177 00:10:38,250 --> 00:10:40,600 [Jim]: This episode is brought to you by Treehouse, the best way 178 00:10:40,600 --> 00:10:45,220 to learn how to design and develop web applications, websites, and mobile Apps. 179 00:10:45,240 --> 00:10:48,022 Check us out at teamtreehouse.com. [Treehouse] [http://teamtreehouse.com] 180 00:10:48,319 --> 00:10:50,319 [Jason]: We'll see you later. 181 00:10:50,349 --> 00:10:52,349 [The treehouse Show] ?[music]?