Transcripts
1. Introduction 2: Everyone, and welcome
to this course. We're going to be
covering how developers should actually be using AI to speed up their workflow
and to continue to create high quality code. So with this course, what
we're really going to be covering is the basics of AI and some of the tips and
tricks that a developer can use to utilize it in
a fast, efficient manner. A lot of times, when you use AI, it creates bad or okay code. And this can create a problem, because if we are asking
it to do something and it's doing it in a
way that makes us have to check every
single step of it, well, it's not really saving us time at the end of the day. What we want to do
with this course is show you how you can use AI, how you can prompt it,
how you can set it up, how you can create a workflow that will speed up the way you develop instead of it just being another hurdle that
you have to get through. We cannot ignore
the fact that AI, especially in programming is extremely important
because it can help us solve bugs that used to take us weeks in just
an hour or less. It can help us build
entire features from scratch in just a
couple of minutes that may have taken
us weeks as well. It can help us
refactor old code, and it can help us do a lot
of menial tasks way quicker. Because of this,
people who know how to utilize AI are going to be the next top performers in the field of
software development. So if you want to
be a top developer, then you need to know AI. All companies are slowly
switching over to it. Some are slower than
others, but eventually, I would say in the next
two to three years, most companies will need to utilize it if they
want to stay ahead. Because of that, we need to
make sure that our skills are matching up with what
these companies expect. So in this course, we're
going to be covering the basics of an AI IDE, showing how we can utilize it to create a new project, to
create a new feature, to refactor old code, and to generally just utilize it in our
everyday workflow. So those are going
to be the objectives of this course, and
by the end of it, you'll be able to build your
own project and prompt AI in a way that will speed up
your development workflow. It's really, really
awesome technology, and there's a lot to learn here, but it isn't too bad
by the end of it. So I'm excited to jump in. So let's go ahead and get
started with learning how to use AI to speed up our
workflow as a developer.
2. AI IDE: So we need to get
started and actually figure out how do we
use AI in our code. There are a few different
ways that we can utilize AI. The one that we all probably
know about at this point is the first one on the
scene, and that's HAGiBT. We can copy and paste
some code in here, ask it a question, ask it to refactor it, and it'll do a pretty
good job of that. The problem, though, is this
is a pretty slow workflow. You go look at your code,
you find a problem, you copy it, you put
it in the ChachiBT. You have to give
it all the context so it knows what you're
trying to accomplish. Click Enter. It looks good. You haven't been
able to test it. You have to copy and paste
it back over to your ID. And it's this cycle that
can be really slow. It speeds some things up, like finding bugs
and everything, but it doesn't speed
it up to the way that is an efficient way
and use of your time. So that's where we
come in with AI IDEs. Essentially, they're just IDs with AI implemented into them. You can also usually
just find a plug in and put it into your
favorite IDE, as well. So, in this case, we're going
to be talking about Cursor. That's the one we're
going to be using for this entire series here. However, you can utilize
whichever one you want. They all pretty much work
generally the same way. They just might have
a different set of models that you can use. With Cursor, essentially,
what we're going to be doing is starting from scratch
and building something. You can see if you just go
to their website cursor.com, you can download it
right now on Mac or Windows and really
get going with it. There is a free tier, so you can ask it
some questions, might be a little slower,
might be a little dumber, but it does have a
pretty good free tier. If you want to pay
the $20 a month, you can get access to
some better models, and it might be worth it
for the learning purpose, but you can continue
on for free. Here. I also wanted to talk about two other big
players on the market. Claude Claude is something you
can also download and use. We're actually using some of
their models over in Cursor. So that's something that we're going to be working
through here is that just because we're using cursor
does not mean we're locked into whatever
model cursor creates. They've actually just
created one called composer. But we can use GPT. We can use Claude. We
can use Microsoft. We can use all of these other
AI models through cursor. With Claude, you can
pretty much do the same, but it's more tailored to their specific set
of different models, but you can reach out. And copilot is a
different one, as well. You can see that it's kind of a hybrid where you can ask it questions here or you can implement it into your
code base as well. There are lots and lots of
these products out here. So find the one that you're
most comfortable with. But for this course,
we're going to be focusing on cursor. So once we actually open up our IDE here, we
get it installed. We can go ahead and
open up a project. You're going to be
presented with this view. Your colors will be slightly different because
I've changed them to fit just something I enjoy
for this current second. It looks a lot like VS
code because it was pretty much forked off of
the VS code repository. So it will have a lot of the
same abilities to utilize the plugins if you use VS Code and utilize all
the theming, as well. What we want to do is when we start up here on
this right side, we're going to see
the toggle AI pane. On any other ID, you're going to have something
along this as well. It might be on the
bottom, might be on the left side, might
be in the middle, but there'll be some way that
you can communicate with your code base and with
your different agents. With this, we can then actually begin communicating with AI. Over here, we can go ahead
and type out things, and it will create
stuff in our project. It'll just be an add
on. It'll be something that we can communicate
with as we're building. A lot of different IDs, as well, will have these
different features. This feature rate here is to switch between the
modes of your AI. So right now it's on Agent. This is the most
powerful one because Agent gives it
permission to do things. Instead of you just asking it a question and giving
you an answer, it can go look up the answer. It can look through
your code base, or it can even look through
your entire desktop if you give it
permission to do that. So Agent is the most powerful, and it's what I default onto. If you don't want it
to touch the code, however, you can switch it
to ask for some problems. Sometimes it touches the code
when you don't want it to. So that's your baseline. You click Ask, it will not touch your code. I will
not change anything. Plan and debug are
specific to cursor, but other different IDs are coming out with
these as well, and they're pretty
straightforward. If you're trying to plan
out a big extended feature, you might want to use
the planning prompt. It'll help you with that.
If you're trying to debug a certain bug here, you can hit that debug and it'll be smarter in that regard. And the next side, what we
have here is our models. So these are the models that I have currently set up on mine. There are more models. And if you click this button,
it'll list out all of them, you can add anyone you want in. And then there is a Max mode, which allows the Context window to be larger for
really large projects. It does cost more
if you do that. So composer is the one
that Cursor created. You can see it says
right here, cursor's first agentic coding model. So, this one is the cheapest for cursor because it is
utilizing Cursor's own code. We then have Opus right here. This is AnthropicTing model. It's really, really good, a little expensive,
but really good. Sone is also really good
AnthropicO thinking model. We have the GPT series here, so GBT 5.1, GBT 5.2. We have Gemini. This is Google's latest model
at this current point. And then we have some
other ones like this mini. We have a Grock. And if you click Add here, you can click View All models, and there's all these models that you can try to
implement and utilize. For this particular course,
I'm going to be sticking with our anthropic
probably sont for five. For most of this, I'll might use a little
bit of composer, but the models are going to change as we move forward.
Some are going to get better. You're going to, you know, kind of get comfortable with a few, not get comfortable
with some others. And so we need to
make sure that we are utilizing them in
the best way possible. Another area for this, as well, and this is brand new,
so I want to teach it. You see these little thinking, these little brains next
to this, that is thinking. So essentially, thinking
means it's going to really analyze the question
before it answers. This is, again, a
little bit more costly, but it usually provides
better situations and better responses. However, I'm going to
turn on these two models right here without thinking. That's going to allow me to
choose if I want it to go a little deeper or if I don't want it to go a little deeper. We can then see they're
added over here. We have Opus 45 and
now 45 thinking and Sont 45 and Sont 45 thinking. So that is the basics
of our IDE rate here. We've installed it.
We've looked at it. We have some agents over here. We can ask it questions, and we can actually
begin coding. So let's go ahead and
begin doing that.
3. Think Like a Director: Context is King: So, we need to get
started and actually figure out how do we
use AI in our code. There are a few different
ways that we can utilize AI. The one that we all probably
know about at this point is the first one on the
scene, and that's HGBT. We can copy and paste
some code in here, ask it a question, ask it to refactor it, and it'll do a pretty
good job of that. The problem, though, is this
is a pretty slow workflow. You go look at your code,
you find a problem, you copy it, you put
it in the ChachiBT. You have to give
it all the context so it knows what you're
trying to accomplish. Click Enter. It looks good. You haven't been
able to test it. You have to copy and paste
it back over to your IDE, and it's this cycle that
can be really slow. It speeds some things up like finding bugs
and everything, but it doesn't speed
it up to the way that is an efficient way
and use of your time. So that's where we
come in with AI IDEs. Essentially, they're just IDEs with AI implemented into them. You can also usually
just find a plug in and put it into your
favorite IDE, as well. So, in this case, we're going
to be talking about Cursor. That's the one we're
going to be using for this entire series here. However, you can utilize
whichever one you want. They all pretty much work
generally the same way. They just might have
a different set of models that you can use. With Cursor, essentially, what
we're going to be doing is starting from scratch and building something, you can see, if you just go to their
website cursor.com, you can download it
right now on Mac or Windows and really
get going with. Is a free tier, so you can
ask it some questions, might be a little slower,
might be a little dumber, but it does have a
pretty good free tier. If you want to pay
the $20 a month, you can get access to
some better models, and it might be worth it
for the learning purpose, but you can continue
on for free with Kurt. So I wanted to talk about two other big
players on the market. Claude Claude is something you
can also download and use. We're actually using some of
their models over in Cursor. So that's something that we're going to be working
through here is that just because we're using Cursor
does not mean we're locked into whatever
model Cursor creates. They've actually just
created one called Composer. But we can use GPT, Wiki News Claude,
Wiki News Microsoft. We can use all these other
AI models through Cursor. With Claude, you can
pretty much do the same, but it's more tailored to their specific set
of different models, but you can reach out. And Copilot is a
different one, as well. You can see that it's kind of
a hybrid where you can ask questions here or you can implement it into your
codebase as well. There are lots and lots of
these products out here. So find the one that you're
most comfortable with. But for this course,
we're going to be focusing on Cursor. So once we actually open up our IDE here, we
get it installed. We can go ahead and
open up a project. You're going to be
presented with this view. Your colors will be slightly different because
I've changed them to fit just something I enjoy
for this current second. It looks a lot like VS
code because it was pretty much forked off of
the VS Code repository. So it will have a lot of the
same abilities to utilize the plugins if you use the VS Code and utilize
all the theming, as well. What we want to do is
when we start up here, on this right side, we're going to see the toggle AI pane. On any other IDE, you're going to have something
along this as well. It might be on the
bottom, might be on the left side, might
be in the middle, but there'll be some way that
you can communicate with your codebase and with
your different agents. With this, we can then actually begin communicating with AI. Over here, we can go ahead
and type out things, and it will create stuff in our project. It'll
just be an add on. It'll be something that we can communicate with
as we're building. A lot of different IDEs as well, will have these
different features. This feature rate here is to switch between the
modes of your AI. So right now it's on Agent. This is the most
powerful one because Agent gives it
permission to do things. Instead of you just asking it a question and giving
you an answer, it can go look up the answer. It can look through
your codebase, or it can even look through
your entire desktop if you give permission
to do that. So Agent is the most powerful and it's what I default onto. If you don't want it
to touch the code, however, you can switch it
to ask for some problems. Sometimes it touches the code
when you don't want it to. So that's your baseline. You click Ask I will
not touch your code. It will not change any. Plan and debug are specific to Cursor, but other different IDs are coming out with
these as well, and they're pretty
straightforward. If you're trying to plan
out a big extended feature, you might want to use
the planning prompt. I'll help you with that. If you're trying to debug
a certain bug here, you can hit that debug and it'll be smarter in that regard. And the next side, what we
have here is our models. So these are the models that I have currently set up on mine. There are more models. And if you click this button,
it'll list out all of them, you can add anyone you want in. And then there is a Max mode, which allows the Context window to be larger for
really large projects. It does cost more
if you do that. So composer is the one
that Cursor created. You can see it says
right here, cursor's first agentic coding model. So, this one is the cheapest for Cursor because it is
utilizing Cursor's own code. We then have Opus right here. This is AnthropicTing model. It's really, really good, a little expensive
but really good. Sone is also really good
AnthropicO thinking model. We have the GPT series here, so GBT 5.1, GBT 5.2.
We have Gemini. This is Google's latest
model at this current point. And then we have some
other ones like this mini. We have a Grock. And if you click Add here, you can click View All models, and there's all these models that you can try to
implement and utilize. For this particular course, I'm going to be sticking with our anthropic
probably Sonnet 45. For most of this, I'll might use a little
bit of composer, but the models are going to change as we move forward.
Some are going to get better. You're going to, you know, kind of get comfortable with a few, not get comfortable
with some others. And so we need to
make sure that we are utilizing them in
the best way possible. Another area for this, as well, and this is brand new,
so I want to teach it. You see these little thinking, these little brains next
to this, that is thinking. So essentially, thinking
means it's going to really analyze the question
before it answers. This is, again, a
little bit more costly, but it usually provides
better situations and better responses. I, however, I'm going to turn on these two models right
here without thinking. That's going to allow me to
choose if I want it to go a little deeper or if I don't want it to go a little deeper. We can then see they're
added over here. We have Opus 45 and
now 45 thinking and Sont 45 and Sonnet 45 thinking. So that is the basics
of our IDE rate here. We've installed it.
We've looked at it. We have some agents over here. We can ask it questions and
we can actually begin coding. So let's go ahead and
begin doing that.
4. Develop Faster Features: Us. So let's talk
feature development. Features are the
essential way of adding new things to an application
or to a certain product. And with this, a lot of times, we want to implement
these features in a fast, clean, efficient manner. Well, a really easy way to do this is most of these features, they come in as a card or
a ticket of some sort. So someone else has already
refined this feature. If it's something on a personal project and you
don't have cards, you can always just
chat with AI to create a card or to have it expand out, you know, ask it
questions, et cetera, et cetera, so that you can get
a really good description. But if you have a feature find. For example, I've
copied this from Jira. It's a big feature set about
adding light and dark mode. So essentially,
what we're doing is we're creating user
toggled light and dark. We've set up the
acceptance criteria that we can manually
toggle them. It starts on default, rating stars, et cetera. So this is a really good card, and we can copy and paste this in and basically
click Enter, and it'll probably
work out really well. But to make sure that we're
creating quality code, whenever we do
something like this, at the end, we want to say, before touching any code, tell me your plan to implement this or something
along those lines. So now, when you
actually send this in, it's going to then give you its plan for
executing this code. So it's going to go
ahead and it's going to analyze the codebase
really quickly, understand how it works. And then it'll give us
the steps that it's going to take to
achieve this goal. And this is where
being a programmer or someone who is knowledgeable in the space as a developer, that your expertise
can come in because it's going to tell us how
it's going to execute it. So if we look through
here, we can see that it gives us a nice
summary up top here. So, it says, essentially, okay, what we already have in place is tailwind with Dark Mode support, CSS variable, system preference, and dark Mode classes. So those are already
on our codebase. What we're missing is some manual theming,
user preference, three state system,
and a script to prevent flash of
unstyled content. So essentially, what it's going to do is it's
going to do this. It's going to create a
theme infrastructure, create theme storage utilities, slash theme, add
functions, support, store preferences, and return the effective theme,
create the context, and then create a prevention
script in the header to run before so it doesn't flash from white to dark
whenever it loads in. Um and then the theme
toggle component. It's going to be a
three button light, dark system or cycle that
rotates through all three. B. And here is where
we can actually get a little bit where we can
start putting our comments in. So I'm going to say on 2.1, I want there to just be a drop down menu of
these three options. So we're defining
what it's going to do it was actually
thinking about maybe just having a
cycle up there where you can just keep clicking
it over and over, and that's not really good UI, at least something I
haven't come across. So I want to make
sure to define it. Visual active state
for current selection, accessible Area tab, yes, position top right corner. If we ended up put it in the top left or in a settings tab, this would be where we
would correct that. We can just go ahead and
just for argument's sake, also say position in top left. 200 milliseconds when toggling button works in both
light and dark, clear visual feedback on
Hover mobile responsive. So again, just for this
sake, I'm going to say, let's make it under 100
milliseconds for toggling. So it's going to then
how it's going to do it. It's going to update
the root element, create a theme provider. This all seems pretty standard. Place theme toddle
in the header, ensure it's visible, and then it'll run through a
verification checklist. So now, instead of
just letting AI do it, we've given it the card
that we want to implement, and we've given some notes about how it's going
to implement it. And now what we can do is we can go ahead and click
this Run button. And it will now implement
this task for us. So now that we've given it all of the feedback it needs, it's going to start building it. And this way, we
are way closer to our end goal from the first prompt than we would have been if
we just let it run, and then we had to
go give it stuff afterwards, because
a lot of times, if it hasn't been created, it's very good at generating those new things and
integrating things in. If you go really far down
the wrong direction, and then you tell
it to completely refactor and go backwards, you might spend a lot of
extra time doing that, just like in normal
programming than you would have if you just took a
couple seconds right here. As it goes through, it's going to keep
reloading this page, so I'll come back
when it's done. So now it has
implemented the code, and we can see it right here. It has this theme where
we can go to light mode, dark mode, and system. And you'll notice that
nothing has changed. So now we need to actually
go in and do some debugging. So we can be very simple in
these sorts of instructions. We can say, the
dropdown is working, but none of the colors
are changing when you switch from system to
light or dark mode. Now, it's going to roll
ahead and run through there, and it says
they'll see the issue. It has not been
configured correctly. This is very important, is that this process, like I said, will
be a collaboration. A lot of times, you need to go test your
work that it builds because it looked like it worked. We could have
just passed that off. But if we don't
actually go test to see if it did what it
said it was going to do, a lot of times those things
will slip through the cracks. So now it's going
to go ahead and actually update that
theme packaging. Wait for it all to reconfigure,
and then there we go. Now we have the light
mode operating, and it does work in the
cursor environment, so that's good to know, as well. So now we can see if
we switch from dark. Our system is on dark
or back to light. It does switch between them. So now we've created a feature. It's looking good.
Our last step, though, is we need
to review this code. So we should do it manually. We can do it either through
a code review process. We can do it with AI, or we can do it just completely
and totally manually. I think that doing kind of
all three is important. So as the programmer, what we should do is we
should click this review tab. And it is now going to show us all of the changes
that it's made. There's a lot here, but
that's what Code view is. So we can now go through and kind of just
quickly look and make sure that it's created in a way that we wanted
it to be created, and it's not taking
any shortcuts because sometimes it
does create shortcuts. One thing that I did notice on this is that in its theming, if we get down to where it
actually created a lot of its theming, right here, is that it put the duration as 75 as a theme element on top of every single instance where there was a
duration needed. That to me is bad code, because what if we wanted
to change that duration to 100 or 50 or any
of those things? How do we make it so
that it doesn't do that? And that's what we're
going to be working on in the next lecture is, how do we have AI actually
help us refactor our code? Later on, we'll deep dive into the review process a bit more. But now we need to figure out, we've created this, but
we need it to refactor. If we say we're good, we
like it, everything works, but we wanted to do something slightly different
in the code wise, what do we do for that
refactoring process? And that's what we're
going to do next.
5. Refactor Code Quickly: So let's talk about
refactoring code. So we're left here
with something that I noticed in the last one, and that is that it seems to
be putting these themes in a way that if we wanted to make a change to dark or light mode, that duration would have
to be changed in 12 20, 100 files as this project grows. So we want to go ahead
and mitigate that. To do that, what
I'm going to start with is creating a new chat. The reason I want to create
a new chat is there's a lot of extraneous context in this that will start to make it go towards some of
our past decisions. We want to go and start fresh. It's a new objective,
so we want to start fresh with
this new objective. It's a new objective,
so we want to start fresh with
this new objective. So when we get to this new chat, what we want to do is we want to first off, ask it a question. Maybe we know for
certain that this is an anti pattern,
but we can ask it. We can say, I noticed that
in the dark light mode, we set duration 75 on a
bunch of different elements. Is this an anti pattern? Can we fix it? So again,
we're communicating with AI. We're not 100% sure. We just think it looks pretty wrong, and we'd probably
want to change it. But we can ask it why
it did it, as well. So if we go ahead
and ask it that, it's going to go ahead
and think this through, and it's going to find all
those use cases in there, and then it's going
to see the issue. And then it's going to give
us its response on it. So, it says, This
means Great catch. Yes, this is an anti pattern.
Look at your global CSS. You already have a
global transition rule. This means you redundantly
added duration 75. You're redundantly added. Well, AI did it, but to the transition color
transition all to individual ims
already appledGlobly. This makes your code more
robos and harder to maintain. Let's remove the redundant
transition classes from your code. So it's going go ahead and do that refactor for us
by removing that code, and then we can test
it here in a second. So that comes up with a
very important point. How do we know if
the code that is generated is top quality code? How do we prevent it from
creating bad quality code? Well, the first step
is our expertise. I was the one who
caught this, not AI. So we can read through the code just like any other
code review process. We need to read through and make sure that it is coding in a way that has good
quality standards, like if one of your peers
creates code and they create a code review, we
need to do the same with AI. We cannot just trust
it blindly because there's 1 million different
ways to do things, and it needs to be
following the way that we want to do things and
that fits with our project, our company, our
policies, et cetera. So the first step is us. The second step is when we do something
like this, we can say, Can you scan the code for other potential anti
patterns and list them? We can do some
sanity checks here. We can tell it, Hey, I want you to scan the
code and do some really quick looking to see if there's some other anti patterns in the code base that
we can help fix. So we can ask it about
certain problems or potential problems and see
how it give us a list, and then we can
decide which ones we think might be anti patterns. So, as it goes through,
it's going to look for all the anti patterns
that it can find. We can also tell it
to check for, like, type errors or potential
bugs or any of those things, and it'll come up
with some good stuff. And the funny thing
is, it has already found a lot of problems
with its own code. First one is the
infinite loop risk. If the user's rated
all available cats from the ABI, this
becomes an infinite loop. Add a Max retry limit or show a, you've rated all CAT message. This is a very I don't know
how many are from the AI API, but there could be 100 million. So maybe this isn't
a huge problem, but it's probably good to fix. Memory leak. This is a good one. Unmounted before the
timeout completes. I'll try to update
on the unmounted, clear the timeout and
the cleanup function, array mutation, problem that sort of
mutates the original. While it works here,
it's bad practice. It could cause bugs. That's a good call out,
unsafe type assertion, duplicate theme logic, no JSON
validation, et et cetera. So this is all just
to show you that
6. Stop Spending Hours Debugging: Debugging is another core
area that we can use AI to help fix and to help
mitigate and speed things up. If we notice, there
doesn't seem to be any errors on this website. We've tested it out quite a bit, and it looks pretty good. However, when we
get to the browser, we have something
interesting going on. When we click the history here, we have all of these
invalid dates, objects, some cats that we
haven't rated before, and all of these dead links. So what's happened? Well, I
already know what's happened, but I'm going to come from a perspective of
not knowing what and we're going to see if AI can help us solve this weird bug. So what I can do is define
the problem really well. So I can say, in the
local cursor browser, there doesn't seem
to be any problems. However, when I bring up a
session on my Chrome browser, in the history section, it seems like there are
cats that I haven't rated, and they all have
broken image links. So we've defined this
issue in a decent manner. We need to make sure that we include any additional
details that we can. One such detail
that I could put is I have made this project before, but this is a brand new project. Give it that piece
of information. Not sure if this
is a cache issue or if this is pulling
something wrong. So we've given it
a decent amount. Now we can click the
Enter key on this, and we can see what
it thinks through. So it's looking through, and it does this
whole thinking phase like it always does. But it says, I can
help you diagnose. Sounds like you might
be experiencing local storage persistence
from previous projects. That sounds pretty accurate.
Like, I'm assuming the AI always creates
the same local storage. Let me analyze the
storage implementation. Perfet found the issue,
your new project is reading local storage
from previous Cat raters. Since both products use
the same storage key, cat ratings and run
the same domain, likely 3,000, it's
going to do it. So it's going to go
ahead and update the storage key for me to V two. And then now we can go
ahead and rerun this. So if we check on our
browser, refresh it. We have an empty cache here, and now we can check, and it has helped fix our bug. So that is a really
simple bug to fix, but it could be complex if we didn't those two pieces
of information together. Now, when we get to other bugs, a lot of them can be
solved by just copying and pasting and asking
it to solve the bug. But sometimes it can create
some issues without it. It can create more
issues than it solves. To fix that, what we
need to make sure is we always ask it to explot
itself before it fixes a bug. So if we go into
our code randomly, we can go down into our CAT API, um delete that, save it. That's not going
to work anymore. And then I can go over
here and let's say, create some variable
mismatch here. There's going to
be lots of issues, and then now I can say, so we start a new
tab here and we say, I am having some issues. See, refresh this. It's
not going to work. Where I am getting a failed to load cat, please try again. Please describe your steps to debugging this before going. So we can, again, ask
it to describe itself, and we've just put the very
basics of what's happening. It's experiencing an error,
and it's going to say, describe your steps
for debugging this, and it will tell us.
My debugging plan. It's going to locate
the error message, find where the failed load is displayed in the code
and understand it. So it's going to start from the error message and work back. That's something
that I do as well. If this is making it
to the front end, this is a place that I can start and I can
start digging in. It's going to examine
the API layer, see which endpoints being used. It's going to review
the component, the cata or component itself, and it's going to check
for common API issues. Inspect browser console, and
then test the API endpoint, see if it's functioning
on the other end. Those are all great
troubleshooting steps. So after it does that, it went ahead and found
the issue itself. It says after examining, I identified the code,
the bug is here. The ERL is missing the T at the beginning,
so it found it. So now we can go ahead and
retry this refresh this page. And it still is a problem. So I'm going to Well, okay, I didn't actually
change the code. Please update the
code to fix it. So now we give it permission
to actually update the code. Goes ahead and fixes it,
refresh. Now it's looking good. Now we go over to
history. We have some issues here.
Store is not defined. So again, just going down. This is the other thing I made. I can just copy and
paste this in and say, getting this error while
loading the main page. It'll go through
its process, and it's going to
probably find that it should be store with
an E at the very end. Yep, there's a typo
there, fixes the typo, and now to resolve these bugs. Some bugs, like I said,
will be more complex. And to fix those
really complex bugs, a lot of them now have
this debug feature. What debug will do is, if it can't find the issue
right off the bat, like these simple fixes, it'll start adding
logs in itself. And from those logs,
it'll be able to read what the code is
doing on execution. And from those, it'll
then be able to debug a lot more
complex issues as well. So that is something where you have a
really large code base with a lot of issues with
it or a really deep issue. You can use this debug feature, and it'll be really
good on that. But overall, to get
out of this lecture is that AI can be really, really helpful in debugging. It can explain to you not
only the steps it'll take, but give you insight into steps that maybe
you should take. It will help solve some
really basic errors almost immediately and pretty much up to intermediate
errors immediately. And there are ways to have it go even farther and run
through a lot of that mundane bug fixing itself so that we can find
these errors quicker, and we can fix them
a lot quicker.
7. Use AI to Fix AI: How can we use AI to help
us in the review process? Well, there are lots
of different ways that we can do that. The first one is by
manually asking a question. So if we look
through our code and we find something that
looks a little sketchy, we can do what we did in the last lecture
and kind of ask it, is this an anti pattern?
Would you change this? And we need to be
the arbitrators of these decisions because
at the end of the day, AI, a lot of times
leans towards being positive and accomplishing
something in every request. Means that if you tell it, Hey, this is an anti
pattern, fix it, it'll go, Yep, that's
an anti pattern, and it'll change it, even if
it's in the wrong direction. So what we need to do is do that constant
collaboration where we're asking it questions
and seeing if it can give us
some good answers. There are also tools like this. I implemented a
quick skip button, and you can see that I clicked the Review
button right here. It brings me to this
tab, and up here, there's a button that says,
Review this code for issues. It's going to run
through some changes. They can be there'll be a lot of changes or this single file, and it will give us a whole
bunch of comments on what it thinks are good or bad
with this code change. Now, the interesting
part about this is I asked it to do
a very simple thing, which is to basically
add a skip button to this and to change the height of the main
page just a little bit. So if it comes up with, like, 13 things that are
wrong with this, then you know that we need
to be the arbitrators, like I said, and actually
choose which ones are in it. Now, this one, it did good. It said I found no issues
with this code change. And that's positive because we do want it to find
no issues sometimes. So with this code, it
says it is good code, and it's ready to commit it. Sometimes it'll
come up with things like this where it comes through with the different levels of problems that could
be with the code, and we just need to take a
look at each one of them, and then see if that's
something that we want to fix, if that's something
we want to bring up, if that's something
we want to comment. If we go to PR reviews
on github.com, they are actually integrated
with an AI as well, and you can ask it questions
on the code review as well. So, overall, we just
need to know that AI can help us with the
code review process. So it can help us
write the code. But then we need to manual
review it ourselves. We need to ask it
questions during this process over here
and have it analyze it. And then when we get to
the actual PR review, we need to have other
people manually look at it and use AI to look at it. And that will create some
really high quality code that is used to be really, really taxing and time
consuming to create. We can kind of create
with using AI assistance.
8. Understand Complex Codebases Quickly: If you get nothing
else from this course, get this from this course, and that is that AI can help
us understand complex code. No longer do we have to go into a repository with 100,000
different lines of code spread across 1,000 different
files and try to understand a complex flow of how a certain variable
makes its way through. AI is really, really
good at this, and it's pretty
much 100% accurate. So we can go into any sort
of repository and ask it a complex question and have it analyze that complex
question for us. For example, in here, I don't really know
how the storage works. I just know it uses
local storage. So I can say, tell me come apprehensively how the
storage on this works, give me pros and cons of it. By just telling it this
really simple prompt, we can get a really
good report on how the storage in this
entire system is broken down. Variables are great
for this, as well. You can copy and paste a
variable in there and say, I this document, I
have this variable, give me overall,
you know, overall, tell me how this
variable is used throughout the code and how it affects different
parts of the code. So what we have here is it tells us exactly how it stores. The storage system
is here, it provides a simple client side
persistence layer. The core operations
you can save you can get has been rated
and clear ratings. Those are the four
operations it comes with. The data structure
is as follows, and then it has pros here. It has zero infrastructure,
fast performance, implementation, SSR
safe, error handling, and good for learning. It's cons, it's not scalable
because there's a limit, no data persistence across
the device, no user accounts, performance issues with
scale race conditions are possible, no analytics, duplicate checking,
browser compatibility, data loss, security and privacy. So from that, we
get this approach where it tells us for MVPs, prototypes, single user
applications, it's good. But if we're trying to
actually deploy this, it's a bad thing. And we have just some
suggestions to help improve it. So overall, instead of us
having to read through the code and do a whole bunch of Googling on what does this mean? What does this library do, we can ask it questions
and have it really define different parts
of our code to us in ways that are really,
really accessible. We can also have it refine this. And let's say define this in a way that stakeholders
would understand. So that will take it, and it'll dumb it down just a little bit, meaning it'll remove some of the technical details so that a person who isn't very technical can
understand it a bit. And so in plain English,
it says the app saves users cats ratings
directly on their web browser, similar to how websites remember your login preference
or shopping cart items. Think of it like a notebook that lives inside the user's browser. When they write a cat, we write it down into their
personal notebook. No servers, databases, or
Cloud storage are involved. So essentially, we can have
it then break it down into really small layman's terms that we can either use to
describe it to other people, or sometimes even as
technical people, we need a non technical
description so we can actually process
that information. So utilizing AI to define and give you how
projects work can really help out with junior
or intermediate developers or even a senior developer
jumping into a new project.
9. Adjust Your AI to Follow Your Rules: The final thing I want to
cover in cursor IDE and any other AI IDE is there's always a place that you can put your own rules in. So if we go into our settings and we go down to
our cursor settings, we can actually slide down
into rules and commands. So with this, I've actually
created a rule set here, a user rule where it
creates a memory bank that helps it understand
what it's done in the past. Essentially, it just creates
a markdown file that it kind of keeps track of some of
the tasks that's created. But we can utilize a lot
of different areas here. We have project commands,
we have project rules, and we have overall user rules which will be used
in every single one. So for this particular project, we can create a custom
rule or remote one. And you can give it a
name like for example, we could say, this one is going to be about
a color scheme. And we can say for this, the rule is the entire project
anytime a color is needed, refer to this color chart. And you can give it just colors. Like X color, Y color, Z color. What this is going to do is before it runs every
single prompt, it's going to make sure that
this is in the context. Why that's important is because now it will never
guess about colors. You give it its color
scheme, and if you create a new component or a new area
or a completely new page, it will be like, Well, it told me that we need to look
at this color scheme. This is a very, very
simple example, but a more complex example might be the way that you use
hooks in your project, the way that you use
contexts in your project. Way that you want
to store things or your preference for camel
case or lower case, IDs, UUIDs, random seeds, any of those things that
are sort of company policy specific or even
just personal preference, you can go ahead and tell it
those rules from the get go. And then now every time
you ask a a prompt, those rules will be
included inside the prompt, and it'll make it so that
you're not constantly chasing AI in a circle
where you fix one area, you tell it to create a new
area, and it forgets all of those prompts on the left
side you just told it to do. Rules are a great way to keep continual contexts and
to make sure that it really cleans up some of those little
inconsistencies within it. One key area here is that
there is something in AI called basically
context smashing or context summarization. What that means is
that eventually we hit our context window. You can kind of highlight
down here and see it. We've used 23,000 out of
200,000 of our contexts window. Now, it does not contact
Smash at 200,000. It will typically
do it before that, maybe around 100 to 150,000. What this means is going to take all that context
that it's gotten, and it's going to run
a function that helps summarize it all into a
smaller context window. This saves cursor money, and it will save you money
in the end, as well. However, it can sometimes context smash out
some of your rules. It will put them
in a way that no longer really goes with what you were trying to accomplish. So if you ever see this sort
of getting up into that 60, 70% range, probably time
to start a new chat. Reset that context
window to zero. And start a new chat
with the context that is needed for
the problem at hand. Don't just have a
continually long chain that you constantly
contact with. Keep creating new chats with new objectives and keep
them really focused, and you won't run into those
problems in the future. But understand, there
is a wide range of rules that you
can apply to AI, and it can really help remove some of those inconsistencies.
10. Your Turn: Project Description: So we've come to the project
portion of this course, and I've created a
really fun one where you create a little
ranker for cats. I want you to do
something similar. Come up with a
really simple idea, start from scratch and use AI IDE to build out
a product for you. Ask it questions, get your requirements,
your specifications, and really build out something strong and robust to begin with. Make sure you view the code
and that you create a product that is not only really
fun but also quality code. Go ahead and submit
that project, take a screenshot of
whatever you created and give it a little description
about what you created, some of the benefits to using AI and maybe some of the drawbacks you've experienced
while using AI. This is supposed
to be really fun, something you can do within 30 minutes to an hour and something that you
can look at in, you know, those 30 minutes
to an hour and laugh at that you just created
this small little project. So thanks, everyone, and I'm excited to see
your projects.
11. Conclusion: This course is a quick
introduction about how you can utilize AI to
speed up your workflow. The workflow is very simple. It is the fact that
we want to utilize AI at every single
step of the workflow. But the key here, the
most important part is we don't want it to
just do all of the work, push it, and move
on with our lives. That will create security
issues, bugs later on, misconfigured code,
and tech debt, because it will create something every single time that's
slightly different. It's not going to be
following these rules. It's not going to be
following certain patterns that we
want it to follow. So we need to manually
make sure that it's doing this by either
creating the rules ourselves, reviewing the code and giving it as much context as possible when we're
interacting with it. When we do that, we can create projects like that CAT
website in minutes. Imagine a whole day of
interacting with AI. You can bring that up to
almost deployable state where that used to take a
team of two or three people, maybe a week to fully develop. So there's a lot of power
behind these tools. If we use them correctly, we can speed up our workflow and we do not have to
reduce our quality. We do not have to
get frustrated. It can really make development
a quick process in the hands of a senior and
experienced developer. So utilize AI experiment with it, get
better at your prompts, give it as much context as possible and really see
what it can do for you. Keep experimenting,
keep learning because this is the next
step in programming, and so we all need to keep
these skills up so that we can continue innovating
every single day. Thank you, everyone for
joining me for this, and I'm excited to see you
all in my next course.
Kurt Anderson, Computer Scientist, Multi-Media Designer
