Episode 120: Web Performance, Material UI, SQL Charts

I'm Nick Petitt. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the treehouse show, your weekly dose of 0:02 internets where we talk about all things web design, web development and more. 0:04 >> In this episode, we'll be talking about web performance, 0:08 material UI, SQL charts and more. 0:11 >> Let's check it out. 0:15 [MUSIC] 0:16 First up, we have a new website called www.Perfrocks.com. 0:21 This is a collection of web performance, 0:25 articles, books, talks, slides, people, and more. 0:28 Wow! Yeah, 0:33 it's like a whole website, with links to all those things. 0:34 Now if we take a look at articles, 0:37 you may recognize some of them from the Treehouse Show, but 0:38 this is a wonderful curated collection on web performance. 0:41 So you can see BrowserDiet, which we covered once on here. 0:47 We have a Beginner's Guide to Website Speed Optimization, 0:51 which we also covered here, on the Treehouse Show. 0:54 actually, just a ton of resources, 0:58 if you think you need to catch up on Web Performance. 1:01 There is a nice collection of tools I believe, 1:05 we've gone over some of these not all of them here on the show. 1:08 These all do different things, to enhance your websites performance. 1:12 Here's one for grunt-responsive-images, 1:17 which will produce images at different sizes for your responsive websites. 1:19 Anyway, not too much to say but definitely check it out, it's just 1:24 a wonderful curated collection of modern performance, enhancements for you site. 1:27 >> You know, I clicked on the people section it says, 1:32 inspiring individuals that care deeply about fast websites, and 1:36 teach others the best practices a lot of great people there to- 1:39 >> Ctrl+F, are we on here? 1:43 No, this is pointless forget this site. 1:45 >> Well, I was gonna say, I noticed we weren't on here, and then I realized that 1:47 you actually have to contribute something meaningful to be listed there. 1:52 Brighten the fields Nick. 1:57 >> Next up is material UI. 1:59 This is a tiny CSS framework and also a set of components, for 2:01 react that are based on Google's all new material design. 2:07 So let's take a look at this. 2:12 I'm gonna click on demo here. 2:15 And these are all of the components that can be used with react. 2:18 React of course if a JavaScript library for creating user interfaces. 2:23 So this is basically putting a coat of paint on top of that. 2:28 That makes it look like Google's new material design. 2:32 So here you have some buttons, 2:36 you can click on a dialogue box here and see what that looks like. 2:38 Pretty nice, there's drop down menus, so that looks lovely. 2:43 Icon buttons, regular icons, and here's every possible icon you could ever want. 2:49 There's an amazing amount of them in there. 2:56 There's also inputs, so really, really nice stuff it's, it's really nicely done. 2:59 Let me go back here, and see if I can get to the home page there we go. 3:07 If you scroll down here, there's a section for getting started. 3:12 So if you just wanna kinda get an overview, and 3:16 see what this is all about, that's a good place to start. 3:18 There's the Components section, which we already looked at. 3:22 And there's also the CSS framework now, I think calling this a CSS framework is 3:26 a little bit of a stretch, because there's only colors and typography listed here. 3:31 But it is a framework nonetheless so, if all of the normal typography stuff 3:36 that you might expect, and then the colors are really pretty comprehensive, 3:41 they've used less variables to add every 3:47 Ui color in the Google material design color palette. 3:52 So if you scroll down here you can see all these, different shades of blue, and 3:56 indigo, and teal, and green it's pretty cool. 4:02 >> You know, I'm a big fan of Google's material design, and also react I, 4:06 I can't wait for it to be more widespread. 4:11 But- >> Yeah. 4:13 >> You know, for us to be living in a material world. 4:14 [BLANK_AUDIO] 4:16 >> I have no reaction to that. 4:19 >> Next up we have a project called Chroma.js. 4:20 This is a small JavaScript library, for doing color calculations and conversions. 4:22 So, if we look at some of the examples right here, 4:30 you can call this Chroma function, give it a hex value and tell it to darken. 4:33 Then you can give it another command say, hey, I want the hex value back from that, 4:37 and this is a converted version of a darker version of what you sent in. 4:42 Now, you can also scale that, there's actually a ton of different options here, 4:50 let's go ahead and look at the API docs. 4:53 Now you can give this the colors to begin with, 4:55 in a few different ways, you can give it CSS, RGB, or hex. 4:59 And it's very easy to use send it a string, or 5:05 the different RGB values and then you're good to go. 5:09 Now, you can return a color from these things you, this is aliased as chroma.css, 5:12 so if we send in hex we get a color back. 5:18 Now we can interpolate between different colors and 5:23 then you can even give that a mode as well. 5:27 You can either do HSV LAB or, or lab as some people call it. 5:29 Now you can also work with these you can saturate, brighten, 5:34 get an alpha channel, make it darker, make it lighter. 5:38 And once again, you can change these and 5:41 do all sorts of conversions from RGB, CSS, Darkin and Back. 5:43 Tell you the different options this works with NPM, so 5:47 just NPM install Chroma.js, and you are good to go. 5:52 So go ahead and check that out, if you're wanting to do a color conversions, 5:57 they're not extremely difficult to do, but 6:00 this library will save you just an extra little bit of time. 6:02 >> Yeah, it's pretty handy to be able to do that in JavaScript whereas, normally, 6:05 you might do that in- 6:09 >> Your head. 6:11 >> In your head or in a CSS preprocessor like Sass or 6:12 Less, but sometimes you have to do stuff like that in JavaScript so, 6:15 it's kind of convenient to have that available there as well. 6:19 Next up is CSS Dig, this is a Chrome extension, so 6:22 you can install this to the Google Chrome web browser, which I have already done. 6:28 Just gonna go up here and click on the CSS Dig plugin here, and 6:33 I have an asset on this page called style.css and I can click start digging. 6:39 Whoa, what just happened? 6:49 Well- >> I don't know, what happened? 6:50 >> it listed out, 6:51 all of the CSS properties, that are being used in that style sheet. 6:53 And then, on the righthand side here, it's listing the counts for all of those 6:58 properties, so every time one of those properties is used it's counted here. 7:03 So this is a good way to kind of dig into your CSS, and 7:09 say like you know, how many backgrounds am I declaring here? 7:12 Or maybe you have a rouge background color, and 7:18 the Chrome inspector isn't quite giving you all the information you need and 7:22 you just wanna maybe do a quick check and say like, hey, did I 7:26 set all of my backgrounds across my whole site, to the color scheme that I'm using? 7:30 Is, is this all correct? 7:36 So you can dig in here, and 7:37 if you see one that's maybe a problem, you can click on it. 7:39 And very much like the Chrome Inspector, it will show you the CSS 7:43 in that particular file, where it's coming from. 7:48 So you can say on this button here it looks like I'm declaring that, 7:52 and you can dig into that a little bit further. 7:57 Anyway, thought this was pretty cool, 8:01 it's a very nice complement to the Chrome Inspector. 8:03 So if that's maybe not giving you everything that you need,l to dig into 8:07 your CSS, this can be helpful as well. 8:11 >> Yeah, I dig it. 8:14 >> Dig it as well. 8:15 >> Next up we have a project called FnordMetric. 8:16 This is really, really cool, it allows you to create charts straight from SQL. 8:19 >> Wow. >> Yeah, 8:25 really, really interesting let's go ahead and 8:26 jump straight to the examples, because examples are more interesting than words. 8:28 Now let's take a look at this line chart right here, 8:34 you can see that we have this chart, it's got x y coordinate, and 8:36 then as we go along we can see the different labels. 8:41 This is not that interesting on its own, but 8:44 what is interesting, is how this was generated. 8:47 So, we have this sequel-like query, where we're importing a table from a CSV, and 8:51 then saying draw this line chart, and then giving it this specific data. 8:59 And you'll notice that we're also doing a calculation on the data, 9:05 straight into the chart. 9:10 So then this is run using a command line interface outputting a format, 9:12 and passed in the SQL, and this is what you get back. 9:19 Whoa, that's all it takes to create this chart, 9:24 you don't even have to do any manipulation or programming on it. 9:26 Now, there are a ton of different charts that you can create here. 9:30 And the examples on this are really great, because it teaches you how to use it 9:35 as you are going along looking at the different examples. 9:40 So, here again, we see the source code for this example, a little bit more 9:44 complicated than the last time, and that creates this chart with multiple y axes. 9:48 There are combined charts, area charts, and 9:55 this also comes with a server, so instead of exporting the data every time. 9:58 You can create a server serve it up on a port you can even give it different 10:03 storage backends, and it can work with Starts D if you are already using that. 10:10 Anyway, there are a tons of different options here, 10:16 this is an absolutely amazing project, and I recommend checking it out, 10:18 we'll have a link to it in the show notes. 10:22 >> Very nice stuff, 10:24 well that's all we have time for this week I am @nickrp on Twitter. 10:25 >> And I am @jseifer for more information on anything we talked about, 10:29 check out our show notes which you can find right below this video. 10:31 Thanks so much for listening, and we will talk to you next week. 10:34 [MUSIC] 10:37

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

Sign up