Episode 50: OAuth, Canvas, Dev Tools

I'm Nick Pettit. 0:00 >> I'm Jason Seifer And your watching The Treehouse Show. 0:01 Your weekly dose of internets, where we talk 0:04 about all things web design, web development and more. 0:05 >> In this episode, we'll be talking 0:08 about OAuth, CSS Zen Garden DevTools and more. 0:09 >> Let's check it out. 0:15 [MUSIC] 0:15 >> First up is this really cool web site called Meet the Ipsums. 0:22 Now, if you've ever been designing web pages before, you might have 0:26 needed to use some placeholder text in place of the real thing. 0:31 And that's where you usually use Lorem Ipsum text 0:35 to just kind of put in some filler text. 0:38 This site offers a whole bunch of different types of 0:41 Lorem Ipsum text that they've gathered from around the web. 0:43 And let's go ahead and take a look. 0:47 Look at that, you have normal lorem ipsum text, but then you have coffee ipsum, cat 0:50 ipsum, veggie ipsum, a whole bunch of other different ones. 0:55 If we scroll down here, you can see that there are quite a few of them. 1:01 So they've done a lot to put all these in one place. 1:05 There's even a Johnny Ipsum right there, shameless plug. 1:09 I did put that together based on things I feel like Johnny I would say. 1:12 But there's a whole bunch of 'em, and you can just click on any one of these 1:17 sites and go ahead and grab the Lorem 1:20 Ipsum text and then paste it into your website. 1:22 So, a pretty nifty site. 1:25 I think it's fun to use different types of Lorem Ipsum text just 1:27 because it adds a little bit more variety to your day-to-day design work. 1:30 >> And that's at meettheipsums.com. 1:35 >> That is correct. 1:37 >> I met the Ipsums recently. >> Did you? 1:38 >> I was at their house for dinner, and it was delightful. 1:40 Next up, we have a project called tracking.js, which is 1:44 built to change the way you interact with your browser. 1:47 Now, there's an interesting video that they have on their page, but in essence, 1:51 this guy is using two sticks that have glowing orbs on the end of them. 1:53 And then using the webcam, he can actually interact with his browser in real time. 1:58 >> Are those the Playstation Move, is that what those are? 2:04 >> I have no idea. 2:06 >> I think that's what he's using. 2:07 >> I don't game like you kids these days do. 2:08 >> I see. 2:10 >> But they have a nice video on the page here, 2:12 which luckily for all of our viewers is not loading right now. 2:14 >> Awesome. 2:18 >> but, but what's actually interesting about this is, you can see when he's using 2:19 this, you get the x, y and z coordinates of what is going on in 2:24 the different frames for the video. 2:30 So once you have these different coordinates, you can use 2:32 them in JavaScript to do really cool things on your pages. 2:35 You could use this to potentially design some 2:38 sort of in-browser game or pretty much anything. 2:41 Anyway we'll have a link to that in the show notes which you can get to 2:45 at youtube.com/gotreehouse or on iTunes search for us 2:48 at the treehouse show and leave us favorable reviews. 2:52 >> Please. >> Please. 2:56 >> Please. 2:58 >> If you like this show, that's one way that you 2:58 can, you know, thank us, by leaving us a review in iTunes. 3:00 It's better than money. 3:02 >> I, I think they got it, Jason. Alright. 3:04 Next up is this really cool tool called Webflow. 3:08 And on the site it says, design responsive web sites 3:11 visually, so I assume this allows you to do exactly that. 3:14 If we go ahead and click on Start Demo 3:19 here, it will load it up. Whoa, look at that. 3:21 >> Whoa! 3:25 >> Pulls in the UI on the left and right sides. 3:26 >> Is this the internet or the future? 3:28 >> You can go ahead and click on Desktop View, Tablet View, or Phone View. 3:30 So if I click on that, look at that. >> What! 3:34 >> It's a tablet. Click on that, now we're on an iPhone. 3:36 >> More like on a spaceship. >> Tomorrow is today. 3:40 >> In the future. >> Truly. 3:42 If we go ahead and click over on this panel 3:44 here we can go ahead and edit some of these style attributes. 3:46 So, if I, like, click on, oops, that's actually a real link. 3:49 >> Uh-oh! 3:52 >> Don't click it! 3:53 >> So, if we go ahead and click on one of 3:54 these, we can go ahead and change various style attributes over here. 3:56 And if we click on the navigator here, it will actually show us where that 4:02 element is in the DOM tree, so we can traverse the entire DOM tree here. 4:07 >> When you say navigator, do you mean Netscape Navigator? 4:11 >> Not exactly the same thing, but close. 4:14 And you can see that it has the entire down tree here so we 4:17 can go ahead and click on any one of these, so that's pretty nifty. 4:20 There's a bunch of other tools here that we don't really have time to get into. 4:24 For example you can toggle this responsive grid 4:29 and do a whole bunch of other cool stuff. 4:32 But after you're all done, 4:34 it will go ahead and output the code for you. 4:36 And I think, you know, overall, this is 4:40 a very different way to design responsive websites. 4:44 Normally, people will lay stuff out in Photoshop 4:47 and then do all of their responsive grid calculations. 4:50 Or they will actually just design in the browser and maybe 4:54 take a mobile first approach, and then scale up as needed. 4:58 This tool is basically a WYSIWYG tool, or what you see is what you 5:03 get, where you lay out all the elements on the page, and then you export the code. 5:08 Now, the difference is, or so they claim, this code is actually good. 5:14 The problem with WYSIWYG tools historically has been that 5:19 the code that they produce is actually not that great. 5:22 >> We're looking at you Microsoft Front Page. 5:26 >> That's right. But this is actually pretty good. 5:28 It's it's a new class of tools that are starting 5:32 to emerge because designing responsive sites can be really, really tricky. 5:35 Because you have to design all the 5:39 different proportions instead of thinking in pixels. 5:41 But this is a tool that might make it a little bit easier. 5:44 So I suggest giving it a try and seeing if it works into your work flow. 5:48 Or should I 5:52 say, web flow? >> Ooh. 5:53 >> [SOUND] Bam. 5:54 >> I see what you did there, that's good. 5:55 I like Web Flow, that's a good name. >> Yeah, yeah it's nice. 5:57 >> I feel like that's, you know, what you 6:00 get into when you're really rocking out some webpages. 6:01 >> Just a web flow. 6:03 >> Don't interrupt my web flow, I got this. 6:04 >> See, Jason, as a professional you have full license to coin your own terms. 6:06 >> Alright, full license. 6:10 >> So, web flow, is when you're just really rocking out and making webpages. 6:11 Look it up on Urban Dictionary. 6:16 >> In a few days cuz we have to add it. >> That's right. 6:20 >> Next up, OAuth.io. This is OAuth that just works. 6:22 Like I said it's OAuth.io or Oauthio, that 6:27 might be how you pronounce it, not really sure. 6:30 So one of the problems that you might 6:33 run into when you're integrating OAuth into your application. 6:34 Is that there's different versions of OAuth, which are slightly different 6:38 to use and there's just a ton of different OAuth providers and 6:42 you need to submit different URL's, and keys, 6:46 and tokens, and a whole bunch of stuff. 6:48 It can get kind of cumbersome to keep track 6:50 of everything and that's what OAuthio does for you. 6:52 This is actually a paid service and they're not sponsoring the show. 6:57 We just figured we should get that out there. 6:59 Just saw it. 7:00 Thought it was cool. Anyway it's very, very easy to use. 7:01 You just go on, set up your keys with OAuth.io. 7:05 Configure your OAuth provider and bam. 7:08 You're pretty much good to go. 7:11 Just integrate a couple of their scripts and you're ready to get rocking. 7:13 anyway, there's a ton of different API methods that you can use. 7:17 There's a, there's a great API for getting pretty much everything you need here. 7:21 Anyway check that out. 7:25 That's OAuth.io. >> Very cool stuff. 7:26 Well, next up is this fun CSS animation tool called Stylie. 7:30 I know it's fun and I 7:35 know it's an animation tool because it says that right on the webpage. 7:36 Actually there's a lot of other tools like 7:40 this that will help you create CSS3 animations. 7:41 It can be pretty difficult particularly if you 7:45 want to create your own custom animation curves. 7:48 But this will, makes it a lot easier 7:52 to create those very complex custom timing functions. 7:54 So, if you look here you can see that 7:59 this little sphere or circle is moving from left to right. 8:01 And I can actually toggle these coordinates here 8:06 to make it move a little bit differently. 8:11 But the really cool thing is over here. 8:14 I can actually change the animation that's happening over here. 8:17 And we can do pretty standard stuff like ease in, ease out, ease in quad, etcetera. 8:21 All the things that you've come to expect. 8:27 But there's actually a few things here that are much more complex. 8:31 So we're gonna try a bounce here. 8:35 And if I move this down, you can see that 8:38 it's actually bouncing along, which if you were to code 8:43 this up manually it would be very difficult to do 8:46 indeed, so if we click over here on the CSS 8:50 that it generates, and scroll down, you can see just how many key frames you would 8:52 actually need to create in order to create a nice, fluid bounce like that, so. 8:58 It's pretty incredible that this tool is able to do that. 9:04 All for you and I think it's definitely worth checking out. 9:07 >> Yeah, save you some time. >> Yup. 9:11 >> Next up, we have an article on the David Walsh blog called Nine 9:13 Mindblowing Canvas Demos. 9:17 Now, if you don't want your mind blown don't check out this article. 9:20 >> Especially because it's gonna blow your mind, nine times. 9:24 >> Yeah. So, maybe mentally prepare. 9:27 Take a a warm bath or something, before you, check out this article. 9:29 Now we've talked about one of these things, on, the Treehouse Show before. 9:33 Just saying we're a little ahead of the curve here. 9:37 We talked about number two which was the tear-able cloth. 9:39 Now tearable like, you could tear something. 9:43 Not terrible cloth. 9:45 >> Not as in, it was bad. >> Right. 9:46 >> Right. 9:48 >> But anyway, there's like I said, nine different mind-blowing demos. 9:49 And I'm not gonna go through all of them But there are really just a ton of things. 9:52 Check that out, it immediately crashed Chrome. 9:56 Let me let me reload that. 9:58 >> That's amazing. >> I know. 9:59 A wonderful demo. 10:01 Isn't that, isn't that a great thing about being live? 10:02 [LAUGH] anyway, just go ahead and trust me that more 10:04 of these work. 10:08 I'm not gonna go through and display any more, but assuming 10:08 that you can get it to work, they are pretty cool. 10:11 And we'll have that in the show notes. >> Alright. 10:13 >> Live TV, Nick. >> Well, next up. 10:17 >> That's what we're on right now. 10:19 >> [LAUGH] That's what we wish we were on right now. 10:21 Next up is CSS Zen Garden. Now, you might be thinking woah. 10:24 >> Woah. I've, I've heard of that before. 10:28 Where have I heard of that? >> Yeah. 10:30 Nick, I've heard of that before. >> You heard of it 10:31 ten years ago. >> What? 10:33 >> CSS Zen Garden was actually created back in 2003. 10:35 >> '03, baby. 10:38 And back then it was a really incredible example of what you could do with CSS. 10:39 A lot of contributors would take the exact same HTML, and then they would 10:45 apply their own styling to it, apply their own CSS without changing the HTML. 10:51 So that was the, the rule, it was that you couldn't change the HTML. 10:55 >> It was 10:58 a great showcase of CSS at the time, because this 10:58 is kind of before there were best practices for CSS integrated. 11:01 >> Exactly. 11:05 >> So, you know, it wasn't kind of, it 11:06 wasn't a standard thing for companies to be using 11:07 CSS, so it was a great place to go 11:09 to showcase your work and get best practices established. 11:11 >> And of course, over time, CSS became you 11:14 know, much more widespread, and best practices were established. 11:18 So, the 11:22 CSS Zen Garden kind of fell out of favor, and fell into disrepair. 11:23 I guess nobody really cared, or people forgot about it. 11:28 >> Yeah, there wasn't really a need for people to 11:31 contribute once CSS became, a best practice and a standard. 11:32 >> Exactly, but the CSS Zen Garden has been revived. 11:36 >> All right! 11:42 >> Now that we're living in this age of CSS3, responsive web 11:42 design, Retina Displays, and so many other things that 11:47 have thrown a wrench into what was standard practice. 11:51 So, it's a pretty exciting time to be using CSS and 11:55 CSS Zen Garden shows off all the cool stuff you can do. 12:01 So if we go ahead and click on maybe another one of these, A Robot Named Jimmy. 12:04 There it is. 12:10 Bam. 12:12 And the cool thing about this is, this is exactly the same HTML. 12:13 >> Scroll down. 12:19 Look at what Jimmy has, look at what Jimmy does. 12:20 He disappears. 12:21 >> Whoa. 12:22 Look at that. >> Thanks parallax scrolling. 12:23 >> Incredible, but it's the exactly the same HTML as this 12:24 page that you're looking at here, even though it looks super different. 12:29 And that just kind of demonstrates the power of CSS. 12:32 So, 12:37 I think it's really cool, and you can go ahead and actually 12:37 contribute new CSS files to this and yeah, definitely check it out. 12:40 >> I'm really glad to see that it's back, you know? 12:46 Now that we have all these great things that we can do 12:48 with CSS and there's so much available, you might forget about something. 12:51 >> There really is a need for it again. 12:54 It's great that it's back. >> Thanks, Dave Shay. 12:56 >> Thanks. 12:59 >> Next up, we have an article called the 13:00 Chrome DevTools Revolutions 2013, or 013, as we say here on the show. 13:02 So there are some new things here in the 13:08 Chrome Dev tools that we're just gonna through real quickly. 13:10 First is the concept of work spaces. 13:13 Work spaces are pretty interesting. 13:16 They can let you map resources served from a local web server, to files on disk. 13:17 So this means that you can edit 13:23 your different source files in the sources panel, 13:24 and those changes will persist right in the files locally. 13:27 So that's really, really awesome and just great to use 13:31 as you can see, you know you edit something in 13:34 your CSS rules on the left, they show that in 13:37 the dev tools right there, it's immediately reflected in your editor. 13:39 So let me go through and tell you how exactly to make that work. 13:44 You can also map folders to URLs, gives you kinda the, the same idea there. 13:48 You can even debug Sass in Chrome now which is a hugely 13:53 welcome edition since Sass is becoming, you know, more and more widespread. 13:57 Finally you can let's see, got Sass debugging, and then just a whole bunch of 14:03 things that you have in the Dev Tools, so go ahead and check this out. 14:08 Dev Tools have already been great. 14:12 There's way too much to keep track of as it is, 14:13 so go ahead and check out this article in the show notes. 14:15 >> Very cool stuff. >> Yeah. 14:19 >> Well, that is it for this week. 14:20 On Twitter, I am @nickrp. >> And I am @jseifer. 14:22 For more information on anything we talked about, including 14:24 show notes, check us out on Youtube at youtube.com/gotreehouse. 14:27 Or in iTunes, search for us at the Tree House Show. 14:31 And, don't forget to leave a review. 14:34 >> Please. 14:36 And, of course if you'd like to see more videos like 14:37 this one, about web design, web development, mobile and so much more. 14:39 Be sure 14:43 to check us out at Teamtreehouse.com. 14:44 Thanks so much for watching and we'll see you next week. 14:46 [MUSIC] 14:48

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

Sign up