Vibe Coding Fundamentals In 33 minutes

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

Résumé

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.

A retenir

  • 💡 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.

Chronologie

  • 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.

Afficher plus

Carte mentale

Vidéo Q&R

  • 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.

Voir plus de résumés vidéo

Accédez instantanément à des résumés vidéo gratuits sur YouTube grâce à l'IA !
Sous-titres
en
Défilement automatique:
  • 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