Forem: Beth

RESTful Conventions in Rails

Beth — Fri, 15 Apr 2022 00:40:23 +0000

RESTful routes fall into four general categories: Create, Read, Update, and Delete. They are commonly referred to as 'CRUD' actions. Almost all major websites use full CRUD so that users can interact with their databases.

To implement these four CRUD actions to a database, we combine each one of them with an HTTP verb like shown below.

CREATE with POST
READ with GET
UPDATE with PATCH or PUT
DELETE with DESTROY

For example, if we wanted to do full CRUD for birds.rb model, here is what it would look like in a Rails framework.

Creating RESTful Routes with Resources

To set up full CRUD actions in Rails, we first need to create some routes in routes.rb. We can do this by using Resources as shown below.

# config/routes.rb

Rails.application.routes.draw do
  resources :birds
end

If our application does not use all four CRUD actions, we can customize our routes to have only the actions that we need. For example, if our website is read only and we only need to make a GET request with index and show controller actions, then routes.rb will look like this.

# config/routes.rb

Rails.application.routes.draw do
  resources :birds, only: [:index, :show]
end

It is considered good practice not to have routes that are not being used by out application. Therefore, using the above syntax to pick only the routes we need is important. There is also an option to list only the routes we don't use by replacing only: with except:.

Quick set up of CRUD in Rails using Scaffold

Rails scaffolding is a quick way to generate some of the major pieces of a Rails application. If you want to create the models, views, controllers for a new resource in a single operation, you can use scaffolding as shown in the example below.

$ rails g scaffold Bird name:string species:string

Running the above code in the terminal will create multiple files for the Bird model including a controller that has built in full CRUD. However, it will set-up the file as if we are using Views for the front-end of or app. This could create some unnecessary files if we are using a front-end that is, for example, built using React.js.

Set up of CRUD in Rails using Resource

To avoid the above issue of having unnecessary files for an app that is using a React.js as a front-end library, we can instead run the following code in the terminal.

$ rails g resource Bird name:string species:string

This will create multiple files that we need for the Bird model; however, the controller will not have the CRUD actions already built. So we will have to manually write the code needed for full CRUD as shown below.

# app/controllers/bird_controller.rb

class BirdsController < ApplicationController

#Error Handling
  rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response

  # GET /birds (show all birds)
  def index
    birds = Bird.all
    render json: birds # renders data in JSON format
  end

  # POST /birds (create a new bird)
  def create
    bird = Bird.create(bird_params)
    render json: bird, status: :created
  end

  # GET /birds/:id (show a specific bird)
  def show
    bird = find_bird
    render json: bird
  end

  # PATCH /birds/:id (update a specific bird)
  def update
    bird = find_bird
    bird.update(bird_params)
    render json: bird
  end

  # DELETE /birds/:id (delete a specific bird)
  def destroy
    bird = find_bird
    bird.destroy
    head :no_content
  end

  private # code below this line is private (secure)

  def find_bird
    Bird.find(params[:id])
  end

  def bird_params
    params.permit(:name, :species, :likes)
  end

# Error handling
  def render_not_found_response
    render json: { error: "Bird not found" }, status: :not_found
  end

end

Good Practices

Use strong params by using the private method
Have code that will handle errors
Don't have unused routes in routes.rb
Leave comments explaining what the code is doing

Resources

Rails Guides

React Hooks

Beth — Fri, 01 Apr 2022 17:37:21 +0000

What are React Hooks

React Hooks are functions that give us abilities that we normally don't have in vanilla JavaScript. They all start with the word 'use' and help us avoid writing functions that would've been repetitive. On top of using the built in React Hooks, we can also build our own custom hooks to keep our code dry (not repetitive).

Hooks need to be imported at the top of a react component and only work if they are being called at the top level of a react component. Calling them in other functions or return values would give us errors.

In this blog, we will be covering the following react hooks.

useState
useEffect
useRef

useState

useState is a React Hook used to handle reactive data. It re-renders the UI when a state of the data changes so that the user can see the changed data.

In the example below, we are using useState to set the initial value of the count variable to 0. We are then using state to keep track of count and update the UI based on a click event that increments the count variable.

import React, { useState } from 'react'; //import useState

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

useEffect is a React Hook used to handle reactive data after UI re-render. We pass it a function (an effect) that needs to happen as a side-effect of a re-rendering.

In the example below, we are using useState to set the initial value of the images variable to an empty array. We the use useEffect to fetch data from an API and setImages with the fetched data. Then the return value of the function renders the fetched images on the UI.

useEffect by default re-renders UI every time a component re-renders. This can sometimes cause an infinite loop and could be something we don't want to happen. If we want the 'side effect' to only run the first time our component renders, then we can pass useEffect a second argument of an empty array as shown below.

import React, { useState, useEffect } from "react";

function DogPics() {
  const [images, setImages] = useState([]);

 useEffect(() => {
  fetch("https://dog.ceo/api/breeds/image/random/3")
    .then((r) => r.json())
    .then((data) => setImages(data.message));
  }, []); // second argument is an empty array

  return (
    <div>
      {images.map((image) => (
        <img src={image} key={image} />
      ))}
    </div>
  );
}

useRef

Just like useState and useEffect, we need to first import useRef to a component in order to be able to use it.

useRef is a React Hook used to capture a 'reference' to values that are accessible across multiple renders of a component. It returns a mutable ref object whose .current property is initialized to the passed argument. In the example below, the .current value of the count variable is set to 0.

Calling useRef creates a new internal .current value in React and gives us access to that value in a ref variable. To update the value of the ref in React's internals, we are updating its current property to increment by 1 on a click event using count.current = count.current + 1.

import React, { useRef } from "react"; // import useRef

function CounterRef() {
  const count = useRef(0); // passing it an initial value of 0

  function handleClick() {
    count.current = count.current + 1;
    console.log(count.current);
  }

  return (
    <div>
      <h1>CounterRef</h1>
      <button onClick={handleClick}>{count.current}</button>
    </div>
  );
}

Sources

Ruby Variables and Constants

Beth — Thu, 17 Mar 2022 05:25:36 +0000

Variables and constants are locations which hold data to be used by a program. Constants are meant to declare values that we expect to be unchanged throughout our program. On the other hand, we use variables to declare values that we expect to change throughout our program.

Variables

There are four types of variables in ruby. They are

Global Variables
Local Variables
Class Variables
Instance Variables

Global Variables

Global Variables start with a dollar sign. They are assigned globally within the program and can also be accessed from anywhere within the program.

In the example below, $favorite_season is a global variable and can be accessed by the print_favorite_season method.

$favorite_season = "Summer"

def print_favorite_season
    puts "My favorite season is #{$favorite_season}."
end

print_favorite_season #=> "My favorite season is Summer."

In the example below, $least_favorite_season is a global variable that is not initialized (is not set to a value). In ruby, this returns nil instead of throwing an error.

$least_favorite_season 

puts $least_favorite_season.inspect #=> `nil`

Local Variables

Local Variables start with a lowercase or an underscore. Any local variable defined inside of a method is not available outside of that specific method. In the example below, we are able to access favorite_season only inside the method it is defined in but not outside of print_favorite_season.

def print_favorite_season
    favorite_season = "Summer"
    puts "My favorite season is #{favorite_season}."
end

print_favorite_season #=> "My favorite season is Summer."

favorite_season #=> undefined local variable or method

If a local variable is defined outside of a specific method, then it is also not accessible inside of the method. So in the example below, the method print_favorite_season is not able to access the local variable favorite_season.

favorite_season = "Summer"

def print_favorite_season
    puts "My favorite season is #{favorite_season}."
end

print_favorite_season #=> undefined local variable or method

In ruby, if a local variable is not initialized, it will returns nil instead of throwing an error. Here is an example.

def _print_local_var
    uninitialized_local_var = 
    puts uninitialized_local_var.inspect
end

_print_local_var #=> nil

Class Variables

Class Variables start with two at symbols. They are initialized inside the class before they can be used within the program. Once initialized, they are accessible anywhere within the program where the class they are related to is being used.

In the example below, we see the class variable @@num_of_todo_items being accessed globally and locally within the context of the single class that it was assigned to.

class Todo
    @@num_of_todo_items = 0

    def initialize
        @@num_of_todo_items += 1
    end

    def self.count
        puts @@num_of_todo_items
    end

end

to_do1 = Todo.new
to_do2 = Todo.new 

Todo.count #=> 2

If a class variable is uninitialized, then it will result in an error.

class Test
    @@uninitialized_class_var
    puts @@uninitialized_class_var
end

#=> uninitialized class variable @@uninitialized_class_var

Instance Variables

Instance Variables start with an at symbol. They are similar to class variables when it comes to scope. What makes them different is that their values are local to the instances of a certain class or object.

In the example below, we are defining an instance variable called @todo_item and setting it to an instance of the Todo class called todo_item. We are able to access @todo_item in a new method called display_todo_item.

class Todo

    @@num_of_todo_items = 0

    def initialize (todo_item)
        @todo_item = todo_item
    end

    def display_todo_item
        puts @todo_item
    end
end

to_do1 = Todo.new("clean house")
to_do2 = Todo.new("practice Ruby")

to_do1.display_todo_item #=> "clean house"
to_do2.display_todo_item #=> "practice Ruby"

Ruby does not require us to initialize instance variables and the instance variables will have a nil value when uninitialized. Here is an example.

class TestInstanceVar
    @uninitialized_instance_var
    puts @uninitialized_instance_var.inspect #=> nil
end

Constants

Constants are defined using all capital letters, are accessible globally, and are used to define values we expect to be constant (not change). If we try to re-assign the values of constants, ruby does not throw errors. However, it will give us a warning saying we are trying to re-assign the values of a constant.

SEASONS = ["spring", "summer", "fall", "winter"]
puts SEASONS #=> ["spring", "summer", "fall", "winter"]

SEASONS = "replacing the seasons array with a string"
puts SEASONS 
#=> warning: already initialized constant SEASONS 
#=> "replacing the seasons array with a string"

Similar to class variables, referencing an uninitialized constant produces an error.

SEASON

puts SEASON.inspect #=> uninitialized constant SEASON

Summary

Here is a quick way to identify constants and the different kinds of variables.

$global_variable

local_variable

_also_local_variable

@@class_variable

@instance_variable

CONSTANT

Framework vs Library

Beth — Sun, 27 Feb 2022 02:04:47 +0000

The terms "framework" and "library" tend to be used interchangeably in software engineering. Frameworks and Libraries are both reusable code written by someone else to help us solve common problem in easier ways. However, despite this similarity, there are some differences between the two. Some of these differences are shown below.

Inversion of Control

One key difference between a Framework and a Library is called inversion of control.

In the case of a framework, the framework is in charge of the flow of the application. It provides some places to plug in our code, but it calls the plugged in code as needed. Frameworks contains the basic flow and we only need to write the behavior. In other words, the framework code calls our code.

On the other hand, libraries allow us to control the flow of the application. We choose when and where to call the library. This means, we will need to understand the functionally of each method being used and decide when our code calls the library code.

So we can say using a Framework is like buying a new home. The house is already built, so you don’t have to worry about building problems. You can't choose how the rooms are arranged; however, you can choose what furniture goes in each room.

On the other hand, using a Library is like building your home from the ground up. The house can be made in any style you prefer and the rooms can be arranged and decorated however you like.

Replaceability

Another difference between a Framework and a Library is that frameworks are not as easily replaceable as libraries are.

Once we write our code in a framework (for example, in AngularJS), and if we decide to replace this framework, we will need to re-write all the code in the application.

On the other hand, if we are using a library (for example, React), and don't like it, we can replace it with another library (for example, with jQuery). This will require some rewriting of code; however, we won't have to start from nothing.

Adding Functionality to Existing Projects

If we have an existing project and we wanted to add a new functionality to it, then incorporating frameworks seamlessly into the existing project is impossible. Frameworks should be used when starting a new project.

Libraries are instead easier to add to an existing project. We can integrate libraries seamlessly into existing projects to add functionality. We can even add multiple libraries in on application if we needed without having to replace the existing one.

Learning Curve

Compared to Libraries, Frameworks have steeper learning curves. Because Frameworks provide the flow of the code, it takes more time initially to understand and learn them.

On the other hand, Libraries have shorter learning curve than Frameworks do.

Conclusion

As shown above there are some advantages and disadvantages for both Frameworks and Libraries. Depending on the situation of your project one might be a better option than the other.

Examples of Javascript Frameworks

Bootstrap
Angular and AngularJS
Ember.js
Aurelia
Vue.js

Examples of JavaScript Libraries

jQuery
Underscore and Lodash
D3.js
React
Redux

Resources

freeCodeCamp
baeldung
TheServerSide

JS Array Iteration Methods

Beth — Thu, 17 Feb 2022 22:53:25 +0000

JavaScript has some built in iteration methods that help us repeat an action on every item in an array or an object. In this blog, I will be focusing on four iteration methods that can be used on arrays. These methods are find(), filter(), map(), and forEach().

I will go over the similarities and differences between these four array iteration methods.

Which methods are array specific?

find(), filter() and map() are methods that are specific to arrays; and therefore, they cannot be used on objects. However, forEach() is an iteration method that can be used both on arrays and objects.

What are some similarities between the methods?

find(), filter(), map(), and forEach() all take callback functions. The applied callback functions tell the iterators what action to repeat on the array when iterating over each element within it.

Examples of the methods in use

I will be using an array called usTaxes to show how find(), filter(), map(), and forEach() can be used to iterate over arrays.

const usTaxes = ['income', 'sales', 'excise', 'payroll', 'property', 'estate', 'gift']

.find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

The find() method stops searching through an array as soon as it finds one value that meets the criteria. Therefore, as shown in the code below, the find() method only returns 'payroll' even though there is a second element in the usTaxes array that starts with the letter 'p', 'property'.

If no values satisfy the testing function, find() returns undefined.

console.log(usTaxes.find ((el) => el.startsWith('p')))

// => 'payroll'

console.log(usTaxes.find ((el) => el.startsWith('a')))

// => undefined

.filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Unlike the find() method, the filter() method keeps searching though an array even after it finds a value that meets the criteria of the callback function. Therefore, as shown in the code below, the filter() method keeps searching through the usTaxes array even after it finds 'payroll' and returns an array with all the values that start with the letter 'p' ['payroll', 'property'].

If no values satisfy the testing function, the filter() method returns an empty array.

console.log(usTaxes.filter ((el) => el.startsWith('p')))

// => ['payroll', 'property']

console.log(usTaxes.filter ((el) => el.startsWith('a')))

// => [ ]

.map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

For example, in the code below, we use map() to iterate over the usTaxes array and return a new array called newUSTaxes. We also used map() to make all the elements of the usTaxes array in uppercase when returning them in the newUSTaxes array.

newUSTaxes = usTaxes.map(el => el.toUpperCase())

console.log(newUSTaxes) 

//=> ['INCOME', 'SALES', 'EXCISE', 'PAYROLL', 'PROPERTY', 'ESTATE', 'GIFT']

.forEach()

The forEach() method executes a provided function once for each array element. This is a method that can be used both on objects and arrays. Unlike the other three methods, forEach() returns undefined.

newUSTaxes = usTaxes.forEach(el => el.toUpperCase())

console.log(newUSTaxes) 

//=> undefined

If we want the result of the forEach() to be logged, then we have to tell forEach() to do so inside of the callback function we pass it.

usTaxes.forEach(el => console.log(el))

//=>
'income'
'sales'
'excise'
'payroll'
'property'
'estate'
'gift'

Summary

find(), filter(), map(), and forEach() are very useful when we want to iterate over an array.

find() is the best method to use when you want to find the first element that meets the criteria of the callback function you pass the method.
filter() is the best method to use when you want to find all the elements within the array that meets the criteria of the callback function you pass the method.
map() is the best method to use when you want to manipulate the data within an array in a non-destructive way and expect to have a return value.
forEach() is the best method to use when you want to repeat an action on an array in a non-destructive way but not necessarily need a return value at the end.