DEV Community: Lupita Rivera

Git/GitHub Commands

Lupita Rivera — Tue, 20 Dec 2022 22:18:38 +0000

Git is a version control system that allows developers to track and manage changes to their codebase. GitHub is a platform that provides hosting for Git repositories, as well as tools for collaboration and version control. In this blog post, we'll explore some common Git/GitHub commands that you may find useful when working with Git and GitHub.

git init: This command initializes a new Git repository in the current directory.

git clone: This command creates a local copy of a remote repository. For example, git clone https://github.com/user/repo.git will create a local copy of the repository located at https://github.com/user/repo.git.

git add: This command adds a file to the staging area. For example, git add file.txt will add file.txt to the staging area.

git commit: This command saves changes to the local repository. For example, git commit -m "Added new feature" will commit all staged changes with the message "Added new feature".

git push: This command pushes local commits to a remote repository. For example, git push origin master will push all local commits to the master branch of the origin remote.

git pull: This command fetches and merges changes from a remote repository. For example, git pull origin master will fetch and merge changes from the master branch of the origin remote.

git branch: This command allows you to create, list, or delete branches. For example, git branch new-feature will create a new branch called new-feature, git branch will list all branches, and git branch -d new-feature will delete the new-feature branch.

git merge: This command merges one branch into another. For example, git merge new-feature will merge the new-feature branch into the current branch.

These are just a few of the many Git/GitHub commands that are available. With these commands, you should be able to get started working with Git and GitHub to track and manage changes to your codebase. :)

What is ARIA & why is Important t use?

Lupita Rivera — Tue, 20 Dec 2022 22:11:22 +0000

ARIA, or the Accessible Rich Internet Applications suite, is a set of standards developed by the World Wide Web Consortium (W3C) to help make the web more accessible to people with disabilities. These standards provide a set of attributes that can be added to HTML elements to provide additional information about the element's role, state, and behavior to assistive technologies such as screen readers.

Using ARIA is important for several reasons:

Improved accessibility: ARIA attributes help to provide additional context and information about elements on the page to assistive technologies, which can improve the accessibility of the page for users with disabilities.
Better user experience: By providing additional information about the purpose and behavior of elements on the page, ARIA can help to improve the overall user experience for all users, not just those with disabilities.
Legal compliance: In many countries, there are laws and regulations that require websites to be accessible to people with disabilities. Using ARIA can help to ensure that a website is compliant with these requirements.
SEO benefits: Google has stated that it takes accessibility into account when ranking websites in search results. Using ARIA can help to improve a website's SEO by making it more accessible to search engines and users alike.

Using ARIA is not a replacement for good semantic HTML, but rather an additional tool that can be used to enhance the accessibility of a website. It is important to carefully consider the use of ARIA attributes and to ensure that they are used appropriately and in conjunction with good semantic HTML.

In summary, ARIA is an important tool for improving the accessibility and usability of websites for people with disabilities, and its use can also bring benefits for all users and for SEO.

Initializing a Git Repository

Lupita Rivera — Tue, 20 Dec 2022 21:57:08 +0000

Git is a version control system that allows developers to track changes to files and collaborate with others on software projects. In this post, we'll go over some common Git commands and how to use them.

Initializing a Git Repository
Before you can use Git to track changes to your project, you'll need to initialize a new repository. To do this, use the git init command in the terminal while inside the root directory of your project:

$ git init

This will create a new .git directory in your project, which will be used to store information about your repository.

Cloning a Git Repository
If you want to work on an existing Git repository, you can clone it to your local machine using the git clone command. This will create a local copy of the repository, including all of its history and branches.

To clone a repository, you'll need to have the URL of the repository. You can find this by navigating to the repository on a hosting service like GitHub and copying the URL from the address bar.

To clone the repository, use the git clone command followed by the repository URL:

$ git clone https://github.com/user/repo.git

This will create a new directory with the same name as the repository, and clone the repository into it.

Adding and Committing Changes
Once you have a Git repository set up, you can start making changes to your project and tracking those changes with Git.

To add a file to the staging area, use the git add command followed by the file name:

$ git add index.html

This will add the index.html file to the staging area, which is a holding place for changes that you want to commit. You can also use the git add . command to add all modified files in the current directory and its subdirectories to the staging area.

Once you've added the changes you want to commit to the staging area, use the git commit command to commit the changes. You'll need to include a commit message to describe the changes you're making:

$ git commit -m "Updated the homepage layout"

This will create a new commit in your repository with the changes you added to the staging area.

Viewing Differences
To view the differences between two versions of a file, you can use the git diff command. This command shows you the changes that have been made to a file since the last commit.

For example, to see the differences between the current version of a file and the version in the last commit, use the git diff command followed by the file name:

$ git diff index.html

You can also use the git diff HEAD command to see the differences between the current version of a file and the version in the last commit for all modified files in the repository.

Working with Branches
Git allows you to create branches, which are separate copies of your repository that you can work on independently. This is useful when you want to make changes to your project without affecting the main development branch.

To view the branches in your repository, use the git branch command:

$ git branch

This will list all of the branches in your repository.

What is Web Accessibility?

Lupita Rivera — Mon, 24 Jan 2022 17:05:34 +0000

According to Google 15% of the world's population, experience some form of disability. People with disabilities, on average as a group, are more likely to experience adverse socioeconomic outcomes than People without disabilities.

61 million adults in the United States live with a disability. 26 percent (one in 4) of adults in the United States have some type of disability.

Accessibility?

Accessibility, also known as the ability to access, means that devices, services, and products are accessible to people with disabilities. Some people have to use assistive technologies which make these things accessible for them.

However, people with disabilities can’t access web content if it is not meeting the accessibility principles. These users are missing the possibilities that come with technology. All users should have access to them.

if you're designing websites you have to know what accessibility for websites means. over the last year lawsuits over websites which are not accessible has been on the rise. so actually legally if you're a designer you need to know Web Accessibility.

What is the WCAG?

WCAG stands for the Web Content Accessibility Guidelines. The Web Content Accessibility Guidelines (WCAG 2.1 guidelines) are arguably the most influential protocols shaping web accessibility policy.

there's a spectrum of permanent, temporary, and situational mismatches that people experience based on their abilities and disabilities.

To really understand why the WCAG matters so much, you need to know who is behind them. The WCAG was created by the World Wide Web ConsortiumNew Window, known as the W3C.

W3C originally focused on standardizing web protocols so that websites and web tools would be compatible with each other. Every W3C standard is reviewed several times, tested, and analyzed before it’s approved by members. Usually, W3C standards have 3 levels of compliance, from A to AAA.

What is Section 508?

Strictly speaking, Section 508 is a set of rules for government entities, although it includes any organizationsNew Window that receive federal funding.

That means that government-supported institutions like museums or universities, medical centers that accept Medicaid or Medicare, and programs run by organizations that are partially federally funded all have to abide by Section 508.

Section 508’s accessibility rules also affect contractors or third-party workers that provide services for government bodies or organizations that receive federal funds. That means that any digital platform or website that’s in any way connected with a body that receives federal funds and is used by the public, has to comply with Section 508.

Small businesses should keep this in mind if they want to go after government grants or contract work with federal agencies.

Configuring Git/GitHub

Lupita Rivera — Tue, 18 Jan 2022 17:13:41 +0000

This will be a blog in two parts the first one Configuring Git/GitHub and the second Understanding more about Git/GitHub Commands which will be released soon. Lets gets get started!

but first you might ask what is the difference between local repository and remote repository?

The local repository is on your machine (git) and the remote repository is on the cloud (github). okay now lets get started.

Install git

Git generally comes pre-installed with most operating systems, but you can check by running git version in the terminal. If this gives you an error or does not come back with a version number, you'll need to install Git. You can install it using Homebrew.

1) Open the "Terminal"
2) Type brew install git and press <Enter>
3) Close the "Terminal"
4) Reopen the "Terminal"
5) Type git --version and press <Enter>

If you see a message starting with "git version...", continue below.

Create a GitHub Account

To work on and get credit for for your work, you will need to sign up for a GitHub account if you don’t already have one.
Github signup webpage

Configure Git and GitHub

Git is the tool that we’ll use to download and upload the work that we do. To use Git without signing in every time, you can create a Secure Shell (SSH) key and associate that to your GitHub account. This step will ask you to do work both in your browser and your terminal.

Open the "Terminal"
Type git config --global color.ui true and press <Enter>
Type git config --global user.name + <Space> + your name and press <Enter> (Note: this should be your full name, not your GitHub username, in quotes.)
Type git config --global user.email + <Space> + the email address you used to sign up to GitHub and press <Enter>
Type ssh-keygen and press <Enter>
For each prompt do not type anything, just continue to press <Enter>
Type cat ~/.ssh/id_rsa.pub | pbcopy and press <Enter>. This will copy your SSH key to your clipboard
Open the GitHub New SSH key form(Note: you need to be logged in to GitHub to access that link.)
Type "My personal Mac" in the "Title" input field
Paste what’s on your clipboard from step seven in the "Key" input field
Click "Add SSH Key"

Hopefully this post will help some of you get started with Git/Github.

Props in react

Lupita Rivera — Thu, 14 Oct 2021 02:01:18 +0000

This short blog post will attempt to clearly summarize the concept of props in a way that the newest of programming students can understand.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”).
props(stands for properties)and return React elements describing what should appear on the screen.

Props can be strings, objects, arrays or functions

following the React Docs Props are Read-Only, immutable and the Component cannot change its own props.
They are also able to be passed between your components, generally from parent to child.

on the other hand you can pass props from CHILD component back up to the PARENT component. how you might ask ?

We have 2 components:
Parent: App.js
Child: Child.js

Use the following steps:
-Create a function inside your parent component, pass it a parameter and log that parameter using console.log .

-Pass the function name as props into your child component render.

-Invoke the function from props inside your child component.

-Pass in your data as an argument inside the invocation.

Parent Component

Child Component

Thanks for reading — I hope this provided some good value

what are arrow functions

Lupita Rivera — Thu, 14 Oct 2021 00:13:35 +0000

before we jump into what is an arrow function lets talk about functions in JavaScript. before ES6 every time we wrote a function we use the word Function Keyword,

ex,
const divide = function (x,y){ return x/y; }

we could had an Anonymous function
or a name function

ex,
function divide(){ }

but we still using the function keyword. and that could get kinda lengthy in our code specially when we are using more complex code and always passing in the function keyword.

so this is where arrow functions come in.

Arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular function expression.

but theres also on some situations they do behave differently. we will talk about that as we go but for now what this really means is that makes the function shorter in a way of writing a function.

SYNTAX

ex, from the divide function from above lets write in as an arrow function

const divide = (x,y) => { return x/y; }

Implicit Return

we can also write as an implicit return that means i wont need the return keyword and we get rid of the curly braces and replace it with parenthesis

ex,
cont divide = (x,y) => (x / y) whatever expression is inside of the parenthesis will be automatically returned, it's an explicit return.

but we can also write it even shorter cont divide = (x,y) => x / y by taking out the parenthesis. you can only do this if you have a single expression, you cannot pass a if else statement

but this is not the only difference between arrow functions and regular functions. if we go to the MDN

other differences:

Use of this keyword

unlike Regular functions, arrow function does not have their own "this" keyword. like a regular function expression does.
the keyword this is going to change is going to be set in a given function depending on how the function is called.

but with an arrow function the keyword this is not going to change relative to the context or the parent that the function is define in.

ex,

const person ={ name: "Lupita", sayHi: function () { console.log(this.name, "says hi!") } }
person.sayHi()

okay when i call person.sayHi the value of this is going to be determined by how I'm calling it, I'm calling it sayHi() on person the object person will be the value of this - this.name should be Lupita. so when i run the code i get

Lupita says hi!

However if i use an arrow function instead

we just get says hi! so whats going on here is that the value of this is not being changed , not being set when im calling person.sayHi() like a normal function would. if we look at just this.

const person ={ name: "Lupita", sayHi:()=> { console.log(this) console.log(this.name, "says hi!") } }

we see here this is just set to the window objet, just as if this function where defined on its own no inside of the person object. and it doesn't matter how i call that function
if its an arrow function the value of this is not going to be set to that person object unless i where to bind it. but it's own an arrow function does not get a new or diff value for this.

Using a new keyword

Regular functions created using function declarations or expressions are constructible and callable. Regular functions are constructible; they can be called using the new keyword.

However, the arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions.

ex,

regular function

as you can see it returns 5,

Arrow function

So this is basically Arrow functions. If you want further reference, MDN
is a good place to check.

Thank you for reading :)

connect React with Redux

Lupita Rivera — Sat, 09 Oct 2021 23:31:09 +0000

How to connect React with Redux - if you a newbie like me you might feel like i don't even know where to start. well my friend i got you covered.

React + Redux are widely used and popular technologies for developing the the front-end of the web project. we are also will be talking about Thunk middleware and what it does for us.
but first let's check out and see what Redux is.

Redux is a tiny state management library.
It’s meant to make your state management more predictable, and centralize your React state data, and state logic.

Redux solves these problems

1: Single source of truth

Your entire app state data is in one object tree.

This tree may also be known as a store.

By maintaining a single store it allows you to be debug or inspect your application much easier.

2: State is read-only

Your store data gets passed down as React props. Which React doesn’t allow you to modify the props object directly.

Redux only allows you to update your store data through a functions called dispatch which you must defined the action to trigger.

These actions, describe what will be changing or happening to the store.

3: Changes are made

known as reducers, which are attached to an action.

The job of a reducer is to get the current state and an action and return the next state.

So when you make a call to an action such as, FETCH_CATEGORIES.

Redux will take that action request, check if it exists and if it has a reducer attached to it.

It will then execute that reducer function to update the store data.

What is a thunk? What is thunk middleware? Why use it with Redux?

-Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises. ... Redux Thunk allows us to dispatch those actions asynchronously and resolve each promise that gets returned.

OKAY! Let's get Started

first lets start by installing these libraries

npm install Redux
npm install redux-thunk
npm install react-redux

lets use my code as an example, in my public directory that holds the initial index.html file. Also have a src directory that holds a few important files for this application to work.

index.js – It’s responsible for making Redux available in the React application

in the code above lets break it down and see what each import does for us.

createStore this creates a store that holds our state

Provider provides the store to the App and pass in the constant variable store.

rootReducer is one of the arguments in the create store - function that returns a new version of the state

compose is used to add both enhancers to create store. 1) apllyMiddleware(thunk) 2)windows devTools.

App.js

i created a route <Route exact path="/categories" component={Categories}/> by using: React-Router

and if i go to my categories component here where awesomeness happens.

Categories.js

as you can see I'm using class Component but you can use it as a functional component but i haven't learn Hooks so wont be able to tell you how to use it with functional component, my apologies there but on my next blog i should be able to have a good hold of the functional components using Hooks.

okay let's break this down, at the very top of the file you see several imports let's just focus on the last two.

connect the connect function let’s a React component latch itself onto the Redux store.

The connect function does not modify the component, but it pass any state data from the Redux store, and it provides a function called dispatch.

Redux connect accepts 2 parameters

In the example above I’m passing in only the first parameter which Redux calls, mapStateToProps.

mapStateToProps:

is a function that allows you to pass the Redux store data you want.

mapDispatchProps:

the second argument, allows you to create custom dispatch functions and pass them to the React component.
which in our case is {fetchCategory} thus will fetch our categories.

in a new Directory under src make a new directory name actions and there create a file i named it category.js

I want to trigger the GET_CATEGORY Redux action by using dispatch, and supply the categories value in a property called payload.

payload is a common practice when passing data through dispatch.

Creating Redux store file

export const initialState ={ category:[] }
const categoriesReducer = (state = initialState, action ) =>{ switch(action.type) { case "GET_CATEGORY": return { ...state, category: [...action.payload] }

I’m creating a function called categoriesReducer, that glues together the initial state, and the actions.
int the switch statement we have a case for 'GET_CATEGORY' which is the same as the one we have in our actions file. which we taking in all of the categories being fetched. and now we are displaying those categories. that you see in the Categories component.

Thats so fetch!

Lupita Rivera — Mon, 02 Aug 2021 03:17:44 +0000

Yes, the first thing that came to my mind as i heard the word fetch in JavaScrip. i was like "what does Mean girls, have to todo with coding!"
but its actually a word that has a different meaning of what the movie implies, let check this fetch out and what it does in JavaScript.

fetch() in its simplest definition, is a function in JavaScript for interacting with the database, especially with APIs (Application Programming Interface).

there are four types of requests that Fetch provides us with:

1)GET requests — used for retrieving or “fetching” data.

2)POST requests — used for uploading or adding data.

3)PATCH / PUT requests — used for editing data that is already in the database.

4)DELETE requests — used for deleting a piece of data.

In this blog we are going to go over two of this fetches a GET and POST using my JS project.
lets start with the first fetch.

this is how a basic fetch function looks like.

if we enter the above code in the console will return a promise, every successful Fetch request will always return a promise and along with this promise comes a response using the .then method we then took the response and converted it to JSON or JavaScript Object Notation is the format for how we transmit data through web applications. see code below

As you see, the data was fetched and we now have the data we wanted. from there we can choose what todo with it. what I did is iterate over and chose the first Shop and this first shop has Items. as you can see to fetch our database we did the same thing to fetch the items which in this case are Sushi rolls.

but what about if we want to now create items and add to out backend ? well first we need to create our form then grab the values of this form to send to the backend.

quick thought, On the form don't forget to call the event.preventDefault()method to prevent the default submit behaviour of the browser.

Okey lets move on, Before sending the HTTP POST request, by using the Fetch API we need to prepare the new object based on what has been entered in the form.
The values which have been entered in the input elements are stored in the variables titleInput and imageInput and are used to create a new object.
The HTTP POST request is sent by calling the fetch function. Two parameters are passed into this function call:
1) the URL as string
2) a configuration object

second argument. In this object, we have three key-value pairs. The first is the request we’re making to the database or backend. In this case, it’s a POST request. The next pair value, the headers contains information about the data being sent. Content-type states what format the data will be sent in. Accept simply means what format we’ll accept the data in. The last key-value pair represents the information about the attributes needed to create an item in stringified form. Then it gets the response, converts it into Javascript, and console logs the data.

In Summary all of this information can be confusing at first. I certainly had difficulty wrapping my head around it at first but a little of practice you will be able to understand it. Thank you! Happy coding!

resources: MDN Using fetch

Omniauth with google_ oauth2 on rails

Lupita Rivera — Tue, 04 May 2021 23:00:16 +0000

what if you could set up your account with a third party logging? when I first heard this I was so excited to get started and use this gem. Omiauth gem is awesome!. but when I actually started implementing it on my project was completely lost and gave me a bunch of errors.

one of the errors was URI's not matching and the other one was missing current_id. follow me step by step to get this done the right way and smoothly continue with your project.

so the First step to implementing google authentication is to get a developer account on their website. 'https://console.developers.google.com'
Once the account is created you will be on your home page, then select credentials.

then you should click on the Create Project button on the top right side of the screen, which will take you to another page to give your project a name, and organization if you don't have an Organization you can skip that fill, and select create.

when create selected will send you to the dashboard and will pop up a notification from there you can select your project. if you see this warning below go ahead and select Configure consent screen, this needs to be done before you create the credentials.

will ask you to choose one of the two options for our app we will select the external and select create.
then after filling up the requirements which are App name and User support email and scroll all the way at the bottom and under Developer Contact information add your email and save and continue. in the next two screens just select save and continue.

now you should be able to select credentials on the left side of the screen and then click on the create credentials button at the top of the page. Select the OAuth client ID option for your authentication needs.
once you see the below photo will give you different options for your application type, ill be working with a web application so this one will be the one ill be choosing.

the Authorized redirect URIs is very important here you need to give your client proper callback urls, which will get access to google's authentication information. Once your app does the typical google authentication requests, your application will need to get back some information, and these urls are the ones that are authorized to receive. once you added the Uri and save it will give you the client ID and Client Secret ID these is what you will need to add to your code. so let's jump into the editor.

Add gem 'omniauth-google-oauth2'
gem 'dotenv-rails'
gem "omniauth-rails_csrf_protection" to your Gemfile then run bundle install.
Now that you have your gems, let's first start with our environment. In Rails, to set up your environment, you'll need to use your initializers and create an Omniauth.rb file. inside this file you will add the middleware code below

The ENV is referencing the client ID and secret from the client page where you included certain URI's. You'll have to include these in the .env at the root of the folder and then assigned their keys to their respective values. Make sure to include your keys in the gitignore file to hide them from public view.

You can now access the OmniAuth Google OAuth2 URL: /auth/google_oauth2 which we will add in the /congif/routes.erb

and also dont forget to add your button to your /views/sessions/new

On your routes, notice the callback is routed to a sessions controller, where we'll handle the creation of a session. Notice the below photo, here we will need to process the response we received from Google and either create a new user or log in an existing user. There are many approaches to this, so please keep in mind I am simply showing you my approach.

When you are implementing this for your own project, I’d highly encourage you to pause your code inside the omniauth method with either binding.pry or byebug and add in the terminal request.env['omniauth.auth'] look at the response to see how to grab the info you need for your User model.

also, make sure you add the uid and provider to your users table.

ex: rails g migration addUidAndProviderToUsers uid provider

Then you will want to run rails db:migrate to update the users table.

Up to this point, I had followed the documentation and various tutorials. You should now be able to run your rails server and log in with Google. Please let me know if you have any comments, questions, or suggestions.

Resources:
https://github.com/zquestz/omniauth-google-oauth2
https://github.com/bkeepers/dotenv
https://github.com/cookpad/omniauth-rails_csrf_protection

Let's talk RESTful Routes

Lupita Rivera — Sat, 27 Mar 2021 18:34:49 +0000

While starting on my Sinatra project I was literally lost on my routes felt like I was inside a maze wandering around without finding an end. here where I realized I need to go back to my reading and review what I had learned in the lessons. join me and let's figure it out together the way out of this maze.

Let's start with what is REST? (Representation State Transfer) is an architectural style for defining our routes. It is a way of mapping HTTP routes and the CRUD functionalities. then what are Routes? are the code that is responsible for listening and receiving requests and then deciding what to send back. and for last what is CRUD? when building an application, we want to provide the four basic types of functionality. There must be a way to Create, Read, Update, and Delete resources.

for example, The internet would be a really confusing place without a convention for how to handle URLS - to delete an Instagram photo might be www.instagram.com/delete-this-photo, but Twitter might be www.twitter.com/remove-this-tweet. Without a specific convention to follow, it would be hard to create new content, edit content, and delete it. this is where RESTful conventions come in, to provides a pattern where users and developers can consistently manipulate data and be on the same page.

The 7 RESTful routes. let's use my code routes as an example,

I also noticed that browsers behave a little strangely as it relates to PUT, PATCH and DELETE requests, in that they don't know how to send those requests.so in order to get them to send we need to hide the request inside a Form, that delete and edit need to be submitted via POST requests. see an example below.

the form must include a hidden input field that will submit our form via delete. The second line above is what does this for us.

These 7 routes will get any web app started. You’ve got all the basics to use CRUD actions and the RESTful routes to create, read, and manipulate data.

By following this pattern, you don’t have to reinvent the wheel every time you build a new CRUD app. The routes and method names have already been decided is like following line exits inside the maze that someone already left behind for us to follow that way we can easily go in and out without getting lost.

thank you for joining me and together we were able to find the exit to start coding!

Understanding Iterations & Enumerators

Lupita Rivera — Sun, 28 Feb 2021 06:15:11 +0000

Staring my first CLI project I notice I was falling behind on iterations which made things hard to even get my code started. follow and join me on my journey of going back to review the lessons of iteration and Enumerators in ruby.

Starting with the word iteration itself - means that is a way to operate on a collection object, like an array, and do something with each element in that collection. I notice there are different types of iterations and Enumerators for example; EACH, COLLECT/MAP, FIND/DETECT FIND_ALL/SELECT, let's go over these iterations, and Enumerators find out how they operate.

Starting with Each, this iterator is just another method of an object. the main feature is that iterates on each element of the collection always returning the original collection. you can use it also on an array, hashes, and range. see below example,

[ 1, 2, 3 ].each { |n| puts n }
1
2
3
=> [1, 2, 3]

The next iteration that will be looking at is Collect/Map these two iterations are aliases that can be used interchangeably. It passes each collection item to the block and returns a new collection containing the values returned by the block. see below example,

a = [ "lydia", "Anthony", "mike" ]

a.map { |x| x.upcase }

=> ["LYDIA", "ANTHONY", "MIKE"]

Now let's take a look at the next ones, select/find_all these methods will not do calculations on collection, but it will allow us to select specific elements from the base collection based on logical conditions. If an element of the collection will fulfill the condition, then it will stay in the collection. If no, element will be removed from the collection. see below example

       array = [1,2,3,4,5,6]

array.select {|num| num.even?} => [2,4,6]
array.find_all {|num| num.even?} => [2,4,6]

This Enumerator is very useful when you want to choose only a specific group of elements. You are not interested in all collection, but with a small part of it. but only when it comes to arrays, we can use .select and .find_all interchangeably.

but When it comes to iterating over hashes, this is when we see the difference between .select and .find_all.

   hash= {a:1,b:2,c:3,d:4,e:5,f:6}

hash.select {|key,value| value.even?}
=> {:b=>2, :d=>4, :f=>6}

hash.find_all {|key,value| value.even?}
=>[[:b, 2],[:d, 4],[:f, 6]]

Notice in the above example how .select returns the value in the original input in this case a hash. but .find_all return the key: value pairing in an array. so .find_all output is always an array.

So far we already know how iterations and Enumerator work! having this understanding help me figure out how I was going to manipulate my data that I scraped on an API. and gave my project a solid ground to rise up. Thank you for following throughout on this journey now we have an understanding of iterations and Enumerators.