 Today on VS Toolbox, we're going to do something we've never done in the history of coding before. What's that? We're going to take Robert Green and we're going to shrink him down and inject him into the source code. Just like that. Take a look. Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green and joining me today is Mark Miller. Hey, Mark. Hi, Robert. Welcome back on the show. Oh, thank you. My gosh, it's been a while. It has been, but I'm so excited to be here. We're excited to have you. Oh, thank you. Explain to the audience who you are and then we'll dive in. Okay. My name is Mark Miller. I work for DevExpress. I work on the ID tool team at DevExpress and I've been developing ID tools for about 30 years. We'll develop a tool specifically and ID tools for about 23 years. All right. One of which is Code Rush. Code Rush is one of those tools. Okay. Yeah. And I asked you to come on the show and show us some cool stuff because it's been quite some time. You claimed that you were going to show me something that was going to not only knock my socks off, but that is impossible to do. Well, it appears impossible to do. It appears impossible. I should say that I always blow the demo. I blow the demo by setting expectations so incredibly high at the beginning that there's no way that we can achieve those. But I'm super excited about what we're going to show today. It is when you look at it, when you see it working, it is arguably impossible. It's impossible to build and yet it's not. And this is a feature of Code Rush. Inside Visual Studio. Inside Visual Studio and it is available. It's available now as you watch this. Sweet. So it's available now. I can't wait. All right. So on my machine right here, I'm just going to go out here. I've got a couple of links here. I'm in some HTML right here and I've got a link here that says, I'm so excited to be meeting with Robert Green today of Channel 9. Now, one of the things that we're doing here, if you'll notice Robert Green is a little bolder and so is Channel 9. We have the ability to kind of mark those comments to kind of enhance them. And what I want to show you today is a lot. It's about enhancing the documentation of the code that we write. Okay. Right? And so I've got that. Let me go over here. I'm going to click on this link right here. Okay. So Robert, I'm going to come up here. I'm going to right click on your image and I'm going to choose Copy Image. And I want to do something kind of really, really groundbreaking in history making today. You're going to make me handsome. I'm going to make you handsome. And not only am I going to make you handsome, but you are going to be the first human being ever to be injected into source code. That's what we're going to do. Sweet. So I just copied your image, right? And now inside the comment, I'm just going to come down here and I'm just going to hit the Paste key like that. And now there you are in the code. And I'm going to right click you and I'm going to choose Crop Image. And I'm going to just grab right up here, drag it down to about right there. I'm going to click that image again and I might resize it. Let's hold down the Shift key so we keep our original aspect ratio. And now I've got you right there in the code. And now that I've got you there in the code, I can come up and let's just copy that URL to Twitter. Let's right click you. Let's choose Link. And let's open a URL. Let's specify that and click OK. And now when I come and click on you like that, we jump right up and we go open right up to the Twitter page. So you could put a screenshot of a mock-up of a UI or something. Put it in the docs. Yeah. Wow. You can put it in the code is what you can do. In fact, let me show you this. Put it in the code. Put it in the comments on that. Yeah, yeah, yeah. Let me show you this app that we're running right now. So this is an application that I built for my Twitch channel. Okay. Okay. And this is going to be a bot that's going to have a rocket in it. That's going to be remotely controlled by our chat, the people in the chat room. So they'll be able to launch, they'll be able to launch the bot like this and then fly it around and collect coins, for example, or maybe they'll be able to drop meteors that'll go down and blow up. While I'm coding live in Visual Studio in JavaScript or C Sharp. So it's a little bit crazy, right? But you were talking about, you were talking about screenshots, right? And if you look at my engine right here, my, let's go back over. But if you look at my engine right here, you'll notice that in the upper, that in the bottom right right here, that engine's not quite lined up, right? So let's just do exactly what you said. Let's take a screenshot like that. Okay. Let's go over to my rocket. This is the class that does the, does that particular work. Let's use the Visual Studio function to go find that draw function. Let's get out to the draw function. Let's put a comment right here and let's paste it in. Okay. And let's come in here and let's crop the image like this. Whoops. Not quite where I wanted to crop it. Right there. And right there. And now let's come in and let's do something called pixel scale. And pixel scale is going to zoom in on this and, and keeping the pixels in place as you, as you, as you zoom in. As opposed to having a smooth kind of scale. So you can see the individual pixels of each piece in here. So we'll do a pixel scale on there. And now we can just put the comment, move the engine to the left a bit. Now here's what's cool about this, right? This is not a comment that's going to stay in the code for the lifetime of the application. This is a comment to myself or to another developer later, right? But it's increased in its visual capacity to communicate, right? That's what's kind of super cool about this. So now let's say you now check this into source code and somebody also happens to have code rush. They would see that. And if they didn't have code rush, what would they see? Oh, okay. Good question. So what would they see if they didn't have code rush? There's an option here to turn this off. For example, I can just turn this off like this. And I get essentially what looks like markdown. Right there in the comment, right? And so there's a reference to a PNG file. That PNG file is part of the solution. What's really cool about this, in fact, is watch this. I can take this code and I can cut it, copy it, move it somewhere else. I can take it with even the method, the whole function. Take the whole draw function, right? Which is pretty big. Take that, come down, take it, put it in a new place, paste it, right? Come back in here. Let's re-enable or let's simulate opening this up on a machine with code rush on it. And the comment moves with it, right? I can take and move and copy. So comments, in fact, even if I do undo, right? Now images in source code work with undo and redo stack as well, right? So here I'm undoing through all those changes I made, right? And then I can also redo and go backwards as well. Sweet. Right? Copy on the clipboard, undo, redo. Plus let's say I do have a developer on my team, right? That I don't want to, that doesn't have code rush. And I want to, I don't want to leave them out, right? I can just come in here and say see, put a little note to them that says see image in solution or whatever I want to see there. And then now if I hover over that, I'll see that as well if I have code rush. And if I don't, I can still see it and I can still use it and work with it. Cool. Right? So that is, that's one of the things that you can do with comments is you can extend the documentation. Can I show you another example? Plays. So now I'm going to go over, jump over to plain 3d.js. It's a JavaScript file. And I've got a function here called get line intersection. This determines the intersection between a line and a flat plane. Right? Where is it? And if I look at the code at first glance, if I'm a new user or if I haven't worked on this function in a while and I come back in, it's not immediately obvious how the code works. Right? Understanding this code is going to take some effort to figure it out. Right? In part because it uses established formulas. In part also because I've got to return null here. I've got to return line here. And I've got to return point here. Right? There is this comment right here that says, hey, based on formulas found over here on Wikipedia. So let's, let's bring that up. And oh, this is what's going on here. No intersection, point or line is in the plane. Those are the three different possibilities. So let's copy the image. Let's come over here to the source code. Let's come over here, put a comment marker right there. We're going to come in here on parallel. That's this one on the left. So we're going to crop the image. We're just going to take this, drag this over here like that. And bring that up there a little bit. And there's our parallel. Right? Take that copy that to the clipboard, come down, paste it in there. Let's paste it down one more time and we'll read, we'll readjust each of these. So here's this one, the line. I'm going to go here and crop the image again, bring it to the line. The line is contained in the plane entirely. And let's come down here, we're going to crop this image and it's the point, it's the one right in the middle. So we have the ability to incredibly quickly That is so cool. Put images in code, modify them as if they're first class citizens without impacting compile time, editor performance, or any other metric you might be concerned about. And this works with all project types, any version of the framework. What does it rely on other than Visual Studio 2017 and Code Rush? Our understanding of languages. So right now we're supporting HTML, CSS, Visual Basic, C Sharp, JavaScript, TypeScript, and F Sharp. So we're getting the big ones. And other ones like Python and other languages will likely add support for those because the engine, the magic, the hard work is done. Supporting a new language is generally not that hard because all we have to do is understand the comments. Sure. Can I show you a few more cool things you can do? Absolutely. You don't have a threshold for cool. Because I don't want to exceed that. Excellent. Excellent. So seeing these comment delimiters in the beginning, I can get rid of those by just putting a back tick at the beginning of them like that. And the comments still there, but it just kind of cleans things up a little bit. And I can also, I can move this just by putting spaces in it. I can add things before, a text before or after it like that. And it also works with debugging too, right? So when you're stepping through code, everything still works. The only feature we haven't cracked yet is printing. That's the only piece that we haven't cracked and if there's a lot of enthusiasm for this as I think there might be, we're likely to figure that out too and solve printing for you. Let me show you a couple other uses of it. Actually, I want to stop because I don't want to barrel all the way through. Do you have, do you have any questions or anything like that at this point? Nope. Any questions I have, I will let you know. Okay. Let me show you another kind of cool thing that you can do. I have, this is my animation for the meteors when we drop the meteors. And as, you know, if you know me, I'm a little crazy. I've got 63 frames of animation for this rotating meteor. That's what I do. My explosions got something like 200 frames of animation. Those are all PNG files that do that exploding at the bottom, right? So I go a little crazy, but one of the things that would be very cool to do in the meteor class that's right there. I just opened this up in Visual Studio, right? I just double clicked on my asset out there. I hit Ctrl A to select all. Ctrl C to copy. And now I'm going to go into my meteor class and I'm just going to up at the top here in this comment. I'm just going to paste. And then now what I've done is in my meteor class, I've got a picture of the class, some visual representation. It's a signpost. Right. And what's really cool about this is when I'm flipping through files, right? I'm going from one file to another, right? And then all of a sudden I land on it. I immediately get that visual recognition. I am on board with the file. I know the file that much faster instead of having to look at the code and recognize it, right? Because you're using a serial process which takes so much more time to recognize instead, I instantly see it, right? So that's kind of a cool thing you can do. You can also, you can do things like this where I've got here, look at this, I've got a settings.default.twitch.bot OAuthToken. And right next to it, I've just embedded an image at the end of the line. I've hidden the comment, right? So if we come over here and we look at this, there's that little, the back tick to hide the comment. There's what it really looks like. And what's going on? Let me right click this so you can see this. If I right click this and choose link, when I click it, it's going to execute a visual studio command, project.properties. So I'm here in the code looking at one of my project properties, right? The setting that's out here, I can click on this like this and it opens it up for me and now I can see it make changes, right? Code that connects with tools or commands of visual studio in some way, you can invoke those commands. Codes that are related, you can get to those other places. Let me show you something else. Let me jump over here into Excel. And I've got some shortcut here that I need to implement. I haven't implemented them yet, right? I'm just going to select that, choose copy. I'm going to come back over here and that's going to be in my main that I need to do. Look, hey, there's more key bindings that I need to add right here. That's this comment. Well, let's just put that in while I'm working, right? So I've got the spreadsheet from visual studio, right? Anything that's out there with regards to, you know, any application that copies and supports a copy as an image, we can put it in here. And even if it's a temporary thing like this is an example, just while I work, right? It's information in parallel. Instead of having to switch over to the spreadsheet and come back, I've got it right in the code. I can work a little faster. And it is an image. It's not a live link back to the spreadsheet. Right, right, right. More cool. You ready for more cool? Yes. All right. So you can see why I was a little bit excited about this, right? So here I'm in this formula over here called distance to point right here. And there's a comment says, hey, it's based on this formula to calculate the shortest distance. Well, the formula is given to me in latex, which is essentially a structured way of representing formulas. Now, you can go online right over here. There's a link right here in the editor. You can go online and type in your equation. Or you can use these buttons. I'll just paste in what we had there. And you can see there it is there. I'm going to make it a little bit bigger so we can see it. Maybe even bigger than that. Very large like that. There's the formula. That's what was happening in the code right there. I'm going to right-click it, copy it to the clipboard, come back over here. And I'm going to just kind of replace all of this with the formula. Just like that. Cool. So I can put that formula right out there. Right? One last thing. Let me switch over into I'm going to switch over into F-sharp now. So I'm in F-sharp. Now, I'm not an F-sharp guy yet. I'm not an expert. I'm barely holding on. Okay. In learning it. Right? But I do know math. And I know mathematics symbols. So when I'm in here looking at this code right here, this code says it's based on the haversine formula. And if I were to just look at this, I'd be like a little bit lost. I have to go look it up. But if I look at this, I see, oh, I think I see what's happening here. Now I understand the F-sharp. I am getting myself up to speed faster because somebody left a comment here that included the formula. And also, if I hover over, there's a link. And if I click on the link, it takes me out to the Wikipedia page on it. And I can just, if I want to augment this, I just take this image, for example, right-click it, copy the image, come back over here. And let's put it right up above. So we just put a comment here, paste it in. Let's use that symbol to hide the beginning. Let's center it on the page. Like that. And there we go. And that's it. Very cool. So that's it. That's like the high speed run through. And I'm just like, I was like, well, it could take a long or it could go short, depending on what we do. But I think I have a feeling if I look at the clock, it's going to be like we're under 20. Talk to us a little bit about what it took to make this. OK. Because you were telling me earlier that this has been something you've been working on for a very long time. Yeah. I first tried this in Visual Studio before there was .NET. And I had only linking and embedding where I'd drop them in. But the problem was storage. The problem, one of the biggest problems with this always is storage. And we might want to take a look at behind the scenes how that magic is happening. But what I was doing is I was just encoding the comments into essentially a base 64 and putting these giant comments in the code. The problem is is that you change the compile times, right? The compile times grow as the file size grows. Right. It's not a good idea. The advantage is it's there and if I give it to you and you edit the file it stays in this position. Right? I tried that and that's how far I got. Ultimately I got to a point where I was like you cannot release it. The upside of all of that though is that I could actually at the time have actual spreadsheets, actual audio files, any OLA object could go in. Right. Right now we're just scaling back to be only images. I was saying only images with this release. And then I tried again when I was in, when I was, we're on code rush for Delphi. And I kind of got close again. But again we ran into the storage problems. I was storing I think externally at the time. I had a file out there but you run into problems when you're storing separate from the file. Right. What happens if somebody like, you know, is also pasting in images for example that sort of thing. How do you resolve all of that? So there's never, ever any collision. Right. And then how do you, how do you open up a code file without having to download the external image or if it's stored low, stored remotely, how do you work offline? There's all kinds of issues. Right. There were, there were loads and loads of issues in solving this problem. In fact, most of the, most of what you've seen, most of these examples are really showing you the UI solution to the UI part of the problem. Right. How do we get it so it's, it's so crazy easy to take it from one place and stick it somewhere else. Right. How do we get it so it feels like it's really there. Right. I can take this and I can click on it with the mouse. Right. And there it's selected. Right. I can change the size just like I can't change the size right there. Right. Let me go ahead and I'll restore the original image right there so we can get back to that. Right. So how does it, how do we get it to work with cut and copy and undo stack and redo stack? Right. All of those, that's the UI part of the problem. Right. The storage part is trickier but we have a really clever way and this, I was telling you this, so we, we basically, I think about a year ago or half a year ago, we were like, let's try it again. This real time is bolder. Right. To emphasize it. Right. So we've got that ability right up there. We had that going and I was like, let's give it another step and one of my developers sent me essentially a prototype and, and then the prototype, the file name was curious to me and I'll show it to you right up here. So if we look at this file name right up here, if we look inside this we have to go inside it and there it is. There's the file name and I'm like, what is this file name? Is it a GUID because we talked about and, and there are even problems with using GUIDs because if you copy an image and then you paste it into several files, you're going to now have multiple copies of that image stored out on disk and we don't want that either. We want to have an efficient, efficiently stored set of images out on disk. In fact, if I take, if I take this image and right-click and copy it just like that, let's go, we'll go over here into PowerPoint and I'll just paste it in here. I should be able to paste it in. It's right there, but it looks like that had transparency, so it came in black on there in the background. But, I think we're probably going to see the same thing with the transparency here, but I'll right-click here, copy that, because that also has transparency. Oh, it looks like that one's okay. So maybe it doesn't have, either it doesn't have transparency or it could be an issue in the past, but, but, the, hold on, I'm like totally, I was so like distracted by that, I'm like, what's the image name? Oh, the image name, right. So if we were to take this, like say we were to take it from here and copy this to the clipboard and then come in and like say, okay, let's paste it either multiple times in the file or through multiple files of my project, right. So the first time I paste this in, the image name is 32, it starts with 320, right. Next time I paste it in, right, if we were using GUIDs, we would advance it, but this is not, the second time and it's a bitmap that's on the clipboard. I'm not pasting text, it's a bitmap, right. So what's going on here? And he says, oh, I'm using a hash of the image. And I was like, oh, and I started going through all the problems that we were having before with storage. And I realized, oh, hash of the image really is nice because what happens now is when I paste that in, right, I only get one file that's out there, right. The other thing that's cool about that is you go out to that file and you modify it, it updates everything. And where is that file stored? Let's look at that. So if we come in here and we do a solution and we right click and we say open file and file explorer like this, we jump up over into here. There's a folder inside the solution called .cr. And inside there is a folder called images. And if you take that, you can just upload those contents right there. That's what you can do. Now we're seeing several of these because of what I was doing in the demo prior to this. But they're not all, not all of these are used here. If we go back over to the other one, I think you'll see something that looks some all out before it started. Today, let's open that up and go into .cr. Images. And there are all the images right there. And then you can just add these to source control and they go up with the code. Exactly. And come down with the code as well. Cool. Yeah. And I just, it just reminded me of another thing that you can do. If you have a code that's not so good, like for example, right here, I've got a lot of code here. Right? I might be able to, I think I have a template in here called scary. Do I? No, I don't. I can create one. I do have one called nice, I think. Right? Like that. Well, that's not what I want. I might want to have, I have another one called P.U. Like that. This code stinks. Right? Like that. And so, you can put a message to your fellow developers to get their attention and get the whole team's attention. Yeah. As you're scrolling through the code. Right? So you can put icons in there. And what I just demonstrated there was a code rush template. Right? I'm, if I type in a slash nice, I created a template that is just going to expand to the image. Right? That it's already part of the project and put it in there. Very cool. I may be the only time this emoji has shown up. I'm going to scroll that off screen so we don't get in trouble. This is so awesome. All right. So this is a feature of code rush. It is. Available now. It is. It is. It is. And people can, we'll put a link to it in the show notes. People can go check this out as well as figure out, look at all the other things that code rush does, of course. Yeah. I'll put on, so I just put in some of mine right there. You can use it also for branding, right? Okay. For putting your stuff right into the beginning. Yeah. Yeah. And it's, if you go to DevExpress.com and we're just saying, here's what we are, here's what we're doing, here's what we're building. This is the experience. Very, very nice. Thank you, Robert, so much. Very cool stuff. Hope you enjoyed that. And we will see you next time on Visual Studio Toolbox.