Episode 94: Web Design Manual, Script-Injected, Flow.js

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> 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 >> The Treehouse Show is brought to you by Treehouse. 0:08 If you wanna learn web design, web development, and so 0:11 much more, check out teamtreehouse.com/show 0:13 for a 30-day free trial. 0:16 In this episode we'll be talking about a web 0:18 design field manual, asynchronous scripts, file uploads, and more. 0:19 >> Let's check it out. 0:25 [MUSIC]. 0:26 First up is designing for the web. 0:31 Which is a field manual for web design. 0:34 Now, if you're not familiar, web design has just hit version 1.0. 0:39 So we're out of the beta period for web design. 0:43 >> We were. 0:46 >> Which is. 0:46 >> In it for a while. 0:46 >> Yeah. 0:47 So this is really great. 0:48 >> We were in it to win it. 0:49 >> You can see that they're using a hamburger menu, which as we 0:50 discussed in the previous episode is maybe something you don't want to do. 0:53 So maybe they'll take that out in V2. 0:57 >> Yeah, are we sure this is Version 1.0? 0:58 >> That's what it says. 1:02 >> Huh. 1:04 >> V1.0.0 1:05 >> Summer of 2014 or Oh Fourteen, as Nick says. 1:05 >> Any web design manual would incomplete 1:08 without starting with a quote from Steve Jobs. 1:10 So there that is. 1:13 Then, you have some resources here, to learn about web design. 1:14 Maybe share your stuff on Dribble. 1:20 Check out some responsive design patterns. 1:22 Learn things on Medium. 1:25 Lots of great stuff in here. 1:27 So definitely be sure to check out those links. 1:29 There's then a whole list of style guides, do's 1:32 and don'ts, and you can learn about style guides there. 1:36 >> Do make a style guide. 1:41 >> Don't use hamburger menus. 1:43 Then, there's this list of resources about-. 1:45 >> Every time you say hamburger menu, I, I want a hamburger. 1:47 >> You're just, super hungry I guess. 1:50 >> Yeah. 1:52 >> Yeah. 1:53 >> For a hamburger. 1:53 >> There's [LAUGH] some resources here, where 1:55 you can learn more about style guides. 1:58 So, these are all of the style guides 2:00 from companies like MailChimp, Mozilla, Salesforce, and so on. 2:03 You can learn about process and lots of other cool stuff. 2:08 So there's quite a few more sections here. 2:12 Lots of really amazing resources. 2:15 I know I was making fun of this, but it's actually pretty cool, 2:18 so definitely be sure to check out this field manual of web design. 2:21 >> Yeah, we've talked about a lot of those things on 2:26 the show too, so that's you know, it's nice to be validated. 2:27 >> Mmm. 2:29 >> That was a web design joke. 2:31 Get it? 2:33 >> Validation. 2:34 >> Next up we have a blog post by 2:36 Ilia Gregorich on the script-injected async scripts are considered harmful. 2:38 So what is a script-injected async script? 2:44 So here's an example up here. 2:48 You have a script embedded in the page where you are just going 2:49 to get a little piece of JavaScript that you are including on your page. 2:52 And that is bad because it blocks the rest of the request from going through while 2:56 that Java Script is requested, the dom can not be properly rendered. 3:02 So, the good way to do it is to create a script variable in 3:07 Java Script, give it the source and then append the child to the document. 3:11 Now, what is the difference between the two? 3:17 Well in the bad example, the DOM construction is block, but in 3:20 the good example there were more were, the request had happened asynchronously. 3:23 Now that is great, but it does come at a little cost which is that 3:27 the css object model is also blocked while that script is gotten and retrieved. 3:33 And then nothing else on the page can be rendered. 3:39 So, the solution after all of this is 3:42 to add this little async attribute right here. 3:44 And when you add the async attribute, the CSS object model is 3:48 not blocked while the JavaScript is fetched and rendered into the page. 3:52 So that is the long story short, that's the TLDR. 3:58 For information and background, go ahead and check out this blog post. 4:01 >> Well, if I can inject myself into this next 4:05 segment, I'd like to talk about the scroll up bar. 4:08 That was pretty bad. 4:11 >> It was. 4:12 >> The scroll up bar which is 4:13 this design pattern that currently growing in popularity. 4:15 So if we head over to the New York Times website, you can look at the navigation 4:19 bar right here and when I scroll down the page, bam, it pops to the top of the page. 4:25 And as I scroll up and down, it stays there. 4:32 So this has been dubbed the Scroll Up Bar. 4:36 Or actually I should say, the thing we're 4:40 gonna talk about later is the scroll up bar. 4:42 But this has become a popular design pattern, to have 4:44 this fixed position bar at the top of the page. 4:48 Forbes does a very similar thing, and it's kind 4:51 of spreading all over the, all over the place. 4:54 The problem is that this takes up 4:58 some precious screen real estate on mobile devices. 5:00 So, the suggested solution in this blog post is to instead hide that bar 5:04 as you're scrolling down when you scroll back up reveal the bar again. 5:10 So see when you scroll up, disappears. 5:17 And when you scroll back down, it reappears. 5:19 So why would you want to do that? 5:22 Well, right here at the end, scrolling up won't necessarily mean the user wants the 5:24 navigation, but 100% of the people wanting the navigation will be scrolling up. 5:31 So it's a little bit confusing -. 5:38 >> The math. 5:40 I think it checks out. 5:41 >> To to think about. 5:43 But that's actually a really good explanation 5:44 of why you would want to do that. 5:47 Anyway, I thought this was a pretty cool design pattern. 5:50 So, definitely something to think about. 5:53 >> And, uh,yeah, if you want to read more about that or check 5:56 out the sample, you can get to it at show notes at youtube.com/gotreehouse. 5:58 Also, if you'd like to sign up for a 6:02 30 day free trial of treehouse, check out teamtreehouse.com/show. 6:03 Next up we have a project called angular file upload. 6:08 This is a really, really interesting project. 6:11 It's a JavaScript library that allows you to have multiple, 6:13 simultaneous, stable, and resumable uploads via the HTML 5 file API. 6:18 Now, we've talked about different upload libraries on this show before. 6:25 Well, what makes this different? 6:28 There's actually a server side component to this, as well, that is written in PHP. 6:30 And, what it does is it breaks up the different files into smaller chunks. 6:34 Now, when it uploads those chunks it does so 6:39 separately, and then reassembles them later on the server. 6:41 This allows you to have some really cool behavior, like being able to pause and 6:45 resume file uploads on the client and the server and come back to it later. 6:49 This is great if say the network connection drops out while your users 6:53 is uploading files or they accidentally close 6:56 the browser tab or something like that. 6:58 >> Or maybe somebody picks up the phone at home and kills your internet connection. 7:00 >> Oh, yeah. 7:04 That was a thing back in the days of modems. 7:05 Remember those? 7:08 >> Was that, do people not use those things anymore? 7:09 >> No they don't. 7:10 >> Oh. 7:11 >> Welcome to 2014, Nick. 7:12 So there is a demo on the site where you 7:13 can upload a file or folder and if you want to 7:16 you can actually check out the documentation for the angular 7:19 part of it and also it is completely available on GitHub. 7:23 So go ahead and check that out. 7:27 We'll also have a link to that in the show notes. 7:28 >> Very cool stuff. 7:31 Well next up is compressor.io. 7:32 Maybe you've used images on a website before and you were like man. 7:35 >> Never received images on a website. 7:38 >> These images are really, really big and taking up a lot of space. 7:40 Yeah I'm sure that's why you probably don't use them. 7:44 Well compressor.io as you might imagine, compresses images. 7:47 So here is a before and after of this picture of an iguana. 7:52 And I can move the slider back and forth and. 7:58 >> I don't see anything that's different. 8:02 >> You might not see any change at all. 8:03 >> I see no changes. 8:05 >> And that's what you would want though with a good compression library. 8:06 You want to see - >> Nothing. 8:10 >> Absolutely no change from the compressed version and 8:11 the original version, other than a smaller file size. 8:15 So one of these images, is 700k. 8:18 And the other one is 250k. 8:20 And it's compressing it by 64% in this particular case. 8:23 However, they claim, that Compressor can compress 8:29 images up to 90% which is pretty insane. 8:32 >> I like that there's two different options for it. 8:37 You know, lossless and lossy where if you don't mind if little bits of the image 8:39 don't look quite as good you know, to get a little bit more compression out of it. 8:44 You can actually enable that feature as well. 8:48 So that's pretty cool. 8:50 >> It's, it's pretty amazing. 8:51 So why would you use this if you can use something like JPEG, p, PING, GIF, or SVG? 8:52 Well, it actually compresses the files even more. 8:58 So, if we go to the About page, it's actually 9:02 using several open source libraries to do this and some 9:06 things that are coming next are batch uploading, increasing the 9:09 maximum file size limit, an offline desktop version, and more. 9:14 So it'd be really great if we could get something like this 9:19 into say, Grunt or Gulp or one of those front end task runners. 9:23 >> Ooh very nice. 9:26 Very good idea. 9:27 >> But you can try it by clicking the try it button and right now you can just drag 9:28 and drop your images right onto this area and it will go ahead and compress them. 9:32 >> Ver, very, very cool. 9:39 >> Pretty amazing. 9:41 >> Next up we have a Hacker's Guide to Git. 9:42 Now i'm not completely sure that we should trust 9:45 this because the website it's on is called wildly inaccurate. 9:47 But it does have some really great advice about using GIT. 9:50 Now, this is not going to be a 9:54 full tutorial to GIT although it is very thorough. 9:56 This tutorial focuses on real world work and what you will be doing most 9:59 of the time as a quote-unquote hacker, or somebody who codes and uses GIT. 10:04 So it's a great tutorial. 10:10 Walks you through initializing a Git 10:11 repository, goes through the different tree objects, 10:13 explains how to merge and what all the different parts of Git really are. 10:16 I am not gonna get into this whole thing because it is a very, very 10:21 long tutorial and this is a relatively short 10:24 show but trust me it is worth reading. 10:27 Check it out in the show notes. 10:29 And that is about all we have time for today, Nick who are you on Twitter? 10:31 >> I am @nickrp >> And I am @jseifer. 10:34 For more information on anything we talked 10:36 about check out our show notes at YouTube.com/gotreehouse. 10:38 You can also search for us in iTunes we are the Treehouse Show. 10:40 Don't forget for a free 10:44 month of Treehouse, check out teamtreehouse.com/show. 10:45 >> Of course, if you'd like to see more 10:48 videos like this one about web design, web development, 10:51 mobile business and so much more, you can check 10:54 us out at teamtreehouse.com/show and get a free month. 10:56 Thank you so much for watching, and we will see you next week. 11:01 [MUSIC] 11:04

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

Sign up