Episode 125: Skeleton, AngularJS, The Fold

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:01 where we talk about all things web design, web development, and more. 0:04 >> In this episode, we'll be talking about CSS frameworks, Angular JS, 0:07 the fold, and more. 0:12 >> Let's check it out. 0:14 [MUSIC] 0:14 First up is skeleton@getskeleton.com this is a dead simple, responsive boilerplate. 0:20 >> Get it, dead. 0:28 >> Dead simple. 0:28 >> Skeleton. 0:29 >> Skeleton, yeah. 0:30 >> Dead. 0:31 >> That's that's funny. 0:32 Light as a feather at 400 lines and built with mobile in mind. 0:35 So it's, it's really lightweight. 0:39 The styles are designed to be a starting point, not. 0:42 A UI framework because there are certainly plenty of those. 0:45 And I don't think that's a bad thing. 0:49 Quick to start with, 0:50 zero compiling or installing necessary so that's pretty nice. 0:51 So if we click on the code here, there's a little drop-down and 0:57 you can look at some of the examples. 1:02 Of stuff that is available in skeleton, 1:05 of course this is all on one webpage here so I can just scroll down. 1:08 The grid is a 12 column fluid grid with a max width of 960 pixels, 1:13 so of course this is responsive. 1:19 If we scroll down a little further. 1:23 There's some very nice typography here. 1:25 And the typography base is Railway. 1:28 That's a font served by Google. 1:31 Very cool stuff there. 1:34 There's some very simple, flat buttons that's pretty nice some form styling. 1:36 And I think you get the idea. 1:42 Basically it's just some very simple styling for starting a webpage. 1:44 So if we click on examples here and click on demo you 1:50 can kind of get an idea of what this actually looks like so 1:54 you can create very simple but nice looking websites with skeleton. 1:59 So definitely be sure to check that one out. 2:05 >> Yeah, maybe use it if bootstrap is too much. 2:09 >> Yeah. 2:11 >> And you just want something slimmed down. 2:12 >> Exactly, or if you're using foundation and that's too much or 2:14 you just want something that's really simple and can help you get started. 2:17 >> Yeah, or if you want a CSS library named after Bones. 2:21 >> Mm-hm. 2:25 Or a CSS library called Skeleton. 2:25 >> Yeah. 2:29 All. 2:30 >> Yeah. >> All good reason to choose that. 2:30 Next up, we have a collection of Angular JS-Resources If 2:32 you have been wanting to learn Angular JS well, hey, this is a great 2:36 GitHub repository of all of the resources you could possibly every want. 2:41 >> They cover all the angles. 2:47 >> Literally, all the angels do you need motivation this even has motivation. 2:49 What other collection of resources. 2:52 Has motivation. 2:53 None of them, except for this one that's, that's what. 2:55 So, really, this goes through all the different things to get started with 2:57 Angular JS tutorial, a 60 minute video. 3:01 More tutorials, style guide, design patterns, and best practices. 3:04 Then there's different parts of Angular JS that can be difficult to understand. 3:09 One thing that a lot people get hung up on is, scopes, you wanna learn about scopes, 3:13 hey there's a section for that called, Understanding Scopes. 3:16 Boom, you're done. 3:19 Not gonna read all the different parts of this webpage to you, you can find a link 3:20 to it in the share notes, right below the video, and read it yourself. 3:23 >> Mm-hm. >> It's worth it. 3:27 >> Very nice stuff. 3:28 Next up is a series of tweets from Luke Rubalooski. 3:30 >> Actual picture of him on top, right? 3:36 >> That is the green guy in the spaceship helmet yep, 3:38 that is a Luke Rubalooski actual photograph. 3:43 This is a series of tweets about how there is no fold. 3:46 Now, we talked about this in a previous episode but. 3:51 This is really important because for many years people talked about how there is 3:53 some kind of imaginary fold, like in a newspaper, but on a webpage. 3:58 And people are worried about whether or not users will see content below 4:03 the area that loads, and whether or not people actually scroll on a webpage. 4:09 The truth is that there really is no fold pretty much everybody scrolls and 4:14 in this series of tweets Luke presents a number of different resources and 4:21 you can see the bit.ly links here. 4:26 >> Oh, wow, there's another graph on there I only looked at the first one. 4:29 >> Oh, you didn't. 4:32 >> Figure there was nothing more on the page. 4:33 >> You didn't scroll down there. 4:34 >> yeah. >> Mmmhmm. 4:36 Well I guess you're in that 1% of people who don't scroll. 4:38 >> I'm the 1%. 4:41 >> And there is another one here called page engagement. 4:42 So this measures how much time people were engaged with, 4:47 stuff that was above the fold and then how much. 4:53 People were engaged with stuff that's below the fold. 4:56 Bunch of other really cool statistics here. 5:01 That's kind of where Luke Wroblewski is known for sharing. 5:04 Kind of ever green content. 5:08 Just like. 5:12 >> Just like his helmet. 5:12 >> Lucas. 5:13 Green. 5:15 >> Hm. 5:15 >> But really cool stuff definitely be sure to check this out, and 5:16 look at each one the sources that is mentioned in the. 5:20 Tweet images because they are also very insightful. 5:26 >> Very nice. 5:29 Next up we have a blog post about lazy loading Google Maps. 5:31 So let's say you have a bunch of different Google Maps on a webpage. 5:36 Why would you load them all at the same time, 5:41 especially if somebody is coming there on a smartphone. 5:42 That's gonna cost a lot of different requests to 5:45 go through slowing down the page. 5:48 Now, as we know that performance is very important, 5:50 especially when visiting a webpage on a mobile device. 5:55 So this plug-in will help you lazy load the images. 5:59 Now here is what the page will look like before and after. 6:04 It's a jQuery plugin where as you scroll down the page, Maps are lazily loaded. 6:08 So there will just be container div beforehand and 6:14 then later the Map pops into place. 6:16 Now let's go ahead and look at a demo. 6:19 I believe it's near the bottom of the page here. 6:21 And see, I'm scrolled into the viewport for this Map of New York and London and 6:23 if you watch the bottom of the screen, as I scroll down, a new map will pop in. 6:28 First it starts out as gray and then fades in. 6:35 Now this helps because we don't have to download all these Maps 6:38 as soon as the page loads. 6:41 Now if we go back here to the article, 6:44 we can see it's pretty easy to get this all going. 6:47 All you to do is include the lazy load Google Maps and you 6:52 can actually put your Google Maps above and then as you scroll down the page. 6:57 Give it the container and the new Google Map latitude and 7:03 longitude, and then boom, you are good to go. 7:07 Now you can also s, this is also responsive, so as your browser is resized, 7:10 the Map will also be resized and more importantly, re-centered. 7:15 If you have resized a browser before with a Map inside it, 7:20 the marker may be all the way off to the side and not in the center. 7:23 So this plugin takes care of that as well, and you can also specify during 7:27 the resize how many times it will attempt to recalculate the Map size etcetera. 7:31 Anyway, really useful plugin. 7:36 Check it out. 7:37 >> Very nice stuff. 7:38 Next up is this wonderful blog post called Best Free Icons for Commercial Web Use. 7:39 Mm-hm, I wonder what this blog post is about. 7:45 Basically it's about all of the best free icons for commercial web use. 7:48 If you scroll down you can see lots of really nice collections of icons and. 7:52 All of these collections are collected in one place so, there's Flaticon, here. 7:58 These are pretty cool, because they have a couple of different themes. 8:03 There's Font Awesome, always a good choice there's Glyphicons. 8:07 Iconic, that's one that we've talked about in previous episodes of 8:13 the Treehouse show. 8:17 And so on it can be a little bit difficult to know 8:19 what icons are okay to use under what circumstances so 8:23 this is a nice collection that says hey these icons are okay for commercial use. 8:29 Good to know. 8:35 >> Yeah I can dig it,. 8:36 >> I can dig it too. 8:38 >> Yeah icon like I can dig it but I used the word icon instead. 8:39 >> That's all we have time for this week, I am @nickrp on Twitter. 8:43 >> And I am @jseifer for more information on anything we talked about check out 8:47 the links in the show notes right below this video. 8:50 Thanks so much for watching, and we will see you, next week [SOUND] 8:52 [MUSIC] 8:55

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

Sign up