Episode 139: jQuery Boilerplate, Sass, Maps

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching, the Treehouse Show, your weekly dose of internets, 0:01 where we talk about all things web design, web development and more. 0:04 >> In this episode we'll be talking about jQuery Boilerplate, Sass, maps, and more. 0:07 >> Let's check it out. 0:12 [MUSIC]. 0:13 >> First up, we have the jQuery Boilerplate website. 0:18 Now, as you might expect from the name, 0:22 this gives you all sorts of boilerplate to jumpstart jQuery plugin development. 0:24 And I can tell that because it says it in the header of the website right there. 0:29 So, here is the most popular template for beginners and above. 0:34 That means somebody who has more skill than a beginner, 0:39 not necessarily somebody who's physically above a beginner. 0:41 And this is very, very easy to use. 0:45 Include jQuery. 0:46 Include this boilerplate.min and you are good to go. 0:47 So, here we go. 0:50 This is the defaultPluginName. 0:52 That's what you will be redefining when you create your own plugin. 0:54 Now, the idea here is that you have this boilerplate plugin. 0:58 And then, you go through, and 1:01 you change it to do what you actually want your plugin to do. 1:03 We go ahead and look at this demo. 1:07 Here is the index.html file. 1:09 That shows you the minimum that you need to get started. 1:11 Now, this is the directory structure, 1:16 if we look in the dist directory that contains the boilerplate code. 1:18 Now, this is going to be what you're going 1:22 to be replacing when you create your own jQuery plugin. 1:24 So, here is what the plugin does. 1:28 This is the element it works on. 1:30 Here are the default settings. 1:31 Now, all of these different jQuery Boilerplate plugins that they link to 1:34 here are going to just save you time if you are going to be creating your 1:37 own jQuery plugin. 1:41 So, if this is something you plan on doing, 1:42 definitely check this out because it's going to speed up development quite a bit. 1:44 >> Nice. Well, next up is SassMe. 1:48 It's a, you can visualize Sass color functions in real time without compiling. 1:51 So, normally you would have to compile your Sass code in order to see how 2:00 these color functions are playing out, but this does it automatically in real time. 2:05 So, I can type in a color here. 2:10 So, I'll type in like, an orange color. 2:12 And that is going to show me the output color, so pretty boring so far. 2:15 That's what I put in, that's what came out, same stuff. 2:21 Well, if we use some of these sliders here I can darken this color, 2:23 I can desaturate it, I can adjust the hue. 2:30 So, these are functions that you can use in Sass. 2:35 Adjust hue, desaturate, and darken. 2:39 But this shows you not only what that will actually look like, but 2:43 also what it will look like in code. 2:48 So, you can use something that's more human and 2:51 familiar like these little sliders. 2:54 And then, it will output the Sass code that you need to do that and 2:56 give you the output color. 3:01 So, when would you use this? 3:02 This is nice if- >> Whenever you wanna Sass someone. 3:04 >> That's right. 3:07 If you just wanna Sass me. 3:08 [LAUGH] No. 3:09 This is nice if, for example, you are trying to make a new website color scheme. 3:10 And you could, theoretically, just put in a single color and 3:17 then have all sorts of darkened desaturate or saturate or 3:22 hue adjustments that use that input color to create an entire color scheme. 3:27 >> Kinda like on the materialize framework we talked about last week. 3:33 >> Exactly. 3:36 So, this is a pretty handy tool. 3:37 Definitely be sure to check this out. 3:40 >> Very cool. 3:42 Next up we have gitignore.io. 3:43 This is going to create useful gitignore files for your project. 3:46 >> I feel like I'm gitignored all the time. 3:50 >> I don't know who said that but 3:52 I'm going to just move on with what we were talking about. 3:54 Now, a gitignore file is something that will tell git which files, 3:56 as you would expect, to ignore from the source code control in your project. 4:01 So, for example, if we start typing in something here we got, okay, 4:06 we have a bower gitignore. 4:10 What happens when we generate that? 4:11 Okay, it tells us to ignore the bower components, cache registry, and 4:13 temp directory. 4:18 Now, if we're doing a rails site, for example, and 4:19 hit generate, it will show us what rails files to ignore, 4:23 as well as comments saying which ones are going to specifically be left out. 4:28 Now, depending on what kind of project you're working on, 4:33 it's easy to bet that there is a gitignore avail, available for it. 4:35 So, go ahead and check this out if you need to ignore some files very quickly. 4:39 Or a person. 4:45 >> Next up is slick. 4:47 It is dubbed the last carousel you'll ever need. 4:49 >> Because nobody uses carousels any more. 4:53 >> [LAUGH]. 4:56 That's not true. 4:56 There are some pretty cool demos of slick here. 4:59 So, let's check those out. 5:02 It will text down here and we can hit these buttons. 5:04 And whoa, look at that. 5:07 It will cycle through these different images here and 5:09 it also has little dots at the bottom just like you'd expect. 5:13 You can click on those and jump to any point in the carousel. 5:17 You can also have multiple items in a single slide. 5:20 So, let's say that you are using a responsive framework like Bootstrap or 5:24 Foundation and you wanna have multiple items at certain 5:31 screen resolutions inside of your slider. 5:35 Well, with Slick you can do that and just sort of create a context to contain them. 5:39 So, of course, it's also responsive itself. 5:45 I won't demonstrate that but you get the idea. 5:48 You can have variable widths. 5:52 You can have ones that change heights. 5:54 So, let's check that out. 5:55 When you scroll through those, these are different heights. 5:57 And Slick will actually figure out how to adapt to it. 6:00 And so much more. 6:05 So, how do you use this? 6:07 Well, you set up your HTML mark up. 6:09 You move the Slick folder, which you can download here into your project and 6:13 then, you add slick.css into your head. 6:18 And it also does require jQuery. 6:23 But I've actually used this on some, 6:26 some of my own projects and it's it's pretty good. 6:30 I, I really had some good experiences with this and I definitely recommend it. 6:34 That you check it out. 6:39 >> Very cool. >> Yeah. 6:40 >> Next up, we have a project called jQuery Mapael. 6:42 Now, this is going to be a vector maps. 6:45 It's a jQuery plugin based on Raphael.js that allows you to 6:50 display dynamic vector maps. 6:55 >> So it's maps that are based on Raphael. 6:57 >> Raphael. That's why we. 7:00 >> That's where Mapael. 7:01 >> Mapael. 7:02 Map, Mapael. 7:03 >> Got it. 7:05 >> Yeah. 7:05 Raphael.js is a small JavaScript library that simplifies working with vector 7:06 graphics on the web. 7:11 Kinda gives you a little bit of an abstraction when you're 7:12 working with these. 7:14 So, what in the world can you do with Mapael? 7:15 Let's go ahead and look. 7:18 They have all of these different examples on JSFiddle. 7:19 So, here is a map with a legend for plotted cities. 7:24 So, as we go through and hover over the different cities, 7:27 it will show you the population. 7:32 Now, this is all done with this HTML, CSS, and JavaScript right here. 7:35 So, you can see that this is very, very easy to use. 7:40 We just call the Mapael function and then, give it our different options. 7:42 So, right here we have a legend, plot, and default area. 7:47 And then, we can actually go through. 7:52 Give it the different slices which are gonna be the areas of the map. 7:54 We're gonna say, okay, this is a size of four, 7:57 it's a circle, fill it with this color and give it a label. 8:00 And then, the rest of it is just data and different plots including latitude and 8:04 longitude, which really helps when you are working with maps. 8:10 Now, there are, of course, a ton of different examples here. 8:14 We're not gonna go through all of them. 8:18 But you can see this is extremely easy to use and 8:20 is going to abstract a lot for you when you are working with different maps. 8:24 Now, there are some very thorough documentation, 8:28 which you can find in the show notes right below this video. 8:30 So, I recommend you check that out. 8:33 >> Well, that is all that we have time for this week. 8:35 I am @nickrp on Twitter. 8:37 >> And I am @jseifer. 8:39 For more information on anything we talked about, 8:40 check out the show notes below the video. 8:41 Thanks so much for watching, and we will see you next week. 8:43 [MUSIC]. 8:45

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

Sign up