Did ChatGPT canvas mode just kill Cursor AI?

Подписаться 159

Просмотров 1,1 тыс.

50% 1

In this video, I take my first dive into ChatGPT's Canvas Mode to enhance a static landing page by generating and refining code snippets within the Canvas environment. While the tool aids in creating and iterating components, such as React and CSS, it still requires moving the code to an IDE like Code Sandbox for execution and testing. I highlight the current limitations and potential improvements, especially the need for better file management and synchronization between ChatGPT and external development environments. Despite some challenges, Canvas shows promise as a step towards a more integrated coding experience. Join me as I experiment with turning design inspirations into responsive web components, juggling prompts and refining CSS along the way.
01:13 Introduction to ChatGPT Canvas Mode
01:46 Setting Up the Environment
02:35 Starting the Project: Static Landing Page
03:15 Generating and Iterating Code with ChatGPT
04:44 Handling CSS and Custom Properties
06:03 Adding Components and Fixing Issues
11:56 Working with SVGs and Icons
14:40 Final Adjustments and Troubleshooting
15:50 Adding Alt Tags for Accessibility
17:29 Aligning and Styling Avatars
19:38 Responsive Design and Reflow
20:26 Adjusting Hero Image and Container
22:00 CSS Drop Shadows and Positioning
23:40 Fixing Buttons and Captions
28:09 Final Adjustments and Reflections

Опубликовано:

7 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 12

@Fera-229 12 часов назад

I think V0 by Vercel have a similar functionality where you can also see a preview of the generated code without the need to copy the code and paste it elsewhere.

@techgirlinstyle 9 часов назад

V0 is on my list to review next - however it is a slightly different use case. With V0 you can generate a Shadcn/ui based components - and yes it will let you preview the code but it will be a Radix UI primitive/Shadcn-ui/Tailwind baby. It is a great way to grow your component library that already has this stack - but not a way to built the entire web page from scratch especially if yuo are choosing a different stack for one reason or the other (e.g. i don't like Tailwind)

@WillBeebe 10 часов назад

Subscribed

@AntanasGeguzinskas 2 дня назад

Good Job :)

@okkashaally2115 22 часа назад

You could have just use tailwind to leave out unnecessary issues with the CSS

@techgirlinstyle 9 часов назад

Tailwind is a collection of utility classes, it is not a universal panacea. When i know exactly what i want and (especially) when working on a code someone else wrote (even when someone else is AI), I will go in manually writing my stying. if i am just trying to make a few containers to have a flexbox layout - sure i can use Tailwind for that

@okkashaally2115 8 часов назад

@@techgirlinstyle We all know what Tailwind is, and I’m not here to compare it with plain CSS. I’m here to suggest what could have made the task simpler. For instance, why use React instead of vanilla JS? Why use AI instead of writing all the code yourself? It’s about taking advantage of tools and how they add simplicity to development. Creating a flex div in Tailwind takes a second, but with plain CSS, you’d have to navigate to another file, think of and create a unique, meaningful class name, add the properties, go back to the JSX/HTML, find the div, and apply the class. That process could take almost 10 seconds. This video could have been shorter if you had used Tailwind, and it would have made it even easier for AI to generate the code

@okkashaally2115 8 часов назад

@@techgirlinstyle Moreover, I wouldn’t say you’re inexperienced, but maybe you’re a bit of an old-fashioned dev. I know plenty of frontend developers who dislike Tailwind 😅, but they probably don’t realize how much time they waste on styling. By the way, I haven’t used CSS/SASS since 2021. I only use it when I need more control over specific properties

@techgirlinstyle 8 часов назад

@@okkashaally2115 like with any tool, it is a matter of preference. Any btw not everyone knows what Tailwind is, I would not assume that. I personally won’t even start with Tailwind because inevitably i will end up with an unreadable string of classes. I can instead have a single class and easily see if there is a conflict in my CSS. Whether it is a separate file or a CSS in JS - is again arguable and depends on the project. You can have it in the same file if you want - just switch to CSS in JS. In the long term I absolutely hate an idea of using Tailwind. For you it might be easier to use a class - I on the other had can recall most of the CSS rules by heart (and my IDE will help me too with autocomplete) while Tailwind requires me to memorize class names instead. Knowledge of CSS is transferrable project to project, company to company. Knowledge of Tailwind classes is only relevant if the team had agreed to use it. That’s why I won’t even show myself using Tailwind in a greenfield project - because of my PERSONAL preference to write CSS directly in any shape or form.

@techgirlinstyle 8 часов назад

@@okkashaally2115 haha thank you for not calling me "unexperienced" - I was not aware we were talking about personal levels of proficiency here, but discussing a tool preference. Trust me I built apps in pure CSS, SASS, SCSS, CSS-in-JS (styled components, emotion), worked with CSS modules, monolithic css/scss files and Tailwind. I began working with CSS in 2011 - when CSS3 began rolling out. I might be old fashioned in a way that i prefer to have more control over my styling and have a way to have a clear picture of what styles are being applied (and where) without having to go down the rabbit hole. If you love Tailwind - all power to you. I am not a fan of it and won't be using it in my projects.