1
00:00:00,000 --> 00:00:02,360
I'm Nick Pettit. >>I'm Jason Seifer. [Jason Seifer - @jseifer] [Nick Pettit - @nickrp] 

2
00:00:02,360 --> 00:00:04,970
And you're watching The Treehouse Show, your weekly dose of Internets

3
00:00:04,970 --> 00:00:08,390
where we talk about all things web design, web development and more.

4
00:00:08,390 --> 00:00:10,940
In this episode we'll be talking about reactive programming,

5
00:00:10,940 --> 00:00:14,390
CSS spacing, image loading and more.

6
00:00:14,390 --> 00:00:16,219
Let's check it out.

7
00:00:16,219 --> 00:00:21,280
[? music ?] [treehouse show]

8
00:00:21,280 --> 00:00:24,770
First up is tidyTime.js.

9
00:00:24,770 --> 00:00:32,110
This is a jQuery plugin that will transform times into, well, basically different formatting.

10
00:00:32,110 --> 00:00:35,520
So let's take a look at tidyTime here.

11
00:00:35,520 --> 00:00:41,420
On the home page they say, "Hey Dude! It's 9 Minutes To 4 And I'm Feeling Good!"

12
00:00:41,420 --> 00:00:44,360
If we scroll down here, we can see a couple more examples

13
00:00:44,360 --> 00:00:51,030
of how it transforms a digital time into more of a friendly sentence.

14
00:00:51,030 --> 00:00:57,060
You can include tidyTime in your website just after including jQuery.

15
00:00:57,060 --> 00:01:03,510
And then to instantiate the plugin all you have to do is attach tidyTime just like that

16
00:01:03,510 --> 00:01:08,550
after the DOM is loaded, and you can configure a couple options there

17
00:01:08,550 --> 00:01:11,410
and it will transform your times.

18
00:01:11,410 --> 00:01:13,970
It's pretty cool. Not a whole lot to say about it.

19
00:01:13,970 --> 00:01:17,750
Normally this type of thing is actually done server side,

20
00:01:17,750 --> 00:01:21,540
but this is a really nice way to do it on the front end.

21
00:01:21,540 --> 00:01:23,780
I would like to express my disappointment.

22
00:01:23,780 --> 00:01:27,530
I got very excited when you said we could manipulate time.

23
00:01:27,530 --> 00:01:31,360
Not quite what you're thinking, but I see where you're going with that.

24
00:01:31,360 --> 00:01:34,980
I was hoping for a time machine. >>I think we all are hoping for that.

25
00:01:35,800 --> 00:01:39,740
Next up we have a project called Ractive.js.

26
00:01:39,740 --> 00:01:41,650
I think I'm pronouncing that right.

27
00:01:41,650 --> 00:01:43,150
Anyway, this is really interesting.

28
00:01:43,150 --> 00:01:45,900
This brings functional reactive programming to JavaScript.

29
00:01:45,900 --> 00:01:48,980
Well, what does that mean? >>I understood some of those words.

30
00:01:48,980 --> 00:01:52,990
So essentially what that means is if you have a variable,

31
00:01:52,990 --> 00:01:56,620
with functional reactive programming if that variable changes

32
00:01:56,620 --> 00:02:00,510
you don't really need to do anything to update the code somewhere else.

33
00:02:00,510 --> 00:02:03,900
So if you have, say, a count of the number of dishes in the sink 

34
00:02:03,900 --> 00:02:07,040
that your roommate didn't clean—I mean, they could just take 5 minutes to do it—

35
00:02:07,040 --> 00:02:09,910
if for some reason that increments, you don't have to change anything in the DOM.

36
00:02:09,910 --> 00:02:12,980
So if you take a look at the website right here,

37
00:02:12,980 --> 00:02:17,830
it says, "HTML is an amazing language for creating static documents,

38
00:02:17,830 --> 00:02:21,200
but it wasn't really designed for interactive web apps."

39
00:02:21,200 --> 00:02:25,350
So when you use Ractive, you can use these templates right here.

40
00:02:25,350 --> 00:02:28,500
It says, "Hello user. You have messages.unread."

41
00:02:28,500 --> 00:02:31,950
So then you instantiate a new Ractive object,

42
00:02:31,950 --> 00:02:36,490
give it the data that you need, and if the data changes at all,

43
00:02:36,490 --> 00:02:42,060
then it automatically updates in the DOM and you don't have to do a single thing

44
00:02:42,060 --> 00:02:44,160
in order to change it.

45
00:02:44,160 --> 00:02:47,780
There are obviously more examples and a really great API to work with.

46
00:02:47,780 --> 00:02:49,950
It's also extremely fast.

47
00:02:49,950 --> 00:02:54,030
So check that out in the show notes, which you can get to at YouTube.com/gotreehouse,

48
00:02:54,030 --> 00:02:57,560
or in iTunes search for us at The Treehouse Show.

49
00:02:57,560 --> 00:02:59,320
Pretty cool stuff.

50
00:02:59,320 --> 00:03:05,350
Next up we have this cool little app that will allow you to wrap your app screenshots

51
00:03:05,350 --> 00:03:11,630
into, say, an iPhone or an iPad or any other type of device.

52
00:03:11,630 --> 00:03:15,050
This is typically pretty difficult to do in Photoshop—

53
00:03:15,050 --> 00:03:18,340
well, not difficult; it's just very tedious and takes a lot of time—

54
00:03:18,340 --> 00:03:20,480
but this app does it for you.

55
00:03:20,480 --> 00:03:25,180
So if we take a look, you can see all the various devices laid out here.

56
00:03:25,180 --> 00:03:27,240
And when I hover over each one, 

57
00:03:27,440 --> 00:03:31,940
it will give me examples of what that device will look like.

58
00:03:31,940 --> 00:03:35,280
Of course your app will be displayed here on the screen.

59
00:03:35,280 --> 00:03:39,390
And when we go ahead and pick one of these devices,

60
00:03:39,390 --> 00:03:44,930
it will load up this interface where I can go ahead and drag and drop an image file here

61
00:03:44,930 --> 00:03:48,110
or I can go ahead and click a button to upload.

62
00:03:48,110 --> 00:03:54,470
So I have a file here that's just a screenshot of the new Treehouse iPad app,

63
00:03:54,470 --> 00:03:58,980
which you can check out at TeamTreehouse.com/iPad.

64
00:03:58,980 --> 00:04:07,290
It looks like this screenshot is not actually formatted to the proper aspect ratio here,

65
00:04:07,290 --> 00:04:09,630
so this isn't going to look quite right.

66
00:04:09,630 --> 00:04:12,360
But I can go ahead and click Generate product mockup

67
00:04:12,360 --> 00:04:18,130
and, hey, look at that. Our iPad app is sideways and not even the right aspect ratio.

68
00:04:18,130 --> 00:04:20,490
[Jason laughing] >>[Nick] But you get the idea. Pretty cool. 

69
00:04:20,490 --> 00:04:22,800
It's called mock U phone, 

70
00:04:22,800 --> 00:04:28,960
and you can definitely get into a lot of different devices here.

71
00:04:28,960 --> 00:04:32,600
Pretty cool stuff. >>I am waiting for mockups with a toaster.

72
00:04:32,600 --> 00:04:37,180
It says you can request devices, so let's see if we can get some kitchen appliances in there.

73
00:04:37,180 --> 00:04:42,870
Perhaps a blender. Mix things up. >>Yeah. One of those nice silver ones. >>Sweet.

74
00:04:42,870 --> 00:04:47,110
Next up the Google Web Tracing Framework has been released.

75
00:04:47,110 --> 00:04:53,330
Otherwise known as WTF. >>Yeah. That's the acronym. Their words, not ours.

76
00:04:53,330 --> 00:04:56,360
So what is WTF? 

77
00:04:56,360 --> 00:05:01,940
Google says it's rich tools for instrumenting, analyzing, and visualizing web apps.

78
00:05:01,940 --> 00:05:06,920
So if you have, let's say, a game that you're developing in JavaScript,

79
00:05:06,920 --> 00:05:10,010
this is going to help you troubleshoot performance problems that you might have

80
00:05:10,010 --> 00:05:11,480
inside of the game.

81
00:05:11,480 --> 00:05:14,940
And there are just a ton of tools and a ton of things you can do inside.

82
00:05:14,940 --> 00:05:16,960
Let's take a look at it.

83
00:05:16,960 --> 00:05:20,090
Here is a quick screenshot of what you get in the app.

84
00:05:20,090 --> 00:05:22,430
So what does all of this mean?

85
00:05:22,430 --> 00:05:26,100
Well, it can go through and show you exactly what is happening,

86
00:05:26,100 --> 00:05:29,560
chunk all the way down into the code, and you can see where the repaints

87
00:05:29,560 --> 00:05:35,820
and where the different pain points are in the application. It's really wonderful.

88
00:05:35,820 --> 00:05:38,610
As you can see right here, you just click on it to enable it

89
00:05:38,610 --> 00:05:41,020
and then it will load a trace file.

90
00:05:41,020 --> 00:05:43,640
There's an example trace that they have right over here.

91
00:05:43,640 --> 00:05:46,750
It's saying, "Warning: results may be skewed." This is just a sample.

92
00:05:46,750 --> 00:05:50,970
And you actually get a timeline from when you click Enable

93
00:05:50,970 --> 00:05:55,360
all the way to when you disable or finish doing this query.

94
00:05:55,360 --> 00:06:00,900
So once you get this, you can zoom in and see exactly what is happening in the app.

95
00:06:00,900 --> 00:06:04,540
Over on the right it will tell you exactly what was called,

96
00:06:04,540 --> 00:06:09,680
the total time it took, the user time it took, and how many times this was called.

97
00:06:09,680 --> 00:06:14,210
This is just an amazing set of tools to go through 

98
00:06:14,210 --> 00:06:18,550
if you're developing these JavaScript graphics-heavy web applications.

99
00:06:18,550 --> 00:06:22,210
And yeah, Google Web Tracing Framework. Incredible name.

100
00:06:22,210 --> 00:06:25,320
Yeah, yeah. It's actually really incredible stuff.

101
00:06:25,320 --> 00:06:30,010
I know the name is a little bit funny, but it's really cool what Google has done here,

102
00:06:30,010 --> 00:06:33,900
especially when you're developing games for the Web.

103
00:06:33,900 --> 00:06:40,650
Performance is always important, but with games it's like priority A1. >>Yeah.

104
00:06:40,650 --> 00:06:43,150
Kind of like the steak sauce. >>Ooh, delicious. 

105
00:06:43,150 --> 00:06:46,180
Not a sponsor of the show. Shame on them. >>Yeah.

106
00:06:46,180 --> 00:06:49,930
Next up is some browser logos from Paul Irish.

107
00:06:49,930 --> 00:06:53,490
Whenever you're making a web app, you might want to say,

108
00:06:53,490 --> 00:06:56,860
"Hey, you can do these things in these browsers."

109
00:06:56,860 --> 00:07:01,850
Maybe some features aren't supported in, say, older versions of Internet Explorer

110
00:07:01,850 --> 00:07:04,380
and you need to show some nice browser logos 

111
00:07:04,380 --> 00:07:07,590
to demonstrate where the app support is.

112
00:07:07,590 --> 00:07:11,640
"You need Netscape Navigator 4.0 or above to view this website." >>Exactly.

113
00:07:11,640 --> 00:07:17,470
"Resolution needs to be 1024x768 and you need Flash." Right. No.

114
00:07:17,470 --> 00:07:22,590
These high-res browser logos are pretty cool,

115
00:07:22,590 --> 00:07:27,040
but it can be difficult to find all them or find the most current one,

116
00:07:27,040 --> 00:07:32,890
and you can mix things up pretty easily, so this repo on GitHub is maintained

117
00:07:32,890 --> 00:07:39,340
to have the latest versions of all the browser logos at high resolution, and it's pretty handy.

118
00:07:39,340 --> 00:07:43,150
They even have a few browsers in here that honestly I have never heard of before,

119
00:07:43,150 --> 00:07:44,950
but I guess I'll have to check those out.

120
00:07:44,950 --> 00:07:48,510
And if you scroll down, you even have My Little Pony versions 

121
00:07:48,510 --> 00:07:51,520
of all the different browsers. Look at that.

122
00:07:51,520 --> 00:07:54,230
They have absolutely everything here. >>[Jason] That's adorable.

123
00:07:54,230 --> 00:07:56,140
[Nick] Pretty cool stuff.

124
00:07:56,140 --> 00:08:00,760
[chuckling] Next up, Nick, "Your app makes me fat." >>Really? >>Yeah.

125
00:08:00,760 --> 00:08:02,170
I'm so sorry about that. 

126
00:08:02,170 --> 00:08:07,120
This is a blog post from Kathy Sierra talking about UI and what you have to consider

127
00:08:07,120 --> 00:08:10,400
when making your users do things on the Web.

128
00:08:10,400 --> 00:08:13,650
So she starts off with a psychology experiment that was done

129
00:08:13,650 --> 00:08:16,270
where people were given 2 different tasks, right?

130
00:08:16,270 --> 00:08:18,820
One group has to remember 2 numbers, 

131
00:08:18,820 --> 00:08:22,450
and one group has to remember 7 different numbers.

132
00:08:22,450 --> 00:08:25,310
Afterwards they're offered a snack.

133
00:08:25,310 --> 00:08:29,590
They could either choose something healthy, like fruits and vegetables, or cake.

134
00:08:29,590 --> 00:08:32,890
For the group that had to remember 7 numbers, 

135
00:08:32,890 --> 00:08:36,330
they were 50% more likely to choose the cake. >>Wow.

136
00:08:36,330 --> 00:08:40,039
So what does this have to do with web applications and UI?

137
00:08:40,039 --> 00:08:44,450
Well, the more that you ask your users to do, the more you're depleting their willpower.

138
00:08:44,450 --> 00:08:48,180
So what you want to do is make your apps as simple as possible

139
00:08:48,180 --> 00:08:50,370
and don't make your users jump through all of these hoops 

140
00:08:50,370 --> 00:08:52,500
when building your web applications.

141
00:08:52,500 --> 00:08:55,170
Make everything simple, don't make them do a lot of things—

142
00:08:55,170 --> 00:08:57,250
the kind of things we talk about on this show.

143
00:08:57,250 --> 00:09:00,620
Make it as simple and good UI as possible.

144
00:09:00,620 --> 00:09:02,680
That's really good advice. 

145
00:09:02,680 --> 00:09:07,750
Actually, rather than going out, exercising, and eating healthy,

146
00:09:07,750 --> 00:09:11,880
it's better to sit around all day and just optimize our web apps

147
00:09:11,880 --> 00:09:15,420
and have no physical activity. >>100%. >>I think that's the message here.

148
00:09:15,420 --> 00:09:18,950
For a little more background on that, check out the link to the blog post in the show notes.

149
00:09:18,950 --> 00:09:21,340
But yeah, Nick, you pretty much nailed it. >>Nice.

150
00:09:21,340 --> 00:09:23,540
Actually, it is a really cool blog post.

151
00:09:23,540 --> 00:09:27,230
I know I was making fun of it, but please do check it out. >>Yeah. No. It's really good.

152
00:09:27,230 --> 00:09:31,870
So next up is a post from CSS-Tricks by Chris Coyier

153
00:09:31,870 --> 00:09:35,010
about spacing at the bottom of modules.

154
00:09:35,010 --> 00:09:36,400
What is a module? 

155
00:09:36,400 --> 00:09:42,920
Chris Coyier describes it as a "content-y and app-y" type thing

156
00:09:42,920 --> 00:09:49,180
and basically, it's just any time you have kind of a box like this on a web page.

157
00:09:49,180 --> 00:09:55,860
The problem is the spacing in each one of these content modules.

158
00:09:55,860 --> 00:10:01,700
Right now this box is all evenly padded and it just has some raw content

159
00:10:01,700 --> 00:10:03,660
or some raw text inside of it.

160
00:10:03,660 --> 00:10:08,180
But when you start adding a couple different things inside of the module

161
00:10:08,180 --> 00:10:11,650
such as a third level headline or a paragraph,

162
00:10:11,650 --> 00:10:13,910
you start to get uneven spacing.

163
00:10:13,910 --> 00:10:17,740
You can see down here at the bottom that there's some extra margin 

164
00:10:17,740 --> 00:10:20,330
on the bottom of this paragraph.

165
00:10:20,330 --> 00:10:24,960
And here is actually a colored example to illustrate that even further.

166
00:10:24,960 --> 00:10:28,660
You could do a couple of things here, and Chris walks through them.

167
00:10:28,660 --> 00:10:32,910
You could remove the margin on the paragraph. That's kind of messy.

168
00:10:32,910 --> 00:10:37,370
You could remove the margin on the last child of a paragraph.

169
00:10:37,370 --> 00:10:40,850
That's also not that great, though.

170
00:10:40,850 --> 00:10:46,580
What Chris actually suggests doing is to remove the margin on any last child

171
00:10:46,580 --> 00:10:50,210
inside of the element, and he even gives an example here

172
00:10:50,210 --> 00:10:54,190
where you can nest each last child element further.

173
00:10:54,190 --> 00:10:58,420
I'm not exactly sure how to phrase that. It's a little bit complicated.

174
00:10:58,420 --> 00:11:03,970
But do check out the code, and there's even an example from CodePen here

175
00:11:03,970 --> 00:11:07,970
showing how that is reflected across several different types of elements

176
00:11:07,970 --> 00:11:09,480
inside of these modules. 

177
00:11:09,480 --> 00:11:13,050
Pretty nifty technique, and it's actually a problem 

178
00:11:13,050 --> 00:11:18,790
that when developing the CSS for an app you're constantly removing the margin

179
00:11:18,790 --> 00:11:21,920
from the bottom of these stupid content boxes,

180
00:11:21,920 --> 00:11:23,660
and it's really a waste of time.

181
00:11:23,660 --> 00:11:28,320
So just applying this one catch-all could save you a lot of time.

182
00:11:28,320 --> 00:11:31,350
Good work, Chris Coyier. >>Yeah. As usual.

183
00:11:31,350 --> 00:11:36,940
Next up we have a blog post by Patrick Kunka on taking control of image loading.

184
00:11:36,940 --> 00:11:41,400
He's been working on a lot of photographically-heavy websites recently,

185
00:11:41,400 --> 00:11:43,620
and something that kind of winds up bothering him

186
00:11:43,620 --> 00:11:47,230
is when images don't completely load as you're scrolling down a page.

187
00:11:47,230 --> 00:11:50,980
You know, sometimes the browser hasn't fetched an entire image.

188
00:11:50,980 --> 00:11:53,690
This is going to be for really big images.

189
00:11:53,690 --> 00:11:58,060
As we're doing with responsive and retina-heavy websites,

190
00:11:58,060 --> 00:12:02,710
the bigger images can be something to take into account. >>Definitely.

191
00:12:02,710 --> 00:12:05,330
He says that broadband has mitigated some of these problems,

192
00:12:05,330 --> 00:12:08,170
but it's still an issue that you want to take into account. >>Yeah.

193
00:12:08,170 --> 00:12:09,900
So how do you solve this?

194
00:12:09,900 --> 00:12:13,030
He has 4 different solutions that he goes through in the blog post.

195
00:12:13,030 --> 00:12:17,930
The first one is pretty easy. Just wrap the element in a div.

196
00:12:17,930 --> 00:12:20,680
This is for a single asset.

197
00:12:20,680 --> 00:12:23,270
Wrap it in a div with a class of img_wrapper,

198
00:12:23,270 --> 00:12:28,240
and this allows you to manipulate the image in the div just a little bit differently.

199
00:12:28,240 --> 00:12:32,450
You can constrain it to a 4:3 aspect ratio

200
00:12:32,450 --> 00:12:36,440
and put the image inside there with an absolute position

201
00:12:36,440 --> 00:12:39,020
and a width of 100%.

202
00:12:39,020 --> 00:12:43,540
Then he adds an onload attribute to the image tag

203
00:12:43,540 --> 00:12:47,870
which lets you fire some JavaScript as soon as this is loaded.

204
00:12:47,870 --> 00:12:54,020
One thing that he says is, "Hey, people are going to really be a little bit offended at this."

205
00:12:54,020 --> 00:12:58,710
"You really shouldn't be using inline attributes and inline JavaScript."

206
00:12:58,710 --> 00:13:01,230
And he says, "Well, for the most part I agree with you,

207
00:13:01,230 --> 00:13:05,320
but every once in a while I'm not opposed to a solution if it works."

208
00:13:05,320 --> 00:13:07,860
And he says this does most of the time.

209
00:13:07,860 --> 00:13:14,770
The next solution that he presents is grouping multiple assets inside of a slideshow div.

210
00:13:14,770 --> 00:13:18,600
So doing something like that, same thing.

211
00:13:18,600 --> 00:13:22,060
One bigger div with a slideshow contains your 3 images,

212
00:13:22,060 --> 00:13:27,580
and then onload, you call the slideLoaded function which finds the image

213
00:13:27,580 --> 00:13:31,050
and then adds and loads all of them in the background.

214
00:13:31,050 --> 00:13:34,930
Also he has this little percentLoaded variable 

215
00:13:34,930 --> 00:13:39,610
which will tell you how much the image has loaded so far.

216
00:13:39,610 --> 00:13:43,030
That's going to be good for more of a slideshow

217
00:13:43,030 --> 00:13:45,040
where you have only a few images to load,

218
00:13:45,040 --> 00:13:50,240
but what do you do if you want to have more images on the page and preload them?

219
00:13:50,240 --> 00:13:53,480
That's something else you can do. You can preload images beforehand.

220
00:13:53,480 --> 00:13:58,070
He has a JavaScript, just a quick array of images,

221
00:13:58,070 --> 00:14:00,000
and then preload those in the background.

222
00:14:00,000 --> 00:14:03,720
And finally, the last solution is going to be lazy loading images 

223
00:14:03,720 --> 00:14:05,440
as you scroll down the page.

224
00:14:05,440 --> 00:14:07,230
He has another solution in there as well.

225
00:14:07,230 --> 00:14:09,970
We're not going to go into that because this is getting a little bit heavy,

226
00:14:09,970 --> 00:14:12,520
but I definitely recommend checking out that link.

227
00:14:12,520 --> 00:14:15,230
And if you want to check out lazy loading, just go to Pinterest.

228
00:14:15,230 --> 00:14:18,730
Oh yeah. There you go. >>Simple. >>Great example. >>All right.

229
00:14:18,730 --> 00:14:21,540
I am @nickrp on Twitter. >>I am @jseifer.

230
00:14:21,540 --> 00:14:24,180
For more information on anything we talked about, check out our show notes

231
00:14:24,180 --> 00:14:27,000
at YouTube.com/gotreehouse.

232
00:14:27,000 --> 00:14:30,380
And of course if you'd like to see more videos like this one about web design,

233
00:14:30,380 --> 00:14:33,180
web development, business and so much more,

234
00:14:33,180 --> 00:14:36,380
be sure to check us out at TeamTreehouse.com.

235
00:14:36,380 --> 00:14:39,250
Thanks so much for watching, and we'll see you next week.

236
00:14:39,250 --> 00:14:46,000
[? music ?] [treehouse show]