DEV Community: keeganmcroberts

15 weeks of Boot Camp

keeganmcroberts — Wed, 14 Sep 2022 01:47:56 +0000

On the eve of my final bootcamp project presentation, I've had plenty of time to reflect over my time spent the last 15 weeks in school, bunkered down in my apartment, face glued to my computer screen, and wasting away the hours trying to learn a new concept I had never been even remotely familiar with: software engineering.

I truly cannot believe I've made it to the point I have, with all of the ups and downs, frustrating moments trying to learn a new language, and trying to understand why certain things operate the way they do. "This feels like it should be easier", "Why cant this work the way I want it to work?", "Whats the point of learning this when I probably won't use it?". These are all questions I frequently asked myself over the course of coding bootcamp, and questions I don't believe I could have truly understood until this point.

My overzealous self could not comprehend that it really does take a brick by brick, stone by stone, built from the ground up approach when learning how to code. "Why did we even learn vanilla javascript in the first few weeks when we are completely switching to a new JS library in React?" "What was the point of even learning Sinatra when we are switching to Ruby on Rails next week?" I now realize that even the smallest of concepts and details build off one another, and, in order to understand fun functionalities like a .map or a .filter, you must first understand what an array is, how we can access an array, and what can be done with arrays. Concepts like these seem silly and trivial, but there is truly no skipping steps while learning how to code.

School was frustrating at times because of this simple idea. And, unlike conventional school in university, I didn't believe I could miss a lesson or skip over a concept in order to get further ahead - you really must take a hands-on and fully in depth approach in order to truly understand and apply the things you learn.

With this understanding also comes the understanding that software engineering is an ever evolving science which breeds new languages, new software libraries, new concepts on every given day. There will always be more to learn and it is ok to accept that you do not know everything there is to know. But it's imperative to keep in mind what i've reflected over above. Learning takes time, practice, dedication, and persistence.

Even after 15 weeks, my imposter syndrome still gets ahold of me. And while I do often question whether I can fair in this industry as a software dev, I find solace in the fact that these are emotions I experienced even WHILE in coding bootcamp. And despite those feelings I experience, here I stand, 3 days from graduation, with a fully built-out single page web application that exemplifies all of the things I've learned over the last 15 weeks, and I am extremely proud of what I've built.

Custom serializers with Ruby on Rails for nested objects

keeganmcroberts — Tue, 13 Sep 2022 16:03:54 +0000

While creating my capstone project for the last week of coding bootcamp, one of the biggest initial challenges I faced was, per the project guidelines, creating a project with multiple many-to-many model relationships. After scouring my brain for ideas, I eventually settled on a concert tracking idea which would satisfy the requirements of the project.

The concept made sense in my head and I knew which models were necessary to make this work. The process of generating the models, assigning them macro associations, and testing those associations in the Rails console was seamless and I was very content with the idea I had settled into. However, it wasn't until I actually began making API requests from my front-end to the back-end model controllers in order to handle my data in React that I realized I was not getting the specific key:value pair objects I needed in order to make this work. The join table between my three main models was only giving me the id of an object, rather than the values of the object itself. I knew this would require some sort of serialization but just didn't know how to go about doing it.

Basically, my models consisted of Bands, Venues, and Dates, all associated with one another through the join table of Concerts. A band has many venues through concerts, a venue has many dates through concerts, so on and so forth. My intention was to create a concert tracking app which would display a list of concerts with information such as the date, the band playing, and the venue which is hosting said concert. The problem for me was, the Concert object which held all of this pertinent information, necessary for rendering the particular details of my project, only held the id for each of these objects when handling the data in React.

My fetch to back end server in order to receive access to this Concert object was returning a promise in the form of:

{date_id: 4, venue_id: 12, band_id:7}

While it made sense to seed my data in the backend to represent the object we see above in order to create the join table, in a perfect world, for the purpose of easier accessibility through javascript object dot notation, I wanted my object to look more like this:

{date: "10/23/2022, venue: "CrossRoadsKC", band: "BROCKHAMPTON}

After playing around with the serialization for the Bands and Venues and Dates models, my solution looked somewhat like this:

def all_concerts
    self.object.concerts.map do |each_concert|
      {"concert_date": each_concert.concert_date, "concert_venue": each_concert.venue, "concert_band": each_concert.band }
    end
  end

Basically all I did here was create a custom object which allowed me to directly name a key and assign that key the relevant value I needed. It does this by taking an instance of self, which is the particular object executing the current code - in our case, either a Band, Venue, or Date - and maps over its nested concerts to perform a specific action. In this case, that action is taking each concert for that particular Band, Venue, or Date and assigning them keys and values that the concert join table had access to through its belongs_to association.

The object "band_concerts" would then show up as a nested object to my bands each time i made an API request to the backend, giving me the exact object I needed when handling my data on the front end, with easy access and pertinent information for each of the models I was working with.

useNavigate Hook in React JS

keeganmcroberts — Tue, 30 Aug 2022 15:00:27 +0000

The useNavigate hook is one of my favorite and easy-to-use hooks while programming with React JS. It offers more functionality of the similar yet antiquated useHistory hook, only with easier compatibility and more features. It presents a very streamlined approach for navigating pages and redirecting to specific URLs of your application.

To Start:

useNavigate requires React Router Dom v6 as it replaced the useHistory hook of older React Router Dom versions. To install this package:

npm install history@5 react-router-dom@6

You will then have to import the hook from React Router into any functional component you wish to implement the hook.

import { useNavigate } from 'react-router';

note: useNavigate can only be used in functional components and cannot be used for class components

Define a variable equal to the useNavigate hook inside of your functional component. We will call it "navigate" for the purpose of distinctiveness.

let navigate = useNavigate();

Then:

Call the variable anywhere within your component and pass in any route which has been defined in order to redirect to said route. In this instance, we are calling navigate('/shoppingCart') inside of an onClick function in order to re-route to the designated route upon clicking.

function Home() {
  let navigate = useNavigate();
  function redirect() {
    navigate('/shoppingCart')
  }
  return (
    <div>
      <button onClick={redirect}>View Shopping Cart</button>
    </div>
  )
}

Additionally:

useNavigate can be passed numerical arguments in order to navigate back to the original page.

function ShoppingCart() {
  let navigate = useNavigate();
  function redirect() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={redirect}>Back to Home</button>
    </div>
  )
}

Here we can see that, instead of a specific route (eg: /home) we pass the numerical argument of -1, which will take us back to the former page.

Similarly, while -1 is passed to useNavigate() in order re-route to the former page, 1 will re-route to the next page held in history.

Thanks for reading and I hope this short tutorial has proven helpful.

4 weeks in

keeganmcroberts — Fri, 01 Jul 2022 01:00:17 +0000

After having completed the first of five phases of my coding bootcamp, undertaken and grasped the rudimentary concepts of Javascript, implemented them into a practical web-application, and now find myself attempting to learn my second language, React, software engineering school has been every bit of the challenge that I anticipated it to be.

When I first made the decision to switch careers after having spent years trying to make use of a college degree that I had no interest in using, software engineering was not even on my radar. But in a random twist of (hopeful) fate, I suddenly found myself applying for the Flatiron School of coding, and I am definitely glad to have done so.

What intrigued me most about the opportunity to become a full-stack software engineer was many of the prototypical characteristics that one might list when searching for a job they think might fulfill their life; robust job market, the usefulness and diversity of a software engineering certificate, flexibility, ability to work from home, money, etc. However, there is one aspect of coding school that I never would have expected to enjoy so much up until this point: the challenge that it has been.

I had my doubts when entering bootcamp. Particularly the idea that, having no prior coding experience, I would not enjoy the material. Yet still, oozing with hubris, I had no doubt I'd be able to grasp the concepts with ease. In reality, my experiences have proven the exact opposite of these sentiments to be true. The program has required my utmost persistence, perseverance, and brainpower to succeed, and still I genuinely enjoy learning new concepts and functionality with each new day.

The first four weeks have been fulfilling yet frustrating, thrilling yet exhausting, fascinating yet mundane at times. The same problems and concepts I find myself banging my head over are the very same problems I get excitedly eager to overcome. I believe the phrase "There is beauty in the struggle" is largely applicable here, and accurately depicts the intensely creative process that is learning software development.

This challenging roller-coaster of emotions is what differentiates my experiences in coding school so far compared to my undergraduate studies; despite all its challenges and frustrations, I only become more insatiable with the desire to learn more and hone my coding skills. While most days do not come easy, every kick of Serotonin when passing a test on a lab, to the constructive relief when debugging an error message on an app is motivation to keep striving for more knowledge.

Most importantly, I have to continually remind myself that this process is not easy by design. When I feel perpetually behind in the program, I have to remember that the languages and concepts we are learning in a matter of weeks take many people years to master, and Flatiron certainly does its best in preparing us for the workplace by throwing so many expectations our way. A wise man once told me "You're doing better than you think." which is a necessary reassurance while enduring the slog of coding bootcamp.