1
00:00:00,350 --> 00:00:01,230
I'm Nick Petitt.

2
00:00:01,230 --> 00:00:02,240
>> I'm Jason Seifer.

3
00:00:02,240 --> 00:00:04,790
>> And you're watching the treehouse show,
your weekly dose of

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

5
00:00:08,550 --> 00:00:11,480
>> In this episode, we'll be talking about
web performance,

6
00:00:11,480 --> 00:00:15,430
material UI, SQL charts and more.

7
00:00:15,430 --> 00:00:16,495
>> Let's check it out.

8
00:00:16,495 --> 00:00:21,529
[MUSIC]

9
00:00:21,529 --> 00:00:25,520
First up, we have a new website called
www.Perfrocks.com.

10
00:00:25,520 --> 00:00:28,900
This is a collection of web performance,

11
00:00:28,900 --> 00:00:33,640
articles, books, talks, slides, people,
and more.

12
00:00:33,640 --> 00:00:34,210
Wow!
Yeah,

13
00:00:34,210 --> 00:00:37,260
it's like a whole website, with links to
all those things.

14
00:00:37,260 --> 00:00:38,600
Now if we take a look at articles,

15
00:00:38,600 --> 00:00:41,600
you may recognize some of them from the
Treehouse Show, but

16
00:00:41,600 --> 00:00:47,040
this is a wonderful curated collection on
web performance.

17
00:00:47,040 --> 00:00:51,550
So you can see BrowserDiet, which we
covered once on here.

18
00:00:51,550 --> 00:00:54,990
We have a Beginner's Guide to Website
Speed Optimization,

19
00:00:54,990 --> 00:00:58,900
which we also covered here, on the
Treehouse Show.

20
00:00:58,900 --> 00:01:01,360
actually, just a ton of resources,

21
00:01:01,360 --> 00:01:05,610
if you think you need to catch up on Web
Performance.

22
00:01:05,610 --> 00:01:08,600
There is a nice collection of tools I
believe,

23
00:01:08,600 --> 00:01:12,070
we've gone over some of these not all of
them here on the show.

24
00:01:12,070 --> 00:01:17,290
These all do different things, to enhance
your websites performance.

25
00:01:17,290 --> 00:01:19,840
Here's one for grunt-responsive-images,

26
00:01:19,840 --> 00:01:24,570
which will produce images at different
sizes for your responsive websites.

27
00:01:24,570 --> 00:01:27,810
Anyway, not too much to say but definitely
check it out, it's just

28
00:01:27,810 --> 00:01:32,850
a wonderful curated collection of modern
performance, enhancements for you site.

29
00:01:32,850 --> 00:01:36,000
>> You know, I clicked on the people
section it says,

30
00:01:36,000 --> 00:01:39,430
inspiring individuals that care deeply
about fast websites, and

31
00:01:39,430 --> 00:01:43,970
teach others the best practices a lot of
great people there to-

32
00:01:43,970 --> 00:01:45,310
>> Ctrl+F, are we on here?

33
00:01:45,310 --> 00:01:47,770
No, this is pointless forget this site.

34
00:01:47,770 --> 00:01:52,380
>> Well, I was gonna say, I noticed we
weren't on here, and then I realized that

35
00:01:52,380 --> 00:01:56,190
you actually have to contribute something
meaningful to be listed there.

36
00:01:57,680 --> 00:01:59,220
Brighten the fields Nick.

37
00:01:59,220 --> 00:02:01,720
>> Next up is material UI.

38
00:02:01,720 --> 00:02:07,640
This is a tiny CSS framework and also a
set of components, for

39
00:02:07,640 --> 00:02:12,800
react that are based on Google's all new
material design.

40
00:02:12,800 --> 00:02:15,250
So let's take a look at this.

41
00:02:15,250 --> 00:02:17,179
I'm gonna click on demo here.

42
00:02:18,180 --> 00:02:23,060
And these are all of the components that
can be used with react.

43
00:02:23,060 --> 00:02:28,630
React of course if a JavaScript library
for creating user interfaces.

44
00:02:28,630 --> 00:02:32,480
So this is basically putting a coat of
paint on top of that.

45
00:02:32,480 --> 00:02:36,160
That makes it look like Google's new
material design.

46
00:02:36,160 --> 00:02:38,950
So here you have some buttons,

47
00:02:38,950 --> 00:02:43,970
you can click on a dialogue box here and
see what that looks like.

48
00:02:43,970 --> 00:02:49,610
Pretty nice, there's drop down menus, so
that looks lovely.

49
00:02:49,610 --> 00:02:56,570
Icon buttons, regular icons, and here's
every possible icon you could ever want.

50
00:02:56,570 --> 00:02:59,680
There's an amazing amount of them in
there.

51
00:02:59,680 --> 00:03:07,040
There's also inputs, so really, really
nice stuff it's, it's really nicely done.

52
00:03:07,040 --> 00:03:12,480
Let me go back here, and see if I can get
to the home page there we go.

53
00:03:12,480 --> 00:03:16,140
If you scroll down here, there's a section
for getting started.

54
00:03:16,140 --> 00:03:18,680
So if you just wanna kinda get an
overview, and

55
00:03:18,680 --> 00:03:22,080
see what this is all about, that's a good
place to start.

56
00:03:22,080 --> 00:03:25,070
There's the Components section, which we
already looked at.

57
00:03:26,160 --> 00:03:31,030
And there's also the CSS framework now, I
think calling this a CSS framework is

58
00:03:31,030 --> 00:03:36,090
a little bit of a stretch, because there's
only colors and typography listed here.

59
00:03:36,090 --> 00:03:41,360
But it is a framework nonetheless so, if
all of the normal typography stuff

60
00:03:41,360 --> 00:03:47,360
that you might expect, and then the colors
are really pretty comprehensive,

61
00:03:47,360 --> 00:03:52,580
they've used less variables to add every

62
00:03:52,580 --> 00:03:56,900
Ui color in the Google material design
color palette.

63
00:03:56,900 --> 00:04:02,190
So if you scroll down here you can see all
these, different shades of blue, and

64
00:04:02,190 --> 00:04:06,460
indigo, and teal, and green it's pretty
cool.

65
00:04:06,460 --> 00:04:11,480
>> You know, I'm a big fan of Google's
material design, and also react I,

66
00:04:11,480 --> 00:04:13,889
I can't wait for it to be more widespread.

67
00:04:13,889 --> 00:04:14,480
But-
>> Yeah.

68
00:04:14,480 --> 00:04:16,535
>> You know, for us to be living in a
material world.

69
00:04:16,535 --> 00:04:19,287
[BLANK_AUDIO]

70
00:04:19,287 --> 00:04:20,810
>> I have no reaction to that.

71
00:04:20,810 --> 00:04:22,740
>> Next up we have a project called
Chroma.js.

72
00:04:22,740 --> 00:04:30,310
This is a small JavaScript library, for
doing color calculations and conversions.

73
00:04:30,310 --> 00:04:33,120
So, if we look at some of the examples
right here,

74
00:04:33,120 --> 00:04:37,690
you can call this Chroma function, give it
a hex value and tell it to darken.

75
00:04:37,690 --> 00:04:42,970
Then you can give it another command say,
hey, I want the hex value back from that,

76
00:04:42,970 --> 00:04:50,260
and this is a converted version of a
darker version of what you sent in.

77
00:04:50,260 --> 00:04:53,540
Now, you can also scale that, there's
actually a ton of different options here,

78
00:04:53,540 --> 00:04:55,720
let's go ahead and look at the API docs.

79
00:04:55,720 --> 00:04:59,160
Now you can give this the colors to begin
with,

80
00:04:59,160 --> 00:05:05,020
in a few different ways, you can give it
CSS, RGB, or hex.

81
00:05:05,020 --> 00:05:09,060
And it's very easy to use send it a
string, or

82
00:05:09,060 --> 00:05:12,360
the different RGB values and then you're
good to go.

83
00:05:12,360 --> 00:05:18,620
Now, you can return a color from these
things you, this is aliased as chroma.css,

84
00:05:18,620 --> 00:05:23,360
so if we send in hex we get a color back.

85
00:05:23,360 --> 00:05:27,020
Now we can interpolate between different
colors and

86
00:05:27,020 --> 00:05:29,630
then you can even give that a mode as
well.

87
00:05:29,630 --> 00:05:33,740
You can either do HSV LAB or, or lab as
some people call it.

88
00:05:34,870 --> 00:05:38,170
Now you can also work with these you can
saturate, brighten,

89
00:05:38,170 --> 00:05:41,670
get an alpha channel, make it darker, make
it lighter.

90
00:05:41,670 --> 00:05:43,460
And once again, you can change these and

91
00:05:43,460 --> 00:05:47,620
do all sorts of conversions from RGB, CSS,
Darkin and Back.

92
00:05:47,620 --> 00:05:52,160
Tell you the different options this works
with NPM, so

93
00:05:52,160 --> 00:05:57,110
just NPM install Chroma.js, and you are
good to go.

94
00:05:57,110 --> 00:06:00,620
So go ahead and check that out, if you're
wanting to do a color conversions,

95
00:06:00,620 --> 00:06:02,450
they're not extremely difficult to do, but

96
00:06:02,450 --> 00:06:05,746
this library will save you just an extra
little bit of time.

97
00:06:05,746 --> 00:06:09,760
>> Yeah, it's pretty handy to be able to
do that in JavaScript whereas, normally,

98
00:06:09,760 --> 00:06:11,093
you might do that in-

99
00:06:11,093 --> 00:06:12,660
>> Your head.

100
00:06:12,660 --> 00:06:15,990
>> In your head or in a CSS preprocessor
like Sass or

101
00:06:15,990 --> 00:06:19,450
Less, but sometimes you have to do stuff
like that in JavaScript so,

102
00:06:19,450 --> 00:06:22,740
it's kind of convenient to have that
available there as well.

103
00:06:22,740 --> 00:06:28,110
Next up is CSS Dig, this is a Chrome
extension, so

104
00:06:28,110 --> 00:06:33,700
you can install this to the Google Chrome
web browser, which I have already done.

105
00:06:33,700 --> 00:06:39,480
Just gonna go up here and click on the CSS
Dig plugin here, and

106
00:06:39,480 --> 00:06:49,290
I have an asset on this page called
style.css and I can click start digging.

107
00:06:49,290 --> 00:06:50,500
Whoa, what just happened?

108
00:06:50,500 --> 00:06:51,870
Well-
>> I don't know, what happened?

109
00:06:51,870 --> 00:06:53,090
>> it listed out,

110
00:06:53,090 --> 00:06:58,730
all of the CSS properties, that are being
used in that style sheet.

111
00:06:58,730 --> 00:07:03,650
And then, on the righthand side here, it's
listing the counts for all of those

112
00:07:03,650 --> 00:07:09,240
properties, so every time one of those
properties is used it's counted here.

113
00:07:09,240 --> 00:07:12,950
So this is a good way to kind of dig into
your CSS, and

114
00:07:12,950 --> 00:07:18,200
say like you know, how many backgrounds am
I declaring here?

115
00:07:18,200 --> 00:07:22,770
Or maybe you have a rouge background
color, and

116
00:07:22,770 --> 00:07:26,990
the Chrome inspector isn't quite giving
you all the information you need and

117
00:07:26,990 --> 00:07:30,430
you just wanna maybe do a quick check and
say like, hey, did I

118
00:07:30,430 --> 00:07:36,210
set all of my backgrounds across my whole
site, to the color scheme that I'm using?

119
00:07:36,210 --> 00:07:37,610
Is, is this all correct?

120
00:07:37,610 --> 00:07:39,720
So you can dig in here, and

121
00:07:39,720 --> 00:07:43,470
if you see one that's maybe a problem, you
can click on it.

122
00:07:43,470 --> 00:07:48,650
And very much like the Chrome Inspector,
it will show you the CSS

123
00:07:48,650 --> 00:07:52,380
in that particular file, where it's coming
from.

124
00:07:52,380 --> 00:07:57,830
So you can say on this button here it
looks like I'm declaring that,

125
00:07:57,830 --> 00:08:01,580
and you can dig into that a little bit
further.

126
00:08:01,580 --> 00:08:03,660
Anyway, thought this was pretty cool,

127
00:08:03,660 --> 00:08:07,840
it's a very nice complement to the Chrome
Inspector.

128
00:08:07,840 --> 00:08:11,520
So if that's maybe not giving you
everything that you need,l to dig into

129
00:08:11,520 --> 00:08:14,020
your CSS, this can be helpful as well.

130
00:08:14,020 --> 00:08:15,710
>> Yeah, I dig it.

131
00:08:15,710 --> 00:08:16,630
>> Dig it as well.

132
00:08:16,630 --> 00:08:19,140
>> Next up we have a project called
FnordMetric.

133
00:08:19,140 --> 00:08:25,770
This is really, really cool, it allows you
to create charts straight from SQL.

134
00:08:25,770 --> 00:08:26,760
>> Wow.
>> Yeah,

135
00:08:26,760 --> 00:08:28,510
really, really interesting let's go ahead
and

136
00:08:28,510 --> 00:08:34,280
jump straight to the examples, because
examples are more interesting than words.

137
00:08:34,280 --> 00:08:36,850
Now let's take a look at this line chart
right here,

138
00:08:36,850 --> 00:08:41,090
you can see that we have this chart, it's
got x y coordinate, and

139
00:08:41,090 --> 00:08:44,530
then as we go along we can see the
different labels.

140
00:08:44,530 --> 00:08:47,330
This is not that interesting on its own,
but

141
00:08:47,330 --> 00:08:51,330
what is interesting, is how this was
generated.

142
00:08:51,330 --> 00:08:59,280
So, we have this sequel-like query, where
we're importing a table from a CSV, and

143
00:08:59,280 --> 00:09:05,730
then saying draw this line chart, and then
giving it this specific data.

144
00:09:05,730 --> 00:09:10,860
And you'll notice that we're also doing a
calculation on the data,

145
00:09:10,860 --> 00:09:12,950
straight into the chart.

146
00:09:12,950 --> 00:09:19,400
So then this is run using a command line
interface outputting a format,

147
00:09:19,400 --> 00:09:24,220
and passed in the SQL, and this is what
you get back.

148
00:09:24,220 --> 00:09:26,570
Whoa, that's all it takes to create this
chart,

149
00:09:26,570 --> 00:09:30,900
you don't even have to do any manipulation
or programming on it.

150
00:09:30,900 --> 00:09:35,950
Now, there are a ton of different charts
that you can create here.

151
00:09:35,950 --> 00:09:40,050
And the examples on this are really great,
because it teaches you how to use it

152
00:09:40,050 --> 00:09:44,070
as you are going along looking at the
different examples.

153
00:09:44,070 --> 00:09:48,350
So, here again, we see the source code for
this example, a little bit more

154
00:09:48,350 --> 00:09:54,740
complicated than the last time, and that
creates this chart with multiple y axes.

155
00:09:55,830 --> 00:09:58,520
There are combined charts, area charts,
and

156
00:09:58,520 --> 00:10:03,990
this also comes with a server, so instead
of exporting the data every time.

157
00:10:03,990 --> 00:10:10,680
You can create a server serve it up on a
port you can even give it different

158
00:10:10,680 --> 00:10:16,420
storage backends, and it can work with
Starts D if you are already using that.

159
00:10:16,420 --> 00:10:18,450
Anyway, there are a tons of different
options here,

160
00:10:18,450 --> 00:10:22,650
this is an absolutely amazing project, and
I recommend checking it out,

161
00:10:22,650 --> 00:10:24,820
we'll have a link to it in the show notes.

162
00:10:24,820 --> 00:10:25,540
>> Very nice stuff,

163
00:10:25,540 --> 00:10:29,150
well that's all we have time for this week
I am @nickrp on Twitter.

164
00:10:29,150 --> 00:10:31,702
>> And I am @jseifer for more information
on anything we talked about,

165
00:10:31,702 --> 00:10:34,166
check out our show notes which you can
find right below this video.

166
00:10:34,166 --> 00:10:37,068
Thanks so much for listening, and we will
talk to you next week.

167
00:10:37,068 --> 00:10:44,199
[MUSIC]