Episode 90: Voodoo, Responsive Tables, JavaScript Graphs

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse 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 0:08 about Voodoo, responsive tables, JavaScript graphs, and more. 0:09 >> Let's check it out. 0:14 [BLANK_AUDIO] 0:15 First up is Voodoo JS. 0:20 Now, this is a JavaScript library that allows you to 0:23 mix 3D and 2D elements on a single web page. 0:28 It's pretty impressive. 0:33 So, let's take a look. 0:34 So it says Voodoo is a new java script framework that lets 0:36 you easily mix 2D and 3D content together on the same page. 0:39 Well what does that mean? 0:43 Well lets scroll down the page and look at this graph over here and 0:44 as I scroll you can see that it actually parallaxes in 3D. 0:50 There's more pronounced examples here, like this palm tree. 0:55 >> What? 0:59 >> So as I scroll up and down, you can see 0:59 it's actually in 3D and it's mixing with this text here. 1:02 That's just a normal HTML paragraph. 1:07 So that's pretty impressive. 1:11 Now even more impressive is this ring down here at the bottom. 1:12 You'll see that it's actually in front of 1:17 the text but it's also simultaneously behind the text. 1:19 And actually I can highlight this. 1:23 You can see that it is real text on the page. 1:26 In fact I can even bring up the Chrome developer tools here. 1:30 And highlight this little bit here and you can see it's just a normal EM element. 1:34 >> What? 1:43 >> So, it is actually there on the page. 1:43 It's not like rendering this text magically or something. 1:46 so, how, is this happening? 1:50 Well, it's using web GL to do it's 3D rendering. 1:53 Which is currently supported in Chrome and Firefox. 1:58 And if you enable it in Safari its ordered there. 2:03 And I believe its ordered in Internet Explorer 11. 2:06 So support is definitely on the rise and the way that 2:09 they're doing this is by rending two different Web GL canvases. 2:13 There is one that is above and one that is below and then they're fusing them 2:19 together with seam here and with a little 2:24 bit of anti-alysing it basic, basically removes all the. 2:28 Jagged pixels there and kind of fuses it together. 2:32 So it's pretty smart. 2:36 Now, how does this work? 2:38 Well, if we go over to the documentation, the two 2:39 really big important things here are the model and the view. 2:42 Now, the model is a base class you can extend. 2:47 And it contains objects managed by the Voodoo rendering engine. 2:52 So, it's a, a model is a single 3D object. 2:58 Now, if we click on View, you'll see that the View is also extendable. 3:02 And every model should have a View. 3:09 Basically contains information about, the state of an object. 3:14 So, if we switch over to my text editor here I 3:22 actually want you to see what this code looks like in action. 3:26 This is a sample that you can download with Voodoo, so there's a view here, and. 3:30 We're extending and, one thing I forgot to mention, is 3:36 that Voodoo does rely on 3JS, which is another WebGL library. 3:39 So, basically we can create a Taurus here, which is bas, basically a donut shape. 3:45 We can apply a material, or a texture, 3:52 to describe what the surface of that looks like. 3:55 And then, we can actually add that to the scene. 3:58 There we go. 4:03 And we can position it and all that good stuff. 4:04 Then we also have a function here to move the Taurus in 3D space. 4:07 Then down here in the model, which is used to again describe 4:13 the state of three objects we have an update function right here. 4:17 You know, if you are familiar with game engines or 4:22 if you are familiar 3D graphics your update function basically runs. 4:25 Every frame, and by passing in delta time here, you 4:29 can tell it, how long it's been since the last frame. 4:33 So it will know, how far to move that donut back and forth. 4:37 And if we go down here, the last thing we do after declaring or excuse 4:42 me extending the view, and model, we just call the sample model, and in the browser. 4:48 You'll get something that looks like this. 4:54 So there is that taurus, it has a red color 4:56 and we've positioned it so that it's around some text here. 5:01 Anyway, Voodoo is pretty amazing. 5:06 I, I think this is a really, really 5:09 cool project and you should definitely check this out. 5:10 Web GL is being supported in more and more browsers. 5:15 Than ever. 5:18 And it's definitely time to start using it in websites. 5:19 >> They have super, super impressive demos. 5:23 >> Mm-hm. 5:25 >> Next up we have a project called Responsive Tables. 5:26 This is a very, very descriptive name for what it is, which as you might guess is. 5:30 Responsive tables for your webpage. 5:35 Let's go ahead and check it out. 5:37 So you can see down here so whatever. 5:38 You just install it, have the CSS and the JavaScript. 5:40 Put in a couple classes and your markup, just add class is table responsive. 5:42 And you are good to go. 5:49 Now here is a demo. 5:51 Look at, look at all this information inside of the table. 5:52 Now if we go ahead and resize the browser to make it responsive. 5:57 Wow, look at that, all of our stuff is gone. 6:01 We only have a couple different columns. 6:04 Well, what if we wanted more columns? 6:05 Well, just click that display button and the different columns collapse but you can 6:07 add them back in automatically and then go ahead and scroll up and down table. 6:13 Also, supports this little focus button right here. 6:18 So, if you wanna click on a row, you get just that information. 6:21 Now this is super simple to use, the way that you set up your table is you give 6:26 each of your table heading elements a priority. 6:31 Now the priorities correspond to different break points so, priority of one is going 6:36 to be always visible but you can hide it inside of that drop down. 6:42 And so on and so forth for all of the different priorities. 6:47 This is a super simple plug in to use. 6:50 We'll have a like to that in the show 6:53 notes which you can get to at YouTube.com/GoTreeHouse or. 6:54 Or search for us on iTunes, we are The Tree House Show. 6:57 >> Very cool stuff. 7:02 Well, next up is Isomer which is 7:02 an isometric graphics library for HTML5 canvas. 7:06 Now, if you play a lot of video games, you might be familiar with isometric graphics. 7:11 It's basically a view that renders without any kind of perspective. 7:16 So it's rendering this at a 3 quarters view or a side view here basically and you 7:22 can see both sides of the 3D object, and it doesn't have any kind of perspective. 7:29 Now how is it rendering this? 7:36 Because this isn't just a, a picture. 7:39 It's actually rendering this onto a canvas. 7:41 Well, with Isomer, you can create a shape and a point 7:43 and then you add it to the scene or the drawing. 7:49 So, in this case, the shape is a prism. 7:53 And it's using the point to position it in 3D space. 7:56 Now if we scroll down here we can see a slightly more robust example. 8:02 In this case we are using the Point,ORIGIN, which, should 8:07 default to just the, the origin of the 3D grid, that you can see here. 8:13 And then, with these three values here we're defining 8:20 the width, length, and height of this 3D object. 8:24 Now you can, obviously, use this to build out much more complex examples. 8:30 So, if we click on the playground here, it will take us over to 8:36 Codepen, and you can see exactly how that example up in the header was built. 8:40 We are adding a bunch of different isomer objects to our canvas here. 8:46 And if I change these, so for example let's just comment one of these out. 8:53 You can see that the view will update here, and will actually remove that box 8:59 that's right here so you can get an idea of how this scene is being built. 9:05 And I could adjust the width, length, and height here. 9:09 And that should probably make it look a little bit strange 9:13 because it is being rendered isymmetrically, but you get the idea. 9:16 You can very quickly adjust the size or position 9:20 of these objects, and create these nifty little graphics. 9:23 So very cool stuff. 9:28 It is a a paid project, actually let me go back here, there we go. 9:30 But it's very inexpensive, just $10, and you 9:39 get two files which allow you to build. 9:42 These pretty amazing, 3D graphics. 9:46 So, very cool stuff. 9:49 However, it is also available for free under the MIT license. 9:50 I should mention that. 9:53 So it is actually free. 9:54 But you can pay for it if you like it a lot. 9:56 >> Very very cool. 9:59 >> Mm-hm. 10:00 >> Next up, we have a project called digraphs. 10:00 This is a JavaScript charting and diagramming library. 10:03 Let's go ahead and check it out right here. 10:08 It's super simple to use. 10:10 You can see this, this chart on the right. 10:12 Is generated just from this little snippet of JavaScript right here. 10:15 It's given a target, which is a div. 10:20 A data source, which is a text file located on the server. 10:23 And then just some different options. 10:26 If you want a legend, title, and, labels, and all that good stuff. 10:27 So if we look on the right right here, as I am moving my mouse across the chart. 10:33 The different data points are moving. 10:40 And then it is updating on the top right with the corresponding values. 10:42 Now you can actually click and drag this graph to zoom in. 10:47 Double-clicking will zoom out. 10:51 Shift and dragging will pan the charts and you can even adjust the averaging period. 10:54 Now there are, bunch of options, as you can see, as we go through. 11:01 Just tons of different things you can do 11:05 with these graphs, there is a lot of demos. 11:07 Right here as well, of, just generating all of these different graphs. 11:12 Anyway, this is a completely free project. 11:16 Go ahead and download it if you need charting or graphing on your site. 11:19 Very, very great, great project. 11:24 >> Next up is a, blog post, from Brad Frost, called Label Bask. 11:27 And label masks you can see it demonstrated right here. 11:33 Basically allow the user to type in some input into a form and 11:38 then get a preview of how that data is going to be interpreted. 11:43 Now, if we scroll down here, you can see that Brad was basically 11:49 inspired by this release from the Filament Group called Politespace. 11:54 But he thought that had a couple of issues. 12:00 It's, it's pretty amazing on it's own, but he decided to. 12:04 Enhance it and scroll down to the demo here. 12:08 You can see what this result looks like. 12:13 Now, if I just type in a bunch of garbage here, it will basically 12:17 show me, well, that's what you know, 12:21 my credit card information is gonna look like. 12:23 Obviously, we don't want something like that so that way i can type in a number 12:25 here instead, that is my real credit card number please feel free to use it. 12:31 Basically this is nice if you've ever typed 12:37 a credit card number you know it's difficult. 12:40 To kind of make sure you're typing in the four digit groups just right. 12:44 But this way, with the Labelmask, you can look up here and 12:51 say, okay, this is what it actually looks like on my credit card. 12:54 And that makes it a lot easier to make sure you're typing 12:58 in the correct number, rather than just looking at the input box. 13:01 Which can be kind of difficult to find. 13:04 Those stops for each 4 digits, same thing with phone numbers. 13:07 If you're typing in a phone number and there's 13:13 no spacing between it; when you're actually typing it in. 13:15 It can be a little bit tough to figure out if you're typing in the correct number. 13:18 But same deal there, anyway you can check out the project. 13:22 On GitHub and use it on your sites. 13:27 Very cool stuff. 13:31 >> Yeah, very nice. 13:32 I really like that pattern. 13:33 Really, really good UI. 13:34 >> Mm-hm. 13:35 >> Next up, over at the Tellarite developer network, we have 13:35 a blog post on seven quirks I wish I knew about JavaScript. 13:39 Now, this is some common quirks when you actually start working with the language. 13:43 That you learn very quickly or slowly depending on 13:47 how long it takes you to debug what is wrong. 13:51 So the first thing they go into is equality, the JavaScript language has 13:54 the double equals comparison operator but you are actually, most of the time. 14:00 Looking to use the triple equals 14:05 equality operator, because they do different things. 14:08 >> Also known as the threequals. 14:13 >> Threequals, never, never heard that, that's very clever. 14:16 >> Mm-hm. 14:18 >> The double equals, the example that they give here is 14:19 a, in, an integer of the number one, is going to be. 14:23 Equal to the string 1. 14:27 So there are two equalities. 14:30 There is equality and strict equality, which also checks the type. 14:32 They go into different things. 14:38 Dot notation versus bracket notation. 14:40 Context of different functions. 14:43 We don't have time to go into the entire blog post here. 14:44 But I do recommend you check it out. 14:47 We'll have a link to it in the show notes. 14:48 >> Very nice stuff. 14:51 Well next up is Flexplorer. 14:52 Now if you've been watching the developing of Flex Box, 14:55 you might know that Flex Box is pretty close to primetime. 14:58 I am on the caniuse.com website, which charts 15:03 the Compatibility of various pieces of browser technology. 15:08 And this a page for the flexible box layout module from the W3 saved. 15:14 And it is now a candidate recommendation and if you look at the current browsers, 15:20 Internet Explorer 11, Firefox 28, Chrome 34, and Safari 7 now all support it. 15:26 With Safari 7, you do need to still use 15:33 the WebKit prefix, same with iOS 7, but that's okay. 15:36 It's also supported on Opera and the 15:41 latest version of the Android and Blackberry browsers. 15:44 That's really good because Flexbox is a new way to lay 15:48 out web pages without using floats or position, or any kind 15:51 of the traditional elements that you would expect when laying out 15:56 a web page using multi columns or rows, and so on. 15:59 And it's really great that mobile browsers support it 16:03 now as well because it's wonderful for responsive web design. 16:07 Now, lets go back to flexplorer here and take a look at how this works. 16:11 Flex box is a little bit complicated to understand at 16:17 first but once you do wrap your head around it. 16:21 You'll start to understand that it's incredibly intelligent and a very 16:25 elegant solution to this complex problem of laying out web pages. 16:29 Especially in a responsive contexts. 16:34 And in fact I think this is how web 16:39 pages will be built in the future almost definitely. 16:41 Flexplorer allows you to kind of explore how different flex box properties. 16:45 Work and interact with different elements. 16:53 So, if I resize the browser here, you can see that this page is indeed 16:56 responsive and all of these different elements kind of flow very nicely. 17:02 And if I adjust some of these properties 17:08 I can change the number of items for example. 17:11 That's not terribly interesting but I could change the direction 17:14 of these different elements, so I could go from row, which 17:20 is laying out all these, elements or flex items in 17:25 order here and it will change what's called the flex container. 17:30 And I can change that to column. 17:36 So now all of these elements are laid out in a column. 17:37 And that's all done by changing a single CSS value on the flex direction property. 17:41 Now if you've ever laid out a multi column layout 17:48 even using a CSS multi framework, you know that this can 17:50 actually be a pretty complicated thing to do and there's a 17:53 lot that has to happen to go from rows to columns. 17:56 So it's amazing you can do that with just one CSS value. 18:00 Actually, I should have resized the browser there, there's 18:05 that's what that actually looks like and when I. 18:08 Go down. 18:11 You can see it is flexible like you would expect. 18:12 You can also adjust other con, other properties here like the justify 18:17 content, or the flex wrap, which are a couple different. 18:23 Properties that we don't really have time to go into here on the show. 18:30 But, anyway after you learn a bit about 18:34 Flexbox you should definitely check out Flexplorer to 18:38 get a better understanding of what each of 18:41 those properties and values are going to do. 18:44 Because Flexbox, while it is very robust, and powerful, it can 18:46 be a little bit complicated to understand when you're first learning. 18:49 But definitely worth learning because it is almost 18:53 time to start using that on production-ready sites. 18:57 >> The future is now. 18:59 >> It is. 19:01 Tomorrow is today. 19:02 >> But that is all we have time for today. 19:03 Nick who are you on Twitter? 19:05 I am @nickrp. 19:06 >> And I am @jseifer, for more information on anything we talked about, check out the 19:07 show note at youtube.com/gotreehouse or search for us 19:11 on iTunes, we are the tree house show. 19:14 And for a 30 day free trial of treehouse, click 19:17 the link in the show notes here on you tube. 19:20 >> And of course, if you'd like to see, more 19:23 videos like this one about web design, web development, mobile business, 19:25 and so much more, be sure to check us out 19:30 at teamtreehouse.com, and use that link to get a free month. 19:32 Thank you so much for watching, and we will see you next week. 19:37 [MUSIC] 19:40