This is how I've been coding & debugging in JavaScript lately. Is this correct?

8d (edited) • 🔔 Wins

I was coding and practicing a project and I learned some new things as I was coding. It was very fascinating, I am working on a digital clock project in JavaScript, and I learned there was two ways to write the JavaScript logic. You can write the JavaScript logic for the toggle either with your custom logic ai give you or you know how to write or the second way is to use the built in strategy like with the toggle and connecting it to the time on the main clock section, you can also use the Intl.DateTimeFormat.

I also learned that with intl.DateTimeFormat api, there is two ways to write it. One of the ways was using a fixed string , but your time will be static and not update,and the other was using new Date() which will change your time live on screen, but the newDate(); doesn't format two different times for the 12 hour and 24 hour format until it turns 1 pm.

I chose to go with the Intl.DateTime and newDate(); method.

I also learned when I first started with this digital clock I had to start over and over because I kept running into this same bug where the city and time values would display before you click the show city button. I tried a lot of methods to debug, I tried commenting out, using breakpoints,looking at local scope, and looking at the call stack, I tried more debugging strategies. I also tried ai over and over and looking in documentation. I tried asking ai to create a mini project around the problem, and that helped at first.

Then I asked ai how it would code my version of the project, and it showed me the code for html, css,JavaScript, and I commented out or removed my other code tested ai version of this digital clock, and found the reason for this bug was because I didn't include the city.display = 'none' or hide, but I didn't include the city.display to none or hide or block, it was one of those three for this issue, and the second issue for this was I needed to set an interval, and both of them needed to be in the citySelect where the cities were in the drop down because you don't want the city and time to show on screen before users select the city and press the show city button.

Even though I found the problem to the bug through asking ai how it would code it's version of my digital clock, I took ai version out of my code editor, and took what I learned as well with the html file which was I need to create a section for the navigation items so when the users click on a navigation item it take you to the section from each navigation item. So I started over and create the navigation item and the sections for the navigation items, but I am not done yet with creating section for it and the whole project.

I asked ai what this debugging strategy was where you ask ai how it would code your version of the project, and if this is a debugging strategy. Ai told me it was called comparison or comparative debugging, it was either one of them.

Is comparative/comparison debugging the correct name for that debugging strategy Hayk? Is what I did with asking ai to build/code it's own version of my project a debugging strategy? Did I debug correctly?

I also found the bug was coming from the way I structured my html code, and not only my JavaScript file, and I learned you can't just break down JavaScript logic and not break down html. So, I started over on the project, and took what I learn from the ai's version and coded on my own of what I learned the html file, and I broke the html file up into smaller problems and step by step too as well as JavaScript, and I am going to do that for CSS too. You have to plan and break it into smaller steps for the html file and css file too, not the just the JavaScript code, well for me personally.

I learned that sometimes the bug is in how you structured your whole code, like your html file and not just the JavaScript file.

I used google to find the concept Intl.DateTimeFormat, and then I copied the code and went pasted the Int Date Format code into VS Code and commented out my custom logic for the digital clock, and then I asked ai why wasnt it working and it told me and kept going back and forth with ai, and asked ai questions about the intl.datetime format. I also changed and tested and added more logic in the fixed string and the rest of intl date time format code.

I also asked ai to give me mini projects around creating a toggle to practice using intl.datetime format concept as well as creating a toggle and connecting it to time where you can click on the toggle and the time format between 12/24 hours, I also asked it for more mini projects and medium projects to practice the Intl.DateTime format when I am done with the digital clock project.

I also recently have been first trying to write code on my own and then think of what concept is this, and when I get it wrong,(which I am getting better at identifying concepts) I will ask ai for the code, then ask ai what concept to search in the documentation and try to read and understand documentation, which most of the time I dont understand documentation, so I will go to google, that doesn't really work so I go to youtube, and if that doesn't work I ask ai.

I learned to sometimes ai can give you concepts that are not in the documentation but the concept it gave you is apart of a larger broader concept. So, when that happen, I try to go to youtube, and google and if that doesn't work I will go back to ai and ask questions about that concept, examples and coded examples on the concept, how to code the concept step by step, sometimes when to use the concept.

Recently, I will find the concepts either by telling ai the issue and asking what's the concept for that , but I notice ai get it wrong most of the time so I ask for the code for one feature that I am writing code for at a time, then ask the ai what is the concept for this code it gave me. I am also starting to search google for concepts, which I still struggle with.

Lately, I've been coding by first asking myself what problem does this project solve or even if I don't always ask that, regardless if I ask that question or not, I always ask myself what features does this project have. To figure out the features it needs to have, I ask ai, I look at the other projects that are the same thing, and I also recently learned from ai is you can ask users or if you don't have users to ask that are going to be using the project, you can think about you as a user, what features would you want, and how would you want to use this or for the project to be able to do. I got the idea of looking at other projects as well from ai because I was doing research on this.

You can also look at what features are not there from other people who have done the same projects online, and add it, similar to competitor research just to get an idea even though I haven't went in depth like this, but it just came to me.

After you figured out what problem this project solve for users and what features it needs to have or is going to have, you then break it up each feature one at a time into smaller steps and smaller problems first in your html, and ask ai for concepts or tell google what you trying to do and figure out the concept and try to read and understand documentation(Even though I am struggling with this, but I am trying), and also if dont understand can ask ai to help you understand the concept. Then I try to write code on my own, and if I get it wrong I tell ai what I am trying to do and ask ai for code and then I write the code, then I ask I ask questions about the code and what it means. Sometimes I may comment out each code line by line or block of code by block of code to see what that code does and it's purpose and what it will do if I do that.

Then from I keep breaking up each feature one at a time trying to understand documentation and using ai, and google for both html, JavaScript and CSS(Even though I don't too much use documentation for html and css). I also ask questions about the code and the concepts to search in documentation.

Then when I run into an issue or bug, I will try debugging strategies like commenting out, trying to use documentation(even though I struggle heavily with documentation and a lot of times have to get ai to break the concept down to me and ask questions about the concept), searching google, and youtube(Even though most of the time I dont find the answer on google or youtube or I don't understand), sometimes I will look on stack overflow, but that doesn't always work for me either. So, I usually moslty use ai to break the concept down to me and coding and try to include documentation into that. Recently I am using break points, local scope, and callstack, and I feel like that is kind of working because I remember I debugged an issue I think by looking at call stack and asking ai questions about it.

This is how I have been recently coding in JavaScript and what I was planning as well to implement going forward.

Is this correct Hayk and am I doing everything correctly with debugging as well as coding from scratch or am I doing something wrong? Is this how web developers usually code and debug?

Hayk, will employers hire for a front end web development position with the way I am currently coding and debugging? I don't mean right now, but after I get in the internship and do the internship and finish everything up for front end web development. I was curious about that because I was wondering is the way I am debugging and coding correct?

2 comments