1
00:00:01,240 --> 00:00:03,220
[NIck Pettit - @nickrp] I'm Nick Pettit. >>[Jason Seifer - @jseifer] I'm Jason Seifer.

2
00:00:03,220 --> 00:00:05,870
And you're watching The Treehouse Show, your weekly dose of Internets

3
00:00:05,870 --> 00:00:09,230
where we talk about all things web design, web development and more.

4
00:00:09,230 --> 00:00:12,670
In this episode we'll be talking about dev tool secrets,

5
00:00:12,670 --> 00:00:16,100
CSS buttons, statistics and more.

6
00:00:16,100 --> 00:00:18,050
Let's check it out.

7
00:00:18,050 --> 00:00:21,620
[Morse code beeping sound]

8
00:00:21,620 --> 00:00:23,650
[The Treehouse Show]

9
00:00:23,650 --> 00:00:28,630
So first up, Nick, we have devtoolsecrets.com, which is the secrets of the browser developer tools.

10
00:00:28,630 --> 00:00:30,630
[Secrets of the Browser Developer Tools - Secrets - trhou.se/19j4pBM]

11
00:00:30,630 --> 00:00:37,320
[whispering] Secrets.  >>Yes, lots of secrets hidden in those developer tools inside of a browser.

12
00:00:37,320 --> 00:00:40,910
If you've ever used the developer tools inside of Chrome or Safari,

13
00:00:40,910 --> 00:00:42,760
that's what this is going into.

14
00:00:42,760 --> 00:00:45,760
So it's going to tell you some secrets— >>[Pettit whispering] Secrets.

15
00:00:45,760 --> 00:00:47,180
[Seifer] about the developer tools.

16
00:00:47,180 --> 00:00:49,150
First off, where are they?

17
00:00:49,150 --> 00:00:52,270
That would be the first part of finding the developer tools.

18
00:00:52,270 --> 00:00:55,810
Hey! This is how you go through, find the developer tools.

19
00:00:55,810 --> 00:01:01,160
This is just a ton of different tips on using the developer tools and what can happen.

20
00:01:01,160 --> 00:01:04,670
Did you know that you have a console where you can send different messages to it

21
00:01:04,670 --> 00:01:06,430
depending on what you want to do?

22
00:01:06,430 --> 00:01:10,660
The great thing about this site is there's even videos as well as instructions

23
00:01:10,660 --> 00:01:13,250
on how to use most of these different things.

24
00:01:13,250 --> 00:01:19,810
There are just a ton of things that the dev tools can do which you may not know about

25
00:01:19,810 --> 00:01:22,820
because they're secrets. >>[Pettit whispering] Secrets.

26
00:01:22,820 --> 00:01:26,780
Anyway, the dev tools are a really, really powerful part of your web browser,

27
00:01:26,780 --> 00:01:31,160
so check them out and learn their secrets at devtoolsecrets.com.

28
00:01:31,160 --> 00:01:35,020
I guess it's not really a secret anymore. >>No. We let the cat out of the bag.

29
00:01:35,020 --> 00:01:44,080
Oops. Next up is a really cool PSD from Teehan+Lax called iOS 7 GUI PSD. [trhou.se/191Kfj5]

30
00:01:44,080 --> 00:01:50,370
It's a Photoshop template of GUI elements found in the beta 1 release of iOS 7.

31
00:01:50,370 --> 00:01:53,570
You can go ahead and download the PSD right there.

32
00:01:53,570 --> 00:01:59,270
But if we scroll down the page, we can get a preview of what it actually looks like.

33
00:01:59,270 --> 00:02:06,940
This is really handy if you want to create high-fidelity mockups of an app in iOS 7.

34
00:02:06,940 --> 00:02:11,280
For example, you could grab the keyboard that you want to use

35
00:02:11,280 --> 00:02:18,660
and then you could maybe grab this Twitter interface and all these buttons and stuff

36
00:02:18,660 --> 00:02:25,620
and put together your own app in Photoshop before you actually start coding it up in Xcode.

37
00:02:25,620 --> 00:02:31,540
Pretty cool, pretty useful, and it's also not just useful to native app developers,

38
00:02:31,540 --> 00:02:38,540
it's also definitely useful to web developers that might want to create a native look and feel mobile app.

39
00:02:38,540 --> 00:02:45,250
Pretty cool stuff. >>Yeah. Get a leg up on the competition by downloading that PSD. >>That's right.

40
00:02:45,250 --> 00:02:50,260
Next up we have a website called JSDB.io. [JSDB.io - The Database of JavaScript Libraries - trhou.se/19j4pBN]

41
00:02:50,260 --> 00:02:56,590
As you may expect from the domain name, this is a database of JavaScript projects.

42
00:02:56,590 --> 00:03:00,020
You may recognize some of these projects from The Treehouse Show.

43
00:03:00,020 --> 00:03:01,990
We've talked about them in the past.

44
00:03:01,990 --> 00:03:03,790
But you're like, "Oh, hey, how do I find them?"

45
00:03:03,790 --> 00:03:06,980
Well, I guess I could go re-watch every single episode or go the show notes.

46
00:03:06,980 --> 00:03:12,770
Or I could just go to JSDB.io and maybe I remember something about it and I could search.

47
00:03:12,770 --> 00:03:19,960
The really nice thing about this site is that it has all sorts of classifications for these different JavaScript libraries.

48
00:03:19,960 --> 00:03:22,390
You can go through, click on Forms.

49
00:03:22,390 --> 00:03:27,170
It will filter out for you everything that works with forms, images, sliders,

50
00:03:27,170 --> 00:03:30,290
2D graphics, 3D graphics, development aids.

51
00:03:30,290 --> 00:03:38,140
So this is going to have things like test libraries, and just a ton of different stuff is in here.

52
00:03:38,140 --> 00:03:43,980
You can sort by popularity, newness, and what is trending or on the rise.

53
00:03:43,980 --> 00:03:46,090
Anyway, really, really great site.

54
00:03:46,090 --> 00:03:49,430
You can follow it on Twitter for updates.

55
00:03:49,430 --> 00:03:55,110
I love it. A lot of times I'll forget what library it is I'm searching for or talked about.

56
00:03:55,110 --> 00:03:58,040
Maybe I'll only remember part of it. Boom. Search at JSDB.

57
00:03:58,040 --> 00:04:04,420
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.

58
00:04:04,420 --> 00:04:12,310
Very cool stuff. Next up is this new UI concept for loading buttons, I guess, for lack of a better term.

59
00:04:12,310 --> 00:04:15,330
[Ladda - trhou.se/191KcDK] Basically there are these buttons

60
00:04:15,330 --> 00:04:19,870
that when you click on them it shows you that something is happening in the background

61
00:04:19,870 --> 00:04:23,280
and then, oh, it went ahead and completed.

62
00:04:23,280 --> 00:04:25,510
There's a bunch of different concepts here.

63
00:04:25,510 --> 00:04:31,240
So if we click on some of these, you can see what some of the different animations look like.

64
00:04:31,240 --> 00:04:34,060
We'll look at a couple of them here.

65
00:04:34,060 --> 00:04:38,540
That's pretty nifty. It actually has a built-in progress bar on those two.

66
00:04:38,540 --> 00:04:43,240
And of course they come in a wide variety of sizes and colors.

67
00:04:43,240 --> 00:04:47,460
You can head over to GitHub to check out this project.

68
00:04:47,460 --> 00:04:49,990
It's called Ladda.

69
00:04:49,990 --> 00:05:00,010
You can apply Ladda buttons to basically just buttons within any web app or website that you're working on.

70
00:05:00,010 --> 00:05:01,460
Pretty cool.

71
00:05:01,460 --> 00:05:06,190
I think it's a really nice concept in terms of UI.

72
00:05:06,190 --> 00:05:12,760
I really like the way that it combines the loading interface with the actual Submit button

73
00:05:12,760 --> 00:05:16,670
and gives the user a little bit more direct feedback

74
00:05:16,670 --> 00:05:21,690
that's actually close to where they clicked on the screen

75
00:05:21,690 --> 00:05:23,840
so it's really obvious immediately what's happening.

76
00:05:23,840 --> 00:05:28,580
It's not like some loading spinner that takes up the whole screen or is way off to the side.

77
00:05:28,580 --> 00:05:32,950
It's right where they click so they know that, oh, okay, it's doing something.

78
00:05:32,950 --> 00:05:36,750
Pretty cool. I like it a lot. >>Yeah. Really nice. >>Yep.

79
00:05:36,750 --> 00:05:40,980
Next up we have a project called HTML Inspector. [philipwalton/html-inspector - trhou.se/19j4pBO]

80
00:05:40,980 --> 00:05:42,480
This is really, really cool.

81
00:05:42,480 --> 00:05:45,840
What it is, it's a piece of JavaScript that you can put on your web page.

82
00:05:45,840 --> 00:05:50,060
It also happens to be one of the alternate names for The Treehouse Show.

83
00:05:50,060 --> 00:05:52,590
We almost went with HTML Inspector.

84
00:05:52,590 --> 00:05:55,860
Yeah. Now that's just going to be our Halloween costume. >>That's right.

85
00:05:55,860 --> 00:06:00,270
Going to be some crazy parties. >>Looking forward to it.

86
00:06:00,270 --> 00:06:03,250
This is interesting. It's a piece of JavaScript.

87
00:06:03,250 --> 00:06:07,600
You put this in your web page and then it will look for common errors in your HTML

88
00:06:07,600 --> 00:06:11,120
or JavaScript and display them right on the page.

89
00:06:11,120 --> 00:06:14,420
There is a nice screenshot right here.

90
00:06:14,420 --> 00:06:19,530
So you can see after the script runs, any errors will be reported to the console.

91
00:06:19,530 --> 00:06:23,650
Or if you want to, you can even draw these right out on the page.

92
00:06:23,650 --> 00:06:26,380
It gives you some really, really great information.

93
00:06:26,380 --> 00:06:29,580
The examples show you've got style elements outside the head

94
00:06:29,580 --> 00:06:32,720
and you need to declare these as scoped,

95
00:06:32,720 --> 00:06:36,610
you have invalid HTML elements, and just a ton of stuff.

96
00:06:36,610 --> 00:06:39,890
It's also really, really configurable.

97
00:06:39,890 --> 00:06:42,200
So you can give it a list of rules that you want to go through.

98
00:06:42,200 --> 00:06:44,040
Maybe you don't want to check for everything,

99
00:06:44,040 --> 00:06:48,780
you're only developing for a certain subset of browsers, only check for that.

100
00:06:48,780 --> 00:06:53,210
Anyway, ton of different rules, ton of different possible validations that you can have,

101
00:06:53,210 --> 00:06:57,420
and it even goes through some best practices that you can use on your site.

102
00:06:57,420 --> 00:06:59,490
This is available on GitHub.

103
00:06:59,490 --> 00:07:02,790
You can find the link in the show notes at YouTube.com/gotreehouse

104
00:07:02,790 --> 00:07:06,100
or in iTunes search for us at The Treehouse Show.

105
00:07:06,100 --> 00:07:11,880
Next up is Simple Statistics, a programming library for doing simple statistics. [trhou.se/191KcDL]

106
00:07:11,880 --> 00:07:17,040
Ooh, that's very well named then. >>I know that because it says it right on the web page. >>Nice.

107
00:07:17,040 --> 00:07:20,820
[Pettit] It says that Simple Statistics is a JavaScript library

108
00:07:20,820 --> 00:07:26,040
that does descriptive statistics, regression, and classification.

109
00:07:26,040 --> 00:07:29,040
It can tell you basic things like minimum and maximum,

110
00:07:29,040 --> 00:07:33,680
but it can also compute tricky things like standard deviation and sample correlation.

111
00:07:33,680 --> 00:07:36,570
I understand some of those words.

112
00:07:36,570 --> 00:07:40,710
If we scroll down, you can see what an actual code example looks like.

113
00:07:40,710 --> 00:07:44,450
You go ahead and calculate things as you normally would in JavaScript,

114
00:07:44,450 --> 00:07:51,820
and then you can call Simple Statistics and use things like mean or minimum or quantile, etc.

115
00:07:51,820 --> 00:07:54,200
We scroll a little bit further down here.

116
00:07:54,200 --> 00:08:04,450
There's the full API documentation, and it's categorized into Basic Array Operations as well as Regression—

117
00:08:04,450 --> 00:08:07,860
there it is right there—and then Classification.

118
00:08:07,860 --> 00:08:11,780
If you're a data nerd and you're super into statistics,

119
00:08:11,780 --> 00:08:15,950
then this is definitely the JavaScript library for you.

120
00:08:15,950 --> 00:08:20,070
You can install it with the node package manager,

121
00:08:20,070 --> 00:08:25,080
and you can also install it through the browser just by downloading the zip file,

122
00:08:25,080 --> 00:08:27,950
or you can install it through Git.

123
00:08:27,950 --> 00:08:32,730
Pretty cool stuff and, like I said, if you're super into statistics,

124
00:08:32,730 --> 00:08:35,350
that's definitely a JavaScript library for you.

125
00:08:35,350 --> 00:08:38,360
We actually have a data scientist here at Treehouse,

126
00:08:38,360 --> 00:08:41,039
and I'm planning to tell him about this.

127
00:08:41,039 --> 00:08:43,679
Let us know how that goes. >>I will.

128
00:08:43,679 --> 00:08:48,690
Next up we have a CSS3 framework with animations.

129
00:08:48,690 --> 00:08:51,610
It's called Magic. [Magic CSS3 Animations - trhou.se/19j4rtz]

130
00:08:51,610 --> 00:08:55,640
[Pettit] That's really what CSS3 is. >>[Seifer] Yeah. It's complete magic.

131
00:08:55,640 --> 00:09:00,010
If you keep an eye over on the left side of the screen here, there's this little element,

132
00:09:00,010 --> 00:09:03,290
and you can check out some of these magic effects.

133
00:09:03,290 --> 00:09:06,880
Ready? Swap. Wow. Look at that. Did you see that? >>[Pettit] Wow.

134
00:09:06,880 --> 00:09:08,610
[Seifer] TwisterInDown.

135
00:09:08,610 --> 00:09:13,310
I'm sorry. That is 3 separate words—twister, in, down.

136
00:09:13,310 --> 00:09:15,810
I said that as if it was the name of a dance move.

137
00:09:15,810 --> 00:09:18,850
Anyway, really nice effect.

138
00:09:18,850 --> 00:09:22,320
There are different bling effects. Look at that. PuffIn, puffOut.

139
00:09:22,320 --> 00:09:25,580
[Pettit] Puff Daddy. >>[Seifer] Yeah. VanishOut. What's going on there?

140
00:09:25,580 --> 00:09:29,450
[Pettit] Whatever you want to do. >>[Seifer] Yeah. Anyway, tons of different effects that you can use.

141
00:09:29,450 --> 00:09:33,850
This might be useful at some point in your development, so check that out.

142
00:09:33,850 --> 00:09:36,630
CSS3 Magic.

143
00:09:36,630 --> 00:09:38,170
Very cool stuff.

144
00:09:38,170 --> 00:09:42,560
Well, if you like buttons— >>Love buttons. >>we've got even more buttons for you.

145
00:09:42,560 --> 00:09:50,410
[Creative Button Styles | Codrops - trhou.se/19KieE] Over on the Codrops website there's a post called Creative Button Styles.

146
00:09:50,410 --> 00:09:53,130
We'll just jump right into the demo here.

147
00:09:53,130 --> 00:09:57,580
They have a couple of different buttons right here at the top

148
00:09:57,580 --> 00:10:01,530
where if you hover over them there's these various cool effects.

149
00:10:01,530 --> 00:10:06,320
If we scroll down a little bit more, there's these flat-looking buttons.

150
00:10:06,320 --> 00:10:11,510
They actually look a lot like the buttons on the Treehouse website with this little shadow right beneath them.

151
00:10:11,510 --> 00:10:15,120
That's pretty nifty. >>[Seifer] Yeah. If you haven't seen that up close, go to teamtreehouse.com.

152
00:10:15,120 --> 00:10:16,920
[Pettit] That's right. Check it out.

153
00:10:16,920 --> 00:10:22,190
They also have these buttons here that are just kind of yellow-looking.

154
00:10:22,190 --> 00:10:26,570
The ones I really wanted to get to, though, are down here at the bottom of the page. There they are.

155
00:10:26,810 --> 00:10:32,050
When you click on these, like Order Item, you see that little truck there? Bam, there it goes.

156
00:10:32,050 --> 00:10:35,160
[Seifer] Wow! >>[Pettit] Your item has been ordered. >>[Seifer] Thank you.

157
00:10:35,160 --> 00:10:39,280
[Pettit] If you want to send a message, watch the envelope here. It's sent. It's gone.

158
00:10:39,280 --> 00:10:41,420
Puffed right out of there.

159
00:10:41,420 --> 00:10:46,250
If you want to throw all these documents into the trash, you can go ahead and click this right here.

160
00:10:46,250 --> 00:10:49,230
[Seifer] Click the heart. Click the heart. Click the heart.

161
00:10:49,230 --> 00:10:52,670
[Pettit] Oh, that's amazing. >>[Seifer] Yeah. That would be a good button on Valentine's Day.

162
00:10:52,670 --> 00:10:55,010
[Pettit] That's from you to me, Jason.

163
00:10:55,010 --> 00:10:58,290
[Seifer] You're welcome. >>[Pettit] There's also a couple of others here.

164
00:10:58,290 --> 00:11:01,750
There's this little plus, this star here, very similar to the heart.

165
00:11:01,750 --> 00:11:04,660
It might be cool if you want to favorite something.

166
00:11:04,660 --> 00:11:07,450
Pretty cool buttons here. >>[Seifer] Take out the trash. Click on the trash.

167
00:11:07,450 --> 00:11:10,300
[Pettit] The trash? >>[Seifer] Click on the trash. >>[Pettit] I already clicked the trash. >>[Seifer] Oh.

168
00:11:10,300 --> 00:11:15,150
[Pettit] There it is. Oh, the other trash, you mean, where it sucked in all the documents?

169
00:11:15,150 --> 00:11:19,610
[Seifer] Yeah. That was cool. >>[Pettit] Yeah. That was cool, like, 5 minutes ago.

170
00:11:19,610 --> 00:11:21,970
[Seifer] Yeah. >>Welcome to the conversation, Jason.

171
00:11:21,970 --> 00:11:27,710
Do they have a button which has a train icon on it which could be reminiscent of this segment,

172
00:11:27,710 --> 00:11:33,970
which is a train wreck? >>I don't think so. They have the Order Item button, which is a truck. That's pretty close.

173
00:11:33,970 --> 00:11:36,540
Eh, good enough. >>Yep. [both chuckling]

174
00:11:36,540 --> 00:11:39,530
I think that's a good point to end the show. Who are you on Twitter?

175
00:11:39,530 --> 00:11:41,910
I am @nickrp. >>And I am @jseifer.

176
00:11:41,910 --> 00:11:44,130
For more information on anything we talked about on this show

177
00:11:44,130 --> 00:11:48,050
check out our YouTube channel at YouTube.com/gotreehouse.

178
00:11:48,050 --> 00:11:52,370
And if you like this podcast, please rate us in iTunes. Search for us at The Treehouse Show.

179
00:11:52,370 --> 00:11:56,310
And of course if you'd like to see more videos like this one about web design,

180
00:11:56,310 --> 00:12:01,570
web development, business and so much more, be sure to check us out at teamtreehouse.com.

181
00:12:01,570 --> 00:12:05,740
Thanks so much for watching, and we'll see you next week.

182
00:12:05,740 --> 00:12:09,000
[Morse code beeping sound]