Starting to Code with Webpack

[00:00:00]
>> Sean Larkin: So essentially I just jumped into button styles to look at and say well, really there's nothing like, this is just kind of a utility for being able to generate something we can pass to a style property, right? Now this may be something you do in CSS, or maybe you like CSS in JS, and so that's kind of familiar.

[00:00:18]
But the point here is that this function just returns a string that we could use and set. So we could take and say button.style,
>> Sean Larkin: = makeColorStyle, and let's say, I don't know, I'll say cyan, I like cyan.
>> Sean Larkin: Hi, how about it? [LAUGH]
>> Sean Larkin: So that's really neat, we're instantly able to take this functionality and compose it.

[00:01:03]
And reuse it in many different ways, so this is really neat. Let's do some other relevant things, so let's jump into footer.
>> Sean Larkin: So we wanna make a footer element, and it's gonna have a top and a bottom. So instead of this, why don't we instead,
>> Sean Larkin: Say document.createElement, and we'll call it,

[00:01:43]
>> Sean Larkin: [SOUND] We could just say like div, cuz it'll be composed of two pieces.
>> Sean Larkin: And in the same way we could do the same for bottom.
>> Sean Larkin: And lets see, we would wanna say, not bottom, but div also. So we're creating two divs, and then const footer = document.createElement.

[00:02:15]
I'm pretty sure footer is a valid one, it is, footer. And I think you can say, footer.appendChild(top), I don't think it takes, yeah. And then we'd wanna append the.
>> Sean Larkin: Cool, and we could apply other attributes. Technically, what I think is really cool is that we could pull in these pieces.

[00:02:47]
So I'm just gonna say top.innerHTML, or no, I'm sorry, innerText. And I'll set it to Top of Footer, and bottom.innerHtml.
>> Sean Larkin: And then what's great is hey, we have this function, I wish I could color the bottom and the top differently, right? But we now have a module that we can reuse to do this.

[00:03:21]
So we could say import, let's see from, I think it's button-style. So we could even just say red and blue, cuz those are still available exports.
>> Sean Larkin: And say top.style=red.
>> Sean Larkin: bottom.style = blue. So of course, now maybe we don't even, we could export all three of these, right?

[00:03:56]
Maybe we don't need the top and the bottom, let's say you wanted an element that does this, or we could just export the footer to you.
>> Sean Larkin: Let's jump back to index, and instead of, we could just pull footer in.
>> Sean Larkin: And just say, document.body,appendChild(footer). And be pretty basic in terms of the, let's see my color style, where's my blue half?

[00:04:31]
I feel like I could append to.
>> Speaker 2: innerHtml instead of innerText?
>> Sean Larkin: Yeah, that would probably be better, but I'd need a toString. What's the, you're right, absolutely, thank you. Yeah, at any time, if you see me doing something wrong on accident, just call me out on it.

[00:04:52]
Cuz I'm just usually not thinking about it while I'm talking. So yeah, like hey, we now have two components. Now of course, you don't want your web apps to look like this. But it's just trying to show you, you're instantly able to validate, or I was able to be like wait, why is this not working right away?

[00:05:11]
This I expect is like a standard for my development environment. And so we haven't really done much with webpack here though. If we just look at the config, like we've added a couple plugins and using webpack dev server.