DEV Community: AnthonyH00

Fetching data with Nested Objects

AnthonyH00 — Thu, 28 Jul 2022 19:22:53 +0000

So, I've decided to create this blog because I've seen several articles with people experiencing the same issue I dealt with. fetching data with nested objects.
For people new to programming, such as myself, I think we often find ourselves running into hundreds of problems a week as we learn new skills. The most frustrating part about this, at least for myself, is running into an issue you've once resolved. For me, that is this blog topic.
I first ran into this issue during my bootcamp course, but I was able to resolve it fairly quickly(maybe a few hours, up to a day). It was also from a public API. The next time I experienced this issue, the data was created from scratch, and when fetching the data, I would get a response that looks like the following:

When trying to access the data, I often ran into a few recurrent errors. Here are the most frequent ones I've encountered:

The server would try to identify the "id", and would fail to read it, despite console logging and confirming data being returned is correct.

The server cannot access the route. Assuming the route is setup correctly, this error occurs because the path to access the route,

http://localhost:3000/data/`${data.id}`

cannot access the id of the data. This would work if there was a numerical value that represents the value in the first image above. The path would look something like

http://localhost:3000/data/0/`${data.id}`

What eventually worked for me, was using the Object.values and data.filter methods. Another important factor I discovered, was knowing how to Google(I'm still not good at it, getting better though). I didn't find a specific article or solution for this problem, I put pieces together from different articles, kept trying until I produced a result that allowed me to keep going. Heres what the code looks like:

useEffect(()=>{
      fetch(itemURL)
      .then(res => res.json())
      .then((allItems) => Object.values(allItems).filter((value)=>{
        return setItems(value)
      }))

     },[])

Although I was able to resolve the issue to an extent, I still am left with questions. How does the data return as nested objects? Is it due to the amount of data being fetched? How can we fetch promise data from nested objects, and access them? Thank you if you read this far. If you have any questions, answers, or input, feel free to reach out. I am always open to learn something new.

User Authentication, Rails Backend

AnthonyH00 — Mon, 10 Jan 2022 10:15:19 +0000

Ever wonder how that sign-in window, login screen, and/or authentication request is created? I definitely did. It would be more accurate to say, prior to my coding bootcamp, I attempted to learn coding on my own. Authentication was one of the topics, I found myself being really confused with. I didn't understand it, and couldn't find the exact information I was looking for. Armed with a little more knowledge (and practice), I hope this will help you better understand how to implement user Authentication, focusing on Rails backend.

First, let's define Authentication. Whenever you attempt to login to a program or application, your credentials are checked against the server it was setup/monitored on. If the check passes, your account is authenticated and your account will login. Basically, it's confirming you are the account that you're logging into.
Now that we have defined Authentication. How can we setup code that implements it? There are several ways to do this. I prefer using sessions, so we'll implement this process now.
Step 1:
First ensure a SessionController is setup. Plenty of ways to create a SessionController, but I use the terminal command,'rails g controller Sessions'. This will be used to check the account credentials being typed and the actions that follow. See this Ex:

using data from your database, along with the params hash and session ID, I setup a cookie in the session hash to handle the action for checking to see if the information typed matches the credentials in the database.
Step 2:
Once the controller has been set, you'll have to create the POST route which will submit the user inputted form on the frontend, to the route specified. See the following EX:

Step 3:
Ensure error checking is implemented. So when a user types an incorrect username and/or password combination, they'll receive a descriptive error.

There are more steps to the Authentication process on the frontend (navigating to the route/site, entering credentials, etc) but I wanted to give an overview of the backend steps that I've used that works. Personally, finding this information had been difficult at times, as I was just learning the material. I hope this can be of some reference for all beginners.

More Class Please...

AnthonyH00 — Mon, 10 Jan 2022 10:14:24 +0000

Hello again! We're back, and here to talk about our favorite subject, class components. More specifically, the lifecycle hooks. As you may remember, I previously posted about the three main phases of class, Mounting, Updating, and Un-mounting. Within each phase, there are several processes called lifecycle methods (or hooks) that help create the applications the user sees, and interact with. Well, let us get right into it!

componentDidMount: During the Mounting phase, this is invoked immediately after the initial render method. This method can be considered the original "useEffect" hook (with the empty dependency). So, componentDidMount is used for extended running procedures, like fetching data. See how functional component's, useEffect, and class component's, componentDidMount, are similar, below:

useEffect

componentDidMount

componentDidUpdate: Moving on to the Updating phase, the method componentDidUpdate is invoked right after an update occurs. It must be enclosed in a conditional statement to prevent an infinite loop (see example below). Also, notice the repetitive code in the fetch. Another reason, useEffect is more widely used.

componentWillUnmount: Lastly, at the Un-mounting phase, componentWillUnmount is invoked prior to the component getting unmounted and destroyed. Basically, the component is deleted and the page is cleared. One thing to note about this phase; Never call a setState() on this method, as nothing will be rendered. See an example below:

There are more lifecycle methods that are not used as frequently. Mounting on initial render, updating after a render, and un-mount before deleting a page are core methods that should be remembered. I hope you've gained a little more insight on how class components operate to print your ideas to paper.

The 7 Layers of OSI

AnthonyH00 — Mon, 10 Jan 2022 07:13:01 +0000

The seven layers of the internet. Specifically, computer systems framework used to communicate over a network. This is referred to as the OSI(Open System Interconnection) Model. The OSI model is really just a concept, first implemented by the majority of Computer companies in the 1980s. It's not a tangible protocol. It doesn't have any functions, or . It just helps us better understand the processes occurring.

Typically (as you can also see in the picture above), the OSI model is presented and read in descending order, but for general understanding purposes, I will start from the first(bottom) layer.

Physical (Layer 1): As the name states, these are the physical connections that connect devices. Think, internet cables, wireless connections, etc.

Data Link (Layer 2): This layer connects and disconnects any connection between two nodes. This layer communicates using bits. There are two sub-layers within this, LLC(Logical Link Control and MAC (Media Access Control). The former controls the flow and order of frames, error checks, and identifies network protocols. The latter, uses MAC Addresses(which can be considered as a node ID), to send and receive data between devices.

Network (Layer 3): This is where you unplug and plug in the router, and become your household's savior. This layer handles switches and routing, using logical (non-physical) routes to transmit data. Basically, it uses addressing to route packets to its destination.

Transport (Layer 4): This layer handles data transfer between systems and/or hosts. Now that it has data, and needs to transfer, how much data needs to be sent? When and where, etc.

Session(Layer 5): Establishes communication channels for two computers and/or network devices to speak with one another. This is a prime example of perfect communication skills. A computer starts a session, waits until data is transferred, and when done, the conversation ends.

Presentation(Layer 6): Helps translate the network data to a form that application itself can understand, and vice versa.

Application (Layer 7): Information here is received by end-users where software such as web-browsers,FTP, helps display that incoming data to users.

These are just basic definitions for the OSI model. There are many(and I mean MANY) sources out there that delves deep into each layer. Although still widely used, much of the modern internet is based on the TCP/IP model.

Making the Switch...

AnthonyH00 — Fri, 19 Nov 2021 14:17:51 +0000

At the start of my tech career, if you would have told me I'll be in a coding bootcamp in a few years, I would have thought you were crazy. Why? I believed it was extremely out of reach.
Most colleagues, friends, and professionals I know that changed careers in IT, have switched from Software Engineering to Network Engineering. Usually citing plainness, and tediousness of coding as the main reasons for their decision.
I started my career working in Helpdesk support. As the company was small, after a short time, I touched all levels of Networking, from installing apps, to using heat maps, and setting up Networks from the bottom up. I enjoyed the challenge of building out a network from scratch. More than that, when it aligned with what the client needs were(I'm looking at you, bandwidth), that generally made me happy. Source:https://community.fs.com/blog/tcpip-vs-osi-whats-the-difference-between-the-two-models.html

After working in Helpdesk for a few years, I moved into more of a hybrid role, splitting onsite, remote, and managerial work. From here on, I worked with various departments, assisting with NOC, Escalation, and the Solution teams. I think this is where I became interested in programming. It was the only department I didn't directly work with, but collaborated a few times and my interest was piqued.
I also learned a valuable lesson during this period. Why I enjoyed Networking, had nothing to do with Networking, and more so, who I was as a person. As the company grew, I realized the values I held, were no longer applicable.
I did a few free coding courses, (CodeAcademy, Solo learn, among others..) but was very hesitant about taking it a step further. I was comfortable, complacent, and it wasn't a decision I could just make on a whim.
The longer I fretted over this, the unhappier I was. So...I just moved. Once I made that decision, a weight was lifted off my shoulders, and out my pockets, but I was satisfied with my decision.
After a few months into the bootcamp, I believe I made the right decision. Although, this is not easy, by any means, I am moving forward, learning new things everyday. I do agree, some of what I've learned has been tedious as it's been daunting, though this has been the most creative freedom I've had in a long time.

Cover Source:https://www.nytimes.com/2020/07/01/technology/personaltech/make-your-tech-last-longer.html

Show me some Class!

AnthonyH00 — Thu, 04 Nov 2021 18:08:03 +0000

Class Components.

If you’re new to Software Development, specifically, React, you may have heard of functional components. Maybe you’ve seen knowledge bases mention class. Maybe, you’ve long searched for an answer and of course, didn’t find it (which almost NEVER happens).
What exactly is it?

Class Components are slow, robust ways to define React components. They consist of functions that add functionality to the application. As someone familiar with functional components, class components was interesting to grasp. There are some key features that are unique to it.

First, class components have base access to the state. State determines the current behavior of the component, and is changed by calling the setState() function. Simply, whenever the current state needs to change, the setState() interprets the change.

Secondly, class components have access to the React lifecycle. Now, you may be asking what in the world is this? You know what, so did I. I’m still asking myself this question. These are basically the React lifecycle from a variety of points during app creation (fetching data, database creation) to inputting elements in the DOM. We’ll cover the three main phases: Mounting, Updating, and Un-mounting.

Mounting:
At this phase, we’re inputting elements into the DOM. Right before mount occurs, the constructor() must be called. The constructor() initializes the local state. This means, you can set the current state directly. As for setState(), that must be used in any other method instead. The constructor is also where this.props object is implemented. In order to use the local this.props, super(props) method must be called, meaning you cannot use this until after the parent constructor (super),is called. Super just refers to the parent class constructor.

Updating:
This phase includes the only required method in class components, render(). Render has to return some type of data, even if it is null. Why? It's because by default, the component file calls the render method to display the JSX or HTML data.

Un-mounting:
When you no longer want a component in your DOM (because it randomly broke, per usual with code), and want to remove the component, this method is called. This phase is pretty straightforward. When a component is deleted, this method is called. When you're ready to press that red button you're receiving "DO NOT PRESS THIS BUTTON!" alerts for, press it and see what happens, live a little.

If you do not leave here more confused than when you got here, I've failed you. Do not fret though, Class Components get much MUCH, more granular than this. I purposefully left out lifecycle hooks for each phase. I'll go into this in a separate post (wink, wink). I wanted you to have a base understanding of class components and how it works. What are class based components? How do they work? Hopefully this answers questions like these. Lastly, this is for someone beginning in the world of programming, A fine world, that one day, you'll be creating yourself.