Challenge 8: Solution

[00:00:00]
>> Mike North: So let's go through the solution for these little nudging classes that I asked you to create. So just to review, we're looking for a bunch of these little classes, each of which has a declaration block containing only one rule. And the point of this is that we can, in our HTML once we have these classes, add them to various elements that we kind of need to just like bump off of the left side of the page or off of the top edge.

[00:00:27]
To create a little bit of extra space without having to go in and add that CSS to the components themselves, right. So let's begin,
>> Mike North: Okay, so looks like my old exercise is not running anymore. I'm gonna start up the new one with run -e tiny, and here we go.

[00:00:59]
So these classes here on the right they're around for two purposes, one is my tests are running against them. And the other is that you could inspect element on them to kinda see what's going on. But the visual feedback you're gonna get is not gonna be quite as useful as when we are working on buttons and we get to see colors changing.

[00:01:21]
So for that reason I'm just gonna kinda shove that off to the side. And let's open the exercise. tiny, all right, and so we just have one SaaS file to work with now cuz we're just focused on this one thing. So, the first thing I wanna do is to, let's get a basic solution and let's see if we can iterate on that from there.

[00:01:50]
And that's another loop joke. [LAUGH] So I'm gonna do for $i from 1 through 5, the reason is I'm gonna step five steps, right, five steps. They are steps of 5 pixels but I've got 5, 10, 15,20, 25 that I want. And so these each represent a step.

[00:02:13]
And then within this loop I can define a local variable, and I'm just gonna call it size, sz for size, and we're gonna do i * 5. And then we can create a rule here,
>> Mike North: Called m-t-, and then this way we can interpolate which just means mixing literal texts, right.

[00:02:45]
This part of the selector is literal text that'll end up in our style sheet, in here we want values. If we were to just do this, or a size, something like this, like what you'll end up with is literally a class named this, in your CSS. That's not what we want, we want the value of that thing.

[00:03:05]
This is how we get the value. And then inside here, we're gonna do margin top, and we have to interpolate again, only because we need to add a unit, to the end of this value. So if we just did this,
>> Mike North: And then what will we do like px, like that's a different variable name.

[00:03:26]
Or here,
>> Mike North: That's not gonna work, it's not gonna like that. So, again, this thing, and we'll refresh. Or see what the output looks like here.
>> Mike North: All right, so we've got the beginnings of what we want. We've got five classes here in steps of five pixels each of which bump the margin top out again and again.

[00:03:54]
And we could totally copy and paste this and do like margin bottom and then something like this. But let's see if we can do something that is slightly more interesting, that kind of condenses a little bit more. In terms of the approach that I would advise for using in your apps, this is probably the actual approach that you would wanna do.

[00:04:17]
Because it's easy to read, it's understandable. You're reusing, you're being efficient and reusing the multiple of five across many different things, right. But I want to take this opportunity to show you how you could do like an over abstracted version of this, and make use of data structures.

[00:04:38]
So again, I do not advocate that this is a sustainable solution. It is a solution that makes use of some SaaS features. So I want to basically,
>> Mike North: Wrap this in another loop.
>> Mike North: So let's start with another loop like this. Each, we're gonna call this a dimension in, and then we'll have a list.

[00:05:13]
>> Mike North: Actually, we need this list to live outside. Dimensions we're gonna have,
>> Mike North: m for margin and p for padding. So what we've created here is a map. How do we know this is a map?
>> Students: Key value pairs.
>> Mike North: Cuz I have key value pairs, right?
>> Mark: Does padding need a quote or not?

[00:05:41]
>> Mike North: Padding does need a quote, thank you Mr. Mark.
>> Mike North: So here we can use each. Remember each is what we use to iterate over a data structure for just kind of iterate through a range of values. each and we're gonna call it a dim in dimensions, and wrap our existing for loop here.

[00:06:07]
>> Mike North: And so here, I'm gonna use more interpolation,
>> Mike North: And let's see what we end up with. Hold on, see this is the difference between a literal value unlike a evaluating a variable. Okay, so this is interesting here.
>> Mike North: I am getting, this is now what I thought I would get, to be honest.

[00:06:32]
So I've got an m which is coming from,
>> Mike North: This dim, it's actually the space separated thing here. I think this is what I'm getting the whole thing. Interesting, maybe I'm-
>> Speaker 4: Are you doing the nth on the-
>> Mike North: Yeah let's try nth, let's do that.
>> Mike North: There we go, thank you, you saved me.

[00:07:05]
All right, margin top 10 and you can see down here we got padding top 10. It's the wrong value down here but we can fix that. So we can use the same trick here nth, and use the second thing. And now padding top 10, padding top 25, there's the value for padding.

[00:07:30]
Now this is only dealing with top, right? So we could add another level of iteration here like this.
>> Mike North: Directions and we could have t for top, b for bottom, l for left, r for right.
>> Mike North: And just one more, again, this is like, stupid complicated here. But, I hope it hammers the point home that it is possible to do this kind of stuff.

[00:08:07]
For, we'll call this dir for directions. In directions,
>> Mike North: And now, why is this complaining, dir I didn't do dir-
>> Speaker 5: Did you do each?
>> Mike North: Each, thank you, each, and now we can go down here and [LAUGH] we can use, we're really in the weeds now, nth of directions.

[00:08:39]
>> Mike North: And we want the first thing in there. Sorry, I'm doing, mixing my JavaScript and my SaaS here. All right, so if we look, now we've got bottom, and left, and there's right, and we just need the equivalent here.
>> Mike North: All right, now our code has like lost all semblance of meaning in Sass land.

[00:09:04]
But it turns out to generate like these tiny little classes that we need, it generates all of them, and in a very small amount of code here. So, I said less than 15 lines, let's see, well, there we go, we're at 15 lines as I kind of collapse up this big map I've built.

[00:09:31]
>> Mike North: And there we go. That is my over-engineered triple each version of tiny little Sass classes. So where might you actually use this? You would use one for loop to define a grid. Or you could say like I want a grid and I'm gonna give it, like I want 12 columns for this grid.

[00:09:54]
And for this column inside to be like 3 of those 12 columns wide. And you could define it in a way where you don't have to go and calculate a bunch of percentages on your own, it can actually end up being time saving. However, like keep in mind, like use common sense, this is not readable.

[00:10:15]
If you came across this, you would wonder what monstrosity, what Sass monstrosity has someone created here. Again, the approach I would love to see, like if I were reviewing code, would be a single for loop, taking an advantage of the fact that we want five pixel steps. And then just explicitly write out each of those properties, cuz then you can look at it, and you're like yes, we're going up by five pixels at a time.

[00:10:42]
You could leave a little comment in, saying like we're stepping up by five and then your A class is there and you're done, right. That is sustainable code to write.
>> Speaker 6: Personally, I would just still even question why you would need all those margins and paddings.
>> Mike North: Yes, so it is a sign that you may be doing things wrong if you need lots of classes like these.

[00:11:04]
However, there is a school of thought that I don't particularly agree with, around using what's called Atomic CSS. Where basically all of these, there's like a special set of classes that's generated for you in advance. And then you compose those classes together on your HTML to add a bunch of style.

[00:11:25]
However, reading through that stuff you need to be able to speak the language of Atomic CSS or you don't know what the heck is going on. Just to show you what that looks like, it's like, I am not fluent in it, I can't read it. But here is an example like what a class might look like.

[00:11:46]
>> Mike North: Right, clear as mud.
>> Students: [LAUGH] Yeah.
>> Mike North: But, so, people who are proponents of this, they would argue that, like yes, your styles are small. And now you can kind of, you don't have to really worry about adding more to your style sheet. And you can compose things together by adding multiple classes to your HTML.

[00:12:08]
Again, I don't get it, but you will see it out there. And personally, I do use a couple of them, like I like to use text align, I have like a text align left and text align right. Because oftentimes I don't wanna entangle that concept with like a particular component.

[00:12:26]
Sometimes you might want things pulled over in one direction or the other and it's nice to have a little class that's just a little utility thing. Bootstrap has a couple of these that involve hiding or showing things on different form factors. Where you would say like this is for phone only, and that would mean that in media queries for other devices you're like either visibility is none or display is none.

[00:12:54]
>> Speaker 7: And Mike, I got a question.
>> Mike North: Yes.
>> Speaker 7: So, I'm not getting something about how nth works, so if you could just kinda go through it. And so the example I'm looking at is, so I see for example on dimensions, and when we're creating, we're pulling the letter m out, and we're pulling the word margin out?

[00:13:14]
>> Mike North: Yep.
>> Speaker 7: Can you explain to me how each of those is happening, the letter m and the word margin? I'm not getting it.
>> Mike North: Good question, so if I was iterating over a list, which would just look like list
>> Mike North: Something like this, with no key value pairs.

[00:13:33]
In that case, the current thing, right, that each gives us. This local variable representing the current item in the collection we're iterating over. That would be just that one item, it would be a, and then it would be b, and then c. In the case of iterating over a map, what we get is a key value pair.

[00:13:56]
The first element of which, is t, the second is top. And that's why we're using the first element here, actually across the board, we're using the first element. Because those are the single letters, both in the case of dimensions and directions. Those are what we use to build the string for our selector, right.

[00:14:15]
So first, it's the dimension, and then it's the direction. And so, this is gonna be m-t- and then size, which is calculated by our step times five. And then down here, the second item is going to be the full word. Top, and margin, bottom, and padding, if that makes sense.

[00:14:39]
So almost think of it as that in here, like direction equals, it's gonna be like this.
>> Mike North: Some people might call this a tuple, right.
>> Speaker 7: So nth can be used in that way and it can also be used to pull say the third element of a list of three.

[00:15:07]
>> Mike North: This is a list that we have like, locally.
>> Speaker 7: I understand it's a list now but, so in this case we're using nth to pull out a key or a value.
>> Mike North: Yes.
>> Speaker 7: Is a list in this case right now.
>> Mike North: Yes.
>> Speaker 7: But nth is a general thing that can be used to pull out any value of a list, like if you had a list of ten, it can pull out the ten.

[00:15:26]
>> Mike North: Yep, by index, the map equivalent would be this. Oops,
>> Mike North: Right, where instead of the index of the thing you want, you specify the key. Sorry, did you have a question?
>> Speaker 8: No, that's what I was just gonna clarify that in this example, the key is one and the pair, the value is two.

[00:15:52]
So it's-
>> Mike North: Position one and position two.
>> Speaker 8: Right, position one and position two for each item in there.
>> Mike North: Precisely.
>> Speaker 8: Okay.
>> Mike North: You got it.
>> Speaker 9: Cuz when you're doing the each loop over the map, like the dim or the dir, that's really returning a list, that's where we can do nth, or should we have done map.get or map get.

[00:16:10]
>> Mike North: So we could do map get, but we still need to get the key there. And so we could have done, down here, something like this, map.get, this would be dimensions. And then here, we'd have to pass in like the thing we used basically up here. So this is gonna work, which is like horrific now.

[00:16:36]
We've gone from like terrible.
>> Students: [LAUGH] Terrible to worse.
>> Mike North: Terrible to what in God's name is Mike doing? And like we'll actually got the same result here. Hard refresh, yep and there it is. So there it is, I wanna back my way out of that cuz I don't even wanna check that thing in.

[00:17:00]
But this one is inappropriate, complicated use of iteration. So just to recap here, we're iterating over dimensions.
>> Mike North: And then in here like dim is like m and margin. So it's the equivalent of a list there. And then here, we're like iterating over directions. And then here, dir is d, down.

[00:17:37]
And that's why we end up using nth. Does this make sense to everyone? We went too complicated deliberately just to show you how powerful this can be, but like use it like salt, just a little bit, a little bit goes a long way.