DEV Community: Zoe Mendez

Ruby on Rails Serializers

Zoe Mendez — Fri, 28 Oct 2022 19:27:43 +0000

Serializers

What is a Serializer?

ActiveModel::Serializers allows you to gather the information you wish to be rendered from the specific model. With the right relationships in place this can become the most amazing gem you come by in Ruby.

In my most recent project you can see I used my User Serializer to help create an image Url for an uploaded image. As well as rendered the pets that were correlated to the User. In the attributes section in the Serializer is where you choose what attributes from the given model you wish to display when rendering.

This allowed me to fetch my full user information without having to do multiple fetch request and doing a filter on the pets to compare the user id to the owner id that is in the pet model.

With the help of the Serializer, you can see above that I was able to design how the :featured_image element was being displayed in the fetch. I choose to do it that way, because if the image wasn't posted correctly it wouldn't add that attribute to the post request, which allowed me to render a default image in return.

You can use this in many different ways and I only began exploring how much you can do with Serializers. Can't wait to see what more I can learn

Application Controllers for Beginning Ruby Developers

Zoe Mendez — Sun, 18 Sep 2022 23:46:51 +0000

What are Application Controllers?

When beginning to build your API you will need to set up the controllers that allow you to fetch your API data. Here is where you set up what data you want to be grabbed when you use a specific tag in the fetch.

How do the Application Controllers work??

Well instead of using the initial def in ruby, you are going to use what ever method that you are going to be using. You also must create a function that will generate that information.

Get

=begin
table with data: schools
includes: 
name
grades
principal
rating
=end

get "/schools" do
variable = School.all
variable.to_json
end

Above you can see that I created a get request by the method initiation being get. What I did above allows me to grab all the data associated to the schools table. The fetch URL for me would look like http://localhost:9000/schools.

Post

=begin
table with data: schools
includes: 
name
grades
principal
rating
=end

post "/schools" do 
variable = School.create(
name: params(name),
grades: params(grades),
principal: params(principal),
rating: params(rating)
)
variable.to_json
end

Same as before, the method is initiated with the fetch request that I am creating for API. In this method, you can see that I used the .create attribute that allows me to create a new element to be added to my table.

Patch

=begin
table with data: schools
includes: 
name
grades
principal
rating
=end

patch "/schools/:id" do 
variable = School.find(params(id)
variable.update(
:principal => params(principal)
)
variable.to_json
end

The patch method, I use a .find to find the particular object that I'm trying to make adjustments to. Then I call .update on that object to update a specific part on the object. Above I choose to do the principal because that was the most likely part of the object to be updated. The fetch URL for this particular call would be http://localhost:9000/schools/:id. Then you would interpolate the id of the school into the URl.

Delete

=begin
table with data: schools
includes: 
name
grades
principal
rating
=end

patch "/schools/:id" do 
variable = School.find(params(id))
variable.destroy
variable.to_json
end

Like the patch request, the fetch URL stays the same. In the method you can see that I'm finding the object in which I intend to remove, and then calling the .destroy attribute in order to remove that idea from my database and the site.

This is the simple base on the building the CRUD controllers on an API. Feel free to use Active Record Basics to help with any extra questions I didn't cover.

Styled Components with Emotionjs

Zoe Mendez — Sun, 28 Aug 2022 17:51:58 +0000

Tired of trying to use an Index.css. Try Emotionjs!

What is Emotionjs?

Emotionjs is a library that allows you to write css with Javascript.

Styled Components

One way styling your site is to use styled components.

import React, { useState } from "react"
import styled from 'styled-components'

function Todoform(){
return (
        <FormDiv>
            <TitleP onClick={HandleClickFive}>Have Something More To-do?</TitleP>
            <form onSubmit={handleHandlerSubmit}>
                <p><TaskInput onChange={handleChange} type="text" name="task" placeholder="Task"></TaskInput></p>
                <p><TaskInput onChange={handleChange} type="text" name="category" placeholder="Category"></TaskInput></p>
                <SubmitButton type="submit">Add New Task</SubmitButton>
            </form>
        </FormDiv>
    )
}

const FormDiv = styled.div`
background-color: darkgray;
padding: 20px;
background-size: 100%
`

const TaskInput = styled.input`
width: 70%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
`
const TitleP = styled.p`
font-size: 30px;
`

const SubmitButton = styled.button`
border-radius: 12px;
background-color: black;
color: white;
width: 150px;
height: 50px;
`

This allowed me to create components inside my file to customize my form. As you can see above I created components and then used those instead on my regular javascript elements. You can also create a separate file for your component and import it into your code. This would be really handy to use if you wanted a specific element to be styled the same throughout your code.

Using CSS Prop

Another way to use Emotionjs is by using css as a prop.

import React from 'react'
import { jsx } from '@emotion/react'

render(
  <div
    css={{
      backgroundColor: 'forestgreen',
        color: 'white'

    }}
  >
    This has a green background.
  </div>
)

By using the css prop, I was able to edit the line of text inside the div. This allows you to directly edit the styles inside your code lines.

There is much more you can do with Emotionjs, but I will not be covering it with the post. Feel free to check out the docs here Emotionjs.

Arrays?

Zoe Mendez — Sun, 07 Aug 2022 18:11:00 +0000

In the beginning of your journey learning Javascript, arrays can be quite confusing. There are SO MANY different methods that can be used on them. I know I had trouble when I first started learning. So, let's start in the beginning.

What is an array?

An array is a data structure that holds, well data. It can be strings or other data structures.

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'
]

This is an example of a simple array. This is an array of strings.

const myFruit = [
'apples',['oranges',['bananas'], 'pineapple'],'strawberries'
]

While this one still uses strings you can see that there are arrays embedded in myFruit.

const favoriteFruits = [
{name: 'Joe',
favoriteFruit: 'apples'},
{name: 'Susan',
favoriteFruit: 'bananas'},
{name: 'Steve',
favoriteFruit: 'pineapple'},
{name: 'Betty',
favoriteFruit: 'kiwi'}
]

Here we have an array with nested objects. In my time of learning javascript, this has been the most common form of an array that I have seen.

This sums up what an array is. It can be simple like a few strings or it can have a nested data structure. Next I will talk about different ways to modify the arrays.

Destructive vs. Nondestructive

Before we get into modifying arrays, we need to talk about destructive vs. nondestructive.

Destructive

Destructive refers to idea that you are modifying the original array. There are a few methods that I talk about that are going to be referred to as a destructive method.

Nondestructive

Well, if you assume that nondestructive is the opposite of destructive, then you're CORRECT!! When you use a nondestructive method then you are creating a new array from the original. It's like you have a bag of m&m's and run them threw a machine to pick out the blue and yellow ones to make a new bag. These are the usual preferred methods to use on arrays.

Array Methods

Welcome to the world of modifying arrays! Let's start with the destructive methods.

Destructive

Here's a list of the destructive methods:

.push()
.unshift()
.pop()
.shift()
.splice()

.push() and .unshift() both add elements to the original array, while .pop() and .shift() both remove elements from the original array.

.push()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.push('pineapple');
myFruit // =>['apples', 'oranges', 'bananas', 'strawberries', 'pineapple']

Here you can see that we used .push() to 'push' pineapple into the original array. .push() will add the passed in element to the end of the array. Which keeps it the same array, but adds a new element into the original.

.unshift()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.unshift('kiwi');
myFruit // =>['kiwi','apples', 'oranges', 'bananas', 'strawberries']

Going back to my original array myFruit, you can see I used .unshift() to add in kiwi. .unshift() will add the new element to the beginning of the original array. Which destructively changes the original array.

.pop()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.pop();
myFruit //=> ['apples', 'oranges', 'bananas']

Back to my original array, .pop() removes the last element of the array. So you can see we no longer have strawberries in the original array. Notice that I don't pass in argument. This is because you can't select what element you are trying to remove. .pop() only removes the last element of the array.

.shift()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.shift();
myFruit //=> ['oranges', 'bananas', 'strawberries']

Once again you can see that there is no argument that is being passed through .shift(), but it did remove apples. .shift() removes the first element of your original array.

.splice()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.splice(2, 1, 'pineapple');
myFruit; // => ['apples', 'oranges', 'pineapple', 'strawberries']

.splice() has a few different ways you can use it. In the example above I used the .splice() operator to remove bananas from my string and insert pineapple in its place. Well, how does it know thats what I wanted? Let's break down the arguments I passed through. The first argument is 2, so that means that the operator starts at that point. That selected bananas. Next, we have 1 which means that it's going to remove one element. Think of it as you've highlighted the starting point and now you're going to delete it and replace it with something new. Next is pineapple, which is the new element thats added into the place of the element you removed. .splice() allows you to more specifically alter the original array. You can choose to add a new element anywhere in the array. You don't have to delete any elements in order to pass in a new element. What does that look like? Let's take the prior example and see.

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.splice(2, 0, 'pineapple');
myFruit; // => ['apples', 'oranges', 'pineapple', 'bananas', 'strawberries']

You can see by passing in a 0 at the second argument, it doesn't remove any of the element it just simply adds the third argument into the array. So now you've seen how you can use .splice() more than 1 way.

Nondestructive

Here is a list of nondestructive methods:

.slice()
Spread Operator

.slice()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.slice(0,2);
// => ['apples', 'oranges', 'bananas']
myFruit;
//=> ['apples', 'oranges', 'bananas', 'strawberries']

.slice() is a great way to select a certain part of your original array and make it into a new array. Above you can see that the first argument that I passed in was the starting point for the new array. The second argument is the last element I wanted to be grabbed from the original array, so the new array was made up of ['apples', 'oranges', 'bananas'].

Spread Operator

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
const copyMyFruit = ['pineapple', ...myFruit];
copyMyFruit;
// => ['pineapple', 'apples', 'oranges', 'bananas', 'strawberries']

The spread operator allows you to create a new array and add a new element to that array. Above you can see that I added pineapple to a copy of the original array because pineapple was in front of the array it added it to the beginning, but you can also add the element to end by switching the two. You can also add multiple elements when using the spread operator.

Array Iterators

What are array iterators?

Here is a list of the more common used array iterators:

.forEach()
.map()
.filter()
.find()
.reduce()
.some()
.every()

Array iterators are different operators that are used on arrays. They each have their own purpose. Some create new arrays, some just help reach different parts of arrays. These are all nondestructive methods to use on arrays.

.forEach()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.forEach(function(myFruit){
console.log(`Can I have some ${myFruit}, please?`)}
//Can I have some apples, please?
//Can I have some oranges, please?
//Can I have some bananas, please?
//Can I have some strawberries, please?

.forEach() loops through the array and will plug in each element to what it's being passed through. Above you can see that I console.log() a string and interpolated the array into it, which gave us the strings that used only one element from the original array.

.map()

const myNumbers =[ 45, 15, 12, 11];
myNumbers.map(function(num){
return num * 5 });
// [225, 75, 60, 55]

.map() returns a new array after the original array is run through the callback function. Above you can see that the function is multiplying each element of the array by five and returning the new array.

.filter()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries'];
myFruit.filter(function (fruit){
    return fruit[3] === 'a'});
//['bananas', 'strawberries']

.filter() returns a new array that past the test of the function that the original array is being run through. The example above shows the test of checking for what fruits third character is a. You can see that only 'bananas', 'strawberries' past the test and are generator into a new array.

.find()

const myNumbers =[ 45, 15, 12, 11];
myNumbers.find(function (num) {
    return num < 13 });
// 12

.find() allows you to pass the array into a function that has a set parameter for what element you are looking for. Above you can see that the parameter I gave was looking for an element that was less than 13. It ran each element through and returned the first element that met that parameter.

.reduce()

const myNumbers =[ 45, 15, 12, 11];
myNumbers.reduce((previousValue, currentValue) => previousValue + currentValue, 10)
//93

.reduce() reduces the array down to one sum. Above I passed in the previous value and starting at 0 there is no number prior, so I set 10 as the base number. Which then the function continues to add each element to the overall total giving us the output of 93.

.some()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries']
myFruit.some(fruit => fruit.length > 4);
//true

.some() returns true or false based off the individual elements in the array. You can see above that we are testing in the elements length is greater than four. Because apples length is greater than 4 it returns true.

.every()

const myFruit = [
'apples', 'oranges', 'bananas', 'strawberries']
myFruit.every(fruit => fruit.length > 6);
//false

.every() returns true or false if the whole array passes the test thats its being passed through. Above you can see that we passed the array in checking if each elements length was longer than six characters. Because apples does not past the test it returns a negative.

This is a brief overview of array methods. If you interested in reading more check out the docs here Array MDN.