1
00:00:01,380 --> 00:00:05,190
I'm Nick Petitt. >>And I'm Jason Seiffer. >>And you're watching the Treehouse Show,

2
00:00:05,190 --> 00:00:07,170
your weekly dose of Internets, where we talk about all 

3
00:00:07,170 --> 00:00:09,890
things web design, web development, and more. 

4
00:00:09,890 --> 00:00:12,920
>>In this episode, we'll be talking about flat UI colors,

5
00:00:12,920 --> 00:00:15,130
things you shouldn't be doing with jQuery,

6
00:00:15,130 --> 00:00:18,320
usability, and much more. >>Let's check it out.

7
00:00:18,320 --> 00:00:21,960
[? music ?]

8
00:00:21,960 --> 00:00:24,610
[The Treehouse Show]

9
00:00:24,610 --> 00:00:28,610
Well, first up is flat UI colors, and, of course, 

10
00:00:28,610 --> 00:00:32,950
we've talked about flat UI a little bit on the show. >>Talked so much.

11
00:00:32,950 --> 00:00:35,600
>>It's basically the opposite of skeuomorphism.

12
00:00:35,600 --> 00:00:39,370
So skeuopmorphism is where— >>It's right up there with CSS frameworks,

13
00:00:39,370 --> 00:00:42,310
on the list of things we talk about a lot on here.

14
00:00:42,310 --> 00:00:45,920
>>And icon fonts. >>And responsive websites.

15
00:00:45,920 --> 00:00:50,710
>>That's right. Anyway, skeuomorphism is where stuff looks super realistic.

16
00:00:50,710 --> 00:00:55,780
In a digital interface, it's basically trying to mirror a real-world

17
00:00:55,780 --> 00:00:59,200
interface, so something like iCal on OS X, 

18
00:00:59,200 --> 00:01:02,110
where it has all this leather and papery texture and stuff,

19
00:01:02,110 --> 00:01:05,850
whereas flat design is basically a response to that. 

20
00:01:05,850 --> 00:01:09,670
So it's what you see in, like, Windows 8 and 

21
00:01:09,670 --> 00:01:12,350
a lot of other websites these days.

22
00:01:12,350 --> 00:01:19,300
So these flat UI colors basically allow you to draw upon this

23
00:01:19,300 --> 00:01:22,210
pre-made color palette and create your website

24
00:01:22,210 --> 00:01:25,070
with flat UI in mind.

25
00:01:25,070 --> 00:01:29,780
So they just have these really nice, well put-together colors that

26
00:01:29,780 --> 00:01:34,460
go really well together, and you can click on each one of these.

27
00:01:34,460 --> 00:01:39,200
So I'll click on Midnight Blue here,

28
00:01:39,200 --> 00:01:41,800
and it'll say Copied.

29
00:01:41,800 --> 00:01:45,450
So if you click on one of these, it will copy it to your Clipboard.

30
00:01:45,450 --> 00:01:47,640
And you can choose the format up here.

31
00:01:47,640 --> 00:01:52,680
So I've chosen hexadecimal with the hash, or pound, sign there.

32
00:01:52,680 --> 00:01:56,400
And so that's what's been copied into my Clipboard.

33
00:01:56,400 --> 00:01:59,060
So it's a pretty handy tool.

34
00:01:59,060 --> 00:02:03,680
I will admit I actually used this this week. >>Oh, you're willing to admit that?

35
00:02:03,680 --> 00:02:06,900
>>I am willing to admit it. I know, big admission here.

36
00:02:06,900 --> 00:02:11,160
No, I used it to build a website earlier this week.

37
00:02:11,160 --> 00:02:14,180
This is Jason's surprised face. And it worked really well.

38
00:02:14,180 --> 00:02:19,770
I was able to just click, copy these colors in, and it sped up my development a little bit,

39
00:02:19,770 --> 00:02:23,030
because I was able to just put together the color scheme really quickly

40
00:02:23,030 --> 00:02:27,450
and try out different things. >>I like some of these names here.

41
00:02:27,450 --> 00:02:32,760
>>Yeah. >>Wet Asphalt. >>That's right. They should name one after you, Jason.

42
00:02:32,760 --> 00:02:37,030
>>This one's called Nephritis. That sounds like a disease.

43
00:02:37,030 --> 00:02:41,110
Sorry, I can't come to work today. My nephritis is flaring up.

44
00:02:41,110 --> 00:02:44,190
>>They have Peter River. I mean, I don't understand why it's not Jason River.

45
00:02:44,190 --> 00:02:47,990
It's obviously— >>Yeah. >>You know. >>Jason River— >>Jason.

46
00:02:47,990 --> 00:02:51,220
>>Selling tickets. >>That's right. >>Next up, over on the Flippin' Awesome Blog,

47
00:02:51,220 --> 00:02:55,120
we have 5 Things You Should Stop Doing With jQuery.

48
00:02:55,120 --> 00:03:00,200
This is a wonderful list of, you guessed it, things that you should doing with jQuery

49
00:03:00,200 --> 00:03:03,520
and, more importantly, why you should stop doing them.

50
00:03:03,520 --> 00:03:06,890
Now we're not going to get into everything that they say on the show—

51
00:03:06,890 --> 00:03:10,580
I'm sorry, say on the blog post here, but number one, stop

52
00:03:10,580 --> 00:03:15,910
using Document Ready. It's 2013. We don't have to use Document Ready all the time.

53
00:03:15,910 --> 00:03:18,950
The reason that you would want to use Document Ready is,

54
00:03:18,950 --> 00:03:22,730
back in the day, when you put all of your scripts in the head of a web page,

55
00:03:22,730 --> 00:03:27,320
it would have to wait until the rest of the page and scripts have loaded.

56
00:03:27,320 --> 00:03:29,940
>>But, of course, now you put all of your scripts towards the bottom

57
00:03:29,940 --> 00:03:33,190
and know that the document is indeed ready 

58
00:03:33,190 --> 00:03:35,300
by the time you're ready to execute that jQuery.

59
00:03:35,300 --> 00:03:37,830
>>Yeah. Unless you're using the async attribute.

60
00:03:37,830 --> 00:03:41,910
>>Boom. >>Next, choose the right iterator for the job.

61
00:03:41,910 --> 00:03:45,880
jQuery provides a wealth of different iterators that you can use,

62
00:03:45,880 --> 00:03:49,060
depending on what you need to do. So there's a nice description 

63
00:03:49,060 --> 00:03:51,350
of each of the different ones, as well as the context 

64
00:03:51,350 --> 00:03:54,660
in which you would use them. I'm a big fan of the map iterator,

65
00:03:54,660 --> 00:03:58,000
which will iterate through an array, add that all to a new one.

66
00:03:58,000 --> 00:04:01,850
Boom. Done. Anyway, a bunch of great advice on here.

67
00:04:01,850 --> 00:04:05,560
Just head on over to the blog post at flippinawesome.org.

68
00:04:05,560 --> 00:04:10,590
And you can also find it in the show notes on YouTube at youtube.com/gotreehouse 

69
00:04:10,590 --> 00:04:12,610
or on iTunes.

70
00:04:12,610 --> 00:04:14,640
>>iTunes. >>Search for Treehouse. Leave us reviews.

71
00:04:14,640 --> 00:04:19,260
>>On iTunes. >>Yeah. >>All right. Next up is the Young Persons

72
00:04:19,260 --> 00:04:22,760
Guide to Programming in Minecraft.

73
00:04:22,760 --> 00:04:27,690
Of course, Minecraft is the popular computer game that was created,

74
00:04:27,690 --> 00:04:32,360
I think, a couple years ago and was developed in a very open fashion.

75
00:04:32,360 --> 00:04:35,880
People could actually participate in the alpha and the beta,

76
00:04:35,880 --> 00:04:40,080
and it's since been released, but it's a pretty cool game.

77
00:04:40,080 --> 00:04:43,540
>>If I'm not specifically a young person, 

78
00:04:43,540 --> 00:04:45,790
can I still read this guide and get something out of it?

79
00:04:45,790 --> 00:04:50,750
>>I think so, Jason. I don't know why it's specifically targeted at young people,

80
00:04:50,750 --> 00:04:53,240
but, of course, yeah, you can get something out of it.

81
00:04:53,240 --> 00:04:57,050
So Minecraft is this computer game where you mine stuff,

82
00:04:57,050 --> 00:05:00,120
and then you craft stuff. So that's kind of an explanation of Minecraft.

83
00:05:00,120 --> 00:05:05,830
Getting into what this article is actually about, basically, you can

84
00:05:05,830 --> 00:05:10,510
create what are called mods, or modifications, for Minecraft,

85
00:05:10,510 --> 00:05:13,860
and one such mod is called Scriptcraft.

86
00:05:13,860 --> 00:05:17,890
And in Scriptcraft, you can actually program in the game,

87
00:05:17,890 --> 00:05:20,780
using simple JavaScript statements.

88
00:05:20,780 --> 00:05:23,360
And using those, you can add new items, you can change

89
00:05:23,360 --> 00:05:28,350
 the behavior of the game, and you can actually build metagames on top of Minecraft.

90
00:05:28,350 --> 00:05:33,840
Build these simpler, you know, simple games within Minecraft.

91
00:05:33,840 --> 00:05:38,540
It suggests learning JavaScript and then jumping into it.

92
00:05:38,540 --> 00:05:42,150
Of course, you can learn JavaScript on teamtreehouse.com.

93
00:05:42,150 --> 00:05:44,740
>>Shameless self-plug. >>That's right.

94
00:05:44,740 --> 00:05:48,240
And then, after you've learned JavaScript, you can jump into

95
00:05:48,240 --> 00:05:54,100
Scriptcraft, and they teach you how to do variables, functions, and

96
00:05:54,100 --> 00:05:57,820
a whole variety of other things in Minecraft.

97
00:05:57,820 --> 00:06:01,620
And eventually you will be able to actually build stuff.

98
00:06:01,620 --> 00:06:08,030
So I think this is pretty neat, you know. It's not specifically related to

99
00:06:08,030 --> 00:06:12,370
web development, but, of course, JavaScript is a very popular language

100
00:06:12,370 --> 00:06:14,950
in the web-development space. 

101
00:06:14,950 --> 00:06:19,830
It's what we use to make things happen on the front end of the browser.

102
00:06:19,830 --> 00:06:24,840
And I think this is a really cool way to get into JavaScript

103
00:06:24,840 --> 00:06:26,910
and get yourself familiar with the language.

104
00:06:26,910 --> 00:06:29,310
And that will make you a stronger programmer 

105
00:06:29,310 --> 00:06:33,510
when it comes to stuff on the web. >>Very nice. >>Interesting stuff. >>

106
00:06:33,510 --> 00:06:39,140
Next up, we have a tool called Framer. This is a prototyping tool for animation 

107
00:06:39,140 --> 00:06:42,020
and interaction on desktop and mobile. 

108
00:06:42,020 --> 00:06:47,010
Now this is being billed as an alternative to Flash or Keynote when

109
00:06:47,010 --> 00:06:50,400
prototyping an application, and it's going to be used 

110
00:06:50,400 --> 00:06:52,480
more for the interaction of the site.

111
00:06:52,480 --> 00:06:55,290
So they've got some great examples here on the site.

112
00:06:55,290 --> 00:07:02,000
So you click through. First example is the Google Search application,

113
00:07:02,000 --> 00:07:07,180
and if I mouse in here, you can see, boom, it automatically animates up.

114
00:07:07,180 --> 00:07:10,830
And you can kind of just get a feel for how the application's going to work.

115
00:07:10,830 --> 00:07:15,600
The next example that they have is something that you should be familiar with:

116
00:07:15,600 --> 00:07:17,820
Facebook. Pretty much everybody's on Facebook,

117
00:07:17,820 --> 00:07:21,060
so you click that little three-button menu we've talked about before

118
00:07:21,060 --> 00:07:25,200
on the show, and it kind of shows you how the news feed and events and

119
00:07:25,200 --> 00:07:27,290
basically, everything on the side of the page is going to work.

120
00:07:27,290 --> 00:07:31,930
So this is really not going to be for creating full applications.

121
00:07:31,930 --> 00:07:34,360
It's going to be used just to get an idea 

122
00:07:34,360 --> 00:07:37,750
of how the interactions and animations are going to play out on the site.

123
00:07:37,750 --> 00:07:42,730
And interaction and animation is quickly becoming a lot bigger 

124
00:07:42,730 --> 00:07:45,970
in the field of creating applications, so it's something to keep on the radar,

125
00:07:45,970 --> 00:07:49,720
in case this is what you're doing. >>And I think it actually pairs really nicely

126
00:07:49,720 --> 00:07:54,400
with flat design in that, you know, it's much easier to create

127
00:07:54,400 --> 00:07:57,830
more complex animations, because you're not spending so much time

128
00:07:57,830 --> 00:08:00,450
getting the textures or the round corners or 

129
00:08:00,450 --> 00:08:03,040
all these different design details just right.

130
00:08:03,040 --> 00:08:07,090
But you can actually communicate a lot with nice smooth animation.

131
00:08:07,090 --> 00:08:11,640
So I like it. I think it's pretty cool. >>I think pairs really nicely with a port wine.

132
00:08:11,640 --> 00:08:14,640
>>So you, Jason. >>Thank you.

133
00:08:14,640 --> 00:08:19,660
Next up is a Usability Checklist. It's in beta.

134
00:08:19,660 --> 00:08:22,960
I'm not really sure what's in beta specifically.

135
00:08:22,960 --> 00:08:25,350
>>The checklist? >>Yeah, it looks like the checklist itself is in beta.

136
00:08:25,350 --> 00:08:27,460
>>Maybe there's more things they'll want to add to the checklist.

137
00:08:27,460 --> 00:08:31,690
>>It's possible, but I really like this checklist quite a lot.

138
00:08:31,690 --> 00:08:38,650
Basically, before you launch a website and you want to make sure that

139
00:08:38,650 --> 00:08:42,539
everything is of quality, you can go through this checklist

140
00:08:42,539 --> 00:08:48,880
and just kind of get a sanity check and say, like, what is the first impression

141
00:08:48,880 --> 00:08:51,840
when people hit the home page?

142
00:08:51,840 --> 00:08:54,450
Or is my site easy to navigate?

143
00:08:54,450 --> 00:08:58,620
Am I hitting all the check boxes here with accessibility?  

144
00:08:58,620 --> 00:09:03,940
And am I doing a good job with search, etcetera, etcetera, etcetera.

145
00:09:03,940 --> 00:09:09,070
It's a pretty exhaustive checklist, and I think it's really good

146
00:09:09,070 --> 00:09:13,310
even for beginners or people that are much more advanced with

147
00:09:13,310 --> 00:09:16,190
web development, because there are so many things to remember these days,

148
00:09:16,190 --> 00:09:19,060
I mean, there is so much stuff that goes into a website

149
00:09:19,060 --> 00:09:22,990
 that it's great to just have a nice handy checklist like this to make sure

150
00:09:22,990 --> 00:09:25,130
you're covering all the bases.

151
00:09:25,130 --> 00:09:27,790
>>Yeah, definitely. >>So, pretty cool stuff.

152
00:09:27,790 --> 00:09:32,160
>>Next up, we have an application called Ghostlab.

153
00:09:32,160 --> 00:09:35,250
Now this is a paid application. They're not sponsoring the show,

154
00:09:35,250 --> 00:09:38,660
full disclosure. Just thought that this was cool and that we would mention it.

155
00:09:38,660 --> 00:09:43,060
So what this does, it's pretty interesting. You set up a site

156
00:09:43,060 --> 00:09:48,450
inside of Ghostlab, you know, drag it in, and then it will launch an HTTP server for you.

157
00:09:48,450 --> 00:09:50,920
You can then connect a browser to it,

158
00:09:50,920 --> 00:09:54,150
or multiple browsers is where it really shines.

159
00:09:54,150 --> 00:09:57,120
And then, as you're scrolling through on one browser, 

160
00:09:57,120 --> 00:09:59,490
it automatically updates all the other browsers.

161
00:09:59,490 --> 00:10:03,730
>>That's pretty amazing. >>Yeah. This is wonderful if you were trying to test

162
00:10:03,730 --> 00:10:07,720
mobile sites, because even as you're filling in a form on one browser,

163
00:10:07,720 --> 00:10:10,390
it'll automatically fill it in on another as well.

164
00:10:10,390 --> 00:10:15,780
And, if that weren't enough, you can automatically debug the stuff live.

165
00:10:15,780 --> 00:10:18,290
Now you are going to need a browser that supports JavaScript

166
00:10:18,290 --> 00:10:21,980
in order to get this to work. But definitely go ahead and check it out.

167
00:10:21,980 --> 00:10:27,710
Synchronized testing is really, really the big deal, as well as inspection.

168
00:10:27,710 --> 00:10:31,410
You can see immediately what's causing the problem in the browser

169
00:10:31,410 --> 00:10:33,500
if you're getting some weird behavior or otherwise.

170
00:10:33,500 --> 00:10:36,530
Immediately inspect it and see what's going on.

171
00:10:36,530 --> 00:10:41,200
So. >>This pairs really nicely with that Usability Checklist,

172
00:10:41,200 --> 00:10:43,680
because you can go through and make sure you're 

173
00:10:43,680 --> 00:10:47,430
covering all those check boxes in every browser.

174
00:10:47,430 --> 00:10:54,120
>>Also, a Chardonnay. >>Hmm. Next up, we've got some handy—

175
00:10:54,120 --> 00:10:58,900
We've got some Handy Sass Mixins.

176
00:10:58,900 --> 00:11:07,560
Basically, Sass is a language that compiles to CSS.

177
00:11:07,560 --> 00:11:11,560
So it can be read by the browser, but it's a much easier way to

178
00:11:11,560 --> 00:11:16,000
write your styling, because you can use things like variables

179
00:11:16,000 --> 00:11:20,790
and these pieces of code that are called mixins.

180
00:11:20,790 --> 00:11:28,120
So you can mix in this Sass code into your Sass code very fluidly.

181
00:11:28,120 --> 00:11:32,630
They have mixins here that are for responsive breakpoints.

182
00:11:32,630 --> 00:11:38,230
So if you're building a website that uses responsive design, which really,

183
00:11:38,230 --> 00:11:42,300
almost any website you're building should probably be using responsive design.

184
00:11:42,300 --> 00:11:45,090
That's a handy mixin to use. 

185
00:11:45,090 --> 00:11:51,450
They also have mixins for targeting devices with retina displays or

186
00:11:51,450 --> 00:11:56,170
high-resolution displays, and that's actually pretty simple to do.

187
00:11:56,170 --> 00:11:59,550
There's just a lot of little steps here you got to remember, 

188
00:11:59,550 --> 00:12:04,010
and so that just encapsulates all of them really easily, and you can go ahead

189
00:12:04,010 --> 00:12:08,450
and use it here as a Sass mixin, and you just say I want to go ahead and

190
00:12:08,450 --> 00:12:11,260
include this 2x version of the image, 

191
00:12:11,260 --> 00:12:16,410
and it will go ahead and expand out that Sass into this CSS here.

192
00:12:16,410 --> 00:12:20,430
They have a couple of others. There's a clear fix, one for box sizing,

193
00:12:20,430 --> 00:12:24,840
border radii, which, I mean, that can get really complicated

194
00:12:24,840 --> 00:12:28,320
if you're working with a lot of different browser shares,

195
00:12:28,320 --> 00:12:33,170
so it covers all those. But pretty cool stuff, and if you use Sass, 

196
00:12:33,170 --> 00:12:36,250
this is definitely a handy set of mixins for you to use.

197
00:12:36,250 --> 00:12:39,520
>>That would pair pretty well with Ghostlab, which we just talked about,

198
00:12:39,520 --> 00:12:42,710
because it does support Sass. >>Or a nice Merlot.

199
00:12:42,710 --> 00:12:46,780
>>I would have suggested a Pinot, but you know, your taste is your taste.

200
00:12:46,780 --> 00:12:51,590
Next up, we have a JavaScript library called Hammer.js.

201
00:12:51,590 --> 00:12:57,460
This is a library for multi-touch gestures, and I think it's incredibly well named.

202
00:12:57,460 --> 00:13:01,270
Also, I really, really love the art on the site.

203
00:13:01,270 --> 00:13:04,740
>>Conceptualist. >>Exactly. So this is going to be really useful if

204
00:13:04,740 --> 00:13:09,290
you're working on, you know, phone, tablet, any device that supports multi-touch. 

205
00:13:09,290 --> 00:13:15,270
The Hammer JavaScript library will allow you to very easily attach elements—

206
00:13:15,270 --> 00:13:18,490
attach certain events to elements.

207
00:13:18,490 --> 00:13:23,530
So if somebody is swiping left, you can attach that to a specific div on the page,

208
00:13:23,530 --> 00:13:26,270
capture that, and perform some sort of functionality 

209
00:13:26,270 --> 00:13:28,470
when somebody swipes left.

210
00:13:28,470 --> 00:13:30,490
Now, this is a great library, and it's pretty small. 

211
00:13:30,490 --> 00:13:33,500
It's only 3 kilobytes when gzipped.

212
00:13:33,500 --> 00:13:36,460
So check this out. They've got really thorough documentation, and

213
00:13:36,460 --> 00:13:38,830
it is a great library.

214
00:13:40,270 --> 00:13:43,860
So that's about all we got today. >>That is it for this week's episode.

215
00:13:43,860 --> 00:13:46,650
I'm @nickrp on Twitter. >>And I am @jseifer.

216
00:13:46,650 --> 00:13:51,170
If you like this show, please rate us in iTunes. Search for the Treehouse Show.

217
00:13:51,170 --> 00:13:56,120
You can also find show notes and more on YouTube at youtube.com/gotreehouse.

218
00:13:56,120 --> 00:13:59,030
>>And of course, if you'd like to see more videos like this one

219
00:13:59,030 --> 00:14:05,430
about iOS, Android, HTML, CSS,  business, and so much more,

220
00:14:05,430 --> 00:14:07,950
Ruby, of course— >>Of course. >>This guy right here.

221
00:14:07,950 --> 00:14:11,500
Be sure to check us out at teamtreehouse.com.

222
00:14:11,500 --> 00:14:13,510
Thanks so much for watching, and we'll see you next week.

223
00:14:13,510 --> 00:14:16,150
Stay tuned for our wine review podcast.

224
00:14:17,770 --> 00:14:22,150
[? music ?]