Episode 98: CSS Blend Modes, Parallax Scrolling, Adaptive Placeholders

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of internet, 0:02 where we talk about all things web design, web development, and more. 0:04 >> In this episode, we'll be talking 0:07 about typography, side bars, 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:19 I know that because it says it right here on the webpage. 0:26 >> Words on a page. 0:29 >> You can use less and sass versions so 0:30 that you can easily modify for your own web project. 0:34 So. 0:37 Let's view the demo and see exactly what this does. 0:37 Basically it sets a typographical base. 0:41 Not sure if that's a word, but I just coined it here on the show. 0:45 History in the making. 0:49 And you can see that it sets a pretty 0:50 nice base for all of your different headlines, your paragraphs. 0:53 And so on, and it even does other things like lists and block quotes. 0:58 And you can download it on GitHub or just download it right here for a direct 1:05 download from GitHub and it even places nice with normalize.css. 1:10 Not a whole lot to say about it. 1:16 But, if you're just building a super simple website 1:18 maybe you don't want a big framework like Foundation, 1:20 or BootStrap, you can just go ahead and use 1:24 something like this to just, get your typography going. 1:27 >> Yeah, this is great for people like me who don't feel like doing maths. 1:30 >> Hm. 1:33 >> When creating a, a webpage. 1:33 It's like okay here's the. 1:35 Here's the base font size, just do all those calculations for me. 1:36 >> 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 jus, it's just maths. 1:44 >> Yeah. 1:46 >> [LAUGH] >> I mean, who wants to do that? 1:46 >> No one. 1:48 >> Oh. 1:48 >> Next up we have a plug-in called a Content Generator 1:49 plug-in, this is for the sketch application of which version three. 1:53 Three was recently released. 1:56 Now, this plug-in is actually really, really neat. 1:59 If you're inside sketch, 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 readme right here. 2:10 Look at that. 2:13 Okay, look at that, boom. 2:14 You've got avatars all the way in there. 2:15 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 placeholder text. 2:20 Now this is super easy to use. 2:25 You basically just clone it from get hub into your 2:27 sketch plug in directory and you are good to go. 2:30 Anyway again not a whole lot to say about this plug in either. 2:34 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 your familiar with kind of a the hamburger 2:45 menu, as it's been called, the little three line menu. 2:48 >> Hungry now. 2:51 >> That That slides a menu. 2:52 >> Familiar with the hamburger menu. 2:55 >> That slides a menu out from the side. 2:56 We call that the sliders, you know, hamburgers. 2:59 >> I'd like my, like my slide bar medium rare, please. 3:03 >> Anyway, you can click this button and it shows 3:06 a menu on the left side, so it slides out. 3:09 Really nicely there. 3:13 Now we've shown things like this on the show previously but this one is 3:14 a jQuery plug in and it uses hardware-accelerated transitions. 3:20 So CSS transitions wherever possible. 3:25 And it provides a fall back. 3:28 For animate in jQuery in unsupported browsers. 3:30 So for browsers that don't have those CSS animations, it'll just fall 3:35 right back to jQuery, so you don't need to worry about it. 3:40 That is pretty nice. 3:43 Now, the nice thing about this particular. 3:44 Design pattern is that it works on desktop devices as well as mobile devices. 3:47 Hey look, there's another one over on the right side here. 3:52 That's so you can have two on one web page. 3:54 That's actually a little bit confusing. 3:57 Anyway, there is an API for this you can check out the usage 3:59 and then if you scroll down you can also look at the API. 4:04 There it is. 4:08 And if you wanna do a couple of different things, if, 4:09 for example, if you want another button to maybe close it 4:13 or toggle it or, you know, you don't want to follow 4:16 exactly 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 this out. 4:32 >> So this is a jQuery plug in for, for ordering burger. 4:33 >> That is exactly right Jason. 4:36 >> Just 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 >> Yes, it is. 4:46 >> How about listening? 4:46 >> Yes, that too. 4:49 >> Next up, we have a node style guide over on GetHub. 4:50 Now, we've talked about style guides before, this 4:54 is a style guide example for node JS. 4:57 Now, the benefit of using a style code when you're coding is that no matter who. 5:01 Picks up the project. 5:05 As long as you're following the same style guide the code is going 5:06 to look like it's, for the most part, written by the same person. 5:08 Now this is an example style guide. 5:12 So they just have some suggestions about how you're going to want to. 5:14 Style your node project. 5:18 So, great suggestions like using Q 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:30 Tons of different great suggestions in here saying actually use semicolons. 5:33 This is a hotly debated. 5:38 Topic at times. 5:39 And limited your lines to 80 characters. 5:41 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. 5:52 You can find a link in the show notes which you can get 5:53 to at YouTube.com/Gotreehouse or search for us 5:55 in iTunes, we are The Treehouse Show. 5:58 Next up is this wonderful blog post 6:01 about improving the payment experience with animation. 6:03 So if you have a Stripe Checkout. 6:08 This is a way that you can use animations to 6:10 add a little bit of context to what's actually going on. 6:12 So, here we have the post and if I click 6:16 this button, woh, we are down in the blog post. 6:18 That's pretty cool. 6:21 That is nothing [CROSSTALK]. 6:22 >> So we've logged out and wake up in the blog post. 6:22 >> What just happened is- 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 just to show. 6:31 Different functionality, but anyways, so animations add context and what that 6:35 means is, when you click, a button like this and a little, 6:40 animation makes this panel slide out, it helps you to understand exactly 6:45 what's going on, how your actions actually relate to the user interface. 6:50 So that's pretty neat. 6:55 That's a good way to use animations to actually add meaning. 6:56 To your site, rather than just using it to make something flashy. 7:00 This is another cool way to add some animation that 7:05 actually, again, has some meaning if you are paying and 7:09 there's a invalid input in the credit card form, you 7:14 can actually shake the little input box here using some 3D. 7:18 Transforms animations and actually say like hey, you know, there's 7:24 something wrong here and give the user some visual feedback. 7:29 I think OS10 does something similar to this in the password input box window. 7:33 So, it's nice to see this come across on the web. 7:38 It's very cool. 7:40 There's another where they say sleight of hand. 7:42 Basically it's saying, you know, you could just show a loading animation. 7:44 But this is much nicer, because it gives the 7:50 user the impression that things are happening behind the scenes. 7:52 And you could even do this just entirely as an illusion. 7:57 So they're saying, we don't actually know. 8:02 When you receive this SMS they're just 8:04 basically saying like hey, you know, something's happening. 8:07 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, and it's great to see animations being. 8:20 Used this way. 8:25 It's not too often that you see actually animations that add 8:26 context to what you're trying to say with the web page. 8:30 Often times they're just used for kind of flashy pizzazz, I guess you could say. 8:33 >> You could say that. 8:40 >> Mm-hm. 8:41 >> You know what would really improved that payment experience? 8:42 >> 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 8:50 that is used for sorting, filtering, and querying 8:52 large collections, and when we say large collections 8:55 we mean, say, arrays, or hashes of items like. 9:00 Lots of them they are saying over 100 9:03 thousand items that will still run at 60 fps 9:05 inside of the browser and you dont have to 9:10 wait for a database call to render query results. 9:13 So this is actually a really really powerful 9:17 library the only dependency that it has is _.js. 9:20 So, let's take a look at the basic example. 9:24 So they've got little bit of data right here. 9:28 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 is 9:42 based on the different attributes of that collection. 9:44 So right here they created a new filter for mythology and gender. 9:48 They're using different mythological monsters so they have 9:51 the, mythology right up here, and then filter also. 9:56 By sex. 10:00 Then there is a hobbies filter, where you 10:02 can include filters for hobbies, anyway, you can 10:05 add a ton of different filters, you can 10:08 do unions, sorts, querying, tons of things like that. 10:11 Once you have your collection, all you have to do 10:15 is chain it, and then you can call your collection and 10:18 your filter, give it the filter that you want, and 10:21 then give it a query for what you are looking for. 10:24 and then boom, you are good to go. 10:27 Now, there are just ton of different options here. 10:29 Those were a couple of basic examples. 10:32 There are advanced views, advance 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 10:42 objects that you need to render in the browser, this 10:45 is a great choice for actually getting it done, 10:47 and getting it done quickly, so definitely check it out. 10:49 >> Yeah, that's really smart, I mean, if you've ever tried 10:52 to iterate over a collection, and like a hash table or an 10:54 array, or even, you know, more complex data types like a 10:58 list or a dictionary, it still can take a really long time. 11:01 So it's cool that somebody made something to really optimize that in the browser. 11:04 >> Yeah. 11:08 Also I like the name of the project because it's kind of a pun. 11:09 You know, pore over. 11:12 Like look through. 11:15 >> We really pored over this project, didn't we? 11:17 >> Yeah, we did. 11:21 >> Well next up is this site called CSS vocabulary and 11:22 basically if you're not familiar with some of the vocabulary for describing. 11:28 CSS syntax, this is the site for you. 11:34 And even if you're a little bit more advanced with CSS, 11:37 this can really help you understand the different parts of CSS, code. 11:41 So, for example if we click on something like 11:47 a comment, we can say, ok, well yeah, obviously. 11:50 That's a comment but what about a statement? 11:53 Well a statement is anything like this and this is commonly 11:57 confused with a declaration which is actually only the stuff 12:02 inside of the curly braces and not the selector. 12:07 So you can learn a lot about. 12:13 CSS vocabulary just by clicking through these 12:17 different links here and it will highlight 12:21 interactively which parts of the code are 12:24 actually being described by that particular time. 12:28 You can also just click on the code if 12:31 you want to know, what, whatever these curly braces is. 12:33 Well, it is a block, and it is also. 12:37 A declaration block. 12:39 Or if you click on something like this. 12:41 Well, that's a value. 12:44 And these are going to be properties. 12:45 So this is super helpful if you're just learning or if you're even 12:49 more advanced 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. 12:58 Very specific about what you're talking about, whether it's 13:01 a selector or block or declaration or what have 13:05 you, so, very cool stuff, it's very important to 13:09 know this, especially if you are working on a team. 13:11 >> Yeah, that's a really, really cool project. 13:14 >> Mm-Hm. 13:16 >> Next up, we have a project called fluid box, 13:17 this is let another light box, but it's actually pretty cool. 13:20 If we check it out down, here the main part 13:24 of Fluidbox is, let's see, we've got this picture right here. 13:26 We click on it, and boom, it does the whole lightbox thing. 13:29 So what is so great about this? 13:33 Well, all you need to do is add data. 13:35 FluidBox to your link and then you are good to go. 13:38 Now the great thing about this is it works responsively. 13:44 So you can link to a higher resolution alternative without doing anything. 13:47 Here's a place holder image that's 200 by 200. 13:51 Click on that. 13:54 All right, cool. 13:55 It Fluidboxes up to the width and height of the screen. 13:55 So anyway, yeah, quick plug-in, not too much to say. 14:00 It is it has fluid transitions. 14:03 And it is responsive, and it's wonderful. 14:06 So go ahead and check that out. 14:09 We'll have a link to it in the show notes. 14:10 >> Very nice stuff. 14:12 Well that's all we have time for this week. 14:13 I am @nickrp on Twitter. 14:15 >> And I am @jSeifer. 14:16 For more information on anything we talked 14:18 about, check out our show notes at youtube.com/gotreehouse/. 14:19 Or search for us in iTunes, we are the Treehouse Show. 14:23 >> And of course if you'd like to see more videos like 14:26 this one about web design, web 14:28 development, mobile business, and so much more. 14:30 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:39

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

Sign up