Best Practices Solution

[00:00:00]
>> So what we're gonna do now is we're gonna go ahead and walk through the solution for rewriting our dynamic heading. And then we're gonna go ahead and refactor our app styles to practice using CSS modules. So over here in v-eese code, we're gonna take a look and we'll see that one of the things we have here inside of our dynamic heading component.

[00:00:21]
Is that we have a prompt basically taking in what level it should be. Some of you may have run into some issues as far as the prop type because I had defined it as a number. And so in this regard, to be honest, it can be a number or a string.

[00:00:34]
So in this case, we just go ahead and make it a string just to prevent, in case you're seeing any conflict errors or those sort of things. And so what we wanna do now is convert our markup from templates to the render function. So what we have here is we see our template, it's rendering right on the left.

[00:00:52]
And so if we go inside of app dot view and switch it out to two, we'll see that it goes ahead and updates the heading level correctly. So let me toggle actually get lens, there you go. And so what we wanna do then, is take this and create our render function.

[00:01:09]
And so the way we do that, because we're in d3, is that we start by importing our hyper script function from view. And so the UCLI is telling me that it's never been used as a way of helping me out, but we're gonna go ahead now and define our render function.

[00:01:26]
And then we're gonna return, basically the mark up that we want to create. The snip is getting away, so yeah so what we gonna do is we return the mark up we were gonna create with our hyperscript function. So to keep it simple, right? We can start with an h1, and then I'm gonna ahead and say like, Hello, it works.

[00:01:46]
And so when I save, we'll see that now everything's rendering correctly. But what we need to do instead is, we need to make this dynamic. And so since we're inside of a script block though, this means that we can access our props as we would on any other computed property or methods.

[00:02:04]
And so what I'm gonna do is, I'm going to turn this into the ES6 template literal, and swap that out for the this dot level. And so this way this is defined directly on by the props, and then we can basically see this dynamically swap in and out.

[00:02:22]
So you can already see now that it's already swapped over to an h2. And if we jump over to here and switch it down to an h3, we'll see the drops even further back one, and then we're back up. And so in these cases, right? Where we're programmatically generating like the HTML markup, for whatever reason, these are times where as you can see render function, this is much cleaner to maintain because going forward, if the requirement is, hey, we need to change this to, Hello friend and masters.

[00:02:50]
Piece of cake, it's one line of code and which means is less brittle overall for fixing things. So that's the solution for render functions when you're using it with view three. And if you wanna dive into the specs, I recommend going to the view three docs. And you can look up basically the render function here.

[00:03:12]
And we have a whole guide in here explaining how to use it and basically different ways that you can customize the various aspects that you care about. So be sure to check out the docs if you have more questions on this piece. Now the other piece that we have to go over is regarding the styling.

[00:03:29]
So let me bump this over to the one third again. All right, and so here, inside of our app dot view, we have this baked in styles. And so, for the sake of practicing with CSS modules, we're gonna switch this over to a CSS class first. So you see that when we switch it over, you'll notice that, all the styling breaks, which makes sense, because this is being basically bound into an ID app right now.

[00:03:55]
So I'm gonna go ahead and wrap our component here with the class app here instead, and we can already see that things are going back to the way they are. As I mentioned before, when we go into our, we inspect the element. What we'll see here is that, this is still using the generic of app class, and what we wanna do is practice using CSS modules.

[00:04:23]
And so what we're gonna do now, is we gonna go ahead and then add the module attribute to a style block, and inside of here, instead of just declaring the classes app, we V bind our class attribute and assign it to dollar symbol style. And then when we save, you'll notice now everything still looks good.

[00:04:45]
Everything's the same, but it swaps out right here. And now we see the component which is App, and then underscore the component name, which happens to be App or sorry, the class name, which is App as well, just in this particular case, and then our unique hash right there.

[00:04:59]
And so, there are a lot of approaches to this like in the CSS, in reactor style components. One of the reasons I think this particular approach works really well is because in debugging, what CSS modules allows you to do is easily figure out where to go and where to look.

[00:05:14]
And we all know that when it comes to building things, one of the things we wanna spend the least amount of time on is debugging. So, in my opinion, anything that can help us find the error and basically make changes quicker so that we can move on to build new features, is a big plus in my book, so can't recommend CSS modules highly enough.

[00:05:32]
>> Yeah, you mentioned it helps you debug, and I was wondering if the reason it's helpful for debugging is because of the unique sha that's a appended to the class name.
>> So the question is regarding why this approach is helpful for debug abilities, dive into that little bit more, importantly is it around the unique hash?

[00:05:52]
And so in this case, the reason it's useful is actually because what view does is it maintains the CSS class that you're looking for. So typically when you're debugging CSS you would probably search your code base for the class name, but the hash unfortunately is not going to show up in here.

[00:06:09]
So in that regard the hash is only useful from the sense of protecting us from scope creep on our styles. But by giving us basically the component name before it along with the class name, it helps us to basically prevent from searching all over our codebase because everyone called their class dot button, for example.

[00:06:26]
And now instead of being like, okay, now I have to look for every instance of that button. But this top button, I needed to have that specific padding of 15 pixels cause this is where the bug is showing up. Now it's gonna be like, hey, your button class is showing up in this component, and then that's the reason why it's helpful for debugging