1
00:00:00,210 --> 00:00:01,080
I'm Nick Pettit.

2
00:00:01,080 --> 00:00:02,070
>> I'm Jason Seifer.

3
00:00:02,070 --> 00:00:03,610
>> And you're watching the Tree House
Show.

4
00:00:03,610 --> 00:00:06,600
Your pleekly dose of Internets where we
talk about all things web design,

5
00:00:06,600 --> 00:00:07,970
web development and more.

6
00:00:07,970 --> 00:00:11,200
>> In this episode, we will be talking
about a new front-end framework,

7
00:00:11,200 --> 00:00:14,860
page transitions, designing for thumbs and
more.

8
00:00:14,860 --> 00:00:16,603
>> Let's check it out.

9
00:00:16,603 --> 00:00:21,555
[MUSIC]

10
00:00:21,555 --> 00:00:23,569
First up is concise.

11
00:00:25,670 --> 00:00:27,160
>> Well, that about covers that.

12
00:00:27,160 --> 00:00:29,660
>> Oh, I guess I should say a little bit
more about it.

13
00:00:29,660 --> 00:00:33,270
Concise is a better front-end framework.

14
00:00:33,270 --> 00:00:36,250
I know that, because it says it right here
on the web site.

15
00:00:36,250 --> 00:00:38,980
>> Do you feel like, they could have
summed that up a little bit better.

16
00:00:38,980 --> 00:00:41,750
Just been a little bit more concise.

17
00:00:41,750 --> 00:00:42,656
>> [CROSSTALK] Concise.

18
00:00:42,656 --> 00:00:46,390
>> It says give up the bloat, stop
tripping over your classes.

19
00:00:46,390 --> 00:00:47,580
>> Yeah man.
>> Quit tripping.

20
00:00:47,580 --> 00:00:49,520
Be concise.

21
00:00:49,520 --> 00:00:56,550
Down here, it says, it's perfect for all
devices, so it's responsive mobile first.

22
00:00:56,550 --> 00:00:57,390
That's always good.

23
00:00:57,390 --> 00:01:02,880
You can use it with your favorite
preprocessor, and it's highly expandable,

24
00:01:02,880 --> 00:01:08,640
so it's very easy to customize it, and use
some addons, bunch of people are using it.

25
00:01:08,640 --> 00:01:11,350
Now you're probably thinking at this
point, well, there's a lot of

26
00:01:11,350 --> 00:01:16,100
frontend frameworks, in fact we talk about
them all the time on The Treehouse Show.

27
00:01:16,100 --> 00:01:17,850
What makes this one different?

28
00:01:17,850 --> 00:01:19,970
Well, if you click on why concise.

29
00:01:19,970 --> 00:01:21,120
>> Sum it up in one word.

30
00:01:22,850 --> 00:01:24,130
>> Concise.

31
00:01:24,130 --> 00:01:26,040
It is actually aptly named.

32
00:01:26,040 --> 00:01:29,120
It says, there are a million other
front-end frameworks out there.

33
00:01:29,120 --> 00:01:31,060
What makes Concise unique?

34
00:01:31,060 --> 00:01:33,410
And basically it's the things that I just
said.

35
00:01:33,410 --> 00:01:34,720
It has a lot.

36
00:01:34,720 --> 00:01:39,940
Fewer features than a framework like
bootstrap, or foundation.

37
00:01:39,940 --> 00:01:44,770
So it's not gonna have tabs and model's,
and all that sort of stuff.

38
00:01:44,770 --> 00:01:48,770
But, what it does have, is grid
topography.

39
00:01:49,800 --> 00:01:53,320
And just a few very basic features that
you actually need,

40
00:01:53,320 --> 00:01:55,240
to get started making websites.

41
00:01:55,240 --> 00:02:00,080
Now, if you are familiar with something
like foundation,

42
00:02:00,080 --> 00:02:03,980
you're gonna find that the syntax is very
similar for grids.

43
00:02:03,980 --> 00:02:08,970
So, you have a row, and then you can
create columns.

44
00:02:08,970 --> 00:02:11,880
Anywho, that's concise and.

45
00:02:11,880 --> 00:02:12,620
>> Yeah.
I don't think we need to

46
00:02:12,620 --> 00:02:13,580
say anymore than that.

47
00:02:13,580 --> 00:02:14,320
>> That's pretty much it.

48
00:02:14,320 --> 00:02:15,830
>> I think you summed it up pretty well.

49
00:02:15,830 --> 00:02:17,030
>> Check it out.

50
00:02:17,030 --> 00:02:20,660
>> Next up, we have a blog post over on
CSS-TRICKS,

51
00:02:20,660 --> 00:02:27,710
about adding page transitions with CSS,
and a plugin called smoothState.js.

52
00:02:27,710 --> 00:02:32,280
Now, this attempts to address the issue
where you click on a link in a webpage.

53
00:02:32,280 --> 00:02:35,640
And then the page is loading, the screen
kind of turns white while the page is

54
00:02:35,640 --> 00:02:38,170
loading, and then everything else gets
loaded.

55
00:02:38,170 --> 00:02:42,230
Now, smoothState.js is a plugin that will
attempt to fetch the new

56
00:02:42,230 --> 00:02:42,880
page over [UNKNOWN].

57
00:02:42,880 --> 00:02:46,410
Then apply some CSS transitions, and

58
00:02:46,410 --> 00:02:51,580
make the whole process less disorienting
and jarring for a user.

59
00:02:51,580 --> 00:02:52,660
Now let's go ahead, and

60
00:02:52,660 --> 00:02:56,390
just check out the demo to see exactly
what they're talking about.

61
00:02:56,390 --> 00:02:58,330
And you'll see here is just a webpage.

62
00:02:58,330 --> 00:03:00,210
This is the demo page for smoothState.

63
00:03:00,210 --> 00:03:04,050
And then if I click this link Get it, Get
Started with smoothState.js.

64
00:03:04,050 --> 00:03:09,130
And watch my computer screen, and you'll
see that, nothing really happened.

65
00:03:09,130 --> 00:03:10,400
There was no flash to white.

66
00:03:10,400 --> 00:03:14,760
It just sort of smoothly loaded, and
applied this transition.

67
00:03:14,760 --> 00:03:15,510
Now if I click back,

68
00:03:15,510 --> 00:03:20,900
you'll see the transition gets applied
again, and so on for the different links.

69
00:03:20,900 --> 00:03:26,420
Now, if we go back over to the CSS tricks
article, there's a great walk through

70
00:03:26,420 --> 00:03:31,430
from the author who demonstrates how to go
through all this.

71
00:03:31,430 --> 00:03:34,550
First he demonstrates the problem, all
this is kinda.

72
00:03:34,550 --> 00:03:37,330
How janky it looks when just clicking
around to a webpage.

73
00:03:37,330 --> 00:03:41,560
Okay, there's a flash of white, well let's
go ahead and fix it.

74
00:03:41,560 --> 00:03:43,780
So the first thing that he says is, hey,

75
00:03:43,780 --> 00:03:46,520
let's identify how the elements will
animate.

76
00:03:46,520 --> 00:03:48,670
Do we want to slide up and fade in?

77
00:03:48,670 --> 00:03:50,700
Slide from the right.

78
00:03:50,700 --> 00:03:55,220
then, so we figure that out, then create
the different keyframes that you need.

79
00:03:55,220 --> 00:03:57,710
We'll create those in CSS.

80
00:03:57,710 --> 00:03:59,840
Once those are created we can go ahead,
and

81
00:03:59,840 --> 00:04:03,260
write the CSS declarations using those
keyframes.

82
00:04:03,260 --> 00:04:05,630
And then add those classes back to the
layout.

83
00:04:06,790 --> 00:04:11,460
Now you'll see that results in a nicer
entrance to the pages.

84
00:04:11,460 --> 00:04:14,070
But, you still see the flash.

85
00:04:14,070 --> 00:04:19,530
That is where the smoothState.js plugin
comes to the rescue.

86
00:04:19,530 --> 00:04:21,460
This is a nice little jQuery plugin and

87
00:04:21,460 --> 00:04:23,850
it gives you some different options saying
hey.

88
00:04:23,850 --> 00:04:27,010
This is the content that we're trying to
animate in between.

89
00:04:27,010 --> 00:04:31,550
This is how long we want the animation to
occur that's gonna be in milliseconds.

90
00:04:31,550 --> 00:04:36,960
And then what animation state class to
apply?

91
00:04:36,960 --> 00:04:39,460
And there's a little more TSS to go
through and do that.

92
00:04:39,460 --> 00:04:42,685
Now the nice thing about this plugin is
that it also has an option to

93
00:04:42,685 --> 00:04:44,820
pre-fetch the data in the page.

94
00:04:44,820 --> 00:04:49,320
So, when the user is hovering over a link
on a page it'll actually go out and

95
00:04:49,320 --> 00:04:51,310
fetch that, keep it in memory.

96
00:04:51,310 --> 00:04:53,220
That way as soon as the user actually
clicks,

97
00:04:53,220 --> 00:04:56,500
it will seem like no time has gone by at
all.

98
00:04:56,500 --> 00:04:59,486
It's actually kind of you know, misleading
in that way, but in a good way.

99
00:04:59,486 --> 00:05:02,615
>> It's pretty smooth.

100
00:05:02,615 --> 00:05:03,170
>> Yep.

101
00:05:03,170 --> 00:05:05,372
>> Well, transitioning.

102
00:05:05,372 --> 00:05:09,931
I wanna talk about this blog post called,
How to design for

103
00:05:09,931 --> 00:05:12,640
thumbs in the Era of Huge Screens.

104
00:05:12,640 --> 00:05:15,900
Now if, if, if you have an iPhone 6 or

105
00:05:15,900 --> 00:05:21,080
6 Plus, or maybe some of these, new
enormous Android phones.

106
00:05:21,080 --> 00:05:23,260
I think the Nexus7.

107
00:05:23,260 --> 00:05:23,870
>> Six.

108
00:05:23,870 --> 00:05:24,840
>> Six.
>> Six.

109
00:05:24,840 --> 00:05:30,110
>> Six just came out and they're, they're
pretty epically huge phones.

110
00:05:30,110 --> 00:05:32,520
And if you've tried to use one one-handed.

111
00:05:32,520 --> 00:05:36,400
Probably know that it's hard to reach
certain parts of the screen,

112
00:05:36,400 --> 00:05:38,560
depending on kind of how you're equipping
it.

113
00:05:38,560 --> 00:05:39,950
>> There two headed phones.

114
00:05:39,950 --> 00:05:40,900
>> They definitely are.

115
00:05:40,900 --> 00:05:42,840
They're, they're iPad in those.

116
00:05:42,840 --> 00:05:49,050
So, this article attempts to address, at
least some of the research behind

117
00:05:49,050 --> 00:05:54,360
how you might start to design for these
huge screens.

118
00:05:54,360 --> 00:06:01,020
So if we scroll down here, there's some
pretty wonderful graphics that show where

119
00:06:01,020 --> 00:06:06,740
the natural sweeping arch of your thumb
might land on different screen sizes.

120
00:06:06,740 --> 00:06:12,720
So, over here we have an iPhone to 4S, and

121
00:06:12,720 --> 00:06:15,850
it's pretty easy to reach just about any
part of the screen.

122
00:06:15,850 --> 00:06:20,660
You don't have to stretch a whole lot, and
you can tap just about anything.

123
00:06:20,660 --> 00:06:24,480
As you move all the may up to the IPHONE 6
PLUS,

124
00:06:24,480 --> 00:06:29,980
there's a pretty small area that you can
actually easily reach with your thumb.

125
00:06:29,980 --> 00:06:35,580
And you can stretch to reach some other
parts of the screen, but eventually, it's

126
00:06:35,580 --> 00:06:40,370
kind of impossible even if you have pretty
large hands to hit some of the areas and

127
00:06:40,370 --> 00:06:41,290
the corners.

128
00:06:41,290 --> 00:06:45,530
And hit some of those UI elements.

129
00:06:45,530 --> 00:06:46,700
So.

130
00:06:46,700 --> 00:06:47,660
What do you do?

131
00:06:47,660 --> 00:06:52,890
Well, this article sums up some of that
research pretty well shows,

132
00:06:52,890 --> 00:06:57,210
you know, how people might grip their
phone a little bit differently and

133
00:06:57,210 --> 00:07:01,810
maybe reach higher parts of the screen, it
talks about reachability.

134
00:07:01,810 --> 00:07:08,780
Anyway, really great post and definitely
one to read if you are designing websites,

135
00:07:08,780 --> 00:07:12,320
because these new screen sizes are
becoming more and more popular.

136
00:07:12,320 --> 00:07:13,590
>> Yes.
>> I think they have a graph and

137
00:07:13,590 --> 00:07:19,840
they're showing how like, it represents
15% or more of mobile browsing now so.

138
00:07:19,840 --> 00:07:22,410
>> So you gotta keep all the good content
in the thumb zone.

139
00:07:22,410 --> 00:07:26,780
>> It, it's, it's no longer enough to
worry about what's below the fold.

140
00:07:26,780 --> 00:07:28,190
You gotta worry about what.

141
00:07:28,190 --> 00:07:29,480
>> Cuz fingers don't fold.

142
00:07:29,480 --> 00:07:30,870
>> That's right.
You gotta worry about what you

143
00:07:30,870 --> 00:07:32,330
can hit with your thumbs.

144
00:07:32,330 --> 00:07:34,980
>> Outside of the thumb zone, is the
danger zone.

145
00:07:34,980 --> 00:07:35,480
>> Yes.

146
00:07:36,780 --> 00:07:37,570
>> Call Kenny Loggins.

147
00:07:37,570 --> 00:07:39,190
>> Yes, that's concise.

148
00:07:39,190 --> 00:07:43,340
>> Next up, we have a plugin called
converse.js.

149
00:07:43,340 --> 00:07:47,040
This is a really interesting free piece of
JavaScript,

150
00:07:47,040 --> 00:07:52,730
that allows you to add XMPP or Jabber
Chat, to your website.

151
00:07:52,730 --> 00:07:57,930
And there a bunch of different plugins,
for different CMSs.

152
00:07:57,930 --> 00:07:59,660
There's integration with Plone,

153
00:07:59,660 --> 00:08:02,980
Django, Roundcube, Wordpress, Patternslib,
and Alfresco.

154
00:08:02,980 --> 00:08:04,580
I know a few of those.

155
00:08:04,580 --> 00:08:06,148
Alfresco's delicious, by the way.

156
00:08:06,148 --> 00:08:06,916
>> Mm-hm.

157
00:08:06,916 --> 00:08:07,660
>> anyway.

158
00:08:07,660 --> 00:08:09,520
So, this feature is single user chat.

159
00:08:09,520 --> 00:08:10,740
A bunch of different chat rooms.

160
00:08:10,740 --> 00:08:12,030
Just a ton of different things.

161
00:08:12,030 --> 00:08:14,940
Vcard support, service discovery, so many
different things.

162
00:08:14,940 --> 00:08:19,030
Now, you are going to need an XMPP, or

163
00:08:19,030 --> 00:08:21,890
Java server if you do wanna get this set
up.

164
00:08:21,890 --> 00:08:26,950
But, all you really need to do despite
this very thorough documentation.

165
00:08:26,950 --> 00:08:31,090
Is include the CSS and the JavaScript.

166
00:08:31,090 --> 00:08:37,050
Initialize it with some different items
like the service URL, and

167
00:08:37,050 --> 00:08:40,240
kind of some different options like
whether or not you want to list rooms, and

168
00:08:40,240 --> 00:08:43,970
auto subscribe to different things and
then you are good to go.

169
00:08:43,970 --> 00:08:48,880
So this is similar to Facebook Chat, but
also supports multi user chat rooms.

170
00:08:48,880 --> 00:08:54,610
And it features off the record encrypted
messaging, as well as sound notifications.

171
00:08:54,610 --> 00:08:57,390
And it also has multi-lingual support.

172
00:08:57,390 --> 00:09:00,790
Supports most commands that you would
think from banning,

173
00:09:00,790 --> 00:09:04,050
clearing the messages, setting topics.

174
00:09:04,050 --> 00:09:07,220
And even changing your nickname.

175
00:09:07,220 --> 00:09:08,910
So what you'll need to get started is,

176
00:09:08,910 --> 00:09:13,400
like we said, an XMPP server, a connection
manager,

177
00:09:13,400 --> 00:09:18,810
and access to the server to overcome
cross-domain request restrictions.

178
00:09:18,810 --> 00:09:22,570
And there is different configuration
options for both Nginx and

179
00:09:22,570 --> 00:09:25,190
Apache about how to get that set up.

180
00:09:25,190 --> 00:09:27,760
Anyway, if you're looking to add chat to
your site,

181
00:09:27,760 --> 00:09:32,340
this is a pretty easy way to get started,
so make sure to check it out.

182
00:09:32,340 --> 00:09:33,480
>> Very nice stuff.

183
00:09:33,480 --> 00:09:35,400
Well next up is Pushy.

184
00:09:35,400 --> 00:09:39,490
This is an off-canvas navigation menu, and

185
00:09:39,490 --> 00:09:44,380
what's cool about this is that it uses CSS
transforms and transitions.

186
00:09:44,380 --> 00:09:46,600
That's kind of boring, let's just see what
this does.

187
00:09:46,600 --> 00:09:47,980
>> Yeah.
>> Whoa, look at that.

188
00:09:47,980 --> 00:09:52,890
When I click the menu button, it slides
over from the left and

189
00:09:52,890 --> 00:09:57,930
you've probably seen this design pattern
before on mobile devices, and apps and

190
00:09:57,930 --> 00:10:01,660
on websites but this is a common pattern
because.

191
00:10:01,660 --> 00:10:08,341
It saves on space and it also is
responsive so that's pretty nice.

192
00:10:08,341 --> 00:10:10,096
>> Don't they call that a hamburger menu?

193
00:10:10,096 --> 00:10:15,250
>> They do call it a hamburger menu, and
we've talked about this before Jason.

194
00:10:15,250 --> 00:10:18,322
I wish you wouldn't bring that up cuz now
I'm really hungry.

195
00:10:18,322 --> 00:10:19,525
>> Yeah me too.

196
00:10:19,525 --> 00:10:20,060
>> Yeah.

197
00:10:20,060 --> 00:10:21,690
>> What are you doing after this?

198
00:10:21,690 --> 00:10:23,100
>> I'm thinking about getting-

199
00:10:23,100 --> 00:10:24,160
>> Yeah, we should do that.

200
00:10:24,160 --> 00:10:24,730
>> Hamburger, yeah.

201
00:10:24,730 --> 00:10:25,880
>> I mean I don't wanna be pushy about it.

202
00:10:25,880 --> 00:10:26,590
But we should do it.

203
00:10:26,590 --> 00:10:28,090
>> That sounds, that sounds delicious.

204
00:10:29,130 --> 00:10:32,720
So, I mentioned this uses CSS transforms
and transitions.

205
00:10:32,720 --> 00:10:37,320
That's really nice, because those actually
render on the GPU, so

206
00:10:37,320 --> 00:10:41,170
it's going to give you nice smooth frame
rates in browser.

207
00:10:41,170 --> 00:10:46,686
And it also still has a jQuery animation
fallback for internet explorer 7

208
00:10:46,686 --> 00:10:52,980
through 9, so if these CSS transforms and
transitions are not supported,

209
00:10:52,980 --> 00:10:59,430
you can still enjoy this animation, it
just might not look quite as smooth.

210
00:11:00,590 --> 00:11:02,750
This requires jQuery 1.9.

211
00:11:02,750 --> 00:11:09,800
It works in all the most popular browsers,
and it also works great on mobile.

212
00:11:09,800 --> 00:11:15,830
And if we head over to the Documentation,
it will take us over to GitHub.

213
00:11:15,830 --> 00:11:19,470
And you can read more about, how to
actually install it

214
00:11:19,470 --> 00:11:24,970
with a package manager like Bower, and how
to include it onto your page.

215
00:11:24,970 --> 00:11:28,390
Anyway, not a whole lot to say about it,
but I thought it was pretty cool.

216
00:11:28,390 --> 00:11:29,840
>> Yeah, nice little plugin.

217
00:11:29,840 --> 00:11:31,880
well, that's about all we have time for
this week.

218
00:11:31,880 --> 00:11:32,760
Nick, who are you on Twitter?

219
00:11:32,760 --> 00:11:33,850
>> I am @nickrp.

220
00:11:33,850 --> 00:11:35,280
>> And I am @jseifer.

221
00:11:35,280 --> 00:11:37,230
For more information on anything we talked
about.

222
00:11:37,230 --> 00:11:40,290
Go ahead and check out, our show notes
right below this video.

223
00:11:40,290 --> 00:11:42,173
And thanks so much for watching.

224
00:11:42,173 --> 00:11:43,268
And we'll talk to you next week.

225
00:11:43,268 --> 00:11:49,989
[MUSIC]