Episode 47: Dev Tool Secrets

[NIck Pettit - @nickrp] I'm Nick Pettit. >>[Jason Seifer - @jseifer] I'm Jason Seifer. 0:01 And you're watching The Treehouse Show, your weekly dose of Internets 0:03 where we talk about all things web design, web development and more. 0:05 In this episode we'll be talking about dev tool secrets, 0:09 CSS buttons, statistics and more. 0:12 Let's check it out. 0:16 [Morse code beeping sound] 0:18 [The Treehouse Show] 0:21 So first up, Nick, we have devtoolsecrets.com, which is the secrets of the browser developer tools. 0:23 [Secrets of the Browser Developer Tools - Secrets - trhou.se/19j4pBM] 0:28 [whispering] Secrets. >>Yes, lots of secrets hidden in those developer tools inside of a browser. 0:30 If you've ever used the developer tools inside of Chrome or Safari, 0:37 that's what this is going into. 0:40 So it's going to tell you some secrets— >>[Pettit whispering] Secrets. 0:42 [Seifer] about the developer tools. 0:45 First off, where are they? 0:47 That would be the first part of finding the developer tools. 0:49 Hey! This is how you go through, find the developer tools. 0:52 This is just a ton of different tips on using the developer tools and what can happen. 0:55 Did you know that you have a console where you can send different messages to it 1:01 depending on what you want to do? 1:04 The great thing about this site is there's even videos as well as instructions 1:06 on how to use most of these different things. 1:10 There are just a ton of things that the dev tools can do which you may not know about 1:13 because they're secrets. >>[Pettit whispering] Secrets. 1:19 Anyway, the dev tools are a really, really powerful part of your web browser, 1:22 so check them out and learn their secrets at devtoolsecrets.com. 1:26 I guess it's not really a secret anymore. >>No. We let the cat out of the bag. 1:31 Oops. Next up is a really cool PSD from Teehan+Lax called iOS 7 GUI PSD. [trhou.se/191Kfj5] 1:35 It's a Photoshop template of GUI elements found in the beta 1 release of iOS 7. 1:44 You can go ahead and download the PSD right there. 1:50 But if we scroll down the page, we can get a preview of what it actually looks like. 1:53 This is really handy if you want to create high-fidelity mockups of an app in iOS 7. 1:59 For example, you could grab the keyboard that you want to use 2:06 and then you could maybe grab this Twitter interface and all these buttons and stuff 2:11 and put together your own app in Photoshop before you actually start coding it up in Xcode. 2:18 Pretty cool, pretty useful, and it's also not just useful to native app developers, 2:25 it's also definitely useful to web developers that might want to create a native look and feel mobile app. 2:31 Pretty cool stuff. >>Yeah. Get a leg up on the competition by downloading that PSD. >>That's right. 2:38 Next up we have a website called JSDB.io. [JSDB.io - The Database of JavaScript Libraries - trhou.se/19j4pBN] 2:45 As you may expect from the domain name, this is a database of JavaScript projects. 2:50 You may recognize some of these projects from The Treehouse Show. 2:56 We've talked about them in the past. 3:00 But you're like, "Oh, hey, how do I find them?" 3:01 Well, I guess I could go re-watch every single episode or go the show notes. 3:03 Or I could just go to JSDB.io and maybe I remember something about it and I could search. 3:06 The really nice thing about this site is that it has all sorts of classifications for these different JavaScript libraries. 3:12 You can go through, click on Forms. 3:19 It will filter out for you everything that works with forms, images, sliders, 3:22 2D graphics, 3D graphics, development aids. 3:27 So this is going to have things like test libraries, and just a ton of different stuff is in here. 3:30 You can sort by popularity, newness, and what is trending or on the rise. 3:38 Anyway, really, really great site. 3:43 You can follow it on Twitter for updates. 3:46 I love it. A lot of times I'll forget what library it is I'm searching for or talked about. 3:49 Maybe I'll only remember part of it. Boom. Search at JSDB. 3:55 It is a lot of stuff to keep track of, so it's really cool that there's one place where it's all kind of consolidated. >>Yeah. 3:58 Very cool stuff. Next up is this new UI concept for loading buttons, I guess, for lack of a better term. 4:04 [Ladda - trhou.se/191KcDK] Basically there are these buttons 4:12 that when you click on them it shows you that something is happening in the background 4:15 and then, oh, it went ahead and completed. 4:19 There's a bunch of different concepts here. 4:23 So if we click on some of these, you can see what some of the different animations look like. 4:25 We'll look at a couple of them here. 4:31 That's pretty nifty. It actually has a built-in progress bar on those two. 4:34 And of course they come in a wide variety of sizes and colors. 4:38 You can head over to GitHub to check out this project. 4:43 It's called Ladda. 4:47 You can apply Ladda buttons to basically just buttons within any web app or website that you're working on. 4:49 Pretty cool. 5:00 I think it's a really nice concept in terms of UI. 5:01 I really like the way that it combines the loading interface with the actual Submit button 5:06 and gives the user a little bit more direct feedback 5:12 that's actually close to where they clicked on the screen 5:16 so it's really obvious immediately what's happening. 5:21 It's not like some loading spinner that takes up the whole screen or is way off to the side. 5:23 It's right where they click so they know that, oh, okay, it's doing something. 5:28 Pretty cool. I like it a lot. >>Yeah. Really nice. >>Yep. 5:32 Next up we have a project called HTML Inspector. [philipwalton/html-inspector - trhou.se/19j4pBO] 5:36 This is really, really cool. 5:40 What it is, it's a piece of JavaScript that you can put on your web page. 5:42 It also happens to be one of the alternate names for The Treehouse Show. 5:45 We almost went with HTML Inspector. 5:50 Yeah. Now that's just going to be our Halloween costume. >>That's right. 5:52 Going to be some crazy parties. >>Looking forward to it. 5:55 This is interesting. It's a piece of JavaScript. 6:00 You put this in your web page and then it will look for common errors in your HTML 6:03 or JavaScript and display them right on the page. 6:07 There is a nice screenshot right here. 6:11 So you can see after the script runs, any errors will be reported to the console. 6:14 Or if you want to, you can even draw these right out on the page. 6:19 It gives you some really, really great information. 6:23 The examples show you've got style elements outside the head 6:26 and you need to declare these as scoped, 6:29 you have invalid HTML elements, and just a ton of stuff. 6:32 It's also really, really configurable. 6:36 So you can give it a list of rules that you want to go through. 6:39 Maybe you don't want to check for everything, 6:42 you're only developing for a certain subset of browsers, only check for that. 6:44 Anyway, ton of different rules, ton of different possible validations that you can have, 6:48 and it even goes through some best practices that you can use on your site. 6:53 This is available on GitHub. 6:57 You can find the link in the show notes at YouTube.com/gotreehouse 6:59 or in iTunes search for us at The Treehouse Show. 7:02 Next up is Simple Statistics, a programming library for doing simple statistics. [trhou.se/191KcDL] 7:06 Ooh, that's very well named then. >>I know that because it says it right on the web page. >>Nice. 7:11 [Pettit] It says that Simple Statistics is a JavaScript library 7:17 that does descriptive statistics, regression, and classification. 7:20 It can tell you basic things like minimum and maximum, 7:26 but it can also compute tricky things like standard deviation and sample correlation. 7:29 I understand some of those words. 7:33 If we scroll down, you can see what an actual code example looks like. 7:36 You go ahead and calculate things as you normally would in JavaScript, 7:40 and then you can call Simple Statistics and use things like mean or minimum or quantile, etc. 7:44 We scroll a little bit further down here. 7:51 There's the full API documentation, and it's categorized into Basic Array Operations as well as Regression— 7:54 there it is right there—and then Classification. 8:04 If you're a data nerd and you're super into statistics, 8:07 then this is definitely the JavaScript library for you. 8:11 You can install it with the node package manager, 8:15 and you can also install it through the browser just by downloading the zip file, 8:20 or you can install it through Git. 8:25 Pretty cool stuff and, like I said, if you're super into statistics, 8:27 that's definitely a JavaScript library for you. 8:32 We actually have a data scientist here at Treehouse, 8:35 and I'm planning to tell him about this. 8:38 Let us know how that goes. >>I will. 8:41 Next up we have a CSS3 framework with animations. 8:43 It's called Magic. [Magic CSS3 Animations - trhou.se/19j4rtz] 8:48 [Pettit] That's really what CSS3 is. >>[Seifer] Yeah. It's complete magic. 8:51 If you keep an eye over on the left side of the screen here, there's this little element, 8:55 and you can check out some of these magic effects. 9:00 Ready? Swap. Wow. Look at that. Did you see that? >>[Pettit] Wow. 9:03 [Seifer] TwisterInDown. 9:06 I'm sorry. That is 3 separate words—twister, in, down. 9:08 I said that as if it was the name of a dance move. 9:13 Anyway, really nice effect. 9:15 There are different bling effects. Look at that. PuffIn, puffOut. 9:18 [Pettit] Puff Daddy. >>[Seifer] Yeah. VanishOut. What's going on there? 9:22 [Pettit] Whatever you want to do. >>[Seifer] Yeah. Anyway, tons of different effects that you can use. 9:25 This might be useful at some point in your development, so check that out. 9:29 CSS3 Magic. 9:33 Very cool stuff. 9:36 Well, if you like buttons— >>Love buttons. >>we've got even more buttons for you. 9:38 [Creative Button Styles | Codrops - trhou.se/19KieE] Over on the Codrops website there's a post called Creative Button Styles. 9:42 We'll just jump right into the demo here. 9:50 They have a couple of different buttons right here at the top 9:53 where if you hover over them there's these various cool effects. 9:57 If we scroll down a little bit more, there's these flat-looking buttons. 10:01 They actually look a lot like the buttons on the Treehouse website with this little shadow right beneath them. 10:06 That's pretty nifty. >>[Seifer] Yeah. If you haven't seen that up close, go to teamtreehouse.com. 10:11 [Pettit] That's right. Check it out. 10:15 They also have these buttons here that are just kind of yellow-looking. 10:16 The ones I really wanted to get to, though, are down here at the bottom of the page. There they are. 10:22 When you click on these, like Order Item, you see that little truck there? Bam, there it goes. 10:26 [Seifer] Wow! >>[Pettit] Your item has been ordered. >>[Seifer] Thank you. 10:32 [Pettit] If you want to send a message, watch the envelope here. It's sent. It's gone. 10:35 Puffed right out of there. 10:39 If you want to throw all these documents into the trash, you can go ahead and click this right here. 10:41 [Seifer] Click the heart. Click the heart. Click the heart. 10:46 [Pettit] Oh, that's amazing. >>[Seifer] Yeah. That would be a good button on Valentine's Day. 10:49 [Pettit] That's from you to me, Jason. 10:52 [Seifer] You're welcome. >>[Pettit] There's also a couple of others here. 10:55 There's this little plus, this star here, very similar to the heart. 10:58 It might be cool if you want to favorite something. 11:01 Pretty cool buttons here. >>[Seifer] Take out the trash. Click on the trash. 11:04 [Pettit] The trash? >>[Seifer] Click on the trash. >>[Pettit] I already clicked the trash. >>[Seifer] Oh. 11:07 [Pettit] There it is. Oh, the other trash, you mean, where it sucked in all the documents? 11:10 [Seifer] Yeah. That was cool. >>[Pettit] Yeah. That was cool, like, 5 minutes ago. 11:15 [Seifer] Yeah. >>Welcome to the conversation, Jason. 11:19 Do they have a button which has a train icon on it which could be reminiscent of this segment, 11:21 which is a train wreck? >>I don't think so. They have the Order Item button, which is a truck. That's pretty close. 11:27 Eh, good enough. >>Yep. [both chuckling] 11:33 I think that's a good point to end the show. Who are you on Twitter? 11:36 I am @nickrp. >>And I am @jseifer. 11:39 For more information on anything we talked about on this show 11:41 check out our YouTube channel at YouTube.com/gotreehouse. 11:44 And if you like this podcast, please rate us in iTunes. Search for us at The Treehouse Show. 11:48 And of course if you'd like to see more videos like this one about web design, 11:52 web development, business and so much more, be sure to check us out at teamtreehouse.com. 11:56 Thanks so much for watching, and we'll see you next week. 12:01 [Morse code beeping sound] 12:05