Workspaces Exercise

[00:00:00]
>> We're gonna move right into another exercise. This one's on workspaces. Again, we'll take like 15 minutes to work on it or, but I'll be here for any questions that people have. So, the idea here, there's full instructions. So you'll want and let me go through the instructions live and then you all can try it.

[00:00:20]
So the idea here is I'm gonna go to my node app, which is running this local thing. I'm going to kill it for now. And then what we have let me open my finder to my Dev Tools repo. So we have this workspace folder here, and this just very simply has an HTML, JavaScript and CSS file.

[00:00:39]
And so we want to do two things. One, I wanna open the index.html file with Google Chrome. So I right clicked on it and clicked open. And that you can see it's opening like a file, not a HTTP. So it's opening this file and it should look like this, this little to do list.

[00:00:55]
And then the second thing we'll wanna do is we'll want to open up the Dev tools, inspect here, go to sources. And again, these are all written down step by step here. So we want to go to source and then I'll go back to my finder my file system.

[00:01:09]
I'll grab this whole workspace folder here. And I'm just gonna drag it on to the sources, and it should change into this thing. And so the two things we're doing are one, we're opening the index file in Chrome, and then we're dragging our source code for it onto the sources tab.

[00:01:25]
And that should prompt this little warning up at the top saying hey, Dev Tools wants to access your local file system. Is that what you really want? And we'll say yes allow. And when those steps are done, you should see that the workspace is synced by over here in the left, you should see these little green icons next to each one.

[00:01:43]
So again, so kill the current node app. Go to your sources panel, go to your Windows Explorer or your finder if you're on Mac and get the project and open its index.html and then go back a level and grab the whole workspace folder and drag it into the sources panel here should prompt you with this.

[00:02:02]
Do you want to allow you say yes and then you should see these things all green. And if you have any questions, let me know when it is set up. I have a couple of little things these little To Do List tasks that you can do and what you should be able to see.

[00:02:16]
For example, if I go into my style.CSS, and at the same time I go into my real IDE, and I open my workspace style.CSS. So these are the same file wrapper you can see, I should be able to make a change here, like height 100 pixels and then hit Command S to save or Ctrl S and then go back here and actually see the real file has changed on my file system.

[00:02:40]
That's what we're going for there. So again, the setup is kind of the part that I really want you to get the experience with. So, yeah, opening that new file, then taking the folder and dragging it into the Sources tab, and if you want to play around with the exercises, awesome, but the setup and getting it to actually persist is the big thing.

[00:03:00]
>> Can we save the changes in Sources panel HTML, CSS, JavaScript? Sometimes it doesn't work.
>> Yeah, so if it's syncing, like if it's green, and it says that it's linked, then it should absolutely work. But yes, sometimes they can get into, I've seen them get into a weird state before. It used to be a lot more problematic.

[00:03:23]
So, if you run into any problems, what I would do is I would on the left here, go to the File System tab. Then I would right click on the folder and remove it from the workspace entirely. Say Yes, I'd like to get rid of it and then I would just start over again just take the thing and drag it back in here, click Allow over here and it should go all all green like that.

[00:03:44]
So you can see here I got into a weird state because I had an existing edit saved when I deleted it and grabbed it all over again. And so again, like I would just go in here, remove it. Okay close this out so it's not still with active changes, drag it back in here.

[00:04:04]
Allow, and now they're all green again so if they're green they're persisting.