Episode 38: JavaScript Design Patterns and CSS Windows

I'm Nick Pettit. >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of internets, 0:03 where we talk about all things web design, web development, and more. 0:06 >> In this episode, we'll be talking about Javascript 0:09 design patterns, fullscreen CSS windows, Javascript charts, and more. 0:12 >> Let's check it out! 0:17 [MUSIC] 0:19 So first up, we have this amazing website 0:24 by someone named Shi Chuan about JavaScript design patterns. 0:27 Now, this is an absolutely wonderful guide that 0:31 goes through different ways of programming in JavaScript. 0:34 Now we're talking about patterns from JavaScript, variable hoisting, 0:38 all sorts of jQuery patterns using PUB, SUB, and more. 0:43 So let's check out the site. 0:47 We'll just go through some of the patterns that they 0:48 have here. 0:50 Goes through really everything that you're gonna 0:50 need to become a pretty competent JavaScript programmer. 0:52 It goes through different patterns for function 0:56 declarations, conditionals, fore lubes, global variables, built in 0:58 prototypes and whether or not to augment them, and just an absolute ton of stuff. 1:04 Now, the really nice thing about this site is 1:09 that all of these different patterns are available, on 1:12 GitHub. 1:15 So you can see, all of the source code for them. 1:15 You can fork them. 1:18 Add to it and more. 1:19 And then also if you want to, you can 1:21 follow Shi Chuan on GitHub to receive new pattern updates. 1:24 So really, a great resource. Check that out. 1:29 It's a great refresher if you already know how to program in Java script. 1:32 Or, if you've got a friend who's new to Java script, send them over to this page. 1:35 >> Pretty cool stuff. 1:39 Well, next up over on the Crocodoc Blog, we have this really cool article called 1:40 3D-ifying documents using CSS transforms. Whoa, what does that mean? 1:46 >> I don't know. 1:52 >> Well, Crocodoc is basically a tool that allows you to or, well I should say a 1:52 company, or a product that allows you to convert your documents into nice HTML 5 1:58 embeddable documents. It's, it's actually a really cool product. 2:05 But basically, they have created this 3D demo that 2:09 allows you to 3Dify your documents and, right now 2:14 on their, on their homepage they're using this as 2:20 a way to, basically demonstrate how their process works. 2:24 A first look at the new crocodoc right. 2:28 And you can drag to rotate this, and it basically shows you, you 2:31 know, the different layers that they use to construct your HTML 5 documents. 2:35 Now, this is interesting because of cross-browser support. 2:41 They got this to work pretty well in quote unquote, modern browsers, and 2:46 so you can, you know, toggle whether or not this is an expanded view. 2:51 You can do a random transition here, and you can kinda drag around 2:56 and that's pretty cool, but if we scroll down a little bit further here. 3:01 They basically had to create a 2D simulation of the 3:06 3D mode, so that it would work in Internet Explorer 9. 3:11 So, let's see if we can go ahead and look at that demo. 3:15 If I go ahead and drag around here, you can see 3:18 that it looks very similar but this 3:22 is actually working in two totally separate ways. 3:23 On the right side, they're using CSS 3 and on the 3:26 left side they're actually using Javascript to simulate the same thing. 3:30 Now, if I drag these in such a way 3:34 that you can kinda see the space between each document, 3:37 if you look at the right side, you can see 3:42 that there is a larger amount of space right here, 3:43 versus towards the beginning. 3:47 And over in the 2D simulation, it's actually all the same. 3:49 So, you're seeing sort of a flattened view of the same perspective. 3:52 But very clever stuff, we don't have time to 3:57 go into all of the nuts and bolts of exactly 4:00 how this works, but definitely check out the blog 4:03 post, because it's, it's pretty amazing what they did here. 4:05 >> That, that is pretty amazing. 4:09 It's kinda weird how they had to do twice the work to 4:10 make it work in Internet Explorer 9. >> But they they did it anyway. 4:12 >> Yeah. 4:15 >> Hm. >> Crocodoc. 4:15 >> Crocodoc. 4:17 >> Thought that was a shoe company. >> Nope, not in this case. 4:18 >> Next up we have a JQuery plug-in called Windows. 4:22 Now, this is interesting. 4:25 This is, quote, a handy, loosely coupled 4:26 JQuery plug-in for full screen scrolling windows. 4:29 And we should say that this has nothing 4:32 to do with Windows, the Microsoft operating system. 4:34 >> Right, trademark symbol if you're listening. 4:37 >> Right. 4:40 >> Microsoft's lawyers. 4:40 >> Yep. >> So this is actually pretty cool. 4:41 You'll see, the full screen scrolling window 4:43 effect becoming a more popular design pattern. 4:46 Now, here's the website for it. 4:48 Watch closely, I scroll. 4:50 And the whole thing scrolls with me, wow. So, this 4:52 is actually what it would look like if you bootstrapped the project with this 4:57 JQuery dot windows plugin. 5:03 You can see there's not a lot of files that it uses. 5:05 It uses one CSS file, one JavaScript file, and the CSS is actually 5:08 SASS based, so that makes it a lot easier to extend and all, all that stuff. 5:13 So what this is is pretty much an API. 5:19 For window management, and it's very, very easy to use. 5:22 It just gives you, you, you know, you give it a JQuery selector, tell 5:28 it whether or not you wanna snap on scroll and snap to the different window. 5:31 You get functions for scrolling, snapping, completing, and entering the window. 5:36 anyway, there's also a great JavaScript api for using it. 5:41 Extremely easy to use, just throw it in 5:44 your project, and boom, you got scrolling windows. 5:46 >> Pretty cool stuff. 5:49 Well next up is CSSCSS. 5:50 That's right there, there's not an echo in here, the tool is called CSSCSS. 5:54 Basically, it's a redundancy analyzer for your CSS or SASS. 5:58 Meaning it looks for duplicated code or duplicated declarations to make sure that 6:05 you're not repeating yourself and just basically cluttering up your code. 6:10 >> Does it make sure that you're not repeating yourself? 6:16 >> I'm not sure. 6:19 If it makes sure that you're not repeating yourself. 6:20 >> Hm, we should see if it makes sure that you're not repeating yourself. 6:22 >> Yeah, I'm going to take a look at it right now. 6:25 So CSSCSS will parse any CSS files you give it 6:28 and will let you know which rule sets have been duplicated. 6:34 And basically, this is a good strategy to try 6:38 to reduce file size, make sure that your CSS is 6:41 maintainable and so on. It just makes things a lot cleaner. 6:44 You can install this as a package to Ruby Gem, and then you 6:49 just point it to the path for your CSS documents and you can 6:54 do the same thing for your SASS documents, and it will go ahead and analyze 6:59 your code and tell you where you've duplicated declarations and duplicated 7:05 your codes. 7:10 So really quick and easy way to just make sure that you're not repeating yourself. 7:11 >> That's good. 7:16 That's something we support over here at tree house tree house. 7:16 Next up we have something called the masked input plugin. 7:19 Now this is a really great plugin when 7:23 you've got a text field or something like that. 7:25 You give it a mask. 7:28 Now, what the mask will do is give you different formatting. 7:29 So, let's say you have a date field, and you want two characters, a slash, 7:32 two more characters, and then you know, 7:36 four characters for the month, day, and year. 7:37 >> Right. 7:39 >> This plugin let's you do that. 7:40 So, they've got a nice demo on the site here. 7:42 So as an example click in this date box right here and boom. 7:44 You've got these mass characters right here. 7:49 So, one, two, three, four, five, six, seven, eight. 7:50 This works for phone numbers, tax IDs, pretty much anything you want. 7:54 You can define the mask function 7:59 very, very easily right inside a JQuery, decoration, just 8:01 pass it the mask function and then a stray. 8:05 So if there is a few options that that supports but this is pretty great plugin. 8:08 This is going to be something that's really useful maybe on an eCommerce 8:12 side where you want people to input their credit card numbers something like that. 8:16 You know, it's one alternative that we can 8:20 use for, hints that we have in form fields. 8:22 >> Oh, 8:26 okay. >> So, pretty good plugin. 8:26 Check that out. >> Nice. 8:28 So next up is Polychart.JS. 8:30 And Polychart is free to use if you're just using 8:33 it, you know, for day to day projects, but if you're 8:37 actually using it for something commercial, you do need to 8:40 pay for a license but, that said, it is pretty cool. 8:43 >> So lets take a look at it. It says on the site, the most flexible 8:47 interactive charts on the browser, and I would have to agree that I 8:52 have seen a lot of charting libraries and, this is one of the best. 8:56 So, here we have three separate graphs. 9:00 And over on the left side, I can actually click one of these bar charts. 9:04 And it will go ahead and animate the, the next chart over. 9:10 So if that weren't cool enough, 9:15 I can actually hover over these and see 9:17 additional pieces of information about each data point. 9:19 And then I can click on those and the chart, the next 9:23 chart over will actually animate as well, and I can see additional information. 9:27 So, it's a really quick way to create nice interactive charts 9:32 and allow you to drill down into additional pieces of information 9:37 to kind of add more clarity to the data. So, if we scroll down, 9:42 we can, you see that we can use JSON, CSV, Ajax, 9:47 and, it's just really, really robust. 9:53 So let's go ahead and jump over to the demo here. 9:57 You can see that there's a bunch of 10:02 different charts that we can go ahead and use. 10:04 And just below each one of those, you can see the 10:08 code that you would want to use in order to implement that. 10:11 So, they have all sorts of fun data here, Lord 10:15 of the Rings, Box Office Gross, histogram of different heights. 10:19 A sales funnel. 10:26 All sorts of things that are, you know. >> Common charts. 10:27 >> Common charts, favorite pets. 10:31 So, things that are useful, possibly not so useful, but you know. 10:33 Really great charting library and definitely worth checking out. 10:38 >> Why'd you point to me when you said possibly not so useful? 10:40 >> I don't know, Jason. It was just totally coincidental. 10:43 Nothing to do with you. 10:46 >> So next up, we have the best named plugin that I've ever seen. 10:48 It's called jCypher. 10:51 This is not my twitter handle. 10:53 This is this stands for jQuery text cyphering. 10:55 And by cyphering, again, we don't mean my last name. 10:59 So this is pretty cool. 11:02 Watch the the demo right here where it says, text to cypher. 11:03 Again when I say cypher, I mean encrypt, not, not my last name. 11:06 Anyway, click restart and you can see whoa, just like in a movie. 11:10 It goes through a bunch of different text and then, boom, the text is unencrypted. 11:13 This is, I'm not exactly sure where you would legitimately 11:19 use it but i'm sure you could find a great opportunity. 11:22 it, again this is one of the best named plugins ever. 11:25 No but let's say you are making you know, a great website where it has a splash page 11:29 or something and you want it to come in 11:33 and be ciphered in a bunch of different ways. 11:35 Well you can use this plugin, easy to use, easy to implement. 11:37 This is definitely something that's a little bit more flashier 11:40 and less practical but, you know there's nothing wrong with that 11:42 as long as you use it in the right context 11:46 so, you know, as long as you're just trying to create 11:48 a feel or a mood for like a movie or a video game or something 11:52 like that, then yeah go ahead and go for it, I think that's actually pretty cool. 11:56 >> Could also be good for prices on a menu. 12:00 >> Mm. >> Like a restaurant menu. 12:02 >> Yeah. Possibly. 12:03 >> Just an idea. 12:05 Just throwing that out there. >> That's, that. 12:05 That one's for free from, from, from Jay Seifer. 12:07 >> Yeah. >> Yeah. 12:09 So next up is this amazing, dashboard framework called Dashing. 12:10 So let's go ahead and take a look. 12:17 You can go ahead and view the source on GitHub, but that's boring. 12:19 Let's just go ahead and look at a demo. 12:25 >> [LAUGH] So here's what Dashing looks like. 12:26 You can create these amazing animated charts, so similar 12:30 to Polychart, but a little bit different in function. 12:35 And then I can actually drag these around and rearrange them. 12:38 So, whoa, look at that. >> Wow. 12:43 >> I can actually, you know, create like a different looking dashboard here. 12:45 >> Smashing. 12:50 >> So here, you know, you have the amount 12:51 of synergy the company has generated, buzzwords current valuation. 12:54 Convergence, you know, all, all the things that 12:59 you would want out of a company dashboard. 13:02 But if we go ahead and go back 13:05 to Dashing here, basically it's a Sinatra-based framework. 13:08 You can go ahead and create your own widgets, or you can 13:13 use the premade ones, and they're all built in SASS, HTML and, 13:16 Coffee script, so pretty amazing, I mean, you know, this is actually 13:22 something that is, much needed I think in a lot of companies. 13:27 They just want to know some quick metrics that, 13:30 you know everybody can look at. 13:33 And they even have a version that's optimized for 1080 P screens. 13:35 >> Mm. 13:39 >> So it's definitely intended to be put on to like a modder around the office, 13:39 so everybody can just see you know, synergy 13:44 and buzz words and and things like that. 13:47 >> Yeah. 13:50 Lot of, lot of synergy going on here. >> That's right. 13:50 >> no, but it's actually pretty cool because 13:53 you can get data into these widgets pretty easily. 13:55 You get a little token and 13:57 then, you know, right from the command line, you 13:59 can post data to update these widgets every so often. 14:00 >> Yep. 14:03 Very cool stuff. 14:04 >> So I think that's about all we got today, Nick. 14:05 Who are you on Twitter? 14:07 >> I'm @nickrp. 14:08 >> And I am @jseifer, not the plug-in. 14:09 If you like this podcast, please rate us in iTunes. 14:12 You can search for us under Treehouse Show. 14:14 You can also see us on YouTube at youtube.com/gotreehouse. 14:16 And of course, if you'd like to see more videos like this 14:21 one about Android, iOS, business, web design, web development, and 14:24 so much more, be sure to check us out at teamtreehouse.com. 14:29 Thanks so much for watching and we'll see you 14:33 next week. 14:38

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

Sign up