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