1
00:00:00,740 --> 00:00:01,540
I'm Nick Pettit.

2
00:00:01,540 --> 00:00:02,490
>> I'm Jason Seifer.

3
00:00:02,490 --> 00:00:04,060
>> And you're watching The Treehouse Show.

4
00:00:04,060 --> 00:00:05,600
Your weekly dose of Internets where we
talk

5
00:00:05,600 --> 00:00:08,290
about all things web design, web
development, and more.

6
00:00:08,290 --> 00:00:10,080
>> For a free months trial of

7
00:00:10,080 --> 00:00:13,890
Treehouse join Nick and I over at
teemtreehouse.com/show.

8
00:00:13,890 --> 00:00:16,080
In this episode of the Treehouse Show,
we'll be

9
00:00:16,080 --> 00:00:22,040
talking about practical typography, date
pickers, form builders, and more.

10
00:00:22,040 --> 00:00:22,878
>> Let's check it out.

11
00:00:22,878 --> 00:00:28,014
[MUSIC]

12
00:00:28,014 --> 00:00:32,680
First up, is this wonderful practical
typography guide.

13
00:00:32,680 --> 00:00:39,750
It's really, really extensive and you can
purchase it if you find it useful.

14
00:00:39,750 --> 00:00:42,240
So, how to pay for this book?

15
00:00:42,240 --> 00:00:45,170
Of course, it is available for free right
here on the web.

16
00:00:45,170 --> 00:00:46,510
>> But, we are not sponsoring the show.

17
00:00:46,510 --> 00:00:48,090
We should make that known.

18
00:00:48,090 --> 00:00:49,180
>> It, they are not.

19
00:00:49,180 --> 00:00:53,005
But it is really, really cool, incredibly.

20
00:00:53,005 --> 00:00:54,250
In-depth here.

21
00:00:54,250 --> 00:00:57,510
I'm just gonna click on apostrophes here
cause

22
00:00:57,510 --> 00:01:00,280
I learned something in here I did not
know.

23
00:01:00,280 --> 00:01:05,150
So first off, you usually are using a
single

24
00:01:05,150 --> 00:01:10,630
straight quote if you're just copying and
pasting from a plain text source or just

25
00:01:10,630 --> 00:01:15,280
typing in, in to, say a text editor when
in fact, oftentimes

26
00:01:15,280 --> 00:01:19,560
you probably mean to use an apostrophe
which is a different character.

27
00:01:19,560 --> 00:01:26,600
So, they have a couple examples here of
what is wrong and what is right, and

28
00:01:26,600 --> 00:01:30,500
how to use apostrophes properly because
sometimes you

29
00:01:30,500 --> 00:01:34,080
want them to face one way or another.

30
00:01:34,080 --> 00:01:35,270
>> TIL.

31
00:01:35,270 --> 00:01:37,790
>> Something, I did not know is

32
00:01:37,790 --> 00:01:41,030
that if you're using Hawaiian spellings of
Hawaiian

33
00:01:41,030 --> 00:01:44,990
words, you actually are not using
apostrophe

34
00:01:44,990 --> 00:01:48,070
is, they, I believe, they are called
okinas.

35
00:01:48,070 --> 00:01:51,760
I am not quite sure how to say that word,
but it's

36
00:01:51,760 --> 00:01:56,910
actually a different character and you
want them to be pointing upwards.

37
00:01:56,910 --> 00:01:59,590
Anyway, that's just one example of the
kind of depth

38
00:01:59,590 --> 00:02:04,350
that this particular e-book, I guess I
should say, goes into.

39
00:02:04,350 --> 00:02:09,750
And it's just really pretty amazing, a lot
of stuff in here I did not know myself.

40
00:02:09,750 --> 00:02:11,715
>> That's really cool, and very practical.

41
00:02:11,715 --> 00:02:12,540
>> Mm-hm.

42
00:02:12,540 --> 00:02:14,930
>> It's way better than the impractical
typography book.

43
00:02:14,930 --> 00:02:16,410
>> I know, that one
>> Yeah.

44
00:02:16,410 --> 00:02:17,280
>> It's useless.

45
00:02:17,280 --> 00:02:18,260
>> If one needed a sequel.

46
00:02:19,630 --> 00:02:21,500
Next up, we have a project called

47
00:02:21,500 --> 00:02:26,230
Shoelace, which is a visual bootstrap
builder.

48
00:02:26,230 --> 00:02:26,980
What does that mean?

49
00:02:26,980 --> 00:02:28,800
Well, let's go ahead and check it out.

50
00:02:28,800 --> 00:02:33,370
So, you'll notice on the left side of the
screen here, we have different devices.

51
00:02:33,370 --> 00:02:37,140
Phone, tablet, desktop and large desktop.

52
00:02:37,140 --> 00:02:40,000
And then over on the right here, we have
some

53
00:02:40,000 --> 00:02:45,430
HTML and in the middle is a box and a
grid.

54
00:02:45,430 --> 00:02:51,120
Now, if I click inside of this box, and
then start dragging my mouse,

55
00:02:51,120 --> 00:02:56,710
I can name this row we'll name it nick,
and now I have columns.

56
00:02:56,710 --> 00:03:03,021
And as I re-size this column, it gives me
the different boot strap class that

57
00:03:03,021 --> 00:03:09,136
is associated with that column and then
over on the left side of the screen it

58
00:03:09,136 --> 00:03:15,349
displays what this would look like, now I
can go ahead and add another column

59
00:03:15,349 --> 00:03:21,111
so we'll do four and three and one and now
I have a three column layout.

60
00:03:21,111 --> 00:03:23,203
[BLANK_AUDIO]

61
00:03:23,203 --> 00:03:26,740
And now I have a free column layout.

62
00:03:26,740 --> 00:03:28,850
And I can of course adjust these different

63
00:03:28,850 --> 00:03:33,500
columns and then go ahead and create more
rows.

64
00:03:33,500 --> 00:03:34,860
And repeat that process.

65
00:03:34,860 --> 00:03:40,740
Now, as I do that it gives me the
generated HTML over on this side.

66
00:03:40,740 --> 00:03:42,670
Do it with a class of row and deal with

67
00:03:42,670 --> 00:03:45,550
a class of row adjacent, and it gives me
the HTML.

68
00:03:45,550 --> 00:03:46,960
Or if I'm using.

69
00:03:46,960 --> 00:03:50,350
Jade templates, that works as well, and if
I want to,

70
00:03:50,350 --> 00:03:54,450
it will even give me the Lex mix-in to
generate this code.

71
00:03:54,450 --> 00:03:57,310
Now you can copy all this and paste it
inside of

72
00:03:57,310 --> 00:04:01,530
your editor of choice and boom, you are
good to go.

73
00:04:01,530 --> 00:04:01,890
>> Wow.

74
00:04:01,890 --> 00:04:04,688
Shoelace, they are really tying up the
loose ends here.

75
00:04:04,688 --> 00:04:09,900
Really you know.

76
00:04:09,900 --> 00:04:12,810
>> Was that tongue in cheek?

77
00:04:12,810 --> 00:04:14,860
>> It makes sense that this would be for
boot strap.

78
00:04:14,860 --> 00:04:18,669
>> I don't know I think I lost a little
bit of my soul when I heard those jokes.

79
00:04:21,570 --> 00:04:23,360
>> Next up, is a really cool

80
00:04:23,360 --> 00:04:27,740
blog post called Creating Distraction
Free-Reading Experiences.

81
00:04:27,740 --> 00:04:30,730
Definitely not a disc, distraction-free
show today.

82
00:04:30,730 --> 00:04:31,910
>> Yes.

83
00:04:31,910 --> 00:04:34,620
>> Basically it's an article about how to

84
00:04:34,620 --> 00:04:37,410
create blog posts that look exactly like
this one.

85
00:04:37,410 --> 00:04:38,170
No, I'm just kidding.

86
00:04:38,170 --> 00:04:43,000
But this is a good example of a
distraction free reading experiencer.

87
00:04:43,000 --> 00:04:47,440
And some of the best practices that they
describe.

88
00:04:47,440 --> 00:04:49,830
So for examples you don't want to have

89
00:04:49,830 --> 00:04:52,770
embedded flappy bird right on your blog
post, because.

90
00:04:52,770 --> 00:04:53,010
You know

91
00:04:53,010 --> 00:04:55,930
>> Oh I wish you could play flappy bird
instead of finishing reading this article.

92
00:04:55,930 --> 00:04:59,720
>> I just want to sign up for bank of
America right now, look at that huh.

93
00:04:59,720 --> 00:05:00,660
Wow, okay!

94
00:05:00,660 --> 00:05:04,500
But basically, it's just an article, or
it's

95
00:05:04,500 --> 00:05:09,230
basically describing how Floppy Bird is
all about focus.

96
00:05:09,230 --> 00:05:13,990
And you wanna make sure you are focusing
on the bird and not necessarily.

97
00:05:13,990 --> 00:05:15,850
Your score up at the top.

98
00:05:15,850 --> 00:05:18,160
>> I always focus on the score, maybe
that's my problem.

99
00:05:18,160 --> 00:05:20,850
>> They also bring up the practical
typography

100
00:05:20,850 --> 00:05:24,020
guide we just talked about so that's
definitely a

101
00:05:24,020 --> 00:05:28,230
useful resource in creating a distraction
free reading

102
00:05:28,230 --> 00:05:32,779
experience but one thing, that's actual
substance here is.

103
00:05:34,110 --> 00:05:41,030
Something I really liked and it says try
not to use skeuomorphic metaphors such as

104
00:05:41,030 --> 00:05:47,050
a book, so like iBooks on the iPad has
this page flipping

105
00:05:47,050 --> 00:05:51,340
mechanism that tries to make it feel and
look like a real book,

106
00:05:51,340 --> 00:05:56,680
but in reality that's kind of just a
distraction that breaks up the pages.

107
00:05:56,680 --> 00:06:02,080
Arbitrarily into, well, pages and since
iBook has been

108
00:06:02,080 --> 00:06:05,710
released, Apple has actually come out with
a reading mode

109
00:06:05,710 --> 00:06:09,860
where you can just scroll through the
content and that's

110
00:06:09,860 --> 00:06:12,860
actually a lot more conducive to reading
and I think.

111
00:06:12,860 --> 00:06:17,290
In summary, the article well, sums it up
really nicely and says if you

112
00:06:17,290 --> 00:06:19,480
want people to experience your content
like

113
00:06:19,480 --> 00:06:22,430
a physical book, well, go print a book.

114
00:06:22,430 --> 00:06:25,090
Anyway, it's a really cool article.

115
00:06:25,090 --> 00:06:28,520
They also go into fixed position elements,
and

116
00:06:28,520 --> 00:06:31,600
side bars, and it just describes how to
kind

117
00:06:31,600 --> 00:06:34,250
of break down a website, get rid of all

118
00:06:34,250 --> 00:06:37,170
the elements that are gonna distract
somebody from just.

119
00:06:37,170 --> 00:06:39,850
Reading the content and enjoying the
website.

120
00:06:39,850 --> 00:06:43,470
>> All I got out of that was that I need
to increase my flappy bird score.

121
00:06:43,470 --> 00:06:46,160
>> Hey, I mean, that's as good as
swimming.

122
00:06:46,160 --> 00:06:47,090
>> Yeah, when in Rome.

123
00:06:48,200 --> 00:06:50,740
Speaking of Rome is our next project.

124
00:06:50,740 --> 00:06:54,000
This is a dependency free opt in UI.

125
00:06:54,000 --> 00:06:57,160
For a date and time picker,
dependency-free means

126
00:06:57,160 --> 00:07:00,480
you do not need jQuery or anything like
that.

127
00:07:00,480 --> 00:07:03,100
Let's go ahead, let's click in this box
and pick a date and time.

128
00:07:03,100 --> 00:07:04,440
Wow, look at that.

129
00:07:04,440 --> 00:07:05,610
>> What just happened?

130
00:07:05,610 --> 00:07:09,100
>> This, the future just happened, right
now, right here.

131
00:07:09,100 --> 00:07:10,880
>> Literally we're going into the future.

132
00:07:10,880 --> 00:07:15,430
It is not July first at, actually probably
is by the time people are watching.

133
00:07:15,430 --> 00:07:16,450
>> Yeah, look at this.

134
00:07:16,450 --> 00:07:17,030
Here we go.

135
00:07:17,030 --> 00:07:18,440
The future is now.

136
00:07:18,440 --> 00:07:18,960
>> Wow.

137
00:07:18,960 --> 00:07:21,610
>> You can tell it when to start the
weeks.

138
00:07:21,610 --> 00:07:23,930
Oh look, I dont' want my weeks to start on
Sunday.

139
00:07:23,930 --> 00:07:27,730
I want my weeks to start on Monday and end
on Wednesday.

140
00:07:27,730 --> 00:07:29,000
>> What about on funday?

141
00:07:29,000 --> 00:07:31,300
Do that have an option to add for days?

142
00:07:31,300 --> 00:07:33,690
>> no, that's actually integrated with
Sunday.

143
00:07:34,800 --> 00:07:35,130
>> Hm.

144
00:07:35,130 --> 00:07:36,810
>> Usually, in the form of a hash tag.

145
00:07:36,810 --> 00:07:38,180
>> I see.

146
00:07:38,180 --> 00:07:40,240
>> so, next we have Pick a Date.

147
00:07:40,240 --> 00:07:42,640
You can also pick a time, if you want to.

148
00:07:42,640 --> 00:07:45,460
I like this little, little time drop down
right there.

149
00:07:45,460 --> 00:07:46,330
Boom, done.

150
00:07:46,330 --> 00:07:49,920
You can remove and restore, roam at will,
roam of

151
00:07:49,920 --> 00:07:53,950
course being the name of this plugin, and
not the place.

152
00:07:53,950 --> 00:07:55,460
On the planet.

153
00:07:55,460 --> 00:07:57,130
Anyway, ton of different options.

154
00:07:57,130 --> 00:07:59,840
And like I said this is completely
dependency free.

155
00:07:59,840 --> 00:08:01,940
It's actually a pretty small plugin too so
if you

156
00:08:01,940 --> 00:08:04,530
need to implement a date and time picker
on your website.

157
00:08:04,530 --> 00:08:05,940
Go ahead and check out Rome.

158
00:08:06,990 --> 00:08:07,830
>> Very nice.

159
00:08:07,830 --> 00:08:13,130
Well neck up is pure CSS, one div, weather
animated icons.

160
00:08:13,130 --> 00:08:15,390
I know that because it says it right here
on.

161
00:08:15,390 --> 00:08:19,020
The website here are a bunch of animated
weather icons,

162
00:08:19,020 --> 00:08:21,560
so if you're building a weather app, bam,
this is-

163
00:08:21,560 --> 00:08:21,960
>> You're done.

164
00:08:21,960 --> 00:08:22,960
>> Perfect for you.

165
00:08:22,960 --> 00:08:23,890
Yep, it's all done.

166
00:08:23,890 --> 00:08:27,130
Here is your seven day forecast.

167
00:08:27,130 --> 00:08:30,835
Look like, looks like there's gonna be
nighttime right there on the fifth day.

168
00:08:30,835 --> 00:08:31,340
>> [LAUGH]

169
00:08:31,340 --> 00:08:34,200
>> And, and that's gonna be preceded by a
rainbow.

170
00:08:34,200 --> 00:08:37,300
So that's, that's all really good
information to know.

171
00:08:37,300 --> 00:08:40,350
>> Cannot wait until Thursday, rainbow
day.

172
00:08:40,350 --> 00:08:44,220
>> This is, on Code Pen, so you can click
edit

173
00:08:44,220 --> 00:08:47,510
pen in lower right corner and see how this
all works.

174
00:08:47,510 --> 00:08:51,760
Now, whether or not this is totally
practical, do you see what I did there?

175
00:08:51,760 --> 00:08:53,900
Whether or not.

176
00:08:54,950 --> 00:08:59,620
It, it's still pretty useful to learn
from, so...

177
00:08:59,620 --> 00:09:05,960
Here are those single divs, so that's
exactly all the markup that

178
00:09:05,960 --> 00:09:08,960
is present, so there's just one div for
each one of those.

179
00:09:08,960 --> 00:09:10,460
Woah, how are they doing that?

180
00:09:10,460 --> 00:09:10,610
>> Yeah.

181
00:09:10,610 --> 00:09:10,950
>> Well.

182
00:09:10,950 --> 00:09:12,438
>> My forecast, impressed.

183
00:09:12,438 --> 00:09:18,390
>> I [LAUGH].

184
00:09:18,390 --> 00:09:21,900
So there's just one div for each one of
these and how are they doing that?

185
00:09:21,900 --> 00:09:28,670
Well for each one, I was guessing that
they were using box shadows

186
00:09:28,670 --> 00:09:34,980
and it looks like that that is indeed what
they're doing for some of these.

187
00:09:34,980 --> 00:09:41,040
So, here is the sunny one and they are
using a box shadow right there

188
00:09:41,040 --> 00:09:43,770
but actually it's mostly just gradients
and

189
00:09:43,770 --> 00:09:46,990
then they animate each one of these
elements.

190
00:09:46,990 --> 00:09:50,580
So, they just rotate and do a 360 degrees.

191
00:09:50,580 --> 00:09:53,080
There is the key frames right there.

192
00:09:53,080 --> 00:09:55,870
However for cloudy, here we go.

193
00:09:55,870 --> 00:09:59,010
You have a bunch of box shadows right
here.

194
00:09:59,010 --> 00:10:04,720
And that's what makes those raindrops up
here, so that's pretty cool.

195
00:10:04,720 --> 00:10:08,360
And oh, actually I meant for raining,
there we go.

196
00:10:08,360 --> 00:10:09,760
Any way, you've got the idea.

197
00:10:09,760 --> 00:10:13,720
It's basically all done with a little bit
of fancy CSS

198
00:10:13,720 --> 00:10:18,260
and some animations, and it's definitely
really useful foe learning purposes.

199
00:10:18,260 --> 00:10:20,600
So, if you wanna see how this works.

200
00:10:20,600 --> 00:10:21,920
It's all, all on code pens.

201
00:10:21,920 --> 00:10:25,300
So, you can go ahead and just kinda break
away each individual

202
00:10:25,300 --> 00:10:29,160
part and see what happens when you remove
it or add stuff.

203
00:10:29,160 --> 00:10:31,100
>> That's amazing.

204
00:10:31,100 --> 00:10:31,500
>> Cool.

205
00:10:31,500 --> 00:10:31,790
Well-

206
00:10:31,790 --> 00:10:32,500
>> I like it.

207
00:10:32,500 --> 00:10:34,600
>> That is all we have time for, this
week.

208
00:10:34,600 --> 00:10:35,900
I am @nickrp on Twitter.

209
00:10:35,900 --> 00:10:36,970
>> Yeah, I am @jseifer.

210
00:10:36,970 --> 00:10:38,830
For, for more information on anything we
talked about,

211
00:10:38,830 --> 00:10:43,060
make sure to check out our show notes at
YouTube.com/gotreehouse.

212
00:10:43,060 --> 00:10:44,770
And also search of us on iTunes.

213
00:10:44,770 --> 00:10:46,080
We are the treehouse show.

214
00:10:46,080 --> 00:10:48,740
>> And of course, if you like to see more
videos like

215
00:10:48,740 --> 00:10:50,700
this one, about web design, web

216
00:10:50,700 --> 00:10:53,890
development, mobile business and so much
more.

217
00:10:53,890 --> 00:10:59,370
Be sure to check us out at
teamtreehouse.com/show for a free month.

218
00:10:59,370 --> 00:11:00,770
Thank you so much for watching.

219
00:11:00,770 --> 00:11:02,216
And we will see you next week.

220
00:11:02,216 --> 00:11:02,693
[NOISE]

221
00:11:02,693 --> 00:11:08,909
[MUSIC]