Episode 134: Reactive Programming, Accessible Colors, JavaScript Errors

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching the Treehouse Show. 0:01 Your weekly dose of Internets where we talk about all things web design, 0:03 web development and more. 0:06 >> In this episode we'll be talking about reactive programming, accessible colors, 0:07 JavaScript errors and more. 0:12 >> Let's check it out. [MUSIC] 0:14 >> First up, we have a very long post on the introduction to reactive 0:20 programming that you have been missing. 0:25 >> All right, give us the TLDR. 0:28 >> All right. Well, 0:30 what in the world is reactive programming? 0:30 Well, the author of this article wanted to know exactly that. 0:33 And had to learn it the hard way, which was actually doing the programming and 0:37 all sorts of reading. 0:42 So the author of this article was nice enough to sum it all up in this very, 0:43 very thorough article. 0:48 That was just a quick scroll to give you an idea about how long this article is. 0:50 Now I'm going to read this whole thing to you word by word, so 0:54 get comfortable, grab a beverage, and let's get to it. 0:57 No, I'm just kidding. 1:01 So what is reactive programming? 1:02 This is basically the way of programming in which you are working with 1:03 asynchronous data streams. 1:09 And then after you have those asynchronous data streams, 1:11 you are manipulating them in some way. 1:15 And then displaying the output, and reacting to events. 1:18 Wow, that sure is a whole lot of things, and what does this all mean? 1:22 Well, let's go ahead and see what happens. 1:27 Well, this is an example of a stream. 1:29 Notice it's got arrows, and circles, and colors. 1:31 There. I hope that explains 1:34 absolutely everything to you. 1:35 >> Got it. 1:37 >> Good. 1:38 No. 1:39 So the author of this article really shows what exactly happens when hey, 1:39 okay I've got, direct programming, what's going on. 1:44 Here's an example that we go through and recreate in this article. 1:47 This is an example of a list of people to follow on Twitter. 1:51 And you'll notice that there are a couple buttons on here. 1:56 You can either follow this person, which is going to do something, or 1:59 click the X which will get rid of this suggestion and load up another one. 2:02 You can also refresh this, which will go out and 2:08 re-fetch different people to follow, and so on and so forth. 2:11 So the rest of this article walks through doing that and 2:16 walks through reactive programming in the process. 2:19 So basically they take this whole request and response and 2:23 you subscribe to the request and then use jQuery to get a JSON response. 2:27 And then, you can subscribe to that as well. 2:35 Once this is all gone, yet look at that. 2:39 The, these are, this is just a small example of the emotions that you'll 2:41 experience while reading this article. 2:43 So you get these requests and responses. 2:46 Okay the request goes out, and then the response comes up. 2:49 Here's like, little As that request big A is the response and then the article 2:51 shows you how to combine all this, what happens in these responses and 2:56 by the end of the article you have a whole response stream. 3:01 This is the entire code that you write in this article 3:05 along with a great explanation of how this all works. 3:09 Now, obviously, I can't explain all this to you, but 3:12 this is an absolutely wonderful introduction to reactive programming. 3:14 Definitely check it out. 3:17 We'll have a link in the show notes. 3:19 >> Very nice stuff. 3:21 Well, next up is a tool for choosing colors, 3:21 but not just any colors, colors that are safe for 3:26 the WCAG, that's Web Content Accessibility Guidelines, 3:31 Guidelines just like ATM machine or PIN number. 3:36 So I'm gonna go ahead and click get started here and 3:39 I can pick a background color. 3:43 So I'm gonna click here and I'll pick a darker background color, so 3:45 maybe we'll go with like a, like a dark blue or something like that. 3:50 And then I've got a font family, font size, font weight, and WCAG standard. 3:55 Let's go, let's go triple A. 4:00 Then I'll say, all right. 4:01 Generate the color palette. 4:03 >> Oh, that's nice. 4:05 >> And then we can click on these, and pick a secondary color for the text. 4:06 But like I said, this is not just any kind of color. 4:13 These are colors that hit the proper contrast ratio 4:18 to be compliant with the WCAG standards. 4:24 So if you have a color that you definitely want to use for 4:28 a background color well, then you can go ahead and 4:32 pick colors that are going to match for that contrast ratio. 4:35 So let's try another example, let's go back up here and let's maybe pick-. 4:41 >> Yellow. 4:46 >> A really bright color. 4:46 So we'll go ahead and go with maybe this light yellow. 4:48 We'll say, okay, generate color palette. 4:52 And now it should come up with, there we go, some dark colors. 4:54 So those dark colors will match the lighter color that we picked. 4:59 So this isn't necessarily a tool for 5:04 picking color palettes that are going to be aesthetically pleasing, but 5:07 that doesn't mean that you can't make them aesthetically pleasing just by picking 5:11 good colors that will match your color palette. 5:16 What this tool really is for, is to make sure that you have enough contrast 5:19 in your text and your backgrounds, so that your text is actually readable. 5:23 >> Yeah and, you know, if, if you're worried about that, lighten up. 5:27 Get it? 5:32 It's a color pun. 5:33 Next up, we have a blog post on how to track JavaScript errors in AngularJS and 5:34 jQuery using Google Analytics. 5:40 So the benefit of this is if you have some sort of JavaScript error on your site, 5:43 when you load up Google Analytics, you can see the error and 5:48 the message right inside. 5:51 So, they tell you how to do it using the classic Google analytic js, 5:54 and it's actually really, really easy to do. 5:59 Just go ahead and, hey. 6:02 Whenever you have an error, push it on to the stack and, boom, you are good to go. 6:04 Also show how to do it in angular JS using an exception handler service. 6:09 Also very, very easy to use, just load up a module, then configure it, 6:15 do the same push of the error and tracking the event. 6:21 And another example with JQuery. 6:25 What does this look like when you get into Google Analytics? 6:28 Well you can enter some errors on here and then if you scroll down 6:32 you'll see this is what it can look like right on the Google Analytics site. 6:37 You get a JavaScript error. 6:41 Shows you the exact error that happened. 6:43 When it happened. 6:46 How many times. 6:46 And also works for Angular JS and jQuery. 6:48 So this is a really, really great tool to have in your arsenal. 6:52 Could also take the place of some specific error reporting services that 6:56 you might have to pay money for. 7:00 Anyway, check it out, we'll have a link in the show notes. 7:01 You can see them right below this video. 7:03 >> Very nice stuff. 7:05 Well, keeping with the theme of accessibility from the previous link, 7:06 here's yet another tool that does a very similar thing. 7:09 >> Oh, so you mean there's not a lot of contrast between the last tool? 7:14 >> No. They're pretty similar. 7:17 So, in keeping with the theme of accessibility, 7:19 this is another tool that will help you measure the WCAG. 7:22 >> guidelines. >> Guidelines, the-. 7:26 >> The guidelines, guidelines. 7:28 >> The Web Content Accessibility Guidelines guidelines. 7:30 And it will help you measure the contrast ratio of your background to text. 7:35 Except, instead of suggesting colors, 7:40 this tool will allow you to pick any colors you want. 7:43 So we can use these sliders down here to make adjustments. 7:47 And it will tell us, okay. 7:50 Well, right now, we're hitting a triple A level of contrast. 7:51 But if we maybe bring down the likeness oh, this is. 7:57 >> Down to double a. 8:01 >> Down to double a. 8:02 >> We're failing. 8:03 >> And this is okay if the text is large, but this is not okay. 8:04 And then right down here, oh, now we are hitting fail. 8:10 >> Oh, I see then, then the number on the top right changes and 8:14 shows you what your score is. 8:18 >> That's right. 8:19 It's pretty low right now cause it's tough to read. 8:19 So let's bring that down, and then maybe if we bring up the background-. 8:21 >> Ooh! >> We can go back to triple-a. 8:27 >> That's nice. >> So, this tells you, and quantifies for 8:30 you just how much contrast is in your text, which is really important for, 8:33 not only accessibility reasons, but also just for design in general. 8:38 It's good to have nice, crisp, legible text. 8:42 >> Definitely. 8:45 Next up we have a blog post from Ian Devlin on 8:46 dynamically adding text tracks to HTML5 video. 8:50 Now, why in the world would you want to do that? 8:55 Well, maybe you don't want to load the entire track up front. 8:57 Save mobile users some bandwidth, you can use a callback to load a text track later. 9:00 This could be useful for adding something like closed captioning. 9:08 So, how do you do that? 9:11 Well, you can add an event listener for loaded metadata and 9:12 then add a text track to it and boom you are good to go. 9:17 So there is a little bit more in depth instructions for what you need to do. 9:21 You can add some attributes to it and you get a little call back function here. 9:27 And then you can even set different modes on the video. 9:32 And by the end of it you have an entire working example 9:36 of creating another text track dynamically in HTML 5 video. 9:40 So that's it, just a really quick how to post if you're working with HTML 5 video. 9:46 >> Very nice stuff. 9:51 Well, I think that is all we have time for this week. 9:51 Congrats on making it through another episode. 9:54 I am @nickrp on twitter. 9:57 >> And I am @jseifer, for more information on anything we talked about, 9:58 check out the show notes right below this video. 10:01 We want to thank you so much for watching, and we'll see you next week. 10:03 [SOUND] 10:06

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

Sign up