Episode 136: Date Pickers, CSS Refactoring, HTML Audio

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 >> In this episode, we'll be talking about date pickers, 0:07 CSS refactoring, HTML audio, and more. 0:10 >> Let's check it out. 0:14 [MUSIC] 0:14 >> First up, we have a date paginator for Twitter Bootstrap. 0:20 This is a very interesting UI plugin that allows you to 0:24 paginate different date ranges. 0:28 So here, you can see we have this bar full of different dates. 0:31 In the center, the selected date is Monday, April 6th, 2015, or O 15, 0:36 as Nick says. 0:40 And if you click on any of these different dates, you can see it pops up and 0:44 moves the selected date over to what you have selected. 0:48 Now, you can also click this little calendar icon in the top right, and 0:53 that will move the whole thing over. 0:57 Now, this is going to be useful if you're doing something like different reports and 0:59 want to change what the user can select, and the different date range that way. 1:04 Now, this does have a few different dependencies, 1:09 but if this was a requirement in your project, 1:12 you are probably already, already using most of these. 1:14 Bootstrap, jQuery, Moment.js, and Bootstrap Datepicker. 1:17 Now, once you have all those, this is very, very easy to use. 1:22 Just give it your div, and then call the datepaginator function. 1:25 Now, you can give it different options, such as the selectedDate, and 1:30 format, and then initialize it with those different options. 1:34 Now, you can give it a start date and 1:39 an end date, and even the option of whether or not to highlight today. 1:41 Ton of different days. 1:45 So if this is something you think may be beneficial for you in your project, go 1:46 ahead and check it out in the show notes, which you can find right below this video. 1:51 >> Very cool stuff. 1:55 Well, next up is this wonderful article over on the CSS-Tricks blog 1:55 called Starting a Refactor with CSS Dig. 2:00 Now, CSS Dig is a Chrome extension, and 2:03 this article is written by the creator of that Chrome extension. 2:08 So, pretty cool resource on CSS Dig. 2:12 Basically-. 2:16 >> I believe we talked about that on a previous episode of The Treehouse Show. 2:16 >> Yes, I think we did. 2:20 Basically, it allows you to, as the name implies, dig into your CSS and 2:22 find places that could use some refactoring. 2:27 >> It's a great Chrome extension. 2:31 I, I guess I could even say that I dig it. 2:33 [BLANK_AUDIO] 2:35 >> You could say that, and you did. 2:38 So, when you're using CSS Dig, you'll go ahead and start the audit, 2:42 and it explains a little bit about how that works and 2:47 actually some instances where some content security policies can cause it to fail. 2:51 But we won't worry about that. 2:57 First, a good way to speed up your website is to try to reduce HTTP requests. 2:59 So it points out a couple of areas where you might want to combine your CSS. 3:06 And then, it also shows you areas where there are a ton of colors. 3:13 So this is actually from the Huffington Post from a little while back, and 3:18 it says, although it looks pretty, do they really need all those shades of red? 3:23 So, just look at all those different colors and 3:29 think about what that must look like in CSS. 3:33 There's gotta be a better way 3:35 than having all of these different colors to find, right? 3:38 >> Really? 3:41 I mean, I guess it could either way, right? 3:42 Kind of a, kind of a grey area. 3:44 >> Yeah, a little bit. 3:47 It's not completely black and white. 3:49 >> I know. I get sad if there are too many, you know? 3:51 >> Yeah. >> Feel a little blue. 3:53 >> I'm glad we have such a colorful personality around like you, Jason. 3:56 >> Thank you. 4:01 >> For comparison-. 4:03 >> Not everybody has that kind of personality around. 4:03 You could say that they're kind of green with envy. 4:05 >> For comparison, here's apple.com. 4:10 They have just a couple of shades of grey, and this blue color. 4:13 So you could say, what's black and white and blue all over? 4:18 Well, apple.com. 4:21 So that's actually a lot more simple, so that's a, it's a much better 4:23 way of representing colors in CSS just because there's, there's less of them. 4:29 It's less code to manage. 4:34 And they also give an example of what that might look like in SCSS, or Sass. 4:36 And you could create just a couple of different colors, 4:42 and then actually map them or reference them. 4:45 Another area where you can have a lot of inconsistencies is spacing. 4:48 So it goes into detail about that as well, but I will let you read that on your own. 4:53 Anyway, really cool article about how to try to consolidate a lot of your CSS, 4:59 improve a little bit of performance, and generally make things more organized and, 5:05 I guess, visually legible on your website. 5:10 >> Very nice. 5:13 >> Very cool stuff. 5:14 >> Next up, we have a plugin called Jquery Toast. 5:14 This is useful for giving you messages to tell your users. 5:18 Here is an example. 5:23 If you take a look at the bottom left of the screen, there is the Toast popup. 5:24 Ooh, look at that. 5:29 Now, there are a bunch of different options for doing this. 5:31 You can have it fade. 5:34 You can have some transitions. 5:36 You can have it stay on the screen. 5:38 And look at that, you can even have some different HTML and 5:41 CSS inside of the Toast. 5:45 And let's see, we can do a little slide transition through the Toast. 5:47 >> Oh, look at that. 5:51 It's just like a real toaster. 5:52 Just pops right up there. 5:53 >> Yeah. 5:54 >> Nice. 5:55 >> That, that might be how the name was inspired. 5:55 >> Possibly. 5:57 >> Actually, may, you know, the way it actually happened was, there, 5:58 there was a couple authors of this plugin sitting around, and they said, hey, 6:01 I'd like to propose a jQuery Toast, plugin, written in JavaScript. 6:05 >> I am totes into that. 6:11 >> Oh. 6:15 >> Yeah. 6:15 >> So you can also customize this plugin. 6:18 I've, I've done this right here, right now. 6:20 I'm calling this little, little hot dog toast, right? 6:22 Look at that. It's yellow and red. 6:25 >> Oh. 6:26 >> Yeah. 6:27 >> It's got a little mustard on it. 6:27 >> Yeah, a little-. >> And ketchup. 6:28 >> Yeah. >> Nice. 6:29 >> I know. 6:30 So, here are different options for Toast. 6:31 You can text. 6:32 There's no butter option, which is clearly an omission. 6:33 >> Really strange. 6:37 >> Yeah. 6:38 Give it heading, and then the transition, whether or 6:39 not to hide it, and just a bunch of different things. 6:42 Anyway, if you're in the market for a, a Toast plugin, go ahead and check this out. 6:45 You can find a link in the show notes. 6:48 >> Very cool stuff. 6:51 Well, next up is HTML-GL. 6:51 This is way for you to render-. 6:55 >> Say good luck to HTML. 6:58 Right? 7:01 >> It's actually graphics library, but that was a good guess. 7:02 >> Thank you. 7:06 >> Yeah. 7:07 Basically, it's a way for you to render HTML and CSS using WebGL. 7:09 Now WebGL is basically-. 7:15 >> You wishing good luck to the web. 7:17 >> Again, it's, it's, it's graphics language. 7:20 >> Oh. >> We've been through this, WebGL 7:22 is a way for you to represent 3-D objects in the browser using 7:25 a syntax that's similar to the popular graphics library, OpenGL, which is-. 7:29 >> Which, of course, means good luck to everyone out in the open. 7:34 >> It, that's it, that's actually what that means. 7:37 It's, it's, it's good luck. 7:40 And this is pretty weird because you might think, well, 7:43 what, why wouldn't I want to just render my HTML like normal? 7:46 And that's perfectly okay, but this good luck, or graphics library, 7:51 version is another interesting way of doing it, and I'll show you why. 7:56 Let's take a look at this demo here. 8:01 So, what they've done is, they've taken the thumb-. 8:03 >> Whoa, Nick. 8:06 You might wanna get your computer out of the water. 8:07 >> Yeah. 8:09 It's, it's >> That is definitely not good luck for 8:10 your computer to be inside of water. 8:13 >> Yeah. Let me take it out of the, the water here. 8:15 Oh, now everything's all blurry. 8:17 >> Oh wow. >> Look at that. 8:19 Huh. >> Looks like I need readingGL glasses. 8:22 >> [LAUGH] So now everything's pixellated. 8:24 So, you can see I'm applying these, these different filters here, and 8:27 I can actually adjust the parameters of each one of these. 8:31 >> Wow. 8:34 >> It's pretty neat. 8:35 I can actually invert all of these, 8:36 go back to that watery effect cuz that's kinda neat. 8:38 >> That is kinda neat. 8:42 >> And when I click on these, it can actually detect where I'm clicking, so 8:43 I can click on this, and I'll say Breaking Bad. 8:48 Actually, I'm curious. 8:50 If I click like, right between one of these ripples, oh, 8:51 I think I clicked on one. 8:56 Okay. 8:57 Yeah. Actually, 8:59 I'm clicking between these, and, sometimes it's catching it, sometimes it's not. 9:00 But it's kind of interesting that it does that, 9:05 because it is actually using some WebGL shaders here to do this. 9:07 Now, the reason that this is interesting is, 9:13 A, doing something like this in CSS would be almost impossible. 9:16 I'm not even sure how you would do that. 9:21 But the second thing is, even if you can do it in CSS, maybe something like a, 9:23 a blur here, it's still gonna be vastly more performant 9:28 in WebGL because it's running everything off of the GPU. 9:33 And, so you have this dedicated chip in here 9:37 that's basically doing all of the heavy lifting for you. 9:41 You don't have to rely on just the CPU to do all these neat effects. 9:44 So, this is pretty experimental at this point, so I wouldn't recommend 9:50 doing this in production necessarily, unless you really know what you're doing. 9:55 >> If you're feeling lucky. 9:59 >> But, right. 10:01 I mean, if you, if you do it in production, I'd say good luck to 10:02 you because it might not work everywhere, this is still sort of in development. 10:05 But it's an interesting idea, and 10:10 it's one that I think could be kind of a wave of the future. 10:12 I don't know, we'll really have to see if this gets any kind of traction at all. 10:17 But it's a really interesting way of rendering HTML, because in a lot of 10:22 instances it's way, way faster to do all types of animations and effects. 10:27 >> Very cool. 10:32 >> Very cool stuff, yeah. >> Next up, 10:33 we have a plugin called audio.js. 10:34 >> Alright, I'm listening. 10:38 >> This is a little JavaScript library that lets you use the HTML5 audio 10:39 tag anywhere. 10:43 It's kind of like a polyfill. 10:45 It uses a Flash fallback for browsers that do not support the HTML5 audio element, 10:46 and here is what it looks like. 10:51 You can see right on top of the page there. 10:53 All you do is drop the script into your page, and then initialize audio.js, 10:55 and then you can use the HTML audio tag anywhere inside of your HTML. 11:01 And it will have a Flash fallback all the way down to IE version 6. 11:07 >> Wow. >> And you can customize it, 11:12 just like you would expect. 11:14 Here's a hot dog audio player, just like we had-. 11:15 >> Nice. >> A little bit before, yeah, but 11:18 with toast. 11:20 You know, got toast, got hot dogs, pretty much anything you want. 11:20 You can do a bunch of different players, autoplay, loop, whatever you want. 11:24 And even supports a playlist. 11:28 And you can customize this CSS. 11:31 Now, it goes through a little bit about the different security, but for 11:34 the most part, this is very easy to use. 11:37 And if you know how to use the HTML5 audio tag, 11:39 you already know how to use this plugin. 11:41 So, that's about all we have time for today. 11:44 Nick, who are you on Twitter? 11:46 >> I am @nickrp. 11:47 >> And I am @jseifer. 11:48 For more information on anything that we talked about, 11:49 check out the show notes right below this video. 11:51 Thank you everybody for watching, and we will see you next week. 11:52 [MUSIC] 11:56

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

Sign up