Episode 89: Typography, Sidebars, Style Guides

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 the things web design, web development, and more. 0:04 >> In this episode there'll be talking 0:07 about typography, sidebars, style guides, and more. 0:09 >> Let's check it out. 0:13 [MUSIC]. 0:14 First up is typebase, which is a minimal customizable typography style sheet. 0:20 I know that because it says it right here on the web page. 0:26 >> Words on a page. 0:29 >> You can use less and sass versions so that 0:30 you can easily modify it for your own web project. 0:34 So, let's view the demo and see exactly what this does. 0:37 Basically, it sets a typographical base, not sure if that's 0:41 a word, but I just coined it here on the show. 0:46 History in the making, and you can see that it sets a pretty nice base 0:49 for all of your different headlines, your paragraphs and so on. 0:54 And it even does other things like lists and block quotes, and you can download it 0:59 on GitHub, or just download it right here, for direct download from GitHub. 1:05 And it even plays nice with normalize.css. 1:12 Not a whole lot to say about it, but if you're just building a 1:16 super simple website, maybe you don't want 1:19 a big framework like foundation, or bootstrap. 1:22 You can just go ahead and use something 1:26 like this to just get your typography going. 1:28 >> Yeah, this is great for people like me who 1:30 don't feel like doing maths when creating a a webpage. 1:32 Just like okay, here's the, here's the base font 1:35 size just do do all those calculations for me. 1:37 >> It is a little bit more complicated than it would 1:39 seem, so it's nice to have that already done for you. 1:42 >> It's just, it's just math. 1:44 >> Yeah, who wants to do that? 1:46 >> No one. 1:48 [SOUND] Next up we have a plugin called a content generator plugin, 1:48 this is for the sketch application, of which version 3 was recently released. 1:53 Now, this plug-in's actually really, really neat. 1:59 If you are inside Sketch, here's a, here's a demo right here. 2:01 You'll see it's got a bunch of shapes and then you click on the menu up at the top. 2:05 I love that there are animated GIFs in the read me right here. 2:11 Look at that. 2:13 Oh okay, look at that, boom, you got avatars all the way in there. 2:14 All you have to do is select the items, and you can create a new one. 2:17 Same thing works for names, and also place holder text. 2:20 Now, this is super easy to use. 2:25 You basically just clone it from GitHub into your 2:27 sketch plugin directory, and you are good to go. 2:30 Anyway, again, not a whole lot to say about this 2:34 plugin either, just easy, simple to use, and also very useful. 2:36 >> Very nice stuff. 2:41 Well next up is slide bars. 2:42 And if you're familiar with kind of the, the hamburger menu, as it's been called. 2:45 The little three line menu, that >> I'm hungry now. 2:49 [LAUGH] That slides a menu. 2:52 >> I'm familiar with the hamburger menu. 2:55 >> That slides a menu out from a side. 2:56 We call that the, the sliders, you know, hamburgers. 2:59 >> I'd like my, I'd like my slide bar medium-rare please. 3:03 >> Anyway, you can click this button and [LAUGH] it shows a 3:06 menu on the left side, so it slides out really nicely there. 3:10 Now we've showed things like this on the show previously, 3:14 but this one is a jQuery plugin and it uses 3:18 hardware accelerated transitions, so CSS transitions, whereever possible 3:21 and it provides a fallback for animate in jQuery in unsupported browsers. 3:27 So for browsers that don't have those CSS animations, it'll just fall 3:33 right back to jQuery so you don't need to worry about it. 3:38 That is pretty nice. 3:43 Now the nice thing about this particular design 3:44 pattern is that it works on desktop devices 3:47 as well as mobile devices, and hey look, 3:49 there's another one over on the right side here. 3:51 Look at that. 3:54 So you can have two on one wed, webpage. 3:54 That's actually a little bit confusing. 3:57 But anyway, there is an API for this, so you can check out the 3:59 usage and then if you scroll down you can also look at the API. 4:03 There it is. 4:08 And if you wanna do a couple of different things for 4:09 example if you want another button to maybe close it or 4:13 toggle it or, you know, you don't want to follow exactly 4:16 the same design pattern, you can go ahead and do that. 4:19 Anyway, pretty neat stuff and again, it's a really 4:23 good design pattern to use for mobile or desktop websites. 4:27 So definitely be sure to check us out. 4:32 >> So this is a jQuery plugin for ordering a a burger? 4:33 >> That is exactly right, Jason. 4:36 >> Does the API support cheese and and various other toppings? 4:39 >> You've been working on your listening skills. 4:41 >> Yeah. 4:44 Is listening important? 4:45 >> It is. 4:46 >> How about listening? 4:46 >> Yes, that too. 4:49 >> Next up, we have a node style guide over on GitHub. 4:51 Now, we've talked about style guides before. 4:55 This is a style guide example for Node js. 4:57 Now, the benefit of using a style guide when you're coding 5:01 is that no matter who picks up the project, as long as 5:03 you're following the same style guide, the code is going to 5:06 look like it's, for the most part, written by the same person. 5:09 Now this is an example style guide, so, they just have some 5:12 suggestions about how you're going to want to style your node project. 5:16 So, great suggestions, like using two spaces for 5:20 indentation and not having any trailing white space. 5:23 Now, if you're using an editor like Sublime Text, you can 5:27 configure it to strip white space right out of the box. 5:31 Tons of different, great suggestions in here, saying actually use semicolons. 5:34 This is a hotly debated topic at times, and limiting your lines to 80 characters. 5:38 anyway, tons and tons of suggestions inside this document. 5:44 We're not gonna go over all of them because 5:47 that would be a really long and not interesting show. 5:49 But you can read it, I suggest checking it out, you can find the link in 5:52 the show notes which you can get to 5:55 at YouTube.com/gotreehouse, or search for us in iTunes. 5:56 We are the treehouse show. 5:59 >> Next up is this wonderful blog 6:01 post about improving the payment experience with animation. 6:03 So if you have a stripe checkout, this is a way that you can 6:08 use animations to add a little bit of context to what's actually going on. 6:11 So, here we have the post, and if I click this button, whoa! 6:16 We're down in the blog post. 6:19 That's pretty cool. 6:21 That has nothing to do with [INAUDIBLE]. 6:21 >> What? 6:22 Did we black out and wake up in the blog post? 6:23 >> What just happened? 6:25 >> Wow. 6:26 >> But, if we scroll down here, once 6:27 again we're using animated GIFs in this blog post. 6:28 I love this this trend of using GIFs to 6:31 show different functionality, but anyway, it says animations add context. 6:34 And what that means is when you click a button like this and a little animation 6:39 makes this panel slide out, it helps you to understand exactly what's going on. 6:45 How you're actions actually relate to the user interface. 6:51 So that's pretty neat, that's a good way to use animations to actually 6:55 add meaning to your site, rather than just using it to make something flashy. 6:59 This is another cool way to add some animation that actually, again, has 7:05 some meaning if you are paying and there's a invalid input in the credit 7:11 card form, you can actually shake the little input box here using some 3D 7:16 transforms and animations and actually say like, 7:22 hey you know, there's something wrong here. 7:26 And give the user some visual feedback. 7:30 I think OS 10 does something similar to this in the Password Input box window. 7:33 So it's nice to kind see this come across on the web. 7:38 That's very cool. 7:40 There's another one where they say, sleight of hand. 7:41 Basically, it's saying, you know, you could just show a 7:44 loading animation, but this is much nicer because it gives the 7:48 user the impression that things are happening behind the scenes 7:53 and you could even do this just entirely as an illusion. 7:57 So they're saying, we don't actually know when you receive this 8:02 SMS, they're just basically saying like, hey you know, something's happening. 8:05 It kind of compresses time and makes it seem 8:10 like things are happening faster than they really are. 8:13 Anyway, there's a bunch of other cool stuff here. 8:17 Very intelligent blog posts. 8:20 And it's great to see animations being used this way. 8:22 Its, its not too often that you see actually, animations 8:26 add context to what you're trying to say with a webpage. 8:30 Often times they're just used for kind of, flashy, pizzazz, I guess you could say. 8:33 >> You, you could say that. 8:40 >> Mm-hm. 8:41 >> You know what would really improve the payment experience? 8:41 >> What's that? 8:44 >> Making things free. 8:44 >> It's a good idea. 8:46 >> Next up, we have a project called Pour Over. 8:47 Now, this is a really, really awesome project that 8:50 is used for sorting, filtering and querying large collections. 8:53 And we say, when we say, large collections, we mean to say, you 8:57 know, erase or hashes of items like lots of 'em, they're saying, over 100,000 9:01 items that will still run at 60 frames per second inside of the browser 9:07 and you don't have to wait for a database call to render query results. 9:11 So, this is actually a really, really powerful library. 9:17 The only dependency that it has is _.js. 9:20 So, let's take a look at the basic example. 9:23 So they've got a little bit of data right here. 9:27 Now they're just starting with a few different items. 9:30 But remember, this will work with, you 9:33 know, up to hundreds of thousands of items. 9:34 So the first thing that you do is create a new pour over collection and 9:37 then from there, you can filter it 9:42 based on the different attributes of that collection. 9:44 So right here they create a new filter 9:48 for mythology, and gender they're using different mythological monsters. 9:49 So they have the mythology right up here and then filter also by sex. 9:55 Then there is a hobbies filter, where you can include filters for hobbies. 10:02 anyway, you can add a ton of different filters. 10:08 You can do unions, sorts, querying, tons of things like that. 10:11 But you have your collection, all you have to do 10:15 is chain it and then you can call your collection and 10:17 your filter, give it the filter that you want and 10:20 then give it a query for what you are looking for. 10:23 And then, boom, you are good to go. 10:27 Now there are just a ton of different options here. 10:29 Those were a couple of basic examples. 10:32 There are advanced views, advanced filtering, just a ton of different things. 10:35 This is a super powerful library. 10:39 Now when you do have hundreds of thousands of objects that you need to render in 10:42 the browser, this is a great choice for 10:46 actually getting it done and getting it done quickly. 10:48 So definitely check it out. 10:50 >> Yeah, that's really smart. 10:52 I mean if you've ever tried to iterate over a collection and like a 10:53 hash table or an array, or even you know, more complex data types like 10:56 a list or a dictionary, it it still can take a really long time, 11:00 so it's cool that somebody made something that really optimized that in the browser. 11:04 >> Yeah. 11:08 Also I like the, or, I like the name of the project, cuz it's kind of a a pun. 11:09 >> Mm. 11:12 >> You know, pour over. 11:12 >> Mm-hm. 11:14 >> Like, look through. 11:15 >> We really poured over this this project didn't we? 11:16 >> Yeah, we did. 11:21 >> Alright, well next up [LAUGH] is this site called CSS 11:22 Vocabulary, and basically, if you're not familiar with some of 11:27 the vocabulary for describing CSS syntax, this is the site for you. 11:32 And even if you're a little bit more advanced with CSS, this 11:37 can really help you understand the different parts of a CSS code. 11:41 So, for example, if we click on something like a comma. 11:46 We can say, okay, well yeah, obviously that's a comment. 11:51 But what about a statement? 11:55 Well, a statement is anything like this and this is commonly 11:57 confused with a declaration, which is actually only in 12:02 the stuff inside of the curly braces and not the selector. 12:07 So you can learn a lot about CSS 12:13 vocabulary just by clicking through these different links here 12:16 and it will highlight interactively which parts of the 12:21 code are actually being described by that particular term. 12:25 You can also just click on the code if you want 12:31 to know you know, what's the, what are these curly braces? 12:33 Well, that's a block and it's also a declaration block. 12:37 Or if you click on like something like this, well 12:41 that's a value and these are going to be properties. 12:45 So, this is super helpful if you're just learning or if you're even more advanced. 12:49 And you need to talk about CSS with some of your teammates. 12:54 Maybe you're collaborating on something and you need to get very specific 12:58 about what you're talking about, whether it's a selector or a block, 13:02 or declaration, or what have you, so very cool stuff, it's very 13:06 important to know this especially if you are working on a team. 13:10 >> Yeah, that's really really cool project. 13:14 >> Mm-hm. 13:16 >> Next up we have a project called Fluid Box, 13:17 this is yet another Light box, but it's actually pretty cool. 13:19 If we check it out down here, the main part of fluid box is, let's see. 13:24 We got this picture right here. 13:28 We click on it, and boom, it does the whole light box thing. 13:29 So what is so great about this? 13:33 Well, all you need to do is add data Fluid 13:35 box to your link, and then you are good to go. 13:39 Now, the great thing about this is it works responsively. 13:43 So you can link to a higher resolution alternative without doing anything. 13:47 Here's a placeholder image that's 200 by 200. 13:51 Click on that. 13:54 All right, cool. 13:54 It fluid boxes up to the width and height of the screen. 13:55 So anyway, yeah. 14:00 Quick plugin, not too much to say. 14:01 It is it has fluid transitions and it is responsive and it's wonderful. 14:03 So, go ahead and check that out we'll have a link to it in the show notes. 14:09 >> Very nice stuff. 14:12 Well that is all we have time for this week. 14:13 I am @nickrp on Twitter. 14:15 >> And I am@jseifer. 14:17 For more information on anything we talked about check our 14:18 show notes at youtube.com/gotreehouse or search for us in iTunes. 14:21 We are The Treehouse Show. 14:24 >> And of course, if you'd like to see more videos like this one about web 14:26 design, web development, mobile business, and so much 14:30 more, be sure to check us out at teamtreehouse.com. 14:33 Thank you so much for watching, and we will see you next week. 14:36 [MUSIC] 14:42

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

Sign up