Episode 66: JavaScript Formatting, Pie Charts, SVG Animation

[MUSIC] 0:00 I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Tree House Show. 0:02 Your weekly dose of internets where we talk 0:03 about all things web design, web development, and more. 0:05 >> In this episode we'll be talking about 0:08 JavaScript formatting, pie charts, SVG animation, and more. 0:10 >> Let's check it out. 0:14 [MUSIC]. 0:18 First up we have a couple of free UI kits which are themes for Bootstrap. 0:21 >> Oh, good. 0:27 >> Or they're built on Bootstrap. 0:27 >> Bootstrap being the framework that we talk 0:29 about, literally all the time on this show. 0:31 >> That's right. 0:33 It's the front end framework for everybody. 0:33 [LAUGH] Alright so, [LAUGH] here if you didn't know, you can 0:37 actually apply themes to bootstrap, and these themes are completely free. 0:41 They're available on GitHub here. 0:46 This first theme, looks like it's called Dark 0:49 Velvet, and I'm definitely feeling the the Dark Velvet. 0:51 Look at that. 0:55 It almost looks like the, the, Tree House Show set today. 0:55 >> Yeah. 0:59 Almost. 0:59 >> This one is Vanilla Cream. 1:00 >> Except a little bit more interesting. 1:02 >> Looks delicious. 1:03 This one is called Metro Vibes and it 1:05 looks very similar to the Metro Style on Windows. 1:08 This one is called modern touch also looks pretty 1:13 flat kind of Windows or iOS7 like and that's it. 1:17 All right, well thanks for, thanks for watching the show. 1:21 [LAUGH]. 1:25 >> We have a couple or more links today. 1:25 >> Yeah, [INAUDIBLE]. 1:28 >> But yeah not a whole lot to say about this but 1:28 there're just really nice looking themes and you should definitely check 'em out. 1:30 >> Yeah that you know that pretty nice even especially if you do wanna overwrite 1:33 something in bootstrap and maybe can't figure out how cuz see how they did it. 1:36 >> Mm-hm. 1:39 >> And use that for your own nefarious purposes. 1:40 Next up we have a JavaScript library called formatter.js. 1:43 So this is for input fields. 1:46 Let's say you have somebody and you want them to enter a phone 1:49 number but you wanna actually restrict it to looking like a phone number. 1:51 You can put little parentheses there and make it limited 1:55 to having them enter different combinations of letters and numbers. 1:59 So, there're a few different options. 2:02 I'll just take ya straight to the demo here. 2:04 Here's an example if you wanna enter a credit card. 2:06 Now this is my actual credit card so don't use it, please. 2:08 It's, the the numbers 4 and 2 over and over again. 2:12 >> Okay, I got it. 2:16 >> Yeah, but you can see [LAUGH] as, you know, as 2:16 I type it it just kinda limits it to that and 2:18 then if I type like I'm trying to type letters right 2:20 now and it is not working and I'm like kinda freaking out. 2:22 Oh, maybe I'm not supposed to enter those. 2:25 Thanks, I'm a user of your website. 2:26 >> Hm. 2:28 >> I just saved you a ton of time. 2:28 >> Boom. 2:29 >> Yeah. 2:30 >> Same thing with phone numbers. 2:30 Here is my actual phone number. 2:31 [BLANK_AUDIO] 2:33 It's actually random numbers I just typed in there, but again, 2:35 you know, it's limited to just what I type in there. 2:37 Now if you want to use different patterns. 2:40 If you wanna use your own patterns there's a very easy syntax to do it. 2:42 So, check it out, really, really nice project, formatter.js. 2:45 >> All right, cool stuff. 2:48 Well next up is Lazy Line Painter. 2:50 >> What'd you call me? 2:53 I called you a lazy line painter. 2:55 >> Oh, okay. 2:57 >> No, actually it's just the name of this website. 2:57 >> Oh, good. 3:00 >> So if we look here, you can see that 3:00 we have this really cool animation of this line drawing. 3:02 And it's just being drawn right in to onto the page. 3:06 How the heck is that happening? 3:10 >> Magic. 3:11 >> No, it's not an animated GIF, it is actually an SVG. 3:12 >> What? 3:16 >> I know. 3:17 Crazy. 3:18 So, here's how it works. 3:19 You have this wonderful SVG drawing of how it works, actually. 3:21 So, you can go ahead and export your line art from Illustrator as an SVG. 3:24 You have to make sure that there's no fills or no 3:29 closed paths, so this does just need to be a line drawing. 3:32 Crop your outboard and then go ahead and drop your SVG 3:37 into the SVG to lazy line converter, which is right here. 3:40 So you can go ahead and just drag and drop your SVG file right here, and then, 3:45 it will go ahead and generate some code for 3:50 you and you need to import jQuery and Raphael. 3:53 And you also need to use the Lazy Line Painter code, but 3:57 after you put that all together, you'll end up with a really 4:01 nice line drawing, just like the the one you see here, and 4:05 it will go ahead and animate and draw right on to the screen. 4:08 So, pretty cool stuff, there's lots of uses that you could 4:13 you know, go ahead and use that for, maybe for marketing purposes. 4:17 If you wanna go ahead and create like a really nice marketing 4:22 site, where elements are being drawn onto the page, it's pretty cool. 4:24 >> Yeah, I like it. 4:28 And it, you know, if that's not enough for you, if you wanna 4:30 create your own custom animations out of SVGs, we have a project now called 4:33 Snap SVG, which will let you take any SVG, and it gives you 4:37 a really nice API that's easy to use for animating all these different SVGs. 4:40 Now, that project Lazy Line Painter uses Raphael.JS, 4:45 SnapSVG is going to be an alternative to Raphael.JS. 4:49 Now as you expect, it's pretty easy to 4:54 use, but let's just see some demos first up. 4:56 Check this out. 4:58 Look at this. 4:58 This is a coffee maker, right? 4:58 And wow what's [CROSSTALK] it. 5:00 >> What do want Nick, do you want a latte? 5:02 All right, here you go, have a latte. 5:03 Look at that, it's animating right now, oh wow look there's your latte. 5:05 >> Wow that's a latte SVG. 5:08 >> Yeah [LAUGH] isn't it? 5:10 Wow, wha, what you wanna see more, all right, here, here's a mocha, do 5:11 you want a mocha, all right you got a mocha, that's 33% espresso 67% milk. 5:15 >> Man I think I'm gonna make Snap SVG part of my daily grind. 5:19 >> [LAUGH] Okay, next up. 5:22 Let's, let's take a look at a globe, cuz 5:26 I can't imagine there's really a lot of puns there. 5:27 What should I do? 5:30 Should I click that? 5:30 Yeah. 5:31 Let me click it, what? 5:31 >> Click that. 5:32 We're going on a trip together. 5:32 >> Yeah. 5:33 >> Just like Indiana Jones. 5:34 Amazing. 5:35 >> [LAUGH] I don't know where we're going but hey, you're going, we fly you there. 5:35 So, if we take a look at the documentation there, it's really easy, you 5:38 know, you can add elements, animate elements, 5:42 you give it the attributes, the duration, callbacks. 5:45 As you can see, there's a ton of different options and events that you can attach to. 5:49 Go ahead and check out the Getting 5:52 Started document which really walks you through everything 5:54 that you can do with Snap SVG and yeah, go ahead and check it out. 5:58 You can find a link to this in the show notes, which you can 6:02 get to at YouTube.com/gotreehouse or search for 6:04 us on iTunes at The Treehouse Show. 6:07 >> Next up is PhysicsJS. 6:09 Now, as the name implies, this is 6:11 some JavaScript that allows you to implement Physics. 6:13 >> What? 6:17 >> I know, amazing. 6:17 It is, it is very aptly named. 6:19 If you look here on the homepage, we can go 6:21 ahead and drag these elements and whoa, look at that. 6:24 >> What? 6:28 >> They go ahead and bounce and collide with one another. 6:28 Pretty amazing. 6:31 >> I'm pretty sure what you did, just did, was 6:32 against the laws of physics, where you lifted that up. 6:33 >> Prett-. 6:36 >> In midair. 6:36 >> Pretty close. 6:37 So, let's go ahead and look at a couple of demos here. 6:38 Here are some simple bouncing balls. 6:42 But if you wanna get more complicated, we have a fruitcake on wheels. 6:45 >> [LAUGH] >> So I know what I want for Christmas. 6:48 >> Yeah. 6:51 >> Look at that, fruitcake on wheels. 6:51 It's >> That's awesome. 6:53 >> Just bounces all around there. 6:54 We also have some cloth simulations happening here, so. 6:56 >> Oh, we talked about terrible cloth on one other Tree House show. 6:59 >> Yeah, but this isn't quite as terrible. 7:02 This, this is even better than that. 7:05 Look at that. 7:08 You can go ahead and just grab it and put 7:08 holes in this cloth and just tear it right off. 7:12 Pretty amazing. 7:14 So, there's a lot of cool demos here. 7:16 And for each one of 'em you can go ahead and 7:18 click on the code and see how that particular demo is working. 7:20 And of course this is all on GitHub, so you can go ahead and check it out there. 7:26 Now I'm gonna go back to the site here. 7:30 One thing to keep in mind is that you will probably need to use the demos quite a 7:33 bit for reference because if we click through to 7:38 the documentation here while some areas are fairly complete. 7:40 If you look at the fundamentals here, lots of great stuff there. 7:44 On the other hand, if you click on 7:47 something like collisions, it still says, to do. 7:49 So, there's still a couple of holes in the documentation 7:52 but, for something that's fairly new, that is to be expected. 7:56 >> Yeah, there you go. 8:00 >> So, pretty cool stuff, though. 8:01 >> Yeah, it's really really neat. 8:03 Next up we have a library called Stick Up, which is used 8:04 for attaching elements to the top of a web page as you're scrolling. 8:08 This is gonna be really useful for navigation if you want 8:13 that to be visible as you're scrolling up and down a site. 8:15 Now, this is really super simple. 8:18 Not much to say about it, but it's a jQuery plugin. 8:19 You can see as we are on the site right here, as 8:21 I start scrolling down, this attaches right to the top of the screen. 8:24 And as you scroll down the page, you'll 8:29 notice that different parts of this become active. 8:31 So, like I said, very, very easy to use, just a simple jQuery plugin and as 8:33 soon as the document is ready, just call the stick up method on it, and that is it. 8:40 So again, not much to say. 8:46 Cool plugin if you need to have a sticky navigation bar, 8:47 check that out if you're not using something that already supports it. 8:50 >> Seems like it would be really good for creating one-page websites. 8:53 >> Yeah. 8:56 >> Yeah, very cool. 8:57 Well next up is this really cool blog 8:58 post called creating non-rectangular layouts with CSS shapes. 9:01 Now, recently, the CSS shapes module has introduced by the W3C and actually 9:06 it's very much influx right now, browsers were as very scanned I think 9:11 on like the nightly web kit builds you can get it and I 9:16 think you have to like, I think you have to use chrome canary. 9:20 >> Oh wow. 9:25 >> Right now I think that's the only browser that actually supports it. 9:25 And there's actually two competing standards for this. 9:28 >> Hmm. 9:32 >> So very much in flux, but the reason we're even 9:32 talking about it right now is because it is so cool. 9:36 It offers a lot of new possibilities for laying out your web page. 9:39 So, if we go ahead and scroll down this wonderfully detailed post. 9:44 You can go ahead and see some images of what this actually enables. 9:50 So, here we have this circular shape and 9:55 we actually have text flowing right around it. 9:58 That's pretty cool. 10:02 If we scroll down a little further here, we see 10:03 this example of this web page about the Eiffel Tower 10:06 and you can see this text, kind of, in a 10:10 trapezoid shape, very similar to the opening crawl to Star Wars. 10:12 So, if you wanna do that this would be maybe a, a great way to do it as well. 10:17 Now, speaking of that, you could actually do this using CSS 3 transforms but 10:22 the problem with that is that it doesn't affect the actual layout of the page. 10:28 So, it doesn't reflow the content. 10:35 It just kind of transforms it. 10:37 If we scroll down a little further here though 10:40 we can see what this code actually looks like. 10:43 We use this property, called shape outside, and shape 10:47 margin and then we use the CSS function called polygon. 10:51 And we pass it a couple of X and Y 10:56 values, and that's how we go ahead and create our shapes. 10:58 Pretty cool stuff. 11:02 There's a lot more in detail here that I didn't cover, but definitely be sure to 11:04 check this out because CSS shapes are really 11:08 gonna revolutionize the way that we can layout webpages. 11:11 >> Yeah, I guess you should read that to stay ahead of the curve. 11:14 Next step, we have a project called Pizza Pie Charts. 11:18 This is a project from Zerb that lets you implement semantic pie charts that are 11:20 also responsive using just a little bit of JavaScript, and optionally some CSS. 11:26 >> Wow, the curves were really nice segue there. 11:32 >> I know. 11:34 >> Sounds like we've come full circle. 11:35 >> Yeah I know, piece of cake, or pie. 11:36 Let's go ahead and see how that works here. 11:39 We've got an example pie chart on here. 11:41 And here's some different possible pizza toppings. 11:44 So, see we got pepperoni and look at that just kinda pops out. 11:47 Shows you what's going on with the different percentages. 11:50 Now, okay, you wanna implement this on your site. 11:53 How you do it? 11:55 Well, it's actually really, really easy. 11:56 You just throw in a couple of scripts here. 11:58 You got the pizza.css jquery, and snapsvg which we just talked about. 12:00 How topical is that? 12:06 And then, just give it an unordered list as, and after you do that, just 12:08 give the list items data value attributes, and then everything is done. 12:13 So, okay. 12:19 Once you have the chart, you can easily style it using 12:20 sass and that's that's really all I have to say about it. 12:23 Super cool project. 12:26 Really great to have the responsive pie charts. 12:27 So check that out, really nice project. 12:31 >> Very cool stuff. 12:32 Well I am @nickrp on Twitter. 12:34 >> And I am @jCipher, definitely follow me. 12:37 If you want more information on anything we talked about, check out our show 12:40 notes at www.youtube.com/gotreehouse, or check us out 12:43 on iTunes, just search for The Treehouse Show. 12:46 >> And of course, if you'd like to see more videos like this one about web 12:48 design, web development, business, mobile and so much 12:52 more, be sure to check us out at teamtreehouse.com. 12:56 Thanks so much for watching, and we'll see you next week. 12:59 [MUSIC] 13:08

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

Sign up