Episode 150: CSS Shapes, JavaScript, Font Combinations

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:05 >> In this episode we will be talking about CSS shapes, JavaScript, 0:08 font combinations and more. 0:12 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is this really cool article over on the CSS-Tricks 0:20 blog called Working with Shapes in Web Design. 0:24 >> This sounds like it could really get my website in good shape. 0:28 Don't be such a square, Nick. 0:34 >> All right. 0:35 >> We can circle back to that if you want. 0:38 >> Speaking of circles you can use the border radius property 0:40 to set the border radius on an element to make it a circle. 0:44 Look it really did come full circle. 0:49 Bam. >> Wow. 0:51 >> Amazing. You can also create shapes. 0:52 >> [INAUDIBLE] >> You can also create shapes using 0:55 the border property. 1:00 >> Really, that borders on crazy. 1:02 >> And you can set some of the borders to be transparent and 1:05 it will create shapes like this, and there's a few more methods here. 1:09 Let's look at this one, rotating shapes with transfer. 1:14 >> Ooh. 1:16 Can you rotate in directions and also use shapes of animals? 1:18 >> I think we can. 1:23 >> I would like an arrow going up and a dog. 1:24 An up dog. 1:28 >> Where did you hear? 1:31 >> On the website. 1:33 >> Up dog? 1:34 Okay. 1:35 Anyway, you can take this square, turn it on its side and call it a diamond. 1:37 Look, shapes. 1:41 >> Marketing. 1:42 >> There's also many other techniques here, and 1:43 that's really what this blog post is about. 1:46 It's about all the different techniques that you can use, 1:48 not necessarily just the different shapes, but the techniques that you can use to 1:52 create different shapes with- >> Look at that, you can use an ellipse. 1:55 >> CSS. You can use an ellipse. 1:59 >> Can you do a heart shape? 2:01 Like a total ellipse of the heart? 2:04 >> I think you could make a total ellipse of the heart. 2:06 >> Cool. >> Mm-hm. 2:11 >> Next up we have a project called purifycss. 2:12 Now what this does is runs your CSS through a filtration system 2:15 thereby removing all impurities. 2:20 No, what it really does is remove any unused CSS declarations from your website. 2:23 Now this also works with single-page applications. 2:29 Super easy to use, just go ahead and install it via NPM. 2:32 And then here is a little example about how it worked. 2:37 Anytime your class name is intact in your codes it will leave that in the site. 2:41 But if not you can download a new version of your CSS that 2:47 has all of the unused declarations removed. 2:52 And then boom you are good to go. 2:55 Now you can save a ton of bandwidth for 2:57 your users by removing unused CSS declarations. 3:00 Now this is gonna be particularly important if you are using a big CSS or 3:03 JavaScript framework that has 3:08 a lot of stuff that you're probably not using all of it in your code. 3:11 Things like Bootstrap, Foundation, tons of CSS, and 3:14 odds are you're not using all of it. 3:17 So Purify is a great way to go if you are trying to save your users some bandwidth. 3:19 >> Very cool stuff. 3:24 Well next up is JavaScript the Right Way, and I feel like I must have been 3:25 doing JavaScript the wrong way, because- >> Or the left way. 3:32 >> Yeah. 3:36 >> Or the up dog way. 3:36 >> You keep saying that. 3:39 Anyway, on this site you can choose your path. 3:42 So if you're just getting started with JavaScript here are some good resources 3:47 for getting started, it tells you, well, what is JavaScript? 3:52 What's the current version? 3:56 What is the DOM, and then it gives you some information about JavaScript code 3:57 style such as conventions and linting, and let me scroll back up to choose your path. 4:02 There's other stuff, for example, such as podcasts and 4:09 screencasts but you're already watching one of those so need to click there. 4:14 And then you can also click on something like WHO TO FOLLOW. 4:18 And you'll notice that Jason is not listed here. 4:23 So that's how you know that this is an excellent resource for 4:28 actually learning something about JavaScript. 4:32 >> That's mean spirited and upsetting. 4:35 Next up we have a JavaScript style guide put out by AirBnb. 4:42 Now style guide is really important to follow 4:45 when you are working with a large team. 4:48 It will establish conventions that everybody should use when creating code 4:50 thereby making it easier for new members to join their team. 4:55 >> Also helpful when you're getting dressed in the morning. 4:58 >> This is not going to help you get dressed in the morning. 5:01 Oh wow, this shirt doesn't go well with these arrow functions. 5:05 Anyway, so this is an ECMAScript 6 version of the JavaScript style guide. 5:09 There is a ECMAScript 5 only guide as well that you can follow. 5:14 Now, we're not gonna go over everything here, because as you can see, 5:18 there are a ton of different options. 5:22 But what I really like about this guide is, 5:25 if we scroll down a little bit over here to object creation, 5:28 it shows you a bad and good way to create different objects. 5:32 Now the whole style guide repeats this pattern of showing you a bad and 5:38 good way of doing things, which is going to help you when writing your code. 5:42 It's gonna make things just a bit more readable and also lets you learn from it. 5:46 Maybe like learn some new patterns that you haven't seen before. 5:49 Now like I said we are not gonna go over everything on here but 5:53 there is a ton of good stuff in here. 5:56 We have this, for arrays, for example, use the literal syntax for array creation. 5:59 We don't do new array, just create some brackets right there. 6:05 Boom, good to go, and there, in some browsers, 6:09 is a little bit of a performance advantage to doing that. 6:12 So you know that they really did their homework when creating this style guide. 6:15 Now next up we have the structuring and that is kind of how I feel about 6:20 the Treehouse show sometimes, and also mine and Nick's relationship in general. 6:24 So anyway if you are in need of a good JavaScript style guide go ahead 6:29 check out this link in the show notes that's right below this video. 6:33 Next up, we have this website called Great Font Combinations and 6:37 that is a great name for this website, because that's exactly what it is. 6:41 If you scroll down here you can see some different combinations of fonts. 6:45 >> Is there a Nick font and a Jason font? 6:52 >> There is not. 6:54 And I'm not sure really why there would be. 6:56 >> There should be. 6:59 >> So there's a couple of different examples here of different 7:01 types of website or applications. 7:05 And underneath each one of them they point out what fonts are being used. 7:08 So you can see well, what's the header font and what's maybe the body font. 7:14 And it's a good way to kind of get some inspiration and look at these real world 7:19 examples of font combinations because- >> I don't like that one. 7:25 It's not my type. 7:29 >> There's a lot of different website that do this. 7:33 We've covered some of them in the past. 7:36 And this is nice because it kind of points out well, 7:38 here's what these fonts actually might look like together in a real website. 7:42 >> It gives you a good baseline for choosing a font. 7:47 Period. 7:51 >> Well, Jason, I think you and I are the greatest combination. 7:53 >> Well thanks Nick. 7:59 However, we do have some mildly disappointing news. 8:03 This is going to be the last episode of the Treehouse Show. 8:06 We have really enjoyed hanging out with you guys and bringing you the latest and 8:11 greatest in front end and occasionally back end technologies. 8:15 >> And I've occasionally enjoyed hanging with Jason. 8:19 >> That's a pretty good note to end on. 8:23 Nick who are you on Twitter if they want to keep up dog with us? 8:25 >> I am @nickrp. 8:28 >> And I am @jseifer. 8:30 Thanks so much for watching. 8:32 And we'll up dog next week. 8:33 [MUSIC] 8:35 >> Okay, what is up dog? 8:37 [MUSIC] 8:39

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

Sign up