Vibe Coding Fundamentals In 33 minutes

00:33:22
https://www.youtube.com/watch?v=iLCDSY2XX7E

Ringkasan

TLDREl vídeo presenta el concepte de 'vibe coding', una nova forma de programar que es basa en la intuïció i la comunicació amb models de llenguatge. S'exploren els principis fonamentals del vibe coding, com pensar a fons sobre el que es vol construir, conèixer els marcs de treball, tenir punts de control i control de versions, i la importància de la depuració. S'ofereixen exemples pràctics amb eines com Replet i WindSurf, i es destaca la necessitat de crear un document de requisits del producte (PRD) per guiar el procés de desenvolupament. A més, es proporcionen consells per millorar l'experiència de vibe coding i es menciona la importància d'aprendre sobre STEM a través de plataformes com Brilliant.

Takeaways

  • 💡 Vibe coding és una nova forma de programar basada en la intuïció.
  • 📝 Crear un document de requisits del producte (PRD) és essencial.
  • 🔧 Conèixer els marcs de treball millora els resultats del vibe coding.
  • 🔄 El control de versions és crucial per evitar pèrdues de treball.
  • 🛠️ La depuració és tan important com la construcció mateixa.
  • 📊 Començar amb un producte mínim viable (MVP) és una bona estratègia.
  • 🔍 Proporcionar context detallat ajuda a l'IA a entendre millor les necessitats.
  • 📚 Aprendre sobre STEM pot millorar les habilitats de programació.
  • 🤖 Utilitzar eines com Replet facilita el procés de vibe coding.
  • 🌐 Brilliant és una plataforma recomanada per aprendre STEM.

Garis waktu

  • 00:00:00 - 00:05:00

    En aquest vídeo, l'autor comparteix la seva experiència amb el 'vibe coding', un nou enfocament per a la programació que canvia la manera de desenvolupar aplicacions. Es presenten els fonaments, els principis i les eines necessàries per aplicar aquesta tècnica, amb l'objectiu d'estalviar temps i esforç en el procés de codificació.

  • 00:05:00 - 00:10:00

    El 'vibe coding' es defineix com un enfocament que permet als programadors comunicar-se amb models de llenguatge per crear aplicacions sense haver de codificar manualment. L'autor destaca la importància de pensar a través de quatre nivells de pensament per definir clarament el que es vol construir, incloent pensament lògic, analític, computacional i procedimental.

  • 00:10:00 - 00:15:00

    Es presenten cinc habilitats fonamentals del 'vibe coding': pensar, estructures, punts de control, depuració i context. L'autor explica que és essencial pensar a fons en el que es vol construir i comunicar-ho clarament a l'IA, utilitzant documents de requisits de producte (PRD) per definir les necessitats del projecte.

  • 00:15:00 - 00:20:00

    L'autor proporciona exemples de com crear un PRD per a un sistema d'alimentació personalitzat per a diabètics, mostrant com cada nivell de pensament s'aplica a la definició del projecte. Es destaca la importància de ser detallat i clar en la comunicació amb l'IA per obtenir millors resultats.

  • 00:20:00 - 00:25:00

    Es discuteix la importància de conèixer les estructures i els marcs de treball disponibles per a la construcció d'aplicacions, així com la necessitat de tenir punts de control i control de versions per evitar la pèrdua de treball. L'autor ofereix una introducció a Git i GitHub com a eines essencials per al control de versions.

  • 00:25:00 - 00:33:22

    Finalment, l'autor comparteix consells pràctics per a la depuració i la importància de proporcionar context a l'IA. Es presenten exemples de com utilitzar Replet i Windserve per a la codificació, així com la importància de començar amb un producte mínim viable i iterar a partir d'ell.

Tampilkan lebih banyak

Peta Pikiran

Video Tanya Jawab

  • Què és el vibe coding?

    El vibe coding és un nou enfocament de programació que implica comunicar-se amb models de llenguatge per construir aplicacions de manera intuïtiva.

  • Quins són els principis fonamentals del vibe coding?

    Els principis inclouen pensar a fons sobre el que es vol construir, conèixer els marcs de treball, tenir punts de control, depurar i proporcionar context.

  • Com es pot aplicar el vibe coding amb eines com Replet?

    Es pot utilitzar Replet per crear aplicacions ràpidament, aprofitant la seva interfície amigable i les funcions d'IA.

  • Quina és la importància del document de requisits del producte (PRD)?

    El PRD ajuda a definir clarament el que es vol construir, facilitant la comunicació amb l'IA.

  • Quines eines es recomanen per al control de versions?

    Es recomana utilitzar Git i GitHub per gestionar el control de versions dels projectes.

  • Quina és la millor manera de depurar errors en el vibe coding?

    La millor manera és identificar el problema i comunicar-lo a l'IA, que pot suggerir solucions.

  • Quin consell es dóna per a principiants en vibe coding?

    Començar amb un producte mínim viable (MVP) i després afegir funcionalitats addicionals.

  • Quines són les dues modes en què es pot estar durant el vibe coding?

    Les dues modes són implementar una nova funcionalitat o depurar errors.

  • Com es pot millorar la comunicació amb l'IA durant el vibe coding?

    Proporcionant context detallat i informació rellevant sobre el projecte.

  • Quina plataforma es recomana per aprendre STEM?

    Brilliant és una plataforma recomanada per aprendre STEM de manera interactiva.

Lihat lebih banyak ringkasan video

Dapatkan akses instan ke ringkasan video YouTube gratis yang didukung oleh AI!
Teks
en
Gulir Otomatis:
  • 00:00:00
    I learned how to vibe code for you. So,
  • 00:00:02
    here's the cliffnotes version to save
  • 00:00:03
    you the hundreds, actually probably at
  • 00:00:06
    this point thousands of hours I have
  • 00:00:08
    spent watching YouTube tutorials, taking
  • 00:00:10
    courses, but honestly, mostly just like
  • 00:00:13
    trial and error as I'm developing my own
  • 00:00:15
    applications through vibe coding. Vibe
  • 00:00:17
    coding is seriously a gamecher and has
  • 00:00:20
    fundamentally changed the way that I
  • 00:00:22
    code and develop apps. Which is why in
  • 00:00:24
    this video I'm going to be focusing on
  • 00:00:25
    the fundamentals, the frameworks and the
  • 00:00:27
    principles of good vibe coding. Then
  • 00:00:30
    I'll also teach you how to apply these
  • 00:00:31
    principles of vibe coding with any tool.
  • 00:00:33
    As per usual, it is not enough just to
  • 00:00:35
    listen to me talk about stuff. So
  • 00:00:36
    throughout this video, there'll be
  • 00:00:37
    little assessments. And if you can
  • 00:00:39
    answer these questions, then
  • 00:00:40
    congratulations. You would be educated
  • 00:00:42
    on vibe coding fundamentals. Now,
  • 00:00:44
    without further ado, let's get going. A
  • 00:00:46
    portion of this video is sponsored by
  • 00:00:48
    Brilliant. All right, here's the outline
  • 00:00:50
    of today's video. First, I'm going to
  • 00:00:52
    define vibe coding. Then we're going to
  • 00:00:53
    be talking about the principles of good
  • 00:00:55
    vibe coding. I'll then show you some
  • 00:00:56
    examples of vibe coding in action using
  • 00:00:58
    Replet Windsurf. Then finally, I'll end
  • 00:01:01
    with some very practical tips to help
  • 00:01:02
    you along your vibe coding journey and
  • 00:01:04
    to make sure that you don't end up as
  • 00:01:06
    one of these people from X and Reddit
  • 00:01:08
    who really up. I do not want that
  • 00:01:10
    for you. So, please pay attention until
  • 00:01:12
    the end. Let's now define vibe coding.
  • 00:01:14
    I'm sure many of you have heard the term
  • 00:01:15
    vibe coding a lot of times by now. And
  • 00:01:17
    this is a term that was coined by Andre
  • 00:01:18
    Kaparthy who among many of his
  • 00:01:20
    achievements is one of the founding
  • 00:01:22
    members of OpenAI. On February 3rd,
  • 00:01:24
    2025, he made a post on X that says,
  • 00:01:28
    "There's a new kind of coding I call
  • 00:01:30
    vibe coding where you fully give into
  • 00:01:32
    the vibes. Embrace exponentials and
  • 00:01:34
    forget that the code even exists." It's
  • 00:01:36
    possible because the LMS's, for example,
  • 00:01:38
    Cursor Composer with Sonnet are getting
  • 00:01:40
    too good. You basically just tell the LM
  • 00:01:42
    what it is that you want to build and it
  • 00:01:43
    would just go ahead and build it for you
  • 00:01:45
    and some people literally just speak to
  • 00:01:46
    it like talk to it. Also, I just talked
  • 00:01:48
    to Composer with super whispers. I
  • 00:01:50
    barely even touched the keyboard. For
  • 00:01:51
    example, you can just prompt it with
  • 00:01:52
    something like create a simple React web
  • 00:01:54
    app called Daily Vibes. Users can select
  • 00:01:56
    a mood from a list of emojis.
  • 00:01:58
    Optionally, write a short note and
  • 00:02:00
    submit it. Below, show a list of past
  • 00:02:02
    mood entries with the date and a note.
  • 00:02:04
    And yeah, that's it. Give it to the LM
  • 00:02:05
    and it generates the code for you. And
  • 00:02:07
    voila, that's what you get. Seems very,
  • 00:02:09
    very simple. Crazy, right? You can see
  • 00:02:11
    how it fundamentally changes the way
  • 00:02:13
    that you code and and build things. But
  • 00:02:16
    with that being said though, it's not
  • 00:02:17
    like black magic and vibe coding will
  • 00:02:19
    magically just work for everything.
  • 00:02:20
    There are still principles and order in
  • 00:02:22
    this chaos in how it is you ask it to
  • 00:02:25
    build these things. So without further
  • 00:02:27
    ado, let's actually cover these
  • 00:02:29
    principles. The best course that I found
  • 00:02:31
    that covers the principles, the
  • 00:02:33
    fundamentals of vibe coding is a course
  • 00:02:35
    called Vibe Coding 101 with Replet. It's
  • 00:02:38
    a nice little free course that's created
  • 00:02:39
    by Replet, which is a platform for vibe
  • 00:02:41
    coding apps in collaboration with deep
  • 00:02:43
    learning AI. The course explains that
  • 00:02:45
    there are five fundamental skills in
  • 00:02:46
    vibe coding, which are thinking,
  • 00:02:48
    frameworks, checkpoints, debugging, and
  • 00:02:50
    context. You need to thoroughly think
  • 00:02:51
    through exactly what it is that you want
  • 00:02:53
    to build and then communicate that with
  • 00:02:55
    the AI. What we mean by think thoroughly
  • 00:02:57
    is actually four different levels of
  • 00:02:58
    thinking. Say, for example, you want to
  • 00:03:00
    program a computer to play competitive
  • 00:03:02
    chess. The first two levels of thinking
  • 00:03:03
    are probably really obvious and it's
  • 00:03:05
    just like very intuitive to you. Logical
  • 00:03:06
    thinking is just what is the game and in
  • 00:03:08
    this case the game is chess. The next
  • 00:03:10
    level analytical thinking is asking the
  • 00:03:12
    question how do I play this game? What
  • 00:03:13
    is the main objective the goal of the
  • 00:03:15
    game? Now the third level is
  • 00:03:17
    computational thinking. You need to
  • 00:03:18
    figure out how to fit the logic of this
  • 00:03:20
    game into a complicated set of problems
  • 00:03:22
    and configurations on the chessboard.
  • 00:03:24
    You also need to think about how do you
  • 00:03:25
    enforce these rules. And finally at the
  • 00:03:28
    top level of thinking is procedural
  • 00:03:30
    thinking. This is when you ask the
  • 00:03:31
    question how do I excel in this game?
  • 00:03:33
    Not only do you want to play this game,
  • 00:03:35
    you want to play it well. So, you need
  • 00:03:36
    to think about what are some strategies
  • 00:03:38
    that you can use. What are the
  • 00:03:40
    boundaries that you can push so that
  • 00:03:41
    you're able to program your computer to
  • 00:03:43
    be able to do well at the game. Then, of
  • 00:03:45
    course, you need to translate this
  • 00:03:46
    natural language that we described and
  • 00:03:48
    communicate that to the AI to build.
  • 00:03:50
    Now, for whatever it is that you're
  • 00:03:51
    trying to build, a game, a web app,
  • 00:03:53
    whatever, you also need to go through
  • 00:03:54
    these four levels of thinking to truly
  • 00:03:56
    properly define what it is that you want
  • 00:03:58
    to build. Honestly, this is where most
  • 00:03:59
    vibe coders have the most opportunity
  • 00:04:01
    for improvement. Because oftent times
  • 00:04:03
    because you're using natural language
  • 00:04:05
    just to describe what you want to do,
  • 00:04:07
    you don't really actually think through
  • 00:04:08
    what it is that you want to build, what
  • 00:04:10
    it is that you want your final product
  • 00:04:11
    to look like. And that's actually kind
  • 00:04:13
    of unfair because if you don't even
  • 00:04:14
    think through exactly what it is that
  • 00:04:16
    you want, how do you expect the AI to be
  • 00:04:18
    able to figure out what it is that you
  • 00:04:19
    want built? And actually, the best way
  • 00:04:21
    to make sure that you go through each of
  • 00:04:23
    these levels of thinking and communicate
  • 00:04:25
    it clearly to the AI is to create
  • 00:04:27
    something called a PRD, which is a
  • 00:04:29
    product requirements document. This is
  • 00:04:30
    an actual PRD that we defined with one
  • 00:04:32
    of our clients. It is an AI powered
  • 00:04:34
    personalized nutrition plan for
  • 00:04:36
    diabetes. Level one of thinking which is
  • 00:04:38
    logical thinking defining what it is
  • 00:04:39
    that we want to build. So this is as
  • 00:04:41
    part of the project overview. We wrote
  • 00:04:43
    that the goal of this project is to
  • 00:04:44
    develop an AI powered system that
  • 00:04:46
    creates personalized nutrition plans for
  • 00:04:48
    individuals with diabetes. The system
  • 00:04:49
    will take into account various health
  • 00:04:51
    related factors such as medical
  • 00:04:52
    analyses, weight, dietary habits,
  • 00:04:54
    calorie consumption and more. The next
  • 00:04:56
    level of thinking, the analytical
  • 00:04:57
    thinking is encompassed by the skills
  • 00:05:00
    section. So this is where you list out
  • 00:05:02
    what it is that you need in order to
  • 00:05:04
    build the thing that you want to build.
  • 00:05:05
    In this case, we wrote Python,
  • 00:05:07
    healthcare data processing, open AIS
  • 00:05:08
    API, image processing for visual plans,
  • 00:05:11
    and UI development. You can you can also
  • 00:05:13
    go into more detail about this if you
  • 00:05:14
    want if you're very if you're more
  • 00:05:16
    particular about which specific packages
  • 00:05:18
    you want to use, which kind of front
  • 00:05:19
    end, which kind of backend that you want
  • 00:05:21
    to use, but this is good enough to
  • 00:05:22
    start. For computational thinking, I
  • 00:05:24
    like to express this by having a key
  • 00:05:26
    features section in the PRD. This is
  • 00:05:30
    where we can clearly define and have a
  • 00:05:32
    plan based upon what we want to show up
  • 00:05:34
    in the application. Here we have it
  • 00:05:36
    divided into milestone one and milestone
  • 00:05:38
    2. The first one is a generalized
  • 00:05:40
    personalized nutrition plan engine that
  • 00:05:41
    includes specific metrics like
  • 00:05:42
    individual health metrics and
  • 00:05:44
    socioeconomic factors. The level two is
  • 00:05:46
    where we want to give more contextual
  • 00:05:47
    customization specifically considering
  • 00:05:50
    people's literacy and education levels
  • 00:05:52
    and making the application adaptable um
  • 00:05:55
    and more accessible to different types
  • 00:05:56
    of people for example people with lower
  • 00:05:58
    literacy. Now for procedural thinking
  • 00:06:00
    the highest level of thinking thinking
  • 00:06:02
    about how do we make this application
  • 00:06:05
    the best that it can be this is
  • 00:06:06
    exemplified throughout the PRD just by
  • 00:06:09
    adding as much detail as possible. For
  • 00:06:11
    example, defining exactly which factors
  • 00:06:14
    like individual health metrics like
  • 00:06:16
    medical analyses and dietary intake data
  • 00:06:18
    and socioeconomic factors such as income
  • 00:06:20
    location and local food availability as
  • 00:06:23
    well as what types of contextual
  • 00:06:24
    customization. But the best way to think
  • 00:06:26
    about it is the more detail you can go
  • 00:06:28
    into thinking about your target
  • 00:06:30
    audience, who you want to be using your
  • 00:06:31
    application and that experience that
  • 00:06:33
    they should get and all the factors that
  • 00:06:35
    go into it to make it the best
  • 00:06:37
    experience possible. the clearer your
  • 00:06:38
    vision is and the clearer the PRD is and
  • 00:06:40
    the better results you will get from the
  • 00:06:42
    AI. Also, just by the way, you don't
  • 00:06:43
    need to come up with this PRD all by
  • 00:06:45
    yourself. Um, I'm actually going to put
  • 00:06:47
    like a prompt on screen right now. Feel
  • 00:06:49
    free to take a screenshot of this. This
  • 00:06:51
    prompt will work with you and ask you
  • 00:06:52
    the right questions for you to be able
  • 00:06:54
    to come up with a well-defined PRD to
  • 00:06:57
    build your app. I highly recommend that
  • 00:06:58
    you spend a significant amount of time
  • 00:07:00
    at this section. It is always so much
  • 00:07:02
    easier to have a clearer vision of what
  • 00:07:03
    you want as opposed to build something,
  • 00:07:05
    figure out that it's not exactly what
  • 00:07:07
    you want, and then try to fix it
  • 00:07:08
    halfway. The next principle of vibe
  • 00:07:09
    coding is to know your frameworks,
  • 00:07:12
    whatever it is that you want to build,
  • 00:07:13
    chances are somebody has already built
  • 00:07:15
    something like it or something very,
  • 00:07:17
    very similar to what it is that you're
  • 00:07:18
    trying to accomplish. And since AI is
  • 00:07:20
    trained on all the pre-existing
  • 00:07:21
    solutions that are already available, if
  • 00:07:23
    you're able to direct the AI towards the
  • 00:07:26
    correct framework for building what you
  • 00:07:27
    want to build, you're going to have much
  • 00:07:29
    better results than asking it to just
  • 00:07:31
    try its best to come up with something
  • 00:07:33
    from scratch. And the easiest way to do
  • 00:07:34
    this in vibe coding is just to list out
  • 00:07:37
    the frameworks or the packages that you
  • 00:07:39
    want the AI to use to implement the
  • 00:07:41
    solution that you want. You're kind of
  • 00:07:42
    just like pointing it in the right
  • 00:07:44
    direction. For example, for your web
  • 00:07:45
    app, you can specify that you wanted to
  • 00:07:47
    use a React backend and a CSS and HTML
  • 00:07:50
    JavaScript front end and specifically
  • 00:07:52
    maybe Tailwind CSS for the styling for
  • 00:07:54
    this specific type of application. Or
  • 00:07:56
    say that you want to be creating
  • 00:07:57
    animations, you can specifically say
  • 00:07:59
    please use 3.js which is a very popular
  • 00:08:02
    package for creating animations. Okay,
  • 00:08:05
    so the question you might be thinking
  • 00:08:06
    right now is like Tina, but what if I
  • 00:08:08
    don't know what is the best way of
  • 00:08:10
    implementing this thing? No problem. You
  • 00:08:12
    can actually ask AI to help you figure
  • 00:08:14
    it out first. For example, if you want
  • 00:08:15
    to implement a drag and drop UI, which
  • 00:08:17
    is a very common thing to implement, you
  • 00:08:19
    could say, could you help me come up
  • 00:08:20
    with some React frameworks to implement
  • 00:08:22
    drag and drop into this application and
  • 00:08:23
    then implement it. What is actually the
  • 00:08:25
    key thing here is to be open to learning
  • 00:08:28
    about these different frameworks and how
  • 00:08:30
    all of these components fit together.
  • 00:08:31
    With vibe coding, it's not necessary for
  • 00:08:33
    you to exactly know how to implement
  • 00:08:34
    each of these things yourself, but it's
  • 00:08:37
    still really important to have an
  • 00:08:38
    understanding of the structure of what
  • 00:08:41
    it is that you're trying to build. Like
  • 00:08:42
    if you're making a web application, at
  • 00:08:44
    the very minimum, you should be aware of
  • 00:08:46
    what a front end is, what a backend is,
  • 00:08:48
    how the front end and backend
  • 00:08:49
    communicate with each other, and what
  • 00:08:51
    are certain frameworks that are very
  • 00:08:52
    popular or commonly used for the front
  • 00:08:54
    end and the back end. Think about it as
  • 00:08:56
    building and developing and learning
  • 00:08:58
    with the AI at the same time. This will
  • 00:08:59
    make you a much better vibe coder in the
  • 00:09:02
    long run. The next principle of vibe
  • 00:09:04
    coding is to always have checkpoints and
  • 00:09:06
    version control. Things will break. That
  • 00:09:08
    is a fact. You do not want to end up
  • 00:09:10
    like this guy, for example, who lost all
  • 00:09:12
    of his work because he did not know
  • 00:09:13
    about version control. It is a
  • 00:09:15
    cautionary tale. He posted on X, "Today
  • 00:09:17
    was the worst day ever. The project I
  • 00:09:19
    had been working on for the last 2 weeks
  • 00:09:21
    got corrupted and everything was lost.
  • 00:09:23
    Just like that, my SAS was gone. Two
  • 00:09:25
    weeks of hard work completely ruined.
  • 00:09:27
    But I mean he is trying to stay positive
  • 00:09:29
    here. He started from scratch. Blah blah
  • 00:09:30
    blah. He's going to rebuild everything
  • 00:09:32
    from cursor. So you know at least he's
  • 00:09:33
    remaining positive. But anyways the
  • 00:09:34
    point being that please always have
  • 00:09:36
    version control. There are some software
  • 00:09:38
    like replet for example that has pretty
  • 00:09:39
    decent version control that's already
  • 00:09:41
    built in. But for the majority of
  • 00:09:43
    software and it's just like generally
  • 00:09:44
    best practice is to learn how to use git
  • 00:09:46
    and github which I'm actually going to
  • 00:09:48
    give you a crash course on right now. If
  • 00:09:50
    you already know how to use git and
  • 00:09:51
    github consider this a quick little
  • 00:09:53
    refresh. So first of all git is the
  • 00:09:55
    version control software itself. While
  • 00:09:57
    GitHub is a website that allows you to
  • 00:09:58
    store your code, your repositories on
  • 00:10:00
    the cloud so that you're able to have
  • 00:10:02
    it, you know, saved somewhere else and
  • 00:10:04
    also so that you can share it with other
  • 00:10:05
    people. So, first you need to install
  • 00:10:06
    git and you can do this by either
  • 00:10:08
    downloading it from the website or you
  • 00:10:09
    can go through your terminal/comand line
  • 00:10:11
    or honestly you can just ask your AI
  • 00:10:14
    code editor software whether that be
  • 00:10:16
    like
  • 00:10:16
    replic whatever and just directly say
  • 00:10:19
    like please download git for me. Now
  • 00:10:21
    assuming that you want to start a new
  • 00:10:22
    project from scratch and you're in that
  • 00:10:24
    current folder the command that you want
  • 00:10:25
    to use is get init which is initializing
  • 00:10:28
    git. Now let's say you start adding some
  • 00:10:30
    things you might want to add a readme
  • 00:10:31
    where you know you just start like vibe
  • 00:10:32
    coding and now you have a bunch of files
  • 00:10:34
    that are there. And if you use this
  • 00:10:35
    command get status it will show that you
  • 00:10:37
    have a lot of files that are unttracked.
  • 00:10:39
    So in order to track these files you use
  • 00:10:41
    the command git add. You can do get add
  • 00:10:44
    like readme.md or whatever files that
  • 00:10:46
    you want to start tracking. Or you can
  • 00:10:48
    just do get add with a dot. The dot
  • 00:10:50
    means just track everything. But you're
  • 00:10:52
    not done with just adding these files
  • 00:10:53
    and tracking these files. When you
  • 00:10:55
    actually want to save a certain version
  • 00:10:56
    of it, you use the command git commit.
  • 00:10:58
    This is where you would explicitly
  • 00:11:00
    commit the changes that you made to the
  • 00:11:02
    files. And you can also type a message
  • 00:11:03
    that explains what you changed in the
  • 00:11:05
    codebase or otherwise known as the
  • 00:11:07
    repository. For example, your first
  • 00:11:09
    commit could be git commit-m with
  • 00:11:11
    initial commit as the comment. And
  • 00:11:13
    that's it. Actually, if you just do
  • 00:11:14
    this, you would be tracking your
  • 00:11:16
    changes, saving your changes by
  • 00:11:18
    committing it. And you just keep on
  • 00:11:19
    doing that. And if you ever want to look
  • 00:11:20
    at the changes that you made, you can
  • 00:11:22
    use a command called get log. And if you
  • 00:11:24
    want to roll back a commit, then it's
  • 00:11:25
    git reset. Okay. So after you made a
  • 00:11:27
    bunch of changes, did all your things,
  • 00:11:28
    and maybe you want to share your code
  • 00:11:30
    now on GitHub. You can go to github.com,
  • 00:11:32
    create a new repository, and initiate
  • 00:11:34
    it. Copy the remote URL, then use the
  • 00:11:36
    command get remote at origin, and then
  • 00:11:38
    the URL. This will link your local repo
  • 00:11:40
    that's being saved on your computer to
  • 00:11:42
    GitHub. Then you might want to rename
  • 00:11:44
    your branch, which is the current
  • 00:11:46
    repository version that you're working
  • 00:11:47
    with and call it main. So you can do git
  • 00:11:50
    branch- m main. Then finally, you can
  • 00:11:53
    push everything from your local
  • 00:11:54
    repository onto GitHub with the command
  • 00:11:56
    git push- origin main. There are
  • 00:11:59
    obviously like a lot of other little
  • 00:12:01
    nuances and commands and like things
  • 00:12:02
    like that um specifics that you can go
  • 00:12:04
    into a lot more detail about, but just
  • 00:12:07
    knowing what I explained to you that
  • 00:12:08
    entire workflow, that should be enough
  • 00:12:10
    for you to have a good understanding of
  • 00:12:12
    what version control is supposed to look
  • 00:12:13
    like and what the flow is supposed to
  • 00:12:14
    look like. And even though I did cover
  • 00:12:16
    the exact commands that you should be
  • 00:12:18
    inputting using an AI code editor, you
  • 00:12:19
    actually don't need to know these exact
  • 00:12:21
    commands. Like as long as you know what
  • 00:12:23
    that structure is, you can just directly
  • 00:12:24
    ask the AI using natural language. like
  • 00:12:27
    you can just say um use git to commit
  • 00:12:29
    these changes, push it to GitHub on this
  • 00:12:31
    branch, roll back the previous version,
  • 00:12:33
    merge everything together. I hope that
  • 00:12:35
    makes sense. Overall, I hope you can
  • 00:12:36
    also see that the key to vibe coding is
  • 00:12:39
    to understand these like highle
  • 00:12:41
    structures, these highle components and
  • 00:12:43
    the flows of things so that you're able
  • 00:12:45
    to direct the AI in the implementation.
  • 00:12:47
    Implementation is where AI excels at.
  • 00:12:50
    The next important skill of vibe coding
  • 00:12:52
    is debugging. Whatever it is that you're
  • 00:12:54
    building is going to go wrong. It's just
  • 00:12:55
    a matter of when it's going to go wrong
  • 00:12:57
    and how it's going to go wrong. Which is
  • 00:12:58
    why debugging and fixing the thing is
  • 00:13:00
    just as important as the actual building
  • 00:13:02
    itself. This is a skill that is drilled
  • 00:13:04
    into engineers with many many years of
  • 00:13:06
    training. But for many vibe coders
  • 00:13:08
    though, especially those who don't have
  • 00:13:09
    an engineering or coding background,
  • 00:13:11
    debugging might be something that they
  • 00:13:13
    don't actually have a lot of experience
  • 00:13:14
    in. And it's very important to learn
  • 00:13:16
    this skill. The best type of debugging
  • 00:13:18
    is very methodical and thorough. First,
  • 00:13:20
    you need to identify where the problem
  • 00:13:22
    is and what the problem is. then you
  • 00:13:23
    need to apply different solutions to try
  • 00:13:25
    to fix the problem. Sounds super simple,
  • 00:13:27
    right? But do not underestimate the art
  • 00:13:29
    of debugging. In the case of vibe
  • 00:13:31
    coding, when you realize that something
  • 00:13:32
    doesn't work, um I actually find that
  • 00:13:34
    the best way is to just point it out to
  • 00:13:37
    the AI and then let the AI come up with
  • 00:13:39
    the solutions to fix it itself. For
  • 00:13:41
    example, I recently did this live stream
  • 00:13:42
    where I was building this application
  • 00:13:44
    and then it kept on coming up with an
  • 00:13:46
    error. I basically just copy pasted the
  • 00:13:47
    error message and went like there is an
  • 00:13:49
    error and the AI responded with like oh
  • 00:13:51
    let me try to fix it. and then it comes
  • 00:13:52
    up with like different solutions to try
  • 00:13:54
    to fix the problem. And really all you
  • 00:13:55
    have to do often times is just to accept
  • 00:13:57
    the changes and if it still doesn't work
  • 00:13:58
    it might just go through like a lot of
  • 00:13:59
    cycles of this. Just got to be patient
  • 00:14:01
    and just you know keep pointing it out
  • 00:14:03
    letting it do its thing and often times
  • 00:14:05
    it resolves itself but in the off chance
  • 00:14:07
    that it doesn't resolve itself easily.
  • 00:14:09
    It is really really helpful to have a
  • 00:14:11
    basic understanding of what you're
  • 00:14:13
    building. Like for example, I kept on
  • 00:14:14
    getting the same error over and over
  • 00:14:15
    again. But since I understand file
  • 00:14:17
    structures and how the files are working
  • 00:14:18
    with each other, I was able to point out
  • 00:14:20
    which file was probably causing the
  • 00:14:22
    problem and which section was probably
  • 00:14:24
    causing the problem and the AI was able
  • 00:14:26
    to go and fix it. Another example was
  • 00:14:28
    when I got this overlapping UI component
  • 00:14:31
    which I didn't like. I was like this
  • 00:14:32
    thing is overlapping. I sent it to the
  • 00:14:34
    AI and then it like made some weird
  • 00:14:35
    changes and the whole thing just
  • 00:14:36
    disappeared. And then I was very patient
  • 00:14:38
    and was more specific about exactly what
  • 00:14:40
    it is that I wanted. And looking at the
  • 00:14:42
    code, I could tell that it was just
  • 00:14:43
    statically trying to input like a
  • 00:14:45
    certain dimension so that depending on
  • 00:14:47
    the orientation of the website,
  • 00:14:50
    sometimes it would overlap and sometimes
  • 00:14:51
    it wouldn't. And then I just pointed out
  • 00:14:52
    that I needed to be dynamic so that it's
  • 00:14:54
    not overlapping at any point. And then
  • 00:14:56
    fortunately, it was then able to fix it.
  • 00:14:58
    And finally, the last principle of vibe
  • 00:15:01
    coding is to provide context. The
  • 00:15:03
    general rule of thumb is that the more
  • 00:15:05
    context, as in the more information and
  • 00:15:08
    detail that you can provide to your AI,
  • 00:15:10
    to your LM, the better the results are
  • 00:15:12
    going to be. And context can come in a
  • 00:15:14
    lot of different forms. It could be that
  • 00:15:16
    the original prompt or the PRD that
  • 00:15:18
    you're inputting has a lot of details in
  • 00:15:19
    it. You can even provide it with like
  • 00:15:21
    mockups of what exactly you want it to
  • 00:15:23
    look like. Or you can be providing it
  • 00:15:24
    with examples or extra data that can
  • 00:15:26
    help it build the application. Details
  • 00:15:28
    about your app, your environment, your
  • 00:15:30
    preferences, as well as errors. Instead
  • 00:15:32
    of just saying this thing doesn't work,
  • 00:15:33
    you can actually copy paste the full
  • 00:15:35
    error message and a screenshot of what
  • 00:15:38
    exactly doesn't work and provide that to
  • 00:15:40
    the AI. Okay, so here's a little
  • 00:15:41
    pneummonic that can help you potentially
  • 00:15:43
    remember these principles of vibe coding
  • 00:15:45
    better. The friendly cat dances
  • 00:15:47
    constantly thinking frameworks,
  • 00:15:49
    checkpoints, debugging, and context,
  • 00:15:51
    which immediately comes in handy for you
  • 00:15:53
    now because here's also your little
  • 00:15:55
    assessment, which I'm going to put on
  • 00:15:57
    screen right now. Please answer these
  • 00:15:59
    questions and put them in the comments
  • 00:16:00
    to make sure that you're following along
  • 00:16:02
    with the things I am talking about. I'm
  • 00:16:05
    now going to show you some examples of
  • 00:16:06
    vibe coding starting with Replet. Replet
  • 00:16:08
    is a platform where you can use AI to
  • 00:16:10
    vibe code different applications and
  • 00:16:12
    deploy them really really quickly all on
  • 00:16:14
    the cloud. It is super beginner
  • 00:16:16
    friendly. All you have to do is log on
  • 00:16:17
    to Replet and they have some free
  • 00:16:19
    credits that you can get started with.
  • 00:16:20
    Let's start off with the PRD for a very
  • 00:16:22
    simple app that displays SEO metatags
  • 00:16:24
    for any website that is inputed. Okay,
  • 00:16:26
    so to get started, the first thing I'm
  • 00:16:28
    going to do is actually use chatgbt to
  • 00:16:31
    help me really think about what I want
  • 00:16:34
    this application to look like and
  • 00:16:36
    generate a PRD for it. And I'm going to
  • 00:16:38
    use this prompt over here, which is a
  • 00:16:40
    variation of the prompt that I showed
  • 00:16:43
    you guys earlier. And I'll also link an
  • 00:16:45
    example PRD for chatt. So it just says,
  • 00:16:48
    help me to make a PRD for an MVP app.
  • 00:16:50
    I'm looking to vibe code. So, an
  • 00:16:52
    interactive app that displays the SEO
  • 00:16:53
    metatags for any website in an
  • 00:16:55
    interactive visual way to check that
  • 00:16:56
    they're properly implemented. The app
  • 00:16:58
    should fetch the HTML for a site, then
  • 00:16:59
    provide feedback and SEO tags in
  • 00:17:01
    accordance with best practices for SEO
  • 00:17:03
    optimization. The app should give Google
  • 00:17:04
    and social media previews. And then
  • 00:17:06
    thinking through these questions, what
  • 00:17:08
    is this app? How do I use the app? What
  • 00:17:09
    are the patterns behind the app? And how
  • 00:17:10
    do I make the app the most useful for
  • 00:17:12
    the target audience? And including a PRD
  • 00:17:15
    example here. And it helps us generate
  • 00:17:17
    this. So, SEO tag, visual inspector,
  • 00:17:20
    MVP, PRD, project overview, and it shows
  • 00:17:23
    all of the key features that are here.
  • 00:17:26
    So, input URL field, HTML fetching and
  • 00:17:28
    parsing, SEO tag extraction, and visual
  • 00:17:30
    feedback previews. And there's also a
  • 00:17:33
    nice to have section. All of this looks
  • 00:17:36
    pretty good. I do want to have a key
  • 00:17:38
    feature of actually displaying the total
  • 00:17:40
    score out of 100. I also do want to get
  • 00:17:43
    rid of these nice to have haves over
  • 00:17:44
    here cuz it's always best to start off
  • 00:17:45
    with the very very key features and then
  • 00:17:47
    add on to that. So I'm going to ask it
  • 00:17:50
    to refine it with for key features.
  • 00:17:53
    Could you include a total score out of
  • 00:17:57
    100? Also remove nice to haves. Great.
  • 00:18:01
    So visual feedback is over here.
  • 00:18:04
    Awesome. So this looks pretty good to
  • 00:18:06
    me. So, I'm going to write is could you
  • 00:18:08
    make this into a prompt uh to build an
  • 00:18:13
    app using replet? So, that's what we're
  • 00:18:15
    going to use. Great. Wonderful. And on
  • 00:18:18
    top of this, I'm going to say generate a
  • 00:18:21
    image mockup or inspo. I'm going to
  • 00:18:24
    download this. Here is a replet. And
  • 00:18:26
    what I'm going to do is just copy paste
  • 00:18:28
    the prompt from chatbt and also link the
  • 00:18:33
    inspo and click start building. All
  • 00:18:36
    right, it's going to be called SEO Tag
  • 00:18:38
    Scout and it's asking me if I want these
  • 00:18:41
    like additional things that are here and
  • 00:18:43
    I'm just going to say no because we can
  • 00:18:45
    add these additional features later. So,
  • 00:18:47
    we can approve and get started. As it's
  • 00:18:49
    generating, you can see that it's
  • 00:18:50
    literally designing the visuals and it's
  • 00:18:52
    also populating the files over here as
  • 00:18:54
    well. So, for Replet, it already does
  • 00:18:57
    have pretty good um version control. You
  • 00:18:59
    can roll back pretty easily here.
  • 00:19:01
    Although for best practices, you still
  • 00:19:03
    really do want to be using Git at some
  • 00:19:05
    point. While it's finishing up building
  • 00:19:07
    everything over here, what I really
  • 00:19:08
    recommend that you do is you can go over
  • 00:19:10
    here and actually add an assistant and
  • 00:19:13
    use the assistant and ask, could you
  • 00:19:16
    explain to me the file structure in this
  • 00:19:19
    project? You don't have to do this, but
  • 00:19:21
    it's one of those things where if you're
  • 00:19:22
    learning about the frameworks that are
  • 00:19:24
    being used while you're vibe coding,
  • 00:19:26
    this is going to significantly improve
  • 00:19:28
    your skills as a vibe coder because
  • 00:19:29
    you're going to be able to understand
  • 00:19:30
    what's actually happening and how the
  • 00:19:32
    files are going to be interacting with
  • 00:19:33
    each other. We can see over here on the
  • 00:19:34
    client side under client, you have the
  • 00:19:36
    main React application code in the
  • 00:19:39
    source. So, client source and you can
  • 00:19:42
    see where the UI components are as well.
  • 00:19:44
    And on the server side, it tells you
  • 00:19:45
    where the main service entry points are
  • 00:19:47
    like index.ts. And here's the code for
  • 00:19:49
    that. And then roots and things like
  • 00:19:51
    that as well. Just understanding the
  • 00:19:53
    files over here and how they're
  • 00:19:54
    interacting with each other to produce
  • 00:19:55
    this completed app is already going to
  • 00:19:57
    give you a huge leg up. And if you
  • 00:19:59
    really want to dig into like some of the
  • 00:20:01
    actual code, you can always rightclick
  • 00:20:03
    over here and then you can say like
  • 00:20:05
    explain with assistant for example. This
  • 00:20:07
    is very very optional, but it is a
  • 00:20:08
    really really great way for you to learn
  • 00:20:11
    um what the code is actually doing if
  • 00:20:13
    you're interested. All right, it looks
  • 00:20:14
    like our app is now finished. Let's
  • 00:20:16
    actually test this out. So, let's try
  • 00:20:19
    ww.lonely
  • 00:20:21
    octopus.com. Check. Uhoh, that didn't
  • 00:20:24
    work. So, what I'm going to do
  • 00:20:28
    is there is an error like a true vibe
  • 00:20:32
    coder. We're going to hope that it fixes
  • 00:20:34
    itself. Okay, let's try testing it out
  • 00:20:36
    again. Lonely
  • 00:20:38
    octopus.com. And cool, it seems to be
  • 00:20:40
    showing something. the title, shorter
  • 00:20:43
    than recommended, meta description, blah
  • 00:20:45
    blah blah, all of these things. And we
  • 00:20:47
    can see that here's the Google preview,
  • 00:20:49
    here's the social media preview, Twitter
  • 00:20:51
    card previews, and raw data tags. Okay,
  • 00:20:54
    so I just want to make sure that the
  • 00:20:56
    like number actually changes depending
  • 00:20:57
    on the website. So let's try something
  • 00:20:59
    else like the website called the useless
  • 00:21:02
    website.com. Okay, so it's also still
  • 00:21:04
    showing 86. What about this other
  • 00:21:07
    website? Okay. All right. So the number
  • 00:21:09
    is changing depending on what it is.
  • 00:21:12
    It's like this is not visually
  • 00:21:15
    appealing. Make it colorful. Yeah, make
  • 00:21:19
    it colorful. I also don't like how the
  • 00:21:21
    raw data tags are here, but it's not
  • 00:21:23
    specifically specifying like what the
  • 00:21:26
    title is sort of the recommend like what
  • 00:21:28
    is the actual title. Like I want that to
  • 00:21:29
    be showcased and I'm going to do that in
  • 00:21:30
    the next round of edits here. Another
  • 00:21:32
    key thing to remember is that it's best
  • 00:21:34
    to when you're pointing something out,
  • 00:21:36
    like something that you want to be
  • 00:21:37
    changed, doing it one at a time as
  • 00:21:39
    opposed to like a laundry list of things
  • 00:21:40
    that you want to change cuz that could
  • 00:21:41
    potentially confuse the AI. Oh, cool. I
  • 00:21:44
    guess it did that already without me
  • 00:21:45
    saying anything. Oh, and it's like
  • 00:21:46
    showing little icons. So, that's nice.
  • 00:21:50
    Okay, let's try this again. lonely
  • 00:21:52
    octopus.com. Okay, I like that. This is
  • 00:21:55
    much much better. Another thing that you
  • 00:21:57
    can do over here is that you can
  • 00:21:58
    actually click here and then there is a
  • 00:22:00
    dev URL that you can directly look at
  • 00:22:03
    from other devices as well. So all you
  • 00:22:05
    have to do is scan the QR code. So you
  • 00:22:07
    can actually see what it's like on other
  • 00:22:09
    devices too. So if I were to type lonely
  • 00:22:12
    octopus.com, you can see what that
  • 00:22:14
    experience looks like on mobile as well.
  • 00:22:17
    So this is a example of what it would
  • 00:22:19
    look like to be web coding using Replet.
  • 00:22:22
    And once you're done, you can take this
  • 00:22:24
    and deploy it when you want to. But if
  • 00:22:27
    you do want to create something that is
  • 00:22:28
    more complex and that's also more
  • 00:22:30
    scalable, you will at some point want to
  • 00:22:32
    migrate to a AI code editor, something
  • 00:22:34
    like Windsor for cursor. So I'm actually
  • 00:22:35
    just going to show you what that is like
  • 00:22:38
    um using Windinserve for example. First
  • 00:22:40
    of all, regardless of which of these
  • 00:22:42
    tools that you're using, the principles
  • 00:22:43
    that we just talked about for vibe
  • 00:22:44
    coding, like the skill set itself is
  • 00:22:46
    pretty much the same. So don't worry
  • 00:22:47
    about that. It's more the fact that
  • 00:22:48
    after you get through the beginner
  • 00:22:50
    stages, most people will want to switch
  • 00:22:51
    over to AI coding editor like cursor and
  • 00:22:53
    windsurf because it's more robust, has
  • 00:22:55
    more functionalities, and also allows
  • 00:22:57
    for greater scalability. Of course, with
  • 00:22:59
    these types of things, there's always a
  • 00:23:00
    trade-off. Like with Replet, it is a lot
  • 00:23:02
    faster, really easy to use. Everything
  • 00:23:04
    is based on the cloud. So, you don't
  • 00:23:05
    really have to deal with setting up your
  • 00:23:06
    environment and the deployment process.
  • 00:23:08
    While for cursor and windsurf, there are
  • 00:23:10
    a lot more functionalities that are
  • 00:23:11
    available. These code editors are built
  • 00:23:13
    for like full scale development. So
  • 00:23:15
    you're pretty much able to do any type
  • 00:23:17
    of development and be able to tweak
  • 00:23:19
    things and fine-tune things to the exact
  • 00:23:21
    way that you want it to look. Of course,
  • 00:23:23
    the downside is that there is a higher
  • 00:23:24
    learning curve. You need to learn how to
  • 00:23:26
    set up your environments properly, how
  • 00:23:27
    to debug issues with your environment. A
  • 00:23:29
    lot of issues come because of not
  • 00:23:31
    setting up your environment correctly.
  • 00:23:32
    You also need to learn how to deploy
  • 00:23:33
    things, how to monitor things over time.
  • 00:23:35
    So this is the wind surf environment and
  • 00:23:37
    over here is cascade where you can type
  • 00:23:40
    in what you want the app to build. In
  • 00:23:42
    this case we're using cloud 3.7 sonnet
  • 00:23:45
    as the model. So I'm actually going to
  • 00:23:47
    put in the exact same prompt and then
  • 00:23:49
    also the image as well on winds. This is
  • 00:23:52
    going to be a local development
  • 00:23:54
    environment. So it's going to start off
  • 00:23:55
    by setting up a bunch of things locally.
  • 00:23:58
    You can see that the files are
  • 00:24:00
    populating themselves over here as well.
  • 00:24:03
    All right. So this is running a terminal
  • 00:24:05
    command and we can accept this. It's you
  • 00:24:07
    can disable and the asking and you can
  • 00:24:10
    just let it auto run but I have trust
  • 00:24:11
    issues cuz it's on my local environment
  • 00:24:13
    instead of like rep play where it's in
  • 00:24:14
    its like own isolated thing on the web.
  • 00:24:16
    So I do like want to make sure that I am
  • 00:24:20
    accepting things and not doing random
  • 00:24:23
    things to my local environment. So I'm
  • 00:24:25
    just going to click accept to all of
  • 00:24:26
    these. You can see that it also takes a
  • 00:24:28
    little bit longer cuz it's setting up
  • 00:24:29
    all these environments and selling all
  • 00:24:30
    these packages and stuff. Um, all things
  • 00:24:33
    that don't need to be done if you're
  • 00:24:34
    using Replet. Okay, cool. It looks like
  • 00:24:37
    it has something done. It says, "Feel
  • 00:24:39
    free to try it on the browser preview
  • 00:24:40
    I've opened for you." Open the browser
  • 00:24:44
    preview. I don't see the browser
  • 00:24:48
    preview. Could you open it for me? Okay.
  • 00:24:51
    Open preview.
  • 00:24:54
    Cool. We see that it has some of these
  • 00:24:58
    very similar elements here. www.lonely
  • 00:25:01
    Lonely
  • 00:25:02
    octopus.com for example check. Oops.
  • 00:25:06
    Need to adding an
  • 00:25:08
    https. Okay, this actually looks way
  • 00:25:10
    better than replet's first version. I
  • 00:25:13
    got to say it actually looks really
  • 00:25:14
    really similar to the inspo that we
  • 00:25:16
    provided. It like here's the inspo that
  • 00:25:19
    we provided and here's the actual thing.
  • 00:25:21
    It looks really similar, right? Looks
  • 00:25:23
    pretty good. So SEO tag analysis. Yeah,
  • 00:25:26
    this looks pretty good to me. Let's try
  • 00:25:28
    something else.
  • 00:25:34
    maze.toys/mazes/min/aily. It's just like
  • 00:25:36
    a random website. Okay. SEO tag is 25.
  • 00:25:39
    So the numbers are actually different um
  • 00:25:41
    between Replet and Windfs. So that's
  • 00:25:43
    interesting. Something I probably want
  • 00:25:44
    to dig into asking like how it's
  • 00:25:47
    calculating these SEO tags. But overall
  • 00:25:49
    it looks like it's working pretty well.
  • 00:25:51
    And I quite like this. So I'm going to
  • 00:25:54
    ask it to change though. To improve on
  • 00:25:56
    this a little bit, I'm going to say edit
  • 00:25:59
    a screenshot here and be like make it so
  • 00:26:01
    that you don't need to type
  • 00:26:04
    https before the URL. Also, copy paste
  • 00:26:09
    is not enabled. Let's open a preview
  • 00:26:12
    again. So, try this again.
  • 00:26:15
    www.lonely
  • 00:26:16
    octopus.com. We also do need to center
  • 00:26:18
    this later. And it still doesn't work.
  • 00:26:20
    So, I'm just going to write still
  • 00:26:22
    doesn't work. Let's try again. lonely
  • 00:26:26
    octopus.com. Okay, cool. So, that works
  • 00:26:28
    now. Um, obviously there's like other
  • 00:26:30
    things that we want to fiddle around
  • 00:26:31
    with a little bit like things that are
  • 00:26:33
    not centered. Might want to change these
  • 00:26:35
    colors a little bit, but I hope this
  • 00:26:36
    gives you a good idea for how it is that
  • 00:26:38
    you can start building using windsurf as
  • 00:26:40
    the experience. And so, in this case,
  • 00:26:42
    you also definitely do want to start
  • 00:26:43
    using git and github as well. So what
  • 00:26:45
    you can do is be like initiate git for
  • 00:26:49
    version control and just type that in.
  • 00:26:51
    Accepting everything here and then git
  • 00:26:53
    is going to be initialized. Everything
  • 00:26:55
    here turned green which means that it's
  • 00:26:57
    unttracked. It asked do you want to get
  • 00:26:59
    add everything? We can accept get add
  • 00:27:01
    everything and it's asking us if we want
  • 00:27:03
    to commit as well as our initial commit.
  • 00:27:06
    So we can accept we can get commit to.
  • 00:27:08
    So great now everything is being tracked
  • 00:27:09
    as version control. And when you're
  • 00:27:11
    ready, you can also get push and you can
  • 00:27:13
    actually see everything now on GitHub.
  • 00:27:15
    But regardless of what you use, remember
  • 00:27:16
    the principles that we went through for
  • 00:27:18
    vibe coding. Do keep those in mind and
  • 00:27:20
    apply them regardless of what kind of
  • 00:27:22
    tools that you're using. I'm going to
  • 00:27:23
    put on screen now a little quiz. So
  • 00:27:24
    please type the answers in the comment
  • 00:27:26
    section. And now let's go on to our
  • 00:27:28
    final section where I'm going to give
  • 00:27:29
    you some more tips and tricks and
  • 00:27:31
    frameworks and mindsets that will help
  • 00:27:33
    you along your Vibe coding journey. The
  • 00:27:36
    first one is very much a mindset. If
  • 00:27:37
    you're already an engineer, you know,
  • 00:27:39
    you probably already think this way. But
  • 00:27:40
    if you're someone who maybe doesn't come
  • 00:27:42
    from more of a technical background,
  • 00:27:43
    always think about starting small and
  • 00:27:45
    working your way up. In other words,
  • 00:27:47
    whatever it is that you're creating,
  • 00:27:48
    always think about it as the minimal
  • 00:27:50
    viable product, which is what are the
  • 00:27:52
    minimum amount of features that you can
  • 00:27:53
    put into your application for it to
  • 00:27:55
    function. After you get the thing to
  • 00:27:57
    actually work, then you can iterate and
  • 00:27:58
    put on like additional features and
  • 00:28:00
    functionalities on top of that. This is
  • 00:28:01
    the correct vibe coding mindset as
  • 00:28:03
    opposed to you coming up with like the
  • 00:28:06
    most lavish, you know, thing with all
  • 00:28:08
    the details that you can possibly think
  • 00:28:09
    of and like a million different
  • 00:28:10
    features. No, no, no, no. I can already
  • 00:28:12
    think of all the errors and issues that
  • 00:28:14
    you're going to get from that and then
  • 00:28:15
    just you like ripping out your hair
  • 00:28:16
    because you can't figure out what's
  • 00:28:18
    going wrong. Always start with the
  • 00:28:20
    minimal viable product and then iterate
  • 00:28:22
    on top of it. Get the thing to work
  • 00:28:23
    first. Next up is a framework that's
  • 00:28:24
    also from the vibe coding 101 course,
  • 00:28:26
    which I think is really, really helpful.
  • 00:28:27
    It shows that when you're developing or
  • 00:28:29
    building an app, when you're vibe
  • 00:28:30
    coding, there's really only two modes
  • 00:28:32
    that you're in. You're either
  • 00:28:34
    implementing a new feature or you're
  • 00:28:35
    debugging errors. When you're
  • 00:28:36
    implementing a new feature, what you
  • 00:28:38
    want to remember is to provide context
  • 00:28:39
    relevant to the new features. Mention
  • 00:28:41
    frameworks, provide documentations with
  • 00:28:43
    explicit details, etc., and then making
  • 00:28:45
    incremental changes and doing the
  • 00:28:46
    checkpoints and and version control,
  • 00:28:48
    etc. And when you're in debugging errors
  • 00:28:50
    mode, what you want to keep in mind is
  • 00:28:52
    firstly figuring out how things work. Do
  • 00:28:54
    you have a good understanding of the
  • 00:28:55
    structure of your project itself? if you
  • 00:28:57
    don't, you know, ask AI and and actually
  • 00:28:59
    figure that out because it's going to be
  • 00:29:00
    very helpful to figure out what is
  • 00:29:02
    actually going wrong in your
  • 00:29:03
    application. And when you figure out
  • 00:29:04
    what's wrong, think about how to get
  • 00:29:06
    that information to the LM to get
  • 00:29:07
    unstuck. And this is where the final
  • 00:29:09
    principle, context, is helpful. Just try
  • 00:29:11
    to provide as much context and
  • 00:29:12
    information as possible to guide your
  • 00:29:15
    LLM to fix to fix the problem. Give it
  • 00:29:17
    like screenshots of what's wrong. Give
  • 00:29:19
    it the error message, point it towards
  • 00:29:21
    the right file to be looking into. I
  • 00:29:23
    really love this framework. So take a
  • 00:29:24
    screenshot or something and whenever
  • 00:29:26
    you're getting frustrated or not know
  • 00:29:28
    what you're supposed to do, just try to
  • 00:29:29
    remember which mode that you're in and
  • 00:29:31
    what you should be doing in which mode.
  • 00:29:33
    Final tip that is a little bit more
  • 00:29:34
    advanced and these are writing rules or
  • 00:29:37
    documentation. This is kind of like a
  • 00:29:38
    system prompt that you're giving to your
  • 00:29:40
    coding agent. And this is where you can
  • 00:29:42
    list out like certain things that you
  • 00:29:44
    wanted to do or to not do. For example,
  • 00:29:46
    some of the best practices that you
  • 00:29:47
    probably want to put in your rules
  • 00:29:48
    include limit code changes to the
  • 00:29:50
    minimum when implementing a new feature
  • 00:29:52
    or fixing something. This is because AI
  • 00:29:54
    sometimes has this tendency of like
  • 00:29:56
    changing a lot of different files um
  • 00:29:59
    unnecessarily to fix like a very small
  • 00:30:01
    thing and then it could potentially
  • 00:30:03
    break other issues. Rate limit all API
  • 00:30:05
    endpoints. This is just to make sure
  • 00:30:06
    that you're not like calling an API and
  • 00:30:09
    incurring like multiple times and
  • 00:30:10
    incurring a lot of cost. Enable capture
  • 00:30:12
    on all authors and signup pages. So for
  • 00:30:14
    security reasons and yeah there are a
  • 00:30:16
    lot of other rules that you can put into
  • 00:30:17
    this file. You can also find online like
  • 00:30:19
    people have written these rules that are
  • 00:30:21
    specific to like certain types of apps
  • 00:30:23
    or certain languages that you're using
  • 00:30:25
    as well that you can put into your rule
  • 00:30:26
    file as well. And you can take this rule
  • 00:30:28
    file and give it to replet where cursor
  • 00:30:30
    ruins surf too. Especially if you're
  • 00:30:31
    someone who doesn't come from an
  • 00:30:32
    engineering background or like a
  • 00:30:34
    development background, I really
  • 00:30:35
    recommend that you actually look into
  • 00:30:37
    the rules that are specific for ensuring
  • 00:30:40
    like safety and security in your apps.
  • 00:30:42
    Like putting it in your at least like
  • 00:30:44
    learn things about like API keys and why
  • 00:30:46
    it is that you shouldn't be exposing
  • 00:30:47
    your API keys. And while you're learning
  • 00:30:48
    these, also put your rules into your
  • 00:30:50
    rules file so you're reminding your AI
  • 00:30:53
    to be abiding by best security practices
  • 00:30:56
    as well so you don't get hacked. All
  • 00:30:57
    right, there is honestly like a lot more
  • 00:30:59
    that I can go into detail about. Like
  • 00:31:01
    for example, like having styling
  • 00:31:03
    documents that you can reference, how
  • 00:31:04
    you should be refactoring your code,
  • 00:31:06
    using something like MCP servers. if
  • 00:31:08
    you're building something like AI agents
  • 00:31:09
    and you want to give your AI agents like
  • 00:31:11
    more tools and functionalities. There's
  • 00:31:13
    just like a lot which I don't have time
  • 00:31:14
    to cover in this video right now. But
  • 00:31:17
    please do let me know in the comments if
  • 00:31:18
    you want me to make a follow-up video
  • 00:31:20
    where I will go more in detail about
  • 00:31:22
    exactly how it is that you should be vi
  • 00:31:24
    coding and giving you more specific
  • 00:31:25
    advanced examples for AI code editors
  • 00:31:28
    like windsurf or cursor as well. But for
  • 00:31:30
    now we have come to the end of this
  • 00:31:32
    video. I really hope this vibe coding
  • 00:31:33
    fundamentals video is helpful for you to
  • 00:31:35
    get started um doing it correctly like
  • 00:31:38
    vibe coding with best practices in mind.
  • 00:31:41
    And as promised, here is the final
  • 00:31:42
    little assessment which do answer these
  • 00:31:45
    questions and put in the comments to
  • 00:31:46
    make sure that you retain the
  • 00:31:47
    information that I just covered. If
  • 00:31:49
    you're watching this video and
  • 00:31:50
    interested in vibe coding, chances are
  • 00:31:52
    you're probably also interested in
  • 00:31:53
    learning STEM subjects. So, if you are
  • 00:31:56
    interested in learning STEM subjects, I
  • 00:31:57
    highly recommend that you check out
  • 00:31:58
    Brilliant, the sponsor of this portion
  • 00:32:00
    of the video. Brilliant is a STEM
  • 00:32:02
    learning platform that helps you get
  • 00:32:03
    smarter every day with thousands of
  • 00:32:05
    interactive lessons in math, science,
  • 00:32:07
    programming, data analysis, and AI. What
  • 00:32:09
    I love about Brilliant is that it helps
  • 00:32:10
    you build critical thinking skills and
  • 00:32:12
    deep understanding of subjects instead
  • 00:32:14
    of just memorizing things. Brilliant
  • 00:32:16
    incorporates little quizzes, analogies,
  • 00:32:18
    and just little dopamine hits that
  • 00:32:20
    really help a lot when you're getting
  • 00:32:21
    bored or discouraged. It's shown to be
  • 00:32:23
    six times more effective than just
  • 00:32:24
    watching video content. They also have a
  • 00:32:26
    great mobile app so you can actually dig
  • 00:32:28
    into a quick little session and learn
  • 00:32:30
    something new when you have a couple
  • 00:32:31
    minutes instead of just mindless
  • 00:32:33
    scrolling. Brilliance programming
  • 00:32:34
    courses are some of my favorite courses.
  • 00:32:36
    They help you build a foundation of
  • 00:32:37
    coding and teaches you how to think like
  • 00:32:39
    an engineer, a skill that is still
  • 00:32:40
    crucial in the age of AI and the age of
  • 00:32:42
    vibe coding. Speaking of which, they
  • 00:32:44
    also have great AI courses, too, that
  • 00:32:46
    can help you gain a deep understanding
  • 00:32:47
    of how AI models work and their
  • 00:32:49
    applications. Brilliant courses are
  • 00:32:51
    super high quality and taught by
  • 00:32:52
    award-winning teams of teachers,
  • 00:32:54
    researchers, and professionals from
  • 00:32:56
    Stanford, MIT, Caltech, Microsoft,
  • 00:32:59
    Google, and more. To try everything that
  • 00:33:00
    Brilliant has to offer for free, you can
  • 00:33:02
    visit
  • 00:33:03
    brilliant.org/tina or just scan the QR
  • 00:33:06
    code on screen. Or you can also just
  • 00:33:07
    click the link in the description. If
  • 00:33:08
    you use my link, you also get a 20% off
  • 00:33:11
    the annual subscription. Thank you so
  • 00:33:12
    much, Brilliant, for sponsoring this
  • 00:33:14
    portion of the video. Now, back to the
  • 00:33:15
    video. Thank you so much for watching
  • 00:33:17
    this video and happy vibe coding. I'll
  • 00:33:19
    see you guys in the next video. We're
  • 00:33:20
    live stream.
Tags
  • vibe coding
  • programació
  • IA
  • Replet
  • WindSurf
  • PRD
  • control de versions
  • depuració
  • aprenentatge STEM
  • Brilliant