How To Use Windsurf Editor For Beginners
Other Videos📅 2024-12-02
Transcript
[00:00] by simply prompting wind surf a couple of times here with the goal of creating the Google Chrome no internet T-Rex game we were able to create our own version here as fast as possible in this tutorial I'll go over how to take wind surf code and actually display it in your browser sound good let's jump in couple things to get out of the way before we even begin today's video first thing I wasn't even going to cover wind surf like I wasn't going to do any videos on it but man the amount of comments I have received across all my videos is tremendous like a lot it even went as far as getting a whole post dedicated to it in my school community and as you know if you post my school
[00:30] community and I think it's relevant I'll make a whole video on it now if you want to check out the school Community it's in the description down below to get started here simply hit download wi surf editor this is going to download it to your laptop SL desktop whatever you use I'll make sure to leave a link to this in the description down below let's jump over to the editor my goal of this video is simple I'm going to show you not only how to create code effectively with this editor but I'm also going to show you how to deploy it as one thing that always messes up in these tutorials you're watching it it's a 20-minute tutorial and you're like wait wait wait we don't even see what the code looks like like there's no front end there's no back end no no no I'm going to show
[01:02] you let's go ahead and get started get started first option we have obviously is we can import from VSS code or cursor oh no cursor you also have the option to install wind surf I'm not going to do that personally you can do it you can use it in your terminal this will make more sense for now we're going to hit start fresh for key bindings is completely up to preference I personally like using vs code next now we get to choose how the code looks when we are editing it and creating it I'm obviously going to go off dark I don't know about you but if I'm working late at night it's like 11:00 p.m. 11:30 I don't want to to see that super white screen just blasting my eyes so we're going to do
[01:33] dark next and finally goad and sign up this is what their sign up page looks like I'm going to go ahead and just sign up with Google so all that information is filled in for me once you do that you're going to get redirected to this window we're just going to Simply hit open wind serf here we go now windserve here we have similar commands that we saw with cursor AI such as command L and shift command P this is going to open the command pallet or the code of cascade now what it wants you to do is it wants you to supposedly kick off your entire code Base by simply putting something here therefore the circum navigate out of some terminal commands here and see if we can do it all within Cascade as a side know if anything
[02:04] happens during this entire tutorial I'll make sure to leave resource docs in the description down below to help you out but on top of that you can use a website called bump ups.com it will allow you to take this specific video link put it into a chat and actually talk with the video therefore if there's any issues in this entire little guide here you can just talk to the video oh and also I created this software so you're actually getting real value and real tutorials from someone that actually runs a software company rather than just some random YouTuber I'm not a random YouTuber let's go to again let's see if wind surf actually shines here we're going to say crit react based app I want to have a directory be at this folder
[02:36] /wi surfr just initialize it hit enter not bad so far this is the correct command but there may have been a skip here for you personally if you have any issue when it comes to npm or not recognizing a command within the terminal I suggest you to check out that Google doc down below skip down to the step that refers to the ability to install npm and no JS if that didn't make sense don't worry we're just going to hit accept here that's only for people if they ran into err because npx is not recognized looking good so far and I'm actually starting to see the value of wind surf here they're making the terminal commands and the way you
[03:07] typically interact with IDE integrated development environments cursor AI VSS code a lot simpler like a lot simpler almost like a conversation which definitely is an advantage comparative to what we saw with cursor AI so what you'll notice here is that I mean this is going really far here whoa okay so I was able to successfully create a wind serf Pro based off my information all right this is going y'all and what we want to do though is we want to actually open this so this is going to be a react based app obviously called wind surf this is actually really impressive let's
[03:38] actually open this so we're going to hit open folder we're going to go into the folder of cascate projects I'm actually really glad they created a whole subfolder for this and then specifically select the folder of wind surf P open so this is going to open our code it's going to promp me whether or not I trust it obviously I'm going to say yes trust I trust this of this folder here with one little prompt here we were actually able to create a react based app to check out past workflows or past conversations I can simply click this and this will show me the chat we had up to this point so make sure if y'all have not used this line yet start your project like this go and copy that write
[04:09] it down you're good to go and obviously this is what we're calling a project I call it wind serf p as you'll see right up here to your top left now typically when working with AI and specifically code you can go down little rabbit holes here and keep talking to it so it has previous context but off this initial prompt here that we got an entire react based app I'm going to hit new conversation and then before I show you anything further here let's go and run this so we can see what this would look like in our web browser in order to run this we can come down here and we go to terminal and then you'll notice that we're right in our correct terminal here it also helps us with generating command
[04:41] here what's impressive and honestly I'm starting to see why wind surf is getting so much traction here is they make terminal commands a lot easier so so hypothetically I don't know the command is npm start I just don't know I don't remember I could possibly simply ask how do I run the app but since we know what the command is here it is simply just npm start and we should see this run cck there we go and boom we've successfully run that code and we see it live now now let's do some more fun stuff let me go ahead and give you some pointers real quick when it comes to this kind of environment and then we'll jump more into the AI features provided by wind surf right off the bat what you notice
[05:12] is that the whole point of a development environment like this is so that we can edit the code here and see instant Reflections there so for example we say edit Source app.js safe to reload we don't care we're like no no and no and it shows up right there now your next question might be is like why does this matter why do I care if we were to load this and push this to a live environment eg a real URL bump ups.com apples and jam.com like an actual live website link you can't do instant Reflections like this we have to actually push this in a production level environment so then
[05:44] your next question might be is like how the heck do I do that check out the video down below or just check out this channel I'm actually going to do a full in-depth guide with wind serf here showing you how to actually deploy to a real website link purpose of this video though is just show you its capabilities so let's go ahead make a fun little game with wind serf AI to do this we're going to go ahead and hit command L now we have a ton of different options here your first major advantage that you'll notice with Cascada when it comes to wind surf is basically how solid their terminal is and when it comes to terminal commands I have noticed a ton of people in my past tutorials always
[06:16] having issues with terminal so that should help a lot therefore for us to effectively create an app here let's reference the code in app.js and app.css to do so we're going to hit at app and we're going to click this we're use a little at symbol and then we'll do the at symbol for CSS JS is going to be the structuring the CSS is going to be making it look pretty making it look good we'll go ahead and do this prompt right here from this code let's create a sidescroller game like the one Google Chrome does when there is no internet have it so we can get new high scores jump with a llama 8 bit and so on and actually to give it more context and I
[06:47] haven't seen cursor AI do this yet let's add an image to do this we're going to Simply hit add images and the image I'm going to provide is just reference of what that Google Chrome game looked like that right there is an extremely powerful feature that I've covered a ton of my channel especially when it comes to front end development at this point when it comes to Ai and coding you can basically mimic any type of website with AI just providing more context by providing any actual underlying image of the website we are generating a fullon game by just doing a prompt while it's working it's going to show us a yellow
[07:17] Hue obviously when it's editing the CSS it provided us with the JS correctly it also gives us kind of like a g commit or in this context how many lines have been removed comparative to how many lines have been added it's even going as far as providing as content text on how to actually play the game and what's actually super cool here is that at the end here it does provide me the ability to hit mpm start but since we're already running that in the terminal I don't have to so I'm going go ahead and hit X here then with the code provided I can hit accept here go to our CSS it looks like we're going to hit accept here accept make sure you save if you don't save it's not going to reflect in Local
[07:48] Host save save and with just that simple prompt we have a game let's see what my high score is going to be okay put in the comments right now what you think it is I'm saying over 10 okay we keep going here okay it's definitely over 10 okay there we go so not bad with just a little bit of coding it even has the ability to detect when we hit a cactus or a Green Block and try again and we have our high score pretty solid stuff here with just two sentences looking good so far now Cascada also has another additional
[08:20] feature for us to try out here and play around is instead of writing to it which is going to give us live code that's going to mess with our underlying directory here we can actually chat with it this is more in the content text of maybe you're going through your project and you're scrolling through this and there's just a part of the code that you're just like what the heck is going on shrink down so for example let's say we're in app.js and this entire return like everything after return this return right here we're like what does this mean what's happening why does it seem separate I could come over here and just simply ask exactly that to do this I'm simply going to say what is return and
[08:50] why does it seem separate provide the code hit enter it's going to be chat based right it's going to be chat back and forth you have your little private teacher 24/7 teacher I teach Cod as well but I'm not 24/7 I guess technically I am if you watch all my videos just on Loop but point is that you can talk to it and get more context so if you don't know what it is learn something new every day this is basically how we're going to render on the front end what we see if you don't know what I mean by render it's how the UI reflects the game so for example here instead of score I say big points we got some big points
[09:21] here and if I come back to the game here you'll see big points just reflection this covers a good amount of what I wanted to go over in today's video I'm going to do a full in-depth video like 30 minutes plus of wind surf showing you from start to finish how to deploy this to a live website link if you want to see that make sure to subscribe here I'm also going to be doing other videos on this channel showing cursor AI in different platforms and comparing them if you felt like you learned something make sure to leave a like it's completely free and it helps me out here if you have any issues with this tutorial you can go to bump ups.com there's a free 60 minutes you can chat with this video get all the answers you want but without further Ado that completes this winster video get ready
[09:51] for more this week and I'll see you in the next video we're doing the outro live I'm playing the game while doing an outro those are two random videos that's my favorite and I just lost this game I'll see you in the next video