DEV Community: acw0415

Validations in Ruby on Rails

acw0415 — Thu, 15 Sep 2022 14:49:45 +0000

Validations are basically used to check and see if the data that is sent through your application is what you expected it to be.

You can basically think of it like a data filter, and there are many validation helpers you can use. Here are a few that I find useful:

class Teenager < ApplicationRecord
  validates :age, comparison: { greater_than_or_equal_to:13,
less_than_or_equal_to: 19}
end

this is used to compare the data to parameters that you set. In the example above we are validating if someone is considered a teenager by comparing the data we get to the parameters set and if the integer is between 13 and 19 it will pass the validation.

class Salsa < ApplicationRecord
  validates :spice, inclusion: { in: %w(mild medium hot),
    message: "%{value} is not a valid spice level" }
end

this is used to give a specific piece of data that must be included. In the example above the data enter must include mild, medium, or hot or it will not pass the validation. (a side note: the %w(data) used above is the same as [data] in ruby.)

class EmployeeDinner < ApplicationRecord
  validates :name, length: { minimum: 2 }
  validates :employee_number, length: { is: 9 }
  validates :menu, length: { maximum: 1000 }
  validates :times_attended, length: { in: 1..15 }

end

this is used to give a specific length for whatever you are validating. In the example above the name has a minimum of 2 so the string must be longer than 2 characters, the employee_number is setting a specific value of 9 so it cannot be anything more or less that 9 characters, the menu is setting a maximum character limit of 1000, and times_attended is giving a range of anywhere between 1 and 15.

There are many different options for validations and they are all useful and unique it is worth taking the time to learn what each of them can do. I have only included 3 here, but there are many more. I have included a link below that goes over validations in far more detail. Hope this is helpful!

source: https://guides.rubyonrails.org/active_record_validations.html

NPM

acw0415 — Wed, 24 Aug 2022 21:36:18 +0000

Npm stands for Node Package Manager. It is a manager for packages on the Node JavaScript platform. Developers all over the world use npm to publish and share their code and it is known as the world's largest software registry.

A Brief Overview of useState

acw0415 — Sun, 31 Jul 2022 23:38:18 +0000

What is useState()?

So useState() creates a javascript object which you can use to dynamically update your web page asynchronously (not relying on information from elsewhere). It is similar to props with one key difference: state is handled within the component it is passed to.

How is it used?

When implementing state in your function it must first be imported from the react library.

import {useState} from "react"

Once it has been imported you can then use it by declaring it. The first item it returns will be the variable you are trying to set the state for, and the second item it returns will be a function for setting the value of that variable whatever it may be. Typically the naming convention for this function is the variable name you set preceded by the word "set" this helps to avoid confusion.

const [variable, setVariable] = useState()

Now, whatever is inside of the parentheses of useState will be the default value until it is "set" with the setter function that you named. You can make this an empty version of whatever value you expect your variable to be (i.e. [], {}, "") whether it's an array, an object, or a string.

When should I use it?

React utilizes state fairly heavily, due to the fact that it is so versatile, you will probably find yourself using it a lot. However when is it appropriate to use props instead? You may be asking. Well basically you should use state until the complexity increases (i.e. passing props down to child components) to the point where props seem to be required.

This is a brief, high level, overview of state as a concept. For more detail on how state actually works, and what it can be used for I would recommend you refer to react's documentation:

Component State – React

reactjs.org

I hope this helps a bit with understanding the concept!

How to get information of an Element to the console on click in JS

acw0415 — Sat, 09 Jul 2022 20:24:08 +0000

document.addEventListener("click", (e) => console.log(e.target))

So let me begin with this: I am by no means an expert on javaScript(not yet anyway), this is simply a neat little trick I learned and found useful, so if I don't make something clear or don't use the right verbiage I apologize, I'm still learning and this explanation here is to help me better understand how everything works and hopefully you. Now that being said, I'll try and explain what this code is doing.

First, "document" is simply setting the scope of the command, basically within your whole document you want the command to happen.

Next, we use "addEventListener" which is one of the commands javaScript uses to interact with events in the real world, it "listens" for the event that you specify and runs the code you set in response.

The next part within the parentheses is "click" in quotations, here you are setting what event your addEventListener function is listening for (i.e. "submit","keydown","mouseover", ect.) followed by a "," which separates one parameter from another.

Next, we add an anonymous function with "e" as a variable within parentheses, normally these could be empty if you just want to run your code on click or whatever you set for your event but we need to reference the event variable later, this function variable could be named anything we want "e" is just short for event in this case.

Then, we use arrow function syntax to target the last bit of the code, which is console.log(), console.log simply outputs whatever you specify in the parentheses to the console (usually a variable or a string) this is very useful for debugging.

Finally, in console.log we have "e.target" which is the variable we just set in the anonymous function followed by "target" using dot notation, which is just saying to target whatever event is pointing to when the event is triggered (whatever you click on).

Lastly, so what this code is saying is "Within the scope of my document, listen for a click and when that click is triggered, whatever was clicked on we want its information printed to the console".

I have found this pretty useful for locating the spot I want something to show up on my webpage within the HTML code without having to scroll through each element until it highlights or for just finding an ID of an element without having to search for it.

I hope this helps!

So I'm in a bootcamp...

acw0415 — Fri, 01 Jul 2022 03:36:47 +0000

I've been feeling pretty overwhelmed during the first week of the new coding bootcamp I'm attending. My cohort mirrors my sentiments, it just seems like we're getting bombarded with a sort of esoteric shotgun approach and it's pretty difficult sometimes to not give in to stress and have a breakdown. However, even with all of these feelings I've never been more excited, challenged, or hopeful. I honestly can't wait to learn more.