Episode 88: Gulp, Sketch 3, Bud

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 [MUSIC] 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'll be talking about Gulp, Sketch three, Bud and more. 0:08 >> Let's check it out. 0:13 [MUSIC] 0:15 >> First up, we have a project called gulp.js. 0:20 This is the streaming build system written in JavaScript. 0:23 Now, if you've heard of Grunt, it is pretty similar. 0:28 It is just another noise that you might make. 0:30 So gulp.js take the idea of Unix pipes and uses that to form a build system. 0:34 So, if we take a look at the Get Started link right here, you see it's a pretty 0:41 easy to install, just mpm install it, create a 0:45 gulp file.js and then you are ready to go. 0:48 Let's go ahead and check out the recipes and articles section. 0:53 So, if we take a look at the. 0:57 API documentation. 0:59 If we want to say, compile a list of j 1:01 templates for example, you can see we can say gulp. 1:04 We give it a source and then after 1:08 that, what's really interesting is the pipe command. 1:11 We can pipe it into jade, minify, and then specify a destination. 1:14 Now if we go back here a little bit, 1:19 you can see we have The documentation right here. 1:21 And, it can do pretty much anything that Grunt can do right now. 1:25 So, you can give it some paths. 1:29 Right now, it'll do a compilation of your JavaScript and images. 1:31 And then it can also watch for changes, in both your scripts and images. 1:36 Now, for right now, it supports most of the things that Grunt does via plugins. 1:41 It's a different take on using a build system like that. 1:45 Grunt is a lot more imperative. 1:50 This allows you to do more things with less code, 1:52 so check it out if you're getting tired of Grunt. 1:55 >> Very nice. 1:59 Well next up is a blog post called what's new in, What is new in Sketch three. 1:59 And as the name implies it goes over 2:06 the new features in the recently released Sketch three. 2:07 First thing that's new in Sketch three is a new user interface. 2:11 Now if you're not familiar with Sketch it's basically 2:16 an alternative to illustrator and Photoshop where you can edit. 2:19 Imagery, so if you have images that you want to edit 2:24 for use on your website, sketches an alternative to Adobe's products. 2:29 So, they have a new user interface and that's kind of the theme. 2:33 Of this Sketch three release is a reorganization, or 2:37 refinement, of what was already present in Sketch previously. 2:42 So, for example, they moved a lot of things into 2:46 the Inspector and it's all just one level deep now. 2:48 It used to have a couple different sub-menus and be 2:52 a little bit confusing, but everything is where it belongs. 2:55 Creating art boards is slightly different now, you 2:59 can actually insert an art board, that's pretty cool. 3:03 Using symbols. 3:08 So, there's, there's this idea of symbols in Fireworks. 3:10 And the Sketch team has listened to their users as 3:14 they're very good at doing and included a feature that's. 3:18 Similar to symbols in Fireworks, and they've made it really easy to use. 3:22 So, that's pretty cool. 3:27 Using layer styles is much easier now. 3:29 Basically, it's just a refinement on what was previously there. 3:33 I don't have a whole lot to say about this, but I basically just wanted 3:37 to highlight the fact that Sketch Exists 3:40 and it's an alternative to Photoshop and Illustrator. 3:42 So, if you haven't checked it out yet, be sure to do so. 3:45 >> Yeah, ton of people are using it and the Sketch team has done a great job. 3:48 >> Yep. 3:51 >> Next up, we have a blog post called Introducing Bud. 3:52 Now Bus, is another build tool, similar to Grunt. 3:56 But different from what, what did we call that other one? 4:01 It was >> Gulp. 4:05 >> Gulp, yeah. 4:06 Similar to Gulp, but this one's called Bud. 4:07 Now Bud lets you declare your sources in a very 4:10 declarative manner, and then it will build them for you. 4:15 So, here we define a target, which is going to be the distribution directory. 4:18 We're going to take the. 4:23 Style.css and all of the style templates and this 4:24 is everything we do to actually make that target. 4:29 Well, we make the directory if it doesn't exist, and then 4:31 we call the stylus command to output all of that there. 4:34 Now this works in plain old JavaScript. 4:38 We're showing CoffeeScript right there. 4:40 Now the reason that this was built, the author 4:42 says, is because he was getting tired of not having. 4:45 Directions inside of his Grunt file. 4:49 Now, he used Grunt, but he decided it wasn't explicit enough. 4:52 Why are we doing what we're doing? 4:55 Well, we're going to declare everything and that's what Bud is for. 4:57 so, here is just some more examples as we go down the page you 5:01 can define binary, so here we define a binary which is in the bin directory. 5:04 It's called stylus. 5:09 And then, that is then something that you 5:10 can declaratively use when defining the different targets. 5:12 Now, once again this supports most things, most plug ins that Gruntwood or even Gulp. 5:16 So, if Gulp doesn't do it for you, check out Bud. 5:22 It could be a good tool. 5:25 You might even say this Bud's for you. 5:27 >> Thanks, bud. 5:30 Next up is Trianglify, which is a JavaScript library for creating 5:32 these really cool triangle or polygon backgrounds using SVG imagery. 5:37 So on the site here, I can just click for a new pattern. 5:43 Woah, look at that. 5:47 >> What? 5:47 >> It's pretty amazing. 5:48 There's even some controls here. 5:50 That you can adjust if you want to get, say, 5:52 different cell sizes or different amounts of noise in the background. 5:56 Now, if I go back here, I can check out the GitHub page. 6:02 And Trianglify uses the d3.js library. 6:07 So, there's a couple of ways to get Trianglify. 6:11 And then to use it, you actually have to include d3.js. 6:15 And then you include Trianglify because it relies on d3. 6:20 And then, you can start to define 6:24 these backgrounds using a number of different parameters. 6:26 So, first you create a new instance of Trianglify. 6:29 And then you can define the width and height, using the generate function. 6:33 Now you could of course just put the body client width and body 6:38 client height, into the generate function and it will create a background that is. 6:43 Exactly match to the background of the client browser. 6:48 You can also do things like adjust the cell size, add noise. 6:53 You can do different types of gradients, 6:57 all sorts of really amazing options here for 6:59 creating these low polygon look backgrounds, which is 7:02 kind of starting to pick up some steam. 7:06 I mean, flat, flat design has been. 7:08 Pretty popular for a long time now. 7:10 And, this is starting to become kind of an evolution of that. 7:13 there's, all sorts of I guess low-poly looks popping up. 7:16 And this is one on them. 7:22 >> Mm-hm. 7:24 >> Very cool. 7:24 Next up we have a really quick project called Multiline. 7:25 This is a JavaScript library that lets you have. 7:28 Multiline strings in JavaScript. 7:31 Now, if you are not using CoffeeScript, which supports 7:34 Multiline strings, this Multiline library could be for you. 7:37 It is sort of a pain to do Multiline strings in JavaScript. 7:42 We see right here that if you want to get this little bit of 7:45 code right here, in a multiline string, look at what we have to do. 7:48 We have to define the string and then put a plus sign, at 7:51 the end of every single line to get that, who wants to do that? 7:54 Nobody, not me I don't want to do that. 7:57 I's much rather call this Multiline function and 7:59 put all, put all the text in there. 8:03 Now it works pretty easily you just wrap the text 8:06 in a block comment, anonymous function and a function call. 8:09 And then boom. 8:13 You have your Multiline string, it's that easy to use like I said not much to say. 8:14 But cool project, might be something you add to your projects if you want to. 8:18 >> Or don't. 8:24 >> Yeah or don't we like we're not you boss. 8:25 >> It's up to you. 8:27 >> Yeah. 8:27 It's there if you want to. 8:28 [CROSSTALK] If you don't want to you don't have to. 8:29 >> Next up is a blog post, called how to use steps in CSS animations. 8:32 Now, I will admit even after reading this blog post, 8:38 I had to re-read it again to understand steps in CSS. 8:42 This is not something I have used personally in any projects yet. 8:46 But it is pretty cool and worth understanding 8:50 in case you do need to use it. 8:53 Now Steps, is a timing function in CSS animations, and to 8:56 understand that it's good to jump down to the code here. 9:01 If you are using the animation property, you can declare steps as a 9:05 timing function or one of the values that you put into the animation. 9:11 Then inside of steps there's two parameters here. 9:15 So, I'm going to scroll back up and those 9:19 two parameters are the number of steps And the direction. 9:22 Now, the direction will just default to end. 9:26 And that's an optional value, that will basically determine the direction 9:28 of the steps, or which, which way they start and end. 9:32 But, the number of steps is what's important to understand here. 9:37 Now the example that made me understand this, is the example of a CSS clock. 9:41 Now, if you wanted to animate a clock here and you 9:48 wanted one of the hands to go around every 60 seconds, you 9:50 would say you know, I want this animation to last for 9:56 60 seconds and I want to transform, the second hand 360 degrees. 9:59 So you do that over a 60 second period. 10:06 Now, if you want the second hand to 10:09 actually stop, on one of the tick marks here. 10:12 You can add steps as a timing function, and it 10:16 will actually stop at 60 10:19 different intervals throughout that entire animation. 10:22 So. 10:25 >> What? 10:25 >> it will stop at every tick mark. 10:25 So, if we go to preview here, here's an example of exactly that. 10:27 Instead of just animating smoothly, and going all 10:32 the way around as it would normally, you 10:35 can add steps and it will stop for every I guess, interval in that in that animation. 10:37 So, pretty cool, very great article for understanding this. 10:45 It is a complex concept but it is very useful. 10:48 If you need to use that in your projects. 10:52 >> Wow. 10:55 Did you see that paw prints demo? 10:56 >> I did. 10:58 >> It's got it's got some paws just walking across the screen. 10:59 >> Look at that. 11:02 >> I really need to pause for a second and make sure that was done in CSS. 11:02 Next up we have a project called PACE. 11:09 This is an automatic page load progress bar written in JavaScript. 11:11 So, here is the site as we see it now, watch what happens if I 11:15 reload, you can see PACE in action, whoa look at that it's all filling in. 11:18 >> Wow what is happening? 11:21 Yeah. 11:23 so, what is Pace? 11:24 This is actually really cool. 11:24 It's a CSS theme and progress indicator to see what's going on on your site. 11:26 What in the world does all that mean? 11:32 Well, these days, you may have a website with a lot of different assets. 11:33 JavaScript, images, DOM loading, AJAX calls, all that. 11:38 And what Pace does is, automatically keeps track of all that 11:42 for you, and automatically loads a progress bar while that is happening. 11:45 Now, check out the different themes that we have here. 11:50 Got the minimal theme, which you can see, just a little bar a the top of the site. 11:52 Got a little swirly bar right there. 11:56 Not really sure what that's called. 11:59 Barber shop. 12:00 Mac OS ten. 12:01 Or OS X, as we sometimes say here. 12:03 Kinda like this corner indicator right here. 12:05 There is honestly not much to do on this project. 12:07 It is so simple to use. 12:11 All you would do is include the JavaScript and the 12:13 CSS, and you can tell it which different options you want. 12:17 By default, it supports AJAX, DOM elements, 12:20 the document ReadyState, and also event lag. 12:25 So, once you're done, boom, and you are good to go. 12:28 Just include the paste options. 12:32 That's it. 12:33 Anyway, super cool project. 12:34 Really, really digging it, just because it can be really cumbersome, 12:36 to keep track of all that yourself and add a loading indicator. 12:39 Just use this project cuz it is good to go. 12:43 >> Very nice stuff. 12:46 Well next up is a project called 12:47 pesticide, it's for faster CSS layout Debugging. 12:49 Now, normally when you're doing CSS Debugging. 12:54 You might bring up the Chrome Div Tools like 12:57 this, and then you go to the inspector and you 12:59 highlight the element you want to inspect, to figure 13:03 out why it's being laid out in a certain way. 13:05 Or, you may want to look at the margin and padding, as 13:08 it's being computed by the browser just to try to diagnose different issues. 13:12 That can take a lot of time though, because you're 13:17 constantly opening up the div tools, you're constantly going to the. 13:20 Inspector to look at stuff, or you're 13:23 right-clicking on items and choosing inspect element. 13:26 It can take a lot of time and it's a lot of clicks. 13:29 With pesticide, you just apply it to your page, and you can even do it as a Chrome 13:32 extension if you want, and it will add an outline to all of your page. 13:37 Elements and that makes it really easy to Debug stuff quickly. 13:43 So, for example, if you are doing local development, you can just set the 13:48 pesticide Debug variable in Sass to true 13:53 and then it will outline everything like this. 13:57 Not a whole lot to say about it, but it is a pretty great time 14:01 saver and it will actually highlight things differently 14:04 depending on what type of element it is. 14:07 So, pretty handy stuff. 14:10 >> Nice. 14:12 So I think that's about all we have time for today. 14:13 Nick, who are you on Twitter? 14:15 >> I am @nickrp. 14:16 >> And I am @jseifer. 14:17 For more information on anything we talk 14:18 about, check out the show notes at youtube.com/gotreehouse, 14:20 or search for us on iTunes and rate us, we are the tree house show. 14:23 Also for a free 30-day trial of tree house, 14:27 go ahead and click on the show notes on YouTube. 14:31 >> And of course, if you'd like to see more 14:34 videos like this one about Web design, Web development, Mobile business, 14:35 and so much more, be sure to check us out 14:39 at teamtreehouse.com, and use that link to get a free month. 14:42 Thank you so much for watching and we will see you next week. 14:47 [MUSIC] 14:53

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

Sign up