Forem: Tor Francis

Life after Boot Camp

Tor Francis — Fri, 24 Mar 2023 16:43:39 +0000

Congratulations on completing your coding boot camp! You've spent numerous hours on your final project and are now in the process of figuring out your next steps with the ultimate goal of landing a job. However, you may find yourself feeling lost and overwhelmed with the plethora of advice on what to do next. Do you start by building a portfolio or focus on fixing bugs in your project? Do you prioritize learning new concepts or mastering the fundamentals? Should you start mass-applying to jobs or first improve your resume? It's easy to feel jumbled and confused when trying to navigate the post-bootcamp phase. After some reflection, I've come up with a game plan that can help you make sense of it all.

Take a break
The first thing you should do is take a break. After all the hard work you've put in, you need some time to recharge. Take a few days or a week to rest and disconnect from the critical thinking required during boot camp.

Create a list of goals
Once you've rested, it's time to create specific goals and steps to achieve them. Start by identifying a goal, such as fixing a bug in your project, even if you're not sure how to do it yet. Then, break down the goal into smaller steps, such as researching the issue or seeking help from a mentor. Write these steps down and store them somewhere that is easily accessible, I use Notion.

Create a schedule
Now that you have your goals and steps in place, it's time to create a schedule. Decide how much time you want to allocate to each task on a daily or weekly basis. For example, you could spend two hours a day working on LeetCode questions or one hour a day applying to jobs. Alternatively, you could designate specific days of the week to work on certain tasks. It's important to set realistic expectations and stick to the schedule as much as possible.

Stick to the schedule
Sticking to the schedule you've created is crucial to building the habits you need to achieve your goals. Adjust the schedule as needed to fit your work flow, but be sure to remain consistent. Even if you don't accomplish everything you set out to do, record your progress and pick up where you left off. As you complete tasks and cross them off your list, you'll gain momentum and see progress.

Navigating life after coding boot camp can be daunting, but with a clear plan in place, you can achieve your goals and find success. Remember to take breaks, create specific goals and steps, and stick to a schedule. With hard work and dedication, you'll be well on your way to landing your dream job. Best of luck!

Using Active Storage in Ruby on Rails Api

Tor Francis — Thu, 16 Feb 2023 21:33:42 +0000

Hi, if your building a project like I am and want to use Active Storage to handle file upload then you've come to the right place.

First step is to setup your environment by creating a new rails application. I used postgresql for my database.

Now you will want to create and migrate your model and controller for whatever table you want to have files for. Let's use User as our model.

install the Active Storage gem

rails active_storage:install

This will create a migration will 3 tables: active storage blobs, active storage attachments, active storage variant records.

create your schema by running:

rails db:migrate

Now you will want to create an association(macro) to your User table.

class User < ApplicationRecord
  has_one_attached :image
end

We are going to make the attachment an Image, you can name it whatever kind of file it's going to be, we will reference it in our UsersController.

Next, you will want to create the params for the User in the UsersController.

def user_params
  params.require(:user).permit(:name, :image)
end

In your gem , you'll want to uncomment out

# gem 'rack-cors'

and run a bundle install. This will add it to your gemfile.lock

rack-cors (1.1.1)
rack (>= 2.0.0)

Go to config/initializers/cors.rb and you'll see a new file added:


# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

# Rails.application.config.middleware.insert_before 0, Rack::Cors do
#   allow do
#     origins 'example.com'
#
#     resource '*',
#       headers: :any,
#       methods: [:get, :post, :put, :patch, :delete, :options, :head]
#   end
# end

Uncomment out everything after 'Read more: https://github.com/cyu/rack-cors'. If your using a react app you'll want to replace origins will your react app server

 Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins 'example.com'

 Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins 'http://localhost:3000'

Make sure you input the correct server you using or you will get an error.

Rails.application.routes.draw do
resources :users, only: [:create]
end

class UsersController < ApplicationController
  def create
        user = User.create(user_params)
        if user.valid?
            user.save
            render json: user, status: :created
        else
            render json: { errors: ['User not valid']}, status: 422
        end
    end
end

On your Frontend you'll want to create an form that that send a POST to your backend route. I'm using Material UI for styling.

I created a SignUpForm component for the form and useState for our Input fields. For our file input field we specify the input type for our file. In Material UI, we use inputProps that.

We add an on change function that uses an anonymous function that take in an event(e) and calls the setter function from our useState.

import React, { useState } from "react";
import { TextField, Input, Typography, Button } from "@mui/material";

Function SignupForm(){
const [image, setImage] = useState([])
[name, setName] = useState("")


return (
 <form>
   <Typography> Name </Typography>
        <TextField
          label="Name"
          value={name}
          onChange={(event) => 
          setName(event.target.value)}

        />
        <br />
        <Input
          label="Image"
          type="file"          
          inputProps={{ accept: "image/*" }}
          onChange={(event) => 
          setImage(event.target.files[0])}
          name="image"
        />

        <br />
        <Button color="primary" type="submit">
          Submit
        </Button>
 </form>
)
}
export default SignUpForm

Notice that our onChange for Name and Image are different. When were selecting a file, we can typically select multiple files. We use "event.target.files[0]" because the files are in an array and we just want the first so we add an index of 0. This means we also have to set our initial state of image to an array.

We will add a function to the form that sends a POST request to our end point in our Backend. Because we have a file we have to send, we can't send a normal object. Instead We'll send a FormData object that we'll construct in the function.

function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData();
    data.append("user[image]", image);    
    data.append("user[name]", name);


    fetch("http://localhost:3000/users", {
      method: "POST",
      body: data,
    })
}

We structure our FormData object in a manner that ruby accepts and send it to the backend without stringifying it. Add the handle submit to the form and test it out.

If open up the console, you will see that the new user has an image at attached.

Thank you!

guides.rubyonrails.org

Using Serializers with ruby on rails

Tor Francis — Thu, 26 Jan 2023 20:21:38 +0000

If you've ever wanted to want to have your data return specific kinds of data from different paths using Active Record with out having to write a lot of extra code serializers are the solution. They provide a way of reacting a custom json object.

This is what our data looks like now:

{
  "id": 1,
  "title": "Top Gun",
  "year": 1986,
  "length": 154,
  "summary": "As students at the United States Navy's elite fighter weapons school compete to be best in the class, one daring young pilot learns a few things from a civilian instructor that are not taught in the classroom.",
  "poster_url": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0092099%2F&psig=AOvVaw0uR8BYBdnNmkTirteXeQzJ&ust=1674849371237000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCIj9-Z6C5vwCFQAAAAAdAAAAABAE",  
  "created_at": "2022-05-21T13:12:35.682Z",
  "updated_at": "2022-05-21T19:11:11.682Z"
}

use the command below to have it installed in the gem file

gem 'active_model_serializers'

Once you run a bundle install then run:

rails g serializer model_name

it gets created in #app/serializers/model_name_serializer.rb

class ModelNameSerializer < ActiveModel::Serializer
  attributes :id, :title, :year, :length, :director, :description, :poster_url, :summary

end

after the serializer is created, it should now look like this:

{
  "id": 1,
  "title": "Top Gun",
  "year": 1986,
  "length": 154,
  "summary": "As students at the United States Navy's elite fighter weapons school compete to be best in the class, one daring young pilot learns a few things from a civilian instructor that are not taught in the classroom.",
  "poster_url": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0092099%2F&psig=AOvVaw0uR8BYBdnNmkTirteXeQzJ&ust=1674849371237000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCIj9-Z6C5vwCFQAAAAAdAAAAABAE"  
}

If you wanted to u wanted to create a custom method to return specific data based on what you have now, you could say:

def MovieCaption
  "#{self.object.title} - #{self.object.description}..."
end

and add that method to the attributes to return.

If you had an array of objects you have specify which serializer to use:

render json: movies, each_serializer: ModelNameSerializer, status: :ok

Something to be mindful is that serializers override when you want to specify what you return in the controller.

Here is a link to the Docs to read more on it.

api.rubyonrails.org

Thank you.

Intro to Big O Notation

Tor Francis — Tue, 10 Jan 2023 14:57:57 +0000

If you've worked on algorithm problems, then you've probably heard of Big O. It looks pretty intimidating and hard at first glance. Many sources have told me I don't really need to know it as a jr. dev, others have told be me that understanding it will make be a better dev. I've listened to the latter.

Big O notation is used to describe the performance of an algorithm. It is used to describe time and space it takes for the algorithm to execute. It takes into account the worst case scenario and best case.

N is the variable that represents the size of the input data.

O(1) describes as algorithm that will always take the same about of time to do such and console.log(x) or array[0]. The run time is constant and with never change because it will always take the same amount of time to puts or print that information.

As I practice this more, I will make more post about this and continue down this hole.

Deconstructing props and nested data

Tor Francis — Fri, 09 Dec 2022 18:44:31 +0000

Hi all, I'm here with another post to take you through when I released how useful constructing props. I built a react web app where I used an API to fetch Video Games from RAWG API and I ran into some road blocks. This was my first project in react and I had previously worked with worked with an external API so I thought I wouldn't have an issue.

I was wrong.

I first started with fetching my data and storing it in a State Hook. My goal was to make a single page application that populated data in to the DOM and be able save the games that you want to play.

I created a fetch request for my data and initial returned an a nested object so I used dot notation to to get to what I actually needed. (Data.results) I put it in state because I knew that I would need it to change what was display at some point. I passed it down to another component that functioned as a container for my data because I wanted to map over it. Data.results returned an array so I could iterate through it in my container.

I could dot notate through each item in the array at the container level and pass down props off the information that I wanted. However I also wanted to create another component that contained the information this same information on a separate component. I created a function that would post this information to another database and pass it down to to the card component as props.

This function would take in a specific item and post it to a db.json file that I created with JSON-server.

My component that only had the saved games would fetch the object that I saved to the db.json. The issue I ran into was that once it was posted into my db, it now had it's own id and key assigned to it. Initial I was going to make a new component that only rendered the games in the db and not reuse the initial game card component. After a little guidance, research, understanding of how props work. I realized that prop can be anything. You can pass props to a component that represents different things. My card component doesn't need to know what it exactly is it just needs to be the same type to do the same thing or behave the same way. I had 2 come contains that pass similar things and a function that did similar thing. One function posted to my internal db.json and another my set the state what appear on the DOM. I deconstructed what everything was in the parent function before passing it down.

Thank you for reading my blog! I'll post a part 2

innerHTML and textContent

Tor Francis — Mon, 21 Nov 2022 01:53:27 +0000

Hey all I'd like to go over a HTML concept about some differences in properties of HTML and when they are rendered to the DOM.

As a beginner like myself, the difference between innerHTML and textContent did not seem very different until ran into a problem on a project I was working on.

The first web app I built was a mood playlist site that used the Spotify API to render playlist based on input of the user's mood.
If you've used Spotify before or any digital music app then your probably aware that you can create and publish a playlist.

The Problem

I typically use textContent when rendering just text to the DOM because I knew what data was going to be. However, when I didn't know what my data was going to be, it became a learning opportunity.

I realized that my Spotify data had other html elements inside of what I thought was just text. To be specific, it was string.

w3schools.com

W3School says that textContent sets the text content of the specified node. It also says that textContent returns the text content of the element and all descendances, with spacing and CSS hidden text, but without tags.

So why does it have the tag?

We are returning just the string with HTML inside of it. If we look at MDN's description of innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML, it set's the HTML from the element. I wanted to have the html from my data reflected on the DOM so I need innerHTML to parsed the string into HTML.

It's working now! Thank you for reading my blog post!

New Journey Starts Here

Tor Francis — Fri, 18 Nov 2022 16:03:13 +0000

Hi, welcome to my page. I never made a blog before , but this is one of many firsts for me!

My name is Tor (like Thor without the h) and I live in Philadelphia, PA. I've lived in the city for about 8 years now and I've come to call it my home.

I have the typical story of getting a 4 year degree in something I didn't have a passion for, I come from a background in sales.

Last month I made a big change in my life by deciding to change career's into web development. I decided to attend Flatiron School about a lot of research into what I wanted out of a school.

I don't regret it one bit! I've always thought programing was interesting ,but never chased it. I always thought that I was "too hard" or "I'm not smart enough" to do it. After some dabbling with some free resources and a few student loans later, I realized that it's not as hard as I thought it was.

In the month that I've been in the program, I learned that the reason I thought it was too hard was because of my mindset. Once I learned how the program would think, It made a lot more sense when I tried applying what I learn.

Thanks for reading my blog! I look forward to posting more along my journey.