Challenge 11: Solution

[00:00:00]
>> Mike North: Let's go through the solution to this exercise. So I'm gonna begin by closing down all the work that we were working on before. Make sure that I have stopped my server, and I'm gonna run an exercise called, I think it's luminance. Let me double check.
>> Mike North: Luminance.

[00:00:25]
>> Mike North: All right, so now we are running and we've got a variety of different colors that we're gonna use and see if we can create something that will result in the colors popping out a little bit better. And actually, I'm going to need to refer to that little diagram we had.

[00:00:46]
So temporarily, I'm gonna get rid of Chrome, and instead I'm gonna bring this guy in,
>> Mike North: To my little div environment here
>> Mike North: So, really what I need is this here,
>> Mike North: This equation.
>> Mike North: And, let's look at what we start with, well first, let me get rid of the terminal down here.

[00:01:18]
>> Mike North: Great, so, what we start with in terms of the Luminance exercise is, we've got app.scss and there is our button and there are themes, right. And the themes' color have been changed a little bit to deliberately create situations where brightness would have failed for us. We've got mixins and we can see that there is our theme mixin, there is a luminance mixin for us to fill in, there's our button base.

[00:01:49]
>> Mike North: And then finally, we've got a function here that brings in our pow function, right. We've actually got a couple functions here that all are required, in order to make pow work. It is not easy to implement pow with just the arithmetic that Sass gives you by default.

[00:02:15]
I just to give credit where credit's due, pulled this from CSS tricks. There's a great power function on there, so thank you whoever created that.
>> Mike North: And with that, let's get going. So, I think there's some pieces here that I can start with. And I'll get rid of that.

[00:02:33]
So first, we've got a background color, we've got some attempts to log luminance out here.
>> Mike North: And then we've got to replace this with the real function up here. So it's already kind of wired to do what I wanted to do. I do want you to know this one thing.

[00:02:53]
First off, building functions, building your own custom functions in Sass, they run much, much slower than the functions that chip at the library itself. And as a consequence, you wanna be as efficient as possible with how you use them. So in this case, you'll note that like I am not recalculating the white luminance every time I go through and I create a button within the theme.

[00:03:19]
I'm not gonna go ahead and like re-evaluate white again and again and again, cuz we wanna compare against white, right? So I evaluated it once up here, I store it in a variable and I can just use that value over and over again,
>> Mike North: Very important. And you will see, like this actually runs noticeably slow relative to some of the style sheets that we've been working with today that just have pop out.

[00:03:45]
>> Mike North: So with that, let's get going. So we've got luminance and then we have to do this equation down here on a per channel basis to sort of linearize our colors. So we'll define a new function up here called linearRgb, and it's just gonna take a channel value, we'll call it C, cuz that's what we've got over here.

[00:04:11]
So that's gonna be the Csrgb.
>> Mike North: And I'm gonna just prepare to receive those values here. So we're gonna do linearRgb of the red value of color,
>> Mike North: And,
>> Mike North: Same for green and blue.
>> Mike North: All right, and so up here, and then I'm just gonna in line a.

[00:04:43]
A is a constant here. I'm not sure why this particular place I plucked this equation from like uses a as a variable, and then says a is always this number below it but we're gonna go with it. So if c is,
>> Mike North: Less than or equal 0.04045, we're going to do one thing, otherwise, will do these other things, so that the top path is going to be return c divided by 12.92.

[00:05:22]
On the bottom, we're gonna do return,
>> Mike North: Return c + 0.055. So that's the top of the fraction down here, over,
>> Mike North: I'll add one more paren just for fun.
>> Mike North: 1.055.
>> Mike North: And then that is all raise,
>> Mike North: To 2.4. Let me make sure that compiles.
>> Mike North: Let see, function linearRgb did not return a value.

[00:06:02]
I'm gonna bet that that is an old error, let me stop and restart it.
>> Mike North: Just running a little check point here to make sure that things are working, yep, looks okay to me. So, now that we've got past this point here, we're gonna go to the next step, which is just to return that special combination of color channels here.

[00:06:28]
So we're gonna return,
>> Mike North: 0.2126 times r + 0.7152 times g,
>> Mike North: + 0.0722 times b.
>> Mike North: And let's see where we're at.
>> Mike North: So I want to look at my output CSS cuz I've got those comments they're waiting for me. Letting me know what my luminance values are, interesting.

[00:07:06]
>> Mike North: So these look high, I think I might have a decimal point in the wrong place.
>> Mike North: I expect values between 0 and 1.
>> Mike North: So, that looks right.
>> Mike North: I think I know what I have to do here. So, these I'll have to update the instructions here, but these have to be over 255.

[00:07:35]
So color values are between 0 and 1 for this. For some reason, I'm lucky enough to remember that, there we go. So now we've got 1 for white, which makes sense that is maximally luminant. 0.8 is something that we're trying to stand out from. And if we look here, now you can see the blues end up flipping to get white text as they were not before.

[00:08:00]
So I'm gonna get my little keynote deck out and bring the browser back in, so we can see the difference between that. And the previous approach we were taking where we just used brightness.
>> Mike North: So, in the case where we use brightness, that's the CSS.
>> Mike North: Here we go.

[00:08:23]
So if I comment this out, and bring this back, and refresh, you see that this one here, on the lower left, this is sort of in that position where it's becoming really difficult to read, and the text went black. Whereas here,
>> Mike North: When we refresh, there we go, it ends up turning white.

[00:08:50]
So now we're using something that makes a little bit more sense when it comes to that threshold. And we can even see what happens if we lower it a little bit, although it is taking a little while to refresh. Again, this is a very expensive recomputation to make.

[00:09:04]
Now you can see that like all of the blues have ended up getting white text. And the yellows and the greens, everything is looking nice and visible now because we are not simply basing it on lightness. We're actually basing it on how visible that color combination is going to be.

[00:09:21]
So that's our solution to defining your own function. A pretty good example of like a useful function to have, although quite slow. There are ways to put functions into the C++ portion of the Sass compiler, but that is a whole other course in and of itself. So we will stop here, if there are any questions, I'm happy to answer them.

[00:09:45]
But this is as far down the rabbit hole as I am able to take you today.