DEV Community: spencer-w-mathews

Active Record Validations

spencer-w-mathews — Tue, 13 Sep 2022 19:53:32 +0000

Validations are used in order to ensure that the data persisted to the database is valid.

Why Validate?

Validations can help ensure input data is compatible with existing data. They can help assure a valid email address or username is used. They can make sure a data set designed to be integers only stays that way.

Common Validations

acceptance
validates_associated
confirmation
comparison
exclusion
format
inclusion
length
numericality
presence
absence
uniqueness
validates_with
validates_each

Sources: https://guides.rubyonrails.org/active_record_validations.html#validations-overview

What is an API?

spencer-w-mathews — Tue, 13 Sep 2022 19:29:36 +0000

An API (Application Programming Interface) is the mechanism used to allow the client and server to communicate. The API takes the clients request brings it to the server receives the data from the server and returns it to the client in a way they can read.

Real life example:

If you are the client when you walk into a bank then the teller who takes your request and returns you money or information is the API. The API allows the user to communicate with the banks data.

MVC-What is it?

spencer-w-mathews — Fri, 12 Aug 2022 22:39:04 +0000

MVC is a software design pattern that separates the data, layout, and routes. This creates a division of labor or "separation of concerns" that allows for easier maintenance.

Model

The model decides what data the app should hold. If data changes then the model will tell the view.
In a rails/react application the models would be located within the app folder and they would be written in ruby.

View

The view is the screen of the app the decides which data to display.
In a rails/react application this would be the react portion. The front-end which displays the data to the end-user.

Controller

The controller possesses logic with the ability to update the models and/or view in response to actions from the end-user.
In a rails/react application the controllers would be located within the app folder and they would be written in ruby.

sources: https://developer.mozilla.org/en-US/docs/Glossary/MVC

Information Flow in React.js

spencer-w-mathews — Fri, 15 Jul 2022 12:53:10 +0000

Why is information flow in React.js different from JavaScript?
In traditional JS programming a single page document was used to accomplish all actions. This means scope of variables is the only barrier for communication from function to function. React.js allows the use of components which significantly increase the organization and readability of the JavaScript in the application. React.js grants the ability to make a component hierarchy or tree of components. This tree of components need a way of communicating with each other.

How to pass information down the tree
Information passes from the parent component to child component with the use of props.
These props have to be passed to child:

import React from "react"
import Child from "./Child"

function Parent(){
const x="this is from my parent"
return(
   <Child x={x}/>
)
}

export default Parent;

Then, accepted by the child:

import React from "react"

function Child({x}){
return(
   console.log(x)
)
}

export default Child;

The console.log in this Child component would output the string assigned to x from the parent function.

How to pass information back up the tree
Passing information back up the tree otherwise known as inverse data flow gets a little more complicated. To do this a function from the parent component must be passed to the child and then called with the data needed in the parent component.

import React from "react"
import Child from "./Child"

function Parent(){
  function getName(nameFromChild){
    console.log(name)
  }
return(
   <Child getName={getName}/>
)
}

export default Parent;

Then, accepted by the child:

import React from "react"

function Child({getName}){
  const name="Steve"
  getName(name)
}

export default Child;

This will return a console.log of "Steve".

Conclusion
The woes of information flow may seem daunting at first. After passing hundreds of props and callback functions up and down component trees it feels like second nature, and the gains you receive in terms of organization and readability far outweigh the slight learning curve. Thank you for reading!!!

Understanding Scope In JavaScript

spencer-w-mathews — Thu, 16 Jun 2022 19:28:58 +0000

What is scope in JavaScript?
Every variable within JavaScript has a scope. The scope of the variable governs the variables accessibility. The accessibility of the variable is where you are able to access the variable within the JavaScript you are working with.

Different types of scope
Global Scope
Global scope occurs when a variable is accessible from anywhere within the file. When a variable is declared outside of any function the variable will be accessible globally.
The three ways to declare a variable (var, let, const) will all act the same when declared globally.

let name = "foo" //name variable can be accessed function whatsName(){ //name variable can be accessed }
Function Scope
Functions all have Function Scope. Function scope means variables declared within a function are accessible only within the function. Just as with Global Scope the three ways to declare a variable (var, let, const) will all act the same when declared globally.

function functionScope() { let = "variable"; // Function Scope }
Block Scope
Block Scope denies access to variables declared within an {} block from outside. This wasn't established until 2015. Block Scope is only possible with const and let. Var allows variables to be accessed from outside the {} block.

{ let variable = 2; } // variable can not be accessed here { var variable = 2; } // variable can be accessed here

Why do you need to understand scope?
Understanding the scope of each variable declared within a JavaScript file lets the author of the code to be more agile and accurate. Scope can cause headaches and hang-ups. Not having a solid understanding of scope costs time. Hopefully, this blog post adds to your understanding of Scope.

source(s): W3 Schools