[NIck Pettit - @nickrp] I'm Nick Pettit. >>[Jason Seifer - @jseifer] I'm Jason Seifer.

And you're watching The Treehouse Show, your weekly dose of Internets

where we talk about all things web design, web development and more.

In this episode we'll be talking about dev tool secrets,

CSS buttons, statistics and more.

Let's check it out.

[Morse code beeping sound]

[The Treehouse Show]

So first up, Nick, we have devtoolsecrets.com, which is the secrets of the browser developer tools.

[Secrets of the Browser Developer Tools - Secrets - trhou.se/19j4pBM]

[whispering] Secrets. >>Yes, lots of secrets hidden in those developer tools inside of a browser.

If you've ever used the developer tools inside of Chrome or Safari,

that's what this is going into.

So it's going to tell you some secrets— >>[Pettit whispering] Secrets.

[Seifer] about the developer tools.

First off, where are they?

That would be the first part of finding the developer tools.

Hey! This is how you go through, find the developer tools.

This is just a ton of different tips on using the developer tools and what can happen.

Did you know that you have a console where you can send different messages to it

depending on what you want to do?

The great thing about this site is there's even videos as well as instructions

on how to use most of these different things.

There are just a ton of things that the dev tools can do which you may not know about

because they're secrets. >>[Pettit whispering] Secrets.

Anyway, the dev tools are a really, really powerful part of your web browser,

so check them out and learn their secrets at devtoolsecrets.com.

I guess it's not really a secret anymore. >>No. We let the cat out of the bag.

Oops. Next up is a really cool PSD from Teehan+Lax called iOS 7 GUI PSD. [trhou.se/191Kfj5]

It's a Photoshop template of GUI elements found in the beta 1 release of iOS 7.

You can go ahead and download the PSD right there.

But if we scroll down the page, we can get a preview of what it actually looks like.

This is really handy if you want to create high-fidelity mockups of an app in iOS 7.

For example, you could grab the keyboard that you want to use

and then you could maybe grab this Twitter interface and all these buttons and stuff

and put together your own app in Photoshop before you actually start coding it up in Xcode.

Pretty cool, pretty useful, and it's also not just useful to native app developers,

it's also definitely useful to web developers that might want to create a native look and feel mobile app.

Pretty cool stuff. >>Yeah. Get a leg up on the competition by downloading that PSD. >>That's right.

Next up we have a website called JSDB.io. [JSDB.io - The Database of JavaScript Libraries - trhou.se/19j4pBN]

As you may expect from the domain name, this is a database of JavaScript projects.

You may recognize some of these projects from The Treehouse Show.

We've talked about them in the past.

But you're like, "Oh, hey, how do I find them?"

Well, I guess I could go re-watch every single episode or go the show notes.

Or I could just go to JSDB.io and maybe I remember something about it and I could search.

The really nice thing about this site is that it has all sorts of classifications for these different JavaScript libraries.

You can go through, click on Forms.

It will filter out for you everything that works with forms, images, sliders,

2D graphics, 3D graphics, development aids.

So this is going to have things like test libraries, and just a ton of different stuff is in here.

You can sort by popularity, newness, and what is trending or on the rise.

Anyway, really, really great site.

You can follow it on Twitter for updates.

I love it. A lot of times I'll forget what library it is I'm searching for or talked about.

Maybe I'll only remember part of it. Boom. Search at JSDB.

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.

Very cool stuff. Next up is this new UI concept for loading buttons, I guess, for lack of a better term.

[Ladda - trhou.se/191KcDK] Basically there are these buttons

that when you click on them it shows you that something is happening in the background

and then, oh, it went ahead and completed.

There's a bunch of different concepts here.

So if we click on some of these, you can see what some of the different animations look like.

We'll look at a couple of them here.

That's pretty nifty. It actually has a built-in progress bar on those two.

And of course they come in a wide variety of sizes and colors.

You can head over to GitHub to check out this project.

It's called Ladda.

You can apply Ladda buttons to basically just buttons within any web app or website that you're working on.

Pretty cool.

I think it's a really nice concept in terms of UI.

I really like the way that it combines the loading interface with the actual Submit button

and gives the user a little bit more direct feedback

that's actually close to where they clicked on the screen

so it's really obvious immediately what's happening.

It's not like some loading spinner that takes up the whole screen or is way off to the side.

It's right where they click so they know that, oh, okay, it's doing something.

Pretty cool. I like it a lot. >>Yeah. Really nice. >>Yep.

Next up we have a project called HTML Inspector. [philipwalton/html-inspector - trhou.se/19j4pBO]

This is really, really cool.

What it is, it's a piece of JavaScript that you can put on your web page.

It also happens to be one of the alternate names for The Treehouse Show.

We almost went with HTML Inspector.

Yeah. Now that's just going to be our Halloween costume. >>That's right.

Going to be some crazy parties. >>Looking forward to it.

This is interesting. It's a piece of JavaScript.

You put this in your web page and then it will look for common errors in your HTML

or JavaScript and display them right on the page.

There is a nice screenshot right here.

So you can see after the script runs, any errors will be reported to the console.

Or if you want to, you can even draw these right out on the page.

It gives you some really, really great information.

The examples show you've got style elements outside the head

and you need to declare these as scoped,

you have invalid HTML elements, and just a ton of stuff.

It's also really, really configurable.

So you can give it a list of rules that you want to go through.

Maybe you don't want to check for everything,

you're only developing for a certain subset of browsers, only check for that.

Anyway, ton of different rules, ton of different possible validations that you can have,

and it even goes through some best practices that you can use on your site.

This is available on GitHub.

You can find the link in the show notes at YouTube.com/gotreehouse

or in iTunes search for us at The Treehouse Show.

Next up is Simple Statistics, a programming library for doing simple statistics. [trhou.se/191KcDL]

Ooh, that's very well named then. >>I know that because it says it right on the web page. >>Nice.

[Pettit] It says that Simple Statistics is a JavaScript library

that does descriptive statistics, regression, and classification.

It can tell you basic things like minimum and maximum,

but it can also compute tricky things like standard deviation and sample correlation.

I understand some of those words.

If we scroll down, you can see what an actual code example looks like.

You go ahead and calculate things as you normally would in JavaScript,

and then you can call Simple Statistics and use things like mean or minimum or quantile, etc.

We scroll a little bit further down here.

There's the full API documentation, and it's categorized into Basic Array Operations as well as Regression—

there it is right there—and then Classification.

If you're a data nerd and you're super into statistics,

then this is definitely the JavaScript library for you.

You can install it with the node package manager,

and you can also install it through the browser just by downloading the zip file,

or you can install it through Git.

Pretty cool stuff and, like I said, if you're super into statistics,

that's definitely a JavaScript library for you.

We actually have a data scientist here at Treehouse,

and I'm planning to tell him about this.

Let us know how that goes. >>I will.

Next up we have a CSS3 framework with animations.

It's called Magic. [Magic CSS3 Animations - trhou.se/19j4rtz]

[Pettit] That's really what CSS3 is. >>[Seifer] Yeah. It's complete magic.

If you keep an eye over on the left side of the screen here, there's this little element,

and you can check out some of these magic effects.

Ready? Swap. Wow. Look at that. Did you see that? >>[Pettit] Wow.

[Seifer] TwisterInDown.

I'm sorry. That is 3 separate words—twister, in, down.

I said that as if it was the name of a dance move.

Anyway, really nice effect.

There are different bling effects. Look at that. PuffIn, puffOut.

[Pettit] Puff Daddy. >>[Seifer] Yeah. VanishOut. What's going on there?

[Pettit] Whatever you want to do. >>[Seifer] Yeah. Anyway, tons of different effects that you can use.

This might be useful at some point in your development, so check that out.

CSS3 Magic.

Very cool stuff.

Well, if you like buttons— >>Love buttons. >>we've got even more buttons for you.

[Creative Button Styles | Codrops - trhou.se/19KieE] Over on the Codrops website there's a post called Creative Button Styles.

We'll just jump right into the demo here.

They have a couple of different buttons right here at the top

where if you hover over them there's these various cool effects.

If we scroll down a little bit more, there's these flat-looking buttons.

They actually look a lot like the buttons on the Treehouse website with this little shadow right beneath them.

That's pretty nifty. >>[Seifer] Yeah. If you haven't seen that up close, go to teamtreehouse.com.

[Pettit] That's right. Check it out.

They also have these buttons here that are just kind of yellow-looking.

The ones I really wanted to get to, though, are down here at the bottom of the page. There they are.

When you click on these, like Order Item, you see that little truck there? Bam, there it goes.

[Seifer] Wow! >>[Pettit] Your item has been ordered. >>[Seifer] Thank you.

[Pettit] If you want to send a message, watch the envelope here. It's sent. It's gone.

Puffed right out of there.

If you want to throw all these documents into the trash, you can go ahead and click this right here.

[Seifer] Click the heart. Click the heart. Click the heart.

[Pettit] Oh, that's amazing. >>[Seifer] Yeah. That would be a good button on Valentine's Day.

[Pettit] That's from you to me, Jason.

[Seifer] You're welcome. >>[Pettit] There's also a couple of others here.

There's this little plus, this star here, very similar to the heart.

It might be cool if you want to favorite something.

Pretty cool buttons here. >>[Seifer] Take out the trash. Click on the trash.

[Pettit] The trash? >>[Seifer] Click on the trash. >>[Pettit] I already clicked the trash. >>[Seifer] Oh.

[Pettit] There it is. Oh, the other trash, you mean, where it sucked in all the documents?

[Seifer] Yeah. That was cool. >>[Pettit] Yeah. That was cool, like, 5 minutes ago.

[Seifer] Yeah. >>Welcome to the conversation, Jason.

Do they have a button which has a train icon on it which could be reminiscent of this segment,

which is a train wreck? >>I don't think so. They have the Order Item button, which is a truck. That's pretty close.

Eh, good enough. >>Yep. [both chuckling]

I think that's a good point to end the show. Who are you on Twitter?

I am @nickrp. >>And I am @jseifer.

For more information on anything we talked about on this show

check out our YouTube channel at YouTube.com/gotreehouse.

And if you like this podcast, please rate us in iTunes. Search for us at The Treehouse Show.

And of course if you'd like to see more videos like this one about web design,

web development, business and so much more, be sure to check us out at teamtreehouse.com.

Thanks so much for watching, and we'll see you next week.

[Morse code beeping sound]