1
00:00:00,008 --> 00:00:00,815
I'm Nick Pettit.

2
00:00:00,815 --> 00:00:02,010
>> I'm Jason Seifer.

3
00:00:02,010 --> 00:00:04,730
>> And you're watching The Tree House
Show, your weekly dose of internets where

4
00:00:04,730 --> 00:00:07,870
we talk about all things web design, web
development and more.

5
00:00:07,870 --> 00:00:10,632
>> In this episode, we'll be talking about
Flexbox,

6
00:00:10,632 --> 00:00:13,597
JavaScript charts, syntax highlighting,
and more.

7
00:00:13,597 --> 00:00:15,133
>> Let's check it out.

8
00:00:15,133 --> 00:00:20,147
[MUSIC]

9
00:00:20,147 --> 00:00:25,440
First up is this really great article
called Using Flexbox today.

10
00:00:25,440 --> 00:00:30,070
I guess you could also use it tomorrow as
well, but you can use it today, too.

11
00:00:30,070 --> 00:00:32,860
>> I was putting it off till tomorrow.

12
00:00:32,860 --> 00:00:33,650
>> Well.

13
00:00:33,650 --> 00:00:35,300
Today.
>> I was reading this article on

14
00:00:35,300 --> 00:00:38,590
procrastination, I was like I'll try, I'll
try other things later.

15
00:00:38,590 --> 00:00:39,090
You know?

16
00:00:40,330 --> 00:00:44,920
>> So if you haven't heard, Flexbox is a
new way to layout webpages.

17
00:00:44,920 --> 00:00:50,990
And instead of using floats or inlines, or
clear fixes, or

18
00:00:50,990 --> 00:00:55,970
display table, and all of the other sorts
of stuff, that you might have used for

19
00:00:55,970 --> 00:00:59,800
positioning and layout in the past, you
can use Flexbox.

20
00:00:59,800 --> 00:01:02,280
Now, it's a little bit difficult to grasp,
and

21
00:01:02,280 --> 00:01:05,060
that's exactly the crux of this article.

22
00:01:05,060 --> 00:01:10,430
It says that a lot of online tutorials
will use abstract examples to explain

23
00:01:10,430 --> 00:01:11,620
Flexbox.

24
00:01:11,620 --> 00:01:15,580
Well actually, there's a lot of practical
uses for this.

25
00:01:15,580 --> 00:01:19,770
So for example, it makes card layouts a
lot easier.

26
00:01:19,770 --> 00:01:22,740
This is a pretty popular design pattern.

27
00:01:22,740 --> 00:01:27,920
In fact, this is something that we use on
Treehouse that's pretty cool.

28
00:01:27,920 --> 00:01:32,610
There's also split screen layouts that it
makes really easy,

29
00:01:32,610 --> 00:01:37,610
much easier than it would have been in the
past, or I guess just yesterday,

30
00:01:37,610 --> 00:01:39,220
since this is Flexbox today.

31
00:01:39,220 --> 00:01:40,268
>> Yesterday is tomorrow.

32
00:01:40,268 --> 00:01:45,061
>> Tomorrow's today is,

33
00:01:45,061 --> 00:01:48,280
is tomorrow?

34
00:01:48,280 --> 00:01:49,450
Yesterday?

35
00:01:49,450 --> 00:01:52,040
>> I guess we're supposed to use Flexbox
at all those points.

36
00:01:52,040 --> 00:01:52,540
>> Yes.

37
00:01:53,540 --> 00:01:57,950
Actually, Flexbox does have pretty great
browser support so

38
00:01:57,950 --> 00:02:03,510
it's compatible with pretty much any
version of Google Chrome, Firefox, Safari.

39
00:02:03,510 --> 00:02:07,506
The only place you're gonna have a little
bit of trouble is in Internet Explorer.

40
00:02:07,506 --> 00:02:10,770
>> Hm.
>> IE9 and back doesn't support it at all.

41
00:02:10,770 --> 00:02:15,400
IE10 has the older 2012 syntax.

42
00:02:15,400 --> 00:02:19,090
And IE11 supports it, well, today.

43
00:02:20,420 --> 00:02:24,080
But there's a couple of things that you
can do to make it work.

44
00:02:24,080 --> 00:02:25,960
You can have a couple of fallbacks.

45
00:02:25,960 --> 00:02:30,560
You can also do feature detection if you
wanna start using it right now.

46
00:02:30,560 --> 00:02:33,330
>> I guess you could say your options are
flexible.

47
00:02:33,330 --> 00:02:35,240
>> They are flexible.

48
00:02:35,240 --> 00:02:38,100
You, you can, you don't have to think
inside the box.

49
00:02:39,510 --> 00:02:42,138
>> Next up we have a library called
TauCharts.

50
00:02:42,138 --> 00:02:47,300
This is JavaScript charting built on top
of D3.js and

51
00:02:47,300 --> 00:02:53,520
the focus of this library if you had to
guess is on design and flexibility.

52
00:02:53,520 --> 00:02:54,880
So that's all well and good but

53
00:02:54,880 --> 00:02:58,800
let's see some examples because that is
what is really interesting.

54
00:02:58,800 --> 00:03:01,570
So, here we have just a couple of charts,

55
00:03:01,570 --> 00:03:04,620
and the code to make this is really,
really easy.

56
00:03:04,620 --> 00:03:09,240
So, you can see as we kinda hover over the
different items on the side,

57
00:03:09,240 --> 00:03:11,680
they get highlighted in the charts
themselves.

58
00:03:11,680 --> 00:03:15,210
And then there's even little drop-downs
here to change the different

59
00:03:15,210 --> 00:03:18,950
trend lines from linear to exponential,
and a couple other options.

60
00:03:18,950 --> 00:03:23,090
Now, you might be thinking that a lot of
code is required to get that working, but

61
00:03:23,090 --> 00:03:25,110
no, not really much code at all.

62
00:03:25,110 --> 00:03:29,710
You just give it the chart, you ex you
initialize the chart here, give it some

63
00:03:29,710 --> 00:03:34,010
data, dimensions, and different types, as
well as plug-ins if you want to.

64
00:03:34,010 --> 00:03:36,290
There's options for tool tips, legends,

65
00:03:36,290 --> 00:03:40,640
and kinda different things that you would
think would be in a charting library.

66
00:03:40,640 --> 00:03:43,300
Now, there are some great examples here on
the site, and

67
00:03:43,300 --> 00:03:47,540
you can see that it really does not take a
ton of code to get this working.

68
00:03:48,950 --> 00:03:49,780
Here we go.
Here's a,

69
00:03:49,780 --> 00:03:52,240
here's another example down here.

70
00:03:52,240 --> 00:03:57,810
And this is actually very performant even
with a ton of different data.

71
00:03:57,810 --> 00:04:01,270
Now, there's very thorough documentation
here.

72
00:04:01,270 --> 00:04:03,510
It walks you through all of the basic
concept and

73
00:04:03,510 --> 00:04:06,700
even has examples right inside.

74
00:04:06,700 --> 00:04:11,510
Now, this is built on, on top of D3.js, so
you will need that as a dependency.

75
00:04:11,510 --> 00:04:14,630
It just kinda makes these things a little
bit easier to use, so if you

76
00:04:14,630 --> 00:04:18,330
are interested and in need of a charting
library, make sure to check this out.

77
00:04:18,330 --> 00:04:21,360
You can find a link in the show notes
right below this video.

78
00:04:21,360 --> 00:04:21,940
>> Very nice stuff.

79
00:04:21,940 --> 00:04:24,320
Well next up is yet another chart.

80
00:04:24,320 --> 00:04:28,190
We have some, we have some nice segues
today, flexibility, charting.

81
00:04:28,190 --> 00:04:33,110
And this is a cool chart for CSS rulers.

82
00:04:33,110 --> 00:04:37,390
And this can be a little bit of a complex
thing to understand.

83
00:04:37,390 --> 00:04:42,180
When you're dealing with different CSS
units, are they relative to the font?

84
00:04:42,180 --> 00:04:44,870
Are they relative to the viewport?

85
00:04:44,870 --> 00:04:49,070
Or are they absolute, or in other words a
physical measurement.

86
00:04:49,070 --> 00:04:51,710
>> Only sythes deal in absolutes.

87
00:04:51,710 --> 00:04:53,090
And, and also CSS.

88
00:04:53,090 --> 00:05:01,220
>> And, and also several CSS units deal in
absolutes, relatively speaking.

89
00:05:01,220 --> 00:05:05,610
So there's these first few which are
colored green.

90
00:05:05,610 --> 00:05:12,160
And that is relative to the font size so
em's, ex and

91
00:05:12,160 --> 00:05:18,310
a few others here, rems, are relative to
the font size so that's good to know.

92
00:05:18,310 --> 00:05:21,460
Then there's also a few that are relative
to

93
00:05:21,460 --> 00:05:26,420
the viewport which can be pretty handy to
use in certain situations.

94
00:05:26,420 --> 00:05:31,570
And then there are absolute measurements,
or physical measurements.

95
00:05:31,570 --> 00:05:36,410
These don't see quite as much use with the
advent of responsive web design.

96
00:05:36,410 --> 00:05:40,880
But they're still pretty useful in certain
situations.

97
00:05:40,880 --> 00:05:42,280
>> Maybe print style sheets?

98
00:05:42,280 --> 00:05:43,500
>> Exactly.

99
00:05:43,500 --> 00:05:48,620
So here we have a couple of different
toggles where we can adjust

100
00:05:48,620 --> 00:05:53,490
the font size of HTML, the body, or the
example here.

101
00:05:53,490 --> 00:05:57,060
And you can see how these different units
respond.

102
00:05:57,060 --> 00:06:01,100
So, for example, this is like one inch
here.

103
00:06:01,100 --> 00:06:05,520
Or these are relative to a font, these are
relative to the viewport.

104
00:06:05,520 --> 00:06:09,210
And so when you change these, they're all
gonna react differently.

105
00:06:09,210 --> 00:06:13,260
So, if I increase the font size here,
those will change.

106
00:06:13,260 --> 00:06:18,230
Or if I change the width of the example,
so

107
00:06:18,230 --> 00:06:22,940
you actually change the whole unit there,
you can see how that behaves.

108
00:06:22,940 --> 00:06:27,110
Anyway, this is just a really handy chart
if you're trying to figure out

109
00:06:27,110 --> 00:06:30,340
some CSS units and you're having trouble
debugging it.

110
00:06:30,340 --> 00:06:36,270
You can see exactly how they should be
behaving under ideal conditions.

111
00:06:36,270 --> 00:06:38,940
>> Yeah, I guess you could say that that,
that is off the charts.

112
00:06:40,470 --> 00:06:41,890
>> You could say that.

113
00:06:41,890 --> 00:06:44,690
Next we have a project called
highlight.js.

114
00:06:44,690 --> 00:06:49,190
This is a small JavaScript library that
gives you syntax highlighting for

115
00:06:49,190 --> 00:06:50,390
your web pages.

116
00:06:50,390 --> 00:06:54,840
It supports a ton of different languages,
112 of them to be exact.

117
00:06:54,840 --> 00:06:58,280
And it has 49 different styles or themes.

118
00:06:58,280 --> 00:07:02,470
And you can see I'm, I'm clicking through
here and the language is changing, and

119
00:07:02,470 --> 00:07:05,010
also the theme is changing as well.

120
00:07:05,010 --> 00:07:11,670
Now this is gonna be really useful if you
are trying to show code on your webpage.

121
00:07:11,670 --> 00:07:16,090
Now what's really nice about this library
compared to some other ones is

122
00:07:16,090 --> 00:07:17,500
it doesn't take a lot to get going.

123
00:07:17,500 --> 00:07:21,460
You just, throw in a link to the style
sheet and the script.

124
00:07:21,460 --> 00:07:25,360
And then, If you want to, all you need to
do is call this line right here, and

125
00:07:25,360 --> 00:07:27,840
it highlighting on load.

126
00:07:27,840 --> 00:07:31,930
Then, you surround your code with a
pre-tag, and then a code.

127
00:07:31,930 --> 00:07:36,410
And then you give it the class of the
language that you wanna use.

128
00:07:36,410 --> 00:07:41,520
So, the really nice thing about this is,
that you can do custom initialization.

129
00:07:41,520 --> 00:07:45,620
So, instead of saying, hey, I want all of
my pre and

130
00:07:45,620 --> 00:07:50,140
code tags to have the syntax highlighting,
you can change that to divs

131
00:07:50,140 --> 00:07:55,070
with different classes and there's a lot
of documentation that lets

132
00:07:55,070 --> 00:07:59,330
you really get into the nitty gritty of
when you are doing this highlighting.

133
00:07:59,330 --> 00:08:02,940
One thing that's really nice is that
depending on the language

134
00:08:02,940 --> 00:08:07,800
you can also change spaces to tabs.

135
00:08:07,800 --> 00:08:13,220
And a ton of different things right there
let me see if I can find it right here.

136
00:08:14,450 --> 00:08:16,140
But yeah, I cannot find it.

137
00:08:16,140 --> 00:08:18,950
That's the problem with doing a live show.

138
00:08:18,950 --> 00:08:22,860
It also does support line numbers, and
yeah, just a bunch of various options.

139
00:08:22,860 --> 00:08:25,920
Anyway once again if you need to add
syntax highlighting to your webpage,

140
00:08:25,920 --> 00:08:26,930
check this out.

141
00:08:26,930 --> 00:08:28,390
We'll have a link in the show notes.

142
00:08:28,390 --> 00:08:30,190
>> Thanks for highlighting that, Jason.

143
00:08:30,190 --> 00:08:33,280
Next up, is a really cool tool called
Shade.

144
00:08:33,280 --> 00:08:37,570
This is a mathematically derived gradient
explorer.

145
00:08:37,570 --> 00:08:39,080
What does the, what the heck does that
mean.

146
00:08:39,080 --> 00:08:40,250
Well,.
>> I have no idea.

147
00:08:40,250 --> 00:08:43,860
>> Basically, it can be a little bit
difficult to understand

148
00:08:43,860 --> 00:08:48,290
what kind of gradient you're gonna get
when you just type in code into CSS.

149
00:08:48,290 --> 00:08:51,880
You have to type it in, go back, refresh
in the browser.

150
00:08:51,880 --> 00:08:53,960
You find out that's not what you wanted
and

151
00:08:53,960 --> 00:08:57,120
then you have to do that cycle over and
over again.

152
00:08:57,120 --> 00:09:01,970
Well this is much better because you can
just use these sliders here.

153
00:09:01,970 --> 00:09:04,970
And you can change the hue of the
gradient.

154
00:09:04,970 --> 00:09:07,420
And look at that, they even change the
color of the fonts.

155
00:09:07,420 --> 00:09:08,170
I can still see it.

156
00:09:08,170 --> 00:09:09,900
That's pretty clever.

157
00:09:09,900 --> 00:09:12,680
And then you can change maybe the
saturation.

158
00:09:12,680 --> 00:09:15,400
So you can go from like grey scale to
color.

159
00:09:16,780 --> 00:09:19,780
And you can change the lightness.

160
00:09:19,780 --> 00:09:23,630
And then you can also change the hue shift
here.

161
00:09:24,730 --> 00:09:28,870
You can change, the saturation of that and
the lightness as well.

162
00:09:28,870 --> 00:09:32,580
So, there's a couple different adjustments
there that are actually,

163
00:09:32,580 --> 00:09:35,820
maybe a little bit more similar to what
you might expect

164
00:09:35,820 --> 00:09:39,080
in Photoshop in terms of these little
sliders here.

165
00:09:39,080 --> 00:09:40,400
And then, right there,

166
00:09:40,400 --> 00:09:44,952
it gives you the code to actually put this
into your web page.

167
00:09:44,952 --> 00:09:49,460
So if create a gradient and you end up
liking it, you can go ahead and

168
00:09:49,460 --> 00:09:53,120
just copy and paste that right into your
site.

169
00:09:53,120 --> 00:09:55,910
You can also of course, put in a base
color here,

170
00:09:55,910 --> 00:09:58,680
if you have a specific color you want to
start out with.

171
00:09:58,680 --> 00:10:00,910
And then you can adjust from there.

172
00:10:00,910 --> 00:10:03,250
Anyway not a whole lot to say about that.

173
00:10:03,250 --> 00:10:07,000
But, I thought this was a, pretty cool
tool.

174
00:10:07,000 --> 00:10:08,240
>> Yeah, it's delightful.

175
00:10:08,240 --> 00:10:10,340
>> Anyway, that's all we have time for
this week.

176
00:10:10,340 --> 00:10:11,680
I am @nickrp on Twitter.

177
00:10:11,680 --> 00:10:12,630
>> And I am @jseifer.

178
00:10:12,630 --> 00:10:14,130
For more information on anything we talked
about,

179
00:10:14,130 --> 00:10:15,970
check out our show notes right below the
video.

180
00:10:15,970 --> 00:10:18,963
Thanks so much for watching, and we will
see you next week.

181
00:10:18,963 --> 00:10:25,729
[MUSIC].