In the initial weeks of my Frontend education, I moved from playing around with random functions arrays to the three pillars of web development. This is where the learning curve began to steepen and the excitement to build.
The three pillars of web development are manipulating the DOM, Javascript events and communicating with the server. In this post I'll be focusing on server communication.
One of the more abstract concepts in web development, this is where you begin to have to acknowledge where on earth the data for your website is going to come from, as well as how and when your code is executed to maximize efficiency and reduce bugs.
The project that developed my understanding the most so far has been lab cutely called "Toy-Tales." Its a static page for displaying, uploading, and liking Andy's favorite toys from "Toy Story." This nostalgic background did little to lessen the headache this project gave me when I first started.
As you tell by the title the focus of my struggles were on the POST and PATCH functionalities of this site. My POST is meant to allow the user to upload new toys to the site. As seen below, the crux of my post functionality is divided between two functions.
›
I built the submission event as the bridge between my Event-listener and the POST request. Its main job is to hold the constant that interprets the information gathered from the submit form event. This gets sent my render function that handles.... several things.
Something I learned before and after this assignment was to keep your functions to on the smaller side, preferably with singular task. This was lesson was hard learned as this function is difficult to look at. The first part of the function appends the elements of the toy's names, images, and like counts to the DOM. Below you will notice an event listener for a like button. What was difficult at the time but so simple in hindsight was the syntax to allow the user to add multiple likes to the like counter without refreshing.
Instead of "toys.likes +1," I used "++toys.likes." This is significantly more efficient than other methods I had tried. This included assigning the amount to a new variable and even trying to refractor my initial likes.innerText (to what, I don't know). My final answer was deceptively simply, but also taught me loads on Javascript syntax.
Finally, my PATCH request required two features I wasn't yet familiar with. One being the location of the patch being toys.id, which informs where my likes need to go, and the object I stringify within the body, which allows me to keep my syntax as simple as possible. What I took away from this exercise was that refractoring doesn't mean using bigger words or more complicated structure(and to make my functions smaller).
Top comments (0)