Forem: rossonevan

My Bootcamp Experience

rossonevan — Mon, 03 Oct 2022 15:15:28 +0000

For the last 4 months, I have been attending the Flatiron bootcamp in the Software Engineering course. With just one more week to go, I thought I'd write down my experience throughout the course.

When I first started the bootcamp, I was feeling super nervous and overwhelmed with the amount of information we would be learning in such a short amount of time. There were four phases, each phase was 3 weeks of:

learning something new the first week
taking a coding challenge on this new information the second week
creating an application using this information for the third week.

The fifth and final phase was creating an application on your own, utilizing all the skills learned throughout the program.

For someone who only had a little experience in coding, the first couple weeks of learning vanilla JavaScript was the toughest hurdle. There was so much information to understand and implement, easily overwhelming me to reconsider doing this course. But with enough perseverance and help from my peers, I managed to pull through and pass the phase.

As the phases went on, I started to become more comfortable with the scheduling and structure of the bootcamp and less overwhelmed. Even though we were still learning new skills for each phase, I felt I was getting better at learning new skills in the short amount of time and implementing them into my applications. Each code challenge was starting to become easier and easier as I started to understand the material better.

As I was in my first phase, I remember seeing students' applications for their last phase and could never see myself ever accomplishing what they have. But now that I am in my last phase, I can confidently say that I have proven myself wrong. I have acquired the skills those students learned as they went through this program and hopefully will inspire other students with what I have achieved through my own project.

But the most important part of the bootcamp is the amazing people I have met that have helped me get through the toughest of times. All of us were going through the same struggles and were always there for one another. I never felt like I was alone and for that I am truly thankful for.

All in all, I am grateful that I considered this bootcamp and never gave up, even though there were times I felt like I couldn't get through it. The skills I have picked up will stick with me for the rest of my life and I couldn't recommend going through this program enough!

Generate more detailed errors in controllers using 'rescue_from' in Ruby on Rails

rossonevan — Mon, 12 Sep 2022 22:06:22 +0000

The most important parts of a web page application is returning information to the user while providing errors in order for a better understanding of why a problem is occurring when a user is interacting throughout the app. Through the application controllers, CRUD(Create, Read, Update, Destroy) methods are developed in order for the front-end to interact with the database created in the back-end.

.find vs .find_by

When creating the create, show, and update routes, the id of the data being displayed must be found. If the id cannot be found, an error will occur. For example, lets say we have a show methods in a movie controller:

class MoviesController < ApplicationController
  def show
    movie = Movie.find_by(id: params[:id])
    if movie
      render json: movie, status: :ok
    else
      render json: {error: "Movie not found"}, status: :not_found
    end
  end
 end

By using .find_by, the return value is nil if the movie cannot be found. Therefore, an if/else statement needs to be formulated in order to generate an error that will be used to display to the user.

We can also use a rescue that ruby provides that can take the exception and use it as the error, replacing the if/else statement for a more DRY approach:

class MoviesController < ApplicationController
  def show
    movie = Movie.find_by(id: params[:id])
    render json: movie, status: :ok
rescue ActiveRecord::RecordNotFound
  render json: {error: "Movie not found"}, status: :not_found
  end
 end

But there is an even DRY-er way for handling errors. If we use the .find method, ActiveRecord returns an exception that contains a more detailed error. For example, if we make a fetch request to localhost:3000/movies/99, the exception will look like:

ActiveRecord::RecordNotFound (Couldn't find Movie with 'id'=99)

We can use this exception to generate our error and apply it to every controller with a RecordNotFound error but writing our rescue in the ApplicationController:

class ApplicationController < ActionController::API
  rescue_from ActiveRecord::RecordNotFound, with: :record_not_found
  private
  def record_not_found(error)
    render json: {error: error.message}, status: :not_found
  end
end

Since the error is being handled inside our "top" controller, the methods in the MoviesController do not need to contain errors and therefore create a more DRY form:

class MoviesController < ApplicationController
  def show
    movie = Movie.find(params[:id])
    render json: movie, status: :ok
  end
 end

Ruby: SELF in instance and class methods

rossonevan — Tue, 23 Aug 2022 14:15:00 +0000

After learning about the front-end of web development through JavaScript and React, it was time to venture to the back-end, Ruby. Object-Oriented Programming (OOP) is a type of programming based on the concept of "objects", which can contain data, in the form of fields (often known as attributes or properties) and code, in the form of procedures (also known as methods). OOP allows web developers to structure code so that its functionality can be shared throughout the application.

Self in Instance Methods

Ruby, because of OOP, uses classes to identify their objects. A class is like a template, or a blueprint, for creating objects with similar characteristics. When creating a class, each new instance of that class is called an object. This object is a bundle of code that contains both data and behaviors. Inside each class, developers can create numerous instance methods.

class Game

  attr_accessor :name

  def initialize
    @name = name
  end

  def developer_of_game(name, developer_name)
    name.developer = developer_name
  end
end

In the example above, we use the attr_accessor macro in order to make changes to the name attribute. The #developer_of_game instance method takes in an object of Game and assigns a name to that instance. But there is an easier, DRY-er, way we can get the same result: by using self. self refers to whatever instance the method is called on.

class Game

  attr_accessor :name

  def initialize
    @name = name
  end

  def developer_of_game(developer_name)
    self.developer = developer_name
  end
end

elden_ring = Game.new('Elden Ring')
elden_ring.developer_of_game('FromSoftware')
elden_ring.developer
# => 'FromSoftware'

By placing self inside the instance method, the method takes the specific object that we created and applies it to the method. By printing out self, we can see that it is an instance of the class and it's own unique object:

class Game

  attr_accessor :name

  def initialize
    @name = name
  end

  def print_out_self
    puts self
  end
end

elden_ring = Game.new('Elden Ring')
elden_ring.print_out_self
# => #<Game:0x00007fd9910c45a0 @name='Elden Ring'>

Self in Class Methods

We can use self on class methods as well. From our last example, we can create a class method by using self:

class Game

  attr_accessor :name

  @@all = []

  def initialize
    @name = name
    @@all << self
  end

  def developer_of_game(developer_name)
    self.developer = developer_name
  end

  def self.all
    @@all
  end
end

elden_ring = Game.new('Elden Ring')
dead_space = Game.new('Dead Space')
Game.all
# => [#<Game:0x00007fd9910c45a0 @name='Elden Ring'>, #<Game:0x00007fd9900dba58 @name='Dead Space'>]

NOTE: The self inside the #developer_of_game method is NOT the same as the self in the self.all.

Game.all produces an array of all the Game. The @@all is a class variable that is initially set as an empty array []. In our initialize method, each individual instance's self is inserted into the @@all variable. Once the self.all class method is called, that array will contain all of the instances of the Game class that were created because the method is being called on the entire class rather than one instance of the class. Finally, we have to call the @@all class variable inside our self.all to be able to read it. If we wanted to only get the names of each game, we can .each the self.all class method we just defined inside another class method:

def self.print_all_game_names
    self.all.each do |game|
      puts game.name
    end
end

Conclusion

The most important thing to remember when it comes to self: When using self inside an instance method, it is one object of that class that the method is called upon. When using self on a class method, it is the entire class itself.

React: JSX, Components, and Props

rossonevan — Sun, 31 Jul 2022 20:25:00 +0000

Switching to React from vanilla JavaScript, many programmers will start to understand why many companies today use React (Facebook, Airbnb, etc.). The process of coding in React makes an easier understanding of a programmer's code and better layout of that code, especially in the HTML of a webpage. One of the first things you'll learn are JSX, Components, and Props.

JSX

JavaScript XML, also known as JSX, is a syntax extension that is read through Babel in React that allows programmers to write HTML inside their JavaScript code. Babel recognizes JSX and knows that it is not HTML. Let's say we have an App component that contains a header and paragraph element:

function App() {
  return(
    <div>
      <h1> Hello, World! </h1>
      <p> Hope you have a good day! </p>
    </div>
  )
}

Whenever the webpage loads, JSX knows exactly what we want to show on our webpage. This process allows our code to become declarative instead of imperative. Instead of writing out exactly how our code is done in detail (imperative), we can say what we would like to do (declarative). So instead of writing document.createElement() and document.quereySelector() like in vanilla JS, we can simply write our HTML elements inside our JS files!

Components

As shown in the example above, components are one of the most essential parts of React that is different from vanilla JavaScript. Components help show where certain parts our code goes. By using components, it helps create a cleaner and easy to follow layout of our code, as well as the layout of our webpage. A component is a function that returns JSX. This function tells React what the properties of the component should look like once applied to the DOM. A component's function must always start with a capital letter. It also can only return one HTML element. For example:

function App() {
  return (
    <div> Hello, World!</div>
    <div> Goodbye! </div>
  )
}

Since there are two div elements being returned, React will throw back an error saying that it can only return one element. An easy fix to this kind of situation is putting <> and </> outside of the two div elements so that, in React's eyes, the component returns only one element.

Props

The arguments that components take in are known as props. In most applications, there is a parent component consisting of multiple child components. A parent component is the top-level component that contains pathways to other components(child components).

function App() {
  return (
    <div>
      <AnimalDetails />
      <Comments />
    </div>
  )
}

From the example above, App is the parent component of the child components AnimalDetails and Comments. If we wanted to pass information into our child components from the parent component, we can assign props to each of them:

function App() {
  return (
    <div>
      <AnimalDetails 
        name = 'Max' 
        species = 'dog' 
        personality = 'Loves to go on walks!' />
      <Comments commentsText = 'Max is a really good boy!' />
    </div>
  )
}

Now that our child components have props with information we want to pass down, we can assign these props to different elements to be displayed on the webpage.

NOTE: Props cannot be passed between child components, only from a parent component.

function AnimalDetails (props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <h3>{props.species}</h3>
      <p>{props.personality}</p>
    </div>
  )
}

Whenever we want to call our props into our JSX, we must contain them inside {} then use props. before the key name to access them.

De-structuring Props

As you can see from our previous example, if there are multiple props being passed down, our code starts to look very cluttered with prop.. An easy solution to make our code cleaner and easier to read, we can use destructuring. From our last example, instead of passing props as an argument of our AnimalDetails component, we can pass down the key names we assigned our information to:

function AnimalDetails ({name, species, personality}) {
  return (
    <div>
      <h1>{name}</h1>
      <h3>{species}</h3>
      <p>{personality}</p>
    </div>
  )
}

Whenever destructuring props, the key names being passed down must be contained inside {}. Now, we can just pass the keys and have clean and concise code that is easy to read!

JavaScript Submit Event Listeners for Dummies.

rossonevan — Mon, 11 Jul 2022 17:43:00 +0000

JavaScript has the ability to listen for an event in the browser that will let it know, for example, whether a user clicked on a button with their mouse or pressed a certain key on their keyboard. These "events" are known as event listeners. Here are a list of common event listeners: https://developer.mozilla.org/en-US/docs/Web/Events#standard_events

The Submit Event

The submit event listener is one of the main event listeners developers will use in their work. This type of event listener will listen for when the user clicks the submit button on the webpage. For example:

HTML Code :

<body>
    <div>
        <form id="new-name">
            <label for="firstname">First Name: </label>
            <input type="text" name="firstname" id="new-firstname" />
            <label for="lastname">Last Name: </label>
            <input type="text" name="lastname" id="new-lastname" />
            <input type="submit" value="Create Name" />
        </form>
    </div>
    <br>
    <p>Full Name Here:</p>
    <p id="name-result"></p>
  </body>

Let's say we have this form that is asking the user to input their first and last name. In JavaScript, we first want to grab the id/class from the html element we want to add the event listener to. In order to do that, we need to create a const that will be the html element we want to grab. In this case, we want to grab the form's id new-name:

const form = document.querySelector('#new-name')

After we grab the new-name id and set it equal to a variable, we can then add our submit event listener to the form:

form.addEventListener('submit', () => {})

Our next step is preventing the default feature of the submit event listener, which would refresh the webpage every time the submit button is clicked. In order to prevent this from occurring we write:

form.addEventListener('submit', (event) => {
event.preventDefault();
})

Now that our page is not refreshing every time we click our submit button, we can go ahead and get the values of the inputs we get when the user inputs their name. Just like how we grabbed the form id, we need to grab each inputs id and set them into new variables:

const newFirstName = document.querySelector('#new-firstname').value;
const newLastName = document.querySelector('#new-lastname').value;

We are first grabbing the ids of the html element that the user inputs lie in. Then we need to get the .value of the input in order to take the information the user types into the text box to store it for later use. We can then check to make sure we grabbed the correct values by console logging our new values:

console.log(newFirstName);
console.log(newLastName);

The text that the user inputs should now appear in the console when clicking the Create Name button. Perfect! Now, we can insert these input values into a p element with the id of name-result for the user to see:

const result = document.querySelector('#name-result');
result.innerText = `${newFirstName} ${newLastName}`;

We use .innerText to change the text inside the p element. We then use string interpolation to input the input values the user submits. The name the user inputs should now be displayed on the webpage! Congratulations, you just made a submit event listener!!