1
00:00:00,250 --> 00:00:01,010
I'm Nick Pettit.

2
00:00:01,010 --> 00:00:01,990
>> I'm Jason Seifer.

3
00:00:01,990 --> 00:00:05,092
>> And you're watching the Treehouse show,
your weekly dose of Internets where

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

5
00:00:07,730 --> 00:00:12,480
>> In this episode we'd talking about web
features, form design, color pickers and

6
00:00:12,480 --> 00:00:13,240
more.

7
00:00:13,240 --> 00:00:14,330
>> Let's check it out

8
00:00:14,330 --> 00:00:19,492
[MUSIC]

9
00:00:19,492 --> 00:00:20,393
>> First up, Nick,

10
00:00:20,393 --> 00:00:24,000
we've gone over the website
caniuse.com previously on this show.

11
00:00:24,000 --> 00:00:25,330
>> It's true, it's very true.

12
00:00:25,330 --> 00:00:29,630
>> Now, caniuse.com is a very,
very informative website where if you

13
00:00:29,630 --> 00:00:33,680
are looking to see whether or
not you can use a certain element or

14
00:00:33,680 --> 00:00:38,770
attribute on your webpage, it will
tell you what browsers have support.

15
00:00:38,770 --> 00:00:43,239
So, for example, if I click on the audio
element, it will tell me which we

16
00:00:43,239 --> 00:00:48,232
browser and which versions support it,
as well as any features and known issues.

17
00:00:48,232 --> 00:00:51,541
Now while this website
is completely awesome,

18
00:00:51,541 --> 00:00:56,375
there is now a Command Line Tool
that interfaces with caniuse.com.

19
00:00:56,375 --> 00:01:01,032
You can install this with Node.js,
just do a global

20
00:01:01,032 --> 00:01:05,942
npm install of caniuse-cmd,
and then you can go ahead and

21
00:01:05,942 --> 00:01:10,122
use the caniuse command and
put something in there afterwards.

22
00:01:10,122 --> 00:01:11,742
Let's go ahead and see what it looks like.

23
00:01:11,742 --> 00:01:14,720
So for
example here we are on my MacBook Pro,

24
00:01:14,720 --> 00:01:17,680
and say can I use and something like SVG.

25
00:01:17,680 --> 00:01:22,800
And then we can see right here on
the output it will tell me, oh,

26
00:01:22,800 --> 00:01:28,160
can't use it in IE 5.5, but
SVG is supported in IE 9 and up.

27
00:01:29,370 --> 00:01:32,910
There we can also do something
like can I use websockets.

28
00:01:32,910 --> 00:01:36,750
Okay, we have partial support,
and IE, and Firefox and

29
00:01:36,750 --> 00:01:41,640
Chrome, and then there's also different
options like can I use oneline

30
00:01:43,360 --> 00:01:47,770
websockets, and it will give you
a very short summary of whether or

31
00:01:47,770 --> 00:01:50,090
not you can use that particular feature.

32
00:01:50,090 --> 00:01:54,590
Tells you what percentage is supported,
and whether or not it is recommended.

33
00:01:54,590 --> 00:01:57,730
So, just a quick little command
line tool that we thought

34
00:01:57,730 --> 00:01:59,040
you might find very useful.

35
00:01:59,040 --> 00:01:59,710
Go ahead and check it out.

36
00:01:59,710 --> 00:02:01,400
We'll have a link in the show notes.

37
00:02:01,400 --> 00:02:02,170
>> Very cool stuff.

38
00:02:02,170 --> 00:02:07,810
Well, next up is The 10 Commandments
of Good Form Design on the Web.

39
00:02:07,810 --> 00:02:12,600
So, if you wanna have good form for
your forms, this is the place to look.

40
00:02:12,600 --> 00:02:15,620
First one says that you should
always provide a clear,

41
00:02:15,620 --> 00:02:18,880
always visible label for each field.

42
00:02:18,880 --> 00:02:23,660
So here is a bad example where there's
labels, and you type stuff in, and

43
00:02:23,660 --> 00:02:26,930
then well, you're not really sure
what the label said originally.

44
00:02:26,930 --> 00:02:30,690
And this is better,
where you always have the labels visible.

45
00:02:30,690 --> 00:02:34,110
So that when you type things in,
it's easy to understand, and

46
00:02:34,110 --> 00:02:36,000
I actually like the design
of this article.

47
00:02:36,000 --> 00:02:39,740
They show stuff in red when it's bad and
green when it's good.

48
00:02:39,740 --> 00:02:43,630
So, these are small labels, and
then they make the labels larger.

49
00:02:43,630 --> 00:02:46,430
That's an important thing to keep
in mind when creating forms.

50
00:02:46,430 --> 00:02:51,345
It sounds really obvious, but
you should have a big enough font size so

51
00:02:51,345 --> 00:02:55,030
that you can easily scan the form and
go down the page and

52
00:02:55,030 --> 00:02:58,930
figure out what kind of
information you need to put in.

53
00:02:58,930 --> 00:03:02,820
There's 10 of these, but
I'll just keep it to the first three.

54
00:03:02,820 --> 00:03:07,240
The last one, I really like this,
is to provide easily tappable areas.

55
00:03:07,240 --> 00:03:11,850
You want to provide an area on
the screen that is going to be easy,

56
00:03:11,850 --> 00:03:16,900
not only for people using a mouse and
keyboard to input their data into, but

57
00:03:16,900 --> 00:03:19,480
also for people who are on mobile.

58
00:03:19,480 --> 00:03:22,550
And really, when you're designing sites,
you should be be thinking about

59
00:03:22,550 --> 00:03:26,690
mobile first, and then working your way
up to larger and larger screen sizes.

60
00:03:26,690 --> 00:03:29,800
So, if your site looks good
on a mobile device and

61
00:03:29,800 --> 00:03:35,050
you have these large tappable areas that
are better for a crude input device like

62
00:03:35,050 --> 00:03:39,370
your finger versus a cursor,
then you should be good to go.

63
00:03:39,370 --> 00:03:42,160
Anyway, there are a couple
more of these on the page, so

64
00:03:42,160 --> 00:03:44,140
definitely be sure to check that one out.

65
00:03:44,140 --> 00:03:45,260
>> Very cool.

66
00:03:45,260 --> 00:03:48,160
Next up, we have a project
called tiny color picker.

67
00:03:48,160 --> 00:03:50,120
As you might guess from the name,
this is a very,

68
00:03:50,120 --> 00:03:52,930
small, color picker that you
can use on your web pages.

69
00:03:52,930 --> 00:03:58,210
>> I was thinking it was for
smaller colors rather than big colors.

70
00:03:58,210 --> 00:04:03,390
>> Yeah, like a deep burgundy red
rather than a bright big red.

71
00:04:03,390 --> 00:04:05,350
>> Right.
>> No, that's not it at all.

72
00:04:05,350 --> 00:04:08,370
This is just a small color picker
that you can use on your webpage.

73
00:04:08,370 --> 00:04:11,440
Let's go ahead and
take a look at an example.

74
00:04:11,440 --> 00:04:15,330
Here is a little circle on the page and
if I tap that, oh look at that,

75
00:04:15,330 --> 00:04:16,790
we've got a color picker, and

76
00:04:16,790 --> 00:04:19,980
we can pick from literally any
of these colors in this circle.

77
00:04:19,980 --> 00:04:21,170
I am gonna tap on purple, look at that.

78
00:04:21,170 --> 00:04:23,310
>> Wow,
that's at least like a dozen colors, wow.

79
00:04:23,310 --> 00:04:25,560
>> Yeah, look at that, huh, ready?

80
00:04:25,560 --> 00:04:26,880
Do that again, look at that, what?

81
00:04:26,880 --> 00:04:28,305
>> Whoa.

82
00:04:28,305 --> 00:04:29,930
Literally any one of those colors.

83
00:04:29,930 --> 00:04:31,980
>> Are we on a web page or in Photoshop?

84
00:04:31,980 --> 00:04:34,236
>> This is a webpage.

85
00:04:34,236 --> 00:04:37,250
I know you couldn't believe
that to begin with, but boy.

86
00:04:37,250 --> 00:04:38,550
>> I can't belive it.

87
00:04:38,550 --> 00:04:41,160
>> Well suspend that disbelief,
buddy, because here we go.

88
00:04:41,160 --> 00:04:42,950
This has an image.

89
00:04:42,950 --> 00:04:43,640
>> Oh my Gosh.

90
00:04:43,640 --> 00:04:46,960
>> And then anywhere that I
click inside of this image.

91
00:04:46,960 --> 00:04:48,460
Look at that, that the color, yeah.

92
00:04:48,460 --> 00:04:49,410
>> What is happening?

93
00:04:49,410 --> 00:04:52,380
>> What is happening is
your mind being blown.

94
00:04:52,380 --> 00:04:53,780
>> Tomorrow is today.

95
00:04:53,780 --> 00:04:56,290
>> Yesterday is not the future.

96
00:04:56,290 --> 00:05:00,250
So anyway, you can take pretty much any
one of these that has some properties.

97
00:05:00,250 --> 00:05:03,470
You can give it the hex or the RGB value.

98
00:05:03,470 --> 00:05:07,200
And then it has only single event,
the change event, and

99
00:05:07,200 --> 00:05:08,580
that triggers when a new color is set.

100
00:05:08,580 --> 00:05:11,740
And then you can do
something when that is set.

101
00:05:11,740 --> 00:05:15,620
This works either on forms or
just anywhere on your webpage.

102
00:05:15,620 --> 00:05:17,460
Go ahead and check that out.

103
00:05:17,460 --> 00:05:18,810
>> What a time to be alive.

104
00:05:18,810 --> 00:05:23,130
Next up is a mobile-friendly
test to test whether or

105
00:05:23,130 --> 00:05:26,680
not your site is going to
look good on mobile devices.

106
00:05:26,680 --> 00:05:31,420
Of course, when you are testing, you
should always try to use a real device.

107
00:05:31,420 --> 00:05:34,530
But, if you're just doing
something really quickly,

108
00:05:34,530 --> 00:05:38,670
Google has this awesome
mobile-friendly tester.

109
00:05:38,670 --> 00:05:41,660
So we can type in something like,

110
00:05:41,660 --> 00:05:46,500
I don't know, my website, nickpetit.com,
and it's going to analyze it.

111
00:05:46,500 --> 00:05:50,340
And this is actually doing more
than just analyzing the design.

112
00:05:50,340 --> 00:05:54,590
It's Google going through and
analyzing your page, and

113
00:05:54,590 --> 00:06:00,320
giving you an idea of how
the Googlebot is actually going to see

114
00:06:00,320 --> 00:06:05,850
the content on this page, and hey look, it
says I am co-host of the Treehouse show,

115
00:06:05,850 --> 00:06:08,850
and in fact,
that is what I'm doing right now.

116
00:06:08,850 --> 00:06:11,680
But anyway, mobile friendly test,
pretty cool.

117
00:06:11,680 --> 00:06:17,470
You can go ahead and analyze any webpage,
are you okay, Jason?

118
00:06:17,470 --> 00:06:20,020
>> Is it analyzing
the Treehouse show right now?

119
00:06:20,020 --> 00:06:22,740
>> I think so, I think Google is, yeah.

120
00:06:22,740 --> 00:06:23,910
>> Hi, Google.

121
00:06:23,910 --> 00:06:25,135
>> Yeah, it's watching us.

122
00:06:25,135 --> 00:06:27,338
>> [SOUND] Let's go ahead and
move on, very quickly.

123
00:06:27,338 --> 00:06:31,940
Next up we have the ECMAScript
6 features guide.

124
00:06:31,940 --> 00:06:36,590
Now ECMAScript 6 is the next
evolution of JavaScript.

125
00:06:36,590 --> 00:06:40,540
New version and the new standard
has recently come out, and

126
00:06:40,540 --> 00:06:44,520
you can start using some
ECMAScript 6 features today.

127
00:06:44,520 --> 00:06:49,120
If you would like to learn about them,
this wonderful repository on GitHub,

128
00:06:49,120 --> 00:06:53,010
which you can find in the show notes, will
walk you through some of the new features.

129
00:06:53,010 --> 00:06:56,490
Now, some of the new features, we're not
gonna go over all of them because this is

130
00:06:56,490 --> 00:07:00,610
quite a bit of stuff, but arrows,
which you might have seen and

131
00:07:00,610 --> 00:07:05,810
been used to in CoffeeScript,
are now available in ECMAScript 6.

132
00:07:05,810 --> 00:07:11,690
Now, these allow you to define
functions in a shorthand manner.

133
00:07:11,690 --> 00:07:16,130
For example, this for each statement
usually would take a function, but

134
00:07:16,130 --> 00:07:22,010
instead of writing function with
parenthesis and open curly brace,

135
00:07:22,010 --> 00:07:26,440
we can just use this fat arrow and
then place our function inside.

136
00:07:27,620 --> 00:07:31,750
Now there is a little bit of a difference
between fat arrows and skinny arrows.

137
00:07:31,750 --> 00:07:36,560
We're using the fat arrow syntax,
which binds to this.

138
00:07:36,560 --> 00:07:41,260
So normally we would have to
define a different variable to

139
00:07:41,260 --> 00:07:46,190
keep place of the scope, but
the fat arrow does that for us.

140
00:07:46,190 --> 00:07:49,229
So the inner this refers
to the outer this.

141
00:07:50,540 --> 00:07:54,160
Next up,
ECMAScript 6 defines classes as well.

142
00:07:54,160 --> 00:07:55,660
Now this is interesting.

143
00:07:55,660 --> 00:07:59,790
Class based design was something that we
would use quite a bit in JavaScript, but

144
00:07:59,790 --> 00:08:02,185
there were, I don't wanna say hacks, but

145
00:08:02,185 --> 00:08:07,450
this is just simple syntactic sugar
over the normal object oriented pattern.

146
00:08:07,450 --> 00:08:11,300
So, use this class statement and
extend it from another class.

147
00:08:11,300 --> 00:08:16,550
You get this nice constructor syntax
which is very, very useful, and

148
00:08:16,550 --> 00:08:20,350
we're not gonna go over everything,
but go ahead and give this a read.

149
00:08:20,350 --> 00:08:23,490
This is going to be the next
version of ECMAScript 6.

150
00:08:23,490 --> 00:08:26,970
There's no time better than
the present to get familiar with it.

151
00:08:26,970 --> 00:08:27,860
>> Very nice stuff.

152
00:08:27,860 --> 00:08:29,730
Well, that's all we have time for
this week.

153
00:08:29,730 --> 00:08:31,070
I am @nickrp on Twitter.

154
00:08:31,070 --> 00:08:31,980
>> And I am @jseifer.

155
00:08:31,980 --> 00:08:33,930
For more information on anything
we talked about, go ahead and

156
00:08:33,930 --> 00:08:35,850
check out the links in our show notes.

157
00:08:35,850 --> 00:08:39,283
We wanna thank everybody for watching,
and we'll see you next week.

158
00:08:39,283 --> 00:08:46,419
[MUSIC]