1
00:00:00,290 --> 00:00:01,070
I'm Nick Pettit.

2
00:00:01,070 --> 00:00:02,040
>> I'm Jason Seifer.

3
00:00:02,040 --> 00:00:04,860
>> And you're watching the Treehouse Show,
your weekly dose of Internets

4
00:00:04,860 --> 00:00:07,990
where we talk about all things web design,
web development, and more.

5
00:00:07,990 --> 00:00:09,930
>> For a free month's trial of

6
00:00:09,930 --> 00:00:14,660
Treehouse, join Nick and I over at
www.teamtreehouse.com/show.

7
00:00:14,660 --> 00:00:15,940
In this episode of the Treehouse Show,

8
00:00:15,940 --> 00:00:20,530
we'll be talking about SVG patterns for
background.

9
00:00:20,530 --> 00:00:24,500
Breach, a new web browser, Fast Shell and
more.

10
00:00:24,500 --> 00:00:25,211
>> Let's check it out.

11
00:00:25,211 --> 00:00:30,326
[MUSIC]

12
00:00:30,326 --> 00:00:32,760
First up is Pattern Bolts.

13
00:00:32,760 --> 00:00:34,900
>> That was my nickname in high school.

14
00:00:34,900 --> 00:00:39,730
>> If you ever wanted to apply a pattern
background to your site.

15
00:00:39,730 --> 00:00:41,810
This is a great way to do it.

16
00:00:41,810 --> 00:00:44,080
>> That is not why, that was my nickname.

17
00:00:44,080 --> 00:00:47,825
It says PatternBolt is a fine selection,
unlike Jason.

18
00:00:47,825 --> 00:00:48,070
>> [LAUGH]

19
00:00:48,070 --> 00:00:56,400
>> Of SVG patterned background, packed in
a single CSS or SCSS file.

20
00:00:56,400 --> 00:01:00,670
So you can download the demo, or look at
the GitHub repo.

21
00:01:00,670 --> 00:01:01,530
But that's boring.

22
00:01:01,530 --> 00:01:02,700
Let's play with this thing here.

23
00:01:02,700 --> 00:01:04,040
>> Yeah, look at that, buttons.

24
00:01:04,040 --> 00:01:05,830
>> You, you can select a pattern.

25
00:01:05,830 --> 00:01:07,760
So you can click on.

26
00:01:07,760 --> 00:01:12,720
Any one of these here and you can change
the size of that pattern.

27
00:01:12,720 --> 00:01:18,527
So, you can increase the size there or you
could make it really, really small.

28
00:01:18,527 --> 00:01:18,577
[CROSSTALK].

29
00:01:18,577 --> 00:01:23,303
>> Is this a website or an art shop that's
been generated by magic?

30
00:01:23,303 --> 00:01:25,810
>> It's pretty amazing, isn't it?

31
00:01:25,810 --> 00:01:28,210
And then, you can select a color here and
it will

32
00:01:28,210 --> 00:01:32,170
bring up this nice little color picker,
woah, look at that.

33
00:01:32,170 --> 00:01:33,930
>> Am I on vacation right now.

34
00:01:33,930 --> 00:01:34,660
>> Pretty.

35
00:01:34,660 --> 00:01:35,860
>> From reality.

36
00:01:35,860 --> 00:01:38,260
>> Nifty, I, really like it.

37
00:01:38,260 --> 00:01:42,530
You can also put SVG patterns over a
random picture.

38
00:01:42,530 --> 00:01:44,870
So, just any picture at all that you like.

39
00:01:44,870 --> 00:01:48,670
You can have that picture as the, the
picture and website.

40
00:01:48,670 --> 00:01:50,700
But then you can put a specific SPG

41
00:01:50,700 --> 00:01:52,817
pattern over it so that's a really nice
feature.

42
00:01:52,817 --> 00:01:57,800
Anyway, this is a really cool project,
definitely be sure to check this one out

43
00:01:57,800 --> 00:02:02,560
adding a nice pattern background to your
website is a nice way to spruce things up.

44
00:02:02,560 --> 00:02:04,170
>> Yeah it's a nice touch.

45
00:02:04,170 --> 00:02:07,530
Next up we have a project called Domflags.

46
00:02:07,530 --> 00:02:11,690
This is a project that lets you assign a
keyboard shortcut to different

47
00:02:11,690 --> 00:02:15,410
dom elements that will pull up
automatically when you open the dev tools.

48
00:02:15,410 --> 00:02:17,680
Lets go ahead and check that out, you can
see there's

49
00:02:17,680 --> 00:02:22,100
a great description right there, create
keyboard shortcuts to dom elements.

50
00:02:22,100 --> 00:02:24,400
So, if we go ahead and look at the demo.

51
00:02:24,400 --> 00:02:27,280
First, you install the Chrome extension.

52
00:02:27,280 --> 00:02:30,340
Then you get this little DOMFLAGS panel.

53
00:02:30,340 --> 00:02:33,710
And, the elements that you can make a
shortcut to.

54
00:02:33,710 --> 00:02:36,290
So if we click on that, we can see by

55
00:02:36,290 --> 00:02:40,800
just adding this domFlag attribute, we
create a shortcut to it.

56
00:02:41,860 --> 00:02:44,060
And then, in the demo, you can toggle

57
00:02:44,060 --> 00:02:48,850
this different flag and the attribute by
clicking around.

58
00:02:48,850 --> 00:02:52,780
So, once you do all this, why in the world
would you want to do something like that?

59
00:02:52,780 --> 00:02:55,080
Well, this would be really, really useful
when you are

60
00:02:55,080 --> 00:02:58,900
developing a site and you want to check
the different styling.

61
00:02:58,900 --> 00:03:03,320
Let's say you have to keep reloading a
page to style a certain element.

62
00:03:03,320 --> 00:03:09,010
Let's go ahead and watch how fast dom
elements can be styled using this demo.

63
00:03:09,010 --> 00:03:12,340
By the way, I really like this UI pattern
of hovering over an

64
00:03:12,340 --> 00:03:17,660
image to see an animated GIF of what is
going on with the functionality.

65
00:03:17,660 --> 00:03:21,350
So, it's very, very easy to use, you just
add the domflag

66
00:03:21,350 --> 00:03:27,650
attribute to any element and then once you
open up the div tools.

67
00:03:27,650 --> 00:03:29,200
This will automatically open.

68
00:03:29,200 --> 00:03:34,840
You can set it to automatically go to the
first element with a DOM flag attribute

69
00:03:34,840 --> 00:03:39,440
or you can use this key combination right
here to inspect a flag element.

70
00:03:39,440 --> 00:03:42,640
Then, there are a couple more options, but
we're not gonna go over them here.

71
00:03:42,640 --> 00:03:46,320
Instead, you can check it out in the
shownotes at YouTube.com/go treehouse.

72
00:03:46,320 --> 00:03:48,830
Or search for us on iTunes, we're the
treehouse show.

73
00:03:48,830 --> 00:03:53,270
And make sure to check us out for 30 days
free at team treehouse dot com slash show.

74
00:03:53,270 --> 00:03:55,290
>> That's really, really cool.

75
00:03:55,290 --> 00:03:58,480
I can remember numerous times where I was
trying to navigate the dom

76
00:03:58,480 --> 00:04:01,560
tree and find a specific element I was
trying to target and work on.

77
00:04:01,560 --> 00:04:03,950
>> Yeah, right click and inspect element.

78
00:04:03,950 --> 00:04:05,870
Bye bye years of my life.

79
00:04:05,870 --> 00:04:07,860
Just kept losing it over and over again.

80
00:04:07,860 --> 00:04:09,200
So that's, that's super cool.

81
00:04:09,200 --> 00:04:11,320
>> I can sympathize with losing it over
and over again.

82
00:04:12,320 --> 00:04:15,780
>> Next up is a new browser called Breach.

83
00:04:15,780 --> 00:04:21,670
It's a browser for the HTML5 era and it's
written entirely in JavaScript.

84
00:04:21,670 --> 00:04:23,890
It's free, modular, hackable.

85
00:04:23,890 --> 00:04:25,020
Well, what does that mean.

86
00:04:26,280 --> 00:04:31,930
Modular means that everything in the
browser is in module.

87
00:04:31,930 --> 00:04:35,680
And it's basically a web app running in
it's own process.

88
00:04:35,680 --> 00:04:38,890
So, you can construct your own browsing
experience.

89
00:04:38,890 --> 00:04:42,500
It's open source, and that also means that
it's

90
00:04:42,500 --> 00:04:45,740
hackable, so if you want vertical tabs, or
some

91
00:04:45,740 --> 00:04:48,880
other UI pattern, you can write that
yourself in

92
00:04:48,880 --> 00:04:54,100
JavaScript and CSS.If you want a
customised autocomplete engine.

93
00:04:54,100 --> 00:04:56,865
>> I do
>> you can rewrite it yourself.

94
00:04:56,865 --> 00:05:00,798
[CROSSTALK] It's pretty cool and it's kind
of

95
00:05:00,798 --> 00:05:05,335
a newer concept, I haven't really seen
this before.

96
00:05:05,335 --> 00:05:09,630
There's this technology stack of HTML
JavaScript CSS.

97
00:05:09,630 --> 00:05:11,850
And then there's Chromium.

98
00:05:11,850 --> 00:05:15,510
So, you know that it is secure, and
performant.

99
00:05:15,510 --> 00:05:16,900
And then there's Node.js.

100
00:05:16,900 --> 00:05:20,470
But anyway, you can download it right now,
and

101
00:05:20,470 --> 00:05:23,180
start hacking it yourself to see how it
works.

102
00:05:23,180 --> 00:05:24,040
Very cool stuff.

103
00:05:24,040 --> 00:05:24,980
>> Yeah I think we should make a

104
00:05:24,980 --> 00:05:27,530
module that only lets you load the
Treehouse Show.

105
00:05:27,530 --> 00:05:28,380
>> That's a good idea.

106
00:05:28,380 --> 00:05:29,550
Just open a new tab.

107
00:05:29,550 --> 00:05:29,770
>> Yeah.

108
00:05:29,770 --> 00:05:31,860
>> Try to type in a web address and it's
tree house show.

109
00:05:31,860 --> 00:05:33,310
>> Goes to tree house show every time.

110
00:05:33,310 --> 00:05:36,150
Yeah, Most popular module ever.

111
00:05:36,150 --> 00:05:36,800
>> That's a good idea.

112
00:05:36,800 --> 00:05:39,690
>> Next up we have a project called Fast
Shell.

113
00:05:39,690 --> 00:05:44,650
This is an opinionated set of components
to build web sites.

114
00:05:44,650 --> 00:05:50,960
So, this is billed as a fiercely quick
front end boiler plate work flow.

115
00:05:50,960 --> 00:05:52,080
What is included?

116
00:05:52,080 --> 00:05:55,020
Well, its got the HTML5 boiler plate.

117
00:05:55,020 --> 00:05:58,350
It's got Sass and Oject-Oriented CSS or
OOCSS.

118
00:05:58,350 --> 00:05:58,850
It's

119
00:06:01,790 --> 00:06:07,670
also got Gulpjs for compiling and
concatenating your JavaScript files.

120
00:06:07,670 --> 00:06:14,190
And, it also will connect you a local
server to do live files reloads in action.

121
00:06:14,190 --> 00:06:15,690
So, what is included?

122
00:06:15,690 --> 00:06:17,550
Well, you get HTML5 framework.

123
00:06:17,550 --> 00:06:23,620
The ARIA roles for web apps and different
HTML5 semantics.

124
00:06:23,620 --> 00:06:25,280
There is just a ton of stuff in

125
00:06:25,280 --> 00:06:28,850
here, includes modernizer and the HTML5
shiv, and

126
00:06:28,850 --> 00:06:30,800
of course it runs on Gulpjs which we

127
00:06:30,800 --> 00:06:34,230
have talked about previously on the
Treehouse show.

128
00:06:34,230 --> 00:06:38,130
Anyway, this is a really great start which
is why it is a boilerplate

129
00:06:38,130 --> 00:06:41,270
for creating websites but it really takes
a lot out of doing it yourself.

130
00:06:41,270 --> 00:06:42,650
So, go ahead and check that out.

131
00:06:42,650 --> 00:06:44,650
Next time you're trying to build a
website.

132
00:06:44,650 --> 00:06:46,190
>> Very nice, well next up over on

133
00:06:46,190 --> 00:06:50,090
the Coding Horror blog about programming
in human factors.

134
00:06:50,090 --> 00:06:52,700
It's a really cool blog, definitely be
sure to check it out.

135
00:06:52,700 --> 00:06:58,180
There's a post called the just in time
theory of user behavior.

136
00:06:58,180 --> 00:07:01,500
And basically it says that the path of
least

137
00:07:01,500 --> 00:07:04,800
resistance is the path that most users
will take.

138
00:07:04,800 --> 00:07:09,480
So, encouraging the right things by making
those things intentionally easy to do is a

139
00:07:09,480 --> 00:07:12,130
good thing, and you can discourage the

140
00:07:12,130 --> 00:07:16,650
wrong things by making those things
intentionally difficult.

141
00:07:16,650 --> 00:07:18,950
>> Or you can do the opposite with dark

142
00:07:18,950 --> 00:07:21,640
user patterns like we've talked about on
previous shows.

143
00:07:21,640 --> 00:07:25,240
>> That's right, you, you could, so, you
know, let your.

144
00:07:25,240 --> 00:07:27,040
Let your conscience be your guide here.

145
00:07:27,040 --> 00:07:29,480
>> Jiminy, that's a great, great idea!

146
00:07:29,480 --> 00:07:34,550
>> But basically, it says that users will
take the path of least resistance.

147
00:07:34,550 --> 00:07:39,320
So, if you have throw a big manual
upfront, they're not gonna read it.

148
00:07:39,320 --> 00:07:41,600
And actually, I thought this was
interesting.

149
00:07:41,600 --> 00:07:43,790
It says, the bad news about this is that.

150
00:07:43,790 --> 00:07:47,260
Clippy, the paperclip was right.

151
00:07:47,260 --> 00:07:49,820
So what, what does that mean?

152
00:07:49,820 --> 00:07:54,990
Well, basically the just in time pattern
is saying that

153
00:07:54,990 --> 00:07:59,880
you should deliver information right when
the user should need it.

154
00:07:59,880 --> 00:08:04,000
So, in this example, the user is typing
up.

155
00:08:04,000 --> 00:08:09,880
A comment and it's basically giving
instruction about that

156
00:08:09,880 --> 00:08:13,980
particular action that they're taking
right as they're taking it.

157
00:08:13,980 --> 00:08:17,530
So, instead of having to read a whole
bunch of stuff and learn

158
00:08:17,530 --> 00:08:21,230
how something works you can just start
using it and learn as you go.

159
00:08:21,230 --> 00:08:22,670
I think this is a.

160
00:08:22,670 --> 00:08:25,590
Really good idea and really solidifies a
lot of ideas

161
00:08:25,590 --> 00:08:29,090
I've had myself but to articulate some
really really well.

162
00:08:29,090 --> 00:08:32,200
>> Yeah, nd little bit of an expansion on
the whole blank slate pattern.

163
00:08:32,200 --> 00:08:36,190
>> Yes, yes definitely useful in the blank
slate.

164
00:08:36,190 --> 00:08:39,000
>> Well, its about well, we have time for
today Nick who are you in Twitter?

165
00:08:39,000 --> 00:08:39,872
>> I am @nickrp.

166
00:08:39,872 --> 00:08:41,080
>> And I am @JSeifer.

167
00:08:41,080 --> 00:08:42,500
For more information on anything we talked

168
00:08:42,500 --> 00:08:45,620
about, check out our show notes on
youtube.com/gotreehouse.

169
00:08:45,620 --> 00:08:49,590
You can also search for us on iTunes, We
are the Treehouse Show.

170
00:08:49,590 --> 00:08:51,220
>> And of course, if you like to see

171
00:08:51,220 --> 00:08:54,490
more videos like this one about web
design, web development,

172
00:08:54,490 --> 00:08:57,500
mobile, business, and so much more, be
sure to

173
00:08:57,500 --> 00:09:02,760
sign up for a free 30 day trial at
teamtreehouse.com/show.

174
00:09:02,760 --> 00:09:05,830
Thank you so much for watching and we will
see you next week.

175
00:09:05,830 --> 00:09:12,724
>> [SOUND]