Episode 80: Sandboxed iFrames, Progress Element, Responsive Screenshots

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show, your weekly dose of internets 0:02 where we talk about all things web design, web development, and more. 0:05 >> In this episode, we'll be talking about 0:08 sandboxed iFrames, the Progress element, responsible screenshots, and more. 0:09 >> Let's check it out. 0:15 [MUSIC] 0:16 >> First up is sandboxed iframes, which is 0:22 a blog post over on the HTML5 Rocks blog. 0:25 It's called, Play safely in sandboxed IFrames. 0:28 The article is actually from January of 2013, but it's still pretty fascinating. 0:31 Basically, iframes allow you to embed other web pages 0:38 into a web page in a frame, or an iframe. 0:42 So you can put 0:46 this wherever you want on the page. 0:47 But the problem is that iframes can do things like alerts 0:49 or geolocation requests, basically anything that a normal webpage can do. 0:55 The sandbox mode allows you to basically put a stop to anything that 1:00 might be intrusive to the page that the iframe is being embedded on. 1:06 So, through a set of attributes, 1:10 you can use, well, through a set of values on 1:13 the sandbox attribute, you can turn certain things on and off. 1:16 So, for example, you could allow or disallow form submissions. 1:20 You could allow or disallow pop-ups and so on. 1:25 So if you have a website with a lot of iframes, this is pretty handy. 1:29 >> Lot a, lot of geologic 1:36 references in there. 1:38 HTML rocks, sandbox, lots, lots of stuff going on there. 1:39 Next up, we have a project called Angular Translate. 1:45 If you're using Angular JS and you need to 1:48 internationalize your application, this plug-in is the way to go. 1:50 Now it is super simple to use, as you would expect 1:55 from basically everything we cover on here, here's how it works. 1:58 Let's say you have a different 2:01 translation and different blocks of text that need to be translated. 2:04 So you can see on the right here it says, Hello this is a paragraph, and over on 2:07 the left is the code to translate it from English and German. 2:12 So you can see right here, Hello this is the paragraph, English and German and boom 2:18 we can go back and forth extremely easily. Now there is a wonderful API that you 2:23 can use to go through and put all these translations in place. 2:29 And it's already in use quite a bit by a bunch of different companies. 2:33 Seems like a really great project, so if you do need to internationalize 2:37 the front end side of your application, go ahead and check this out. 2:41 >> Hm. 2:44 I don't think that was a paragraph, it looked more like a sentence to me. 2:45 I don't think that word means what they think it means. 2:49 >> Well, a sentence can be part of a paragraph. 2:51 >> I 2:54 think they need to use Hemingway. No, for sure. 2:54 >> Oh, we talked about that on the last treehouse show. 2:56 You should catch up if you haven't. >> Hm. 2:58 Next up is this really cool website. I'm going to butcher this pronunciation. 3:01 It's called. Liquidapsive? 3:05 >> Liquidapsive. >> Thank you, Jason. 3:09 I don't know where I'd be without you. 3:11 Probably... 3:14 >> Probably in the same place, but alone. 3:14 >> And cold. 3:17 >> Yeah, dead inside. 3:18 >> This site allows you to tell the 3:21 difference between adaptive, liquid, responsive, and static layouts. 3:22 So, I've come out of full screen here. 3:26 And If I click on Static, the layout will change. 3:29 And if I re-size 3:33 my browser window, it will show you what a Static layout looks like. 3:34 It doesn't change at all when you re-size 3:39 the browser because it's using explicit pixel values. 3:42 Now, if I change it over to Responsive, that's a little 3:46 bit more typical of what you would expect of a modern website. 3:50 The layout uses media queries to adjust itself as it is 3:54 being resized. 4:00 >> Wow, I'm gettin' motion sickness watching that. 4:01 >> You can also check out Adaptive and 4:03 Liquid, which are a little bit more confusing. 4:05 Responsive and Static are pretty well known. 4:09 A liquid layout doesn't change as the browser resizes. 4:12 It just adjust based on percentage widths. 4:16 So it's a little bit better than Static but not quite as good as Responsive. 4:19 In fact responsive layouts are actually liquid 4:25 layouts with the addition of media queries. 4:28 So as you can see, it changes when it hits a certain media query breakpoint. 4:32 There's also Adaptive, so I'll resize that to show you what that looks like. 4:38 Rather than using any kind of percentage widths, it uses pixel widths. 4:42 But, it does still use the media queries that 4:47 a responsive layout uses. So, very cool website. 4:50 Helps demonstrate the difference between all these different terms. 4:53 Definitely be sure to check it out if you are new to web design. 4:56 >> Yeah, and feel free to tweet us your pronunciation of the name Liquidapsive. 5:00 Don't, don't let our pronunciation knock you off. 5:05 Next up, we have a project called Pageres. 5:07 This is a really interesting command line tool for generating screen shots of 5:11 different resolutions of a webpage. 5:15 Now, super easy to use, you can, you can command right here pageres, 5:18 then you give it your URLs and the different sizes that you want. 5:22 Now, this works as a command line app. 5:26 On the back end it uses Phantom JS to generate these different screen shots. 5:29 Now, something that's super cool about this is they 5:34 give you instructions for using it with Google Analytics. 5:37 So, what you can actually do is, if you 5:41 have a website in your Google Analytics account, and you're 5:43 wondering what different resolutions access your site, and what 5:47 it looks like, you can export that from Google Analytics. 5:51 And then they have a quick little command 5:55 line shortcut to import that Pageres, take a 5:56 picture of your site, using all of the 5:59 common different resolutions that are already using your site. 6:01 So, really cool tool, 6:05 you can check it out in the show notes at 6:06 youtube.com/gotreehouse or search for us in iTunes at The Treehouse Show. 6:08 >> Next up is Progress.js, we're making a little progress through the show. 6:14 >> I wish we were making a little more progress in our personal lives. 6:18 >> If I refresh the page here, you can see what Progress JS 6:23 looks like, it kind of made a loading bar across the entire screen. 6:26 If 6:31 I scroll down here, here's a couple more 6:31 examples so it loaded in these picture from Pinterest. 6:33 Pretty Pinteresting there. 6:37 >> Ooh. 6:38 >> Can hit the Replay Demo as many times as you want, it's totally free. 6:38 Here is an input form. Which demonstrates how ProgressJs can 6:45 improve the user's experience of forms. So if I start typing something in, 6:49 it will auto save and it shows you a little progress bar 6:56 right above the form, to show you what that might look like. 6:59 Same thing for text areas. 7:02 So how does it work? Well it uses HTML and CSS. 7:04 You can basically generate the progress bars with the HTML 7:09 and then you can style them however you want with CSS. 7:13 So this is a JavaScript project obviously, Projess.js. 7:17 And you 7:20 can go ahead and download it and include it on 7:22 your site if you need to make some progress bars. 7:24 >> Oh it's very nice. 7:27 It's just like Youtube, that little progress bar 7:28 that loads at the top of the screen. 7:30 >> Mm-hm. 7:31 >> Dig it. 7:31 Speaking of digging it, there's a project called Dug.JS which we're covering next. 7:32 This is a JSONP to HTML script. 7:38 Now if you are doing any requests or working 7:42 with JSONP at all, it can be a little 7:45 bit difficult to do. 7:47 So the reason that we use JSONP is let's say you have a website 7:48 and you wanna access somebody else's API and use the JSON on your own site. 7:52 Well due to the same origin policy of web browsers you can't do that, so you have 7:57 to use something called JSONP, which wraps that 8:02 JSON in an anonymous function that you send in. 8:05 Now this project, Dug.JS will let you very easily take that JSON 8:07 that you get back, from a JSONP source, and wrap it in some HTML. 8:12 So all you have to do, you can see 8:16 this script tag right here, you call this dug method, 8:18 you give it the endpoint And then inside this template, 8:21 key is a little string that is an HTML template. 8:24 Now, you have some options for iterating through, this is the Dribbble API, so 8:28 it gives you an array of shots, so it'll iterate through the shots right here, 8:33 and then put the images right there in that image400 URL. 8:37 So you can break up your template into multiple lines, and here 8:43 is a demo of the code running right on the page right there. 8:46 Wow. 8:50 So as you expect, it supports a bunch of different parameters. 8:51 It's very, very easy to use, you can download it right now. 8:55 Pretty cool project. 8:57 I dig it. >> Dug it. 8:59 Next up is Grid, which is a simple guide to responsive design, made by Adam Kaplan. 9:03 Look at that, I know that because his name is right there. 9:10 Very convenient, Adam. 9:12 >> I thought his name was Grid? >> [LAUGH] If we scroll down, you can 9:13 see it's just exactly what it says on the tin, Why bother with responsive? 9:17 Well, it tells you why you should bother with Responsive, because it's 9:23 the year 2014, and there's a lot of mobile devices out there. 9:29 >> 0-14, baby. 9:33 >> So you should make sure that you support them. 9:34 In fact, need a citation on this, but I believe that 9:36 there are now more mobile web browsing devices out there than desktops. 9:39 So you should definitely pay attention to responsive web design. 9:44 It goes on to describe how to use 9:47 min-width media queries and a whole bunch more stuff. 9:49 Explains the CSS box model, which can be pretty confusing for web newbies. 9:55 So, definitely check that out if you are new to web design. 10:01 Lots of other cool stuff here. 10:05 If you're not familiar with responsive web design, this is 10:06 a very good guide to, to get you into it. 10:09 >> Yeah, if you're not familiar with responsive design, go watch every 10:11 single episode of The Treehouse Show, cuz we talk about it basically non-stop. 10:14 Next up, we have a project called North. 10:18 North is meant to be a living document that goes 10:21 through and talks about different 10:24 standards when running web based properties. 10:25 What does that all mean? 10:29 Well it goes through the different rolls inside the development process. 10:30 Different kinds of development process. 10:35 Like you might have heard Agile development, Scrum, things like that. 10:37 Even talks about version control, what you should be 10:41 doing, how you should be releasing your features and tagging 10:43 them, and this is just a huge, huge document that 10:46 goes through pro, prototyping, performance, 10:50 testing, QA, everything that you're 10:52 gonna need, and even, it even talks about a lot 10:54 of the things we talk about here on the Treehouse Show. 10:57 Now, obviously we can't go through this incredibly awesome document, but 11:00 we do recommend you check it out in the show notes. 11:05 And that is about all we have today. 11:07 Nick, who are you on Twitter? >> I am at nickrp. 11:09 >> And I am at jseifer. 11:11 For more information on anything we talked 11:13 about, check out our show notes at youtube.com/gotreehouse. 11:14 Or search for us in iTunes and don't forget to rate us. 11:18 We're The Treehouse Show. 11:20 >> And of course, if you'd like to see more videos like this one about web 11:21 design, web development, mobile, business, and so much 11:24 more, be sure to check us out at teamtreehouse.com. 11:27 Thank you so much for watching, and we will see you next week. 11:31 >> [MUSIC] 11:34

You need to sign up for Treehouse in order to set up Workspace

Sign up