What's up SE nerds!! My name is Tripp, I am starting my career in software engineering through a bootcamp. I am finishing up the first phase, and the word bootcamp is perfect for this course! It is hard work, it takes extra practice away from class hours and it takes a lot of dedication to really understand how it all works. Thankfully, I am dedicated and really enjoy learning how to code and seeing the results. It hasn't been perfect and the pace is very fast. I have had to find ways to keep up and really get the content of this phase down.
My approach has been to find ways to better understand what we're doing in my spare time. I hand write labs or projects we have gone over during lectures to make my own notes and really break things down step by step to understand how they connect and how each code 'functions' (pun intended!).
For instance, we had a mini project called "Fetch Dog CEO," where the first objective was to fetch images using a url containing an array of images, parse the response to JSON and add each image element to the DOM. Sounds pretty easy, right!? Well it wasn't as easy as it might seem. For better understanding of how to do this I hand wrote these instructions and code step by step and explained what each step does and how it relates to the content its working with.
For example (as seen in the code below), the first step isn't too complicated, it's a fetch statement that includes a url, then response to JSON, then renderImages(data), does just that renders the image data. I still made sure to write notes beside each step explaining how each step makes that happen. The next part was to add each element to the DOM. For this, I wrote out the first part: function renderImages (objStoringUrls) {; Above function renderImages I wrote *After rendering or collecting the image data, I need a function that adds or renders the images. Above (objStoringUrls) I wrote *This gets the elements from the Object that Stores the Urls. For the next step: urlArr = objStoringData.message; I explained that urlArr refers to the array of Urls within the "message" inside the object. I drew a square diagram next to this, showing the data structure of the array (image of data below), and drew lines connecting each part of the code to it's element in the structure. For instance urlArr points to the elements within the [array of Urls]. The objStoringUrls points to everything within the {object}. The .message points to { "message":[] }. I took the time and continued this for 2 project labs we went over in lectures.
This really helped me understand what is actually happening and how everything corresponds. If you found this method of study helpful, leave a comment and I will add other blogs for this, share the notes I took for the other parts in this code, and provide images of this approach. I feel much better about JavaScript, but still need more practice and experience to keep improving my skills. I'm always excited to learn something new and how it all works!
Data structure reference:
Block of code reference (only the first part talked about in this blog)
Top comments (0)