Forem: Jack Kim

FIS Phase 5 Final Project Demonstration (Eventeller)

Jack Kim — Mon, 16 Jan 2023 09:31:51 +0000

This is my phase 5 Final project at Flatiron School.

For any questions, feedbacks, please leave a comment.

Thank you.

Github: https://github.com/jmjkim/fisphase5-final-project

Ruby On Rails: Multiple roles for a given model

Jack Kim — Sat, 14 Jan 2023 23:17:25 +0000

While working on my final project for my software engineer course at Flatiron School, I have learned about many different interesting model associations. There was one particular model association that drew me in the most, which is a model that consists of multiple roles.

Click here for more details on the multiple roles for the given model.

It took me several days to grasp how one model can have multiple roles. My understanding of a model is that the instances from a model should be identifiable as one unique instance but with the concept of "multiple roles", a model can create instances that can behave like two different instances.

To give an example of multiple roles, here is three of the four models for my project.

Please take a closer look at my User model. It has a coordinator_id and attendee_id. It does not appear to look right because there are more than one ID attributes (technically 3 IDs including user_id). However, notice that the differently named ID attributes are used as a foreign key or belongs_to for associating User model to the other two models. This tells me that the instances of coordinator and attendees of the User model can be associated to the other two models.

Concisely speaking, the implemented "multiple roles" to my model association allows the Event model to have both an instance of coordinator and multiple instances of event attendee from the User model with the proper model association using foreign key and belongs_to. This means that an event can have both the coordinator and attendees at the same time. Therefore, it was not necessary to create additional models for Coordinator and Attendee model.

In conclusion, my understanding of the "multiple roles" is that it associates one model to the other through the joined table (EventAttendee joins User and Event models like a bridge) by using foreign key and class_name so that the models know where to look for the corresponding ID of the instances from the class_name models.

I strongly recommend reading about the multiple roles in which it provides more details on the multiple roles for the given model. It is critical to understand the basic model associations such as belongs_to, has_many to clearly understand the "multiple roles".

Resources

Multiple roles: https://www.theodinproject.com/lessons/ruby-on-rails-active-record-associations

Cover image: https://premieragile.com/safe-product-owner-responsibilities/

FIS Phase 4 Project Demonstration (Lamborghinian)

Jack Kim — Thu, 17 Nov 2022 06:31:13 +0000

This is my phase 4 project at Flatiron School.

For any questions, feedbacks, please leave a comment.

Thank you.

Github: https://github.com/jmjkim/fisphase4-project

Ruby On Rails: Strong Params and Mass Assignment

Jack Kim — Sat, 12 Nov 2022 09:36:06 +0000

In this writing, I will explain the benefits and dangers of mass assignment and use params.permit to allow specific params.

What is mass assignment?

The mass assignment passes a :key => value params hash to a model's create() or new() method to create an instance.

A benefit of using a mass assignment
The mass assignment can simplify creating an instance of a model with multiple attributes.

AnimalTrainer.create(
  name: params[:name],
  email: params[:email],
  favorite_species: params[:favorite_species],
  admin: params[:admin]
)

Instead of typing every single attribute:params[:attribute], using mass assignment with one params argument will look like as simple as

params = {
  name: "Emma",
  email: "iluvpanda@gmail.com",
  favorite_species: "Pink Panda",
  admin: true
}

AnimalTrainer.create(params)

A danger of using mass assignment
Mass assignment in its nature has a vulnerability where :key => value params hash will be accepted as is. For an example, I can send a params hash such as :admin => true or :email => "illegalemail@gmail.com".

Strong params
To prevent "dangerous params hash", you can create a function with using params.permit to allow specific params.

class AnimalTrainersController < ApplicationController

  # POST /animal_trainers
  def create
    trainer = AnimalTrainer.create(animal_trainer_params)
    render json: trainer, status: :created
  end

  # other controller actions here

  private
  # all methods below here are private

  def animal_trainer_params
    params.permit(:name, :email, :species)
  end

end

The animal_trainer_params function now filters "unassigned" :key => value params hash to the prevent mass assignment vulnerability.

My understanding of strong params is like an attendance sheet in a classroom where you cannot be sitting in the classroom and you do not have an access to the class materials if your name is not on the attendance sheet.

An example from my code:

My code with strong params
A fake key and value added
Status code: 201 created without a fake key and value

If you would like to know more details about strong params and mass assignment, please refer to Rails Guide Mass Assignment.

Resources

Cover Image:
https://cdn.searchenginejournal.com/wp-content/uploads/2020/08/a-personalized-entity-repository-in-the-knowledge-graph-5f48cec744afc.png

Mass Assignment Vulnerability:
https://en.wikipedia.org/wiki/Mass_assignment_vulnerability

Strong params:
https://guides.rubyonrails.org/action_controller_overview.html#strong-parameters

FIS Phase 3 Project Demonstration (EMN-F Manager)

Jack Kim — Fri, 19 Aug 2022 10:18:00 +0000

EMNF-S Manager is a short name for Engine Manufacturing.

This is my phase 3 project at Flatiron School.

For any questions, feedbacks, please leave a comment.

Thank you.

Github: https://github.com/jmjkim/fisphase3-project

How to retain form values after reloading your browser

Jack Kim — Wed, 17 Aug 2022 08:06:00 +0000

I was working on my phase 3 project for Flatiron School where I had to build a <form> element on the front-end side. As you already know, form usually contains <input> elements with value attribute.

One thing I realized as I was testing on submitting my <form>, my form values would not be retained when the browser reloads.

Maybe it is trivial if the form has very few <input> but what if you need to build a form that creates a person's profile by using their information such as past employment history or a personal background information where it requires to have at least 100-200 words? I assume in that case most of users do not want to re-type over again.

Regardless of how many inputs a form should have, a form retaining its value(s) under unexpected circumstances is more ideal than not able to retain its value(s) in my opinion.

To prevent this incident, I spent some times searching for a solution to the problem and as always.. MDN Web Docs already had the answer.

A short scrollbar length article about sessionStorage.

A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.

According to the article, one of the sessionStorage features does exactly what I was looking for. I tested it on my Developer Tools.

sessionStorage.setItem("thisIsKeyName", "this is value stored in sessionStorage") takes two arguments. First argument is the key name for your value, second argument is the value you want to store in the sessionStorage.

Go to Developer Tools, click on Application tab and on the left side, you can check your stored value in the Session Storage (a keyName and value...it's an object!)

To obtain your session stored value, simply assign it to a variable.

Whatever the value may be, once it is in the sessionStorage, your browser will not lose it, also you can use the value later on just like you get it out from your "storage" when you need it.

Resources:

Cover image: https://depositphotos.com/stock-photos/storage.html
MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

FIS Phase 2 Project Demonstration (Inventory Manager)

Jack Kim — Wed, 08 Jun 2022 10:13:17 +0000

Github
https://github.com/jmjkim/fisphase2-project

Eliminating duplicates in an array

Jack Kim — Tue, 07 Jun 2022 01:55:48 +0000

Update: Thanks to Juliano Rodrigues's comment! A simpler way to eliminate duplicates in array is using Set()

For my second software engineering project at Flatiron School, I created an Inventory Manager application. The application handles basic CRUD functions on registered stocks or add new stock. Some other small features included such as searching stocks by its ID or filtering stock list by stock type or supplier. Click here to check out project code.

One day, I was working on the dropdown format filter bar for the project and I wanted to create filtering options. I used map method to grab the stock types and suppliers but then I encountered a minor problem.

Note: Array of Stock Type is used for demonstration

Iterating over arrays of type.

Oops, metal and rock are duplicated.

I forgot about that some of stock types had duplicated values. What I needed to do was eliminate these duplicates from the array.

After researching for a while, I found a way that easily solved my problem by using indexOf method.

According to the MDN Web Docs

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Example of indexOf method from MDN Web Docs.

Here is my solution code and explanation.
All I did was added simple if statement with indexOf method.

Here, I made a simple chart to compare index vs indexOf values. On the left side is returned index values of types.map((type, index) => {..if statement..}). On the right side is returned values of types.indexOf(type) inside if statement.

Type   index value   /   Type      indexOf value

wood        0            wood             0
metal       1            metal            1*
rock        2            rock             2*
misc        3            misc             3
Protection  4            Protection       4
rock        5            rock             2*
gold        6            gold             6
metal       7            metal            1*

Looking back at the indexOf MDN Web Docs definition,

The indexOf() method returns the first index at which a given element can be found in the array

just like the definition, on the chart metal and rock under the indexOf value has the "first index returned" value after being iterated by type.

Think like this, indexOf method will iterate an array and will return the "first" initialized index value. Hence, indexOf values for the metal and rock has the same "first" index value as when it gets first "index spotted".

No more duplicates

Feel free to leave a comment for any questions or corrections.

Resources:

Cover-Image:
https://hackernoon.com/when-code-duplication-is-acceptable-51ce33ecd0f5
Code & Project Images:
My project code

FIS Phase 1 Project Demonstration (HR Manager)

Jack Kim — Wed, 30 Mar 2022 06:34:58 +0000

Update

Full CRUD features added.

After Live Coding assessment,

Sorting by first name feature added.
Short Name feature added.
Timer feature added.

Github
https://github.com/jmjkim/fisphase1-project

Destructuring Object Keys

Jack Kim — Tue, 29 Mar 2022 20:59:10 +0000

After rigorous days of coding for my first project, I created a simple vanilla javascript project called "HR Manager" (short for Human Resource) where you can search employees by their unique ID and update employee's information (Edit & Update of CRUD functions). Thanks to JSON-server, I was able to mock a prototype database for this project.

A Screenshot of my Project Interface

Note: All of displaying data is obtained from Random Data Generator. Sensitive information is hidden as a security feature (becomes visible on mouse hover).

Application Structure:
Fetch API -> Database -> .then(dataDisplayerFunction) -> Update -> Fetch method: "PATCH" -> Database

The main purpose of the application is to get the employee's data from a server and then updates data if necessary, then send the updated data back to the server. Because of its simplicity and a sole purpose, the application was built in a plain structure.

After planning the structure of my project, I spent a good time observing the randomly generated data I obtained from Random Data Generator then I decided to "refine" the data structure in order to make it suitable for my project.

Original Data Structure
Too many keys!

After researching about restructuring data (data is an object), I finally came up with a perfect solution. The destructuring assignment syntax is "The" method for working with object, especially for modifying keys and values.

Destructuring Assignment in my code
I was able to rename the keys and assign values in different formats by using destructuring assignment syntax with String Interpolation

After Destructuring Assignment
Refined Object

References

Cover Image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq1biuwpnih57hyo0p4s.jpeg
JSON-server
Random Data Generator
Project code: https://github.com/jmjkim/fisphase1-project

A Prospective Backend Developer

Jack Kim — Tue, 01 Feb 2022 03:26:00 +0000

I've been curious and interested about what is happening behind the screen I see every time when I read local news, watch youtube and practice coding, etc. A curiosity such as a video shows up on my screen when I click the play button and typing my ID and password allows me to access to my online bank account and purchase some stuff on amazon.

Just by drawing a visual process in my head, I can kind of understand conceptually how it's working (like whatever your typing will be evaluated for a match from a "somewhere far away" database and then it will validate your credential and gives you a "I know who you are" confirmation.) but..really, how does that "actually" works?

Finally, today is the Day 1 at Flatiron School for software engineering and I know I am going to be submerged with tremendous amount of web developing and coding knowledges but I am actually super excited and ready for a challenge that will lead me to break my "back..and?" (high level rhyme joke) curiosity.

Reference

What is a backend developer?
https://www.codecademy.com/resources/blog/what-does-a-back-end-developer-do/

Image1
https://codeworkshop.dev/blog/2020-12-23-what-is-the-difference-between-backend-and-frontend-developers/