1
00:00:00,490 --> 00:00:02,300
I'm Nick Pettit.
>> I'm Jason Seifer.

2
00:00:02,300 --> 00:00:05,080
>> And you're watching the Treehouse
Show, your weekly dose of internets

3
00:00:05,080 --> 00:00:08,240
where we talk about all things web design,
web development, and more.

4
00:00:08,240 --> 00:00:09,870
>> In this episode, we'll be talking
about

5
00:00:09,870 --> 00:00:15,660
sandboxed iFrames, the Progress element,
responsible screenshots, and more.

6
00:00:15,660 --> 00:00:16,979
>> Let's check it out.

7
00:00:16,979 --> 00:00:22,081
[MUSIC]

8
00:00:22,081 --> 00:00:25,209
>> First up is sandboxed iframes, which
is

9
00:00:25,209 --> 00:00:28,493
a blog post over on the HTML5 Rocks blog.

10
00:00:28,493 --> 00:00:31,780
It's called, Play safely in sandboxed
IFrames.

11
00:00:31,780 --> 00:00:38,970
The article is actually from January of
2013, but it's still pretty fascinating.

12
00:00:38,970 --> 00:00:42,510
Basically, iframes allow you to embed
other web pages

13
00:00:42,510 --> 00:00:46,360
into a web page in a frame, or an iframe.

14
00:00:46,360 --> 00:00:47,460
So you can put

15
00:00:47,460 --> 00:00:49,640
this wherever you want on the page.

16
00:00:49,640 --> 00:00:55,030
But the problem is that iframes can do
things like alerts

17
00:00:55,030 --> 00:01:00,670
or geolocation requests, basically
anything that a normal webpage can do.

18
00:01:00,670 --> 00:01:06,050
The sandbox mode allows you to basically
put a stop to anything that

19
00:01:06,050 --> 00:01:10,330
might be intrusive to the page that the
iframe is being embedded on.

20
00:01:10,330 --> 00:01:13,780
So, through a set of attributes,

21
00:01:13,780 --> 00:01:16,400
you can use, well, through a set of values
on

22
00:01:16,400 --> 00:01:20,950
the sandbox attribute, you can turn
certain things on and off.

23
00:01:20,950 --> 00:01:25,860
So, for example, you could allow or
disallow form submissions.

24
00:01:25,860 --> 00:01:29,790
You could allow or disallow pop-ups and so
on.

25
00:01:29,790 --> 00:01:36,670
So if you have a website with a lot of
iframes, this is pretty handy.

26
00:01:36,670 --> 00:01:38,930
>> Lot a, lot of geologic

27
00:01:38,930 --> 00:01:39,970
references in there.

28
00:01:39,970 --> 00:01:45,320
HTML rocks, sandbox, lots, lots of stuff
going on there.

29
00:01:45,320 --> 00:01:48,190
Next up, we have a project called Angular
Translate.

30
00:01:48,190 --> 00:01:50,680
If you're using Angular JS and you need to

31
00:01:50,680 --> 00:01:55,640
internationalize your application, this
plug-in is the way to go.

32
00:01:55,640 --> 00:01:58,260
Now it is super simple to use, as you
would expect

33
00:01:58,260 --> 00:02:01,900
from basically everything we cover on
here, here's how it works.

34
00:02:01,900 --> 00:02:04,170
Let's say you have a different

35
00:02:04,170 --> 00:02:07,800
translation and different blocks of text
that need to be translated.

36
00:02:07,800 --> 00:02:12,960
So you can see on the right here it says,
Hello this is a paragraph, and over on

37
00:02:12,960 --> 00:02:18,640
the left is the code to translate it from
English and German.

38
00:02:18,640 --> 00:02:23,360
So you can see right here, Hello this is
the paragraph, English and German and boom

39
00:02:23,360 --> 00:02:29,180
we can go back and forth extremely easily.
Now there is a wonderful API that you

40
00:02:29,180 --> 00:02:33,740
can use to go through and put all these
translations in place.

41
00:02:33,740 --> 00:02:37,800
And it's already in use quite a bit by a
bunch of different companies.

42
00:02:37,800 --> 00:02:41,430
Seems like a really great project, so if
you do need to internationalize

43
00:02:41,430 --> 00:02:44,820
the front end side of your application, go
ahead and check this out.

44
00:02:44,820 --> 00:02:45,330
>> Hm.

45
00:02:45,330 --> 00:02:49,110
I don't think that was a paragraph, it
looked more like a sentence to me.

46
00:02:49,110 --> 00:02:51,950
I don't think that word means what they
think it means.

47
00:02:51,950 --> 00:02:54,140
>> Well, a sentence can be part of a
paragraph.

48
00:02:54,140 --> 00:02:54,360
>> I

49
00:02:54,360 --> 00:02:56,810
think they need to use Hemingway.
No, for sure.

50
00:02:56,810 --> 00:02:58,590
>> Oh, we talked about that on the last
treehouse show.

51
00:02:58,590 --> 00:03:01,200
You should catch up if you haven't.
>> Hm.

52
00:03:01,200 --> 00:03:05,510
Next up is this really cool website.
I'm going to butcher this pronunciation.

53
00:03:05,510 --> 00:03:07,290
It's called.
Liquidapsive?

54
00:03:09,390 --> 00:03:11,880
>> Liquidapsive.
>> Thank you, Jason.

55
00:03:11,880 --> 00:03:14,680
I don't know where I'd be without you.

56
00:03:14,680 --> 00:03:14,980
Probably...

57
00:03:14,980 --> 00:03:17,950
>> Probably in the same place, but
alone.

58
00:03:17,950 --> 00:03:18,720
>> And cold.

59
00:03:18,720 --> 00:03:21,000
>> Yeah, dead inside.

60
00:03:21,000 --> 00:03:22,710
>> This site allows you to tell the

61
00:03:22,710 --> 00:03:26,910
difference between adaptive, liquid,
responsive, and static layouts.

62
00:03:26,910 --> 00:03:29,370
So, I've come out of full screen here.

63
00:03:29,370 --> 00:03:33,330
And If I click on Static, the layout will
change.

64
00:03:33,330 --> 00:03:34,530
And if I re-size

65
00:03:34,530 --> 00:03:39,740
my browser window, it will show you what a
Static layout looks like.

66
00:03:39,740 --> 00:03:42,230
It doesn't change at all when you re-size

67
00:03:42,230 --> 00:03:46,740
the browser because it's using explicit
pixel values.

68
00:03:46,740 --> 00:03:50,900
Now, if I change it over to Responsive,
that's a little

69
00:03:50,900 --> 00:03:54,000
bit more typical of what you would expect
of a modern website.

70
00:03:54,000 --> 00:04:00,110
The layout uses media queries to adjust
itself as it is

71
00:04:00,110 --> 00:04:01,000
being resized.

72
00:04:01,000 --> 00:04:03,610
>> Wow, I'm gettin' motion sickness
watching that.

73
00:04:03,610 --> 00:04:05,820
>> You can also check out Adaptive and

74
00:04:05,820 --> 00:04:09,810
Liquid, which are a little bit more
confusing.

75
00:04:09,810 --> 00:04:12,330
Responsive and Static are pretty well
known.

76
00:04:12,330 --> 00:04:16,170
A liquid layout doesn't change as the
browser resizes.

77
00:04:16,170 --> 00:04:19,520
It just adjust based on percentage widths.

78
00:04:19,520 --> 00:04:25,210
So it's a little bit better than Static
but not quite as good as Responsive.

79
00:04:25,210 --> 00:04:28,840
In fact responsive layouts are actually
liquid

80
00:04:28,840 --> 00:04:32,160
layouts with the addition of media
queries.

81
00:04:32,160 --> 00:04:38,260
So as you can see, it changes when it hits
a certain media query breakpoint.

82
00:04:38,260 --> 00:04:42,770
There's also Adaptive, so I'll resize that
to show you what that looks like.

83
00:04:42,770 --> 00:04:47,580
Rather than using any kind of percentage
widths, it uses pixel widths.

84
00:04:47,580 --> 00:04:50,480
But, it does still use the media queries
that

85
00:04:50,480 --> 00:04:53,740
a responsive layout uses.
So, very cool website.

86
00:04:53,740 --> 00:04:56,780
Helps demonstrate the difference between
all these different terms.

87
00:04:56,780 --> 00:05:00,110
Definitely be sure to check it out if you
are new to web design.

88
00:05:00,110 --> 00:05:05,060
>> Yeah, and feel free to tweet us your
pronunciation of the name Liquidapsive.

89
00:05:05,060 --> 00:05:07,810
Don't, don't let our pronunciation knock
you off.

90
00:05:07,810 --> 00:05:11,090
Next up, we have a project called Pageres.

91
00:05:11,090 --> 00:05:15,730
This is a really interesting command line
tool for generating screen shots of

92
00:05:15,730 --> 00:05:18,380
different resolutions of a webpage.

93
00:05:18,380 --> 00:05:22,090
Now, super easy to use, you can, you can
command right here pageres,

94
00:05:22,090 --> 00:05:26,820
then you give it your URLs and the
different sizes that you want.

95
00:05:26,820 --> 00:05:29,250
Now, this works as a command line app.

96
00:05:29,250 --> 00:05:34,820
On the back end it uses Phantom JS to
generate these different screen shots.

97
00:05:34,820 --> 00:05:37,720
Now, something that's super cool about
this is they

98
00:05:37,720 --> 00:05:41,180
give you instructions for using it with
Google Analytics.

99
00:05:41,180 --> 00:05:43,850
So, what you can actually do is, if you

100
00:05:43,850 --> 00:05:47,190
have a website in your Google Analytics
account, and you're

101
00:05:47,190 --> 00:05:51,340
wondering what different resolutions
access your site, and what

102
00:05:51,340 --> 00:05:55,060
it looks like, you can export that from
Google Analytics.

103
00:05:55,060 --> 00:05:56,710
And then they have a quick little command

104
00:05:56,710 --> 00:05:59,336
line shortcut to import that Pageres, take
a

105
00:05:59,336 --> 00:06:01,572
picture of your site, using all of the

106
00:06:01,572 --> 00:06:05,410
common different resolutions that are
already using your site.

107
00:06:05,410 --> 00:06:06,470
So, really cool tool,

108
00:06:06,470 --> 00:06:08,195
you can check it out in the show notes at

109
00:06:08,195 --> 00:06:13,040
youtube.com/gotreehouse or search for us
in iTunes at The Treehouse Show.

110
00:06:14,230 --> 00:06:18,860
>> Next up is Progress.js, we're making
a little progress through the show.

111
00:06:18,860 --> 00:06:23,090
>> I wish we were making a little more
progress in our personal lives.

112
00:06:23,090 --> 00:06:26,290
>> If I refresh the page here, you can
see what Progress JS

113
00:06:26,290 --> 00:06:31,460
looks like, it kind of made a loading bar
across the entire screen.

114
00:06:31,460 --> 00:06:31,610
If

115
00:06:31,610 --> 00:06:33,460
I scroll down here, here's a couple more

116
00:06:33,460 --> 00:06:37,240
examples so it loaded in these picture
from Pinterest.

117
00:06:37,240 --> 00:06:38,359
Pretty Pinteresting there.

118
00:06:38,359 --> 00:06:38,710
>> Ooh.

119
00:06:38,710 --> 00:06:44,050
>> Can hit the Replay Demo as many
times as you want, it's totally free.

120
00:06:45,140 --> 00:06:49,470
Here is an input form.
Which demonstrates how ProgressJs can

121
00:06:49,470 --> 00:06:56,520
improve the user's experience of forms.
So if I start typing something in,

122
00:06:56,520 --> 00:06:59,260
it will auto save and it shows you a
little progress bar

123
00:06:59,260 --> 00:07:02,480
right above the form, to show you what
that might look like.

124
00:07:02,480 --> 00:07:04,260
Same thing for text areas.

125
00:07:04,260 --> 00:07:09,460
So how does it work?
Well it uses HTML and CSS.

126
00:07:09,460 --> 00:07:13,260
You can basically generate the progress
bars with the HTML

127
00:07:13,260 --> 00:07:17,320
and then you can style them however you
want with CSS.

128
00:07:17,320 --> 00:07:20,940
So this is a JavaScript project obviously,
Projess.js.

129
00:07:20,940 --> 00:07:22,410
And you

130
00:07:22,410 --> 00:07:24,460
can go ahead and download it and include
it on

131
00:07:24,460 --> 00:07:27,490
your site if you need to make some
progress bars.

132
00:07:27,490 --> 00:07:28,251
>> Oh it's very nice.

133
00:07:28,251 --> 00:07:30,100
It's just like Youtube, that little
progress bar

134
00:07:30,100 --> 00:07:31,430
that loads at the top of the screen.

135
00:07:31,430 --> 00:07:31,654
>> Mm-hm.

136
00:07:31,654 --> 00:07:32,880
>> Dig it.

137
00:07:32,880 --> 00:07:38,480
Speaking of digging it, there's a project
called Dug.JS which we're covering next.

138
00:07:38,480 --> 00:07:42,660
This is a JSONP to HTML script.

139
00:07:42,660 --> 00:07:45,580
Now if you are doing any requests or
working

140
00:07:45,580 --> 00:07:47,540
with JSONP at all, it can be a little

141
00:07:47,540 --> 00:07:48,690
bit difficult to do.

142
00:07:48,690 --> 00:07:52,260
So the reason that we use JSONP is let's
say you have a website

143
00:07:52,260 --> 00:07:57,940
and you wanna access somebody else's API
and use the JSON on your own site.

144
00:07:57,940 --> 00:08:02,280
Well due to the same origin policy of web
browsers you can't do that, so you have

145
00:08:02,280 --> 00:08:05,120
to use something called JSONP, which wraps
that

146
00:08:05,120 --> 00:08:07,930
JSON in an anonymous function that you
send in.

147
00:08:07,930 --> 00:08:12,740
Now this project, Dug.JS will let you very
easily take that JSON

148
00:08:12,740 --> 00:08:16,830
that you get back, from a JSONP source,
and wrap it in some HTML.

149
00:08:16,830 --> 00:08:18,830
So all you have to do, you can see

150
00:08:18,830 --> 00:08:21,420
this script tag right here, you call this
dug method,

151
00:08:21,420 --> 00:08:24,900
you give it the endpoint And then inside
this template,

152
00:08:24,900 --> 00:08:28,950
key is a little string that is an HTML
template.

153
00:08:28,950 --> 00:08:33,960
Now, you have some options for iterating
through, this is the Dribbble API, so

154
00:08:33,960 --> 00:08:37,670
it gives you an array of shots, so it'll
iterate through the shots right here,

155
00:08:37,670 --> 00:08:43,260
and then put the images right there in
that image400 URL.

156
00:08:43,260 --> 00:08:46,740
So you can break up your template into
multiple lines, and here

157
00:08:46,740 --> 00:08:50,120
is a demo of the code running right on the
page right there.

158
00:08:50,120 --> 00:08:51,510
Wow.

159
00:08:51,510 --> 00:08:55,110
So as you expect, it supports a bunch of
different parameters.

160
00:08:55,110 --> 00:08:57,720
It's very, very easy to use, you can
download it right now.

161
00:08:57,720 --> 00:08:58,520
Pretty cool project.

162
00:08:59,590 --> 00:09:02,260
I dig it.
>> Dug it.

163
00:09:03,540 --> 00:09:10,210
Next up is Grid, which is a simple guide
to responsive design, made by Adam Kaplan.

164
00:09:10,210 --> 00:09:12,800
Look at that, I know that because his name
is right there.

165
00:09:12,800 --> 00:09:13,850
Very convenient, Adam.

166
00:09:13,850 --> 00:09:17,610
>> I thought his name was Grid?
>> [LAUGH] If we scroll down, you can

167
00:09:17,610 --> 00:09:23,660
see it's just exactly what it says on the
tin, Why bother with responsive?

168
00:09:23,660 --> 00:09:29,280
Well, it tells you why you should bother
with Responsive, because it's

169
00:09:29,280 --> 00:09:33,165
the year 2014, and there's a lot of mobile
devices out there.

170
00:09:33,165 --> 00:09:34,140
>> 0-14, baby.

171
00:09:34,140 --> 00:09:36,900
>> So you should make sure that you
support them.

172
00:09:36,900 --> 00:09:39,810
In fact, need a citation on this, but I
believe that

173
00:09:39,810 --> 00:09:44,080
there are now more mobile web browsing
devices out there than desktops.

174
00:09:44,080 --> 00:09:47,620
So you should definitely pay attention to
responsive web design.

175
00:09:47,620 --> 00:09:49,718
It goes on to describe how to use

176
00:09:49,718 --> 00:09:55,070
min-width media queries and a whole bunch
more stuff.

177
00:09:55,070 --> 00:10:01,240
Explains the CSS box model, which can be
pretty confusing for web newbies.

178
00:10:01,240 --> 00:10:05,020
So, definitely check that out if you are
new to web design.

179
00:10:05,020 --> 00:10:06,440
Lots of other cool stuff here.

180
00:10:06,440 --> 00:10:09,430
If you're not familiar with responsive web
design, this is

181
00:10:09,430 --> 00:10:11,950
a very good guide to, to get you into it.

182
00:10:11,950 --> 00:10:14,650
>> Yeah, if you're not familiar with
responsive design, go watch every

183
00:10:14,650 --> 00:10:18,990
single episode of The Treehouse Show, cuz
we talk about it basically non-stop.

184
00:10:18,990 --> 00:10:21,310
Next up, we have a project called North.

185
00:10:21,310 --> 00:10:24,210
North is meant to be a living document
that goes

186
00:10:24,210 --> 00:10:25,660
through and talks about different

187
00:10:25,660 --> 00:10:29,230
standards when running web based
properties.

188
00:10:29,230 --> 00:10:30,310
What does that all mean?

189
00:10:30,310 --> 00:10:35,020
Well it goes through the different rolls
inside the development process.

190
00:10:35,020 --> 00:10:37,260
Different kinds of development process.

191
00:10:37,260 --> 00:10:41,180
Like you might have heard Agile
development, Scrum, things like that.

192
00:10:41,180 --> 00:10:43,610
Even talks about version control, what you
should be

193
00:10:43,610 --> 00:10:46,540
doing, how you should be releasing your
features and tagging

194
00:10:46,540 --> 00:10:50,280
them, and this is just a huge, huge
document that

195
00:10:50,280 --> 00:10:52,400
goes through pro, prototyping,
performance,

196
00:10:52,400 --> 00:10:54,700
testing, QA, everything that you're

197
00:10:54,700 --> 00:10:57,490
gonna need, and even, it even talks about
a lot

198
00:10:57,490 --> 00:11:00,660
of the things we talk about here on the
Treehouse Show.

199
00:11:00,660 --> 00:11:05,140
Now, obviously we can't go through this
incredibly awesome document, but

200
00:11:05,140 --> 00:11:07,420
we do recommend you check it out in the
show notes.

201
00:11:07,420 --> 00:11:09,350
And that is about all we have today.

202
00:11:09,350 --> 00:11:11,840
Nick, who are you on Twitter?
>> I am at nickrp.

203
00:11:11,840 --> 00:11:13,000
>> And I am at jseifer.

204
00:11:13,000 --> 00:11:14,740
For more information on anything we talked

205
00:11:14,740 --> 00:11:18,050
about, check out our show notes at
youtube.com/gotreehouse.

206
00:11:18,050 --> 00:11:20,520
Or search for us in iTunes and don't
forget to rate us.

207
00:11:20,520 --> 00:11:21,450
We're The Treehouse Show.

208
00:11:21,450 --> 00:11:24,650
>> And of course, if you'd like to see
more videos like this one about web

209
00:11:24,650 --> 00:11:27,910
design, web development, mobile, business,
and so much

210
00:11:27,910 --> 00:11:31,920
more, be sure to check us out at
teamtreehouse.com.

211
00:11:31,920 --> 00:11:34,615
Thank you so much for watching, and we
will see you next week.

212
00:11:34,615 --> 00:11:41,527
>> [MUSIC]