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

2
00:00:01,310 --> 00:00:02,120
>> I'm Jason Seifer.

3
00:00:02,120 --> 00:00:05,160
>> And you're watching The Treehouse Show,
your weekly dose of Internets,

4
00:00:05,160 --> 00:00:08,220
where we talk about all things web design,
web development, and more.

5
00:00:08,220 --> 00:00:12,381
>> In this episode we will be talking
about CSS shapes, JavaScript,

6
00:00:12,381 --> 00:00:14,254
font combinations and more.

7
00:00:14,254 --> 00:00:15,213
>> Let's check it out.

8
00:00:15,213 --> 00:00:20,220
[MUSIC]

9
00:00:20,220 --> 00:00:24,744
First up is this really cool
article over on the CSS-Tricks

10
00:00:24,744 --> 00:00:28,370
blog called Working with
Shapes in Web Design.

11
00:00:28,370 --> 00:00:31,421
>> This sounds like it could really
get my website in good shape.

12
00:00:34,880 --> 00:00:35,720
Don't be such a square, Nick.

13
00:00:35,720 --> 00:00:36,370
>> All right.

14
00:00:38,600 --> 00:00:40,420
>> We can circle back to that if you want.

15
00:00:40,420 --> 00:00:44,660
>> Speaking of circles you can
use the border radius property

16
00:00:44,660 --> 00:00:49,480
to set the border radius on
an element to make it a circle.

17
00:00:49,480 --> 00:00:51,230
Look it really did come full circle.

18
00:00:51,230 --> 00:00:52,330
Bam.
>> Wow.

19
00:00:52,330 --> 00:00:55,175
>> Amazing.
You can also create shapes.

20
00:00:55,175 --> 00:01:00,080
>> [INAUDIBLE]
>> You can also create shapes using

21
00:01:00,080 --> 00:01:02,850
the border property.

22
00:01:02,850 --> 00:01:05,160
>> Really, that borders on crazy.

23
00:01:05,160 --> 00:01:09,137
>> And you can set some of
the borders to be transparent and

24
00:01:09,137 --> 00:01:14,337
it will create shapes like this, and
there's a few more methods here.

25
00:01:14,337 --> 00:01:16,962
Let's look at this one,
rotating shapes with transfer.

26
00:01:16,962 --> 00:01:18,090
>> Ooh.

27
00:01:18,090 --> 00:01:22,500
Can you rotate in directions and
also use shapes of animals?

28
00:01:23,890 --> 00:01:24,850
>> I think we can.

29
00:01:24,850 --> 00:01:27,490
>> I would like an arrow going up and
a dog.

30
00:01:28,540 --> 00:01:29,040
An up dog.

31
00:01:31,750 --> 00:01:33,520
>> Where did you hear?

32
00:01:33,520 --> 00:01:34,950
>> On the website.

33
00:01:34,950 --> 00:01:35,450
>> Up dog?

34
00:01:35,450 --> 00:01:35,950
Okay.

35
00:01:37,060 --> 00:01:41,640
Anyway, you can take this square,
turn it on its side and call it a diamond.

36
00:01:41,640 --> 00:01:42,690
Look, shapes.

37
00:01:42,690 --> 00:01:43,540
>> Marketing.

38
00:01:43,540 --> 00:01:46,970
>> There's also many other
techniques here, and

39
00:01:46,970 --> 00:01:48,800
that's really what this
blog post is about.

40
00:01:48,800 --> 00:01:52,220
It's about all the different
techniques that you can use,

41
00:01:52,220 --> 00:01:55,280
not necessarily just the different shapes,
but the techniques that you can use to

42
00:01:55,280 --> 00:01:59,140
create different shapes with-
>> Look at that, you can use an ellipse.

43
00:01:59,140 --> 00:02:01,090
>> CSS.
You can use an ellipse.

44
00:02:01,090 --> 00:02:03,190
>> Can you do a heart shape?

45
00:02:04,250 --> 00:02:06,590
Like a total ellipse of the heart?

46
00:02:06,590 --> 00:02:10,130
>> I think you could make
a total ellipse of the heart.

47
00:02:11,210 --> 00:02:12,900
>> Cool.
>> Mm-hm.

48
00:02:12,900 --> 00:02:15,950
>> Next up we have
a project called purifycss.

49
00:02:15,950 --> 00:02:20,280
Now what this does is runs your
CSS through a filtration system

50
00:02:20,280 --> 00:02:22,120
thereby removing all impurities.

51
00:02:23,390 --> 00:02:29,760
No, what it really does is remove any
unused CSS declarations from your website.

52
00:02:29,760 --> 00:02:32,710
Now this also works with
single-page applications.

53
00:02:32,710 --> 00:02:37,470
Super easy to use, just go ahead and
install it via NPM.

54
00:02:37,470 --> 00:02:41,520
And then here is a little
example about how it worked.

55
00:02:41,520 --> 00:02:47,590
Anytime your class name is intact in your
codes it will leave that in the site.

56
00:02:47,590 --> 00:02:52,050
But if not you can download
a new version of your CSS that

57
00:02:52,050 --> 00:02:55,980
has all of the unused
declarations removed.

58
00:02:55,980 --> 00:02:57,430
And then boom you are good to go.

59
00:02:57,430 --> 00:03:00,330
Now you can save a ton of bandwidth for

60
00:03:00,330 --> 00:03:03,310
your users by removing
unused CSS declarations.

61
00:03:03,310 --> 00:03:08,720
Now this is gonna be particularly
important if you are using a big CSS or

62
00:03:08,720 --> 00:03:11,600
JavaScript framework that has

63
00:03:11,600 --> 00:03:14,420
a lot of stuff that you're probably
not using all of it in your code.

64
00:03:14,420 --> 00:03:17,480
Things like Bootstrap,
Foundation, tons of CSS, and

65
00:03:17,480 --> 00:03:19,270
odds are you're not using all of it.

66
00:03:19,270 --> 00:03:24,990
So Purify is a great way to go if you are
trying to save your users some bandwidth.

67
00:03:24,990 --> 00:03:25,930
>> Very cool stuff.

68
00:03:25,930 --> 00:03:32,270
Well next up is JavaScript the Right Way,
and I feel like I must have been

69
00:03:32,270 --> 00:03:36,130
doing JavaScript the wrong way, because-
>> Or the left way.

70
00:03:36,130 --> 00:03:36,830
>> Yeah.

71
00:03:36,830 --> 00:03:39,030
>> Or the up dog way.

72
00:03:39,030 --> 00:03:40,930
>> You keep saying that.

73
00:03:42,950 --> 00:03:47,590
Anyway, on this site you
can choose your path.

74
00:03:47,590 --> 00:03:52,270
So if you're just getting started with
JavaScript here are some good resources

75
00:03:52,270 --> 00:03:56,510
for getting started, it tells you,
well, what is JavaScript?

76
00:03:56,510 --> 00:03:57,750
What's the current version?

77
00:03:57,750 --> 00:04:02,740
What is the DOM, and then it gives you
some information about JavaScript code

78
00:04:02,740 --> 00:04:09,930
style such as conventions and linting, and
let me scroll back up to choose your path.

79
00:04:09,930 --> 00:04:14,640
There's other stuff, for
example, such as podcasts and

80
00:04:14,640 --> 00:04:18,820
screencasts but you're already watching
one of those so need to click there.

81
00:04:18,820 --> 00:04:23,450
And then you can also click on
something like WHO TO FOLLOW.

82
00:04:23,450 --> 00:04:28,360
And you'll notice that
Jason is not listed here.

83
00:04:28,360 --> 00:04:32,454
So that's how you know that this
is an excellent resource for

84
00:04:32,454 --> 00:04:35,837
actually learning
something about JavaScript.

85
00:04:35,837 --> 00:04:37,300
>> That's mean spirited and upsetting.

86
00:04:42,210 --> 00:04:45,480
Next up we have a JavaScript
style guide put out by AirBnb.

87
00:04:45,480 --> 00:04:48,970
Now style guide is really
important to follow

88
00:04:48,970 --> 00:04:50,920
when you are working with a large team.

89
00:04:50,920 --> 00:04:55,700
It will establish conventions that
everybody should use when creating code

90
00:04:55,700 --> 00:04:58,940
thereby making it easier for
new members to join their team.

91
00:04:58,940 --> 00:05:01,820
>> Also helpful when you're
getting dressed in the morning.

92
00:05:01,820 --> 00:05:05,770
>> This is not going to help
you get dressed in the morning.

93
00:05:05,770 --> 00:05:09,390
Oh wow, this shirt doesn't go
well with these arrow functions.

94
00:05:09,390 --> 00:05:14,720
Anyway, so this is an ECMAScript 6
version of the JavaScript style guide.

95
00:05:14,720 --> 00:05:18,890
There is a ECMAScript 5 only guide
as well that you can follow.

96
00:05:18,890 --> 00:05:22,360
Now, we're not gonna go over everything
here, because as you can see,

97
00:05:22,360 --> 00:05:25,130
there are a ton of different options.

98
00:05:25,130 --> 00:05:28,170
But what I really like
about this guide is,

99
00:05:28,170 --> 00:05:32,600
if we scroll down a little bit
over here to object creation,

100
00:05:32,600 --> 00:05:38,290
it shows you a bad and
good way to create different objects.

101
00:05:38,290 --> 00:05:42,770
Now the whole style guide repeats
this pattern of showing you a bad and

102
00:05:42,770 --> 00:05:46,130
good way of doing things, which is going
to help you when writing your code.

103
00:05:46,130 --> 00:05:49,870
It's gonna make things just a bit more
readable and also lets you learn from it.

104
00:05:49,870 --> 00:05:53,330
Maybe like learn some new patterns
that you haven't seen before.

105
00:05:53,330 --> 00:05:56,320
Now like I said we are not gonna
go over everything on here but

106
00:05:56,320 --> 00:05:59,290
there is a ton of good stuff in here.

107
00:05:59,290 --> 00:06:05,050
We have this, for arrays, for example,
use the literal syntax for array creation.

108
00:06:05,050 --> 00:06:09,580
We don't do new array,
just create some brackets right there.

109
00:06:09,580 --> 00:06:12,950
Boom, good to go, and
there, in some browsers,

110
00:06:12,950 --> 00:06:15,520
is a little bit of a performance
advantage to doing that.

111
00:06:15,520 --> 00:06:19,070
So you know that they really did their
homework when creating this style guide.

112
00:06:20,180 --> 00:06:24,870
Now next up we have the structuring and
that is kind of how I feel about

113
00:06:24,870 --> 00:06:28,790
the Treehouse show sometimes, and also
mine and Nick's relationship in general.

114
00:06:29,850 --> 00:06:33,170
So anyway if you are in need of a good
JavaScript style guide go ahead

115
00:06:33,170 --> 00:06:35,730
check out this link in the show
notes that's right below this video.

116
00:06:37,050 --> 00:06:41,110
Next up, we have this website
called Great Font Combinations and

117
00:06:41,110 --> 00:06:45,520
that is a great name for this website,
because that's exactly what it is.

118
00:06:45,520 --> 00:06:52,300
If you scroll down here you can see
some different combinations of fonts.

119
00:06:52,300 --> 00:06:54,640
>> Is there a Nick font and a Jason font?

120
00:06:54,640 --> 00:06:56,570
>> There is not.

121
00:06:56,570 --> 00:06:59,400
And I'm not sure really
why there would be.

122
00:06:59,400 --> 00:06:59,920
>> There should be.

123
00:07:01,640 --> 00:07:05,190
>> So there's a couple of different
examples here of different

124
00:07:05,190 --> 00:07:08,090
types of website or applications.

125
00:07:08,090 --> 00:07:14,790
And underneath each one of them they
point out what fonts are being used.

126
00:07:14,790 --> 00:07:19,840
So you can see well, what's the header
font and what's maybe the body font.

127
00:07:19,840 --> 00:07:25,780
And it's a good way to kind of get some
inspiration and look at these real world

128
00:07:25,780 --> 00:07:29,390
examples of font combinations because-
>> I don't like that one.

129
00:07:29,390 --> 00:07:30,120
It's not my type.

130
00:07:33,370 --> 00:07:36,030
>> There's a lot of different
website that do this.

131
00:07:36,030 --> 00:07:38,350
We've covered some of them in the past.

132
00:07:38,350 --> 00:07:42,610
And this is nice because
it kind of points out well,

133
00:07:42,610 --> 00:07:47,370
here's what these fonts actually might
look like together in a real website.

134
00:07:47,370 --> 00:07:51,446
>> It gives you a good baseline for
choosing a font.

135
00:07:51,446 --> 00:07:53,735
Period.

136
00:07:53,735 --> 00:07:59,680
>> Well, Jason, I think you and
I are the greatest combination.

137
00:07:59,680 --> 00:08:01,240
>> Well thanks Nick.

138
00:08:03,010 --> 00:08:06,950
However, we do have some
mildly disappointing news.

139
00:08:06,950 --> 00:08:11,360
This is going to be the last
episode of the Treehouse Show.

140
00:08:11,360 --> 00:08:15,910
We have really enjoyed hanging out with
you guys and bringing you the latest and

141
00:08:15,910 --> 00:08:19,660
greatest in front end and
occasionally back end technologies.

142
00:08:19,660 --> 00:08:22,210
>> And I've occasionally
enjoyed hanging with Jason.

143
00:08:23,860 --> 00:08:25,630
>> That's a pretty good note to end on.

144
00:08:25,630 --> 00:08:28,710
Nick who are you on Twitter if
they want to keep up dog with us?

145
00:08:28,710 --> 00:08:30,460
>> I am @nickrp.

146
00:08:30,460 --> 00:08:32,270
>> And I am @jseifer.

147
00:08:32,270 --> 00:08:33,860
Thanks so much for watching.

148
00:08:33,860 --> 00:08:35,546
And we'll up dog next week.

149
00:08:35,546 --> 00:08:37,462
[MUSIC]

150
00:08:37,462 --> 00:08:39,921
>> Okay, what is up dog?

151
00:08:39,921 --> 00:08:46,229
[MUSIC]