Forem: Raymundo Alva

Mastering Word Frequencies: A Python Solution to the Coding Challenge

Raymundo Alva — Tue, 18 Jul 2023 07:00:59 +0000

Problem-solving skills are the key to mastering complex challenges. Let's dig into a fascinating coding problem that involves reading a file, counting word frequencies, and generating a unique word frequency list. I'm going to explain this using the Python programming language. We will guide go over a comprehensive solution to this simple yet challenging problem. Mastering this problem will sharpen some extremely important programming skills.

The objective of this challenge is to develop a program that reads an input file containing a list of words separated by commas, determine the frequency of each word in the file and present the result, excluding any duplicates.

Example

To better understand the problem, let's consider the following example:

Suppose we have an input file named input1.csv with the following content:

hello,cat,man,hey,dog,boy,Hello,man,cat,woman,dog,Cat,hey,boy

The expected output for this program would be:

hello 1
cat 2
man 2
hey 2
dog 2
boy 2
Hello 1
woman 1
Cat 1

Solution

To reach a solution to this coding problem, we will make use of the powerful built-in csv module. The following code presents a straightforward solution that will lead us to the desired output:

import csv

user_input = input("Enter the name of the input file: ")
word_freq = {}

with open(user_input, 'r') as csvfile:
    input_reader = csv.reader(csvfile, delimiter=',')

    for line in input_reader:
        for word in line:
            if word not in word_freq:
                word_freq[word] = 1
            else:
                word_freq[word] += 1

for word, frequency in word_freq.items():
    print(f"{word} {frequency}")

At the beginning of our solution we prompt the user to enter the name of the input file. Next, we create an empty dictionary called word_freq to store the word frequencies. We open the file using the csv.reader() method and read it line by line. Each line is then split into individual words using the comma delimiter.

On each iteration, we check if each word already exists in the word_freq dictionary. If the word is not present, we add it to the dictionary with an initial frequency of 1. If the word already exists, we increment its frequency by 1.

Finally, we loop through the word_freq dictionary using the items() method to access both the word and its frequency. We print each word and its frequency using string formatting.

Problem-solving is a programmer's main skill, finding a comprehensive solution to a common coding challenge like this one will sharpen this necessary skill. By leveraging Python's powerful csv module, we read an input file, counted word frequencies, and created a frequency dictionary. The step-by-step approach displayed in this solution arms programmers of all levels with valuable insights, upgrades their problem-solving skills and expands their programming knowledge. I hope you had fun solving this problem and experimenting with it as much as I did. Happy coding! 😎

Pagination with the Rick and Morty API

Raymundo Alva — Wed, 03 May 2023 06:31:48 +0000

Most websites today can’t show all the data users need to see at once. It is better not to show all data because it makes for a better user experience and it also makes websites easier to navigate.

In order to show more data, a feature known as pagination can be implemented. I decided to give pagination a try and implement it using the Rick and Morty API. I chose this API because it made it easier to implement pagination in my opinion. I will show my own approach to pagination.

I am going to start my project with the minimum. I will only be keeping the App and index CSS files and the App and index components. I will be using hooks so I will be importing the useState and useEffect hooks from React. First I will declare all the state variables that I need in the App component.

const \[loading, setLoading\] = useState(true)

const \[characters, setCharacters\] = useState(\[\])

const \[currentPageUrl, setCurrentPageUrl\] = useState("https://rickandmortyapi.com/api/character")

const \[nextPageUrl, setNextPageUrl\] = useState()

const \[prevPageUrl, setPrevPageUrl\] = useState()

const \[pages, setPages\] = useState()

Now, I am going to use the Effect hook to fetch the data from the API. First, I will set the value of loading to true to make sure that a loading screen displays first. After the data arrives, the value can be set to false. The effect will run every time the current page URL changes. This is what that will look like.

useEffect(() => {

  const url = currentPageUrl

  setLoading(true)

  const fetchData = async () => {

    const res = await fetch(url);

    const data = await res.json();

    setCharacters(data.results)

    setLoading(false);

    setNextPageUrl(data.info.next);

    setPrevPageUrl(data.info.prev);

    setPages(data.info.pages)

  }

  fetchData();

},\[currentPageUrl\])

Now that we have that I will create some functions that will be assigned to the buttons of our page navigation buttons. These functions will change the current page. I will be mapping the characters that we fetched to a variable called charList that will hold a list of components.

function nextPage() {

setCurrentPageUrl(nextPageUrl)

}

function prevPage() {

setCurrentPageUrl(prevPageUrl)

}

function goToPage(num) {

setCurrentPageUrl(\`https://rickandmortyapi.com/api/character?page=${num}\`)

}

if (loading) return "Loading..."

const charList = characters.map(char => <Character key={Math.floor(Math.random() \* 10000)} name={char.name} img={char.image} />)

This is what the Character component will look like.

import React from 'react'

const Character = ({ name, img }) => {

  return (

    <div className="character-card">

      <img src={img} alt="" />

      <div>{name}</div>

    </div>

  )

}

export default Character

We pass the name of the character and the image down as props. Now we need to create the buttons for the pagination feature. I will be doing this in its own component. We need to pass the nextPage, prevPage, and goToPage functions down as props to this component along with the number of pages.

import React from 'react'

const Pagination = ({ nextPage, prevPage, goToPage, pages }) => {

  let pageButtons = \[\]

  for (let i = 1; i <= pages; i++) {

  pageButtons.push(<button key={i} onClick={() => goToPage(i)}>{i}</button>)

}

  return (

    <div>

      {prevPage && (<button onClick={prevPage}>Previous</button>)}

      {pageButtons}

      {nextPage && (<button onClick={nextPage}>Next</button>)}

    </div>

  )

}

export default Pagination

Here, I created a variable with an empty array assigned to it. Then, I am looping through the number of pages and creating a button for each page.

This will create all the buttons needed to navigate through all the pages. In the return statement, the previous and next buttons are conditionally rendered depending on whether their value is null or not. Now, we just need to add this component to our App component. I will show the pagination at the bottom and top of the page. It will look like this.

return (

  <div className="App">

    <Pagination

    nextPage={nextPageUrl ? nextPage : null}

    prevPage={prevPageUrl ? prevPage : null}

    goToPage={goToPage}

    pages={pages}

  />

  <div className="char-cards">

    {charList}

  </div>

  <Pagination

    nextPage={nextPageUrl ? nextPage : null}

    prevPage={prevPageUrl ? prevPage : null}

    goToPage={goToPage}

    pages={pages}

  />

</div>

);

That is all that we need to get some pages using this API. It is a very simple way to implement pages if the API you are using already shows you the number of total pages available. Here is the final result.

I had a lot of fun making trying this out. I hope that my approach will be helpful to some people. Happy coding!

Creating a React Timer

Raymundo Alva — Wed, 03 May 2023 06:27:56 +0000

Lately, I decided to practice using intervals in React. Last week, I had built a stopwatch and I immediately thought about building a timer. It is really similar to a stopwatch except it goes backward. So, I thought I would give it a try. Although it seemed just as simple as the stopwatch, building a timer had its own challenges.

I am using React hooks to make this component work. So, first of all, I set a time and start state. The default value for time is zero and false for start. This is what that looks like.

const \[time, setTime\] = useState(0);  
const \[start, setStart\] = useState(false);

In order for the time to display the time in seconds, minutes, and hours, I used a method that is very similar to the one I used with the stopwatch. We apply some math to the value of time and slice the number so that it displays as a two-digit number. This is what it looks like.

let seconds = ("0" + (Math.floor((time / 1000) % 60) % 60)).slice(-2);  
let minutes = ("0" + Math.floor((time / 60000) % 60)).slice(-2);  
let hours = ("0" + Math.floor((time / 3600000) % 60)).slice(-2);

Now we will use our useEffect hook to subtract 10 from the time every second using an interval. This hook will run when the value of start changes. If start is true, the interval will run, and if start is false, the interval is cleared.

useEffect(() => {

  let interval = null;

  if (start) {

    interval = setInterval(() => {

    if (time > 0) {

      setTime(prevTime => prevTime - 10)

    }

    }, 10)

  } else {

    clearInterval(interval);

  }

  return () => {

    clearInterval(interval)

  }

}, \[start\])

To set the timer, I created some buttons that will increment the time. Each button will either increment by an hour, a minute, or a second. This will also be the same for the decrementing. To implement this, I created a function that will take an input. If the timer hasn’t started yet, the time can be incremented depending on the button that is pushed.

function adjustTimer(input) {

  if (!start) {

    switch (input) {

      case "incHours":

        setTime(prevTime => prevTime + 3600000)

        break;

      case "incMinutes":

        setTime(prevTime => prevTime + 60000)

        break;

      case "incSeconds":

        setTime(prevTime => prevTime + 1000)

        break;

      case "decHours":

        setTime(prevTime => prevTime - 3600000)

      case "decMinutes":

        setTime(prevTime => prevTime - 60000)

        break;

      case "decSeconds":

        setTime(prevTime => prevTime - 1000)

        break;

      default:

        break;

    }

  }

}

That is all the logic that will give us the main functionality of the timer. Now we just need to render all of that to our screen. The time display will be in between a set of buttons that will help to increment and decrement the time. There will also be a start, stop and reset button. Our return statement will look like this.

return (

  <div className="App">

  <button onClick={() => adjustTimer("incHours")}>&#8679;</button>

  <button onClick={() => adjustTimer("incMinutes")}>&#8679;</button>

  <button onClick={() => adjustTimer("incSeconds")}>&#8679;</button>

  <div>{hours} : {minutes} : {seconds}</div>

  <button onClick={() => adjustTimer("decHours")}>&#8681;</button>

  <button onClick={() => adjustTimer("decMinutes")}>&#8681;</button>

  <button onClick={() => adjustTimer("decSeconds")}>&#8681;</button> <br/><br/>

  <button onClick={() => setStart(true)}>Start</button>

  <button onClick={() => setStart(false)}>Stop</button>

  <button onClick={() => {setStart(false); setTime(0)}}>Reset</button>

</div>

);

This is my timer! To be fair it is not perfect. There are some quirks that need to be fixed. I am thinking of conditionally rendering the buttons so that they only show at different steps of the timer process.

Still, plenty of scope for improvement but it is all that is needed to get started. Happy coding! 😎

React Stopwatch

Raymundo Alva — Wed, 03 May 2023 05:12:09 +0000

This week I went back to basics to touch upon using hooks by building a stopwatch with react. I think this is a nice little project that can be tackled down in just a few hours and it is a good way to practice React hooks. With this stopwatch, you can start the time stop the time and reset. Let’s get started and look at the code.

We are going to remove all of the files in the src folder except for App.css, App.js and index.js and remove all the imports. We will be using the state and effect hooks. This is what our initial component will look like.

Great so now we have to display our time. We are going to start by displaying the milliseconds. Let’s start by building our useEffect. First our interval will be defined and if start is true the timer will start, otherwise we will clear interval. In useEffect’s second argument we are going to pass in an array with start. This means that our effect will run when start state changes. We will also add a return statement for cleanup. Finally we will have a button that will start the time once it is clicked. This is what that will look like.

Now our time will start counting up. As of now there is no way to stop or reset the stopwatch. We also need to format what is displayed so that the number’s look correctly. There is a nice trick to doing this. First we will divide the time by 10 because that is the value of a millisecond then modulo 1000. Now we will append this to a zero so that when the time starts there will be a zero already instead of just one digit. Finally we will slice and pass in a parameter of -2 so that when the number becomes two digits the zero will be removed. This is what that will look like.

Now the number displayed will make more sense. Finally what we need to do is show the seconds, minutes and create the stop and reset buttons. Creating the minutes and seconds is really similar to what we did with the milliseconds. We can copy and paste and make some changes. Instead of using module by 1000 we will do it by 60. Another thing we will have to do is round the numbers down since the decimal numbers will be displayed if we leave it as is. The buttons are also really similar to the one that we have already. For example we will set the start state to false in the stop button. For the reset button we will set the time to 0 and also set start to false. This is what our finished stopwatch will look like.

This is a nice way to practice some fundamentals like hooks. These same techniques can be used to create other similar projects like a timer or clock. It was super fun building this and it didn’t take that long to do. Hope you have as much fun as I did. Happy coding! 😎

Java 2D Array

Raymundo Alva — Wed, 03 May 2023 05:07:05 +0000

Lately I have been learning Java so I have been looking for problems I can practice the basics on. I came across a problem that I thought was very interesting and fun to work on. The problem was to find the maximum number in a 2D array and also show the index of that number. I thought it would be good to show my process.

There is two steps to this problem. First we have to find the maximum number and then return the element’s index in the 2D array. I am going to create a method for each of the steps. I will call the first method maxNum. I will be creating variable that will represent the maximum number. I will use two for loops. This is what my first method looks like.

public class FindMaxAndIndex{

  public int maxNum(int\[\]\[\] array) {

    int max = 0;  

    for (int i = 0; i < array.length; i++) {

      for (int j = 0; j < array\[i\].length; j++) {

        if (array\[i\]\[j\] > max) {

          max = array\[i\]\[j\];

        }

      }  
    }

    return max;

  }

}

The maxNum method will take a 2D array as an argument. Every time the value of the max variable is lower than one of the element’s the value will be replaced with that element. This is how we find the maximum value. Now we need to find the index of the maximum number. This is actually very similar to the maxNum method. The only difference is that we can iterate through the array and check if the element is equal to the maximum number. If so, we store the index values into an array and return it. This is what that method will look like.

public int\[\] arrIndex(int\[\]\[\] array) {

  int\[\] indexArr = new int\[2\];

  for (int i = 0; i < array.length; i++) {

    for (int j = 0; j < array\[i\].length; j++) {

      if (array\[i\]\[j\] == maxNum(array)) {

        indexArr\[0\] = i;

        indexArr\[1\] = j;

      }

    }

  }

  return indexArr;

}

This is actually all we need! I am going to add a main method and output the value to the console. This is what the completed class looks like.

public class FindMaxAndIndex {

  public int maxNum(int\[\]\[\] array) {

    int max = 0;

    for (int i = 0; i < array.length; i++) {

      for (int j = 0; j < array\[i\].length; j++) {

        if (array\[i\]\[j\] > max) {

          max = array\[i\]\[j\];

        }

      }

    }

    return max;

  }

  public int\[\] arrIndex(int\[\]\[\] array) {

    int\[\] indexArr = new int\[2\];

    for (int i = 0; i < array.length; i++) {

      for (int j = 0; j < array\[i\].length; j++) {

        if (array\[i\]\[j\] == maxNum(array)) {

          indexArr\[0\] = i;

          indexArr\[1\] = j;

        }

      }

    }

    return indexArr;

  }

  public static void main(String\[\] args) throws Exception {

    int\[\]\[\] array = { {1, 4}, {8, 56}, {20, 7} };

    FindMaxAndIndex app = new FindMaxAndIndex();

    System.out.println("The maximum value in this 2D array is " + app.maxNum(array));

    System.out.println("The position of the maximum value is \[" + app.arrIndex(array)\[0\] + ", " + app.arrIndex(array)\[1\] + "\]");

  }

}

This problem is another great way to get used to iterating through arrays. I found it fun to solve and I learned from it. Happy coding! 😎

For Loops Pyramid

Raymundo Alva — Wed, 03 May 2023 05:02:46 +0000

Lately I decided to learn a new programming language. I decided to go with Java because there is so many resources and it is relatively easy to learn. One of the first problems I solved using Java was to print a pyramid shape using for loops. It was a fun little problem so I would love to share my thought process.

This is what the pyramid shape is supposed to look like.

    \*  
   \*\*\*  
  \*\*\*\*\*  
 \*\*\*\*\*\*\*  
\---------

I broke this down into multiple for loops. First I needed a for loop that would print a whole layer of the pyramid one by one. So let’s keep it simple and start with that.

int num = 4;

for (int i = 1; i <= num; i++) {


  System.out.println("");

}

The num variable represents the number of layers that the pyramid will have. In the for loop we are printing a new line after each layer is created. Now we take another look at our pyramid and see that every layer starts with spaces first. The spaces are decremented after each layer. Also notice that num is equal to the number of spaces the pyramid starts with. We can use another loop to first print the spaces. It should look like this.

int num = 4;

for (int i = 1; i <= num; i++) {

  for (int j = i; j <= num; j++) {  
    System.out.print(" ");  
  }

System.out.println("");  
}

Very simple right? In this new for loop we set the variable j equal to our variable i from the outer for loop. This is so that the correct number of spaces prints out after every layer is done. Next we need to actually print out the stars that will represent the body of the pyramid. Another simple for loop will do the trick. This for loop will start once the spaces for loop is done. It will look like this.

int num = 4;

for (int i = 1; i <= num; i++) {

  for (int j = i; j <= num; j++) {  
    System.out.print(" ");  
  }

  for (int k = 1; k < (i \* 2); k++) {  
    System.out.print("\*");  
  }

System.out.println("");  
}

System.out.println("-----------");

Awesome! This new loop prints a star for every iteration. The difference here is that in the condition we check to see if k is less than i times 2. This is because each layer increments the number of stars being printed by 2. Notice we also added a line at the end that prints out the base of the pyramid once the body is done printing.

Nice pyramid! This is such a simple problem that helps you get used to using loops in different ways. There are other shapes you can try to print using loops in Java. For an extra challenge try inverting the pyramid. Have fun and happy coding. 😎

Sending Better Data With Rails Serializers

Raymundo Alva — Wed, 03 May 2023 05:00:01 +0000

Using Ruby on Rails as an API is awesome because of its render :json method. The only problem is that many times the JSON data may contain many unnecessary things. We want more options to customize the data and we can do that using serializers. We can use serializers to format our JSON by selecting only the data that we really need as well as get access to model relationships. Let’s get started.

In this example we can imagine that you want to query a list of Pokemon and their trainer from your database. Let’s create two models.

$ rails g model Trainer name:string age:integer  
$ rails g model Pokemon name:string poke\_type:string

After that we want to set up our model associations.

ext we have to set up our controllers.

$ rails g controller pokemons  
$ rails g controller trainers

This will be our controller for Pokemon.

And this will be our controller for trainers.

Now we have to define our routes like so.

Now we can run the migrations and seed our database with these commands.

$ rails db:migrate  
$ rails db:seed

Now that everything has been set up we can make a GET request to query a list of all the pokemon in our database. Without a serializer this is what our data is going to look like.

You can see that we have some information that we really don’t need. There is no need to know when the pokemon were created and updated. It would be nice to hide this information. Something else is that we only get an integer for the trainer_id. Each pokemon has its trainer but we don’t really get any of the trainer’s information other than the id. Let’s get this data looking better. First add the serializers gem to your gemfile

$ gem ‘active\_model\_serializers’

after that bundle install and you will be able to generate serializers very easily. Go ahead and run this command.

$ rails g serializer Pokemon

This will create a folder called serializers inside of your app folder with a pokemon_serializer.rb file in it. This is where you can add the attributes that you want to be shown in your rendering. For a pokemon we want the name, trainer_id, and type to show up so the serializer will look like this.

After you do a GET request the data you see will look like this.

This looks great! We don’t have the created or updated attributes showing up anymore. Each pokemon has a trainer but we don’t have any information about the trainer. We want to be able to show more than just the id so in our serializer we will change it to look like this.

Finally our data will look like this.

That is all! Using serializers is really easy and a very good way to customize the data that you are rendering. Try using this on your API and let me know what you think. Happy coding! 😎

Understanding JavaScript Closures

Raymundo Alva — Wed, 03 May 2023 04:48:56 +0000

Today I am going to talk about a very confusing but fundamental topic in JavaScript programming. I had a hard time wrapping my head around JavaScript closures. After a very painful interview question on this topic I decided to really try and understand closures and why they can be useful. I will also do my best to explain it in a clear way. Let’s get started.

So what is a closure? A closure is a function bundled with references to its surrounding state. In clearer terms we could say that a closure is a function inside an outer function that has access to the outer function’s scope. The closure has access to its own variables, the outer function’s variables and the global variables. Just reading this might not make much sense so let’s look at an example.

We have two functions here. The outer function has a variable named ‘a’ and returns the inner function. The inner function has a variable named ‘b’ and accesses the variable from the outer function. After that we save the results of the execution of the outer function into a variable ‘myFunc’. That means that ‘myFunc’ is now holding the inner function. When executed we actually get the sum output on the terminal. Why? At first it might not make sense that this code actually works. In other programming languages, the local variables within a function exist for just the duration of that function’s execution. You might expect that after the outer function executes the ‘a’ variable would no longer be accessible. This is not the case in JavaScript thanks to closures. A closure is the combination of a function and the lexical environment where the function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. This feature of JavaScript allows code like this to run. Things get a lot more interesting when these functions start taking arguments. Let’s take a look at an example.

Closures let you associate data with a function that operates on that data. This can be compared to how in object-oriented programming objects allow you to associate data with methods. As you can see we can save the closure into two different variables and the operation on different values. Even though the outer function already ran the environment within it is still accessible to the inner function because it was saved in memory. The environment is stored by the closure for its own later use.

I hope this will help anyone out there understand the basics of closures. It is a very interesting topic and there is still many more things I need to learn about it. Practicing with them will only help more. Questions about closures are frequently asked during interviews so it is very important to understand this concept in order to ace the interview. Happy coding! 😎

Vim Tutorial

Raymundo Alva — Wed, 03 May 2023 04:34:22 +0000

Vim is a text editor that is included in Unix-like operating systems. It is known for being fast and efficient because it is a small application that can run in a terminal and because it can be controlled completely with your keyboard. There is no need for any menus or the use of a mouse. So why use Vim? Well if you are a programmer you will find that moving your hand to your mouse and to the arrow keys can sometimes kill your flow and slow you down. Vim can help you edit large amounts of text in fewer key strokes than other editors. If you are a programmer or a linux enthusiast you will find yourself using a text editor a whole lot. I am going to show some of the commands needed to get started using Vim.

Vim is focused on changing existing text as much as adding new text. That makes it different from other editors. Because of this Vim has different modes that allow you to do different things.

Normal Mode

By default Vim starts out in “Normal Mode”. To access this from a different mode we use the Esc key. In normal mode key presses don’t behave like in other text editors. Instead of inserting text you can navigate the text file.

Moving The Cursor

h key moves left
j key moves down
k key moves up
l key moves right

This is the main way to move the cursor around. It might be a little weird but this way allows you to keep your hands on the keyboard. With many Vim commands you can add a number to the command and it will repeat. For example, if you type 5j the cursor will move down five lines. If you type 6l the cursor will move 6 spaces to the right.

You can also move to the beginning/end of the line

0 will move the cursor to the beginning of the line
$ will move the cursor to the beginning of the line

This mode also allows you to make some changes to single characters.

x will delete the character that is currently selected by the cursor
r will replace the selected character with a new character

In this mode we can also undo and redo changes.

u will undo changes
Ctrl +r will redo (undo your undo)

Insert Mode

Insert mode will be the most familiar mode. This is where typing will insert text, just like any other text editor. You can access insert mode by using one of a few available insert commands.

i will immediately switch you to insert mode
I (capital) moves the cursor to the beginning of the line and enters insert mode
a stands for ‘append’ and will move the cursor to the end of the current word and enter insert mode
A will move the cursor to the end of the line and enter insert mode
o inserts a new line below the current line and enters insert mode on the new line
O inserts a new line above the current one and enters insert mode on the new line

There are also other ways to enter insert mode but these are the most common ones that will get you started. Remember that to get out of insert mode back into normal mode you can use the Esc key.

Visual Mode

Visual mode is used to select text, just like you would when dragging with your mouse. When selecting text we can allow commands to copy, delete, or replace the selection. In order to make a text selection we have to press the v key to enter visual mode and create a starting selection point. After that moving the cursor to the end selection point will highlight your text.

v will enter visual mode
V will enter visual mode and make text selections by line

Command Mode

Command mode has a wide variety of commands that we cannot use in normal mode. To enter command mode we type “:” from normal mode followed by a command. You will be able to see the command at the bottom of the screen. It is a popular joke that people sometimes accidentally enter vim and then don’t know how to exit the program. There are many ways to quit Vim but we can easily do it in command mode.

:q! will quit Vim without saving changes
:wq will quit Vim and save changes

Vim has many other commands that you can get from the documentation with the help command, :h or :help.

Replace Mode

In replace mode we can replace existing text by directly typing over it. Move the cursor to the character you want to replace and by pressing R (capital r) you will enter Replace Mode. Now whatever you type will replace the existing text. It is very similar to how it will be in insert mode. The difference is that the text is replaced instead of having text added.

This is all you need to start practicing Vim and editing text. Maybe at first it will be very confusing and sluggish to type on but after some time you will see that this way of typing will really make you more productive. If you want to learn more about using Vim you can open a terminal and type vimtutor to have access to some Vim lessons that should only take about 30 minutes to learn. If you want to learn Vim in a fun way you can also visit Vim Adventures. This is a web based game that will help you learn use some of the most useful Vim commands. Have fun with Vim and happy coding! 😎

React Hooks: useEffect

Raymundo Alva — Wed, 03 May 2023 04:33:05 +0000

Last time I wrote about the useState hook so now I will explain what the useEffect hook does in React. The useEffect hook was developed to address some of the challenges posed by life cycle methods of ES6 class components. If you understand life cycle methods from class components, this hook is equivalent to life cycle methods componentDidMount, componentDidUpdate and componentDidUnmount. I will use an example that will show how hooks can take the place of these lifecycle methods.

First of all let’s take a look at what useEffect looks like. This hook is a function that takes in two arguments. The first is a callback with the side-effect logic inside of it. The second is an optional array of dependencies. The useEffect hook executes the callback only if the dependencies change between renderings. This allows you to control when the side-effect runs. Let’s look at what the dependencies look like and what they do.

If you don’t provide a dependency array the side-effect runs after every render.

If you provide an empty array the side-effect runs only after the initial render, similar to componentDidMount.

If you provide a state or prop value in the array the side-effect runs every time the dependency changes, similar to componentDidUpdate.

Let’s do an example with a simple program. My component will have a button that will increment a counter. After the counter reaches a certain number the document’s title will change. First let’s set up the component with the minimum. It will have a state for the counter and a handler function.

As you can see I have a useEffect function already on this component. On the components initial render ‘Mounted’ is logged on the console. When the button is clicked the number increments by 1. Perfect now let’s say we want to console log something every time the component renders but not on the initial render. The best thing about hooks is that you can have multiple ones in the same component. I will have some conditional statements to control when the effect runs. It will look like this.

I created a variable set to false that will prevent the effect from firing on the first render. After that every time the counter is incremented you will be able to see that the console prints correctly. This is because this hook did not have a dependency argument so it renders every time state changes. Now let’s implement a filter that will change the document’s title after a certain number is reached in the counter. For this I will have to use another state hook and set another conditional statement.

Now when the counter reaches 11 the document’s title is updated. This is because once the condition is met the filter state value is changed to true and the hook executes. There is one more thing we can do with useEffect. Some side-effects need cleanup, like clearing timers. If a callback returns a function then the hook will consider this as an effect cleanup.

You will see that the cleanup will run after every render. This is similar to what you can do in class components with componendDidUnmount.

I had a lot of fun learning this hook. This is one of the most important hook and also one of the trickier ones. After some practice with it though, it makes so much sense. Well, that is all for useEffect. Happy coding! 😎

React Hooks: useState

Raymundo Alva — Wed, 03 May 2023 04:24:49 +0000

I love React hooks but I know that for beginners they can be a bit confusing. I remember when I first started learning them it was kind of hard to wrap my head around them. Hooks let you use state and other React features without having to write a class. They were introduced because classes can be confusing and larger components can be a bit harder to understand. The first hook I will be going over is useState. This allows you to use state in a functional component. Let’s get started!

To explain hooks I will use an example code that increments and decrements a counter. My starter code looks like this.

Right now clicking the plus or minus button won’t do anything. We need to implement the hook to allow the use of state in our functional component. One thing to know is that we cannot use React hooks in class components. Another important thing to know is that hooks should always run in the same order. That means that they cannot be written inside of conditional statements. If you do this you will get an error telling you that a React hook will let you know that a hook is being called conditionally. To use a useState hook we need to call the useState function passing in the initial value of your state. The useState function always returns an array with two values so it is commonly seen that the arr is going to be de-structured. The first value is going to be the state, which can be called whatever you choose. The second value is going to be the setState function which is going to allow you to update your state. Let’s implement that into our code.

In order to start incrementing and decrementing the counter we have to write a couple of functions that will update the state of the counter. Then we can set those functions up so that they run every time the corresponding button is clicked. Here is what that looks like.

The only thing is that this is actually the wrong way of updating the state. Instead of updating count we need to be passing in a function that takes in the prevState. Just like in class components we can pass the previous state in the function so that we can correctly update the state. This is because we are trying to update the previous state to create a new value for our current state. Check it out and you will see that clicking the buttons will still change the counter correctly. This is what the code looks like.

That is all for our counter functionality. Some other things to know about hooks is that setting the initial function can take in a function so that it will only run once when the component is rendered. This will make your application run faster depending on what kind of state you are using. Also the best thing about hooks is that we can use multiple useState hooks to keep manage multiple pieces of state. This makes each piece of state a lot easier to manage and change.

That is all for useState. It took me a while to understand it but with practice it makes much more sense and is a lot more fun to use. Next time I will be talking about how to use other hooks and what their benefits are so make sure to keep an eye out for my next post. Now go out there and have fun with hooks. Happy coding everyone! 😎

Rails Self-Referential Relationships

Raymundo Alva — Wed, 03 May 2023 04:17:56 +0000

In a self-referential relationship a class can interact with itself using a join table. While brainstorming some ideas for my new Rails project I found the topic of self-referential has_many, throughrelationships. After reading about it I decided to try it out to see if it would fit what I wanted to do. At first it was a little confusing but after some practice with it, I found that it was very simple. I didn’t end up using this kind of relationship for my project but it was really fun to learn about it. These sort of relationships are very commonly used in social media. Some examples are followers, friendships, messages, and friend requests. I found that the messages example was the easiest to understand.

How It Works

Let’s create a users table. We want this user to be very simple for now so it will only have a name.

# db/migrate/001_create_users.rbclass

CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.text :name
      t.timestamps
    end
  end
end

Next we will create the messages table. This will serve as the join table. through which the users can interact. We will give them a sender_id and a recipient_id along with the message’s content. the sender_id and recipient_id are both ids that belong to the User table.

# db/migrate/001_create_messages.rbclass

CreateMessages < ActiveRecord::Migration[6.0]
  def change
    create_table :messages do |t|
    t.text :message
    t.integer :sender_id
    t.integer :recipient_id
    t.timestamps
    end
  end
end

Now we have to work with our Message Model. We are going to tell the model that it belongs_to two both a Sender and a Recipient. Even though they come from the same class they have different foreign_key names on the messages table.

# app/models/message.rbclass

Message < ApplicationRecord
  belongs_to :recipient, class_name: "User", foreign_key: "recipient_id"
  belongs_to :sender, class_name: "User", foreign_key: "sender_id"
end

We will now set the other end of the relationship in our User model. We are telling the model that it has_many received messages and has_many sent messages.

# app/models/user.rbclass

User < ApplicationRecord
  has_many :received_messages, class_name: "Message", foreign_key: "recipient_id"
  has_many :sent_messages, class_name: "Message", foreign_key: "sender_id"end

Let’s seed the database and mess around with it.

# db/seed.rb

User.create(name: "Ray")
User.create(name: "Joe")
User.create(name: "Bob")
Message.create(message: "Hey", sender_id: User.all.sample.id, recipient_id: User.all.sample.id)
Message.create(message: "Hi", sender_id: User.all.sample.id, recipient_id: User.all.sample.id)
Message.create(message: "Yo", sender_id: User.all.sample.id, recipient_id: User.all.sample.id)

On the console.

2.6.1 :001 > ray = User.first
(0.5ms) SELECT sqlite_version(*) User Load
(0.2ms) SELECT "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT ?  [["LIMIT", 1]] => 
# <User id: 1, name: "Ray", created_at: "2020-10-06 07:15:35", updated_at: "2020-10-06 07:15:35"> 2.6.1 
:002 > joe = User.secondUser Load (0.3ms)
SELECT "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT ? OFFSET ?  [["LIMIT", 1], ["OFFSET", 1]] =>
# <User id: 2, name: "Joe", created_at: "2020-10-06 07:15:35", updated_at: "2020-10-06 07:15:35"> 2.6.1 :003 >
bob = User.last  User Load (0.3ms)
SELECT "users".* FROM "users" ORDER BY "users"."id" DESC LIMIT ?  [["LIMIT", 1]] =>
# <User id: 3, name: "Bob", created_at: "2020-10-06 07:15:35", updated_at: "2020-10-06 07:15:35">

User’s received messages.

2.6.1 :012 > ray.received_messages.first.message
Message Load (0.2ms)  SELECT "messages".* FROM "messages" WHERE "messages"."recipient_id" = ? ORDER BY "messages"."id" ASC LIMIT ? [["recipient_id", 1], ["LIMIT", 1]] =>
"Hey" 2.6.1 :013 > bob.received_messages.first.message  Message Load (0.2ms)  SELECT "messages".* FROM "messages"
WHERE "messages"."recipient_id" = ? ORDER BY
"messages"."id" ASC LIMIT ?  [["recipient_id", 3], ["LIMIT", 1]] => "Yo" 2.6.1 :014 > joe.received_messages.first.message  Message Load (0.2ms)  SELECT "messages".* FROM "messages" WHERE "messages"."recipient_id" = ? ORDER BY "messages"."id" ASC LIMIT ?  [["recipient_id", 2], ["LIMIT", 1]] => "Hi"

User’s sent messages.

2.6.1 :020 > bob.sent_messages.first.message  Message Load (0.2ms)  SELECT "messages".* FROM "messages" WHERE "messages"."sender_id" = ? ORDER BY "messages"."id" ASC LIMIT ?  [["sender_id", 3], ["LIMIT", 1]] => "Hi" 2.6.1 :021 > joe.sent_messages.first.message  Message Load (0.2ms)  SELECT "messages".* FROM "messages" WHERE "messages"."sender_id" = ? ORDER BY "messages"."id" ASC LIMIT ?  [["sender_id", 2], ["LIMIT", 1]] => "Hey" 2.6.1 :022 >

That is all! Make sure to mess with different kinds of models so that it is a little bit easier to understand. I am sure there are many ways to have fun with this relationship. Happy coding! 😎