Workspaces

[00:00:00]
>> So now we're kinda moving into the sources tab. And the thing that I always like I have these two screenshots here, like when you really think about the sources tab, it's sort of like your custom, your IDE built into the dev tools. So, here's like the exact same file open in my dev tools and then open in my IDE, which I use VS code.

[00:00:18]
So you have like the center panel, which has the code in it line numbers and everything. You got the left sidebar, which is like a tree that you can kinda walk just like this one here. And the difference is you got all these great debugging things on the right, which we'll play with in the debugging section.

[00:00:33]
But you can even hide those and then just deal with this so you can really just use it as your IDE. Which is what we're gonna do in the next exercise. It's got a lot of your favorite things in it like so for example, if I open up dev tools here, and I go to sources, and let me get rid of this little console drawer, if anybody's wondering about this, you can go to the dot dot dot here.

[00:00:55]
And you can do show console drawer or you can use the Escape key. And that'll give you a console overlaid on any non console panel. So you can be on the elements with the console or the network with a console or sources with a console and then you can just X or escape to hide it.

[00:01:11]
That's really useful sometimes if you just wanna log something out and see it. So if I go here, you get a lot of the things that work in your current IDE. So for example, if I do a command P which in VS code will open a fuzzy search on the files, I get the exact same fuzzy search here.

[00:01:27]
I can bring up any file like that. A lot of the same shortcuts for commenting and all that stuff will work. So I'd really encourage you to when you're in sources just to try whatever feels natural and see if it just happens to work here. Cool. So yeah, it's like your full IDE and we're gonna play with that a lot as we play with workspaces.

[00:01:48]
So workspaces are super, super cool. They're what let you persist your changes to disk, but it wouldn't be super cool thing without some super serious limitations on it. So before we get too far excited with workspaces, let's talk about what it can and what it can't do. And so the limitation if you think about apps, and you think about kinda what we're doing here, if there is a one to one correspondence between what you kinda send down over the server and what you author on the server and what you author and what you view in the website.

[00:02:24]
And what I mean by that is like If you make an index.html, then when I hit your website, the same index.html that you hand wrote is gonna come to me, right like it's the same file just automatically transferred. If you write a node app, and you use a templating language like moustache and you hand write a moustache file, the templating language, we'll turn that into an index.html and send it to me, right?

[00:02:48]
That's kinda how that's working. So in the first example, you write HTML, it sends HTML. There's a one to one example that'll work great with a workspace no problem. And the second example, we're using a templating language. That won't work with a workspace because if I update my index.html on my laptop inside the workspace, your server doesn't really have a way of knowing which template file to update.

[00:03:12]
It's it's that would be too complex. So in those situations, you can still persist your CSS and your JavaScript changes to disk. But you cannot persist your HTML changes to this because you're not actually writing HTML. And this is also sadly true. With tools like React where again, you're not writing the HTML, you're writing JSX and React is turning it into HTML.

[00:03:37]
So, in the dev tools, you'll see index.html. But there as you know, there really isn't an index.html on the server. It's like an index.js or like 20 js files. So there is a limitation there. Sometimes it's confusing, but it's basically, like if the thing that's on my dev tool laptop is the exact same thing that is in my code, then it's easy to persist.

[00:03:58]
If it's not, then it's not gonna persist. So oftentimes, the sad reality is with like the current tech stacks are very build chain heavy. Like I'm sure a lot of you at work or like, you use React and you use Babble and use a templating engine and all these different things or use a CSS preprocessor.

[00:04:17]
That will mean that the workspace idea won't work for you. But if you are working with vanilla CSS, or vanilla JavaScript, or vanilla HTML, then workspaces will be awesome. So does that make sense? I'm gonna pause if anybody has questions, and I know that's like a very, kinda a confusing concept.

[00:04:34]
So let me just pause for a sec if anybody has any questions on that.
>> Yes, I have. Can we just save the changes and for example from the website google.com and save the changes and reload the page so we can just load the external JavaScript but with our changes?

[00:04:57]
>> Yeah, you can. That's a great question. So it's like, can we, instead of like saving to disk, let's say and updating actual source code, can we set it up so that we can persist changes through a refresh basically. And we will cover that in another section. The short answer is yes, there are still some limitations.

[00:05:14]
Some things we can't save. But for the most part, yeah, you can set it up so that like you can change the JavaScript and it'll survive a refresh, but it won't actually write to your local, the code bases file system. But yeah, we will be able to do that.

[00:05:28]
And that's not using workspaces that's just built in with the dev tools networking tool, but we can do it there, which is cool.