1
00:00:00,310 --> 00:00:01,000
I'm Nick Pettit.

2
00:00:01,000 --> 00:00:02,000
>> I'm Jason Swifer.

3
00:00:02,000 --> 00:00:03,500
>> And you're watching the Treehouse Show.

4
00:00:03,500 --> 00:00:04,670
Your weekly dose of internets.

5
00:00:04,670 --> 00:00:07,700
Where we talk about all things web design,
web development and more.

6
00:00:07,700 --> 00:00:11,860
>> In this episode, we'll be talking about
JavaScript web page performance metrics,

7
00:00:11,860 --> 00:00:16,120
carousel, MV-ish Frameworks and more.

8
00:00:16,120 --> 00:00:16,761
>> Let's check it out.

9
00:00:16,761 --> 00:00:22,445
[MUSIC]

10
00:00:22,445 --> 00:00:24,526
>> First up we have this really
cool utility called Justice.

11
00:00:24,526 --> 00:00:31,390
Justice is an embeddable script for
displaying webpage performance metrics.

12
00:00:31,390 --> 00:00:32,360
>> Who made this?

13
00:00:32,360 --> 00:00:34,430
Is this Batman made this?

14
00:00:34,430 --> 00:00:35,840
>> No, it was a bunch of people.

15
00:00:35,840 --> 00:00:37,650
I think a whole league of them.

16
00:00:40,010 --> 00:00:41,210
Like the Justice League.

17
00:00:41,210 --> 00:00:41,830
>> Yeah.
Yeah.

18
00:00:41,830 --> 00:00:43,460
I got the joke.

19
00:00:43,460 --> 00:00:44,030
Yeah.
>> I was kind of

20
00:00:44,030 --> 00:00:44,670
playing on your-
>> Yeah.

21
00:00:44,670 --> 00:00:45,770
We're taking it to far now.

22
00:00:45,770 --> 00:00:46,890
>> Joke about Batman.

23
00:00:46,890 --> 00:00:49,240
So, here is Justice.

24
00:00:49,240 --> 00:00:52,420
And if you look at the bottom
of the screen right here.

25
00:00:52,420 --> 00:00:55,050
It shows you different
metrics on the page.

26
00:00:55,050 --> 00:00:57,540
It shows you how long it takes to repaint.

27
00:00:57,540 --> 00:01:00,430
The current FPS count.

28
00:01:00,430 --> 00:01:05,040
And it also shows you how easy
this is to use and initialize.

29
00:01:05,040 --> 00:01:10,506
So just include the Justice JavaScript and
call Justice.init.

30
00:01:10,506 --> 00:01:13,400
If only getting real
justice were that easy.

31
00:01:14,570 --> 00:01:18,170
Actually, we're kinda lucky it is not,
because our puns are so horrible.

32
00:01:19,290 --> 00:01:22,760
So anyway you can create
budgets to stay within.

33
00:01:22,760 --> 00:01:25,470
And if you're over budget,
it will display different colors.

34
00:01:25,470 --> 00:01:27,500
This very, very easy to use.

35
00:01:27,500 --> 00:01:31,460
Not much to say about it,
but if you are developing

36
00:01:31,460 --> 00:01:35,610
any webpages where FPS is important,
definitely check this out.

37
00:01:35,610 --> 00:01:38,530
>> And FPS, of course,
stands for frames per second.

38
00:01:38,530 --> 00:01:43,200
And you wanna try to stay above 60
frames per second on any website.

39
00:01:43,200 --> 00:01:47,610
So if you're doing some cool
scrolling effect or animation.

40
00:01:47,610 --> 00:01:49,350
That can drop your frames per second.

41
00:01:49,350 --> 00:01:51,640
So using this tool you can
measure something like that.

42
00:01:52,930 --> 00:01:59,320
Next up is this really cool
blog post from Dan Cortes.

43
00:02:02,490 --> 00:02:08,572
How to make a carousel using only HTML and
CSS.

44
00:02:08,572 --> 00:02:11,840
No JavaScript required.

45
00:02:11,840 --> 00:02:17,530
Now, when I first saw that, I was like,
well how is that even possible?

46
00:02:17,530 --> 00:02:19,740
>> Hey look at that,
it's a bunch of people on a field.

47
00:02:19,740 --> 00:02:20,520
>> That's right.

48
00:02:20,520 --> 00:02:22,210
So.
>> Do you think that when he was looking

49
00:02:22,210 --> 00:02:24,580
at this, he's like oh,
the ball's in your Cortes?

50
00:02:24,580 --> 00:02:26,890
That's his last name.

51
00:02:26,890 --> 00:02:29,490
>> I don't know if that's how you say it.

52
00:02:29,490 --> 00:02:33,560
But yeah, so this uses no JavaScript,
you can click through.

53
00:02:33,560 --> 00:02:39,160
And it will go to the next image
without any kind of JavaScript.

54
00:02:39,160 --> 00:02:40,130
>> That's not possible.

55
00:02:40,130 --> 00:02:45,500
>> And I thought how in
the world is Dan C doing this?

56
00:02:45,500 --> 00:02:50,530
Well, the HTML is actually
pretty straightforward.

57
00:02:50,530 --> 00:02:52,020
I'll let you go to the blog post.

58
00:02:52,020 --> 00:02:56,160
If you want to see how
that is put together.

59
00:02:56,160 --> 00:03:00,890
However, it is in the CSS, or SCSS,

60
00:03:00,890 --> 00:03:04,800
in this particular case,
where the magic happens.

61
00:03:04,800 --> 00:03:10,300
So, there's Quite a lot of stuff
here that's really just positioning.

62
00:03:10,300 --> 00:03:12,190
And transforms.

63
00:03:12,190 --> 00:03:15,290
And all that is important
to making this work.

64
00:03:15,290 --> 00:03:17,320
You have to have the buttons
to actually click on.

65
00:03:17,320 --> 00:03:19,260
And you want them to
be in the right place.

66
00:03:19,260 --> 00:03:23,080
And you want things to be transparent and
all that.

67
00:03:23,080 --> 00:03:28,430
The way this is actually working is
by using the target pseudo element.

68
00:03:28,430 --> 00:03:31,850
So, you'll see right
here that says *target,

69
00:03:31,850 --> 00:03:35,260
and then has a selector
to grab the first item.

70
00:03:35,260 --> 00:03:38,060
And it's setting the opacity to zero.

71
00:03:38,060 --> 00:03:39,690
And one really nice thing
about this blog post,

72
00:03:39,690 --> 00:03:42,630
is that everything is very well commented.

73
00:03:42,630 --> 00:03:48,890
There's these really large and
detailed comments above each step.

74
00:03:48,890 --> 00:03:51,110
So you can see how it's put together.

75
00:03:51,110 --> 00:03:54,080
But by using that target pseudo class,

76
00:03:54,080 --> 00:03:59,550
it's actually reading form the URI,
what the user clicked on.

77
00:03:59,550 --> 00:04:02,820
So if they click on one of those arrows,

78
00:04:02,820 --> 00:04:07,510
it's going to grab the target
plus each new item.

79
00:04:07,510 --> 00:04:12,920
And you just have to crate a selector for
each item you want to add.

80
00:04:12,920 --> 00:04:16,540
Really cool technique,
definitely be sure to check this one out.

81
00:04:16,540 --> 00:04:19,090
I have not seen something
quite like this before.

82
00:04:19,090 --> 00:04:23,800
But it's a very smart use
of the target pseudo class.

83
00:04:23,800 --> 00:04:26,190
Next up we have a project called jsblocks.

84
00:04:27,230 --> 00:04:31,940
This is a quote better MV-ish Framework.

85
00:04:31,940 --> 00:04:34,720
Now, what's really nice
about this framework it

86
00:04:34,720 --> 00:04:37,760
supports all the things that you'd
expect from a java script framework,

87
00:04:37,760 --> 00:04:39,730
it's been a couple weeks
since we talked about one.

88
00:04:39,730 --> 00:04:42,110
But this supports two-way data binding.

89
00:04:42,110 --> 00:04:47,750
And it has a nice built in utility
library, for fast data manipulations.

90
00:04:47,750 --> 00:04:50,520
Also it is really, really fast.

91
00:04:50,520 --> 00:04:54,510
But probably the most interesting
thing about this framework,

92
00:04:54,510 --> 00:04:59,060
is that it also supports
server-side rendering.

93
00:04:59,060 --> 00:05:02,440
So what that means is,
if you are using node.js,

94
00:05:02,440 --> 00:05:07,440
you can render the entire page before
it gets sent down to the client.

95
00:05:07,440 --> 00:05:12,440
Now this means that your client is going
to have a very quick initial load.

96
00:05:12,440 --> 00:05:15,930
And things like SEO will work.

97
00:05:15,930 --> 00:05:19,710
Google can index your page rather
than having to go through and

98
00:05:19,710 --> 00:05:23,020
click through all the JavaScript
which may or may not load.

99
00:05:23,020 --> 00:05:24,980
Depending on the framework that you used.

100
00:05:24,980 --> 00:05:26,820
So, it's pretty easy to use.

101
00:05:26,820 --> 00:05:29,480
Like I said,
supports the two-way data binding.

102
00:05:29,480 --> 00:05:32,850
And it has a really
interesting query syntax.

103
00:05:32,850 --> 00:05:34,710
Now, we're not gonna go
through all of this.

104
00:05:34,710 --> 00:05:37,660
I do recommend that you check
it out in the show notes.

105
00:05:37,660 --> 00:05:41,120
Especially if you want to get into
something like server side rendering.

106
00:05:41,120 --> 00:05:44,480
Which is really gonna be a lot
more important these days.

107
00:05:44,480 --> 00:05:45,930
>> Very cool stuff.

108
00:05:45,930 --> 00:05:50,470
Next up is a tool that helps
you center things in CSS.

109
00:05:50,470 --> 00:05:55,700
It's appropriately titled
How to Center in CSS.

110
00:05:55,700 --> 00:05:56,700
So, what is it?

111
00:05:56,700 --> 00:06:03,440
Well centering in CSS is surprisingly
difficult, even in 2015.

112
00:06:03,440 --> 00:06:08,330
Especially if you want to center
things vertically, how do you do it?

113
00:06:08,330 --> 00:06:10,930
Well, here is why it's so complicated.

114
00:06:10,930 --> 00:06:14,840
There's a lot of different variables
that you have to keep in mind.

115
00:06:14,840 --> 00:06:16,800
Such as the alignment.

116
00:06:16,800 --> 00:06:19,790
Whether or not the width and
height is known or unknown.

117
00:06:19,790 --> 00:06:24,390
And there's also browser support
that you have to consider.

118
00:06:24,390 --> 00:06:28,220
This tool breaks it all down
into a step-by-step process.

119
00:06:28,220 --> 00:06:32,980
So you can just check off each item,
and fill in some information.

120
00:06:32,980 --> 00:06:36,460
And then, it will give you the code
that you need to center something.

121
00:06:36,460 --> 00:06:39,260
So here, we have the content.

122
00:06:39,260 --> 00:06:41,300
And it asks, well,
what do you want to center?

123
00:06:41,300 --> 00:06:45,560
Is it just Text, or is it a div,
any block level element?

124
00:06:45,560 --> 00:06:46,980
We'll go with text.

125
00:06:46,980 --> 00:06:50,430
It'll say,
how many lines of text do you have?

126
00:06:50,430 --> 00:06:52,260
Well, we do know that.

127
00:06:52,260 --> 00:06:54,710
Let's say it's three.

128
00:06:54,710 --> 00:06:56,470
Do you know the line height of each line?

129
00:06:56,470 --> 00:06:59,820
Sure, we'll sa we're going with 1M.

130
00:06:59,820 --> 00:07:01,250
And then the container.

131
00:07:01,250 --> 00:07:04,450
Well, how big is the container div?

132
00:07:04,450 --> 00:07:06,170
Do you know the width and height?

133
00:07:06,170 --> 00:07:07,850
Let's just say we don't.

134
00:07:07,850 --> 00:07:11,220
And we don't know what the width and
height is going to be.

135
00:07:11,220 --> 00:07:15,750
Perhaps this is some user
generated content of some sort.

136
00:07:15,750 --> 00:07:17,590
And we're limiting the length of text.

137
00:07:17,590 --> 00:07:22,670
But we don't necessarily know how things
are going to wrap around, and so on.

138
00:07:22,670 --> 00:07:25,260
Then, we have the alignment.

139
00:07:25,260 --> 00:07:30,060
So, we can actually choose
between left center and right.

140
00:07:30,060 --> 00:07:33,710
And top, middle, and bottom for
horizontal and vertical.

141
00:07:33,710 --> 00:07:36,390
Surprise, this site isn't just for
centering.

142
00:07:36,390 --> 00:07:37,990
So we can align it however we want.

143
00:07:37,990 --> 00:07:41,390
But let's say we want it to be
right in the middle of the page.

144
00:07:41,390 --> 00:07:44,120
We want it horizontal and
vertically centered.

145
00:07:44,120 --> 00:07:47,880
And we'll say, we want support for
Internet Explorer 10.

146
00:07:47,880 --> 00:07:49,630
We can say, generate code.

147
00:07:49,630 --> 00:07:54,460
And then it says, the method for

148
00:07:54,460 --> 00:07:58,080
this particular code,
should be table cell.

149
00:07:58,080 --> 00:08:00,500
If we want to have that IE support, and

150
00:08:00,500 --> 00:08:02,760
we want to do all of
the things that we specified.

151
00:08:02,760 --> 00:08:04,720
Here's the code that we're gonna need.

152
00:08:04,720 --> 00:08:09,160
However, let's say that well,
I don't actually need IE support.

153
00:08:09,160 --> 00:08:13,710
Maybe I'm deploying this to, I don't know,
an internal network or something.

154
00:08:13,710 --> 00:08:16,770
Where the browsers
are already pre-installed.

155
00:08:16,770 --> 00:08:19,210
And we know what the browser's gonna be,
it's not IE.

156
00:08:19,210 --> 00:08:20,550
Then it says well okay.

157
00:08:20,550 --> 00:08:22,510
Then you can use Flexbox.

158
00:08:22,510 --> 00:08:26,270
And here is the code to do that.

159
00:08:26,270 --> 00:08:29,100
So this is a really great tool.

160
00:08:29,100 --> 00:08:33,800
Because centering things in
CSS is notoriously difficult.

161
00:08:33,800 --> 00:08:39,200
It's really hard to get stuff particularly
aligned vertically, and horizontally.

162
00:08:39,200 --> 00:08:43,660
Especially if you don't know
the exact size of the elements.

163
00:08:43,660 --> 00:08:46,450
So definitely be sure to check this out.

164
00:08:46,450 --> 00:08:48,910
If you ever get stuck trying
to center something in CSS.

165
00:08:48,910 --> 00:08:50,240
>> Yeah, it's very cool.

166
00:08:50,240 --> 00:08:52,610
I especially like that
surprise at the end.

167
00:08:52,610 --> 00:08:53,680
Like, whoa, they went all out.

168
00:08:53,680 --> 00:08:55,200
>> Yeah, didn't really expect that.

169
00:08:55,200 --> 00:08:55,950
See that coming.

170
00:08:55,950 --> 00:08:59,270
>> Next up,
we have an ECMAScript compatibility table.

171
00:08:59,270 --> 00:09:02,740
Now, this is going to be really useful
if you are developing a JavaScript

172
00:09:02,740 --> 00:09:03,770
application.

173
00:09:03,770 --> 00:09:04,920
And need to know whether or

174
00:09:04,920 --> 00:09:09,980
not certain platforms support
the JavaScript that we are going to use.

175
00:09:09,980 --> 00:09:11,210
Now, they have.

176
00:09:11,210 --> 00:09:13,810
A bunch of different versions
of ECMAScript up here.

177
00:09:13,810 --> 00:09:17,700
ECMAScript is of course
the specification for JavaScript.

178
00:09:17,700 --> 00:09:20,630
And as things make their way
into the ECMAScript standard,

179
00:09:20,630 --> 00:09:24,450
you start to see them being
supported in different browsers.

180
00:09:24,450 --> 00:09:28,070
So I have The ECMAScript 5 table up here.

181
00:09:28,070 --> 00:09:30,310
And you can see over on the left,

182
00:09:30,310 --> 00:09:34,200
we have the feature name like
Object.create, define property.

183
00:09:34,200 --> 00:09:37,950
And then over on the right
are the different environments,

184
00:09:37,950 --> 00:09:40,780
and green means supported.

185
00:09:40,780 --> 00:09:44,508
So we can see IE 9, 10,
Firefox, and so on.

186
00:09:44,508 --> 00:09:50,760
All support object.create, but
the ES5 shim library does not.

187
00:09:50,760 --> 00:09:55,180
So they have a really, really nice
compatibility table for ECMA Script 5.

188
00:09:55,180 --> 00:09:57,900
Which actually has quite a bit of support.

189
00:09:57,900 --> 00:10:01,080
However, when we start
going up in versions.

190
00:10:01,080 --> 00:10:05,370
Well, we can see the things
are not quite supported as much.

191
00:10:05,370 --> 00:10:10,060
What's really cool about this though is
for the, at least ECMAScript 6 standards.

192
00:10:10,060 --> 00:10:13,290
They have polyfills with support as well.

193
00:10:13,290 --> 00:10:17,300
So you can see if different
syntax is gonna be supported in

194
00:10:17,300 --> 00:10:19,490
whatever polyfill you're using.

195
00:10:19,490 --> 00:10:25,230
Then over on the right it has the desktop
browsers that you would expect.

196
00:10:25,230 --> 00:10:27,670
IE 10, not a lot of support for this.

197
00:10:27,670 --> 00:10:30,980
Then even goes into servers and run times.

198
00:10:32,020 --> 00:10:35,570
So, if you are going to be developing
a modern Java Script application.

199
00:10:35,570 --> 00:10:38,260
And want to start using
more modern Java Script.

200
00:10:38,260 --> 00:10:39,670
Definitely make sure to check this out.

201
00:10:39,670 --> 00:10:42,070
And we'll have a link to
that in the show notes.

202
00:10:42,070 --> 00:10:44,950
>> Well, that is all we have time for
this week.

203
00:10:44,950 --> 00:10:46,430
I am @nickrp on Twitter.

204
00:10:46,430 --> 00:10:47,390
>> And I am @jseifer.

205
00:10:47,390 --> 00:10:48,810
For more information on
anything we talked about,

206
00:10:48,810 --> 00:10:50,160
check out the show notes below this video.

207
00:10:50,160 --> 00:10:52,447
Thank you so much for watching,
and we'll see you next week.

208
00:10:52,447 --> 00:10:59,859
[MUSIC]