Episode 77: Sass Mixins, JavaScript Coding, Git Tips

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And your 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 >> In this episode we'll be talking about 0:08 Sass mixins, JavaScript coding, Git tips and more. 0:09 >> Let's check it out. 0:14 [MUSIC] 0:14 [MUSIC] 0:15 First up we have eight Sass mixins that you should include in your toolbox. 0:20 Let's check them out. 0:26 This is a pretty cool blog post with 0:27 eight different Sass mixins that are pretty handy. 0:29 This first one is to set a rem font size with pixel fallback. 0:32 So, for example, if a browser does not support the 0:37 rem unit, you can fall back to pixels, so it'll 0:41 output code that looks something this and if rems are not available 0:45 in the browser it will fall back to this pixels, pixel unit here. 0:51 >> Is that, is that REM attribute in the, 0:57 in the side of the box there in the corner? 1:00 REM in the corner, in the spotlight? 1:02 >> I see what you did there. [LAUGH], next up is, a SVG 1:06 background images with PNG fallback. 1:10 So for example, if a browser does not support SVGs, you can fall back to PNG 1:14 images, and it will do a retina image, 1:19 depending on the pixel density of the screen. 1:22 So there's a whole bunch of other tips here. 1:25 Pretty cool blog post, and I highly recommend you check it out. 1:27 >> Next up, Firefox 27 has been released. 1:31 We've been known to cover new browser 1:34 releases here on the show. Kind of like we're doing right now. 1:35 You, you folks are all witnessing history. So what's new in Firefox 27? 1:39 Well, the thing that most developers and watchers of the 1:43 Treehouse Show would care about is some new ECMA6 Script compatibility. 1:45 So there are new support for Ecmascript six generators. 1:50 That is a very difficult word to say, also 1:55 there is support for the new mathematical function math.hypot. 1:58 Next up there is support for the SPDY 3.1 protocol. 2:03 I know you've all been waiting to use that. 2:08 >> Ha. Finally. 2:11 >> I know. 2:11 [LAUGH] And also you can choose to deoffiscate JavaScript in the de- bugger. 2:12 This is going to be pretty useful if you're going to try to see how 2:16 certain websites write their JavaScript, if they have 2:19 used aMinifier or something like that when coding. 2:21 >> Anyway definitely check it out if you have the 2:24 desktop version of Firefox it should update automatically next time 2:26 you launch it. >> Very nice. 2:29 Well getting back to SASS we have 2:31 another blog post about mixins versus placeholders. 2:33 >> Mm-hm. 2:37 >> So, so a mixin is basically a piece of code that 2:37 allows you to write, well a mixin or kind of a function that looks like this. 2:42 So you have a set of CSS rules. 2:47 And then you can use that mixin in 2:51 other places. 2:54 So you can expand those out and they'll get processed by SASS. 2:55 >> It would be great if CSS supported that by default. 3:03 >> It would. It would be wonderful. 3:06 But fortunately, we have all these CSS preprocessors to fill in the gap. 3:08 Then there's placeholders. 3:12 Now placeholders look like they're almost the same thing. 3:14 You have, a placeholder 3:18 here which you would, you know write out your CSS rules and then you would go ahead 3:20 and use the placeholder, in your SASS elsewhere. 3:25 So, what's the difference? 3:32 Well a mixin is just going to include the code, just like you would expect. 3:33 It's just going to repeat this code. 3:39 And it can also do some fancy things with variables, it can take arguments and 3:41 go ahead and process those in various ways. 3:46 A placeholder can be extended though and that's what separates it from a mixin. 3:50 So, for example, if you wanted to write out a style rule, and wanted to include 3:57 styles from a placeholder you could add those in and then you can add your styles 4:04 on top of that so you can kind of mix them together and, mix and match them so 4:12 its pretty cool that's not exactly, everything that there is to know about it. 4:18 So, definitely be sure to check out this post 4:24 because it does go into quite a bit of detail. 4:26 It's pretty cool. 4:29 >> It also has a joke like we would have on 4:30 The Treehouse Show where it has a section called mixin it up. 4:31 >> Oh! >> Get it? 4:35 >> I do get it. >> Cause they're 4:36 talking about mix ins. >> Yeah. 4:37 Hmm. 4:38 It's a joke. 4:39 >> Next up, we have a very long article 4:40 on the Mozilla developer network called a re-introduction to JavaScript. 4:43 >> I have a feeling you're going to summarize it for us. 4:48 >> No, I'm going to read this whole thing word for word. 4:50 This is going to be a very slightly longer 4:53 and more interesting version of what we normally have. 4:55 >> Exciting. 4:57 >> On The Treehouse Show. 4:57 No so this is everything you'd expect from an 4:59 introduction to JavaScript, or a reintroduction. 5:02 So, they summarize the history of the language and then go through 5:04 the different types of, JavaScript objects, 5:08 how they work numbers, strings, other 5:11 types, variables and if you notice my browser is crashing a little 5:14 bit, but hey, that's what happens when you do a show live. 5:18 Anyway, next I want to really take a look at this custom 5:20 object section because it's really, really interesting and it goes through how 5:23 to write custom objects and what happens when you add 5:27 methods to objects and just a whole bunch of stuff. 5:32 So they start with this make person function which returns 5:34 an object of the first and last name of the person. 5:39 Then they say, okay this is how you do a full name 5:42 for the person and they have another function for reversing the full name. 5:45 They show you how it works and okay, great it works but it's pretty ugly. 5:49 Oh no, what do we do? 5:53 Well, we can iterate and make it a little bit better. 5:55 So they re-write the person function and again, 5:58 it works but it's just slightly more elegant. 6:01 So they go through and they iterate on this whole person object, 6:04 the creation of it and even launch into the prototypes behind it. 6:07 For this reason I'd say its a really, really valuable article to sit down and 6:11 read and maybe you'll pick up on something 6:14 you haven't seen before about the JavaScript language. 6:16 You'll be able to find this on our show notes which you can 6:19 get to at youtube.com/gotreehouse or search for 6:21 us on iTunes at" The Treehouse Show." 6:24 >> Very nice. 6:27 Well, if you've ever tried to add a share 6:28 button to your site, you know that it can be. 6:30 >> All the time. >> A little bit cumbersome. 6:32 You know, you need to add Twitter and Facebook and Google Plus maybe a few 6:34 other social networks and all of them have 6:39 their own separate pieces of JavaScript and sometimes 6:41 they load in iFrames, they take up a lot 6:44 of space, they're hard to style, there's just all kind 6:46 of problems with these and you're always, ya know, 6:49 googling for them to just look up the latest one. 6:50 >> Wouldn't it be great if that was like already done for you? 6:53 >> Well, fortunately Jason, there is a Jquerry plugin Called Share and you can 6:56 include it into your site and it will pop up Twitter, Facebook and Google Plus. 7:02 And I'm sure if you're clever enough, 7:07 you can probably extend it as well to include other social networks. 7:09 What does it look like? 7:13 Well, here's the Share button. 7:15 Click on it. Boom, look at that. 7:17 >> Boom. >> Just pops right up there. 7:18 >> Wow, it's like ready to party; let's share everything. 7:20 >> Bam. 7:22 But, yeah, it's much better than including all the share buttons because, it 7:24 doesn't have all that extra JavaScript and it's much easier to style 7:30 than those custom buttons that come from the sites themselves. 7:35 >> Yeah, I think what you would want to do is make that 7:38 share button appear dynamically on your page 7:41 whenever someone tries to interact with anything. 7:44 Ya know, oh, click this button, no, why don't you 7:47 share this first, then we'll let ya into the site. 7:48 That's a really nice pattern. 7:50 >> Yeah, I like that. Kind, kind of like that. 7:51 >> Maybe pop up a model. 7:53 >> Yeah. >> And then another model. 7:54 >> Like this page before you can see it. 7:55 Okay, now post it on Twitter. >> Yeah. 7:57 Share it first, and then, 7:58 then read it and discover. >> Yeah. 8:00 >> Oh my gosh, I've made a horrible mistake. 8:01 >> Make a video of yourself reviewing this page favorably 8:03 on Google Plus, and then you can see the content. 8:06 >> I think we're done here. 8:08 Yeah, we're, we're definitely onto something. 8:09 Next up, over on the Ochronus blog, we 8:11 have a post called, Get tips from the trenches. 8:15 This is, as you would expect, a summary of different get 8:18 tips that you can apply into your daily work flow to 8:22 just make working with Git a little bit easier. 8:25 So, they've got some really great tips here, check which branches have merged, 8:29 find anything in your entire Git history, 8:33 see which branches have the latest commits. 8:36 I'm not gonna read all this to you. 8:38 Just trust me that it is a great article and you should check it out. 8:40 >> I trust you Jason, but only a little bit. 8:44 Next up is a, pattern library from A List Apart. 8:46 A List Apart of course is a very popular web blog. 8:50 They post awesome articles about web design and development. 8:53 They have a pattern library which basically shows all 8:56 of the stylings for their sites. So they have a section for swatches. 9:01 So here's all the different colors they use on their site. 9:06 Here's some typography. 9:09 And they have all of the different IDs and classes that they use throughout 9:10 their site to kind of show what that styling will look like if you applied that 9:15 particular piece CSS now you could go ahead and copy this kind of idea 9:20 and maybe take your style sheet or you know your SASS style sheet, and go ahead 9:27 and create a list of all the different styles that you're using with an example. 9:34 And that way if you're working on a team, 9:39 it makes it really easy to share 9:41 what those different things are gonna look like. 9:44 So, maybe somebody else wrote the styling and then, you 9:46 know, another designer wants to go ahead and use it. 9:51 But, they might not know exactly what to expect if they just 9:54 use an h3 or an article element or something of that nature. 9:58 So, it's really a cool thing to have if you're working on a team, 10:02 certainly. >> Yeah, definitely. 10:06 That style guide is very, very useful. 10:07 >> Mm-hm. 10:09 >> So, that's about all we have time for today. 10:10 Nick, who are you on Twitter? 10:12 >> I'm @nickrp. >> And I am @jseifer. 10:13 For more information on anything we talked 10:16 about, check out our show notes at youtube.com/gotreehouse. 10:17 You can also subscribe to the show in iTunes. 10:21 Search for The Treehouse Show and leave us a rating. 10:23 And of course, if you'd like to see more 10:26 videos like this one about web design, web development, 10:28 mobile, business and so much more, be sure to check us out 10:31 at teamtreehouse.com,, thanks so much for watching and we'll see you next week. 10:34 >> [MUSIC] 10:39

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

Sign up