Episode 130: Flexbox, Javascript Charts, Syntax Highlighting

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching The Tree House Show, your weekly dose of internets where 0:02 we talk about all things web design, web development and more. 0:04 >> In this episode, we'll be talking about Flexbox, 0:07 JavaScript charts, syntax highlighting, and more. 0:10 >> Let's check it out. 0:13 [MUSIC] 0:15 First up is this really great article called Using Flexbox today. 0:20 I guess you could also use it tomorrow as well, but you can use it today, too. 0:25 >> I was putting it off till tomorrow. 0:30 >> Well. 0:32 Today. >> I was reading this article on 0:33 procrastination, I was like I'll try, I'll try other things later. 0:35 You know? 0:38 >> So if you haven't heard, Flexbox is a new way to layout webpages. 0:40 And instead of using floats or inlines, or clear fixes, or 0:44 display table, and all of the other sorts of stuff, that you might have used for 0:50 positioning and layout in the past, you can use Flexbox. 0:55 Now, it's a little bit difficult to grasp, and 0:59 that's exactly the crux of this article. 1:02 It says that a lot of online tutorials will use abstract examples to explain 1:05 Flexbox. 1:10 Well actually, there's a lot of practical uses for this. 1:11 So for example, it makes card layouts a lot easier. 1:15 This is a pretty popular design pattern. 1:19 In fact, this is something that we use on Treehouse that's pretty cool. 1:22 There's also split screen layouts that it makes really easy, 1:27 much easier than it would have been in the past, or I guess just yesterday, 1:32 since this is Flexbox today. 1:37 >> Yesterday is tomorrow. 1:39 >> Tomorrow's today is, 1:40 is tomorrow? 1:45 Yesterday? 1:48 >> I guess we're supposed to use Flexbox at all those points. 1:49 >> Yes. 1:52 Actually, Flexbox does have pretty great browser support so 1:53 it's compatible with pretty much any version of Google Chrome, Firefox, Safari. 1:57 The only place you're gonna have a little bit of trouble is in Internet Explorer. 2:03 >> Hm. >> IE9 and back doesn't support it at all. 2:07 IE10 has the older 2012 syntax. 2:10 And IE11 supports it, well, today. 2:15 But there's a couple of things that you can do to make it work. 2:20 You can have a couple of fallbacks. 2:24 You can also do feature detection if you wanna start using it right now. 2:25 >> I guess you could say your options are flexible. 2:30 >> They are flexible. 2:33 You, you can, you don't have to think inside the box. 2:35 >> Next up we have a library called TauCharts. 2:39 This is JavaScript charting built on top of D3.js and 2:42 the focus of this library if you had to guess is on design and flexibility. 2:47 So that's all well and good but 2:53 let's see some examples because that is what is really interesting. 2:54 So, here we have just a couple of charts, 2:58 and the code to make this is really, really easy. 3:01 So, you can see as we kinda hover over the different items on the side, 3:04 they get highlighted in the charts themselves. 3:09 And then there's even little drop-downs here to change the different 3:11 trend lines from linear to exponential, and a couple other options. 3:15 Now, you might be thinking that a lot of code is required to get that working, but 3:18 no, not really much code at all. 3:23 You just give it the chart, you ex you initialize the chart here, give it some 3:25 data, dimensions, and different types, as well as plug-ins if you want to. 3:29 There's options for tool tips, legends, 3:34 and kinda different things that you would think would be in a charting library. 3:36 Now, there are some great examples here on the site, and 3:40 you can see that it really does not take a ton of code to get this working. 3:43 Here we go. Here's a, 3:48 here's another example down here. 3:49 And this is actually very performant even with a ton of different data. 3:52 Now, there's very thorough documentation here. 3:57 It walks you through all of the basic concept and 4:01 even has examples right inside. 4:03 Now, this is built on, on top of D3.js, so you will need that as a dependency. 4:06 It just kinda makes these things a little bit easier to use, so if you 4:11 are interested and in need of a charting library, make sure to check this out. 4:14 You can find a link in the show notes right below this video. 4:18 >> Very nice stuff. 4:21 Well next up is yet another chart. 4:21 We have some, we have some nice segues today, flexibility, charting. 4:24 And this is a cool chart for CSS rulers. 4:28 And this can be a little bit of a complex thing to understand. 4:33 When you're dealing with different CSS units, are they relative to the font? 4:37 Are they relative to the viewport? 4:42 Or are they absolute, or in other words a physical measurement. 4:44 >> Only sythes deal in absolutes. 4:49 And, and also CSS. 4:51 >> And, and also several CSS units deal in absolutes, relatively speaking. 4:53 So there's these first few which are colored green. 5:01 And that is relative to the font size so em's, ex and 5:05 a few others here, rems, are relative to the font size so that's good to know. 5:12 Then there's also a few that are relative to 5:18 the viewport which can be pretty handy to use in certain situations. 5:21 And then there are absolute measurements, or physical measurements. 5:26 These don't see quite as much use with the advent of responsive web design. 5:31 But they're still pretty useful in certain situations. 5:36 >> Maybe print style sheets? 5:40 >> Exactly. 5:42 So here we have a couple of different toggles where we can adjust 5:43 the font size of HTML, the body, or the example here. 5:48 And you can see how these different units respond. 5:53 So, for example, this is like one inch here. 5:57 Or these are relative to a font, these are relative to the viewport. 6:01 And so when you change these, they're all gonna react differently. 6:05 So, if I increase the font size here, those will change. 6:09 Or if I change the width of the example, so 6:13 you actually change the whole unit there, you can see how that behaves. 6:18 Anyway, this is just a really handy chart if you're trying to figure out 6:22 some CSS units and you're having trouble debugging it. 6:27 You can see exactly how they should be behaving under ideal conditions. 6:30 >> Yeah, I guess you could say that that, that is off the charts. 6:36 >> You could say that. 6:40 Next we have a project called highlight.js. 6:41 This is a small JavaScript library that gives you syntax highlighting for 6:44 your web pages. 6:49 It supports a ton of different languages, 112 of them to be exact. 6:50 And it has 49 different styles or themes. 6:54 And you can see I'm, I'm clicking through here and the language is changing, and 6:58 also the theme is changing as well. 7:02 Now this is gonna be really useful if you are trying to show code on your webpage. 7:05 Now what's really nice about this library compared to some other ones is 7:11 it doesn't take a lot to get going. 7:16 You just, throw in a link to the style sheet and the script. 7:17 And then, If you want to, all you need to do is call this line right here, and 7:21 it highlighting on load. 7:25 Then, you surround your code with a pre-tag, and then a code. 7:27 And then you give it the class of the language that you wanna use. 7:31 So, the really nice thing about this is, that you can do custom initialization. 7:36 So, instead of saying, hey, I want all of my pre and 7:41 code tags to have the syntax highlighting, you can change that to divs 7:45 with different classes and there's a lot of documentation that lets 7:50 you really get into the nitty gritty of when you are doing this highlighting. 7:55 One thing that's really nice is that depending on the language 7:59 you can also change spaces to tabs. 8:02 And a ton of different things right there let me see if I can find it right here. 8:07 But yeah, I cannot find it. 8:14 That's the problem with doing a live show. 8:16 It also does support line numbers, and yeah, just a bunch of various options. 8:18 Anyway once again if you need to add syntax highlighting to your webpage, 8:22 check this out. 8:25 We'll have a link in the show notes. 8:26 >> Thanks for highlighting that, Jason. 8:28 Next up, is a really cool tool called Shade. 8:30 This is a mathematically derived gradient explorer. 8:33 What does the, what the heck does that mean. 8:37 Well,. >> I have no idea. 8:39 >> Basically, it can be a little bit difficult to understand 8:40 what kind of gradient you're gonna get when you just type in code into CSS. 8:43 You have to type it in, go back, refresh in the browser. 8:48 You find out that's not what you wanted and 8:51 then you have to do that cycle over and over again. 8:53 Well this is much better because you can just use these sliders here. 8:57 And you can change the hue of the gradient. 9:01 And look at that, they even change the color of the fonts. 9:04 I can still see it. 9:07 That's pretty clever. 9:08 And then you can change maybe the saturation. 9:09 So you can go from like grey scale to color. 9:12 And you can change the lightness. 9:16 And then you can also change the hue shift here. 9:19 You can change, the saturation of that and the lightness as well. 9:24 So, there's a couple different adjustments there that are actually, 9:28 maybe a little bit more similar to what you might expect 9:32 in Photoshop in terms of these little sliders here. 9:35 And then, right there, 9:39 it gives you the code to actually put this into your web page. 9:40 So if create a gradient and you end up liking it, you can go ahead and 9:44 just copy and paste that right into your site. 9:49 You can also of course, put in a base color here, 9:53 if you have a specific color you want to start out with. 9:55 And then you can adjust from there. 9:58 Anyway not a whole lot to say about that. 10:00 But, I thought this was a, pretty cool tool. 10:03 >> Yeah, it's delightful. 10:07 >> Anyway, that's all we have time for this week. 10:08 I am @nickrp on Twitter. 10:10 >> And I am @jseifer. 10:11 For more information on anything we talked about, 10:12 check out our show notes right below the video. 10:14 Thanks so much for watching, and we will see you next week. 10:15 [MUSIC]. 10:18

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

Sign up