DEV Community: YarixaR

Before Bootcamp

YarixaR — Sun, 02 Oct 2022 22:39:43 +0000

Before joining Flatiron, I worked in the field of veterinary medicine. Being a vet technician was a career that started out as a passion, where I could focus my love and affection towards animals of all shapes and sizes in their rehabilitation and medical treatments. However, throughout six years of the industry, I had come to a point of dragging myself to work with a lack of motivation. Working ten hour days, six days a week, I realized I had lost my spark. Ultimately, I had to accept I was burnt out from always being understaffed, lack of recognition, low pay, and overall physical fatigue.

Since the pandemic years of 2020, there was always a seedling of thought for a career change. I thought of going into nursing, possibly starting a cooking channel on social media, or breaking into tech. I spent those late nights in bed looking up "How to switch careers" and "How to get into the tech industry". I didn't take it seriously. These initial thoughts had previously always been shot down and discouraged by those around me. I was always being told that the risk was too great for my age, and the grass was not always greener on the other side. I started to genuinely believe a person like me wouldn't be able to learn something new, completely out of my specialty.

Despite my hesitations, my curiosity and interest towards software engineering continued to grow. After focusing my research on S.E., my stars began to align. I was meeting people who were software engineers, people who graduated from a Bootcamp and are now doing what they enjoy and living a healthy lifestyle. I knew I deserved that for myself too. I knew I was capable of doing the same thing as long as I set my heart to it. I decided I was not going to let another person tell me if I can or can't succeed in the tech world. I decided to enroll in Flatiron.

Now I haven't proved the negative voices wrong yet, but what I can prove is that I have a new interest and drive. These past four months, were difficult beyond belief. Highlighted by early mornings and late nights, I constantly had to fight through bugs, error codes, and an ever-imposing sense of doubt. However, despite all of this, I'm now on the verge of completing the Flatiron course for software engineering. Along the way, I've met good people, created healthy habits, and most importantly, I've gained coding skills that will last a lifetime. This skill and experience that I've acquired, I will take and manifest it. It's up to me to continue to grow after Bootcamp. The next step won't be easy but I'm excited for what's to come.

Serializers in Rails

YarixaR — Sun, 11 Sep 2022 21:09:12 +0000

I have finally reached the end of my boot camp, finishing my last code challenge with a high score. I'm feeling pretty good! Now I'm ready to talk about Serializers.

In the controller, we can customize JSON data to a specific model using include: or .to_json(except: [:created_at, :updated_at]). The include option will let us nest associated data in our response. Ideally, we don't want to give this responsibility to the Controller because it'll just make it "chunky" as they say. This is why we use Serializers.

Installing Serializers

To use serializers, you'll need to first check to see if this gem is already included in the Gemfile. If not, add gem 'active_model_serializers' to the Gemfile. Then, bundle install.

Generating Serializer

In the console:

$ rails g serializer planet

The name of the serializer needs the same name as the model and written in lowercase.

After, this will generate an empty file that looks like this:

class PlanetSerializer < ActiveModel::Serializer
  attributes :id
end

As you can see, it only has the attribute :id. This will limit all of Planet's data to show only the :id in JSON format.

So let's go ahead and add Planet's real attributes.

class PlanetSerializer < ActiveModel::Serializer
  attributes :id, :name, :distance_from_earth, :nearest_star, :image
end

This way we don't have to add .to_json(except: [:created_at, :updated_at]) in our Controller and it can be exclusive to just communicating with models and views.

Serializing Relationships

Much like adding include: in the controller, a serializer will let us nest associated data in our response. We already have associations in our models so we can put these relationships in the serializer too.

class MissionSerializer < ActiveModel::Serializer
  attributes :id, :name

  has_one :planet
end

class PlanetSerializer < ActiveModel::Serializer
  attributes :id, :name, :distance_from_earth, :nearest_star, :image

  has_many :missions
end

Sources:

“Home.” Flatiron School, 9 May 2022, https://flatironschool.com/.

Active Record Associations (one-to-many)

YarixaR — Sun, 21 Aug 2022 00:17:00 +0000

It's insane to think that I've already finished my 3rd phase of Bootcamp. Time is flying! In this phase, we finally ventured to the back end of software engineering where we learned a bit about ruby on rails and what happens "under the hood".
For this blog, I've decided to briefly go over associations.

Why Associations?

Declaring associations is a convenient way of connecting two Active Record models. This makes manipulating your data models in logical way.

If you have 2 separate models, you can bring them together by using a foreign key in the migration folder.
Here, we're keeping the user's foreign key stored in the candle's table. Since a candle belongs to a user, it should have a "user_id" to identify which user it belongs to.

ActiveRecord::Schema.define(version: 2022_08_15_211950) do

  create_table "users", force: :cascade do |t|
    t.string "name"
  end

  create_table "candles", force: :cascade do |t|
    t.string "scent"
    t.string "brand"
    t.integer "user_id"
  end

end

But in order for this to work, inside of active records, you need a special macro that ties them together and develops a relationship. This is called a one-to-many.

What is a macro?

A macro is a method that writes code for us. If you're familiar with macros like attr_reader and attr_accessor, Active Record comes with a few handy macros that create new instance methods we can use with our classes.

In the users model, we should think that a user has_many candles. The name "candles" has to be pluralized because a single user can have many candles.
In the candles model, candles belong_to a user. You'll notice that "user" is written as singular because candles on belong to one user.

# has_many

# app/models/user.rb
class User < ActiveRecord::Base
  has_many :candles

  # naming is plural
  # indicates a one-to-many association
  # a user can have many candles in this example
  # candles associated via `user_id`
end

# belongs_to

# app/models/candle.rb
class Candle < ActiveRecord::Base
  belongs_to :user

  # must be singular
  # Sets up a 1:1 connection with another model - User in this case
  # Books associated to a user via `user_id` on candles table
end

Only after you ran rake db:migrate and planted your seeds, you can go ahead and run rake console to check if they're all properly connected.

Sources:

“Active Record Associations.” Ruby on Rails Guides, https://guides.rubyonrails.org/association_basics.html#the-types-of-associations.
“Home.” Flatiron School, 9 May 2022, https://flatironschool.com/.

Introductory to useState

YarixaR — Sun, 31 Jul 2022 03:07:00 +0000

Finishing up my second phase of a boot camp, I thought I'd write a short post on React hooks. Specifically, useState.

The hook, useState is a function that React provides for us and it allows us to give our component some state.

What is state?
State is data that changes over time as the user interacts with your app.

How do we update state?
By using React's useState function of course!

useState will return an array that has two variables inside of it.

State. Name the variable as a reference to the value of the state.
setState. This is a function returned by useState that re-renders the component caused by changes to the state.

const [ state, setState ] = useState('initial State')

useState has a parameter that determines the initial value of that state. It takes a boolean, string, and number.

Warning! Learn from me...

Call hooks at the most top level of a React function component, before a return.
Call hooks from custom hooks like useEffect.

Let's make a count button.

First, we need to import useState from React to use our function.

import React, { useState } from 'react'

const App = () => {

const [ count, setCount ] = useState(0)

    return(
       <div>
         <button>Click to show count</button>
       </div>
)
}

During the initial render, the returned state (count) is the same as the value passed as the first argument (0). The setCount function is used to update the state. It accepts new state value and re-renders the component.

We will need to add an event listener and another function to help us update the value of count whenever the button is clicked.

import React, { useState } from 'react'

const App = () => {

const [ count, setCount ] = useState(0)

const increaseCount = () => {
  setCount( count + 1 )
           /* 0 + 1 */
}

    return(
       <div>
         <button onClick= { increaseCount }>
             Click to show { count }
         </button>
       </div>
)
}

Above, you see that onClick function that will tell the button what to do when clicked.

When clicked, it runs the function (increaseCount).

Running the function, calls setCount and tells React that the state, count's value has to update to 1.

Sources:
“Home.” Flatiron School, 9 May 2022, https://flatironschool.com/.

“React Interactivity: Events and State - Learn Web Development: MDN.” Learn Web Development | MDN, https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state.

parseInt() For Beginners

YarixaR — Thu, 14 Jul 2022 02:36:50 +0000

This is for anyone that's newly immersing themselves in the world of coding. If you are a beginner-level coder like me, you've looked into parseInt() and became completely lost when it came to the "radix" part. Here is my simplest explanation of what the function parseInt does.

What is `parseInt`?

parseInt is a function that can take 2 arguments and it can either return an integer or a NaN (not a number).

This is the syntax:

parseInt(string)
or
parseInt(string, radix)

Assuming you know all the different data types, for example:

numbers
strings
booleans
symbols
objects
null
undefined

Then you already know that JavaScript will perform addition to a number data type.

1 + 2 + 3;
//6

Adding a string to a number, Javascript will pair them together and will return a string. It cannot perform addition.

'1' + 2 + 3
// '123'

Now consider this example:

What's happening above is JavaScript does not see '5' as a number but as a string. We're asking the string to add 1 but instead of creating a new value, it will add the 1 next to the string. If your goal is to convert a string into a number, that's when you'd use parseInt.

parseInt will remove the quotes from the string before performing the addition or any form of operation. Thus resulting in a whole integer.
If ever you need a floating integer (a number with a decimal) to convert into a whole number, parseInt can arrange that for you as well.

const num = 10.03
console.log(parseInt(num));

//  10

`parseInt(string, radix)`

Traditionally, parseInt should take 2 arguments. The function parses (analyzes) a string and returns an integer of the specified radix.

What is a radix?

A radix is the base in mathematical numeral systems. When using parseInt, you will want to work with the base 10 because it uses the ten digits from 0 through 9. This is called the decimal system.

parseInt("4", 10)
// 4

parseInt("4.444", 10)
// 4

parseInt("Jerry is 9", 10)
// NaN

The last thing you need to know is NaN. This function can only read the first value starting the string. If it's not a number, it will return as NaN.

Source:
“Radix.” Wikipedia, Wikimedia Foundation, 23 June 2022, https://en.wikipedia.org/wiki/Radix.

“Parseint() - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt.