Workspaces Solution

[00:00:00]
>> We had a couple of really good questions and comments. On important one was that, folks are finding, let me open the dev tools. So I'm on my Mac and the the workspace is actually on my Mac. And so, when I do things if I do body background blue, or something like that, it live reloads in real time.

[00:00:20]
But a couple of folks were doing things either via remote workspace or via windows subsystem Linux, and they're finding that the changes, they do persist. So if you go and you type stuff and you hit save, and then you look in your editor, it'll be there. But the live reloading won't happen over and WSL.

[00:00:36]
Let me go through the kind of solving these and then we'll do pause for any questions that anybody had going through it. So yeah, so I kind of got everything all set up and got my green dots here. And then so the first thing was centering the page title.

[00:00:51]
So I'll go and grab that and the elements over here. I can either do it there, or I can go into sources, the CSS, and I can do something like I'll add a new selector for h1s. And I'll do text align center. So I'll do that. Change the background color so I can kind of go into elements and grab the body.

[00:01:14]
Maybe add a new selector or something like that, background color 333. That looks real bad, eee looks better. And then the last thing was some JavaScript. So what I was hoping was you would type in a new item, and you'd hit Enter, and it should add it to the list.

[00:01:34]
So if we type in a new item, we hit Enter, nothing happens. We go to the console, and it's logging it, but nothing's happening. So we can go into the sources tab and we can look at the JavaScript and we can see, it's grabbing the form field, it's grabbing the list of items.

[00:01:50]
It's pre-populating with these three items, and it calls this render function which will set the, inner HTML of the list to empty. Then we'll go through each one of these items and it will create a new item and set the inner text to or create a new list item and set the inner text to the item.

[00:02:11]
And so what we really want to do is when on the form when you add an event listener and you type something in, we check the key to see if the key is entered, which I already have in here. And we are logging the form value but we really wanna do is we wanna just push that form value on to the list of items here.

[00:02:29]
And so we should be able to do something just like items, push and save that. And now when we come here and we hit Enter, I'm gonna close these, you can see you know, hello, something like that. It will add the item. So yeah, again not super important getting these things right but more important getting the workspace set up and actually playing around with the elements panel seeing what works, what doesn't.

[00:02:50]
Playing around with the sources and then seeing that it actually updates your if I do workspace index or main.js. We can see my new items push code has made it to my file system. So that is workspaces. Again, the kind of TLDR there is it won't work for a lot of situations.

[00:03:08]
But if you are in a situation where it'll work, it can be a really nice way of editing things really quickly and seeing the changes right there.