Frontend jobs dead? ChatGPT vs Claude Artificats

Mehul - Codedamn
5 Oct 202419:40

Summary

TLDRThe video discusses OpenAI's new 'GPT-4 with Canvas' feature, comparing it to tools like Claude 3.5 and Cursor editor. The speaker explores the differences between Claude and GPT-4's canvas mode while building a simple Tic-Tac-Toe game using ReactJS, Tailwind CSS, and ShadCN. While both models perform similarly, Claude adds a sound toggling feature, which GPT-4 lacks. The video emphasizes the importance of being a skilled developer to effectively manage AI tools, noting that AI can enhance programming but doesn't replace the need for strong coding knowledge.

Takeaways

  • ๐Ÿค– OpenAI has released a new interface called GPT-4 with Canvas, which is seen as a competitor to other tools like Claude and Cursor.
  • โš™๏ธ The GPT-4 with Canvas feature allows users to interact with the AI model in a more hands-on way, providing a new interface for developers.
  • ๐Ÿ› ๏ธ Claude 3.5 and GPT-4 with Canvas were compared using the same prompt to create a simple ReactJS game, showing slight differences in their approaches.
  • ๐Ÿ’ก Claude was able to preview the code and had an additional feature to toggle sound effects, which was a small improvement over GPT-4.
  • ๐Ÿ” GPT-4โ€™s interface offers syntax highlighting and allows for code reviews with suggestions, but lacks a built-in preview mode, which Claude offers (though it didn't work in this test).
  • ๐ŸŽต Both AI tools were able to create code, but Claude used JavaScript's AudioContext API to generate sounds, showcasing a unique feature not present in GPT-4 by default.
  • โšก GPT-4 with Canvas has a sleek and user-friendly interface, similar to a text editor, allowing developers to iterate on code quickly.
  • ๐Ÿ’ป The video emphasized that while AI tools are advancing, a skilled developer is still necessary to manage and optimize code, especially for larger projects.
  • ๐Ÿง  The future of programming may involve managing AI tools to enhance productivity, but a strong understanding of programming is still essential.
  • ๐Ÿ“ˆ The AI systems are not yet at a point where they can fully replace developers, but they can assist in tasks like refactoring, debugging, and enhancing code quality.

Q & A

  • What is the new interface released by OpenAI that the speaker is excited to try?

    -The new interface released by OpenAI that the speaker is excited to try is called 'gp4 with canvas'. It is a new way to interact with the same model, likely GPT-4, but through a different interface.

  • What is the purpose of comparing Claude and GPT-4 with canvas?

    -The purpose of comparing Claude and GPT-4 with canvas is to see how both AI models operate with the same prompts and to evaluate their performance in creating a basic ReactJS game using Shard CN and Tailwind CSS.

  • What is the main difference between Claude and GPT-4 with canvas that the speaker points out?

    -The main difference pointed out by the speaker is that GPT-4 with canvas does not have a preview mode like Claude does. The preview mode in Claude allows users to see a preview of the code, which is a feature that GPT-4 with canvas currently lacks.

  • What does the speaker like about OpenAI's interfaces?

    -The speaker appreciates that OpenAI's interfaces are not only state-of-the-art in terms of AI models but also have very nice user interfaces to interact with them, making the experience closer to using an advanced text editor like VS Code with syntax highlighting.

  • What feature does Claude offer that GPT-4 with canvas does not, according to the speaker?

    -Claude offers the ability to disable sound effects, which is a feature not mentioned for GPT-4 with canvas. This gives users more control over the auditory experience within the application.

  • How does the speaker feel about the future of front-end developers with the advancement of AI tools?

    -The speaker feels that front-end developers might become 'non-existent' in the next few years due to the capabilities of AI tools, suggesting that these tools could potentially replace the need for basic front-end development tasks.

  • What does the speaker suggest as improvements for the code generated by the AI?

    -The speaker suggests several improvements such as not using semicolons in JavaScript, using 'const' wherever possible, changing parameters to be objects instead of primitive types, using curly braces with switch case statements, and prefixing Boolean variables with 'is' or other appropriate prefixes.

  • What is the importance of being a great developer when working with AI coding tools, as per the speaker?

    -The speaker emphasizes that despite the capabilities of AI tools, one still needs to be a great developer to effectively work with them. Understanding programming concepts and having the ability to manage and direct the AI in complex tasks is crucial.

  • What is the speaker's opinion on the necessity of human involvement in coding with AI systems?

    -The speaker believes that human involvement is still necessary in coding with AI systems, as AI is a tool that aids in development but does not replace the need for a skilled developer to manage and refine the code.

  • What does the speaker predict for developers who only perform basic development tasks?

    -The speaker predicts that developers who only perform basic development tasks, such as creating Chrome extensions or doing small freelance work, will be at risk of being replaced by AI tools, emphasizing the need for developers to improve their skills.

Outlines

00:00

๐Ÿš€ Introduction to GPT-4 Canvas and Claude 3.5: A Head-to-Head Challenge

The speaker introduces GPT-4 with Canvas, a new interface by OpenAI, and compares it to Claude 3.5. While both models share similar capabilities, GPT-4 Canvas provides a fresh interface for interaction. The speaker expresses excitement in trying this new feature, especially given Claude's strong performance in handling code previews. A face-off between these models is set, with the task of creating a basic Tic-Tac-Toe game using ReactJS, ShadCN, and TailwindCSS.

05:01

๐Ÿง‘โ€๐Ÿ’ป Reviewing Code Output: GPT-4 vs. Claude 3.5

The speaker compares the outputs from GPT-4 Canvas and Claude 3.5 by reviewing the code generated for the Tic-Tac-Toe game. While both models successfully produce the game, GPT-4โ€™s code lacks syntax highlighting, and some elements appear broken. The speaker requests proper TypeScript typing and comments for clarification, and the AI adjusts accordingly. Claude's output seems more robust, including a preview feature and additional sound effect capabilities, though the preview doesn't work perfectly in the demo.

10:02

๐ŸŽถ Enhancing Code with Audio and Customization

The speaker continues comparing GPT-4 and Claude by asking them to generate sound effects via JavaScript's AudioContext API. Both models handle this challenge well, with Claude offering a neater approach by creating a dedicated function. The speaker highlights that while AI can now assist with many aspects of programming, it still requires a developerโ€™s oversight for features like sound effects. This leads to a reflection on how AI tools may change the role of front-end developers, but skilled developers will still be essential.

15:03

๐Ÿ“Š Advanced Code Review and Future of Development

The speaker dives deeper into AI-assisted programming, offering constructive feedback to improve the generated code by adding personal coding preferences like using `const` and descriptive variable names. They emphasize that while AI tools are becoming powerful, a skilled developer is still required to guide and refine the output. The speaker predicts that AI will not replace developers anytime soon but will eliminate less skilled developers. They also stress that mastering programming is key to effectively utilizing AI tools.

Mindmap

Keywords

๐Ÿ’กOpenAI

OpenAI is a company that specializes in creating artificial intelligence applications. In the context of the video, OpenAI has released a new interface called 'gp4o with canvas' that interacts with their AI model, likely GPT-4. The script discusses the excitement around trying out this new interface and comparing it with other AI tools like Claude.

๐Ÿ’กGPT-4

GPT-4 refers to the fourth generation of OpenAI's Generative Pre-trained Transformer model. While the video does not explicitly state 'GPT-4', it mentions 'gp4o' which could be a colloquial or placeholder reference to it. The model is likely used in the new interface for generating text and code, as discussed in the script.

๐Ÿ’กInterface

An interface in the context of the video refers to the point of interaction between a user and a software application, such as the 'gp4o with canvas'. The script highlights the importance of a user-friendly interface for interacting with AI models and compares different interfaces for their usability and functionality.

๐Ÿ’กClaude

Claude is mentioned as an AI model that works with tools like Sonet and Artifacts. The video script compares Claude with OpenAI's new interface to demonstrate how AI can be used for tasks like writing code and providing previews. Claude is used as a benchmark for evaluating the performance of other AI tools.

๐Ÿ’กReactJS

ReactJS is a popular JavaScript library for building user interfaces, particularly for single-page applications. The video script uses ReactJS as an example of a technology that the AI models can be prompted to create code for, showcasing their ability to generate code for real-world applications.

๐Ÿ’กShard CN

Shard CN is a tool mentioned in the script that works well with Claude. It is used as an example of how AI can interact with other tools to create a more seamless development experience. The script talks about how Claude works great with Shard CN, indicating integration between different technologies.

๐Ÿ’กTailwind CSS

Tailwind CSS is a utility-first CSS framework used for styling web applications. In the script, Tailwind CSS is listed as one of the technologies the AI should include when creating a Tic Tac Toe game, demonstrating the AI's capability to understand and implement modern web development practices.

๐Ÿ’กCode Review

A code review is a process where software code is examined to find errors, improvements, or understanding of the code. The video script discusses performing a code review on the code generated by AI models. It emphasizes the importance of code quality and how AI can assist in refining code based on developer feedback.

๐Ÿ’กTypeScript

TypeScript is a superset of JavaScript that adds optional types to the language. The script mentions converting JavaScript code to TypeScript as an example of the kind of tasks AI can perform. It also reflects the video's theme of exploring AI's capabilities in software development and code enhancement.

๐Ÿ’กAudio Context API

The Audio Context API is a web API for processing and manipulating audio in the browser. The script discusses how AI can be prompted to use this API to create sound effects on the fly, showcasing the AI's ability to understand and implement advanced web technologies.

๐Ÿ’กRefactoring

Refactoring is the process of restructuring existing computer code without changing its external behavior to improve its internal structure. The video script describes AI's ability to refactor code based on developer suggestions, such as improving code quality or changing argument structures, demonstrating the AI's adaptability and utility in coding.

Highlights

OpenAI introduces 'GPT-4 with Canvas', a new interface for interacting with GPT-4, resembling tools like Cursor and being dubbed a 'Claude killer'.

The new interface integrates features similar to VS Code, such as syntax highlighting, but lacks a preview mode found in tools like Claude.

The speaker conducts a comparison between GPT-4 Canvas and Claude 3.5, both using a simple Tic-Tac-Toe game creation prompt with ReactJS, ShadCN, and Tailwind CSS.

GPT-4 Canvas starts with JavaScript and generates functional code but lacks preview capabilities. Claude, in contrast, provides a working preview feature.

Claude 3.5 offers additional features like sound toggling by default, which GPT-4 Canvas does not include without a prompt.

Despite both AI tools performing well, Claude edges out GPT-4 Canvas with slightly better performance, including a sound toggle feature.

GPT-4 Canvas can rework the code to dynamically generate sounds using JavaScript's AudioContext API, an innovative approach not prompted by the user.

The speaker highlights that AI models like GPT-4 and Claude can effectively replace basic frontend development tasks, such as creating simple applications like Tic-Tac-Toe.

AI tools are great at helping developers debug, refactor code, and handle common issues, but they still require strong programming knowledge to utilize effectively.

The future of programming is changing, with AI tools evolving into powerful assistants, but developers must remain skilled to manage complex tasks and work alongside AI.

The speaker recommends improving code practices like avoiding semicolons, using 'const' over 'let', and replacing short-circuit rendering with explicit 'null' returns.

AI tools like GPT-4 Canvas can easily integrate feedback from users to improve code quality and follow best practices, even in highly nuanced coding environments.

The speaker suggests that bad developers may become obsolete, but good developers will thrive by leveraging AI tools to enhance productivity.

Developers are encouraged to get good at programming because managing AI tools effectively requires a strong understanding of code, structure, and logic.

AI agents are not yet fully autonomous in developing applications, but they are rapidly approaching a future where they could perform more complex tasks with less human input.

The speaker concludes that AI tools are becoming indispensable for modern development, but human expertise in debugging, reviewing, and optimizing code remains critical.

Transcripts

play00:00

all right so there is a new thing that

play00:01

open AI has released which everyone is

play00:04

saying is sort of like claw killer or

play00:06

you know you have seen tools like cursor

play00:09

for example cursor editor killer

play00:11

something like that which is known as

play00:12

gp4 o with canvas so this is a new sort

play00:16

of interface it's the same model likely

play00:18

so it's still using gbd4 only but it's a

play00:21

sort of a new interface to interact with

play00:23

this model and I'm excited to try this

play00:25

out because if you look at Claude for

play00:27

example as a model what they have done

play00:29

with Sonet and artifacts was really good

play00:31

right it was after the AI thing in

play00:34

general like how AI is so smart but it

play00:36

was the first thing which struck me that

play00:38

okay wow this is nice that you are able

play00:40

to not only just write the code as an AI

play00:43

agent but you can also show me preview

play00:45

me the code and if you know then you

play00:47

know that Claude absolutely works great

play00:49

with Shard CN and these sort of things

play00:52

so I'm going to do a face down with

play00:54

these two models so I have Claude 3.5

play00:56

Sonet which is the best model which they

play00:58

have and I have char gp4 4 with canvas

play01:00

and I'm going to try to do the same

play01:02

prompts and see like how both of them

play01:04

operate let's say just to start off with

play01:06

create a take T to game with reactjs

play01:11

shad CN and Tailwind CSS if you

play01:19

need right so very very basic prompt I

play01:22

just want to see how both of these

play01:23

systems react I'm going to give this to

play01:25

Claude and I'm going to give the same

play01:26

thing to char GPD 40 but with the canvas

play01:28

mode so now you can see that this is the

play01:32

new this is the new nice thing I think

play01:33

one thing which I really love about open

play01:35

AI is not that they just create their

play01:37

models which is which are like

play01:39

state-ofthe-art but they also have like

play01:40

very nice interfaces to interact with

play01:42

them right so if you look at Claud for

play01:44

example it's still nice maybe I'm just

play01:46

used to artifacts so that's why I'm just

play01:48

seeing a new thing and I'm a little

play01:49

excited about how the UI and everything

play01:51

looks like much more closer I would say

play01:54

to vs code like syntax highlighting

play01:57

maybe that is why this also feels

play01:58

familiar than anything else but you can

play02:00

see one thing one difference right out

play02:02

of the box uh which open AI has not done

play02:05

so far is that they haven't implemented

play02:07

a preview mode right so on Claud for

play02:09

example I have this code and I can also

play02:11

go to this preview tab that sometimes

play02:13

works sometimes it just says that I'm

play02:15

not able to run the preview because of

play02:17

dependencies and all not sure why this

play02:18

is not loading right now but okay fair

play02:20

enough we can just start with the react

play02:22

itself so this this looks like a proper

play02:24

text editor instance because you know

play02:27

grammarly is also kicking in so let me

play02:29

just quickly if I can disable grammarly

play02:32

somehow well not really anyway we have

play02:35

something here awesome so let's see what

play02:37

we have let's do a code review basically

play02:39

because at least an AI would not get

play02:41

offended if I do a code review for their

play02:43

code and if something is wrong so I want

play02:45

to code review both chart GPD and CLA to

play02:47

start off with chart GPD sets the board

play02:49

is X next set is X next it's the Boolean

play02:52

value it's the winner what I will do is

play02:54

just I'll ask it to please convert this

play02:58

into proper types script script code it

play03:00

just makes it a little bit easier

play03:01

because I don't know what winner could

play03:03

be right and this is very neat see how

play03:05

it is doing it line by line I think

play03:06

cursor also does the same thing that's

play03:08

what some of the people I thought were

play03:10

mentioning on social media I think that

play03:12

Claude also needs that yep it also

play03:15

started it directly with JavaScript so

play03:18

let's see okay while Claude is creating

play03:20

the code let me review this one syntax

play03:22

highlighting obviously is not working so

play03:24

that's number one uh this looks broken

play03:26

this is not how it should work board

play03:28

said board R9 fill null okay is next

play03:32

Boolean cross o draw okay and null so

play03:35

null is assuming like you know the match

play03:37

is still going on Play Click use sound

play03:41

okay so there is a hook use sound which

play03:43

is use I'm not sure what this Hook is

play03:45

okay so it's sort of like bring your own

play03:47

sounds and then it just converts that

play03:49

into a react hook okay sure I think

play03:52

these assets we have to create ourselves

play03:54

because obviously like CHT is not

play03:56

creating MP3 files yet okay winning

play03:59

combinations 01 2 3 4 5 6 78 036 okay so

play04:03

it has just created that grid of

play04:05

combinations where it would Mark as a

play04:07

winner for Con slate combination of

play04:09

winning combination this could have been

play04:11

a const but sure const ABC this

play04:13

combination if Board of a and board of a

play04:16

is Board of B and board of a is Board of

play04:19

C okay so it's checking if any single

play04:22

one of these combinations is matching

play04:23

and this is not null so that means there

play04:25

is some character over there set winner

play04:27

as Board of whatever that character is

play04:29

player win and return if board includes

play04:32

null and and winner is not there does

play04:35

not include null and there is no winner

play04:37

then it's a draw said when a draw okay

play04:39

and a board is a flattened

play04:41

representation of the board itself right

play04:44

zero index0 to index 8 okay the logic is

play04:47

fairly simple so I think both the AIS

play04:49

would get it right handle click if Board

play04:51

of index or or winner then you just

play04:54

return so that means if this is not null

play04:56

let me just do something better right

play04:58

because why not this is an AI uh please

play05:00

leave useful comments throughout the

play05:04

code so that I can actually like you

play05:05

know instead of just me figuring out the

play05:07

logic myself I can just read through the

play05:09

code commence and let me do the same

play05:12

thing over here so we have done this

play05:14

already effect to play play winning

play05:16

sound effect okay so this is a winning

play05:18

sound effect I did not know that before

play05:20

because did not see this function yet oh

play05:22

there it is play Draw hand click ignore

play05:24

the click if the cell is already filled

play05:25

or if there's a winner okay Play The

play05:27

Click sound effect new board blow board.

play05:29

slice so it's creating a copy of the

play05:31

board which it could have told the user

play05:33

but okay new board of index is X next

play05:36

then X otherwise oh okay and then you

play05:39

toggle the Boolean value this could have

play05:41

been like you know could have been

play05:43

within the state itself instead of you

play05:45

just uh using the state variable

play05:47

directly but it's okay handle restart

play05:49

you reset the board you reset the turn

play05:51

and you reset the winner okay fairly

play05:54

simple nothing uh major here as such

play05:56

let's take a look at Claud I'm not sure

play05:58

if the preview is working no idea why

play06:00

this preview is not working it's usually

play06:01

working um but okay never mind so let's

play06:04

start here it defines player it defines

play06:06

board as the okay it's taken a slightly

play06:10

different approach compared to char GD

play06:12

so we know that these two models are not

play06:13

the same models game State said game

play06:15

States it's using a single object

play06:17

instead of char GPD separating it out

play06:19

into different different US state

play06:21

variables see I like the approach of

play06:23

taking a single object but only when you

play06:26

are using something like zus not zus uh

play06:29

using something like immer for modifying

play06:31

deeply nested properties because

play06:32

otherwise what happens is that you do

play06:34

thing like this and this becomes I mean

play06:37

even if you are on a one level then

play06:38

that's fine but if you're on a nested

play06:40

level it becomes a huge headache to just

play06:42

keep on destructuring and you know just

play06:44

keep on updating the properties so I

play06:46

would recommend doing this but I would

play06:48

also recommend like you know if you can

play06:50

just add emmer here so I can probably

play06:52

say that but I just want to keep the

play06:53

prom same for now all right so let's see

play06:56

so it has a use effect calculates the

play06:57

winner every time the game stays boards

play07:00

changes show alert there is no winner or

play07:03

every cell is occupied right and the

play07:04

calculate winner function is what

play07:07

calculate winner is a function that

play07:08

accepts the board Returns the player

play07:10

who's a winner it has all possible

play07:12

winning combinations rows columns

play07:15

diagonals and it this does the same

play07:17

thing the logic is exactly the same how

play07:20

uh the logic is for chat GPT if there is

play07:23

no winner then okay and let's see let's

play07:26

see where we were in the use effect yeah

play07:29

okay okay so this is sorted now every

play07:31

time handle click runs board is next

play07:34

winner sound enabled it gets from the

play07:35

game state if board index is already

play07:37

filled or if there's a winner return

play07:39

again just like Char GPD otherwise you

play07:42

you clone the board you set the thing on

play07:45

it like the whatever it is and then you

play07:47

patch the board again and if sound is

play07:49

enabled then play sound uh whatever it

play07:51

is sound enabled is true by default can

play07:54

you also disable sound in this

play07:56

automatically okay yeah so clae goes one

play07:58

step ahead and it just gives you the

play08:00

option to also disable sound as a user

play08:02

awesome I think both are nice I think

play08:04

both are good um Char GPT doesn't

play08:06

include that sound toggling effect by

play08:07

default and Claude does that so I think

play08:10

I mean overall if I had to rate the

play08:12

output just for this specific game and

play08:14

these two prompts I think CLA is

play08:16

slightly better I won't say like a lot

play08:18

better I mean Chad GPD also has done

play08:21

pretty much the exact job which I gave

play08:23

but Claude went a step ahead and maybe

play08:25

implemented like one small feature as

play08:26

well second thing as far as like can see

play08:30

okay yeah it has Shad CN but what CLA

play08:33

has given you I'm not sure why preview

play08:35

is not working right now with CLA but

play08:37

this would actually work right outside

play08:39

of the sound effects which I think it

play08:40

would not be able to generate it would

play08:42

actually work if this preview works but

play08:44

I'm not sure like why this is not

play08:45

working right now okay we can go one

play08:47

step ahead and we can say that instead

play08:49

of using the sounds which you do not

play08:54

obviously have can you create sounds on

play08:58

the Fly using JavaScript and by the way

play09:01

I'm not just messing around this is 100%

play09:03

possible with JavaScript so same prompt

play09:05

with Claude let's see how they work so

play09:09

it started to rework all of this um

play09:13

let's see yeah so it's using the audio

play09:15

Contex API from JavaScript and it's

play09:18

trying to create these sounds now which

play09:20

you can see is an interesting thing and

play09:23

I'm sure like CLA is also able to create

play09:25

it CLA does it slightly neatly by

play09:27

creating a dedicated function function I

play09:29

mean you can say this still say the same

play09:31

thing for this also click win and draw

play09:33

it created a generate B function which

play09:35

has a frequency and a duration yeah so I

play09:38

I would say like this is also like sort

play09:40

of the same thing but yeah sure so you

play09:43

can see that it just tells you then

play09:45

about everything I mean guys I think

play09:47

like front end developers are they are

play09:50

going to get existed you know

play09:51

non-existent basically in the next few

play09:53

years because I can just sit with it and

play09:56

if I am a developer I'm not saying that

play09:58

maybe you know anyone can do this but I

play10:00

am a developer I knew that you can

play10:01

create sounds with just with JavaScript

play10:04

right so if I am a developer I can

play10:06

manage these two Bots and I can just ask

play10:08

them to you know just keep on doing this

play10:09

and create this and do that based on my

play10:12

knowledge maybe they at some point they

play10:14

become like so intelligent that they are

play10:16

able to suggest me that hey even though

play10:18

like I can't create a sound effect but I

play10:20

can maybe create it directly in the

play10:21

JavaScript world it's not there yet

play10:23

where it can just start recommending me

play10:25

or maybe like you know just start

play10:26

browsing internet right here itself

play10:28

within this interface face this is what

play10:30

all these AI agents and all these things

play10:32

are gearing towards right they're trying

play10:34

to build these agents that are able to

play10:36

like autonom

play10:38

autonomously Drive the your computer

play10:41

your web somehow download it because how

play10:43

would I do like if I was a normal human

play10:45

and I want this sound either I would

play10:47

just you know maybe do something like

play10:49

this which they have already done like

play10:50

using the audio context API or I'll just

play10:52

go on Google and write winner sound

play10:54

effect something like this and maybe use

play10:57

open this website see if I can download

play10:59

this play this understand if this is

play11:01

nice or not so sort of like yeah I mean

play11:03

you can't hear it but it's okay so I can

play11:05

download this and I'll dis place this in

play11:07

my project somehow match the paths right

play11:09

and you know so on and so forth so it's

play11:11

not there yet but the reason it's not

play11:14

there yet I don't feel at least for

play11:17

these sort of applications I don't feel

play11:19

intelligence is the gap I feel the Gap

play11:21

is in the tooling now intelligence layer

play11:23

these guys have done right the basic

play11:25

layer is already here which can replace

play11:28

a lot of you guys are building just

play11:30

basic apps so this again reinforces one

play11:33

of the things which I've been saying for

play11:34

a long time that developers at least for

play11:37

now are not going away but bad

play11:39

developers are going away for sure so if

play11:41

you're somebody who just does like

play11:43

Chrome extensions or something like that

play11:45

for a living or you know you're doing a

play11:46

little bit of freelancing here and there

play11:48

with some non- tech clients you should

play11:50

really get good like it's time to really

play11:53

get good at programming in general and

play11:56

use these Bots use these AI things to

play11:59

build applications for yourself because

play12:01

you will not be able to interact with

play12:03

them other than you know the regular

play12:05

things that people are able to do that I

play12:06

need this app I need that app because

play12:08

now I need to debug if something is

play12:10

going wrong I as a developer can jump

play12:12

into the nuances and I can check like

play12:14

what is the behavior what is this

play12:16

exactly doing for example if I let's say

play12:18

if I am a developer and I'm seeing like

play12:20

one of the things which I can improve

play12:22

let's see I want you to improve the

play12:24

following things now this is something

play12:27

not a non-developer would write but I

play12:28

can write it because I have seen I have

play12:31

worked with code bases a lot and I'll

play12:32

tell you like a few things which I feel

play12:34

like are wrong in general to start off

play12:36

with just my personal preference don't

play12:38

use semicolons with JavaScript that's

play12:41

just me I mean everyone is different

play12:43

second thing try to use const wherever

play12:47

possible try to use type instead of

play12:51

interface in JavaScript in typescript

play12:54

whatever right another thing I can see

play12:57

is that what I don't like is these

play12:59

parameters like pass IND directly like

play13:01

this so I'll use I'll say try to uh not

play13:04

try to change all arguments to be

play13:08

objects instead of instead of you know

play13:12

number or string or enum Etc uh because

play13:17

with objects you can

play13:19

explicitly specify the name of the

play13:23

variable that you are passing right very

play13:27

very small thing again with case with

play13:30

switch case statements use curly braces

play13:34

to to

play13:35

[Music]

play13:37

encapsulate the scope of the things you

play13:40

are doing and again I am right I am

play13:42

typing this right now I know a future it

play13:45

is even here right now where you can

play13:47

just speak these things and it'll start

play13:48

to work on that so let's see what else I

play13:51

have so this key is fine okay yeah one

play13:55

more thing don't use short circuiting

play13:58

for rendering

play14:00

components explicitly render null n jsx

play14:06

and then finally one more suggestion

play14:08

which I have is always prefix Boolean

play14:12

values

play14:14

with is or r or Etc basically instead of

play14:22

saying is a is age greater than 18 all

play14:29

always write variables that say is age

play14:33

greater than 18 you know so these are

play14:36

like few of the suggestions and you can

play14:38

see like it just goes it just goes there

play14:41

and it just starts writing code and it's

play14:43

crazy like how these AI systems work you

play14:46

can see like it's removing semicolons

play14:48

it's adding these Scopes which I told it

play14:49

about I'm I'm sure like some of you

play14:52

might have not even understood all of

play14:54

these suggestions yourself if you are

play14:56

learning as a new JavaScript developer

play14:58

but you can see like it pretty much

play14:59

implemented every single thing I

play15:01

mentioned don't use semicolons done try

play15:03

to use const I I think I mentioned it

play15:05

for that one Loop right uh okay so it's

play15:08

not using this here also so I can just

play15:10

ask it can we not use const here this is

play15:14

again this is a nice thing about this

play15:15

interface I think it's also there in

play15:17

clae but I'm not sure I can I can say

play15:20

over here can we use a for off Loop here

play15:25

instead of this so let's see yeah so you

play15:27

can see now it has done it but again

play15:29

like you can understand it it wasn't

play15:30

able to catch it just based on my intent

play15:33

with this message it had to do like I

play15:34

had to tell it another time that you can

play15:37

probably use const over here as well

play15:39

okay what else did I suggest change all

play15:41

arguments to be so you can see it

play15:43

changed it and handle click params is a

play15:45

new type now this play sounds param is

play15:47

also a new type now and I think right

play15:49

now it's the perfect code right

play15:51

according to me it's the perfect code so

play15:53

you can see that this is also a nice

play15:55

toolbar which CH gbd gives uh you know

play15:58

with everything uh with with the code

play16:00

and I think this toolbar items change

play16:02

based on what you're doing because this

play16:04

canvas also opens up it's not just for

play16:06

code it's also for other things like if

play16:08

you're attaching a PDF and all and that

play16:10

then also like it sort of shows up so

play16:12

that's also there so if I go ahead and

play16:13

click on let's say add logs is already

play16:16

there so if I putot to a language let's

play16:19

try that so okay so this is bad I would

play16:21

probably expect that it'll suggest me

play16:23

view or swelt or something like that but

play16:26

that's fine if I tell it to do a code

play16:28

review that let's try to do that okay

play16:30

decent I think this is nice see it's

play16:32

suggesting a few more interesting things

play16:35

which I did not catch earlier most of

play16:38

them are not so serious but you can see

play16:41

consider moving wi combinations outside

play16:43

the component to avoid reinitializing it

play16:44

on every com every render which can be a

play16:47

performance Improvement makes 100% sense

play16:49

it's a it's a const variable you can

play16:50

just move it outside and uh yeah it

play16:54

should just work so I think the best

play16:56

part I like is this refactoring that

play16:58

happens with the line by line UI I think

play17:00

it's it's super nice so that's great and

play17:03

once it is done okay so this is I think

play17:05

this is something okay no I thought that

play17:07

we lose the commands here but no

play17:09

apparently not so you see this is

play17:11

extremely nice extremely good but you

play17:13

can see the if you look very carefully

play17:16

this is the future of programming right

play17:18

I am a developer myself I could create

play17:20

this app uh Tic Tac to just to give you

play17:22

an example but there are models like CH

play17:24

GPD now who I'm interacting with

play17:27

directly oneon-one I'm saying let's do

play17:29

this let's do that maybe we should do

play17:31

this while I am also actively involved

play17:33

in the code but not rarely right so I'm

play17:35

not rarely typing the code or I'm not

play17:38

really suggesting it every single little

play17:40

detail but it still works right at the

play17:42

end of the day maybe like for example

play17:45

let's say if I don't like this style

play17:46

where it's just negating it directly I

play17:48

want it to explicitly check for null I

play17:51

can just code those es lint rules sort

play17:53

of the at the top of my prompt and I can

play17:56

just keep on working with it but a very

play17:58

very very important important thing over

play17:59

here which a lot of you might miss is

play18:01

that you still need to be a great

play18:02

developer to work with a tool like this

play18:04

it's a great tool but at the end of the

play18:06

day it's still a tool right now until

play18:08

you have softwares that can think and

play18:10

you know they just think about let's

play18:12

start a business today and they just

play18:13

start to create an chain of AI agents

play18:15

and all of that you are still needed and

play18:17

that future is far far ahead hopefully

play18:20

that future is far far ahead in line so

play18:23

but yeah you have to get really good at

play18:25

these tools not these tools at the

play18:27

programming itself you would say like

play18:28

why do I need to learn programming I bet

play18:31

you you can't create this chain of

play18:33

conversation if you are not a programmer

play18:35

yourself if I give somebody just a way

play18:36

to create a tic Taco game do you really

play18:38

think that they would know that they can

play18:40

write this prompt for example just for

play18:42

code quality or they can write this

play18:44

prompt for example just directly try to

play18:46

create sounds with JavaScript or you

play18:48

know maybe like converting it to

play18:49

typescript maybe it doesn't matter for

play18:51

them they just get the end app at the

play18:52

end but if you're creating I'm saying it

play18:54

from a point of view when these AI

play18:56

systems are getting used in hundreds of

play18:58

thousands of lines of code right

play18:59

millions of lines of code on real code

play19:01

basis then when you are the AI manager

play19:04

sort of like you are managing these AI

play19:06

bosss you are managing these things you

play19:08

have to be a great developer yourself so

play19:10

that's all for this video let me know

play19:11

what do you think about this super

play19:13

excited for trying out new things that

play19:15

open a and all these models all these

play19:17

companies are releasing very exciting

play19:18

stuff let me know in the comments what

play19:20

do you think about this that's all for

play19:21

this one like And subscribe I'll see you

play19:23

in the next video very soon

Rate This
โ˜…
โ˜…
โ˜…
โ˜…
โ˜…

5.0 / 5 (0 votes)

Related Tags
GPT-4 CanvasClaude 3.5AI comparisonReactJSShadCNTailwind CSSCode reviewFrontend AITic-Tac-ToeJavaScript AI