VS Code Extension Recommendations

[00:00:00]
>> Mike North: So the last thing I wanna talk about are a couple, these are a couple extensions that I really like when working with this editor here. So our app is running right now. I wanna show you the first one, and it is called REST Client. So the benefit of REST Client, the thing that it does, it does one thing and it does it really well.

[00:00:26]
We can create a file that looks like this. So this is just a regular text file. It's got comments in it, and like request information that matches a very specific form. Now what the extension does is it ads these little send request buttons on top of things that it can recognize as a request, right?

[00:00:45]
This is a GET to this URL. We can click this. Let's try this. I don't think our app's running.
>> Mike North: Let's try it again. There it is. So we can click this and we basically get the output of whatever JSON this endpoint emitted. So if you've ever used something like post man this does basically the same thing.

[00:01:23]
The benefit being, you can check this file into your app. So this kind of describes exactly how this backend should work. You can even do stuff like this, where this is a PUT request. This is a header here. You can use HTTP/1.1 or HTTP/2. And here is the payload, so this would like set the contents of a shopping cart, I had that selected.

[00:01:47]
Sets the contents of a shopping cart to a particular thing. Apparently, that's something has gone wrong with that, let's try it one more time. Nope, it doesn't like that for some reason.
>> Mike North: But really, really nice in terms of being able to work with a backend like this.

[00:02:07]
So that's number one. That is REST Client. Number two.
>> Mike North: So when working with CSS, there are a couple things you have to pay attention to. And as we've focus on making more performance apps, we need to have an understanding about what's cheap and what's expensive in CSS the same way that we know what's cheap and what's expensive in code.

[00:02:34]
So there's a great website here and I will plug it
>> Mike North: It's called CSS Triggers. And effectively, what this describes is the cost of altering different CSS properties. If you see, we've got three markers here, Layout, Paint, and Composite. Composites are generally cheap. If you have to re-composite, it just means that you've got two or three pre-calculated layers, right, maybe with some opacity involved or something.

[00:03:04]
They're held in memory and you just have to maybe move them with respect to one another, and then figure out what is the resultant combination of that thing that those layers become when they're put together. So that's pretty cheap. Painting is a level more expensive, and that would require on a particular layer, let's say we've changed a color, we have to go and redraw a particular area of that layer.

[00:03:30]
That's a little bit more expensive than simply moving, basically doing the little linear algebra that's required for compositing. The most expensive thing by far is a relayout. And that would be like if we changed the dimensions of a div or something, or like an image size was not defined and it arrived on our HTML after the page loaded.

[00:03:55]
And it sort of sent all the text around flying in various directions. We basically have to calculate the size of everything on the page. And that is the most expensive thing by far. So it's good to know about these things, and it varies from browser to browser. What this extension does is it adds something in the gutter here that helps you understand for a given property what all is required in order to respond to that change.

[00:04:22]
For example, let's say we had a modal. And when that modal is open,
>> Mike North: So the modal starts off at, let's say left 0. And when the modal is open we wanna use like a transition of left, and if we're gonna take like 0.3 seconds. And we're gonna say left is 300.

[00:05:01]
>> Mike North: So what we've done here is like this is gonna require a whole bunch of work. A re-layout, a repaint, and a re-composite. If we instead did something like this,
>> Mike North: That will actually create the same visual result, but it's just a re-composite. From many browsers this work can actually be done on the GPU, so you get a really smooth animation coming out of the back.

[00:05:28]
There's way too much information to remember and to keep track of. I just love having these little gutter things here, so that basically whenever I'm doing anything with CSS that involves animation, I wanna see little green marks here. I certainly want, if I see a purple one, think about whether there's any better way that I can do things.

[00:05:54]
So the last one I wanna talk about is Code Runner. Code Runner is fantastic. So I've got these little scratchpad that I have been playing with all day like to copy .js. Code Runner adds this little play button up here, where I can just say run code and it will say, where's my output?

[00:06:23]
Let's try that one more time.
>> Mike North: I didn't save the file, but there it is. So you can select the piece of code and run that. I think the command here is like,
>> Mike North: Run code and it will just run.
>> Mike North: It just runs the saved file. But it works in a variety of languages and you can map, like you can map things to custom executables, particularly when you're learning a new language.

[00:07:04]
If you start just learning typescript, it's really nice to just have a scratch pad where you can just write a small program and hit the play button and see what it evaluates to, instead of having to worry about setting up tools and running commands. This basically has everything it needs to take a simple file, and to show you the output.

[00:07:22]
So this is probably my top three recommended Visual Studio extensions.