ChatGPT vs. Expert Programmer: Who Can Build a To-Do App Faster? 🤔

hi everybody welcome back to Big Tech talks with your hosts me Colin and Pavo yeah the big Tech talk guy we big big Tech gu we're we're big Tech talk guys big guys doing tech tech talks um so uh today's episode is kind of a fun one we decided that we were going to compete me being a total newbie developer and Pavo being the absolute expert Pro we decided to see who can build a to-do list faster and I am going to be using um our friend chat PT using AI to help me build a to-do list and pavle is using his expertise to get him by and we're going to see just how long that takes and what that process looks like yeah I gonna I gonna be using my oldfashioned skills to develop an application yeah so this is a great you know this is really exciting we were we we talked about this a bit and we really wanted to see what this would feel like and I think this is great for new developers and old developers to see how we can integrate these new technologies into you know future workflows so yeah enjoy enjoy all right so we're GNA get started and we're going to see just how quickly I can create a to-do list we are going to see how quickly I can create a to-do list with chat GPT so let's first start I got race against the clock here I think I should be able to make this faster than P um first thing I think I should do is just tell chubbt I want to make a to-do list and what language I'm using I'm using JavaScript so let's start with that I'm always polite with chat gbt so I start with can you help me let's see I know I want to have help with the each aspect of it right so we should do HTML CSS and of course JavaScript I'd like to have help with h the HTML CSS and of course the JavaScript let's see how it does I want to say I'm going to tell it to make it for me not help can you make me me a simpl to-do list app in JavaScript I'd like to have help with the HTML CSS and the JavaScript let's see how it does all right so We're Off to the Races and we're going to test this as soon as we plug it in so let's open the index.html let's see just how fast this can be all right we're going to save that all right let's go to the CSS that's going to take a second this is already going nice and smooth so far which I like looks like this will be a piece of cake um I wonder if we're going to run into any unforeseen issues all right we got that part let's just take a look and see how it looks right now look at that we already have we already have everything essentially that we need let's add the last part all right um and let's reopen that so my first thing I needed to do on my Todo list was make a two do list app let's add oh it's not working maybe I didn't add enough so it didn't actually add now I haven't really looked at the JavaScript here so let's look inside for a moment document. get element by ID if task length is greater than zero add task talk get my idea input value okay that's looking good task let's check real quick to make sure the elements here are I don't know if we've actually added the no we got right here let's let's look right here in the HTML and see if the we have our app.js ah you know simple issue the we need to put the correct name right this is script.js and we should also take a look at the Styles I did call it styles.css that's a typical naming um I called it script.js so that might be our issue let's take a look oh we do have some red flag fls but before we let's just see if we can get it to work ah there we go finish to do list okay and look at that now I'd like to take this one step further because now we have an app right but I want to see if chat GPT is going to do a good job of adding on to this and keep keeping track of the context um so far we basically built this app in about looks like we built this in about a minute or two um so I want to add to this just a little bit I'd like to add a finished list section that shows all the tasks I've done my to do list I'd like it it to show up below the to-do list and I'd like a timestamp help me modify the existing code that you already wrote and let's spell modify correctly all right so let's start with the HTML so all we have to do is add this in and we should probably put this I don't think we're going to want this inside the div it probably be easier maybe we do want it I don't know if that makes much of a difference I'm going to put this inside of our div because it says remaining HTML there and it doesn't quite say I think we can fit it in here so I'm just going to put that right there do a quick save see how it looks okay looks all right so we've got some updated JavaScript so we've added quite a bit this update adds a finish button you can finish St and expand okay let's see here so it's a lot of the same stuff document get element by ID add value click function let's kind of just open this up maybe let's do this just a little bit oops and I want to zoom this over here okay I don't know if there's anything I need to [Music] H so we have our add task function I think we can just take this whole so without really looking should I replace the old JavaScript with this one this new one got it no changes need be made to the Styles okay so we're totally the entire content okay which is kind of what it looked like but I was being I'm trying to be as lazy as possible with this all right so we're going to click save and let's take a look at our to-do list finish To Do List look at that finish to-do list um and let's add a few more tasks um read a book oh it doesn't work with enter all right read a book all right we got our time stamp 95618 p.m. look at that and we can click delete here oh the delete button doesn't work does this delete button work that does Let's Tell chat gbt that didn't work the delete button on under the finished tasks um title didn't work I apologize for the issue is because when we move the task to the Finish list we're still referencing the old parent task Lisk in the delete button event listener even though it's new parent is finished task here's the correct JavaScript all right in the above code I delete the delete function and a new help helper function delete task so we can e reuse it for both the initial task and the finished tasks should I write let's do this again should I replace the entire old JS with this not the entire old JS just the just some parts of it I'll guide you through add a new helper function delete task at the end of our app okay so let's take this right here we going take this at the end new helper function save modify the add task function to the delete button event listener to use the new helper function replace this delete button. addevent listener click let's look for that real quick where is that let's look here I want to look over here ah there you are oh wait why can't I find this delete button this is the only place that has it but huh it doesn't look correct this says delete button query selector so these are slightly different okay let's do this let's do this what should the entire JS file look like now i' like to just copy and paste from you so we're just gonna wait for this to finish up and I think we'll be okay this was kind of again trying to be as lazy as possible with this okay you can copy paste the entire content all right let's take it for a spin let's click save and let's go right back here we're just going to write test we should be able to add we're going to finish that task and let's delete that task look at that easy peasy lemon squeezy all right so we started with the to-do list made that in no time at all then we added to that list uh we added some more functionality um which showed to be just a little bit you know a little bit challenging but nothing too crazy um obviously chat gp2 does get confused even with the you know as as amazing as this thing can be it does get you know it can get stuck and also I'm trying to pretend like I have the least amount of experience possible I don't have a ton of experience but I'm trying to pretend like I am someone who has as little possible knowledge and is just trying to work with this um and this you know took us all of maybe you know 15 minutes in total to do this whole thing and probably even less um so not bad nice little use of our friend chat gbt here I am using chat gbt four I'm using the premium option um so might do another test later on to see what it would be like with 3.5 just to do a comparison but so far not bad all right pavle it's up to you now let's see how fast you can do that Colin has its own adventure this time our goal was to create a to-do item application that we both can make Colin is using chat GDP to help him with cutting I will use my 17 something years of experience as a software engineer and a designer instead we weren't precise about how each of us would approach the problem and we had the freedom to use the tools and techniques we liked mine was to do this as any other project I started with [Music] design I created a figma file where I started putting my ideas I used material design as it is the one I know best at least it's versions 1 and two it also offers UI based components so I can use them to stud developing the application without thinking about the design system and interactions too much I designed an empty screen as the one that the application renders when there are no to-do items since I decided to use the new release of material U or material 3 I had to refer to the documentation while designing its screen after getting the empty screen ready I moved to design the editor that would allow me to edit at too item my initial idea was to put a section on top of the page that shows up when the user clicks on the ad or edit uh a Todo item buttons it will take me two or more days to figure out ah it wasn't the best idea another wrong assumption I made is that I would make my own figma components for the base UI components like buttons and inputs it was unnecessary and soon after I switched to a figma library for material U it definitely sped up my [Music] work after that I started working on the design of a to-do item itself it should have different states depending on whether the item is currently selected or whether it was completed or not after having this ready I could put those together into an application [Music] View I also added prototype wiring so I could click through a prototype to make sure I would make fewer mistakes during the coding phase now it's time to start cutting I use the app generator from the open WC or open web components Library available through the npm init command after updating dependencies which in this case is just my OCD talking in under 5 minutes I got a application up and up and running it was a boiler plate of course but I would spend at least half hour or an hour doing this manually I started coding by copying CSS files that the material you them Builder generated I created this theme at the very beginning before even starting the design because material U is still very new they have yet to release a stable version of web UI components I use their pre-release Library which has minimal supports just yet and a very little documentation so little that I had to consult with source code several times to understand how anything works but they already released support for floter and Android fortunately they have limited documentation on their GitHub prepo for web [Music] components I started the implementation with the ABS General layout and the empty [Music] screen after having this done I started designing the persistence layer I chose the index DB through the idb library which I personally love it is a wrapper over the native indexdb API which is callback based instead of using promises the idb library adds the promises and handy shortcuts to the API it also works well with typescript if you properly describe the data as interfaces it takes the development of any persistence layer based on index DB to a new level after defining my data schemas and general structure I started implementing the persistence layer and the functions like opening the database and handling data store creation then I implemented store logic which includes adding a new item updating an item marking it as completed or deleting an object while marking a task as completed and bu is an update operation I prefer to have a helper function that does that for me instead of repeating code in several [Music] places as a final part of my data store I use the broadcast channel API to communicate changes to a uh to do item done by the store this way I have a centralized place to uh for sending events about the data change instead of managing change notification from different locations having this ready I started building the logic behind my main application I added an initialization state which for now will be a simple progress bar I used figma's Death Mode which generates a lot of code for you primarily related to CSS I used it for the first time and I love it I guess no more checking designs and spending time figuring out how to write CSS for this as long as designers heavily used the outo layout in figma this should be easily transferred to an actual CSS it was getting late and I had to get up uh in the morning for work now it's the following evening and I'm back to programming my to-do application I continue working on the main screen and the list of items I have two lists for current and completed tasks but I kept both in a single store so some sorting is required for now I created a simple nonfunctional list I will get back to that to the list item later in the next step I focus on handling the data store events because of that I have to handle events when an item is created updated completed not completed or deleted each case is handled differently but I must do this only once generally I have to either add a new new item to either of the lists remove an item or moove it uh or moove an item between [Music] [Music] lists [Music] [Music] after that part I can start recreating the figma component for the too item I created the day before but as a web component the list item doesn't have much logic but it has has plenty of stats I know that Colin won't likely work much around styling and design but I can't imagine not doing this as a professional it's just how I [Music] [Music] work [Music] [Music] [Music] after the to-do item looks pretty good I can integrate it with my application I can communicate with the application through Dom events which is what the web platform does and has been doing since the beginning of [Music] it [Music] at that time I realized that figma has an extension for vs code where I can preview the design directly in vs code which produces the same information as in Dev mode cool stuff the last element to build was the details panel with the editor that allows the user to edit a to-do note it was pretty straightforward to make I use the native form element for Simplicity and the better integration with the [Music] browser [Music] [Music] [Music] I hoped to wrap this up within 4 hours but uh now it's evening number three and I still have some work to do but I see the end on the horizon most issues at this moment were with styling but then I realized that I made a design mistake no one asks you to explicitly save a to-do item in any to-do application after editing it I decided to remove the save and the delete buttons from the details view and update the to-do item in the store Once A change is detected because of that I can move the delete button to another place that feels more natural I also decided to add a way to mark an item as completed from the details view as well after some additional work and Consulting the documentation at the Mozilla developer Network the application looks much better Works quite well [Music] too it was when I realized I had made a mistake when handling an event where an item should be moved between lists I had to correct that mistake by making some changes to the code [Music] [Music] [Music] base [Music] [Music] [Music] [Music] more styling changes to the item I created the evening before we should be ready [Music] soon it's time for a snack since it's Saturday I can work during the day that's what programmers like to do during the weekend code more then I discovered another bug when I marked an item as completed more list items would be selected than they should I wasn't sure what was happening and it took me about an hour to fix [Music] this finally I was ready to handle the last item related to up development the initialization screen the native progress bar is not what I had in mind I was sure that Colin wouldn't add T to his application it is an integral part of writing the code sometimes it takes as much time as writing the main code but it has to be done to keep your application stable and this is when using Windows for development came back at me to bite me I started having trouble running tests the test framework the play right wouldn't recognize Chrome in installation I spent an hour reading questions at stack oflow and trying different things but I realized it was time to go under Ubuntu if I wanted to finish this [Music] today all right so this is me uh again uh this time without uh 25x speed um so what happened is I had to switch to Ubuntu to be able to finish my tests and I wrote those tests um for whatever reason the windows um uh wasn't very happy with my test framework and I had to finish this under a different operating system but what I what I didn't show you so far it's the um uh it's the final product so I am back under windows so let me start the application where is it it's in here okay uh so okay let's start the application and I just going to walk you through what I have done so this is my ready too list I have created several uh items designed the to- do application it's done okay now I select uh the create a TS project which is another um item on my list and I can use the mark As done on the other side uh to mark it as done and there it is and the state has changed so develop the Todo application this is also done I can show you that it actually changes the value when I leave the input uh so let me add tests and there it is instantly it is working I can refresh it is working so okay it's completed not completed uh um and also the delete and it instantly deletes the item and the empty screen so yeah that's my application I'm leaving to it to you guys to decide who's done uh better I really don't know by this point uh how call ined um well we'll see

Channel: BigTechTalks

Views: 52

Keywords: ChatGPT, programming, javascript, podcast

Id: QIXI85iOXNw

Length: 37min 25sec (2245 seconds)

Published: Sun Oct 01 2023