Episode 101: Share Icon, Direct Uploads to S3, Web Starter Kit

[SOUND]. 0:00 Well, I guess, I'm Nick Pettit. 0:10 >> I'm Jason Seifer. 0:14 >> And you're watching the Treehouse show, your weekly dose of internets 0:15 where we talk about all things web design, web development, and more. 0:18 >> In this episode, we will be talking about the share 0:21 icon, direct uploads to Amazon S3, the Web Starter Kit, and more. 0:24 >> Let's check it out. 0:29 [MUSIC] 0:30 >> Well, first up is a blog post called Share, the icon that no one agrees on. 0:35 Now if you >> I disagree with that. 0:41 If you've used Apple's iOS or Mac OS X, Google 0:43 Android, Windows 8, or been on any web pages, you might have seen 0:48 that there's a bunch of different icons for the same thing, sharing something. 0:54 Whether that's over email or SMS or on a social network, and so 0:59 on, nobody seems to agree on what this particular icon should look like. 1:03 Now awhile back there was actually a standard sort of being 1:09 developed for what the share icon should look like and I think Google Android. 1:14 Adopted that particular one, at least from what I remember, but there 1:19 is also, now there's open share icon, and I think there's one 1:23 other one that's competing, but now these different operating systems have also 1:27 implemented their own share icons, so across the board they're all different. 1:33 This is pretty fascinating sort of as a design discussion because. 1:38 It's interesting how quickly we all settled on say 1:42 the hamburger menu for slide out menus but how. 1:46 >> You get hungry every time you mention the 1:49 hamburger menu, it's like, sure I'll like a hamburger. 1:51 >> But you know for something like sharing that's so common,there 1:55 still not a standard for this or sort of a defacto icon. 1:57 >> I would share a burger with you. 2:03 >> I'd, I'd share a burger with you too. 2:05 Sound, sounds delicious. 2:07 >> It'd be nice. 2:09 >> Yeah. 2:09 >> Once in a while. 2:10 >> Down here we have. 2:11 >> Doesn't have to be every weekend. 2:12 Just once in a while. 2:13 Down here we have whats called the, the uploader icon in IOS 7 so you 2:18 can click to say upload something or share it which sort of corresponds 2:24 to the download icon here in, pre IOS 7 operating systems. 2:30 There is the outgoing tray, so they sort of switched icons there. 2:37 There is the three dots for Android, where it sort of looks like this, and so on. 2:41 Anyway, really interesting article, doesn't feature any hamburgers 2:47 at all, I'm sorry Jason, but it's, pretty interesting. 2:52 >> Hm. 2:56 [INAUDIBLE] >> Definitely worth the read. 2:56 Thanks for sharing. 2:58 >> You're welcome. 2:58 >> Next up we have a project called evaporate dot js. 2:59 Evaporate dot js is a JavaScript library for directly 3:03 uploading files to amazon s three from your webpage. 3:08 Now this is as great great library because it 3:11 supports, it supports resumable uploads using the upload multipart functionality. 3:15 The reason that is so useful is because if you are uploading a 3:22 1000 megabyte file or one gigabyte, as some people might say, and you've 3:25 only uploaded the first 900 megabytes, and then for some reason your network 3:30 connection fails, normally you would have to restart the upload from the beginning. 3:35 However, that is not so with EvaporateJS. 3:39 It does the upload in small chunks and then carry on from where it left off. 3:42 It is super easy to include in your page. 3:50 Just include the evaporate.js file. 3:52 You also have to set up your S3 bucket 3:56 with this configuration to allow upload's from other domains. 3:58 There is example application that is included. 4:03 But we are not going to show that because we would have to enter our personal Amazon 4:07 web server keys and the buckets and I do 4:12 not feel comfortable revealing that information on the show. 4:14 >> Lets just put them out there. 4:16 Lets just get it all out in the open. 4:18 >> So basically it's a great. 4:21 Great plugin for uploading, very easy to use. 4:23 Go on and check it out in the show notes on YouTube 4:26 dot com slash go treehouse, you can also search for us in iTunes. 4:28 We are the treehouse show and join us for one free 4:31 month of treehouse by going to team treehouse dot com slash show. 4:35 >> Very nice stuff. 4:39 Well next up is Google's web starter kit. 4:40 This goes along with their web fundamentals, it's 4:43 a Boilerplate and tooling for multi-device development, so 4:46 you can download the kit right here and 4:52 it's currently in Beta, where does that get you? 4:54 Well, there's a multi device responsive boilerplate 4:57 template and it has a very high 5:02 page speed insights performance score, so its 5:04 gonna be very performant, that's very cool. 5:08 There's cross device synchronization. 5:10 What? 5:14 That's pretty amazing. 5:14 Live browser reloading, sass support, a report with page speed insights. 5:15 There's even a built in HTTP server. 5:23 So, it's pretty amazing. 5:25 There's a lot of stuff going on here, and we're not gonna 5:27 talk about all of them, but I do want to flip over 5:30 to the documentation here and then, there should be 5:34 a link right here: Set Up Web Starter Kit, and then, right here pick a layout. 5:40 You can pick between index.html and basic.html and they're 5:45 going to do two different things for you here. 5:51 Index is good for a default starting point and includes a slide out 5:53 menu and to choose it all you have to do is remove the basic.html. 5:57 File and then basic is more basic it has no navigation 6:04 and its very simple but it's also responsive so if we scroll down here you 6:09 can kinda see what this looks like so here is that particular layout 6:14 in dot html and then heres what that slide out menu looks like. 6:19 On mobile devices. 6:23 >> What kinda menu is that? 6:25 >> I think it's a hamburger menu, Jason. 6:26 >> Hm. 6:30 And it's called a slider? 6:30 That's like a mini burger. 6:32 >> Mm-hm. 6:33 >> I'm just getting hungrier with each, each story we do. 6:33 Anyway, that's about it, check it out. 6:37 It's called the web starter kit, very cool stuff. 6:39 >> Yeah. 6:42 One, one thing to note on that, it's 6:42 not meant to replace something like Bootstrap or 6:44 Foundation, it's really supposed to be a starter 6:46 kit, kind of showing you the bare minimum. 6:49 >> It's actually more similar to HTML5 Boiler Plate. 6:50 >> Ooh, H5BP. 6:53 >> Yeah. 6:54 Okay. 6:56 >> Next up we have a book called JavaScript Allonge. 6:57 This is a book on reading java script, and it 7:00 is completely free if you want to read it online. 7:03 However, you could purchase the e-book if you wanted to. 7:06 This is something, again, we're not going to get 7:10 into everything because look at this large table of contents. 7:11 There is a lot going on. 7:15 >> Til DR. 7:17 [CROSSTALK]. 7:18 >> Yeah, look at that cup of coffee, that looks delicious. 7:18 Something you would maybe want to eat after a burger. 7:21 So this is, this has just a, a lot of great info 7:25 about JavaScript, and here is the reasoning the author wrote the book. 7:29 It says, there are plenty of 7:34 good directions for writing JavaScript programs. 7:36 If you follow them without alteration or 7:38 deviation you'll be satisfied, but software is complex 7:40 and has a lot of side effects which is why you need to read this book. 7:43 So anyway, check out the book. 7:47 We'll have a link to it in the show notes. 7:48 When I say check it out, that doesn't imply that you have to return it. 7:50 You can just read it on the website and you'll be fine. 7:53 >> You don't need a library card. 7:55 >> Yeah. 7:56 It's not like a library. 7:56 >> Nice. 7:58 Next up is one post called, what every 7:59 front end developer should know about webpage rendering. 8:00 Well that is a mouth full, hamburger maybe I could go for that Yeah sounds good. 8:04 Basically there are two fundamental things that I would like to point out repaints 8:11 and reflows so a repaint is when a style 8:17 changes that does not affect the elements position on a page so for example. 8:23 A change in background color border color visibility so whether 8:30 or not something is actually visible on the page a 8:34 reflow however is when something actually changes in the layout 8:39 and you have to reflow all of the elements recalculate everything. 8:45 And basically repaint the page but this is a lot more expensive where as repaints 8:49 do have a little bit of a performance hit but there not as bad as a reflow so 8:56 those are the two kind of performance hits 9:02 that can happen in rendering a webpage and here's 9:05 a little walk through of how exactly a 9:08 browser renders a webpage it's pretty helpful to know. 9:12 But. 9:14 >> It's five steps. 9:14 >> Down here, we also have how how to optimize 9:16 this this repaints and reflows. 9:22 Here we go, practical advice on optimization, and there's a couple of 9:26 helpful tips there such as the ranking of selector specificity. 9:31 Anyway, really cool article, very helpful and. 9:37 Very important to know if you are a front-end developer or a 9:40 designer and you're trying to optimize the rendering performance of a webpage. 9:42 Especially important for mobile devices. 9:48 >> Yeah. 9:50 Lot of great tips in there. 9:50 >> Um-hm. 9:51 >> Next up, we have a project called ODYSSEY. 9:52 This is billed as a simple way for 9:55 journalists, designers, and creators to weave interactive stories. 9:57 What does that mean? 10:01 I have no idea, let's scroll down the page and see if it provides an example. 10:02 Wow, no, this is actually really cool. 10:07 So, just like you say. 10:10 You pick a template, craft your story, and then you can tell your own story. 10:11 Check this out, though. 10:16 They have examples over in the documentation. 10:16 It provides a bunch of different options for creating 10:21 sort of like the, oh man [SOUND] Paralax scrolling. 10:26 >> That's the word. 10:32 >> Yeah so if we head on over to the documentation you can see it has a lot of 10:34 different options for creating a parallax scrolling sort of effect, 10:40 and it also allows you to weave together different multimedia. 10:44 Create are 10:49 maps so you can take people on a literal 10:53 odyssey through the world, and you can also add videos to it. 10:59 Let's see if we can get their editor on here. 11:06 There we go, examples. 11:10 Here is a list of examples making use of templates, and here we are. 11:12 We see a map and there is some picking going on here. 11:17 You can tell that because it says it. 11:21 Here's an example of spinning and you'll notice as we walk through the page. 11:23 All of this behavior is being generated from that 11:27 one mark down file and then being processed by odyssey. 11:30 This is a very cool project that will allow you to create these great 11:35 visualizations with next to no code as long as you follow the mark down. 11:39 Make sure to check it out in the show notes. 11:42 >> Very nice stuff. 11:45 Well I am @nickrp on Twitter. 11:45 >> And I am @jseifer. 11:47 For more information on anything we talked 11:48 about check out our show notes at youtube.com/gotreehouse. 11:50 You could also search for us on iTunes we are the Treehouse Show. 11:54 >> And of course if you'd like to try out Treehouse for 11:57 free for thirty days be sure to check us out at teamtreehouse.com/show. 12:00 Thank you so much for watching and we will see you next week. 12:06 >> You wanna go get a burger? 12:11

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

Sign up