Episode 109: CSS Triggers, Fireshell, Responsive Design

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:04 >> For a free month's trial of Treehouse, head on over to teamtreehouse.com/show. 0:08 In this episode, we'll be talking about The Web Manifest specification, 0:12 CSS triggers, Responsive web design and more. 0:16 >> Let's check it out. 0:20 [MUSIC] 0:21 >> First up, 0:26 we have a great blog post by Bruce Lawson on the web manifest specification. 0:26 Now, what is the web manifest specification? 0:32 Well. >> I don't know. 0:35 I feel like you're gonna tell us, though. 0:36 >> I'm not, I'm just gonna leave it up to you. 0:37 You can check out the link in the show notes, and we will move on. 0:39 Haha, I'm just kidding. 0:41 We're gonna talk about it. 0:43 Manifest specification is made for web applications similar to how 0:45 native applications are currently installed on mobile devices. 0:50 It now what we're going to have in the future is since devices these 0:54 days are being able to access more sens, sensors like GPS, the camera, and 0:58 orientation sensors through native web APIs instead of just apps. 1:03 Well, we need a way to tell clients that these things can be installed locally. 1:08 And we're going to do that with the web manifest specification. 1:13 So when you install an app to your home screen, currently on tablets, 1:17 you can actually give this a name using the web manifest specification. 1:22 You can give it a name and a short name right here, they have an example, 1:26 photo application with a name of my totally awesome photo app. 1:30 And the short name of photos. 1:34 >> And so the short name would go underneath the icon, 1:36 like on the home screen. 1:39 >> Right. 1:40 Got it. Or possible in the task switcher. 1:41 >> If you don't have room to save my totally awesome photo app. 1:44 Which if you think about it is kind of a bad name for an application. 1:48 >> Yeah. Probably, probably not good. 1:51 >> So you can classify different icons for low resolution, high resolution. 1:53 Similar to the thousands of different specifications we have for favicons today. 1:58 And you can also specify display modes and orientation, 2:03 as well as where the application starts, and the scope of the application. 2:06 So, let's say you navigate outside of the app for example to a different website, 2:11 well, you can say that's not in the scope, and leave that to the task switcher. 2:16 Now there are more things to keep in mind, they'll be available right there in 2:21 the article which you can check out in show notes. 2:24 Also something to note the web manifest specification is 2:27 not totally a real thing yet. 2:29 It's something that all the different browser developers are talking about 2:32 right now since this is going to be an issue in the future. 2:36 Anyway you can find a link to that in the show notes, 2:38 which you can get to at youtube.com/gotreehouse/. 2:41 Or search for us in iTunes, we are The Treehouse Show. 2:43 >> Very cool stuff. 2:47 Well, next up, is this wonderful website, called CSS Triggers from Paul Lewis. 2:48 And this basically tells you which CSS 2:55 properties are going to trigger a layout, paint, or composite. 3:00 Now we've covered this previously on past episodes of the Trio Show, 3:06 layout paint and compisite. 3:11 Basically, layout is anytime that the browser has to 3:13 recalculate the geometry of the page, so if the width or the height of something, 3:18 for example changes, it's gonna trigger a layout change. 3:23 Now, repainting is basically just 3:27 changing the look of something once the layout has been recalculated. 3:31 So for example, maybe changing the color of 3:35 something from red to green is gonna trigger a repaint. 3:38 >> Or Christmas. 3:43 >> That's right. 3:44 Compositing is when you put two different things together, 3:46 so things like box-shadows for example, are going to be composites. 3:50 But here you have all of the CSS properties listed out, 3:57 and you have this handy chart here, 4:02 showing you which is going to trigger a layout paint or composites. 4:05 So if I were to click on something such as box-shadow, 4:10 it would give you a little bit more detail over here, and, it says, 4:16 changing box-shadow does not trigger any geometry changes. 4:19 Which is good, because of course, layout is the most expensive. 4:23 But, since it's a visual property, it will cause a repaint, and 4:28 painting is typically considered a super expensive operation. 4:33 So, you should be cautious. 4:37 Anyway, really cool site, definitely be sure to check this one out, 4:40 because it can help you a lot when you're trying to improve page performance. 4:43 >> If you use too many of those, 4:49 do you think you would say that you're CSS trigger happy? 4:50 >> You could say that. 4:54 It's not a good thing. 4:55 >> Next up, we have a project called fireshell. 4:57 Fireshell is similar to Grunt or Yeoman for 5:00 generating client side, and or server side applications. 5:04 But it takes a little bit of an opinionated take on that whole idea. 5:08 So, just like Yeoman, you can generate a new app with Fire Shell. 5:13 It includes HTML5 boiler plate, 5:18 boiler plate, Sass with an object-oriented CSS setup. 5:21 And it includes Grunt for compiling your Sass, 5:25 SCSSS and concatenating JavaScript files, and also includes LiveReload. 5:29 Now, if we checkout the documentation right here, 5:35 you can see all you really need to do is, download FireShell, and then scaffold 5:38 your application, and it even includes commands, which you can run in terminal. 5:43 To double click right inside of OS10 and that will start your server for you and 5:48 install all of the different extension. 5:53 Now this comes with a pre configured grunt file which 5:55 gets everything concatenated and middified for you. 5:58 And, it also includes commands for generating the final application. 6:02 Now this is just another way of kinda scaffolding your applications, 6:07 client-side, with the addition of server-side, not, 6:11 it doesn't include the server component but it makes it very easy to hook up to. 6:15 Now this is also great for beginners because instead of having to go out and 6:19 install everything yourself, for example with Yeoman, it's kind of all included 6:22 right there for you with good comments and instructions on getting it going. 6:26 Anyway, you can find a link to that on, in the show notes, 6:31 which we've talked about how to get to before. 6:33 Also don't forget to check us out at teamtreehouse.com/show. 6:35 >> Very cool stuff. 6:40 Well, next up is a blog post from the Filament Group about 6:41 how me make RWD sites load fast as heck. 6:46 Of course, RWD stands for Responsive Web Design, a technique for 6:50 making web sites look good at multiple screen resolutions. 6:55 Basically they break this article up into a couple of different parts. 7:00 But, the thing I'd like to focus on is right here. 7:06 Page weight isn't the only measure you should focus on perceived performance. 7:09 And, what that means is that, pay, when they say page weight, 7:15 they're talking about the actual file size of all the elements on the page. 7:19 >> So it doesn't mean like how much your laptop weighs when you go to a website. 7:24 >> Exactly it, it doesn't mean that Jason. 7:27 It's talking about how, how long the page takes to load based on file size. 7:30 Instead you should focus on perceived performance or 7:36 in other words, how the user actually perceives the page loading? 7:39 So your page is interactive long before all of the elements have loaded in. 7:45 You could still be loading in images, for example, after the page is 7:51 already interactive, and the use, user can scroll around and click on things. 7:55 And right here it says, 8:00 how we load assets matters just as much as how many assets we're loading. 8:02 So you should really think about the order in which you're loading assets. 8:07 And not only that. 8:12 You should also think about what's called shortening the critical path, 8:13 which is sort of related to that previous point. 8:18 Basically, they're saying that, you should think about the order in which you 8:22 load assets, and then also how you can maybe load some assets asynchronously. 8:26 So maybe you load up the page, and then maybe you, for example pull in some of 8:31 the content after the page has already loaded and after it's already interactive. 8:36 Or maybe you pull in some less important aspects of the page, such as maybe 8:41 social sharing buttons, or advertisements, after the content has already loaded. 8:46 Anyway, it's a very in-depth article. 8:52 Definitely be sure to check this one out. 8:54 It's very important to think about how fast your page loads, 8:56 because if, your page doesn't load super quickly, 8:59 people can, oftentimes click away from it without even really, checking it out. 9:03 >> Yeah. >> Just cuz it takes too long. 9:08 >> So don't, focus on page wait, but focus on page, space, wait. 9:10 W-A-I-T. 9:15 Next up we have a project called way.js. 9:17 This is a really cool JavaScript library which will persist form data, 9:20 even across reloads of a web page that is JavaScript library agnostic. 9:25 So check this out. 9:31 It's lightweight. 9:32 Persistent and framework agnostic. 9:33 And you combine DOM elements to an in memory data store with 9:36 practically no code. 9:40 So, if we take a look at the example here, 9:41 if I write down my name here, and then my picture. 9:44 And you can't see this right now but I'm going to reload the page. 9:49 And when I do that, 9:53 you can see the form data over on the righthand side has been persistent. 9:54 Now this uses an in-memory data store so, 9:59 also this will persist across reloads and stick around in your browser. 10:02 Now you might wonder, what kind of code you need to get all this and 10:06 it is, right here. 10:10 You just add way data is form data. 10:12 And you can even add this way persistent, right here. 10:14 And that is pretty much all you need to do. 10:18 Now if you want to, 10:22 you can put in some defaults and some different default data right there. 10:22 And that's it. You are absolutely done at that point. 10:27 Add the persistent attribute, and you can see it's all persistent right there. 10:31 So you even have this button to clear the data. 10:34 And then it will not persist when you reload the page. 10:37 Now there is also documentation that you can take a look at. 10:41 Very, very easy to get going. 10:44 Super easy to install, you just have that one dependency, 10:46 include the script in your web page, and look at that, there is no step two. 10:49 You are good to go. 10:53 Why would you even put step two in the installation instructions? 10:54 I don't now, I didn't write the library. 10:57 >> It's just way simple. 10:59 So yeah, that, it is way simple. 11:02 That's that's wonderful, Nick. 11:04 So that's about all we have [LAUGH] time for, here on the Treehouse Show. 11:06 Nothing, nothing much more to say about way today, execpt that it's way cool. 11:09 So, for more information on anything we talked about, 11:13 check out our show notes at youtube.com/gotreehouse. 11:15 And don't forget to join us for a30 day free trial at teamtreehouse.com/ show. 11:19 Oh, Nick, who are you on Twitter? 11:23 >> I'm @nickrp. 11:25 Who are you? 11:25 >> I'm @jseifer. 11:26 >> Of course if you'd like to see more videos like this one about web design, 11:27 web development, mobile, business and so 11:31 much more, just like Jason said, be sure to check us out at teamtreehouse.com/show. 11:34 So thank you so much for watching, and we will see you next week. 11:39 [MUSIC] 11:42

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

Sign up