1
00:00:00,240 --> 00:00:00,930
I'm Nick Pettit.

2
00:00:00,930 --> 00:00:01,900
>> I'm Jason Seifer.

3
00:00:01,900 --> 00:00:04,600
>> And you're watching, the Treehouse
Show, your weekly dose of internets,

4
00:00:04,600 --> 00:00:07,560
where we talk about all things web design,
web development and more.

5
00:00:07,560 --> 00:00:12,800
>> In this episode we'll be talking about
jQuery Boilerplate, Sass, maps, and more.

6
00:00:12,800 --> 00:00:13,879
>> Let's check it out.

7
00:00:13,879 --> 00:00:18,878
[MUSIC].

8
00:00:18,878 --> 00:00:22,485
>> First up,
we have the jQuery Boilerplate website.

9
00:00:22,485 --> 00:00:24,345
Now, as you might expect from the name,

10
00:00:24,345 --> 00:00:29,995
this gives you all sorts of boilerplate
to jumpstart jQuery plugin development.

11
00:00:29,995 --> 00:00:34,430
And I can tell that because it says it in
the header of the website right there.

12
00:00:34,430 --> 00:00:39,420
So, here is the most popular template for
beginners and above.

13
00:00:39,420 --> 00:00:41,640
That means somebody who has
more skill than a beginner,

14
00:00:41,640 --> 00:00:45,220
not necessarily somebody who's
physically above a beginner.

15
00:00:45,220 --> 00:00:46,730
And this is very, very easy to use.

16
00:00:46,730 --> 00:00:47,568
Include jQuery.

17
00:00:47,568 --> 00:00:50,760
Include this boilerplate.min and
you are good to go.

18
00:00:50,760 --> 00:00:52,230
So, here we go.

19
00:00:52,230 --> 00:00:54,540
This is the defaultPluginName.

20
00:00:54,540 --> 00:00:58,150
That's what you will be redefining
when you create your own plugin.

21
00:00:58,150 --> 00:01:01,830
Now, the idea here is that you
have this boilerplate plugin.

22
00:01:01,830 --> 00:01:03,824
And then, you go through, and

23
00:01:03,824 --> 00:01:07,680
you change it to do what you
actually want your plugin to do.

24
00:01:07,680 --> 00:01:09,590
We go ahead and look at this demo.

25
00:01:09,590 --> 00:01:11,460
Here is the index.html file.

26
00:01:11,460 --> 00:01:16,330
That shows you the minimum
that you need to get started.

27
00:01:16,330 --> 00:01:18,370
Now, this is the directory structure,

28
00:01:18,370 --> 00:01:22,380
if we look in the dist directory
that contains the boilerplate code.

29
00:01:22,380 --> 00:01:24,887
Now, this is going to be what you're going

30
00:01:24,887 --> 00:01:28,170
to be replacing when you
create your own jQuery plugin.

31
00:01:28,170 --> 00:01:30,422
So, here is what the plugin does.

32
00:01:30,422 --> 00:01:31,711
This is the element it works on.

33
00:01:31,711 --> 00:01:34,285
Here are the default settings.

34
00:01:34,285 --> 00:01:37,405
Now, all of these different jQuery
Boilerplate plugins that they link to

35
00:01:37,405 --> 00:01:41,075
here are going to just save you time
if you are going to be creating your

36
00:01:41,075 --> 00:01:42,115
own jQuery plugin.

37
00:01:42,115 --> 00:01:44,045
So, if this is something
you plan on doing,

38
00:01:44,045 --> 00:01:47,475
definitely check this out because it's
going to speed up development quite a bit.

39
00:01:48,755 --> 00:01:51,696
>> Nice.
Well, next up is SassMe.

40
00:01:51,696 --> 00:02:00,290
It's a, you can visualize Sass color
functions in real time without compiling.

41
00:02:00,290 --> 00:02:05,930
So, normally you would have to compile
your Sass code in order to see how

42
00:02:05,930 --> 00:02:10,610
these color functions are playing out, but
this does it automatically in real time.

43
00:02:10,610 --> 00:02:12,870
So, I can type in a color here.

44
00:02:12,870 --> 00:02:15,470
So, I'll type in like, an orange color.

45
00:02:15,470 --> 00:02:21,020
And that is going to show me the output
color, so pretty boring so far.

46
00:02:21,020 --> 00:02:23,900
That's what I put in,
that's what came out, same stuff.

47
00:02:23,900 --> 00:02:30,500
Well, if we use some of these sliders
here I can darken this color,

48
00:02:30,500 --> 00:02:35,380
I can desaturate it, I can adjust the hue.

49
00:02:35,380 --> 00:02:39,480
So, these are functions
that you can use in Sass.

50
00:02:39,480 --> 00:02:43,680
Adjust hue, desaturate, and darken.

51
00:02:43,680 --> 00:02:48,780
But this shows you not only what
that will actually look like, but

52
00:02:48,780 --> 00:02:51,120
also what it will look like in code.

53
00:02:51,120 --> 00:02:54,140
So, you can use something
that's more human and

54
00:02:54,140 --> 00:02:56,570
familiar like these little sliders.

55
00:02:56,570 --> 00:03:01,020
And then, it will output the Sass
code that you need to do that and

56
00:03:01,020 --> 00:03:02,530
give you the output color.

57
00:03:02,530 --> 00:03:04,730
So, when would you use this?

58
00:03:04,730 --> 00:03:07,710
This is nice if-
>> Whenever you wanna Sass someone.

59
00:03:07,710 --> 00:03:08,300
>> That's right.

60
00:03:08,300 --> 00:03:09,995
If you just wanna Sass me.

61
00:03:09,995 --> 00:03:10,880
[LAUGH] No.

62
00:03:10,880 --> 00:03:17,270
This is nice if, for example, you are
trying to make a new website color scheme.

63
00:03:17,270 --> 00:03:22,650
And you could, theoretically,
just put in a single color and

64
00:03:22,650 --> 00:03:27,150
then have all sorts of darkened
desaturate or saturate or

65
00:03:27,150 --> 00:03:33,350
hue adjustments that use that input
color to create an entire color scheme.

66
00:03:33,350 --> 00:03:36,790
>> Kinda like on the materialize
framework we talked about last week.

67
00:03:36,790 --> 00:03:37,640
>> Exactly.

68
00:03:37,640 --> 00:03:40,280
So, this is a pretty handy tool.

69
00:03:40,280 --> 00:03:42,070
Definitely be sure to check this out.

70
00:03:42,070 --> 00:03:43,506
>> Very cool.

71
00:03:43,506 --> 00:03:46,350
Next up we have gitignore.io.

72
00:03:46,350 --> 00:03:50,230
This is going to create useful
gitignore files for your project.

73
00:03:50,230 --> 00:03:52,980
>> I feel like I'm
gitignored all the time.

74
00:03:52,980 --> 00:03:54,180
>> I don't know who said that but

75
00:03:54,180 --> 00:03:56,960
I'm going to just move on with
what we were talking about.

76
00:03:56,960 --> 00:04:01,590
Now, a gitignore file is something
that will tell git which files,

77
00:04:01,590 --> 00:04:06,020
as you would expect, to ignore from
the source code control in your project.

78
00:04:06,020 --> 00:04:10,030
So, for example, if we start typing
in something here we got, okay,

79
00:04:10,030 --> 00:04:11,780
we have a bower gitignore.

80
00:04:11,780 --> 00:04:13,320
What happens when we generate that?

81
00:04:13,320 --> 00:04:18,000
Okay, it tells us to ignore the bower
components, cache registry, and

82
00:04:18,000 --> 00:04:19,530
temp directory.

83
00:04:19,530 --> 00:04:23,970
Now, if we're doing a rails site,
for example, and

84
00:04:23,970 --> 00:04:28,120
hit generate, it will show us
what rails files to ignore,

85
00:04:28,120 --> 00:04:33,230
as well as comments saying which ones
are going to specifically be left out.

86
00:04:33,230 --> 00:04:35,890
Now, depending on what kind
of project you're working on,

87
00:04:35,890 --> 00:04:39,880
it's easy to bet that there is
a gitignore avail, available for it.

88
00:04:39,880 --> 00:04:45,530
So, go ahead and check this out if you
need to ignore some files very quickly.

89
00:04:45,530 --> 00:04:46,030
Or a person.

90
00:04:47,150 --> 00:04:49,030
>> Next up is slick.

91
00:04:49,030 --> 00:04:53,830
It is dubbed the last
carousel you'll ever need.

92
00:04:53,830 --> 00:04:56,205
>> Because nobody uses carousels any more.

93
00:04:56,205 --> 00:04:56,960
>> [LAUGH].

94
00:04:56,960 --> 00:04:59,270
That's not true.

95
00:04:59,270 --> 00:05:02,171
There are some pretty
cool demos of slick here.

96
00:05:02,171 --> 00:05:04,280
So, let's check those out.

97
00:05:04,280 --> 00:05:07,046
It will text down here and
we can hit these buttons.

98
00:05:07,046 --> 00:05:09,110
And whoa, look at that.

99
00:05:09,110 --> 00:05:13,100
It will cycle through these
different images here and

100
00:05:13,100 --> 00:05:17,420
it also has little dots at
the bottom just like you'd expect.

101
00:05:17,420 --> 00:05:20,620
You can click on those and
jump to any point in the carousel.

102
00:05:20,620 --> 00:05:24,879
You can also have multiple
items in a single slide.

103
00:05:24,879 --> 00:05:31,000
So, let's say that you are using
a responsive framework like Bootstrap or

104
00:05:31,000 --> 00:05:35,568
Foundation and
you wanna have multiple items at certain

105
00:05:35,568 --> 00:05:39,180
screen resolutions inside of your slider.

106
00:05:39,180 --> 00:05:45,480
Well, with Slick you can do that and just
sort of create a context to contain them.

107
00:05:45,480 --> 00:05:48,760
So, of course,
it's also responsive itself.

108
00:05:48,760 --> 00:05:52,210
I won't demonstrate that but
you get the idea.

109
00:05:52,210 --> 00:05:54,040
You can have variable widths.

110
00:05:54,040 --> 00:05:55,990
You can have ones that change heights.

111
00:05:55,990 --> 00:05:57,840
So, let's check that out.

112
00:05:57,840 --> 00:06:00,712
When you scroll through those,
these are different heights.

113
00:06:00,712 --> 00:06:05,270
And Slick will actually figure
out how to adapt to it.

114
00:06:05,270 --> 00:06:07,370
And so much more.

115
00:06:07,370 --> 00:06:09,050
So, how do you use this?

116
00:06:09,050 --> 00:06:13,290
Well, you set up your HTML mark up.

117
00:06:13,290 --> 00:06:18,700
You move the Slick folder, which you
can download here into your project and

118
00:06:18,700 --> 00:06:23,270
then, you add slick.css into your head.

119
00:06:23,270 --> 00:06:26,960
And it also does require jQuery.

120
00:06:26,960 --> 00:06:30,460
But I've actually used this on some,

121
00:06:30,460 --> 00:06:34,200
some of my own projects and
it's it's pretty good.

122
00:06:34,200 --> 00:06:39,100
I, I really had some good experiences
with this and I definitely recommend it.

123
00:06:39,100 --> 00:06:40,540
That you check it out.

124
00:06:40,540 --> 00:06:41,040
>> Very cool.
>> Yeah.

125
00:06:42,160 --> 00:06:45,960
>> Next up,
we have a project called jQuery Mapael.

126
00:06:45,960 --> 00:06:50,300
Now, this is going to be a vector maps.

127
00:06:50,300 --> 00:06:55,009
It's a jQuery plugin based on
Raphael.js that allows you to

128
00:06:55,009 --> 00:06:57,710
display dynamic vector maps.

129
00:06:57,710 --> 00:07:00,330
>> So it's maps that are based on Raphael.

130
00:07:00,330 --> 00:07:01,130
>> Raphael.
That's why we.

131
00:07:01,130 --> 00:07:02,620
>> That's where Mapael.

132
00:07:02,620 --> 00:07:03,780
>> Mapael.

133
00:07:03,780 --> 00:07:05,110
Map, Mapael.

134
00:07:05,110 --> 00:07:05,720
>> Got it.

135
00:07:05,720 --> 00:07:06,415
>> Yeah.

136
00:07:06,415 --> 00:07:11,000
Raphael.js is a small JavaScript library
that simplifies working with vector

137
00:07:11,000 --> 00:07:12,590
graphics on the web.

138
00:07:12,590 --> 00:07:14,480
Kinda gives you a little bit
of an abstraction when you're

139
00:07:14,480 --> 00:07:15,660
working with these.

140
00:07:15,660 --> 00:07:18,210
So, what in the world
can you do with Mapael?

141
00:07:18,210 --> 00:07:19,510
Let's go ahead and look.

142
00:07:19,510 --> 00:07:24,020
They have all of these
different examples on JSFiddle.

143
00:07:24,020 --> 00:07:27,730
So, here is a map with a legend for
plotted cities.

144
00:07:27,730 --> 00:07:32,670
So, as we go through and
hover over the different cities,

145
00:07:32,670 --> 00:07:35,140
it will show you the population.

146
00:07:35,140 --> 00:07:40,290
Now, this is all done with this HTML,
CSS, and JavaScript right here.

147
00:07:40,290 --> 00:07:42,750
So, you can see that this is very,
very easy to use.

148
00:07:42,750 --> 00:07:47,850
We just call the Mapael function and
then, give it our different options.

149
00:07:47,850 --> 00:07:52,250
So, right here we have a legend,
plot, and default area.

150
00:07:52,250 --> 00:07:54,000
And then, we can actually go through.

151
00:07:54,000 --> 00:07:57,420
Give it the different slices which
are gonna be the areas of the map.

152
00:07:57,420 --> 00:08:00,100
We're gonna say, okay,
this is a size of four,

153
00:08:00,100 --> 00:08:04,567
it's a circle, fill it with this color and
give it a label.

154
00:08:04,567 --> 00:08:10,715
And then, the rest of it is just data and
different plots including latitude and

155
00:08:10,715 --> 00:08:14,175
longitude, which really helps
when you are working with maps.

156
00:08:14,175 --> 00:08:18,175
Now, there are, of course,
a ton of different examples here.

157
00:08:18,175 --> 00:08:20,405
We're not gonna go through all of them.

158
00:08:20,405 --> 00:08:24,125
But you can see this is
extremely easy to use and

159
00:08:24,125 --> 00:08:28,850
is going to abstract a lot for you when
you are working with different maps.

160
00:08:28,850 --> 00:08:30,845
Now, there are some very
thorough documentation,

161
00:08:30,845 --> 00:08:33,128
which you can find in the show
notes right below this video.

162
00:08:33,128 --> 00:08:35,880
So, I recommend you check that out.

163
00:08:35,880 --> 00:08:37,940
>> Well, that is all that we have time for
this week.

164
00:08:37,940 --> 00:08:39,390
I am @nickrp on Twitter.

165
00:08:39,390 --> 00:08:40,330
>> And I am @jseifer.

166
00:08:40,330 --> 00:08:41,720
For more information on
anything we talked about,

167
00:08:41,720 --> 00:08:43,250
check out the show notes below the video.

168
00:08:43,250 --> 00:08:45,670
Thanks so much for watching,
and we will see you next week.

169
00:08:45,670 --> 00:08:52,170
[MUSIC].