1
00:00:00,330 --> 00:00:01,140
I'm Nick Pettit.

2
00:00:01,140 --> 00:00:02,190
>> I'm Jason Seifer.

3
00:00:02,190 --> 00:00:04,930
>> And you're watching the Treehouse Show,
your weekly dose of internets

4
00:00:04,930 --> 00:00:08,030
where we talk about all things web design,
web development and more.

5
00:00:08,030 --> 00:00:09,510
>> In this episode we'll be talking about

6
00:00:09,510 --> 00:00:14,730
creating style guides, writing interface
copy, Ratchet, and more.

7
00:00:14,730 --> 00:00:15,720
>> Let's check it out.

8
00:00:15,720 --> 00:00:19,750
[MUSIC]

9
00:00:19,750 --> 00:00:21,250
[MUSIC]

10
00:00:21,250 --> 00:00:26,320
First up is an article from a list of part
called creating style guides.

11
00:00:26,320 --> 00:00:29,540
>> Now first- A style guide is basically
how you wanna dress, right?

12
00:00:29,540 --> 00:00:35,040
>> Not quite, a style guide is basically a
living document of code.

13
00:00:35,040 --> 00:00:41,290
So it's a place where you can put all of
the elements and modules and visual

14
00:00:41,290 --> 00:00:47,840
pieces of your application as it is
described in your HTML and CSS.

15
00:00:47,840 --> 00:00:52,580
So, famously, Starbucks has made their
style

16
00:00:52,580 --> 00:00:55,740
guide available for anybody to look at.

17
00:00:55,740 --> 00:00:59,870
So, this is what their style guide looks
like for all of their web properties.

18
00:01:01,390 --> 00:01:05,510
You should use a style guide to make sure
that all of your code

19
00:01:05,510 --> 00:01:09,980
is in sync, so everybody is om the same
page, and everybody's making something

20
00:01:09,980 --> 00:01:12,820
that's very consistent with one another,
and

21
00:01:12,820 --> 00:01:14,740
they're not going off and creating their

22
00:01:14,740 --> 00:01:18,660
own, components if something is already
created

23
00:01:18,660 --> 00:01:22,530
so it helps with the reusability of code.

24
00:01:22,530 --> 00:01:25,640
If you scroll down a little further here,
then go into

25
00:01:25,640 --> 00:01:29,770
how to build your own style guide, and
they first suggest

26
00:01:29,770 --> 00:01:33,250
going with just the basics of things like
typography, how your

27
00:01:33,250 --> 00:01:37,800
grid system works, how the color palette
should look and so on.

28
00:01:37,800 --> 00:01:42,850
And then after you've build that out, you
can start to add in components, so, things

29
00:01:42,850 --> 00:01:48,950
like content cards, or buttons or things
that, have multiple pieces of markup.

30
00:01:48,950 --> 00:01:51,720
And need to be put together.

31
00:01:51,720 --> 00:01:54,500
>> Yeah this is great, even for somebody
n, newly joining your project.

32
00:01:54,500 --> 00:01:55,590
You know if they don't know how to use

33
00:01:55,590 --> 00:01:57,920
a certain element, or even what colors to
use.

34
00:01:57,920 --> 00:01:59,540
They can always just refer to style guide
to

35
00:01:59,540 --> 00:02:02,570
see how to do specific implementations of
something, right?

36
00:02:02,570 --> 00:02:03,720
>> Exactly.

37
00:02:03,720 --> 00:02:07,220
So, a style guide basically just makes
your site a lot more

38
00:02:07,220 --> 00:02:10,730
maintainable and makes it much easier to
work on a team together.

39
00:02:10,730 --> 00:02:14,520
So, putting together that documentation
can help a lot.

40
00:02:14,520 --> 00:02:16,210
Especially on large projects.

41
00:02:16,210 --> 00:02:19,210
>> Nick and I actually have a style guide
for our hair.

42
00:02:19,210 --> 00:02:22,070
But we're not going to link to that,
publicly.

43
00:02:22,070 --> 00:02:23,360
Speaking of style guides.

44
00:02:23,360 --> 00:02:24,960
Once you've written your style guide, it'd
be

45
00:02:24,960 --> 00:02:27,980
great to have good interface copy on your
site.

46
00:02:27,980 --> 00:02:29,450
And that's the next article we're talking
about.

47
00:02:29,450 --> 00:02:31,710
This is a blog post from, Google Ventures

48
00:02:31,710 --> 00:02:35,470
called 5 Rules for Writing Great Interface
Copy.

49
00:02:35,470 --> 00:02:37,150
Now as you might expect there are

50
00:02:37,150 --> 00:02:40,770
five rules inside here, about writing
interface copy.

51
00:02:40,770 --> 00:02:42,440
And the first one, clarity is king.

52
00:02:42,440 --> 00:02:46,480
Some people say short is best, and some
people say longer is better.

53
00:02:46,480 --> 00:02:49,560
Some people say that people only scan text
on the web and that they don't read.

54
00:02:49,560 --> 00:02:50,130
That's true!

55
00:02:50,130 --> 00:02:51,740
I didn't even read this article.

56
00:02:51,740 --> 00:02:53,200
No, I'm just kidding.

57
00:02:53,200 --> 00:02:57,080
So anyway, the author makes a bunch of
great points on what

58
00:02:57,080 --> 00:02:59,960
to watch out for when you are writing copy
for your web page.

59
00:02:59,960 --> 00:03:02,520
Like one, be specific, don't say search
when you

60
00:03:02,520 --> 00:03:06,310
mean filter, save is not the same as
submit.

61
00:03:06,310 --> 00:03:08,780
Something that people typically strive for
a lot

62
00:03:08,780 --> 00:03:12,640
is having site with a lot of personality.

63
00:03:12,640 --> 00:03:16,720
And the author says that personality
doesn't matter as much as you think.

64
00:03:16,720 --> 00:03:19,650
Instead of trying to stand out, actually
just write more

65
00:03:19,650 --> 00:03:24,766
effective copy and your personality will
shine through that way.

66
00:03:24,766 --> 00:03:27,492
Number three just tell me.

67
00:03:27,492 --> 00:03:31,260
Really describe what's going on as simply
as you possibly can.

68
00:03:31,260 --> 00:03:31,940
Number four.

69
00:03:31,940 --> 00:03:33,610
By the way people really do read.

70
00:03:33,610 --> 00:03:35,330
That is false.

71
00:03:35,330 --> 00:03:35,870
Number five.

72
00:03:35,870 --> 00:03:38,120
Writing is part of the design process.

73
00:03:38,120 --> 00:03:41,520
That's probably the biggest takeaway from
this article.

74
00:03:41,520 --> 00:03:44,540
Most people think of writing and copy as
one of the

75
00:03:44,540 --> 00:03:49,350
last parts of creating a website or even a
web application.

76
00:03:49,350 --> 00:03:52,420
And writing is something that should be
done throughout the process

77
00:03:52,420 --> 00:03:56,650
of design because the author says that
writing is actually design.

78
00:03:56,650 --> 00:03:59,310
When you look at the visual design of a
web page that

79
00:03:59,310 --> 00:04:03,030
is just one part of it, copy is another
part of design.

80
00:04:03,030 --> 00:04:06,040
Anyway, this article is actually great and
I did read it.

81
00:04:06,040 --> 00:04:07,660
You can find the link to it in the show
notes, which

82
00:04:07,660 --> 00:04:10,090
you can get to in YouTube.com\gotreehouse,

83
00:04:10,090 --> 00:04:13,040
or search for us in
iTunes\WearetheTreehouseShow.

84
00:04:13,040 --> 00:04:14,880
And drop us a rating while you're there.

85
00:04:14,880 --> 00:04:18,080
>> You know, that is really good advice,
dropping us a rating.

86
00:04:18,080 --> 00:04:22,000
But also considering copy as part of the
design process.

87
00:04:23,130 --> 00:04:27,390
Basically I always will put in real copy
as often as

88
00:04:27,390 --> 00:04:31,240
I can instead of, like, placeholder text
or lorem ipsum text,

89
00:04:31,240 --> 00:04:34,530
because sometimes something is gonna end
up being a lot longer

90
00:04:34,530 --> 00:04:37,660
than you think it is or might be shorter,
and you know?

91
00:04:37,660 --> 00:04:40,490
It's a good way to figure out how things

92
00:04:40,490 --> 00:04:43,710
should actually look as well as read on
your site.

93
00:04:43,710 --> 00:04:46,070
>> That is actually one thing the author
says is

94
00:04:46,070 --> 00:04:49,802
do not use lorem ipsum text when designing
the site.

95
00:04:49,802 --> 00:04:54,760
The writing and copy of your site or app
will evolve as the design does.

96
00:04:54,760 --> 00:04:55,560
>> Good tip.

97
00:04:55,560 --> 00:04:59,650
Well next up is a new mobile framework
called Ratchet.

98
00:04:59,650 --> 00:05:02,410
This is a front end framework from the
same people that

99
00:05:02,410 --> 00:05:06,340
brought you a boot strap frame work that
is much more popular.

100
00:05:06,340 --> 00:05:09,076
But this is just hitting version 2.0.

101
00:05:09,076 --> 00:05:14,614
It hit 2.0 around February and they've
been maintaining pretty consistently.

102
00:05:14,614 --> 00:05:17,590
It's in version 2.0.2 as of this
recording.

103
00:05:17,590 --> 00:05:21,000
And let's take a look at some of the
components.

104
00:05:21,000 --> 00:05:26,440
So, this is, like I said, a front end
frame work for building mobile websites.

105
00:05:26,440 --> 00:05:29,400
Now, it's for building mobile-only
websites so

106
00:05:29,400 --> 00:05:34,350
these won't actually work on desktop
devices.

107
00:05:34,350 --> 00:05:38,230
So, this is maybe useful for a very
specific instance where

108
00:05:38,230 --> 00:05:42,060
you want to create a separate mobile site
from your desktop site.

109
00:05:42,060 --> 00:05:47,660
Now, as you can see, the styling is very
similar to what you might find on A native

110
00:05:47,660 --> 00:05:51,030
mobile app so they have this base styling,
they

111
00:05:51,030 --> 00:05:54,540
have iOS styling and then they have
Android styling.

112
00:05:54,540 --> 00:05:58,310
So you can use all of the same components
here and then

113
00:05:58,310 --> 00:06:03,380
just use a different style sheet and it
will automatically restyle it.

114
00:06:03,380 --> 00:06:06,980
So if we scroll down a little further here
we can look at some of the

115
00:06:06,980 --> 00:06:11,090
various components has everything you'd
expect including table

116
00:06:11,090 --> 00:06:15,790
views uh,button bars, badges, and that
sort of thing.

117
00:06:15,790 --> 00:06:18,040
Lets scroll down a little further here.

118
00:06:18,040 --> 00:06:19,850
They have some really nice toggles here

119
00:06:19,850 --> 00:06:23,450
that look very close to their native
equivalents.

120
00:06:23,450 --> 00:06:26,560
Switch over to Android here so we can see
what that looks like.

121
00:06:26,560 --> 00:06:30,470
But in general, it's pretty cool I played
around with it

122
00:06:30,470 --> 00:06:35,300
a little bit myself fairly recently and
it's very easy to use.

123
00:06:35,300 --> 00:06:40,170
To go from one page to another it does
rely on push J.S. so

124
00:06:40,170 --> 00:06:41,460
you will need to be running a

125
00:06:41,460 --> 00:06:45,020
local web server when doing development
with Ratchet.

126
00:06:45,020 --> 00:06:48,780
So even though it's just HTML CSS with
JavaScript you can't just download

127
00:06:48,780 --> 00:06:52,410
it and expect it to work immediately, you
have to be running a server.

128
00:06:52,410 --> 00:06:56,590
The other thing to keep in mind with
Ratchet is that you also have to enable

129
00:06:56,590 --> 00:06:59,030
Touch Events if you're expecting it to
work

130
00:06:59,030 --> 00:07:03,130
in a normal desktop browser like Chrome or
FireFox.

131
00:07:03,130 --> 00:07:07,620
What I actually did when I was playing
around with it, is I just used the iOS

132
00:07:07,620 --> 00:07:13,950
simulator that comes with X Code on Mac OS
10, but it's pretty great.

133
00:07:13,950 --> 00:07:17,200
It's, like I said, it just hit 2.0, which
was a

134
00:07:17,200 --> 00:07:20,750
complete rewrite, so at this point it's
starting to get fairly mature.

135
00:07:20,750 --> 00:07:26,140
And I think it's worth checking out if
you're maybe wanting to just prototype a

136
00:07:26,140 --> 00:07:29,810
native app, this would be a really good
thing to, to go to and use.

137
00:07:29,810 --> 00:07:31,080
>> No, very cool.

138
00:07:31,080 --> 00:07:35,360
Next up, we have a project called
elementTransitions.js.

139
00:07:35,360 --> 00:07:38,340
You may remember an article on co-drops we
covered

140
00:07:38,340 --> 00:07:41,160
a little while ago on these same element
transitions.

141
00:07:41,160 --> 00:07:47,270
Well, this is now a JavaScript library
that lets you use them in your web pages.

142
00:07:47,270 --> 00:07:49,550
Now look at all these transitions we have
here.

143
00:07:49,550 --> 00:07:51,880
If you can focus on one just for a second
and you see is,

144
00:07:51,880 --> 00:07:56,270
hey look, we've got a rotate slide in and
also a rotate slide out.

145
00:07:56,270 --> 00:07:58,270
So these are actually extremely easy to
use.

146
00:07:58,270 --> 00:08:03,040
They also are very performant because they
are using CSS3 transitions.

147
00:08:03,040 --> 00:08:06,540
Now, if we scroll down and get through all
of this

148
00:08:06,540 --> 00:08:10,390
while being able to focus, we can see the
examples right here.

149
00:08:10,390 --> 00:08:14,020
So if we wanna rotate an element on a
click, wow, look at that.

150
00:08:14,020 --> 00:08:16,410
Element One rotates out and Element Two
comes in.

151
00:08:16,410 --> 00:08:17,030
>> Amazing!

152
00:08:17,030 --> 00:08:17,850
>> Isn't it?

153
00:08:17,850 --> 00:08:21,380
And this is all it takes right here to get
back to work.

154
00:08:21,380 --> 00:08:25,620
Now, you can also add in different classes
for these transitions.

155
00:08:25,620 --> 00:08:28,590
So we can see that the date of class is an

156
00:08:28,590 --> 00:08:31,680
element transition wrapper, and then

157
00:08:31,680 --> 00:08:35,560
the button applies certain different
transitions.

158
00:08:35,560 --> 00:08:40,940
Now, where is the stand alone example, it
is 404 'ing right now.

159
00:08:40,940 --> 00:08:44,380
But I promise it is extremely easy to use
you

160
00:08:44,380 --> 00:08:49,760
just include jQuery, include the element
transition CSS and also

161
00:08:49,760 --> 00:08:52,450
the JavaScript, and then you can do it by
applying

162
00:08:52,450 --> 00:08:57,490
classes to the existing markup, or
toggling them through JavaScript code.

163
00:08:57,490 --> 00:08:58,310
Anyway, great project.

164
00:08:58,310 --> 00:09:00,120
Definitely check it out.

165
00:09:00,120 --> 00:09:01,040
>> Very cool stuff.

166
00:09:01,040 --> 00:09:04,820
Well, next up is Magic Effects.

167
00:09:04,820 --> 00:09:07,440
I believe this is called Magic CSS if I'm
not

168
00:09:07,440 --> 00:09:13,850
mistaken, but basically, it is a bunch of
transitions and animations.

169
00:09:13,850 --> 00:09:14,700
>> Are we in space?

170
00:09:14,700 --> 00:09:18,600
>> That you could apply to different
elements on your website.

171
00:09:18,600 --> 00:09:20,750
And yes Jason it does look like we're in
space.

172
00:09:20,750 --> 00:09:24,751
I think they're using a full screen HTML
video on background.

173
00:09:24,751 --> 00:09:25,180
>> huh.

174
00:09:25,180 --> 00:09:27,020
>> Yeah, pretty cool.

175
00:09:27,020 --> 00:09:28,010
>> Some say it's magical.

176
00:09:28,010 --> 00:09:30,134
>> Yeah, it's almost more interesting than

177
00:09:30,134 --> 00:09:32,887
this actual framework, but you know,
that's cool.

178
00:09:32,887 --> 00:09:33,910
>> [LAUGH].

179
00:09:33,910 --> 00:09:37,850
>> Anyway, you can make things puff in and
puff out.

180
00:09:37,850 --> 00:09:42,970
You can make things go to the left and
right just like that.

181
00:09:42,970 --> 00:09:45,980
There's a couple of different static
effects here.

182
00:09:45,980 --> 00:09:48,350
There's some perspective effects.

183
00:09:48,350 --> 00:09:51,660
So, those will actually transform in 3D
space.

184
00:09:51,660 --> 00:09:53,520
That's pretty cool.

185
00:09:53,520 --> 00:09:59,700
You can slide a few of these, so if you
want to, maybe, reveal something.

186
00:09:59,700 --> 00:10:00,900
Maybe something like that.

187
00:10:00,900 --> 00:10:05,700
>> I feel like most of the names of these
effect could also be dance moves.

188
00:10:05,700 --> 00:10:08,820
>> I, I think that's where the inspiration
for this comes from Jason.

189
00:10:08,820 --> 00:10:09,210
>> Yeah.

190
00:10:09,210 --> 00:10:09,760
>> Dance moves.

191
00:10:09,760 --> 00:10:10,715
>> Wanna tin right out.

192
00:10:10,715 --> 00:10:12,310
Can we see that next?

193
00:10:12,310 --> 00:10:12,910
>> Let's do it.

194
00:10:12,910 --> 00:10:13,945
There it goes.

195
00:10:13,945 --> 00:10:17,038
Tin right up.

196
00:10:17,038 --> 00:10:23,030
If we go over to the GitHub page you can
see that it's just some CSS here.

197
00:10:23,030 --> 00:10:26,210
And to add it to your site you

198
00:10:26,210 --> 00:10:29,320
just include CSS file, so that's pretty
straightforward.

199
00:10:29,320 --> 00:10:32,490
They also have a minified version if you
prefer that.

200
00:10:32,490 --> 00:10:35,960
And if you want to use it with jQuery you

201
00:10:35,960 --> 00:10:38,830
can actually just add and remove classes
just like that.

202
00:10:38,830 --> 00:10:42,670
So, oh, actually you have to use it with
jQuery.

203
00:10:42,670 --> 00:10:45,920
So this is what that would look like.

204
00:10:45,920 --> 00:10:48,730
So you just add and remove the classes or
you can toggle

205
00:10:48,730 --> 00:10:53,360
classes if you want to have an effect here
and then go away.

206
00:10:53,360 --> 00:10:56,900
And you can also adjust the timing.

207
00:10:56,900 --> 00:11:00,230
So the default timing is set for you but
you

208
00:11:00,230 --> 00:11:02,240
can go ahead and change that if you want
to.

209
00:11:02,240 --> 00:11:03,680
Anyway, not a whole lot to say about it.

210
00:11:03,680 --> 00:11:06,460
But, I thought the effects were pretty
cool.

211
00:11:06,460 --> 00:11:08,820
So just wanted to point that out.

212
00:11:08,820 --> 00:11:08,880
>> Hm.

213
00:11:08,880 --> 00:11:12,450
Well I'm just gonna tend right into our
next article right here.

214
00:11:12,450 --> 00:11:12,660
>> I'm ready.

215
00:11:12,660 --> 00:11:17,920
>> Which is a GitHub cheat sheet by Tim
Green on GitHub.

216
00:11:17,920 --> 00:11:22,420
And as you may expect from the name, this
is a cheat sheet for working with GitHub.

217
00:11:22,420 --> 00:11:24,330
They say it's a collection of cool hidden
and

218
00:11:24,330 --> 00:11:28,440
not so hidden features of both Git and
GitHub.

219
00:11:28,440 --> 00:11:33,130
Now we're not gonna go over everything
because there is so much stuff here.

220
00:11:33,130 --> 00:11:34,090
Look, look at all this.

221
00:11:34,090 --> 00:11:36,170
Just look at this table of contents.

222
00:11:36,170 --> 00:11:38,790
But you might not have known that if you

223
00:11:38,790 --> 00:11:41,870
add this, this little query string right
here, W equals

224
00:11:41,870 --> 00:11:45,690
one to any URL on GitHUb It will ignore
the

225
00:11:45,690 --> 00:11:48,390
white space to see only the code that has
changed.

226
00:11:48,390 --> 00:11:50,440
Isn't that cool?

227
00:11:50,440 --> 00:11:53,980
anyway, it lets you do just a ton of
stuff, I didn't even know that

228
00:11:53,980 --> 00:11:57,510
you could do some of the things in this
article like I said, so much

229
00:11:57,510 --> 00:12:00,220
going on here, even if you're been working
with git and GitHub for a while,

230
00:12:00,220 --> 00:12:03,510
I guarantee you will pick something up in
this cheat sheet, so check it out.

231
00:12:03,510 --> 00:12:05,490
We'll have a link in the show notes.

232
00:12:05,490 --> 00:12:06,260
>> Very cool stuff.

233
00:12:06,260 --> 00:12:08,710
Well, next up is a blog post from John

234
00:12:08,710 --> 00:12:13,220
Resig, on his personal website called
Write Code Every Day.

235
00:12:13,220 --> 00:12:17,870
And this is actually a pretty timely
article for me personally because this is

236
00:12:17,870 --> 00:12:24,090
something I'm also trying to do to improve
my coding habits so.

237
00:12:24,090 --> 00:12:26,390
>> John Resig is the author of jQuery,
right?

238
00:12:26,390 --> 00:12:27,830
>> That is correct Jason.

239
00:12:27,830 --> 00:12:28,935
Thank you for pointing that out.

240
00:12:28,935 --> 00:12:33,850
[LAUGH] So John Resig set up a couple of
rules for himself.

241
00:12:33,850 --> 00:12:35,740
He said I must write code every day.

242
00:12:35,740 --> 00:12:37,540
I can write dots and blog posts and other

243
00:12:37,540 --> 00:12:41,270
things but in addition to that, I must
write code.

244
00:12:42,700 --> 00:12:44,190
He also wants to make sure he's writing

245
00:12:44,190 --> 00:12:46,960
useful codes, so just, you know, making
sure

246
00:12:46,960 --> 00:12:50,300
he doesn't do any just tweaking or
reformatting

247
00:12:50,300 --> 00:12:52,930
or things like that, has to actually do
something.

248
00:12:52,930 --> 00:12:54,920
The code must be written before midnight
and

249
00:12:54,920 --> 00:12:57,830
it must be open source and up on GitHub.

250
00:12:57,830 --> 00:13:00,850
So he's been doing this for 20 consecutive
weeks now and

251
00:13:00,850 --> 00:13:05,160
you can see his GitHub history and that's
pretty impressive there.

252
00:13:05,160 --> 00:13:10,490
But I think one of the things that I'd
like to highlight that came out of this is

253
00:13:10,490 --> 00:13:16,240
that he said it used to be that getting
work done on weekends was totally critical

254
00:13:16,240 --> 00:13:19,140
to any kind of forward momentum on his

255
00:13:19,140 --> 00:13:23,220
own side projects and that's pretty tough
especially when

256
00:13:23,220 --> 00:13:26,510
you are working on something like jQuery
or

257
00:13:26,510 --> 00:13:30,055
other frameworks that that John has been
working on.

258
00:13:30,055 --> 00:13:36,940
So, you know, side projects really are
super important to progressing your career

259
00:13:36,940 --> 00:13:40,710
and progressing your skills so that's why
I think this article is so great.

260
00:13:40,710 --> 00:13:43,630
It tells you exactly how to maintain those
side

261
00:13:43,630 --> 00:13:47,960
projects and keep the momentum going,
which can be tough.

262
00:13:47,960 --> 00:13:48,940
>> WCED.

263
00:13:48,940 --> 00:13:49,680
Write code every day.

264
00:13:51,140 --> 00:13:53,890
Next up we have a project called vis.js.

265
00:13:53,890 --> 00:13:57,740
This is a visual interaction system

266
00:13:57,740 --> 00:14:02,250
a, a, dynamic browser based visualization
library.

267
00:14:02,250 --> 00:14:03,210
So what does this let you do?

268
00:14:03,210 --> 00:14:07,080
Let's just take a look at a examples
gallery that they have on

269
00:14:07,080 --> 00:14:11,790
the site that is in GitHub and we can't
access right at the moment.

270
00:14:11,790 --> 00:14:13,750
And let me go back here.

271
00:14:16,250 --> 00:14:17,500
Because it launched in a new page.

272
00:14:17,500 --> 00:14:19,810
Okay, let's look at the timeline here.

273
00:14:19,810 --> 00:14:22,820
This is something that was generated
completely programatically.

274
00:14:22,820 --> 00:14:27,030
And as you can see you can scroll down,
put different items in here.

275
00:14:27,030 --> 00:14:30,850
And then if we go back, there's just a ton
of different things you can do, here's

276
00:14:30,850 --> 00:14:34,200
this example that has quote much data so
you

277
00:14:34,200 --> 00:14:36,580
can see it has a hundred items in here.

278
00:14:36,580 --> 00:14:38,890
Very performantly we can add in another
couple

279
00:14:38,890 --> 00:14:41,800
zeros worth, hit draw, and if we wait

280
00:14:41,800 --> 00:14:46,330
just a moment all those things will load
onto the end of the pay tray here.

281
00:14:46,330 --> 00:14:48,680
I'm not gonna make us scroll through all
ten thousand of them.

282
00:14:48,680 --> 00:14:49,480
>> No, let's do it right now.

283
00:14:49,480 --> 00:14:51,640
>> We'll just, we'll just trust us that
we're there.

284
00:14:51,640 --> 00:14:53,430
So you can also do graphs here.

285
00:14:54,580 --> 00:14:57,830
Basic usage graph right here just a few
nodes

286
00:14:57,830 --> 00:15:00,485
anyway ton of different options that you
can do.

287
00:15:00,485 --> 00:15:03,960
Uh,very extensive documentation walking
through the different data

288
00:15:03,960 --> 00:15:06,920
sets and views that you need to do.

289
00:15:06,920 --> 00:15:09,830
You can install this via NPN or Bauer eh

290
00:15:09,830 --> 00:15:12,660
as you can see it is extremely easy to
use.

291
00:15:12,660 --> 00:15:17,340
So if you need any visualizations in your
site, go ahead and check out this project.

292
00:15:17,340 --> 00:15:20,140
>> Very cool stuff, well I am @nickrp on
Twitter.

293
00:15:20,140 --> 00:15:21,170
>> And I am @jseifer.

294
00:15:21,170 --> 00:15:23,980
For more information on anything we talked
about, check out the show notes that you

295
00:15:23,980 --> 00:15:27,160
can get to at www.YouTube.com/gotreehouse,
or search for

296
00:15:27,160 --> 00:15:30,030
us on iTunes, we are the Treehouse Show.

297
00:15:30,030 --> 00:15:33,240
>> And, of course, if you'd like to see
more videos like this one about web

298
00:15:33,240 --> 00:15:36,580
design, web development, mobile, business,
and so much

299
00:15:36,580 --> 00:15:40,530
more, be sure to check us out at
teamtreehouse.com.

300
00:15:40,530 --> 00:15:41,870
Thank you so much for watching.

301
00:15:41,870 --> 00:15:43,010
And we will see you next week.

302
00:15:43,010 --> 00:15:50,010
[MUSIC]