Challenge 5: Solutions

[00:00:00]
>> Mike North: I hope you had fun refactoring the plain CSS for this range selector, trying to get it, not necessarily as small as possible, but trying to bring some of the benefits we get from sass into it so that it's as maintainable and as understandable and concise as we can get it.

[00:00:23]
So I'm starting out here with all of this text selected on the right side. This is the full CSS to style range components in all browsers. You may or may not have started with this already in your file, but we're just gonna paste it in here so that we've got the two imports at the top and then all of that CSS Coming down after it and then we can put this away.

[00:00:49]
Looks like I've got my old solution running there, we're just going to fire the new one up with run-e range, and it's telling us that on localhost:3000, we are good to go. And there it is. A nicely styled range component. Now if we look through this, we can immediately see that first of all, all of our rules, everything here is scoped to range.

[00:01:16]
So what we can do is replace this. I'm just gonna do a quick find and replace using an ampersand here as what I'm replacing it with and I'll just undo it in this one case. And bring all of these other rules into the scope of the range selector here.

[00:01:40]
It looks like it can't auto format that's fine. All right, let me just fix my. So we know what we're looking at and we can see that nothing has changed here, I'm just gonna make sure my works It in fact does deliberately broken and fixed again. So now I am going to start looking through here for repeated pieces of code and thanks for anime breaking my syntax highlighting that has caught my eye as a value that is repeated a few times.

[00:02:12]
Let me get rid of this terminal we do not need it any more. And looking a little bit closer if we collapse this here. We can see that largely these blocks are the same. In fact, it appears there exactly the same. So this tells me that probably want a Mixins or some SAAS.

[00:02:35]
We use of some sort here. Just looking through, this does not look like it's the same. See all these transparent things here. All right. So the first thing we can do is go to our mixin sections here. I've got one here called the range thumb, that might have been the little hint Hint here.

[00:02:56]
Let's have a range-track first, because that's this thing, range-track. So we'll create that.
>> Mike North: And this is just gonna take in,
>> Mike North: A block
>> Mike North: Something that looks like this.
>> Mike North: Here's the other one. I'm not really interested in the content here cuz I'm going to do this.

[00:03:32]
>> Mike North: I'm not interested in the declarations inside these blocks. Then what I can do is, wondering what my syntax highlighting is telling me something is wrong. It is usual for highlighting to get a little funky around the main, I'm sorry vendor specific pseudo selectors and tags because they are not part of the official CSS spec.

[00:03:58]
So if you've built something that plays by the rules, sorry to break your hearts. Browsers don't always play by the rules. WebKit, in this case, is not. And then now we can import range track and pass in this whole chunk of style here.
>> Mike North: Getting rid of the specific Mozilla and WebKit stuff.

[00:04:33]
We have to have parentheses here. Sorry it's include that's my bad. Include and where we should be back to normal let's what's on here. Let me save this make sure that everything is up to date. There it is. Okay, something's not quite right yet. Let me look at the output CSS and see what's wrong.

[00:05:04]
So, there's our track. That looks pretty similar to me.
>> Mike North: Let me just check for an error of some sort. Refresh. So we've lost our button some how. [SOUND] I'm just going to go back, save. Okay. Here.
>> Mike North: Break this stuff out.
>> Mike North: I think I know what the problem was.

[00:05:46]
I think I deleted a chunk I wasn't supposed to delete. So here is the other one to delete. Save, alright, and were exactly where we were. So effectively we've taken the concept of there being two bender specific prefixes for this track, and we've moved it out into a mix in that is using this content thing twice, and our output CSS is going to get the benefit of that.

[00:06:11]
We can set the width to 100, that I would typically leave alone here. Let's see, most range track, this looks very similar to what we had in here. I wonder. I thought I had deleted that, I'm sorry I'm looking at my, css, how to do that. So, the next thing here is that we have a color that's used over and over again.

[00:06:38]
This 307, 367 is here to be used in a couple of places and we can consider this to be like dark blue and a right blue. So, we can break those into variables And we're actually not using any of these.
>> Mike North: Dark blue is going to be,
>> Mike North: This 307.

[00:07:10]
>> Mike North: And then the light blue, sorry And the light blue is going to be this other shade that's a little bit brighter. Right. And now we would wanna go through and just replace this with light blue and then replace this one
>> Mike North: With darkblue.
>> Mike North: Save, and everything continues to look as it should.

[00:07:46]
So let me get rid of this in my terminal again.
>> Mike North: So this box shadow is popping up in a couple places. One pixel three times, and again here, that's the exact same box shadow. So we can refactor that into a variable and just call it rain shadow.

[00:08:17]
>> Mike North: And grab this whole value here.
>> Mike North: Like that, and then go here. Do a replace.
>> Mike North: Okay, just scan it for other stuff.
>> Mike North: The thumbs are probably very similar. So there is range_shadow, 36 pixel height, 16 pixel width, this is starting to look very Interesting like it is rather make sense so we can start to refractor this out as well.

[00:08:55]
The content,
>> Mike North: And then the other one we'll probably grab is web kit.
>> Mike North: Let's see. Solid, looks like Microsoft is playing nice with web standards here and mirroring what Mozilla is doing. I'm just eyeballing it here, keeping an eye on the right side to see if things start to diverge.

[00:09:23]
Always good to start with something that works. And that gives you a chance to sort of iterate and know if it breaks.
>> Mike North: So range-thumb, and we'll pass in those as arguments. So now we can get rid of this.
>> Mike North: This border is used twice. Twice would not necessarily meet my threshold for re-factoring out.

[00:10:00]
Here's a third time. We could do that, so range Small border and grab that.
>> Mike North: Room and now we can go to a place that record. It's just this repeating pattern over and over.
>> Mike North: Refactor > Save, make sure that everything keeps working the way it's supposed to work, and so on.

[00:10:36]
The slider thumb, I'm just gonna compare that to the mixin that we have here.
>> Mike North: Sorry, the mixin that we're using elsewhere. It doesn't quite look the same. Yeah, so we could keep following this, we don't have to and I don't want to take too much time to go on.

[00:11:05]
I saw someone that got it down to Here's another one. This is another thumb here. I'll bother to take this one out but this qn iterative process that we can go through for a while. So we've called this like thumb two or something and this is gonna be the web kit and Microsoft flavor.

[00:11:26]
Ms thumb And the other one was up here we'll get slider thumb. Does look very similar. Include range thumb two and use that and then we can get rid of This down here.
>> Mike North: This right here, dark blue, light blue, oop, we messed something up. We messed,
>> Mike North: Yeah, move that last one didn't work.

[00:12:12]
So did anybody like from seeing what I have done so far anyone have other tips that they did we can certainly start refactoring variables out. But is there anything are you able to like grab 3 or 4 or 5 instances something and bring it in to a variable

[00:12:34]
>> Mike North: So I'll provide a couple different examples of this online. Oops, sorry.
>> [INAUDIBLE].
>> Mike North: I zoomed in somehow. Thanks electron. But it is typically an iterative process that involves Kind of did this refactoring and breaking it out into mixins, trying to get away from vendor prefixes as much as you can, especially when it comes to pseudo elements and things like that.

[00:13:02]
I hope you got to see the sort of thresholds that I had for breaking things out into variables. Like I didn't, this is a color this is used, but I don't really see it used elsewhere. So that I might leave as a color literal in there. I mean if we were planning for large scale development maybe we would break that out, and if the anticipation was that this is a foundation we'll build on.

[00:13:27]
But just like Abstracting too early in code is add on necessary complexity, same goes with SAAS. I should.
>> Speaker 2: Like auto pre-fixer?
>> Mike North: So, yes there's thing called auto pre-fixer that will add specific prefixes to things like boarder radiance and stuff like that. For what we're doing specifically here, these are like, this is private component DOM that we're styling.

[00:13:55]
And so the auto prefixer wouldn't necessarily help us quite as much here. Yeah. All right so I'm gonna call this my solution. It's not dramatically better than what we started with, but it is. You can see that we got some of the mysterious stuff sort of factored out and we identified things that were shared and so on.

[00:14:20]
And for a complete solution to this, you would want to definitely have a Firefox that you potentially check. We're dealing across different browsers here, so, browser stack might be a good thing to use where you can see what this looks like in a old version of IE and some of these things you even involve SSH tunneling.

[00:14:38]
Where you can point to local host using the little browser stack UI and they'll be able to Access your local host and don't show what's on your screen. So, I will commit this and there was no like finish line to the solution, this is sort of a process that we go through and it's just fun if we can get.

[00:14:58]
So, if you can do better like may be open up a PR into this branch and I would be happy to recognize those things as further iterations to this solution.