Introduction to Dev Tools, v3 Workspaces Solution
Transcript from the "Workspaces Solution" Lesson
>> We had a couple of really good questions and comments. Important one was that, folks are finding, they 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 back ground 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:50] It's pre-populating with these three items, and it calls this render function which will set the, HTML 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.