DEV Community: Josephine Luu

Rails: Active Record Validation Helpers

Josephine Luu — Sat, 10 Sep 2022 02:03:51 +0000

Why do we use validations?

Validations are used to ensure that data you want is saved correctly into your database. For example, you wouldn't want someone to put a phone number in a email form.

Validation Helpers

I'll be going over some validation helpers along with some examples provided.

1. presence

In line 3, this is how you would use presence. This is saying
that a name has to be there. If a user were to try and
create a mission without a name, it wouldn't work.

2. uniqueness

This is saying that a email has to be unique.

3. length

With each of these, it can have a minimum, maximum, in, and is. Minimum and maximum is pretty self explanatory. For in, it's saying that the password has to be a length within 6 to 20 characters. As for is, it has to be 6 characters exactly.

4. inclusion

In line 2, this is saying that strength can only be strong, weak, or average. In rails console, if you enter %w(Strong Weak Average), it will give you an array.

In line 3, it's saying the age has to be between 8 and 18.

These are just a few active record validations, but if you are interested in looking at more, I would visit here. Thanks for reading and good luck coding!

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

Active Record Associations

Josephine Luu — Sun, 21 Aug 2022 18:41:00 +0000

What are Active Record Associations?

Association is the relationship between models and it's used to make it easier on coders like you. Let's dive into the different types of associations with a example for each.

The 6 Types of Associations

1.belongs_to
A belongs_to association creates a connection with another model. The associations has to be used in a singular term because Rails will automatically infer the class name from the association name. In this example, each review can be assigned to exactly one user. It will look for a user_id on the reviews table.

2.has_one
A has_one association indicates that one other model has a reference to this model. For example, each supplier only has one account. The account will be associate with supplier_id.

3.has_many
A has_many association is a one-to-many connection with another model. The associations has to be used in a plural term. For example, a user can have many reviews in this example.

4.has_many :through
A has_many :through association has a many-to-many connection with another model. The models are connected through another model. For example, a game has many users, through reviews and a user has many games, through reviews. A review belongs to a game and a user.

The tables will look something like this.

5.has_one :through
A has_one :through association sets a one-to-one connection with another model but can proceed through a third model. For example, if a department has one manager, and each manager is associated with one manager history, then it will look like this:

6.has_and_belongs_to_many
A has_and_belongs_to_many association is similar to the has_many :through association, but there is no third model. For example, there was a review model, but now there is only a game and user model.

There is also a polymorphic association that is more advanced and to learn more about that I would recommend visiting this. I hope this was helpful and good luck coding!

Sources:
-https://guides.rubyonrails.org/association_basics.html
-https://www.youtube.com/watch?v=5mhuNSkV_vQ&t=409s

React Functional Components

Josephine Luu — Sat, 30 Jul 2022 19:13:00 +0000

As you start out learning React, you may have came across React components and became confused. I hope by reading this, you can gain more clarity. As such, I will break down what a React component is, why it's used, and how it's used with a few examples.

What is a React component?
It's simply building blocks being used to break down and simplify how a website works. For example, in the image below, you can see how the Google page is broken down into several parts like Logo, WordBox, SearchButton, etc.

Why would anyone want to do that?

By breaking down a website with components, it makes it easier for the coder to identify and update any mistakes made. One of the main benefits in using components, is being able to save time by reusing components. These are just a few reasons to use components, but if you want learn about more then I would suggest clicking here.

Functional Components

Functional components are javascript functions that must start with a capital letter. They usually pass in properties, also known as props. To learn more about props, I would suggest clicking here. A example of how a functional component looks:

function WordBox(){
  return <div>Hi!</div>;
}

Another way functional components are written are like this:

const WordBox = () => <div>Hi!</div>;

There is always some top level component and most often it is a component called App. With any component, it can call other components as well. For example,

function App(){
  return (
     <div>
      <WordBox/>
      <Logo/>
     </div>
   );
}

You can see that it's calling the component WordBox we used in the example above and Logo as a component in the picture shown above.

Rendering Components

In order for the components to show, it needs to be rendered using ReactDOM.render() method. Most often there is a file called index.js where ReactDOM.render() is used, although the file name doesn't have to be called that. The method will pass in the top level component as the first argument, and then pass document.getElementById("root") in the second argument. For example,

ReactDOM.render(<App />, document.getElementById("root"));

You can see here that the component App, the top level component, is being called. With document.getElementById("root"), it is getting the element in the HTML file, that you will need to create, with the ID of root. To learn more about the HTML file, I would suggest clicking here.

I hope this provided clarity for you and good luck coding!

Sources used:

-Picture image
-https://reactjs.org/docs/components-and-props.html
-https://www.geeksforgeeks.org/reactjs-components/

Creating HTML DOM elements with Javascript

Josephine Luu — Mon, 11 Jul 2022 22:20:03 +0000

If you're reading this then you must know a little bit about what HTML and Javascript is. So how exactly do you create a HTML DOM element with Javascript? It's not an easy concept to grasp as a beginner in Javascript but hopefully after reading this, you can gain a better understanding. Let's start with the basics.

What is a HTML element?

A HTML element includes everything in between the first tag to the end of the tag. For example,

<p>A paragraph</p>

Not all HTML files include tags like a paragraph tag <p></p> or an image tag <img>. Knowing how to create a HTML tag with javascript is essential if you want to add anything to the page without touching the HTML file.

How do you create a HTML DOM element with Javascript?

We will use this HTML code in reference to our code examples.

<body>
    <div id='create-cat'></div>
</body>

1) Create an element by using document.createElement("x").
X represents any element you're trying to create.
For example, if you want to create the element <img>
and declare it as a variable, you will type:

 let imgTag = document.createElement("img")

2) Select where you want to append the <img> tag. In this case, append it to the <div> tag. Declare it as a variable so you can reference back to it later. To do that, you will type:

let catCreation = document.querySelector("#create-cat")

3) Now, to actually append the <img> tag under the div tag, you will type:

catCreation.append(imgTag)

This will make the code on the HTML DOM look like this now:

<body>
    <div id='create-cat'></div>
    <img>
</body>

4) To make an image show, you will need to include the source path to the image. So, you will type the variable name you used to create the <img> tag. Enter .src after and set it equal to the image file or link. See the example below:

imgTag.src="img.cat_jpg"

Now you should see the cat image and and the HTML DOM will now look like this:

<body>
    <div id='create-cat'></div>
    <img src="img.cat.jpg">
</body>

Success! You have officially created a new HTML DOM element and appended it. Best of luck coding!

Cover image source: https://www.canto.com/blog/insert-image-html/