DEV Community: Sumei C Kom

Flatiron Phase 1 JavaScript Final Project: Animechan

Sumei C Kom — Mon, 26 Jul 2021 01:53:36 +0000

Introduction

Phase 1 is coming to a close and we were tasked with our Javascript final project. For our final project, we were entrusted with creating a Javascript app that is HTML/CSS/JS frontend which accesses data from a public API or a locally hosted JSON server, runs entirely on a single page, and incorporates at least 3 separate event listeners. When brainstorming for what I wanted to create for this project I knew I wanted to do something a little nerdy. Maybe something that was related to Dungeons and Dragons or anime related. I searched for free APIs and came across a helpful website that contained all sorts of free APIs from animals, business, health, and so on. If you don’t know where to start, this link will give you a bunch of options that may help.
https://github.com/public-apis/public-apis

Expressions and .filter

In my project I wanted you to be able to:

generate a random anime quote
be able to like/unlike it
your liked quotes accumulated in a list that you could use for later
be able to tell you if you already liked a quote and it was in your list. From my API I only wanted to pull the quote and the title of the anime it was from.

I was really excited, everything was going smoothly. My buttons worked and generated a new anime quote. My “Like This Quote” button pulled my liked quotes into a pretty array underneath. However, I ran into a serious issue, when liking however many quotes you liked, it created an array of those quotes but when you unlike those quotes it would not pull that quote out, thus the original array remained. This resulted in an array that kept being added to and not removing quotes you didn’t like. I had trouble figuring out how to fix this and asked my cohort leader. He said Boolean expressions were a possible solution to my problem, specifically !== and the callback function, Array.prototype.filter().

The strict inequality operator(!==) returns true if two values are not equal without performing type conversions. This is really important from a strict equality operator(===) which returns true if two values are equal without performing type conversions. Even if the values on both sides of the operator look similar (e.g., '42' === 42), the === operator will only return true if the data types also match. The === operator will not work here. This was the program’s way of determining what stayed in the new array.

Array.prototype.filter() accepts one argument, a callback function that it will invoke with each element in the array. For each element passed to the callback, if the callback's return value is true, that element is copied into a new array. If the callback's return value is false, the element is filtered out. After iterating over every element in the collection .filter() returns the new array, my new list of only liked quotes.

A good explanation with example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

With these two together I created a function that checked if quotes were liked or not and returned a new array of only like quotes. This fixed my display issue and now my website works with removing and adding quotes!

Thank you so much for taking your time to read my blog. I hope you learned from my mistakes or found a better way of coding. If you want to see the final project please check out:
https://github.com/sumeikom/animechan-quotes
Thank you so much!

Phase 1 Blog: Mass Assignment and Metaprogramming saved my life.

Sumei C Kom — Sun, 18 Apr 2021 13:39:28 +0000

Phase 1 is coming to a close and we were tasked with our CLI final project. For our final project, we were entrusted with creating a CLI project from scratch by using an API or scraping.
When brainstorming what I wanted to create for my project I knew I wanted to do something anime-related. I wanted to create a CLI application that could pull along the lines by character or by anime title. I spoke to my cohort lead and she recommended that I started with an API rather than scraping.

Finding my API

Finding the perfect API was challenging. Many APIs were close to what I wanted but not quite. Some APIs were either too complicated or lacking in providing the kind of information that I needed. At first, I thought I found what I needed. I found the Jikan API, which was an open-source PHP & REST API for the “most active online anime + manga community and database.” It seemed like a great fit but when conducting further research about this API it seemed better suited for different languages like Javascript. This API was also too intimidating for me because there were so many features such as searching by anime, manga, season, user, club, history, etc. I decided against this API for this project but maybe I’ll tackle it for fun later.

Finally, I found the perfect API for me, the Studio Ghibli API. It was still anime-related by cataloged the people, places, and things found in the worlds of Ghibli but also it allowed for the kind of project I wanted to make. I wanted to create a project where I provided the user with different lists and they can pick what they want to learn more about. This API fit exactly what I wanted to do because it had many endpoints and huge arrays full of details about Studio Ghibli.

After finding the API I wanted to use it was time to start coding! Here are a couple of things I would like to talk about that I had to implement to reach my final project:

Pushing Work to GitHub literally saved my life
The holy grail that is Keyword Arguments and Mass Assignment

Pushing Work to GitHub literally saved my life

When I began my project, my cohort lead showed me how to upload all of my work to GitHub. She talked about how this not only showed the progress of the many steps of building my CLI but it would come in handy if my code ever broke. This problem did happen to me and I was racking my brain trying to get my code to what it was before. I must have deleted something important by accident because no matter what I was doing my code refused to work. Luckily I remembered that I had my previous version on GitHub and I retraced my steps from there. After grabbing my old code from GitHub my code worked again! Honestly, I am still not 100% sure what went wrong but I’m really glad that I was able to get my project back up and running. It would have been a disaster and a waste of a week if I wasn’t able to restore my project.

If you take anything from this blog is that you save all your hard work to GitHub and that you push frequently.

The holy grail that is Mass Assignment and Metaprogramming

In my project I wanted you to be able to search by either film or by a specific character. These different classes had different variables that it needed to pull from its array. From my Film class, I only wanted to pull title, description, release_date, original_title, and director. For my Person class, I only wanted to pull a name, gender, age, eye color, and hair color. I could have hard-coded each class but that would become very tedious. After speaking to my cohort lead about it she suggested metaprogramming and mass assignment.

Hard-coding is very tedious and very prone to breaking. At first my code looked like:

@@all = [] attr_accessor :name, :gender, :age, :eye_color, :hair_color

def initialize @name = name @gender = gender @age = age @eye_color = eye_color @hair_color = hair_color end @@all << self End

But through the key/value pair, made my code much more flexible.

def initialize(person_hash) person_hash.each do |key, value| self.send("#{key}=", value) if self.respond_to?("#{key}=") end save end

By doing this, I did not have to write out every piece of information I wanted to pull from my API.

Thank you so much for taking your time for reading my blog, I hope you learned from my mistakes or found a better way of coding. If you want to see the final project please check out:
https://github.com/sumeikom/CLI_Final_Project
Thank you so much!

Blog #1: Why did you decide to study Software Engineering?

Sumei C Kom — Tue, 23 Feb 2021 06:52:48 +0000

I decided to get into software engineering for a plethora of reasons. I am currently a part-time student at The University of North Carolina Greensboro, pursuing a bachelor's in Political Science. I would like to combine my two certifications to work for a political institution, a non-profit organization, or a think tank. Something that I have noticed is that there are many college graduates that are unable to find a job in their field after graduating. I hope by holding both degrees it will make me very appealing to the job market versus other fresh graduates.

Another appealing aspect of software engineering is how broad it encompasses. It covers multiple industries such as nonprofit, health care, media, etc. There also seem to be many different types of fields available to explore through software engineering, such as creating webpages, debugging, and enhancing a company's network system. I like the idea of having so many options available to me.