DEV Community: Gus Bikos

Deploy your React App using Github Pages.

Gus Bikos — Fri, 18 Jun 2021 23:06:28 +0000

If you don't have any hosting at the moment and you want to use something free Github is a very good option. In this step by step tutorial I will be going over the process of creating and deploying a React application.

Before the process gets started we need to make sure we have the following installed:
Node.js - https://nodejs.org/en/download/

Once that's installed you can head over to your terminal/text editor and decide where you would like to create your react application. Now that your ready to create your app you type the following:

npm init react-app <your project name here>

This should take about a minute as you are now creating your new react application and all the files that comes with it.

Then you want to cd into the folder that contains your application. Run a npm start to make sure that your application is running, and you should see a tab open with the react logo. If your able to see that then your react application loaded successfully.

npm start

Now that your react app is all set head over to your Github page and create a new repository. I personally like to name my repository and my react app the same but it's ok to have a different name if you like. Make sure its a public, and empty repository so make sure there is no README.md, description etc.

You will see this page

Leave that open for now and lets move on to the next step.

Make sure your server is shut down by hitting ctrl+C and run this command:

npm install gh-pages --save-dev

Here we install the github pages and we save it as a dev dependancy. Explanation of a dev dependency here https://nodejs.dev/learn/npm-dependencies-and-devdependencies

After that's installed you want to head over to your react application in your text editor, and go into your package.json, here we need to add a few things.

At the very top above "name" your going to add "homepage": "http://"your-github-name".github.io/"your-repo-name", don't forget to add the comma. This is going to be the link to your web application.

Then your going to navigate where it says "scripts" and in that hash you are going to add two things:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
so the final product looks like this.

Refer to the picture above to see the differences.

Next step in your text editor (make sure you are in the right folder) type:

git init

Now go back to your Github page where you created the repo earlier, make sure your link it set to HTTPS:

Copy where it says git remote add origin and paste it into your text editor.

This will create a remote repository called origin. You can check if its running by running these two commands:

git remote

Shows you your origin branch

git remote -v

Shows you the link of your repo. These are good ways to check if everything is synced correctly.

Navigate to your src/App.js and delete all the react code that is there. Inside the return in your App function you can add some HTML there and see if any changes are made to your site. You can run another npm start and see the changes made to your page.

Your app is not fully deployed yet there are a few more steps!

In this next step we will push our code up into the repo. Run these git commands in your terminal one at a time.

git add .

git commit -m "Deploy my React app to Github Pages"

The last thing were missing is to deploy our application from here to Github, so you must run this:

npm run deploy

Next step will be to push our code to Github:

git push -u origin master

Great! Now all your code is successfully pushed up and your site is up and running!

Now you want to head over to your repository on your GitHub, click on Settings, and on the left hand side scroll down a bit until you see Pages. Inside there you will see a green box and green text notifying you that your website is published at that link!

Using Github Pages is great for your personal portfolio, or even react projects and the great thing is that it's free!

Props vs State

Gus Bikos — Thu, 22 Apr 2021 15:31:20 +0000

What's the difference between props and state in React?

Here is a definition of each:

"props" (short for "properties") is a special keyword in React, and is used for passing down data from one component to another.

"state" is data that changes over the lifetime of a specific instance of a React component.

Let's dive into each.

Props are used to customize Components when it’s being created and give it different arguments.

import React from 'react'

function Topic(props) {
     return(
      <div>
        {props.name}
      </div>
    )
   }

One of the most important features of props is that they can be passed by a parent component to its child components. This allows us to create a component that can be customized with a new set of props every time we use it. This is similar to passing arguments to a function.

import React from 'react'
function Welcome() {
     return(
      <div>
        <p> Welcome to React, today you will learn: </p>
        <Topic name="Props"/>
        <Topic name="State"/>
      </div>
    )
   }

Props are passed to the component and are fixed throughout its lifecycle. But there are cases when we want to use data that we know is going to change overtime and store that data. In this case we use something called state.

To use state we must import a React Hook called useState

import React, { useState } from "react"

Figuring out where you need state is an important task as well because we only want to set state if we really need to, and which other child components are going to be using this state.

Some examples of when to use state is when something on your app updates or changes :

Counter
Toggle On/Off
Like button feature
User inputs (forms)
etc..

State allows React components to dynamically change output over time in response to certain events. Events such as onClick, onSubmit, and onChange are a few key examples of the events that can alter the state.

import React, { useState } from "react"
function addLikes() {
    const [likes, setLikes] = useState(0)
}

Here we set the initial state of the likes to be set at 0, and depending on where we implement this state will alter the count of likes which then updates state.

The difference between props and state is that props are passed down from other components to there child components and props are updated in the child component, and props that are just going to display some text like a header or a description there value wont be changed because they are just going to display some text.

State lives inside a component and is handled inside of that component while props are handled outside of the component.
You can pass down your state as a prop and use it in a child component for something like a like button that will increase likes. After the like button is clicked react sends that information back up to the component which is handling the state and it gets updated there.

Resources:

https://www.youtube.com/watch?v=IYvD9oBCuJI - Web Dev Simplified

https://reactjs.org/docs/components-and-props.html - React Docs

Creating a Rails API from scratch.

Gus Bikos — Tue, 30 Mar 2021 16:36:21 +0000

Once you have your app idea ready to be built out, you need a way for your browser to request information from the server. This guide will show you the steps needed to set up your own backend, and also where your browser will be pulling out information.

Step One

Start a new rails backend folder by using rails new --api. Don't forget to add the api because you will also need some files that come with it.

Step Two

In your terminal you can use rails g resource to make your model, controller, and all associated files that comes with the resource generator. Make sure it's singular.

rails g resource attribute:string, attribute:integer, attribute: boolean

Step Three

Now you must set up your table migrations so in your terminal you run rails db:migrate, and you should see your schema updated.

Step Four

Next we need to start making some information so your server can pull from the backend. Inside your db/seeds.rb file you start writing out some seed data associated to your project.

name = User.create(name: "Gus", last_name: "Bikos") etc.

There are many different ways to go about creating seed data do whichever way works for you.

Step Five

Ruby has a gem that enables CORS (Cross Origin Resource Sharing). This allows different browsers/servers to share scripts, and exchange data. Inside your gemfile you must include: gem 'rack cors'. In your terminal do bundle install to install it.

Step Six

Then go to your cors.rb file, config/initializers/cors.rb and uncomment:

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

Change origins from example.com to *. The * allows it's info to be available between all browsers.

Step 7

Your routes have a resource , figure out which routes you need and add them to your routes file.

Step 8

Next set up the controller. Go to app/controllers and set up your index, show , create, update, destroy. Your front end will take care of the new, and edit since we will be making our forms there.

Here we are:
1) Rendering all data to json
2) No longer need to add .require in private params

class SongController < ApplicationController

    def index 
        @songs = Song.all 
        render json: @songs
    end 

    def show
        @song = Song.find(params[:id])
        render json: @song
    end 

    def create 
        @song = Song.create(song_params)
    end 

    def update
        @song = song.find(params[:id])
        @song.update(song_params)
        render json: @song 
    end 

    def destroy
        @song = song.find(params[:id])
        @song.destroy
        render json: @item
    end 

    private 

    def song_params 
        params.permit(:name, :artist)
    end 

end

Step 9

Now set up your serializer. This is where you can assign which attributes are displayed on the DOM.

1) But first we must install the gem. In your gemfile do: gem ‘active_model_serializers'

2) Run bundle

3) In your terminal run rails g serializer Song. Always singular.

4) Start your server by running rails S

5) Then you can add which attributes you wanted displayed in your DOM. (This also accepts instance methods as well).

6) Go to your config/initializers and create a file 'ams.rb', (or any file name you prefer), and input the following:

ActiveModelSerializers.config.default_includes = '**'

This allows all serializers to be able to interact with each other.

Step 10

Then you can set up your associations by building out your next model, and your joiner if you have one as well.

Once again we use the rails g resource
and for our joiner we need to add our belongs_to.

Then in your models update the macros depending on what type of association you have between your models. It can he a has_many, has_one, has_many_through, etc.

Also update your serializer and add the associations there as well.

Step 11

Now you are ready to deploy your backend but first we must seed the data by doing:

rails db:seed

Once your data is seeded it should show up in your browser with all the information you stored in your seed file.

A simple auth guide for Ruby on Rails

Gus Bikos — Wed, 10 Mar 2021 16:20:36 +0000

Building a website is awesome, you can design it anyway you want and present it to the world through the internet. An important thing to have on your website is as much security as possible, and for certain data not to slip into the hands of others. One way of setting up your website and reaching that goal is by using Auth.

Auth is a way to associate each new, or existing user that is stored in the database with only information that pertains to them. The way that happens is through cookies, and sessions.
Cookies are small pieces of text data that gets stored in your browser. Specific cookies known as HTTP cookies are used to identify specific users and improve your web browsing experience. Sessions has the same concept, but instead of saving data in plain text it saves the data in a long string of mashed up text that is hard for somebody to tamper with that users information.

A simple way to set up user auth would be as follows:

We can start off by generating a new rails Rails app.

    rails new project

For the basic structure of user Auth we will have our User model.

Model

Our User model will only have two attributes, username and password.

rails g model user username password_digest

Controllers

The UsersController will have login, handle_login and logout actions that can be used in the routes.

-The login method does not necessarily need any logic for our simple app therefore we will leave it blank. But it will be associated with a form in our views login.erb file.

-The handle_login action just makes sure that if the user is signed in and is authenticated it will set a unique session to that user.

-The logout action just sets the session for that user_id to nil.

def login
    end

    def handle_login

      @user = User.find_by(username: params[:username])
      if @user && @user.authenticate(params[:password])
        session[:user_id] = @user.id
        redirect_to user_path(@user)
      else
        redirect_to login_path
      end

    end

    def logout
      session[:user_id] = nil
      redirect_to login_path
    end

The ApplicationController will have the actions current_user, logged_in?, and authorized.

-The current_user method returns the current user that is signed in and associated with there session.

-The logged_in? method return a boolean value on whether or not the user is signed in.

-The authorized method determines whether or not the user is authorized.

All the methods in your ApplicationController can be inherited from other Controllers using helper methods that are labeled on top of the ApplicationController. In addition to these helper methods Rails also has another before_action method which means the method followed by before_action will execute first in the Controller.

ApplicationController < ActionController::Base 
    helper_method :current_user, :logged_in?
    before_action :authorized

    def current_user 
       @current_user ||= User.find_by(id: session([:user_id)]
    end 

    def logged_in? 
        !!current_user
    end 

    def authorized 
        redirect to login_path unless logged_in? 
    end

Bcrypt

Bcrypt is a secure function that stores data in a form of a hash. It adds a built in read only attribute which is a boolean attribute. A read-only field can not be modified so nobody can tamper with your password. It also adds a validation field called password_confirmation which means when your signing up you have to enter your password twice to confirm it.

class User < ApplicationRecord 
    has_secure_password
end

Routes

Now we set up our routes under config/routes.rb.

Rails.application.routes.draw do
  resources :users

  get "/login", to: "users#login", as: "login"
  post "/handle_login", to: 'users#handle_login'

  delete "/logout", to: "users#logout"

View files

In your login.erb view file you will set up a form for your user to be able to login.

<%= form_tag "/handle_login" do %>
  <%= label_tag :username, "Enter Username" %>
  <%= text_field_tag :username %>
  <%= label_tag :password, "Password" %>
  <%= password_field_tag :password %>
  <%= submit_tag "Login" %>
<% end %>

Creating a New User

When the user clicks on submit it will redirect you back to the UserController which will trigger a post request to the create action which looks like this:

def create
   @user = User.create(params.require(:user).permit(:username,        
   :password))
   session[:user_id] = @user.id
   redirect_to '/login'
end

With the use of helper methods from the ApplicationController, we can also use the @current_user instance variable to do the same job as this create method and also add a unique session id to the new user instance.
This is great flexibility of utilizing helper methods. Assuming we have a private method called user_params we can use the method and pass it as an argument in our @current_user.

def create 
    @current_user.create(user_params)
    redirect_to '/login'
end

Ruby Gems

Gus Bikos — Wed, 17 Feb 2021 01:52:41 +0000

Ruby is a Object Oriented Language (OOP) which means that everything created is an object or an object of something. Ruby has this amazing functionality that makes a programmers every day life a lot easier to deal with and one of these functionalities are gems. Gems are different types of built in libraries in Ruby. Gems can be used to extend or modify functionality in Ruby applications. By simply creating a Gemfile you are able to call insert and call upon these libraries. You simply need to go to your terminal and type in the following commands I have mentioned for each gem to be installed in the descriptions below.

Different Types of Gems

gem "pry"

This gem can be installed on your computer by running gem install pry. Once installed you can insert it into your Gemfile inside your code editor by writing gem "pry" and by inserting require 'pry' on top of the file you are working in. This gem creates a debugging functionality, and an IRB alternative. It is very user friendly and definitely makes your debugging/testing process much easier.

gem "tty-prompt"

This gem can be installed by running gem install tty-prompt in your terminal. I just recently stumbled upon this gem in ruby during my third week of attending Flatiron coding bootcamp. This is a amazing gem that allows user interface within your console. This is great for CLI (command-line interface) applications which are run through your terminal or shell. They have no graphics or visual interface beyond what you see in your terminal after you run the program.

gem "sqlite3"

This gem can be installed by running gem install sqlite3 in your terminal. Active Record is a great way of storing data into a database, but it can not be done alone. For instance I am using Ruby along with sqlite3 in order to produce, and call different methods that allow me to create instances and store them in a database. Although sql does not store information in a database, it is used to create tables of data that store information. This is especially useful when working with active record in that it stores everything in your data base according to it's associations with other objects in your table.

gem "faker"

This gem can be installed by running gem install faker in your terminal. The faker gem automatically creates data for you that you can enter into a database. Some examples of fake information that can be generated are names, addresses, email addresses, etc. You can set up a method. In order for this to work you met set up a seed data file within your migrations folder. Then you can simply run db:seed and depending on the number of instances you wanted to add then that number of instances will be generated.

This is a great way to set up your seed file with alot of data that you can manipulate later but saves alot of time. But don't forget to set your migration tables first!

gem "require_all"

Don't get this mistaken with "require". Require is used in individual files to require a certain gem. Without this require_all gem we would need to specify each file that is associated to one another. Instead of going back to each file and writing out the full file path which can be a pain, with this gem you simply put the name of the directory, and all files associated to that directory will be loaded.

gem "activerecord-reset-pk-sequence"

This gem allows resetting the id of AR table to 0. This gem is a add on to ActiveRecord, when you create new instances in your database they are set with an id that starts at 1, and each instance you create updates the id number in an ordered sequence. Now if you decide to delete one or more elements in the table without this gem the id sequence would continue to increment by 1 at a time. But before you start making new instances again you must call the name of your model.reset_pk_sequence. So if you had a model called Car, then you would call Car.reset_pk_sequence, and from then on your id's are set back to the starting point of 1.

The Start of a Coding Bootcamp

Gus Bikos — Tue, 16 Feb 2021 04:24:10 +0000

Before I started on my journey towards software engineering I was working a blue collar job as a supervisor in a plumbing company. Although the money was great, it was not the lifestyle that I envisioned for myself, as well as the current time we are living in during this pandemic. I got laid off for a few months and I did some thinking, and I finally came to the conclusion that it was time for a change in my life and in my career.

During my time off I was researching new careers in the tech industry but I was not completely sure which route I wanted to take. I decided to give coding a try so I picked up a few python, HTML, and CSS courses on Udemy. It was going well and I was learning new concepts but after a while I knew I needed a faster way to grow, and also to be a part of a more structured environment.

After some research I stumbled upon a few links on coding bootcamps. I reached out to a friend who attended Flatiron as well back in 2017. After four years he is now working for Facebook as a full stack software engineer. He highly recommended this bootcamp and told me if you put the time in and give it your all the end goal can be very rewarding. After hearing his advice I decided to give it a shot.

I am currently in my third week of attending Flatiron coding bootcamp. Before entering this program I thought it would be a regular 9-5 and I would pick up the concepts quickly and boy was I wrong. The word bootcamp is a military term that stands for a short, intensive, and rigorous course of training, and that is exactly what it has been so far. I am in a constant battle between time management, trying to catch up on previous work, and fully understanding a concept.

Although I might understand the concept and how things work, my biggest problem is putting it down and coding it out. For example my biggest issue is how to take a deliverable method from a practice lab and deliver the method with its corresponding components. I believe this is where pseudo code plays a big role. Sometimes I take a method and try 20 different ways to code it out and not get a single result. But I have to get into the habit of writing my steps down, thinking like a programmer and dissecting the problem one step at a time, and to thoroughly understand the concept of the problem and what needs to be provided.

I also learned that Google.com is a programmers best tool. When you get stuck on a problem refer to the programming language documentation. I had this issue in my first and even some of the second week when it came to the difference of class methods and instance methods. I would often get stuck trying to provide an instance method to a class method or vice versa. After some research and trial and error it finally stuck to me that a Class method only provides functionality to the Class object itself, and the instance method provides functionality to the instance of a class object.
What this means is that a Class is a set of blueprints that holds methods that contain certain information about the class.
Classes define which methods are available on any instance of that class. Defining a method inside a class creates an instance method on that class.

In this example above, "self" is referring to itself which is the Class itself. When you add self to a method this is considered a Class method. When you call the first method self.from the class you can directly call the class itself but if you do it on a instance method you get an "undefined method error". For you to call the instance method, you must first set your class to a variable. When you set your class to a variable it becomes an *instance * of a class. Then you are able to call instance methods.

Though this process so far is very time consuming, and taking away a big part of my life, I know this sacrifice for a short period of time will help me in my future career, as well as put me to the test to develop the skills to handle pressure in a work environment in the near future. I can't wait for what the future holds and the also the rest of my journey here at Flatiron!