DEV Community: Stephanie Sison

CRUD Routing with Sinatra

Stephanie Sison — Sat, 11 Feb 2023 04:50:36 +0000

I am currently finishing up my project for the third phase in my Software Engineer bootcamp. In this phase, I learned how to use Ruby.

For this project, students were to design a web app of their choice. Using React for the front-end and Ruby for the back-end. My project is a web application where a user can create a post of their choice. The client can view all the posts or only posts associated with a specific user. The client can also create a profile so they are able to make posts as well.

In a standard Ruby application, you would have migrations, models, and controllers.
Migrations allow you to modify your database in a efficient way. You can create a table, drop the table, add more information to the table and so on.
Models inherit Active Record::Base which holds all the methods that allow you to interact with your database.
Now the Controllers are the main star of your application. It coordinates the interaction between the user, the views, and the model, along with a number of other things.

So, lets begin creating our application to handle our CRUD actions.

Let's start with creating a table and migrating it to our database schema.

class CreateUsers < ActiveRecord::Migration[6.1]
  def change
    create_table :users do |t|
      t.string :first_name
      t.string :last_name
      t.string :email
      t.string :username
      t.string :password
      t.timestamps
    end
  end
end

We will now have a Models folder that will contain a user file with a User class. As you can see below, we have a "has_many" macro inside of our User class. This is a one-to-many association. This tells the User class that each user instance can have many posts. We can now access a list of posts that is associated with a user.

class User < ActiveRecord::Base
    has_many :posts
end

And lastly, we have a Controllers folder. Inside of that folder, we have a users_controller file with a UsersController class. That class will hold out CRUD actions.

class UsersController < ApplicationController
    // methods will go in here    
end

Now that we have every thing set up accordingly, we can proceed to coding out our routes. The routes will communicate with the frontend of our application to allow users to Create, Read, Update, and Delete information.

class UsersController < ApplicationController
    get '/users' do

    end

    post '/users' do

    end

    patch '/users/:id' do

    end

    delete '/users/:id' do

    end
end

We now have our layout of our routes. Let's run through what each route will do.

The get request is the Read portion of our CRUD actions. This route will allow the client to see all of our users in the database.

The post request is our Create portion of our CRUD actions. This route will be used to create a new user and add it to our database. We will first have to get all of the data that the user entered into the form. This will be done in the body of our request. Next, we will use that data to create a new user. And finally, we will send a response of the newly created user as a JSON object to add to our database.

The patch request is our Update portion of our CRUD actions. This route will be used to update an existing user from our database. We would first want to find the user that we are updating by their ID number. We then will use that data to update our selected users' password. And then send that response as a JSON object to our database.

The delete request is obviously our Delete portion of our CRUD application. This route will be used to delete an existing user from our database. We will find the user that we would like to delete by their ID number, delete the user, and send that response as a JSON. Although in this case, we do not necessarily need to send the response as a JSON object as there would be no data to send because we deleted the user. Instead, we can have an error code that states the user object was deleted.

Now that we know what each request will do for our clients, lets fill in our routes to match their description.

class UsersController < ApplicationController

    get '/users' do
        users = User.order(:username)
        users.to_json(include: :posts)
    end

    post '/users' do
        users = User.create(
            first_name: params[:first_name],
            last_name: params[:last_name],
            email: params[:email],
            username: params[:username],
            password: params[:password]
        )
        users.to_json(include: :posts)
    end

    patch '/users/:id' do
        users = User.find(params[:id])
        users.update(
            password: params[:password]
        )
        users.to_json(include: :posts)
    end

    delete '/users/:id' do
        users = User.find(params[:id])
        users.destroy
        users.to_json
        puts "This user has been deleted"
    end
end

As you can see in our get, post, and patch requests, the last line of our code is taking that updated information and sending it as a JSON. But in parenthesis next to it, we have (include: :posts). We are sending the users, plus the posts that were created by that user as well.

We have now successfully created a CRUD application and with that knowledge, you can create all the applications your heart desires.

Happy Coding (:

Let Me Get You Hooked On useState

Stephanie Sison — Sun, 23 Oct 2022 06:51:26 +0000

As I wrap up learning about React in Phase 2 of my program, I would like to talk about when to use the useState Hook. It was one that had me quite confused at the start of learning it, but now I think I have a better grasp on it.

In React, there is a bunch of different hooks that you are able to implement. One in particular is the useState Hook.

The useState Hook allows us to track state in a function component. It is dynamic in a component, meaning the data it holds changes over time as users interact with the application. The useState Hook allows us to maintain and update information or data within a component without the parent component having to be involved.

Importing useState

In order to use the useState Hook, you have to import a function from React called useState. By doing so, it allows us to connect to React's internal state inside of our function component.

import React, { useState } from "react";

Initializing useState

Now the next step would be to initialize the useState Hook.

import React, { useState } from "react";

function HeartButton() {
  const [click, setClick] = useState(false);

  return <button>{click}</button>;
}

Setting State

The example above came from my Phase 2 project. I wanted to implement a button in the shape of a heart. When the page has loaded, the heart button will appear as an outline of a heart and when the heart button is clicked, it will appear as a solid heart. By setting the initial value to false, we are telling React to create some new internal state for our component. In my case, an initial value of false, i.e. a heart outline.

The first item in the array, click, is a reference to the current value of that state. The second item in the array is the setter function, in our case, setClick. It can be called whenever we want to update the state.

import React, { useState } from "react";

function HeartButton() {
  const [click, setClick] = useState(false)

  function heart() {
     setClick((click) => !click)
  }

  const emptyHeart = <ion-icon name="heart-outline"></ion-icon>
  const filledHeart = <ion-icon name="heart"></ion-icon>

  return (
     <button onClick={heartButton}>
        {click ? filledHeart : emptyHeart}
     </button>
  )
}

When the button is clicked, it will run the heart function. Inside the heart function, it will update the value of click in the internal state to either be "false" or "true" depending on whether we want to like the picture or not like the picture and it will re-render our component.

In a more elaborate version, when we click the heart button or we call the HeartButton function, it translate to this:

Calling useState(true) tells React to change our default state for the HeartButton component's like value from false to true.
React updates its internal state
React re-renders the HeartButton component
After being re-rendered, the useState will return the current value of React's internal state, which is now true.
The value of like is now true with our HeartButton component.
The component's JSX uses this new value to display a solid heart button.

The best part about the useState Hook is all the behind the scenes action that we no longer have to take extra steps and do manually. We no longer have to worry about finding the button element and displaying the new value, it is all done internally. React will automatically re-render the component, any child components involved, and update the DOM as long as we implement the HeartButton function.

It is Asynchronous!

One important thing about using the useState Hook is that it sets state asynchronously. When calling the HeartButton function, the component will finish what the current task is before updating the state. It is only a problem when using the useState Hook for values that are calculated based on the current value of state. In the case of my project, it is not a big deal, but before this tricks you, React recommends a different syntax for setting state. Here is an example, if you were to use state for a counter.

Instead of:

function increment() {
  setCount(count + 1);
}

Use this instead:

function increment() {
  setCount((currentCount) => currentCount + 1);
  setCount((currentCount) => currentCount + 1);
}

The callback syntax is recommended if you need to set state based on the current value of state.

The Rules

Lastly, it would not be coding without any rules. The ones associated with Hooks are not actually too complicated. You can only call Hooks at the top level. It needs to live right under the start of your function component. It is invalid syntax if you call Hooks inside loops, conditions, or nested functions. The second rule for Hooks is to only call Hooks from React Functions. They are only allowed to live in React components and are not allowed to move to regular JavaScript function.

Now that you know the ins and outs of the useState Hook, you can use it in your code with ease. Just remember that using State is only for values that are expected to change during the component's life. If not expected to change, you can freely use props to pass data from the parent component to the child component.

Happy Coding (:

The Destructuring Assignment

Stephanie Sison — Mon, 13 Jun 2022 05:35:45 +0000

Here is a fun one to learn and is such an efficient thing to use when coding in JavaScript. It is actually one of the things I learned in bootcamp that I fully understood just reading the lesson before doing the lab assigned to it.

It is the Destructuting Assignment. This allows you to pick and choose elements out of a collection and assign variables to it without having to loop around and create a new declaration. It is super efficient because we can very clearly tell JavaScript what we want to pull out of the collection; whether it be an Object, Array, or String, plus the added aesthetic of it in our code because of its simplicity. All with the added bonus of less typing for our poor fingers.

Using the Destructuring Assignment to assign data to variables, you will want to put {curly braces} around the objects you would like to assign. For this one, the order inside the curly braces does not matter because we are looking for attributes by their key names.

const mooMoo = {
name: 'Alfred',
type: 'Hairy Cow',
color: 'tan and white',
};

const {name, color} = mooMoo;

With the given data structure above, the curly braces tells Javascript that we will be pulling variables from an Object. We are telling it to pull the keys: 'name' and 'color.' If it exists in 'mooMoo,' then to return the variable associated with that key. Naturally, we will get 'Alfred' for the name key and 'tan and white' for the color key. Heads up, this works for nested Objects as well. You would use method chaining to specify the path you want JavaScript to go down.

Now, when using Destructuring Assignment with Arrays, you will want to wrap the variables you are declaring in [brackets]. With doing this, the order does matter, so be sure you put the order you are declaring properly.

const farmAnimals = ['chicken', 'cow', 'pig'];
const [small, large, medium] = farmAnimals;
console.log(large, small, medium); // LOG: cow chicken pig

The console assigns small to the first element, the large element to the second element, and medium to the third element. The fun part is you can pick parts of the Array we want to assign by using a comma.

const farmAnimals = ['chicken', 'cow', 'pig'];
const [, large, medium] = farmAnimals;
console.log(, small, medium); // LOG: chicken pig

When we use a comma, we are telling JavaScript to skip the first element and start with the second element. You can also move the comma to different spots to skip that element.

And finally, when using Destructuring Assignment with Strings, we will be using the .split() method to turn the string into an Array. You will also be using [brackets] to wrap the variables you'd like to assign.

const cowName = 'Prince Alfred Kingston III';
const [title, firstName] = cowName.split(' ');
console.log(title, firstName); // LOG Prince Alfred

Now a very important part of using split() in a Destructuring Assignment is the 'single quotes' in the (parenthesis). You only make that mistake once otherwise it drives you mad trying to figure out what is wrong with your code.

Doesn't the Destructuring Assignment sound so fun? In no time you'll learn just how to use it and be a pro. And trust me, it will save you so much time and typing in your code.

Happy Coding (:

The Wonderful World of JavaScript Scopes

Stephanie Sison — Mon, 06 Jun 2022 22:29:00 +0000

Understanding the three levels of Scope in JavaScript is very important. Once you have a better grasp on what can access each level of Scope, it makes life so much easier.

Let's think of this like those blocks that you played with as a kid. You know the ones that get smaller in size and can fit into each one to create just one box. Say you have three boxes. Box #1 is a little bigger than box #2, box #2 is a little bigger than box #3, and box #3 is the smallest of them all. Box #3 can fit into box #2, and then box #2 can fit into box #1 to create just one box. But box #1 cannot fit inside box #3. JavaScript works similarly. The different level of scopes can only be accessed through one direction and not the other.

Now that you have the images of those confusing boxes in your head, I can tell you about the Scopes of JavaScript.

You start off with the Global scope. This is similar to box number 1. With box #1 being the outer box that holds all the smaller boxes, Global scope is the outer scope. It can be accessed in every level of scope. If a variable is not declared inside a function or block scope, it is automatically part of the Global scope and it can now be referenced by anything in the code. This can be declared by using [const], [let], or [var]. Declaring a variable in a Global scope is not necessarily frowned upon, but it is much preferred for it to be in a functional or block scope. Only declare a variable via Global scope if you know for a fact that you need to be able to access it multiple times in your code.

const globalNum = 25;

function mathFunc() {
   return globalNum * 2 
} 

mathFunc()
// => 50

As you can see from the above example, the globalNum can be accessed inside the mathFunc() with no problem and return the answer of '50' when mathFunc() is called.

Now we move on to box #2 or the Functional scope. A variable declared in the functional scope is specific to that function. Only that function has access to that variable. [const], [let], and [var] are keywords that can be used in a Functional scope.

const fruit = 'Apple'

function greens() {
  const vegetable = 'Spinach'

  console.log('fruit:', fruit)
  console.log('vegetable:', vegetable)
  console.log('sour:', sour)
}

function candy() {
  const sour = 'Airheads'

  console.log('fruit:', fruit)
  console.log('sour:', sour)
  console.log('vegetable:', vegetable)
}

greens();
// LOG: fruit: Apple
// LOG: vegetable: Spinach
// ERROR: Uncaught ReferenceError: sour is not defined

candy();
// LOG: fruit: Apple
// LOG: sour: Airheads
// ERROR: Uncaught ReferenceError: vegetable is not defined

We can see that both functions are allowed access to the fruit variable because it is in the Global Scope. But, because 'vegetable' is only declared in the greens(), the sour() is not able to have access to them. Which is why when we try to console log the variable sour in the greens() results in an ERROR. The same thing happens when we try to console log the variable greens in the sour().

And finally, box #3 or the Block scope. A Block scope is everything within a statement. It is very specific to that block and only has access to things inside its' block. Variables are typically declared in curly braces { }. Anything declared in the curly braces cannot be accessed outside of the block. The common keywords for a Block scope is [const] or [let]. The keyword [var] cannot be Block scoped because it does not follow the lexical pattern. It gives you access outside of block scope, but not global scope.

function myNum() {
   if(true) {
     let x = 100
     console.log('block:', x)
   } 
}

If we call this function, it will allow us to console log x and return the value of it because we are using console.log inside the same brackets of the block scope.

myNum()
// block: x

Now if we were to try to move the console log outside of the block scope, we would get an error because we are trying to access the variable 'x' from outside of the block scope. Like so:

function myNum() {
   if(true) {
     let x = 100
   } 
console.log('block:', x)
}

myNum()
// ERROR : ReferenceError: x is not defined

By simply moving the console log outside of the block scope parameters, the system will give us a ERROR Message.

Just like the box reference, you can only fit one inside another. The levels of scope can be accessed from down to up and not vice versa. The Global scope can be accessed by the Functional and Block scopes. The Functional scope can be accessed by the Block scope. And the Block scope only has access to itself. In a simplified version, the outer scope does not have access to variables declared in an inner scope. The inner scope, however, does have access to the outer scopes.

What matters the most in the scope chain, is where the variable is declared, not where it is invoked.

I hope my analogy made sense to you as it did to me. I find with as much information that we are currently learning, it is nice to relate it to something else to make sense of it all. Happy coding ya'll (:

Assigning and Declaring Values and Variables

Stephanie Sison — Mon, 06 Jun 2022 22:21:00 +0000

As a current student learning how to code via JavaScript with little to no experience in the coding world even the simplest things can be thought of to be complicated. I found so far that I sometimes like to make things harder than it seems to be. For example, using let vs. const.

Some background information before we continue. Let and Const was introduced in 2015 when the ECMAScript 6 came out with the updates. ECMAScript or ES was created by developers to be a centralized organization to allow changes or additions in languages like JavaScript. The idea behind this organization is to add updates in an organized manner. Allowing one group to control what is updated to be used with the new language keeps the languages organized and efficient.

Before the introduction of let and const, there was var. The keyword var is one that is used in older browsers as it was part of the ECMAScript1 update. Since the ES6 update, let and const are the preferred uses when declaring a variable. And to go further on those lines, my instructor have strongly advised me to declare variables primarily using the keyword const. By declaring variables using const, it prevents you from accidentally re-declaring it later on in your code. And when you are working on a big project, will save you many headaches.

I did the pre-work that was assigned to me before starting my current program. I felt like I had this down, but when it came down to doing my first assignment with it in the actual program, I found it more difficult than it really needed to be. After researching and reading up on let vs. const, I finally realized that a value assigned to let is something that can be modified and that a value assigned to const is something you cannot.

Someone had mentioned to me to think of let as "reading and writing." It is something that you can follow, but also make changes to as necessary. Now think of const as "reading." It is something that cannot be erased nor changed once a value has been assigned to it.

Somehow this analogy is now stuck in my brain every time I come to a point where I need to use let or const. I will silently question myself whether or not I need "read and write" this value or just "read" it.

Hello internet friends ...

Stephanie Sison — Sun, 22 May 2022 16:28:42 +0000

My name is Stephanie. I live in Washington and I am currently a hairdresser. I was born in the Philippines and moved to the states when I was 4 years old. Although, we lived in the states and adapted to some of the customs here, my mother also found it very important to keep our native culture embedded in us. I can speak tagalog and english. And fun fact, I am one of 14 kids - long story short, that's step-siblings, half-siblings, and full siblings.

I have been in the hair industry about five and half years and have been itching for a change. I started my career change journey by doing some pre-requisites for nursing and found that that was not the right path for me. I have loads of clients, given that I work at a salon in Seattle, in the tech world and they have graciously let me pick their brains. I found it so interesting. A friend introduced me to the bootcamp route and I started off learning on freecodecamp.org as I am sure that plenty of people have started on. It worked my brain and really challenged it, but I loved every second of it. It was so amazing to code something and then see the outcome of it right away and the abundance of things you can do to them.

Flatiron stood out to me because of their Flex program. Because I took some community college classes that were primarily online, I found myself accustomed to the online learning and working full time. I really admire the help Flatiron offers even being in the Flex Software Engineer program because I can learn on my own pace, but I am always able to get help if I need it. I would love to learn more about front end because I like seeing the code that I create come to life. I really enjoyed the pre-work assignment where we re-created the Pharrell Williams poster. Aside from that, I would really be interested in getting into a gaming company and code for them. But all around, I love being a part of the tech world since it changes and evolves everyday and I have a small part in that.

I can't wait for you all to follow along my journey and read about what I learned. I am so excited for this new chapter in my life and I am taking everything in, no matter how challenging, with open arms.