Conquering JavaScript

Posted by Sharon Watkins on July 30, 2020

This was a beast I struggled to slay….JavaScript.

There were a few factors that contributed to the chaos….

Ruby was my first programming language. It is structured and discipline. This is the norm I got use to. It never failed me.

JavaScript is part of the Frontend Trinity(HTML, CSS and JS). I am familiar and comfortable with HTML and CSS. So how hard could JavaScript be?

While it is true that programming languages share certain characteristics, JavaScript can be a little chaotic for a first-timer. enter image description here

And this lead me to deciding to repeat the JavaScript section. It was tough decision for me. I so desperately wanted to keep pace with those in my original cohort. At first I felt like a complete and utter failure. I decided to take a step back and look at my decision. Instead of looking at the setback negatively I needed to see it for what it really was….an extra investment in my coding journey. I could only improve my JS skills by spending more time with it.

Somehow I had to figure out a way to organize JavaScript in my brain in order to build my module 4 project. I eventually saw a pattern to getting JavaScript to work for me. Basically when you are working with JS there are 3 parts that need to be present in order to get things to start happening….Fetch-Manipulation-Render.

Fetch- Obviously we need to grab some data…or send data back to the API from the backend in order to start presenting it to the user. This is where fetch comes in.

Courtesy MDN web doc…..

“The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.”

Manipulation- When we finally do successfully pull the data from the backend we need to do some stuff and things(thanks Rick Grimes :) ) to the data in order to present it to the user. We do this with the help of concepts such as DOM querying and Event Listeners. enter image description here

Render- Now we have to serve this data that we fetched and manipulated to the user. We do this through methods and attributes such as innerHTML and template literals to write HTML dynamically and many more.

Obviously there are other intimate details involved in being successful with the build. This is just a wider scope I used to organize what I was doing.

Anyone would be justified in saying JavaScript’s looser rules could be considered welcomed flexibility. And they would be right. But for someone like me the more organization and structure…the better.

But….Probably the most important lesson I learned during this project is….

When stepping away from your desk always…ALWAYS drop your text editor down to the task bar. Otherwise your very helpful cat will decide you need assistance with your code and proceed to walk across your keyboard and create a totally new programming language that only a cat could understand.

enter image description here