Forem: Oscar Ortiz

Why ReactJS? Exploring the Benefits of Learning This Framework

Oscar Ortiz — Fri, 27 Oct 2023 17:55:41 +0000

Introduction
High Demand for jobs
Efficient and Fast Development
Strong ecosystem and community
A final look

Intro

Modern technology has revolutionized the way we build and interact with web browsers. Thanks to frameworks, open-source code, and the brilliant minds behind them, developers have access to powerful tools. Whether you’re a self-taught beginner or a seasoned web developer, considering ReactJS for your skill set is wise. This article will explore ReactJS’s achievements and objectives, helping you determine if it aligns with your goals. We aim to provide a comprehensive overview of ReactJS and its significance in web applications, from why there is a very high demand for jobs to exploring the efficiency of fast development and, lastly, how supportive the community and ecosystem genuinely are.

This article is not to convince or praise reactjs; this is to give you an idea of what type of tasks can be done and if it's something that you should consider having in your skill set.

High demand for jobs

New ideas and projects constantly emerge in our fast-paced, information-driven world, necessitating a web platform to distribute content to their intended audience, meaning there is most likely always a new job to work on or contribute to. In web applications, the client-side component is pivotal as it surrounds the user interface. At this point, users interact with the application and access the information they seek. ReactJS is known for its ability to display tons of data, and as a User-Interface framework, it has revolutionized the speed at which developers can craft dynamic web applications.

Find more statistics at Statista

Here is a data chart showing the most used programming languages at current time, where JavaScript is leading as the Number one used programming language

Now, what type of jobs, you may ask? Well, there are web applications like Facebook, which I'm sure we're all pretty familiar with in today's modern-day, so social media platforms are popular since they tend to handle lots of data to be displayed typically in real-time. E-commerce sites are another popular project to work on with React, single-page applications for small business owners or even non-profit organizations to help their clients find basic information about their organization. There is no end to ideas.

Efficient and Fast Development

Using ReactJS has significantly accelerated project development. Over the past decade, ReactJS, created by Facebook (now known as META), has been meticulously designed and refined. It employs an intelligent approach known as the virtual DOM, where only the necessary parts of a web page are updated when a user requests a change. This process is technical and worthy of in-depth exploration in a future article related to the Document Object Model (DOM).

This technique enables web applications to swiftly implement changes without causing a jarring page refresh, providing a seamless and fast user experience. ReactJS also excels in scalability. As applications become complex, maintaining performance and reducing unnecessary rendering becomes crucial. ReactJS equips developers with optimization techniques to fine-tune when components should be updated. Moreover, its component-based architecture fosters reusability. For example, consider Facebook's architecture, which heavily relies on reusable components to efficiently display vast amounts of content, like news feeds, to users without requiring full page reloads. This strategic use of features contributes to ReactJS's efficiency and speed in web development.

Strong ecosystem and community

React.js has a great support network, including folks from META (formerly Facebook). Think of it like a toolbox. Developers facing similar challenges have made something called Node Package Modules (NPM), which are like pre-made tools you can find on the internet. You can quickly grab these tools and use them in your projects. React.js is one of these tools, but it’s a bit more advanced and explicitly designed for React projects, unlike straightforward tools.

Resource Links

Community Resources:

Stack Overflow: A great place to ask questions and find answers related to React.
Reactiflux Discord: A Discord community of React developers.
Dev.to React Community: Dev.to has a vibrant React community with articles, tutorials, and discussions.

Books:

"Learning React" by Alex Banks and Eve Porcello
"Pro React 16" by Adam Freeman
"React Up and Running" by Stoyan Stefanov

Styling in React:

Styled Components: A popular library for styling React components with tagged template literals.
CSS Modules: A solution for locally scoped CSS by default.

Blogs and Newsletters:

React Blog: The official React blog for updates and news.
React Status: A newsletter featuring React news and articles.

A final look

Are you ready to embark on a thrilling job hunt in React.js? Discover just how red-hot the demand for React.js skills is in your vicinity, ensuring your career path aligns with your geographical preferences, whether it's local opportunities or the exciting world of remote work.

Feel free to give a follow

Action Verbs for a Technical Resume

Oscar Ortiz — Mon, 18 Sep 2023 16:51:44 +0000

Intro

Using technical action verbs in your resume is crucial when applying for jobs in today's competitive job market. These powerful verbs not only make your accomplishments stand out but also convey a sense of expertise and confidence to potential employers. By employing specific, action-oriented language, you can effectively demonstrate your skills and accomplishments, allowing recruiters to quickly grasp the value you can bring to their organization, we'll explore the importance of these verbs in crafting a compelling resume that captures the attention of hiring managers and increases your chances of landing your dream job.

List of Action Verbs

• Accelerated
• Cleansed
• Evaluated
• Mechanized
• Qualified
• Rotated
• Adapted
• Cleared
• Expunged
• Merged
• Ranked
• Routed
• Adopted
• Coded
• Extended
• Migrated
• Realigned
• Safeguarded
• Aggregated
• Computed
• Extracted
• Mined
• Rebooted
• Scanned
• Analyzed
• Configured
• Extrapolated
• Mirrored
• Rebuilt
• Scoped
• Applied
• Consolidated
• Finalized
• Mobilized
• Reconciled
• Scrubbed
• Assembled
• Constructed
• Formatted
• Modeled
• Reconstructed
• Secured
• Authenticated
• Converted
• Functionalized
• Modified
• Recovered
• Selected
• Automated
• Debugged
• Grouped
• Moved
• Rectified
• Sequenced
• Backed-up
• Decoded
• Hosted
• Networked
• Re-engineered
• Solved
• Balanced
• Dedicated
• Identified
• Operated
• Refreshed
• Stabilized
• Blocked
• Delivered
• Implemented
• Optimized
• Reinforced
• Standardized
• Boosted
• Deployed
• Initialized
• Overhauled
• Released
• Systematized
• Branched
• Developed
• Installed
• Packaged
• Remodeled
• Tested
• Bridged
• Discovered
• Integrated
• Patched
• Replicated
• Traced
• Built
• Dispatched
• Isolated
• Penetrated
• Restored
• Transitioned
• Bundled
• Distributed
• Launched
• Pinpointed
• Retooled
• Updated
• Calculated
• Duplicated
• Licensed
• Prevented
• Retrieved
• Upgraded
• Calibrated
• Enabled
• Linked
• Prioritized
• Retrofitted
• Validated
• Certified
• Engineered
• Loaded
• Processed
• Revamped
• Verified
• Changed
• Enhanced
• Maintained
• Programmed
• Revised
• Virtualized
• Checked
• Estimated
• Manufactured
• Protected
• Road mapped
• Web-enabled
• Classified
• Equipped
• Mapped
• Prototyped
• Rolled out
• Created

Conclusion

In conclusion, incorporating action verbs into your resume is a vital strategy for showcasing your qualifications and making a lasting impression on potential employers. These dynamic words breathe life into your accomplishments, emphasizing your active contributions and impact in previous roles. By choosing the right action verbs, you can effectively communicate your skills, achievements, and potential to prospective employers, ultimately increasing your chances of securing the job opportunities you desire. So, remember, when crafting your resume, don't underestimate the power of action verbs—they can be the key to unlocking your professional success.

JavaScript Data Structure Pt 3: Queue

Oscar Ortiz — Sun, 19 Feb 2023 22:31:39 +0000

Introduction
Prerequisites
First-In, First-Out
Queue Operations
Final Queue Structure
Conclusion
Exercises

Introduction

In this tutorial, we will dive into the Queue data structure, and this is part 3 of a follow-up tutorial from our JavaScript Data Structure series. By the end of this tutorial, we will learn how to explain, define, and use a Queue Data Structure in JavaScript. We will assume you have some basic knowledge of JavaScript to follow along.

Prerequisites

Basic JavaScript syntax and concepts
Basic understanding of JavaScript Arrays
Familiar with this keyword
Familiar with Class objects and Functions

First In, First Out

The Queue Data Structure is a linear data structure where elements are inserted at the end of the array and removed at the front of the array, mainly known as First-In, First-Out, or FIFO. It benefits many everyday things that we might not have noticed initially. When we watch videos on YouTube, we tend to see a playlist of videos; after we watch the first video, the following video is already in Queue, ready to play after the end of the first video, and so on—one of many ways to utilize the Queue Data Structure.

Term: Queue Data Structure
Definition: A data structure in which elements are organized in a linear order. Each element is inserted from the rear and removed from the front of the structure.

Synonyms: Arrays, Stack, Linked List, Queue
Acronyms: FIFO

Queue Operations

Now that we know what the Queue Data Structure can be helpful for. Let’s learn how to create it in JavaScript. There are a few operations that our Queue Structure should be able to handle. We will start with our Queue Class Object, where we store our operation functions and construct our array. We will initiate a JavaScript class named Queue

Queue Class

 class Queue {}

Using the class keyword to create a unique function that will allow us to define our functions to work with data

class MDN

Array constructor

The class object comes with built-in methods, the constructor() being one of the most commonly used to create an object instance of that class.

class Queue {
  constructor(){
    this.items = [];
  }
}

Using the constructor function, we create a new instance variable named items and assign it an empty array
this keyword is a reference to our items object within our function

We can now call our Queue class using the new keyword, where it will automatically call the constructor and initiate our items variable, and assign an empty array.

let queue = new Queue()

console.log(queue.items) // []

Initiate a Queue class with the new keyword
Log out our items property from our new queue

Constructor MDN

this MDN

Array MDN

Enqueue function

The purpose of our Queue is to add elements to the rear of our structure. We can use the built-in push method to insert an element to the end of our items.

enqueue(element){
  this.items.push(element);
}

The element inside our parameters will be the item we will pass into our function.
Using the push() method on our items will add the element to the end of the items.

push() MDN

Dequeue function

Our Queue should be able to remove the first element of our items array. We can use the built-in shift method to accomplish this.

dequeue(){
  return this.items.shift()
}

Using the shift() method will remove the first element in our items

Front function

We need to be able to check what is about to be removed from the front of our structure too. We can quickly return the first element of our array by accessing the first element of our array.

front(){
  return this.items[0]
}

We can easily access the first element in our items array by using the array indices using brackets [] and the first integer of the array, which is 0

Array indices MDN

Check Empty function

Checking if we have an empty items array is also a nice feature to include. We can return a true or false result by checking the length of our items. If our items are strictly equal to zero, then it is true; otherwise false.

checkEmpty(){
  return this.items.length === 0;
}

Using the strictly equals === operation allows us to compare the size of our items with 0 easily, returning true or false

Strictly Equals === MDN

Print Queue

We need to see what our entire Queue structure looks like. Printing out our Queue. We can do so by iterating through our array and returning the elements in a string for readability.

printQueue(){
  let str = ""
    for(let i = 0; i < this.items.length; i++){
        str += this.items[i] + ", ";    
    }

    return str
}

Our function printQueue()
let str an empty string where our elements will be added
for loop allows us to loop through an array where we can check the length of our array and iterate till we reach the end of the array
In our for loop statement, we assign each element that is iterated and add a space for readability.
Returning the final results from our str when the for loop is done iterating.

for loop MDN

Final Queue Structure

class Queue {
  constructor(){
    this.items = []
  }

  enqueue(element){
    this.items.push(element)
  }

  dequeue(){
    this.items.shift()
  }

  front(){
    return this.items[0]
  }

  checkEmpty(){
    return this.items.length === 0;
  }

  printQueue(){
    let str = "";
    for(let i = 0; i < this.items.length; i++){
      str += this.items[i] + ", "
    }
    return str
  }

}

Let us review what we have implemented. We have five functions needed for a FIFO structure or Queue Data Structure. Our enqueue function adds an element to the end of the Queue; the dequeue function removes the first element in the Queue; the front function returns the first item in the Queue; the check empty function returns true or false whether Queue is empty or not, last but not least the print queue function returns a string of our Queue for readability.

You can create a new queue and use its methods like so:

let queue = new Queue();

console.log(queue.isEmpty()); // true

queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);

console.log(queue.printQueue()); // 10 20 30
console.log(queue.front()); // 10
console.log(queue.dequeue()); // 10
console.log(queue.printQueue()); // 20 30

Conclusion

In this article, we’ve covered the basics of a Queue Data Structure in JavaScript. We started by discussing the basics of FIFO, then we explored creating the structure's operations, to using our queue structure.

In summary, JavaScript is a powerful tool for modern web development, and we hope this article has given you a solid foundation for exploring it further. Remember to keep learning, practicing, and experimenting, and you'll be well on your way to becoming a proficient JavaScript developer.

Exercises

Why and when should I use a Queue data structure instead of an Array?
What are some types of Queues?
Implement a Queue using two Stacks

JavaScript Data Structure Pt 2: Stack

Oscar Ortiz — Sun, 12 Feb 2023 20:44:28 +0000

What is a Stack?

The Stack Data Structure is a way that allows us to store a collection of data in a Last In First Out fashion. This means the last element added to the stack, is the first one to be removed.

Basic example

In Code

We will use an Array to create our stack

let stack = []

We can use the following built-in methods to create a Stack using push() and pop()

stack.push() // add an element to the end of the Stack

stack.pop() // remove the last element of the Stack

basic syntax

let stack = [1,4,2,6,8]

stack.push(5)

console.log(stack) // output [1,4,2,6,8,5]

stack.pop()

console.log(stack) // output [1,4,2,6,8]

Following up from Array

This is the following up article after Arrays Data Structure. We are building on our previous knowledge to help leverage our previous demonstrations. The more practice, the more we can get comfortable with these structures.

Using arrays to implement a Stack

We will create a Stack class to allow us to make our data structure anywhere by using our stack class. We will have two main methods from the pop and push , then we will implement a few of our own like peek , isEmpty, size , and clear .

Stack Class

class Stack { }

Anytime we want to use our Stack Data Structure we want to initiate an empty Array

class Stack {
    constructor() { 
        this.items = [];
  }
}

let stack = new Stack();

console.log(stack.items) // output [ ] <--- empty Array

Adding pop & push

pop() removes the top element of the stack

pop() { 
  return this.items.pop()
}

push() adds an element to the top of the stack

push(element) {
    this.items.push(element);
}

Stack Class

class Stack {
  constructor() {
        this.items = []
  }

    pop() {
        return this.items.pop();
    }

    push(element) {
        return this.items.push(element);
    }

}

Checking our top element

We want to be able to check the top element of our stack. We can do so by retrieving the last item of our Array .

peek() { 
    return this.items[this.items.length - 1];
}

Stack Class

class Stack {
  constructor() {
        this.items = []
  }

    pop() {
        return this.items.pop();
    }

    push(element) {
        return this.items.push(element);
    }

    peek() { 
        return this.items[this.items.length - 1];
    }
}

Checking if Stack is empty

We need to be able to check if our stack is either empty or not.

isEmpty() { 
    return this.items.length === 0; // this will return true or false 
}

Stack Class

class Stack {
  constructor() {
        this.items = []
  }

    pop() {
        return this.items.pop();
    }

    push(element) {
        return this.items.push(element);
    }

    peek() { 
        return this.items[this.items.length - 1];
    }

    isEmpty() { 
        return this.items.length === 0;
    }
}

Checking Stack Size

We need to be able to see the amount of elements our stack is storing. We can do so by returning the length of our stack

size() {
    return this.items.length;
}

Stack Class

class Stack {
  constructor() {
        this.items = []
  }

    pop() {
        return this.items.pop();
    }

    push(element) {
        return this.items.push(element);
    }

    peek() { 
        return this.items[this.items.length - 1];
    }

    isEmpty() { 
        return this.items.length === 0;
    }

    size() {
        return this.items.length;
    }
}

Clearing up Stack

We need to be able to clear up our stack. Removing elements from the stack one by one can be time-consuming, which is why it’s easier to clear our stack*.*

clear() {
    return this.items = [];
}

Stack Class

class Stack {
  constructor() {
        this.items = []
  }

    pop() {
        return this.items.pop();
    }

    push(element) {
        return this.items.push(element);
    }

    peek() { 
        return this.items[this.items.length - 1];
    }

    isEmpty() { 
        return this.items.length === 0;
    }

    size() {
        return this.items.length;
    }

    clear(){ 
        return this.items = [];
    }
}

Using our Stack Data Structure

With our Stack class, we can now create stacks anywhere.

var stack = new Stack();

stack.push(2)
stack.push(3)
stack.push(7)

console.log(stack.items) // [2,3,7]

stack.pop()

console.log(stack.items) // [2,3]

When working with the Stack Data Structure, it can be handy when retrieving the most recently added element. This article aims to help us understand how the Stack Data Structure works behind the hood. We do not need to reinvent the wheel regarding these Data Structures, but it is handy in rare cases. We can always use the built-in methods to create a stack.

Conclusion

By the end of this article, I hope you can see the power Stack data structures have when it comes to data collection. This is one of many key concepts in the JavaScript programming language. If you manage to stick around this far I appreciate your time and eagerness in learning with me!

💡 If we want to learn more about the other methods, check out the MDN Docs

JavaScript Data Structure Pt 1: Array

Oscar Ortiz — Sat, 11 Feb 2023 06:49:55 +0000

What is an Array
Arrays used for
Creating Array
Using Array
Conclusion

What is an Array?

There are many ways to store information when working with data on the web. An Array is the simplest way to store a collection of data and exists in every programming language. It’s commonly used as a base for most data structures due to its widely used methods. An Array also contains two different types of values we are working with, which would be considered the element and then the assigned index number that is much referring to our element.

Array used for?

When it comes to an Array, we want to ensure that any data stored is similar or has some relationship with it. So if we have an Array of movie names, we wouldn’t want to keep music names in that same collection of data. We want to create a separate collection.

Example given

var movies = [ "incredibles", "toy story", "cars" ];

var artist = [ "James Brown", "Justin Timberlake", "Dadft Punk"];

var fruits = ["apples", "oranges", "pineapples"];

Creating an Array

We have two ways to create an array, using the Array constructor or using [] square brackets

Array constructor

var arr = new Array(); // we can initiate an array with the Array Constructor

Square brackets

var arr = []; // we can initiate an array with square brackets

Using Array

There are numerous ways to manipulate an Array. We will be diving into the most commonly used methods with the Array. There are tons of built-in methods that the engineers have created for us to use.

Adding an element to an Array

If we want to add an element to the end of our Array, we can use one of the built-in methods that come with the Array once initiated.

basic syntax

arr.push()

push()

var arr = [];

arr.push(2);
arr.push(5);
arr.push(25);

console.log(arr) // output [2,5,25]

Removing an element from an Array

The pop() method allows us to remove an element from the Array

basic syntax

arr.pop()

var arr [2,5,25]

arr.pop();

console.log(arr) // output [2,5]

Accessing an element from an Array

If we wanted to access elements in an array, we could use the square bracket notation and the index of the element we want to retrieve.

basic syntax

arr.[0]

var arr = [2,5,25]

console.log(arr[0]) // 2
console.log(arr[1]) // 5
console.log(arr[2]) // 25

Sorting an Array

If we wanted to sort our elements within an Array, we could do so with the sort method. By default, the elements are sorted out ascending. Comparing the sequence of UTF-16 code unit values.

arr.sort()

var arr = [5,3,8,2,1,6,4];

arr.sort()

console.log(arr)

Reversing an Array

We can also reverse the Array in place and return a reference to the same Array .

In other words, the Array is mirrored to the original.

basic syntax

arr.reverse()

var arr = [5,3,8,2,1,6,4];

arr.reverse();

console.log(arr) // output [4, 6, 1, 2, 8, 3, 5]

💡 With these few methods, we can see the usefulness of the Array Data Structure and how helpful it can be in cases of manipulating data

Retrieving certain elements from an Array

We could retrieve more than one element instead of accessing it individually with the square bracket notation. Using the slice method, we can have a starting index & ending index that will return a copy of the Array elements. The original Array will not be manipulated.

basic syntax

arr.slice(starting_index, ending_index)

const myArray = [1, 2, 3, 4, 5];
const extractedArray = myArray.slice(1, 4); // [2, 3, 4]

Conclusion

By the end of this article, I hope you can see the power Array data structures have when it comes to data collection. This is one of the primary key concepts in the Javascript programming language, as it’s a primary basis for many other data structures. Like Stack or Queue which we will be learning about throughout this series.

💡 If we want to learn more about the other methods, check out the MDN Docs

JavaScript Tutorial: Data Structures

Oscar Ortiz — Sat, 11 Feb 2023 06:49:44 +0000

This series of tutorials will be based on Data Structures in Javascript. Each subject will be explained in individual articles to have a deeper understanding and to help eliminate too much information consumption at once. We will start from the basics and move up to some advanced structures to improve our ability using them.

Data Structures

Array
Stack
Queue
Linked List
Hash Table
Tree
Graph
Set
Map
Heap

I am creating a one-stop shop for Data Structures in JavaScript instead of having to surf through many different platforms and articles when working with one of these.

Due to so many subjects that I'd like to dive into, each article will be released weekly or bi-weekly, depending on the free time. If you'd like to follow along and keep up with these, feel free to book mark this series to stay updated.

Building a Pagination Component with ReactJS

Oscar Ortiz — Wed, 01 Feb 2023 17:41:57 +0000

Introduction
Setup
Pagination Component
Pagination Setup
- Component State
- Setting up functionality
Page UI
RenderComponent
Conclusion

Introduction

In this guide, we will learn how to create a Pagination component to display data at a certain amount on each page. By the end of this guide, we will have a complete working pagination component. We will focus more on the Pagination component's functionality aspect and will not dive too deep into the styling. We will provide an online editor link to follow along. In today's world wide web, we see lots and lots of data displayed on the user's screen. Usually, we get this data from a database (API) where we, the developers, need to figure out a way to display that data correctly; in some cases, we will have a designer with a design ready for us to work with, which only leaves us to worry about the functionality. With the tools you'll earn in this guide, you'll be able to take this component to the next level.

Sandbox

We will be working with data from a public API for Amiibos. If we want to learn more about the API we are working with, feel free to check out their documentation.

What we assume you know before starting this guide

Basic JavaScript knowledge

Basic ReactJS knowledge

ReactJS hooks basic usage

Setup

Here is our setup project. Feel free to fork the project to start making changes.

App.jsx This is what our app will look like at the start.

import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  // Our Data
  const [data, setData] = useState([]);

  // fetching our data
  useEffect(() => {
    axios
      .get("https://www.amiiboapi.com/api/amiibo")
      .then((res) => setData(res.data.amiibo))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <h1 className=" text-2xl text-center">Pagination ReactJs</h1>
    </div>
  );
}

What we need to know

We import a few things at the start of our app.

useState - allows us to manage the state of our application/component

useEffect - allows us to make asynchronous calls within our component

Axios - an HTTP framework that allows us to request data from the browser

Creating Pagination Component

Problem

We want to create our pagination component. We will create a file called Pagination. jsx
Create a functional component. Once created, render the Pagination component into our app.

What we need to know

Have an understanding of creating React functional components and exporting and importing.

Solution

Pagination.jsx should have the following code.

import React from "react";

export default function Pagination() {
  return (
    <div>
      <p> Pagination Component </p>
    </div>
  );
}

Import Pagination.jsx into App.jsx

import { useEffect, useState } from "react";
import axios from "axios";
import Pagination from "./Pagination";

export default function App() {
  // Our Data
  const [data, setData] = useState([]);

  // fetching our data
  useEffect(() => {
    axios
      .get("https://www.amiiboapi.com/api/amiibo")
      .then((res) => setData(res.data.amiibo))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <h1 className=" text-2xl text-center">Pagination ReactJs</h1>

      <Pagination/>

    </div>
  );
}

Setting Up Pagination

Problem

The pagination component will need to take in some data to work accordingly. We need to know how much data we want to display at once, how many pages we want to show the user to navigate through, a component or components that will render out with the data, and of course, the data itself we want to pass to our pagination.

What we need to know

We need to understand how props are passed through functional components. Working with arguments will allow us to have more control over our data.

Our Pagination component will take four parameters. We are naming our parameters to match our needs.

Pagination({data, RenderComponent, pageLimit, dataLimit})

data: the data we passing through
RenderComponent: the component that will display our data
pageLimit: the number of pages to select from
dataLimit: the amount of data to display on each page

Solution

Update Pagination.jsx

export default function Pagination({data, RenderComponent, pageLimit,dataLimit}){

  return (
    <div>
      <p> Pagination Component </p>
    </div>
  );
}

Component State

Problem

Our pagination will need to have a state of its own. We must determine how many total pages we obtain from our data. We need to track the current page we are viewing.

What we need to know

The Math module can help us round up our total. We need to know the length of our data and divide that by the amount of data we want to display per page, giving us a total amount of pages.

Solution

Starting at page one allows us to set a default value to our currentPage variable.

const [pages] = useState(Math.round(data.length / dataLimit));
const [currentPage, setCurrentPage] = useState(1);

Updated Code

import React, { useState } from "react";

export default function Pagination({data, RenderComponent, pageLimit,dataLimit}){

  const [pages] = useState(Math.round(data.length / dataLimit));
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <div>
      <p> Pagination Component </p>
    </div>
  );
}

Update App.jsx

<Pagination data={data} pageLimit={5} dataLimit={10} RenderComponent={Amiibo} />

import { useEffect, useState } from "react";
import axios from "axios";
import Amiibo from "./Amiibo";
import Pagination from "./Pagination";

export default function App() {
  // Our Data
  const [data, setData] = useState([]);

  // fetching our data
  useEffect(() => {
    axios
      .get("https://www.amiiboapi.com/api/amiibo")
      .then((res) => setData(res.data.amiibo))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <h1 className=" text-2xl text-center">Pagination ReactJs</h1>

      <Pagination
        data={data}
        pageLimit={5}
        dataLimit={10}
      />
    </div>
  );
}

If we forget what our arguments mean, check back to the pagination setup for a reminder.

Setting Up Functionality

Problem

Our pagination component needs to accomplish a few functionalities, such as going to the next page, going back to the previous page, changing to the selected page, and gathering data for the page.

What we need to know

Have an idea of how to work with functions for our functional components and how to set a new state to our variable.

Solution

Here are the functions we will be working with

  function goToNextPage() {}

  function goToPreviousPage() {}

  function changePage() {}

  const getPaginatedData = () => {}

  const getPaginationGroup = () => {}

goToNextPage function

Problem

We need to figure out how we can go to the next page. What are some ways we can tell our component to change page values?

What we need to know

What is our current page

Solution

function goToNextPage(){
  setCurrentPage((currentPage) => currentPage+ 1);
}

goToPreviousPage function

Problem

How can we go to the previous page? What are some ways we can tell our component to change page values?

What we need to know

What is our current page

Solution

function goToPreviousPage() {
  setCurrentPage((currentPage) => currentPage - 1);
}

changePage function

Problem

How can we get the value of the user's click?

What we need to know

We need to know how to work with event handlers.

Solution

function changePage(event) {
  const pageNumber = Number(event.target.textContent);
  setCurrentPage(pageNumber);
 }

getPaginatedData function

Problem

We need to get the starting and last index of the array items within the page we are viewing.

What we need to know

We need to know how to work with arrays to acquire index numbers.

Solution

const getPaginatedData = () => {
  const startIndex = (currentPage * dataLimit) - dataLimit;
  const endIndex = startIndex + dataLimit;
  return data.slice(startIndex, endIndex);
};

getPaginationGroup function

Problem

We need to determine the total number of pages depending on two values.

What we need to know

We need to know our page limit, array fill, and map methods.

Solution

const getPaginationGroup = () => {
    let start = Math.floor((currentPage - 1) / pageLimit) * pageLimit;
    return new Array(pageLimit).fill().map((_, idx) => start + idx + 1);
};

We are returning a new array if we pass the last index of our page nav number.

Pagination UI

Now that we have created all the functionality needed for our component, we can move on to creating elements for our UI. Since this does not require too much critical thinking, we will provide styled elements. We will need three elements: the previous button, the next button, and the navbar of numbers to allow the users to change page numbers. Last is the component we want to render for our data.

Previous Button

 <button
  onClick={goToPreviousPage}
  className={`prev ${currentPage <= 1 ? 'hidden' : ''}`}>
  prev
</button>

Next Button

<button
  onClick={goToNextPage}
  className={`next ${currentPage >= pages ? 'hidden' : ''}`}>
  next
</button>

Page Numbers

{getPaginationGroup().map((item, index) => (
  <button
  key={index}
  onClick={changePage}
  className={` paginationItem ${currentPage === item ? ' px-3 py-2 bg-gray-500/30 rounded-full' : null}`}
            >
    <span>{item}</span>
  </button>
))}

Rendering Component

<div className="sm:grid sm:grid-cols-2 sm:gap-4 lg:grid-cols-3">
  {getPaginatedData().map((d, idx) => (
    <RenderComponent key={idx} data={d} />
  ))}
</div>

RenderComponent UI

Now that our Pagination component is complete, we can finish it up by adding the child component we want to render within our pagination component. We have provided a fully styled component to make it easier for us towards the end of this guide. Feel free to style it up how ever we would like.

Amiibo.jsx Our amiibo card component is already styled up for us with Tailwind

import React from "react";

export default function Amiibo({ data }) {
  const amiibo = data.map((el) => (
    <div className="mx-auto w-full md:mx-0 md:flex md:flex-col">
      <div
        className="my-10 bg-gray-500/30 shadow-xl border-2 border-black rounded-lg p-4  mx-auto transition ease-in-out hover:scale-110 duration-300 "
        key={data.tail}
      >
        <img
          src={el.image}
          alt={el.character}
          className="mx-auto w-auto drop-shadow-2xl  max-h-56"
        />
        <p className="text-center text-2xl font-jost underline">
          {el.character}
        </p>

       <table className="mx-auto text-sm w-full text-left">
         <thead>
           <tr className="">
             <th>Country</th>
             <th>Release Date</th>
             <th>Game</th>
           </tr>
         </thead>

         <tbody className="font-semibold">
          <tr>
            <td>United States</td>
            <td>{el.release.na}</td>
            <td>{el.amiiboSeries}</td>
          </tr>

          <tr>
            <td>Japan</td>
            <td>{el.release.jp}</td>
          </tr>

          <tr>
            <td>Europe</td>
            <td>{el.release.eu}</td>
          </tr>

          <tr>
            <td>Australia</td>
            <td>{el.release.eu}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
 ));

 return <div>{amiibo}</div>;
}

Next import our Amiibo component into our App component.

import Amiibo from './Amiibo.jsx'

Finally

Update <Pagination /> component within App.jsx

Add <Pagination data={data} pageLimit={5} dataLimit={10} RenderComponent={Amiibo} />

Conclusion

By the end of this article, we have learned how to create and understand how a pagination component works. It is essential to understand how our code works altogether. Not only does it help us develop as developers, but it can also help us use the tools we are working with more efficiently.
These articles are mostly intended for personal use in becoming a better programmer and writer and developing my programming skills. Please drop any feedback or corrections you believe should be made to help me and others. Thank you for your time and for sticking this far!

Three Books To Evolve Into A Superior Programmer

Oscar Ortiz — Wed, 26 Oct 2022 19:22:23 +0000

Introduction

If you are looking to enhance your programming skills but haven't been able to find some reliable sources without having to dig deep through the web or even documentation, then look no further. The books I am about to recommend have helped me in my career as a programmer, and I believe I still go back to the same techniques I've learned from these books. The best part about reading these books is that not only may you discover the information you didn't know about, but you will also thank yourself in the future for pushing yourself to learn more. I'll summarize each book to give you an idea if it's a good book for you or not.

Introduction
Books
HTML and CSS: Design and Build Websites
JavaScript: The Definitive Guide
Think Python: Think Like A Computer Scientist
Conclusion

Books

Here is the list of books if you're wondering and don't want to read the entire article.

The list is not a rating list or an order list of how we should read these books. You can read them as you choose if you feel they benefit you.

HTML and CSS: Design and Build Websites

This book is an excellent opener for any new to programming, a beginner, or anyone interested in learning about building websites. Programming isn't simply databases and algorithms anymore. We've come pretty far into the internet, where we now have Graphic User Interfaces, where a user can use a mouse to navigate through a computer, unlike back when it was simply just a terminal and a screen with data. This book uses real-world examples to show how a web page is built from the ground up. One such as how a news company went from paper to digital to adapt to the new technology, making it a lot more beneficial for the company allowing them to gain a unique audience and have easy access to their news source. After learning some of the fundamentals of how a website's structure is built from the ground up, you will dive into CSS, which is the critical source of styling our web pages. Seeing similar concepts from the HTML in the CSS language can give you an idea of how some things are slightly different but nothing that you can't overcome with a bit of dedication. It also uses excellent analogies to give the regular non-tech savvy person a better understanding of concepts. Learning modern tech terminology to be able to explain your code correctly to others is also very crucial. It gives us an advantage in asking properly worded questions, issues, code reviews, or documentation. They are making it very beginner friendly when it comes to overwhelming terms.

What you'll learn:

HTML language to build web pages
CSS language to style web pages
Elements, DOM, Code Editors
Very basic web page concepts

Difficulty: 1/5

JavaScript: The Definitive Guide

Javascript has become one of the most popular programming languages and the most used language on the internet for making web pages interactive. If you want to sharpen your JavaScript skills and learn more about what's happening under the hood, this book is for you. It lectures about the most fundamental concepts of the JavaScript programming language. In a beginner-friendly road-map from what a lexical environment is, variables, pointers, references, loops, and so much more, even for those experienced developers who want to get better at JavaScript programming. If you are thinking about how exactly JavaScript frameworks work, this is one of those books you will not regret, as many of the concepts in this book are seen everywhere in software, even now. After reading this book, you can create your very own JavaScript framework or even have more appreciation for how open-source software impacts the software world.

What you'll learn:

JavaScript's environment
How data is stored
Deep understanding of variables, pointers, references
Data Structures such as Arrays and Objects
How to make web pages interactive and more engaging
How Javascript's used on the web

Difficulty: 3/5

Think Python: Think Like A Computer Scientist

This book is one of those I wish I had come accross earlier in my web career. I love this book so much because it doesn't only focus on the Python programming language. Its primary focus is to help you think like a Computer Scientist, all while learning Python, an Object Oriented programming language. Many programming languages are Object Oriented. So what does that mean exactly? We can use many of the concepts taught in this book with many other languages, and a majority of the time, the only difference is the syntax, environment, and keywords. Meaning you can still use similar data structures in multiple programming languages. This book aims to help you overcome the fear of learning new technologies by trying to master them instead of thinking like a computer scientist.

What you'll learn:

Basic programming concepts
Functions, statements, debugging
Conditionals & Recursions
Iterations, Strings, Lists
Arrays, Dictionaries, Objects
Python programming language

Difficulty: 3/5

Conclusion

By the end of this article, I am confident that at least one of these books caught your eye. It is imperative to understand how your code fully works; not only does it help you become a better developer, and it can also help you use the tools you are working with more efficiently.

These articles are primarily intended for personal use in becoming a better programmer and writer and growing my programming skills. Please drop any feedback or corrections you believe should be made to help me and others. Thank you for your time and for sticking this far!

Quick Github Intro

Oscar Ortiz — Thu, 28 Jul 2022 15:01:07 +0000

If we are not familiar with Github, then we are in luck. This article will give us an overview on what exactly Github is and what's its purpose. Just about every modern developer is required to be able to use some type of Version Control System. So lets go ahead and dive right into it.

Introduction
Repository
Commands
Conclusion

Introduction

What is Github?
Well in technical terms it means the following:

Open Source Distributed Version Control System

Let's break it down to more simpler terms.

Open Source: Free to use software where the source code is visible to the public and allows anyone to use it, study, update, and even distribute.
Control System: Manages, distributes, and stores content. Such as code, writing, pictures, and more types of files.
Version Control System: Software changes rapidly, so Github is a platform that allows us developers to make changes so often and make code better. So we have a nice history of all changes made in the code.
Distributed Version Control System: Github has a remote version stored on the server and stored locally on the developer's computer. Meaning the code is available on a central server, available to all developers to work with.

Before there was any type of Github platform for developers to collaborate on projects, it was much more difficult to share source code to the public, and have a full history of the entire changes. Most of these before Github existed were all either exclusive from the company to share with their own employees or working on some local source code server.

Github solved this issue with allowing anyone to publish code that they wanted to share with other developers. It became such a big thing that Microsoft ended up acquiring Github for nearly $7.5 billion u.s. dollars. I think that should just tell you how important this type of software is to the modern application world.

Making it the largest host of source code in the world.

Repository

So how exactly do we keep track of changes in our code? With a Repository!
When we look at the word Repository for the first time, it might be a little overwhelming. But once we understand the definition of it and it's purpose, we will see why repository's are a big thing.

A place, building, or receptacle where things are or may be stored.

The .git/ folder would act as our Repository in our project. This folder should always be at our root of our projects folder.

e.g.

The way we keep track of our changes in our code is with a few git commands that we can either type in our terminal / command line.

Git Commands

Our .git/ folder doesn't simply track our files automatically. We would need to tell our repository to accept the changes we have made with a few simple commands. There are a lot of commands to use for specific reasons but we're only going to mention the ones that are the most commonly used to help us track our work progress.

git status : When ever we want to see our changes within our directory, we can run this command in our terminal, giving us a list of files that have been changed, and being tracked.
git commit : We can use this command to save our tracked files to our local repository. We can also leave a message / description about the changes we have made. Importantly this is what allows us to save different states of our code from different stages.
git clone : This command will allow us to clone any repository that is available to use from the Github platform. Some may be private and require access to them.
git branch : An essential command that allows us to create different path's if we ever need to work on different components. Allowing us to test, debug, and more than working on our main file. Think of it as having a Production and Development paths.
git merge : Merging our paths or branches together is another essential command, allowing us to work on different task on different branches. Once we believe we want a branch merged with another, we can use this command to achieve that.
git push : We can also upload our local repository that we have been working on our machine to the remote repository on the Github platform for others to see or use.
git pull : Updating our local repository is very common when working on a team project. This command will allow us to update our local repository to the latest remote version.

Here is a brief example on how we would use these git commands to track our work.

Clone: You will clone the repo to have a copy to work with on your personal computer.
Branch: Checkout a branch and name it using the firstName-lastName format.
Complete Assignment: Do all the work on your assignment on your personal computer. Commit your work regularly.
Push: Push your local changes to your remote repo branch.
Create a Pull Request: This pull request will be made with your student branch against the fork you created in the beginning. Submit this link to Canvas.

Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!

JavaScript Lexical Environment

Oscar Ortiz — Wed, 06 Jul 2022 23:02:28 +0000

Introduction
Text
Comments
Literals
Identifiers & Reserved words
Unicode
Conclusion

Introduction

If we are not familiar with the term Lexical Environment, then look no further. In this article, we will learn and discuss what the Lexical Environment is & means in the Javascript language. After going through this article, we can take this knowledge to any other programming language as the concepts are similar in different languages. So buckle up and get ready to learn!

So why is it important to understand the "Lexical Environment"?

Understanding how the environment works will not only benefit us now, but it will benefit us in reading, writing, and debugging code. We will always see the fundamentals/basics when coming across javascript code. So understanding these rules at a very early stage of our career or even later on can still be super beneficial.

Here is a list of topics we will dive in-depth

Text
Comments
Literals
Identifiers / Reserved words
Unicode
Semicolons

Be on the lookout for some tech terminology words. If we are unfamiliar with the terminology, do not worry, as definitions will be shared when we believe a big word comes up. Here is an example below

Big Word Definition

Syntax: the arrangement of words and phrases to create well-formed sentences in a language

Text

We need to keep a few practices in mind when writing Javascript code. One important rule to note is case-sensitive. Like in the English language, when we write sentences, we must follow a set of grammar rules we learned in school to have proper grammar. In JavaScript, when we name a variable, we can use the same word differently, each having its distinct identifier. For example

car <--- one name
Car <--- second name
CAR <--- third name
cAr <--- forth name

Each of these names is distinctive, where case-sensitive comes into play. We must type the same characters in our code when creating variable names and using reserved words in our script; otherwise, we will get a different result or an error.

Another neat feature that the lexical environment provides is ignoring white spaces. In other programming languages like python, it is safe to know that its environment is strict regarding indenting or spacing. Luckily we do not have to worry about that issue in the JavaScript environment.

Why is this important? Well, it helps us format our code neatly and consistently. So we can indent, line break, tabs, and add as many spaces as we would like, and JavaScript will ignore it.

Big Word Definition

Case-Sensitive: determining between capital and lowercase letters

Big Word Definition

White-Space: represents a blank space punctuation character in the text

Big Word Definition

Characters: A character is either a symbol (letters, numbers, punctuation)

Comments

So what exactly is a comment, and how can we use them?

Well, its name is pretty much the description. However, the purpose of comments is to help us write notes about the code or specific function. Maybe we are collaborating with another developer and have a suggestion about formating a script. There are a few ways we can add comments to our code. For example

Anything in front of two forward slashes // is considered a comment; this allows us to create a single-line comment.

// this is a comment

If we want to add a bit more information, we can add multiple lines of comments, /* anything between here is a comment */

/* 
Anything between these characters
Javascript ignores and considers them as comments.
*/

Comment inside a function

function car(){
 // this is a comment in a function block
}

Literals

Data values that appear in our script. There are many ways that literals are represented in our script.

array literals
Boolean literals
string literals
numeric literals
object literals
floating-point literals

These are values that we literally provide in our script.

var name = 'Oscar' <-- string literal
var oddNum = 3 <-- numeric literal
var numbers = [1, 2, 3, 4, 5] <-- array literal

Identifiers & Reserved words

We use variables_ when we want to store data values in our javascript code. We give variable names to act as a reference to our data value. We use identifiers to name our variables, functions, or properties. Containing a standard set of characters/letters, dollar sign $, underscores _, and digits allows us to create variables, functions, and property names in many ways.

In our javascript environment, we have access to reserved words, and these words are part of the javascript programming language with functionality pre-built for us and ready to use.

break
case
catch
class
const
continue
debugger
default
delete
finally
else
if
import
new
return
super

If we are curious and want to dive more depth into the definitions of the reserved words, check out MDN keywords.

Unicode

When we write javascript code, we use the Unicode Character set, and it is best practice to use only the ASCII letters and digits in our identifiers.
That does not mean we are not allowed to use other symbols, though, no emojis; what does this mean? In our script, we can use mathematical symbols and non-English languages as variables.

Conclusion

How to open VSCode with Terminal

Oscar Ortiz — Sat, 29 Jan 2022 18:50:41 +0000

Download or Install VSCode
VSCode Command Plugin
Open VSCode with terminal

Here is a quick setup guide to get your VSCode opening up with your terminal.

Download or Install VSCode

VSCode on our machine. If you have not downloaded VSCode to your machine yet please do so here

VSCode Command Plugin

Open up VSCode. Once open, we can access our VSCode command palette by hitting command + shift + p. Inside our search bar we will type in shell. We will install our shell command.

Awesome! We have now added our terminal command that will allow us to open our VSCode from our terminal. For example let's say you cloned a big project from github but only want to access a certain folder from the project and not the whole app?

Here's an example of a big project.

If we wanted to we can open only one of these folders if there was only one thing we wanted to work on and not have such a heavy load of files on our VSCode

Open VSCode with Terminal

Let's open up our terminal and access the root of our project we are working on.

Let's go ahead and cd into the folder we want to work on only within our project. After we access the folder that stores the files we want to work on we can open our vscode with our new command.

code . <-- we include the period at the end of our command.

BOOM! Now you know how to access individual folders or even files straight from the terminal.

Function Expression vs Arrow Function Expression

Oscar Ortiz — Tue, 04 Jan 2022 19:47:56 +0000

Introduction

Let us learn the differences between a traditional function and an arrow function expression in JavaScript? If not, then prepare to learn the differences in this article. We will discuss the differences between both and share the pros and cons to help us better understand when is the right time to use one over the other.

Introduction
Function Expression
Arrow Function Expression
Conclusion

Function Expressions

In JavaScript, there are a few ways we can declare a function. One widespread and traditional way is function expressions. We can name our expression whatever we want to, but it's recommended to name functions precisely what it is intended to do for best practice. To help prevent confusion later on.

So how exactly do we accomplish this? Well, let us look at how a function expression is structured.

Above, we have a brief description of what a function expression is. We will now create a few function expressions to understand its features and purpose.

First we need to come up with a name for our expression. For this example we will use name as our expression name.

const name;

Now that we have our expression name, we can assign a function to it.

const name = function() {};

We also can declare our function with or without default parameters. For this example, we will add a single parameter that will name our output. We can name our parameter whatever we would like. It is helpful to name the parameter what we are asking for. For this example, we will use string as our parameter

const name = function(string){};

Now that we have passed in a parameter we can write in our function body to return an output with our parameter.

const name = function(string) {
  return "Hello " + string + ", how are ya?" 
}

We have just created our function expression. We can now invoke our function and pass in our name and get an output.

name('oscar'); // output "Hello oscar, how are ya?"

We have options when it comes to naming our functions. We can create anonymous function expressions by not including a name to our function. Just like our previous example

Here we simply assign a anonymous function to our expression.

const name = function() {}

If we wanted to provide a name for our function to create a named function.

function printName() {}

We have two ways to create our functions. We can assign it to a variable, or we can give our function a name and use it as so.

// assign to variable

let sum = function (a,b) { return a + b};

// giving our function a name
function sum(a,b) { return a + b };

When we assign our function to a variable, we are able to reassign that function to another variable. If we declare our function with a name, we can not change that function name else where. Here are a few more things we can benefit from using function expressions.

Arrow Function Expression

Working with arrow functions at first might seem scary. However, when we get the hang of it, we will realize that it is not so scary after all. The mathematical signs might make it look confusing at first => or arrow, but it is not so different from using a traditional function.

Arrow functions allow us to create functions in a simpler form but has restrictions compared to our traditional function. Let's take a look at the Arrow Function Syntax to have a better understanding.

Here is a basic arrow function syntax

param => expression

Notice how we don't need parentheses around our parameter if it's a single parameter, followed by our arrow sign, and then our function body expression. If we wanted to add more parameters then we would need to wrap them inside parentheses.

(param1, param2) => expression

A few things to note when working with arrow functions, it doesn't have its own this keyword binding. Should not be used for methods, and can't use it as constructors.

So you may ask, whats the purpose of using the arrow function then? Here are a few examples of us converting traditional functions to arrow functions.

Traditional Function to Arrow Function

function (a) { 
  return a + 100;
}

We will remove our function keyword and place an arrow between our argument and body.

(a) => { 
  return a + 100;
}

We can now remove our body braces {}

(a) => return a + 100;

Lastly we remove our parentheses ()

a => return a + 100;

Here is another example with multiple parameters.

// traditional function

function (a,b) {
  return a + b;
}

// arrow function

(a,b) => return a + b;

Forem: Oscar Ortiz

Why ReactJS? Exploring the Benefits of Learning This Framework

Table of contents

Intro

High demand for jobs

Efficient and Fast Development

Strong ecosystem and community

Resource Links

A final look

Feel free to give a follow

Action Verbs for a Technical Resume

Intro

List of Action Verbs

Conclusion

JavaScript Data Structure Pt 3: Queue

Table of contents

Introduction

Prerequisites

First In, First Out

Queue Operations

Print Queue

Final Queue Structure

Conclusion

Exercises

JavaScript Data Structure Pt 2: Stack

What is a Stack?

Following up from Array

Using arrays to implement a Stack

Checking our top element

Checking if Stack is empty

Checking Stack Size

Clearing up Stack

Using our Stack Data Structure

Conclusion

JavaScript Data Structure Pt 1: Array

Table of contents

What is an Array?

Array used for?

Creating an Array

Using Array

Adding an element to an Array

Removing an element from an Array

Accessing an element from an Array

Sorting an Array

Reversing an Array

Retrieving certain elements from an Array

Conclusion

JavaScript Tutorial: Data Structures

Data Structures

Building a Pagination Component with ReactJS

Table of contents

Introduction

Setup

Creating Pagination Component

Setting Up Pagination

Component State

Setting Up Functionality

Pagination UI

RenderComponent UI

Conclusion

Three Books To Evolve Into A Superior Programmer

Introduction

Table of contents

Books

HTML and CSS: Design and Build Websites

JavaScript: The Definitive Guide

Think Python: Think Like A Computer Scientist

Conclusion

Quick Github Intro

Table of contents

Introduction

Repository

Git Commands

Conclusion

JavaScript Lexical Environment

Table of contents

Introduction

Big Word Definition

Text

Big Word Definition