1 00:00:00,620 --> 00:00:01,310 I'm Nick Pettit. 2 00:00:01,310 --> 00:00:02,120 >> I'm Jason Seifer. 3 00:00:02,120 --> 00:00:05,160 >> And you're watching The Treehouse Show, your weekly dose of Internets, 4 00:00:05,160 --> 00:00:08,220 where we talk about all things web design, web development, and more. 5 00:00:08,220 --> 00:00:12,381 >> In this episode we will be talking about CSS shapes, JavaScript, 6 00:00:12,381 --> 00:00:14,254 font combinations and more. 7 00:00:14,254 --> 00:00:15,213 >> Let's check it out. 8 00:00:15,213 --> 00:00:20,220 [MUSIC] 9 00:00:20,220 --> 00:00:24,744 First up is this really cool article over on the CSS-Tricks 10 00:00:24,744 --> 00:00:28,370 blog called Working with Shapes in Web Design. 11 00:00:28,370 --> 00:00:31,421 >> This sounds like it could really get my website in good shape. 12 00:00:34,880 --> 00:00:35,720 Don't be such a square, Nick. 13 00:00:35,720 --> 00:00:36,370 >> All right. 14 00:00:38,600 --> 00:00:40,420 >> We can circle back to that if you want. 15 00:00:40,420 --> 00:00:44,660 >> Speaking of circles you can use the border radius property 16 00:00:44,660 --> 00:00:49,480 to set the border radius on an element to make it a circle. 17 00:00:49,480 --> 00:00:51,230 Look it really did come full circle. 18 00:00:51,230 --> 00:00:52,330 Bam. >> Wow. 19 00:00:52,330 --> 00:00:55,175 >> Amazing. You can also create shapes. 20 00:00:55,175 --> 00:01:00,080 >> [INAUDIBLE] >> You can also create shapes using 21 00:01:00,080 --> 00:01:02,850 the border property. 22 00:01:02,850 --> 00:01:05,160 >> Really, that borders on crazy. 23 00:01:05,160 --> 00:01:09,137 >> And you can set some of the borders to be transparent and 24 00:01:09,137 --> 00:01:14,337 it will create shapes like this, and there's a few more methods here. 25 00:01:14,337 --> 00:01:16,962 Let's look at this one, rotating shapes with transfer. 26 00:01:16,962 --> 00:01:18,090 >> Ooh. 27 00:01:18,090 --> 00:01:22,500 Can you rotate in directions and also use shapes of animals? 28 00:01:23,890 --> 00:01:24,850 >> I think we can. 29 00:01:24,850 --> 00:01:27,490 >> I would like an arrow going up and a dog. 30 00:01:28,540 --> 00:01:29,040 An up dog. 31 00:01:31,750 --> 00:01:33,520 >> Where did you hear? 32 00:01:33,520 --> 00:01:34,950 >> On the website. 33 00:01:34,950 --> 00:01:35,450 >> Up dog? 34 00:01:35,450 --> 00:01:35,950 Okay. 35 00:01:37,060 --> 00:01:41,640 Anyway, you can take this square, turn it on its side and call it a diamond. 36 00:01:41,640 --> 00:01:42,690 Look, shapes. 37 00:01:42,690 --> 00:01:43,540 >> Marketing. 38 00:01:43,540 --> 00:01:46,970 >> There's also many other techniques here, and 39 00:01:46,970 --> 00:01:48,800 that's really what this blog post is about. 40 00:01:48,800 --> 00:01:52,220 It's about all the different techniques that you can use, 41 00:01:52,220 --> 00:01:55,280 not necessarily just the different shapes, but the techniques that you can use to 42 00:01:55,280 --> 00:01:59,140 create different shapes with- >> Look at that, you can use an ellipse. 43 00:01:59,140 --> 00:02:01,090 >> CSS. You can use an ellipse. 44 00:02:01,090 --> 00:02:03,190 >> Can you do a heart shape? 45 00:02:04,250 --> 00:02:06,590 Like a total ellipse of the heart? 46 00:02:06,590 --> 00:02:10,130 >> I think you could make a total ellipse of the heart. 47 00:02:11,210 --> 00:02:12,900 >> Cool. >> Mm-hm. 48 00:02:12,900 --> 00:02:15,950 >> Next up we have a project called purifycss. 49 00:02:15,950 --> 00:02:20,280 Now what this does is runs your CSS through a filtration system 50 00:02:20,280 --> 00:02:22,120 thereby removing all impurities. 51 00:02:23,390 --> 00:02:29,760 No, what it really does is remove any unused CSS declarations from your website. 52 00:02:29,760 --> 00:02:32,710 Now this also works with single-page applications. 53 00:02:32,710 --> 00:02:37,470 Super easy to use, just go ahead and install it via NPM. 54 00:02:37,470 --> 00:02:41,520 And then here is a little example about how it worked. 55 00:02:41,520 --> 00:02:47,590 Anytime your class name is intact in your codes it will leave that in the site. 56 00:02:47,590 --> 00:02:52,050 But if not you can download a new version of your CSS that 57 00:02:52,050 --> 00:02:55,980 has all of the unused declarations removed. 58 00:02:55,980 --> 00:02:57,430 And then boom you are good to go. 59 00:02:57,430 --> 00:03:00,330 Now you can save a ton of bandwidth for 60 00:03:00,330 --> 00:03:03,310 your users by removing unused CSS declarations. 61 00:03:03,310 --> 00:03:08,720 Now this is gonna be particularly important if you are using a big CSS or 62 00:03:08,720 --> 00:03:11,600 JavaScript framework that has 63 00:03:11,600 --> 00:03:14,420 a lot of stuff that you're probably not using all of it in your code. 64 00:03:14,420 --> 00:03:17,480 Things like Bootstrap, Foundation, tons of CSS, and 65 00:03:17,480 --> 00:03:19,270 odds are you're not using all of it. 66 00:03:19,270 --> 00:03:24,990 So Purify is a great way to go if you are trying to save your users some bandwidth. 67 00:03:24,990 --> 00:03:25,930 >> Very cool stuff. 68 00:03:25,930 --> 00:03:32,270 Well next up is JavaScript the Right Way, and I feel like I must have been 69 00:03:32,270 --> 00:03:36,130 doing JavaScript the wrong way, because- >> Or the left way. 70 00:03:36,130 --> 00:03:36,830 >> Yeah. 71 00:03:36,830 --> 00:03:39,030 >> Or the up dog way. 72 00:03:39,030 --> 00:03:40,930 >> You keep saying that. 73 00:03:42,950 --> 00:03:47,590 Anyway, on this site you can choose your path. 74 00:03:47,590 --> 00:03:52,270 So if you're just getting started with JavaScript here are some good resources 75 00:03:52,270 --> 00:03:56,510 for getting started, it tells you, well, what is JavaScript? 76 00:03:56,510 --> 00:03:57,750 What's the current version? 77 00:03:57,750 --> 00:04:02,740 What is the DOM, and then it gives you some information about JavaScript code 78 00:04:02,740 --> 00:04:09,930 style such as conventions and linting, and let me scroll back up to choose your path. 79 00:04:09,930 --> 00:04:14,640 There's other stuff, for example, such as podcasts and 80 00:04:14,640 --> 00:04:18,820 screencasts but you're already watching one of those so need to click there. 81 00:04:18,820 --> 00:04:23,450 And then you can also click on something like WHO TO FOLLOW. 82 00:04:23,450 --> 00:04:28,360 And you'll notice that Jason is not listed here. 83 00:04:28,360 --> 00:04:32,454 So that's how you know that this is an excellent resource for 84 00:04:32,454 --> 00:04:35,837 actually learning something about JavaScript. 85 00:04:35,837 --> 00:04:37,300 >> That's mean spirited and upsetting. 86 00:04:42,210 --> 00:04:45,480 Next up we have a JavaScript style guide put out by AirBnb. 87 00:04:45,480 --> 00:04:48,970 Now style guide is really important to follow 88 00:04:48,970 --> 00:04:50,920 when you are working with a large team. 89 00:04:50,920 --> 00:04:55,700 It will establish conventions that everybody should use when creating code 90 00:04:55,700 --> 00:04:58,940 thereby making it easier for new members to join their team. 91 00:04:58,940 --> 00:05:01,820 >> Also helpful when you're getting dressed in the morning. 92 00:05:01,820 --> 00:05:05,770 >> This is not going to help you get dressed in the morning. 93 00:05:05,770 --> 00:05:09,390 Oh wow, this shirt doesn't go well with these arrow functions. 94 00:05:09,390 --> 00:05:14,720 Anyway, so this is an ECMAScript 6 version of the JavaScript style guide. 95 00:05:14,720 --> 00:05:18,890 There is a ECMAScript 5 only guide as well that you can follow. 96 00:05:18,890 --> 00:05:22,360 Now, we're not gonna go over everything here, because as you can see, 97 00:05:22,360 --> 00:05:25,130 there are a ton of different options. 98 00:05:25,130 --> 00:05:28,170 But what I really like about this guide is, 99 00:05:28,170 --> 00:05:32,600 if we scroll down a little bit over here to object creation, 100 00:05:32,600 --> 00:05:38,290 it shows you a bad and good way to create different objects. 101 00:05:38,290 --> 00:05:42,770 Now the whole style guide repeats this pattern of showing you a bad and 102 00:05:42,770 --> 00:05:46,130 good way of doing things, which is going to help you when writing your code. 103 00:05:46,130 --> 00:05:49,870 It's gonna make things just a bit more readable and also lets you learn from it. 104 00:05:49,870 --> 00:05:53,330 Maybe like learn some new patterns that you haven't seen before. 105 00:05:53,330 --> 00:05:56,320 Now like I said we are not gonna go over everything on here but 106 00:05:56,320 --> 00:05:59,290 there is a ton of good stuff in here. 107 00:05:59,290 --> 00:06:05,050 We have this, for arrays, for example, use the literal syntax for array creation. 108 00:06:05,050 --> 00:06:09,580 We don't do new array, just create some brackets right there. 109 00:06:09,580 --> 00:06:12,950 Boom, good to go, and there, in some browsers, 110 00:06:12,950 --> 00:06:15,520 is a little bit of a performance advantage to doing that. 111 00:06:15,520 --> 00:06:19,070 So you know that they really did their homework when creating this style guide. 112 00:06:20,180 --> 00:06:24,870 Now next up we have the structuring and that is kind of how I feel about 113 00:06:24,870 --> 00:06:28,790 the Treehouse show sometimes, and also mine and Nick's relationship in general. 114 00:06:29,850 --> 00:06:33,170 So anyway if you are in need of a good JavaScript style guide go ahead 115 00:06:33,170 --> 00:06:35,730 check out this link in the show notes that's right below this video. 116 00:06:37,050 --> 00:06:41,110 Next up, we have this website called Great Font Combinations and 117 00:06:41,110 --> 00:06:45,520 that is a great name for this website, because that's exactly what it is. 118 00:06:45,520 --> 00:06:52,300 If you scroll down here you can see some different combinations of fonts. 119 00:06:52,300 --> 00:06:54,640 >> Is there a Nick font and a Jason font? 120 00:06:54,640 --> 00:06:56,570 >> There is not. 121 00:06:56,570 --> 00:06:59,400 And I'm not sure really why there would be. 122 00:06:59,400 --> 00:06:59,920 >> There should be. 123 00:07:01,640 --> 00:07:05,190 >> So there's a couple of different examples here of different 124 00:07:05,190 --> 00:07:08,090 types of website or applications. 125 00:07:08,090 --> 00:07:14,790 And underneath each one of them they point out what fonts are being used. 126 00:07:14,790 --> 00:07:19,840 So you can see well, what's the header font and what's maybe the body font. 127 00:07:19,840 --> 00:07:25,780 And it's a good way to kind of get some inspiration and look at these real world 128 00:07:25,780 --> 00:07:29,390 examples of font combinations because- >> I don't like that one. 129 00:07:29,390 --> 00:07:30,120 It's not my type. 130 00:07:33,370 --> 00:07:36,030 >> There's a lot of different website that do this. 131 00:07:36,030 --> 00:07:38,350 We've covered some of them in the past. 132 00:07:38,350 --> 00:07:42,610 And this is nice because it kind of points out well, 133 00:07:42,610 --> 00:07:47,370 here's what these fonts actually might look like together in a real website. 134 00:07:47,370 --> 00:07:51,446 >> It gives you a good baseline for choosing a font. 135 00:07:51,446 --> 00:07:53,735 Period. 136 00:07:53,735 --> 00:07:59,680 >> Well, Jason, I think you and I are the greatest combination. 137 00:07:59,680 --> 00:08:01,240 >> Well thanks Nick. 138 00:08:03,010 --> 00:08:06,950 However, we do have some mildly disappointing news. 139 00:08:06,950 --> 00:08:11,360 This is going to be the last episode of the Treehouse Show. 140 00:08:11,360 --> 00:08:15,910 We have really enjoyed hanging out with you guys and bringing you the latest and 141 00:08:15,910 --> 00:08:19,660 greatest in front end and occasionally back end technologies. 142 00:08:19,660 --> 00:08:22,210 >> And I've occasionally enjoyed hanging with Jason. 143 00:08:23,860 --> 00:08:25,630 >> That's a pretty good note to end on. 144 00:08:25,630 --> 00:08:28,710 Nick who are you on Twitter if they want to keep up dog with us? 145 00:08:28,710 --> 00:08:30,460 >> I am @nickrp. 146 00:08:30,460 --> 00:08:32,270 >> And I am @jseifer. 147 00:08:32,270 --> 00:08:33,860 Thanks so much for watching. 148 00:08:33,860 --> 00:08:35,546 And we'll up dog next week. 149 00:08:35,546 --> 00:08:37,462 [MUSIC] 150 00:08:37,462 --> 00:08:39,921 >> Okay, what is up dog? 151 00:08:39,921 --> 00:08:46,229 [MUSIC]