Refactoring the UI

[00:00:00]
>> The task that now stands in front of us is to make it make sense and put all of this in a reasonable fashion and order and organize ourselves. So I'm just zooming out a little bit so we can get a little bit more of a typical view of what it would look like on our own machines.

[00:00:19]
So one thing we might want to do is, I don't know put the canvas inside of the app. Maybe I'm just gonna move that up to right above this card thing. Just so it's between the header and the button the stuff. No big difference except that before it was rendering to the side because of the styles that are applied.

[00:00:43]
So now we've got a nice centered column of nothingness. And what we can do now is start to manipulate our canvas. But first again, are we feeling uncomfortable about having these two different scripts coming in? It's not necessarily a bad thing, but in a lot of projects and frameworks especially, you will find that there's usually one main entry point and that that is where then everything else that is happening on the page gets imported.

[00:01:17]
And it does sort of make it a little bit easier to follow those breadcrumbs, like when something's going wrong, there's just a few fewer places that things could be coming from. So what we can do is go back to our main.js and import this script from there. And again, this is all leveraging kind of a combination of node modules and how one module can import another module and another module.

[00:01:42]
And when it runs in the browser, the browser's modules and Veet's tooling that is helping us kind of shuffle new source code into the project constantly. Because our dev server is running because earlier, and we ran NPM run dev and we never hit Ctrl+C to end it. So that's where we're at.

[00:02:03]
Okay, so I'm gonna delete this, cool. And now, everything looks the same, but we are now missing our camera. So what if we go in here, where we're in main.js, where we're importing our style, and we also import, Camera. This get video function. How can I do that?

[00:02:29]
We talked about it earlier. Yeah.
>> You can export it.
>> So first of all, I wanna make sure this is an importable function, which means it has been exported and just like synchronous functions, I can export an a sync function too. Now, interestingly, we'll see, VS Code is telling me to grade out this video value because now it's not being used for anything.

[00:02:54]
And so maybe I don't actually want to be grabbing that video in here, maybe I just want this camera.js to be like a utility module with the functions that I need, but not actually do anything, run any imperative commands, like get me that video. Just tell me how getting a video works.

[00:03:15]
And if I want to work with that video, I probably want to spit it out from the function, maybe return something other than undefined, perhaps. So I can return that video element here if I want to. And again, this is just one way to take a selfie. [LAUGH], but what we're starting to get at is, now I'm sort of, I am both the developer and the user of my own code base.

[00:03:48]
So same as before, when we were deciding what the API should be for our models and deciding what public methods and things we want our objects to expose. Similarly, our modules, we want to decide what do we want to export from here and what do we maybe not want to export but just have be a secret value, that is, I don't know, very useful here.

[00:04:19]
If I'm not exporting it then when I go to main and I start importing stuff from a camera source, [LAUGH], source camera if I try to import like the secret, it VS Code is not even autocompleting it because it's not exported. But as soon as I type, Getvideo, VS Code starts autocompleting.

[00:04:51]
It's like, I know what that is. That is a function called getvideo that returns a promise to an HTML video element. And so this is now where we're starting to get into all of the magic and the VS Code IntelliSense so that we're in the autocomplete and the introspection of what's happening here and there is probably a whole course on using VS code effectively, [LAUGH], on Frontend Masters.

[00:05:16]
If there's not there will be soon I'm sure you. And so there's a whole much more, like fanciness that can happen here. But [INAUDIBLE] say we're starting to get the benefits.
>> We do have a course called VS Code can do that.
>> VS Code can do that is the course you wanna check out if you wanna see what else VS Code can do.

[00:05:34]
Okay, so in any case in this I believe will even work if I start importing get, if I start typing getvideo, VS Code is, I know where you get video. It lives in source/camera. So I can just tab and the whole line gets written for me. And I don't even have copilot or anything going on here.

[00:05:55]
This is just VS Code knowing the module system. Because of some JavaScript aware tooling that is set up in our installation. So definitely go check out that VS Code course if you wanna fancy up your dev environment.