Forem: Tate Handley

My Final week at Flatiron

Tate Handley — Fri, 31 Mar 2023 13:17:03 +0000

Congratulations on reaching your final week at Flatiron Coding Bootcamp! It's an exciting time filled with mixed emotions as you prepare to complete your intensive program.

During your time at Flatiron, you've undoubtedly worked hard to learn and master various programming languages and tools. You've likely built numerous projects and worked collaboratively with your fellow students. Now, as you approach the end of the program, it's time to reflect on all that you've accomplished and look ahead to what's next.

In this final week, you'll likely be putting the finishing touches on your portfolio and polishing up your skills. You may be reviewing material from earlier in the program to ensure that you're ready for any final exams or assessments. It's also a good time to connect with your instructors and fellow students, to exchange ideas and insights as you prepare to enter the workforce.

As you prepare to graduate, it's natural to feel a mix of excitement and apprehension. You may be eager to start your career as a software developer or to continue your education. At the same time, you may be nervous about finding a job or adjusting to life outside of the structured environment of the bootcamp.

Remember, though, that you've come a long way in a short amount of time. You've demonstrated your ability to learn new skills quickly and to apply them to real-world problems. You've also gained valuable experience working in teams and communicating effectively with others.

So, as you approach the end of your time at Flatiron, take a moment to celebrate all that you've achieved. Recognize the hard work and dedication that you've put in and look forward to the exciting opportunities that lie ahead. And most importantly, stay curious, stay motivated, and continue to learn and grow as a developer. Congratulations again, and best of luck in your future endeavors!

My first week at flatiron

Tate Handley — Thu, 23 Mar 2023 21:32:39 +0000

Thinking back to my first week of flatiron it was a pretty exciting experience, I had no clue what was happening or what I was doing. I still don't but It is something that comes with practice and time. It's easy to get discouraged and feel this sense of "why am I even trying this" but If you nose to the grindstone and just try to take each day one step at a time I think It will all pay off in the end.

Getting into coding is a daunting experience, and can really get you feeling like you don't know anything. The thing is, you don't but the joy of coding seems to be you get to find out!

A basic use of NameSpacing

Tate Handley — Tue, 21 Feb 2023 19:38:24 +0000

NameSpacing was a little endeavor I decided to take upon myself for our Phase 4 project at flatiron, let me explain just a couple of highs and lows of this fun and useful feature of rails.

NameSpacing is a useful tool to prefix the Url path to specified resources. Which will allow your machine to try and locate your controllers etc. under a module of the same name as the namespace.

Yeah it sounds pretty technical but in practice it is a pretty simple set up. when first starting out I went to my Routes.rb file in my backend

now what you'll need to do in this file is just add a couple very short lines of code underneath the first do of the file like so.

DO NOT FORGET TO ADD THE CORRESPONDING END FOR THE DO's

in the end your routes file should resemble something like this.

Now your routes are done you need to make sure your controllers also reflect the use of api and v1. what you will need to do next is create two new folders and rest them inside the controllers folder. Name the first folder api and move it into your controllers folder, then create the second and move it inside the api folder. your files should reflect this.

then drag and drop your controllers into the api/v1 folder. MAKE SURE that your controllers are landing inside the correct file or you will run into bugs that just don't seem to make sense but it is because your computer will be looking for files in the wrong spot.

And to answer your question, no it is not finished. Just a couple more additions to your controllers to make sure you are establishing the communication correctly!

Now in each controller, excluding the Application Controller and your Fallback Controller (if you have one established). Since they all now sit under this api/v1 folder combination you need to have your code reflect that as well. at the top of your controllers where you see the

Controller < ApplicationController

you will need to add the proper NameSpacing, it should look something like this.

API::V1::Controller < API::V1::ApplicationController

And there you have it! your controllers are properly NameSpaced! Now there are other methods of NameSpacing such as use Modules, which require a little bit more code to be written so I wont go into to detail but if you'd like to read up on it (which I recommend) please check out the links at the end of this blog!

Now in the front end what you will need to make sure you do is include an "/api/v1" to the routes for your fetch calls! heres an example.

See its not so daunting a task and actually is something relatively simple to set up, now it does come with its own forms of complications and bugs so do take time to read up on it and make sure you understand how to properly implement this into your projects!

I hope this was informative and helpful in you establishing NameSpacing for yourself!

Scope vs NameSpacing
NameSpacing with Modules

Following the Flow

Tate Handley — Fri, 06 Jan 2023 17:48:18 +0000

React can be a complicated tool when first starting out, it's easy to lose track of the passing of information and frustrating to get back on track once you get lost. So I hope I can provide some insight into understanding how you can keep track of your data when passing it around your app.

The most important part is understanding the "tree" of your app, take the image below for example.

you can see how the data flows from the top down to the lower components, also know as the children or grandchildren, depending how low they sit in the tree. It's always crucial that when you are working in a react application that you first and foremost draw out your "tree" so that you know what information is being passed where. I will use snippets of our second phase at Flatiron for an example of just the basic idea of data flow.

Now like in the image above we start by building our tree. We had our App.js file, which acts as the parent to all the other components we were going to build.

Go ahead and ignore the Route and Switch for now, those will come later. focus on the core components. We have the app, which leads down to the Form, Counter, Wallet, Search, and ComicList, which ComicList contains a Child or GrandChild called Comic. now I'm sure you're asking "how do I know where to start?" these next couple of steps will get you there.

I mentioned STATE earlier, if you are new to React and are lost I highly recommend reading up here:

State and Lifecycle – React

reactjs.org

The first piece of advice I can give when trying to figure these things out is to slow down, and plan what you need to do and take it one step at a time. so,

Step 1:

what do we need to do? If you need to just get information on the page what components are going to need that data to be able to render it?

Step 2:

Plan on how you will need to do that. What is the job of each component going to be tasked with? What data are they going to need to be able to preform that job? If two siblings need the SAME data how will you pass that down to them both?

Step 3:

Take it slow and remember to back track if you get lost.

Lets look at the code

Let's say you have already written out your fetch and got your data appearing in your console tools. But now you need to pass the information to its desired component. In the tree to our project you saw a ComicList with a grandChild Comic. If I was a betting man, I'd put my money on those two being in charge of displaying the information. Now if you did your fetch correctly, and to be sure here is a best practice example:

then you are already using the setState Function "setComicList"
if the best practice method is new to you please read up here.

Using the Effect Hook – React

reactjs.org

ComicList is acting as the container that renders each individual comic, So lets pass the State Variable we created to maintain this newly acquired data down to that component like so.

now that the data has reached ComicList, we need to use a method to get each object out of the array and give it some individuality. that method is the .map() method. it looks a little something like this.

what this is doing is taking that state variable containing our data, iterating through the array {...} and picking out each object using the key={} so use the ID to identify each object. the Spread also allows us to de-structure the data so it makes it easier for use to input what we want our comic cards to look like. and since we created the Comic component in our map function. the data has been successfully passed. the final step is placing the passed data in its correct places. Now I mentioned that we de-structured our data using the spread operator in the map function, what that looks like is this.

and what it is referring to is in our db.json file.

our destructured data matches the data inside the db.json file and we use it that way to target those unique identifiers!

now all there is to do is place it in the correct places with {} like so.

and with that you have correctly fetched data, passed it down, mapped it, and passed it to its desired location and rendered it to your page!

There is so much more to understand when it comes to data flow and the passing of information but I hope this was a good lesson in understanding the basic flow of passing information.

If i have left you confused I highly recommend researching some of the things I have mentioned in this blog. .map(), State, useEffect, async and await. are all highly useful and crucial to understand. Here are a couple links to get you going on your journey!

React – A JavaScript library for building user interfaces

reactjs.org

Lists and Keys – React

reactjs.org

Thinking in React – React

reactjs.org

Learning how to fish for data

Tate Handley — Fri, 09 Dec 2022 18:59:38 +0000

Coming to a close on Phase 1 of the Flatiron coding bootcamp, I look back at what we have gone through and am a little surprised at how much has been accomplished.

I helped create a webpage database that uses an external API to fetch and organize information from the government monitoring library Fish watch.

We started by finding the open sourced API and created our fetch request. first to the API then to turn the .json data into something legible for our local environment to understand. It went a little like this:

You can see we reach out to the API and pass the returned .json data to be turned into something legible by our local machine. we then took that data and ran it through a console.log to make sure we were collecting the correct data. which in that case we were! Now instead of breaking it down step by step I'll just share a couple big take aways that I learned. This project was something that really solidified my understand of manipulating the DOM. Having to make use of tools like console.logs and debuggers to make sure when we created our listener events for the page that we were not breaking the flow of our code.

the piece of code I was most proud of by the end of the project was the function that rendered our fish information, pictures and functionality all in one. (best practice? probably not, but it was still impressive to me.)

We first created the variables we were going to need to properly place the information on the document and have content appear on the page. Creating a div "liveWell", an h1 tag, a couple P tags, and another div which would act as the container for the images and information. Next we went on to populating the page with the content.

We first worked on creating the image variable so we would be able to access the data, giving it an alt id as well to make it an easier process down the road. Also created the container for the details where all the P tags would sit inside the cards. We added the class so we could tie it to our event listener that we created a little later on.

We also needed to add in classes for the pulled elements so we could target them and append them to our containers:

We specifically targeted Taste, Protein content, and Health benefits. Using the title of each container to be the space for the species name.

And now since we had all our information all we needed to do was append it to the page!

At this point we just were not getting the information we desired so we, came to the conclusion that if we interpolated we could access the data we were searching for and get it to act for each individual fish based off of the elements within the objects.

But wait! now all the data was showing but we needed all of our appended data to hide behind the images of the fish. What did we miss? That event listener I had mentioned earlier! So we went back and attached it and ended with the final piece of code:

It looks like a lot but being able to break it down and know what each line of code is doing was a big success and kept me wanting to fish for more Data.

If you'd like to check out the page we created please check out the repo here!