Episode 103: Human JavaScript, Interactive Graphs, Sidecomments

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 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:04 >> For a free month of Treehouse join us over at teamtreehouse.com/show. 0:07 In this episode we'll be talking 0:12 about [SOUND] Human JavaScript, [SOUND] interactive graphs. 0:14 Side comments and more. 0:16 >> Let's check it out. 0:18 [MUSIC] 0:20 >> First up, we have a project or a book actually called Human Javascript. 0:25 Now, this is not about JavaScript that has gained 0:30 sentience and tries to take over the human race. 0:33 >> It's also not JavaScript, larping. 0:35 Just what we thought. 0:38 >> That is a very good point. 0:39 No, instead this is an e-book on how you can 0:40 code JavaScript very well that can be read by humans. 0:42 So this has a, great, great thorough table of 0:46 contents, right here you can see this actually a. 0:49 Pretty long book, it's got 15 different chapters, and, it goes through everything 0:52 you need to know to write great, client side and server side JavaScript. 0:56 Now, there is a ton of stuff, this is a great book, so we're not gonna go over 1:02 it, but there are some things that I did want to, bring up for you to check out. 1:05 First is, write code for humans. 1:10 This is a really, really great thing to 1:12 keep in mind, not matter what language you're writing. 1:15 But this shows you, how to write good 1:17 code for humans that they can understand in JavaScript. 1:20 The great thing about this book is it 1:23 shows you examples of what you should not do 1:24 and then shows you how to clean them 1:27 up, and then expands upon that with different examples. 1:29 I also particularly like the, chapter on models. 1:33 Now if this shows you how to 1:37 implement models inside of a, very simple application. 1:38 So on the client's side they're saying, okay let's say you have a list 1:42 of items and when you click something you want to do something to those items. 1:46 Well in the first case you add the class selected. 1:51 And, that probably works well for a little while but as your 1:54 application grows, well you might wanna do more things with those selected items. 1:57 So maybe you'll add on to it, perform an AJAX request. 2:02 And, this can work for a little while. 2:05 But, let's say your application starts expanding, well, then 2:08 you might need to implement models in your code. 2:12 And then you can go through, grab the, different elements and then 2:14 implement what the exact same functionality 2:18 in your models, listening to Offence. 2:21 So, there are just a ton of different things that this book goes over. 2:23 I really recommend reading it. 2:27 You can, find the link in our show 2:29 notes, which you can get to at youtube.com/gotreehouse. 2:30 Which works for us on iTunes. 2:33 We are the Treehouse Show. 2:34 >> Very cool stuff. 2:36 Well next up is, The Simpsons in CSS. 2:37 So, if you are familiar with the, popular television show. 2:40 This is how you can, recreate the same characters using HTML and CSS. 2:44 There's not really a whole lot of practical, reason as to why you might 2:50 do something like this but it's still really great to learn from so, if I 2:55 open up the Chrome dev tools by hitting command option I on my Mac 3:00 I can hit the Inspector here and I can hover over any one of these characters. 3:05 And, you see that they're actually composed of multiple divs here and 3:11 they're just rotated into place based on where they need to be. 3:17 If you click on any of the, buttons here that says View 3:21 CSS it will take you over to GitHub and you can see. 3:26 What the CSS looks like, for that particular character. 3:30 So there's some CSS that they're, for example, applying 3:34 to every element, or just the wrapper element itself. 3:37 So it looks like they're using, 3:42 content box sizing, and positioning everything absolutely. 3:44 So, that makes sense if you're trying to, 3:48 position things exactly where you need them to be. 3:51 And then they have some styling here for each one 3:53 of the individual elements and, each character is obviously slightly 3:57 different, but the way you would build something out like 4:02 this is, like I said, by positioning elements into place. 4:05 Or by using, box shadows, and you can actually get, a lot of nice looking 4:08 effects by using multiple box shadows and separating them with, commas. 4:14 Anyway, like I said, not a whole lot of 4:20 practical applications here, but it's still really nice to learn 4:22 from, to learn how you might build something a 4:26 little bit more complex in CSS, should you need to. 4:28 >> Yeah, and, and if it goes really well maybe 4:32 you can get a, a television, series out of it. 4:34 >> Maybe, who knows. 4:36 >> Yeah. 4:38 We, we're not, we're not here to stop you. 4:38 We're here to propel you forward. 4:39 Next up we have a project called Rickshaw, Rickshaw is a 4:42 really great library for creating grafts and interactive time series grafts. 4:45 So if we look at the Rickshaw website right here, we can 4:50 see it is a JavaScript tool kit for creating interactive time series graphs. 4:53 Lets go ahead and see what that means by clicking on See Demo. 4:57 Wow. 5:01 Look at this graph. 5:01 We have an area graph right here. 5:02 Is it, is it called a chart? 5:04 Graph? 5:06 Chart? 5:07 >> A line chart? 5:07 >> Line, line area graph? 5:08 >> Line graph? 5:10 >> Chart, yeah. 5:10 >> I'm not really sure. 5:10 >> It's a, it's one of those. 5:11 It's a, it's a, it's a chart or a graph. 5:12 And, as you can see, there are a ton of different options as I hover. 5:14 As I hover over different parts of the graph, it is telling 5:17 me the information right there, at that particular point in the series. 5:21 You can also scroll back and forth and this will 5:25 either zoom in or out on the graph and allow you. 5:28 Finer grain control over it. 5:32 Now I it's either a ton of different options 5:34 that we have on the left we control what 5:36 kind of graph we are displaying, area, bar, line, 5:37 scatter, and we can even choose how we want. 5:42 The data to be, displayed in these different graph types. 5:45 So if we go back to the page here, we can see this is built on d3.js. 5:49 Now this is nice because you may already know d3. 5:57 But it can take quite a bit of work to implement some 6:00 of these things inside of D3, and that is where RIckshaw comes in. 6:03 It gives you a, very, very simple and 6:08 minimal way of building these different d3 graphs. 6:11 Now as you can see you're just creating a, 6:15 graph element right here, and initializing a new RIckshaw.graph model. 6:18 You give it the element and the, width and height, as well as the series. 6:24 And then you call the render method and you get that pretty graph right there. 6:28 Now the same API applies to area graphs and all 6:33 of the different kinds of graphs that we talked about before. 6:37 Now we're not gonna go into everything here but this is 6:41 a, a very thorough library which I encourage you to check out. 6:43 Remember you can check it out in the show notes at youtube.com/gotreehouse. 6:46 Or search for us in iTunes, we're the Treehouse Show. 6:50 And don't forget to join us at teamtreehouse.com/show, 6:52 for a 30 day free trial, of Treehouse. 6:55 >> Very nice, well, if you've ever tried 6:58 to integrate with another brand on your site. 6:59 Say for example you were trying to add. 7:02 A, logo for Behance or Dribbble or something like that. 7:05 All of them have different branding guidelines, 7:10 and you wanna make sure that you 7:12 follow them, and don't put, you know, a logo on the wrong color background. 7:13 >> [LAUGH] Yeah, no. 7:17 >> Because something like that, because that would be, can be disastrous. 7:18 >> Yeah, the web police will get you. 7:21 >> More importantly, the people that are policing that brand. 7:23 Could get you and ask you to change it or take it down. 7:26 So it's better to just have it right from the start. 7:29 Because those things could affect your design. 7:32 So this is a website that says Find Guidelines on the Web. 7:35 And it's the fastest way to find brand assets. 7:38 So you can just hit Cmd+F to find a brand quickly on the page. 7:42 And it will actually take over. 7:47 The normal Cmd+F functionality. 7:49 So I could type in say Google, or something like that. 7:51 And it will give me the different Google 7:56 brands, such as Google+ or the normal Google brand. 7:58 And they have a whole bunch here that they 8:02 support, and when you click on one of these. 8:04 It will actually take you to the 8:08 official Brand Guidelines for that particular brand. 8:09 So for example with Dribbble, they say here are 8:13 the vector versions of our logo, and logo mark. 8:16 So here's the Dribbble logo and here's just the ball icon. 8:20 And then they say, do. 8:24 These things and don't, do these things. 8:26 These are a very common thing for brand guidelines. 8:29 And they give their official colors, and, a couple of others 8:32 things to do when writing about, the particular brand for example. 8:35 Anyway, I thought this was pretty cool. 8:41 So definitely be sure to, check this out if you want to add some brands. 8:44 To your site >> And I do 8:48 >> Yeah 8:50 >> I don't want the web police knocking at my door. 8:50 I don't know about you. 8:53 Next up we have a project called sidecomments.js. 8:56 If you've ever been to a medium website, and 9:00 when I say medium I mean medium.com, you know, 9:03 not, the temperature that you might like your hamburger 9:06 cooked, Obviously a lot of people get that wrong. 9:08 Medium has a really nice interface where 9:13 as you're scrolling down an article, you will 9:14 see on the right of the article there is a little box right there and 9:17 it has a number on it if somebody has commented in that section, and then 9:22 you can click the number and it will show you the comments for that particular. 9:27 Piece of text. 9:32 Now if you want to, you can go ahead and comment beneath that. 9:33 Or, at any other point in the paragraph. 9:36 So I'm going to comment and say, Hello, and then click Post, and there it is. 9:40 Now, if you want to implement something like this 9:45 in your own site, you just download the SideComments.js file. 9:48 And then include it in your project. 9:52 It also includes a theme. 9:55 So you get the, same thing right here that we 9:58 have, with the icon and the number inside of it. 10:01 Then it goes through, tells you how to set up your HTML and then how to initialize 10:04 the side comment object as well as how you have to format your current user. 10:10 Then, you can go through, and get existing 10:16 comments which will be applied to the different 10:19 paragraphs, and you can even listen on the 10:21 hosted events and on the deleted events for comments. 10:25 Now there's a whole bunch more in the documentation. 10:30 As usual, this project has a great number of options for 10:32 you to configure the plug-in and you can check that out. 10:36 In the show notes which I think I've said the address of already. 10:39 >> Well that's all we have time for this week. 10:43 I am @nickrp on Twitter. 10:44 >> And I am @jseifer. 10:46 For more, information on anything we've talked 10:47 about, check out the show notes at youtube.com/gotreehouse. 10:49 Search for us on iTunes we're the Treehouse Show and also, don't forget 10:52 to sign up for a 30 day free trial of Treehouse at teamtreehouse.com/show. 10:56 >> And of course, if you'd like to 11:01 see more videos like this one about web design. 11:02 Web development, mobile, business, and, so much more, 11:05 be sure to check us out at teamtreehouse.com/show. 11:08 Thank you so much for watching and we will see you next week. 11:10 [SOUND] 11:15 [MUSIC] 11:15

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

Sign up