Forem: aiodell

Java: Display Simple Arrays

aiodell — Sat, 22 Oct 2022 15:46:49 +0000

Part 1 of my data structure journey.

This is serving more as personal notes for myself to grasp my understanding of each topic on at least a basic level, but I am also sharing in case there are people who are going through the same learning process as I am!

This is going to be something really simple and is not meant to be any more than creating and looping through an array to display no the console.

All of my code and comments for myself are found in the GitHub repo. My full notes are in the readme file.

Arrays are the most basic data structure people can work with. They are defined by placing square brackets [ ] after the data type, followed by the name of the variable. There are two different ways that I have created an array.

For the examples, I will be creating an array of strings. One way to initialize an array is to state the length of the array like so

String[] names = new String[3];

By doing this, I know my array is going to have a length of 3. I can manually add the information from there and specify which index want to use for which information.

names[0] = "Avery";
names[1] = "Otto";
names[2] = "Emily";

Another way I made an array was to immediately place data inside the array. It has the same length as the other one, but I placed everything in one line.

String[] moreNames = {"Paul", "Fred", "Harold"};

If I had wanted to select a specific element I would have used the array name and index. In this case I wanted to display the entire array.

Display the Array

For displaying the array, I will show two different ways: for-each and for loop. They give the same result, but I want to show the approaches to both.

For-each
Because of the simplicity of the array, I feel like I would personally use this loop to display what I need. The format for the for-each loop is this

for(String name : names){
  System.out.println(name);
}

A way I did to remember the for-each loop was to say "for each name in the names array". The array will print each element on separate lines.

For Loop
The for loop was more tedious but was good to practice for when things become more complex in the future. The format is this:

for(int i = 0; i <= moreNames.length -1; i++){
  System.out.println(name);
}

It will result in the same thing. To explain the loop:

The first statement will execute one time before the execution of the code block.
The second statement is the condition that determines if the loop ends or continues.
The third statement is executed every time after the code block. It will not execute once the condition is no longer true.

Extra: Integers and Array

I thought it would be good to get a feel for iterating through integers rather than strings.

I made this array:

int[] nums = new int[]{1,5,7,8,3,4,0};

and created the for loop like so:

for(int i = 0; i < nums.length; i++){
  nums[i] +=1;
  System.out.print(nums[i] + ", ");
}

I wanted to do something a little extra with my looping by adding 1 to each element before printing. The for loop is the same, but has nums[i] +=1; before the print statement. += 1 is the same as num[i] = i + 1;. so with each loop through the elements, i is increased by 1 and updated within the array.

How about finding the sum of the integers? I will leave that to you! One thing to remember is that the array was already looped through once, and we did add 1 to each integer!

Thank you for your time!

Personal Thoughts: Java Used To Intimidate Me But Not Anymore

aiodell — Thu, 20 Oct 2022 01:33:55 +0000

These last few months have been a roller coaster of emotions and mind explosions, but I am taking the time to reflect on what I have learned and experienced going through the Flatiron School Experience.

One of the items I reflected on was my feelings about learning programming languages. As someone who took a temporary leave to pursue the software engineering bootcamp instead of a degree (I have no regrets doing that), I learned a lot more through the program than I did when I was taking the required university programming courses.

Before completing the program, I was terrified of continuing my degree because I felt like I was going to get the degree and be completely lost. Honestly, I still feel a little lost but that is because of imposter syndrome setting in. However, I feel more confident now than I did before. I feel like I am going to continue and continue strong.

Where does Java fall into this?

I mentioned Java in the title, but not in the introduction. Though, I did mention it a little. It was the programming language that I was required to learn at University. I had to take two courses called programming 1 and programming 2. One focused on OOP and the other on data structures. I was so terrified of Java, and the assignments that were given did not seem clear on what they wanted me to do (clarification did not help either).

I thought this was how the real world was going to be like. I could never remember anything and learned nothing (or so I thought). I wish I could have told past me it was going to be okay. It turns out, I am just a bad test taker.

Not only am I a bad test taker, but reading 40+ pages a week on a programming language, and doing an assignment with code that has little to no comments is not the best approach for me. Speaking of comments, I was told comments were important to get other people to understand what you are doing with the code. I have experience getting confused on code because I have no comments to explain what is happening and I have to go through the code to see what I am working with.

Because of this experience, I was afraid of learning any other language. However, Flatiron changed my views on that. I said it before and I will say it again! I feel like I can learn anything after going through the program. It helped me discover what the best learning method is for me, and now I can utilize it in my own learning.

I'm Coming Back To You, Java!

I went back to the fundamentals of Java, as that is how I am used to starting my learning process. I realized that I did learn a lot, but somehow traumatized myself into thinking I knew nothing and suppressed that knowledge into an unknown place in my brain. Majority of it was review and me wondering why I thought even basic Java was difficult.

I began my OOP journey with inheritance, encapsulation, polymorphism, and abstraction. I have no idea why I thought that was hard either. It is still something that I need more practice in, but it is not completely confusing to look at it anymore. In fact, I am more than happy to see that it makes organizing code easier and maximizes the functionality of my code.

I am now beginning the data structure topics in my re-learning Java journey. Now that I am here, I feel like it is important for me to document my learning to reference and update it in case I forget or want to make the code that I will be creating for myself better.

The future blogs will be a combination of personal thoughts and specific topics I learn throughout my data structure journey. They will be based on my own understanding of the topic, so if there is a better way to tackle the topics I discuss, I will always be all ears!

Until next time!

Setting Up An Environmental Variable

aiodell — Tue, 04 Oct 2022 13:28:14 +0000

When I was searching for action mailer setups, everyone talked about environmental variables, but I never saw them showing people how they are set up. They usually mentioned something along the lines of “If you can figure out environmental variables, you are a step ahead of the game”.

Personally, I think they should have been mentioned because these environmental variables are important in keeping your secrets safe from the public, especially when it comes to the username and password for the email you will be using for the mailer.

To set up the environmental variable

In the initializers folder, create a ruby file named something that you will be able to identify as the place for your variables. In my case, I used app_env_vars.rb or application environmental variables for short. In that folder, created the variables to look like this:

These will replace the actual username and password of your account.

Now, if you were to create these variables and push these to a public repository, you would be exposing your secrets to everyone who checks out your code. Git Hub will surely send you and email and scold you in GitHub fashion to inform you that you have been exposing your secrets for (x) amount of minutes and the time will continue to increase until you make these changes. When in doubt, you can always utilize Git Guardian to your advantage. It will inform you of all exposed secrets.

To make sure this does not happen, go into the .gitignore file and paste the relative location of the environment file you have created. This means no one will be able to see your information. The only thing they will see are the names of the variables you created. Mine looks like this:

The environmental variables do not have to apply only to the creation of action mailer as I have shown. For example, if you were to use the devise gem it contains a key within the comments that should become an environmental variable instead. Bottom line, if you are working on something that involves using a key or password or any kind of information that could create a security risk, create that environmental variable.

Time For That Decision!

aiodell — Tue, 13 Sep 2022 13:05:42 +0000

Looking at Software Engineering jobs, I started to question myself on what path I really wanted to take. There have been moments where I have thought to only go front-end, and there have been many times where I have been wanting to just stay in the back end.

These are my thought processes as I continue to look through the job postings!

The Front-End

Having to only worry about what is happening on a visual level sound like an easy thing to handle since there is the design aspect that I have always enjoying doing when creating not only applications, but other projects outside of this, such as interior decorations, banners, logos, etc. It seemed straight forward, and everyone would give me credit for creating something that looks really appealing to the eyes.

What I realized:

Having an attractive user interface is what will keep the customer engaged in viewing the page, especially since the average attention span for a user looking at website is about 8 seconds. I can relate to this, especially when I am looking for specific information.

It is the front-end developer’s responsibility to not only communicate with the back end, but also get the user’s attention within that eight second time frame. This is important if you are working for a company that wants to market a product to the consumer. If they are not happy with the way the application looks, they are going to move on to find something that looks more appealing.

You need to find the balance between creating a functional product and an aesthetically pleasing website. You need to make sure it is compatible to display on all devices and is optimized with accessibility in case you come across someone who cannot read the smaller text in some places or if their computer cannot render the image.

There are also the frameworks that make it easier to create an application, such as React and Angular. At first, they seem intimidating because they are something that needs to be learned again. After going through a bootcamp and learning everything that I have, I feel like I can learn anything at this point.
In the end, I concluded that despite the stress that comes from knowing that other people are going to see what you create, that physical product will always be there and

The Back-End

I had mixed feelings for the back-end because I was not going to be able to make anything look attractive. I was used to seeing everything while I was making it. I thought I was going to become frustrated at the idea of working in the back-end. I also thought no one was going to pay attention to how I am manipulating the data in the back-end to send to the front end except for other programmers and the people who requested the application.

What I realized:

The back-end gave me the ability to manipulate the data that I wanted, and when I was introduced to rails, my inner thoughts timed out for a little bit based on the processing I was doing on how easy everything had become in not just the back-end, but also the front-end. I still got to see it after the data was sent up. The front-end was also sending information back into the database, so it was important for me to make sure my actions worked correctly for the CRUD.
The main thing that got me hooked onto the back-end was the ability to choose what data I was going to send to the front end. The way it was handled in the front end when I had no idea how the back-end worked was a very irritating experience (that is me being nice), especially pulling from the external APIs. I can say am I that person that will continuously get excited when I see the front-end send data to the back-end and have it posted in the database.

So Full-Stack?

After working with both the front-end and back-end, I have realized how fun it is to be able to create the back-end, and then move to the front end to see what I created come to life. I also enjoy seeing things that once were taken care of only in the front-end when I was just beginning, to be now taken care of in the back-end and taking the load off of the front end. It can now be focused on how things will look for the user.

Since I have the knowledge to be full-stack, I might as well go full-stack. At least, that is how I am thinking it…

I think I’m more valuable to the market since I know both ends as opposed to one end. Money is great and all but knowing that I can always go from one to the other makes me feel like I will be able to be as involved in a project as possible. Not only that, I think I would be able to help others out more who are just back-end or just front-end. That might be me living in a fantasy world, but I will never know until I find out or someone tells me otherwise!

Migrations and Changes

aiodell — Tue, 23 Aug 2022 01:44:00 +0000

Migrations are just a small part of what Active Record is capable of. Once you get used to how migrations work, your speed in creating these migrations will increase and become muscle memory like all the other lines of code you have created within Ruby.

Creating a Migration

In order to create a migration, we need to enter code that looks like this:

bundle exec rake db:create_migration NAME=create_my_friends_table

If done correctly, this should have appeared in the terminal:

db/migrate/20220822163630_create_my_friends_table.rb

bundle exec is used to ensure that there are no compatibility issues between versions. It is a safer practice to use bundle exec even if you are certain your version is working.

After migrating, you create your table like so:

You add your migration to the database with bundle exec rake db:migrate. It will give you another message that states that the migration was successful. If you did it correctly, you should have seen a message appear showing that the migration was added into the db folder.

After the migration, you should be able to see that a schema has been created for you within the same db directory and can be viewed. You can check the status of your migration with bundle exec db:migrate:status. It will show you which migrations status on whether they are active or not.

There are numbers found in the name of the migration that should not be changed or else you will receive errors. They identify that specific migration and also logs when that migration is made. It becomes useful when working with multiple people who need to trace back to a certain migration.

Making Changes After Running the Migration

Rolling back

If you migrated your table, but realized you need to make a change, you can rollback to the previous migration with bundle exec rake db:rollback. This will change the status from up to down and enable you to make a change. If there were multiple migrations, the most recent one would be removed.

In this case, I did not feel the need to have whether or not I have been talking to my friends. I also decided that there was no need to think about the years of friendship and wanted to add age instead.

When migrating again, we will be able to see the changes go through under the same migration name. The schema also shows this change.

**Note: **If you wanted to rollback multiple migrations, you could use bundle exec db:rollback STEP=<number of migrations back>

Migration methods

Active Record was kind enough to provide us with methods to make changes to our database without needed to completely drop our table and start over again. Here are a list of a few of them:

add_column
add_index
change_column
change_table
create_table
remove_column
remove_index
rename_column

We already have seen create_table when we created our table. I will not go over all of them here in detail, but I want you to be aware of the others that exist. For every example, there will be a new migration. Personally, I like being able to create migrations because I want to keep track of all changes I made to my database. I would rather rollback to a previous migration than have to redo an entire table

Adding Columns

If I wanted to add a column to my current migration without rolling back, I would go through the process of creating a new migration, and name that migration based on what I was doing. Therefore, it would be bundle exec rake db:create_migration NAME=add_phone_number_to_friends_table

After that, the syntax within the migration will be different because we are adding a column. It will be add_column :table_name, :column_name, :data_type. Naming the migration after the table that is being changed helps with organization. I would not want to open up migrations to see where the name of the table appears.

Once you run the migration, it will be updated in the schema and should be placed as the last column.

Removing Columns

If my friends were upset that I placed their age (they would never be they are happy I remember their age but this is just a scenario), I would create another migration to remove the column. I'm sure we know the process of creating migrations for now, so I will show the syntax for removing a column remove_column :table_name, :column_name

If things have been working out for you, the schema will look something like this:

Changing Columns

Even more changes need to be made! We realized we don't want an integer for our phone number, we want a string! We need to once again (and I promise this is the last migration) create a new migration. At least you now are an expert at creating these things! The syntax for this is just as simple as removing and adding columns. change_column :table_name, :column_name, :new_data_type

The final schema should look like this:

If you noticed, the methods all began the same way: identifying the table. This is because without identifying a table, it would not know what table you are looking at. Just because the name of the migration is supposedly linked to the table you are making changes to, it does not mean you are automatically linking the table to the migration. A name is just a name.

Just Drop It

There might be cases where a migration made something irreversible. For instance, you might have destroyed data that no longer can be retrieved, you can always drop the table with bundle exec rake db:drop to drop the entire database and run migrations all over again to the version you desire. However this might become troublesome with larger databases and is probably best to be avoided if possible.

Note on the other methods:

remove_index will remove the given index from the table

add_index will add a new index to the table. Unless you specify, the index will be named after the table and the column name or names (if you added multiple columns each name would be included)

The rename_column method is in a similar format as change column, but where the datatype is located at is now replaced with the new column name: rename_column :table_name, :column_old_name, :column_new_name

change_table creates a block to change columns in a table like so:

Resources:

apidock.com

Migrations

Simply { useState }

aiodell — Tue, 02 Aug 2022 15:56:00 +0000

For all beginners, useState can seem intimidating. For one, you must import it to use it. Thankfully, we do not have to worry about looking deep into what is inside of that import or everyone’s beginner minds would explode. I am here to (hopefully) provide a simple example and a little explanation on what is going on with this react hook useState.

Knowing the rules

First, remember that useState is a React hook. Therefore, it needs to follow these rules:

They can only be called within React function components
They can only be called at the top level of a component
They cannot be conditionals

Second, it is not to be confused with props. Some facts about state:

State can hold data and change over time
The stored data is within components that need to be re-rendered
State can only be used in function components
States can be updated with event handlers

DO NOT forget to import useState into the component before using it like so:

import React, { useState } from “react”;

Do not worry about creating a new line to import it if you are already importing from React. You can separate with a comma, but do not forget the curly brackets or it will not recognize it!

Creating A useState

Create the useState under the component that will be changing states. While you can name the variable anything, it is helpful to name it based on the state that will be changing. In this example, the state change will be the changing colors based on what is checked.

Before thinking about changing const to let, const will be a reminder that the value should never be reassigned in the code. There will always be a single state each change, so there will never be multiple values involved with the state.

The first value, color, is the current state. The second value setColor can also be seen as setColor() since it is the function that will be used for changing the state. The code useState(" red ") is saying that the initial state is going to be the color red. You will see how this works further down.

One more detail about the line of code: Do not worry about having only type string in the initial state. It can be what suits your needs – empty string, Boolean, integer, etc. The main thing to remember is that the result will always be the same type. Do not mistype your state.

Using useState

One example we can use useState is by changing the color of text based on if a button is clicked. This will involve two states. We want the state to change when the button itself is clicked, not the text. This is a perfect example of two different types being used as initial states!

The new state we created is named isClickedbecause we are going to make the color change between green and red each time it is clicked. From a user perspective, they click once and the button changes. They click another time, and it changes to the other color.

From a programmer perspective, we are finding a way to switch between states. In this case, the button is clicked and considered clicked, while the other click determines that it is not (even though we are technically clicking both times). The Boolean allows us to switch between the two states or true and false to make this change.

When including the rest of code, it will look something like this:

Since the button is going to be used to change the text, the button should hold the function. As with the state, we need to name the function based on what the button will be doing. Since it handles the change of colors, we will name is handleColorChange. This will go inside of the component, not outside because it will not be recognized by either the TextColor component or its parent.

When the text is first shown, it will be the state that is the initial state of isClicked which is red. We should see a red text when it is rendered. When clicked, the setClicked function will change isClicked to true, which results in green. Every time the button is clicked, it will switch between the two states. Because setColor is linked to either true or false, this causes the color to switch between the red and green states.

Note: It is important that the if true is set to the same state as what is in the initial state, or it will need to be clicked twice for you to see the change rendered. Because red is false, you are changing the state to true and linking true to red and green to false. This is a small but important detail to remember when making true and false state changes.

Adding into the code. This is where the color variable resides within the code. As the button is clicked, the style will change to the color of the current state. Make sure the event appears on the button and not the text. Otherwise, you will be clicking the text and wondering why the button does not work!

Final Thoughts

If everything went according to plan, then you should have a basic understanding of how useState functions within a component. It is versatile and easy to use once you get passed the intimidation phase. You can use it alongside other React hooks, but I will save that for another day.

Enjoy using states!

Resources:

React Hook Basics
useState Basics
React useState

Scope Matters

aiodell — Tue, 12 Jul 2022 22:53:07 +0000

I imagine all of us have encountered this kind of scenario:

We create some variables in the beginning of our program because we know that we are going to need to use them later in the program like so:

const num1 = 10;
const num2 = 5;
let num3 = num1 + num2;

Great start!

It is time to make the first function for our program. We need to use one of the variables we created as an argument to pass through. We also know that we want to return a specific value and need some extra variables inside the function to help with that.

function myFunction(num1, num2) {
 let product = num1 * num2;
 let ans = product + num3;
 return(ans);
}

When we invoke the function and run it through console.log(), we get this result:

console.log("It returns: " + myFunction(num1, num2));
// It returns: 65

Great! Everything works perfectly! Now what if we wanted to take the ans variable and use it again?

num3 = ans + num1;
// ReferenceError: ans is not defined

This error occurs because the variable ans is only in the scope of the function, not the global scope like num1, num2, and _num3 _ are. When a variable is only in the scope of a function, it cannot be used anywhere else. In fact there are three different types of scope in JavaScript to keep in mind when programming.

So, What Exactly Is Scope?

To make it simple, scope is a fancy term that describes what code can and not see. In the scenario above, the function could see both inside and outside of its code, but the expression outside of the function what was inside of the function. Let me explain in more detail.

In JavaScript, there are three types of scope:

Block scope
Function scope
Global scope

Block Scope

A block scope contains variables that are declared within curly brackets { }. This is seen within if statements and loops, such as for and while. In short, if you see variables declared within curly brackets, they are in block scope. They cannot be accessed by anything outside of the brackets. It will result in the same error we saw above. We can declare a variable with the same name – one within the block and one outside the block and have them not interfere with one another.

if(num1 != num2){
 let fact = "yes";
 console.log(fact);
}
// yes

const fact = "This is fine."
console.log(fact);
// this is fine

However, there is an exception. If a variable is declared with the var keyword, it can be accessed from outside the block. This would mean you cannot declare a new variable with that same name.

if(num1 != num2){
 var fact = "yes";
 console.log(fact);
}
// yes

const fact = "This is fine."
console.log(fact);
// SyntaxError: Identifier 'fact' has already been declared

Function Scope

A function scope is what we saw in the beginning, so there is not much left to add. The variables declared within the function are considered local variables to the function they are declared in and can only be used within the function. Unlike block scope, this pertains to all keywords, not just let and const keywords.

Global Scope

Variables declared within the global scope can be use throughout the entire program since everything has access to it. For example, the three num variables that were previously declared can be used in block scopes or function scopes.

It is useful when you know what variables you want to have as a global variable. For instance, I can have a let keyword for num3 and have it returned by a function. The original value of num3 becomes overridden and remains the same until it changes again.

const num1 = 5;
const num2 = 10;
let num3 = 15;

console.log(num3)
// 15

function add(num1, num2){
 num3 = num1 * num2;
 return num3;
 // 50
}

console.log(num3);
// 50

This also means that if there is a global variable declared as a const, you cannot change the value. If you feel like you are going to be changing the value of a global variable, declare it with the let keyword instead of the const keyword. Better safe than annoyed later!

Now, if you were to declare a new variable inside of a block scope or a function scope, then you would be able to use the same name as the global variable without getting an error.

const num1 = 5;
const num3 = 50;

if(num3 === 50){
 const num1 = "I am my own variable"
 console.log(num1)
// I am my own variable
// ignores the global const variable previously declared
}

console.log(num1)
// 5

When working with the same variable names within different scopes, remember which value you are working with, or you will become confused! If possible, keep the names related to what you are doing with the variable and only repeat the name in a different scope if it is necessary.

Some Final Advice

If you ever end up in a situation where you see ReferenceError and explains that your variable is not declared, think about what scope it is in within the program. Chances are, you simply declared it in an area with limited scope.

The best approach to take it this: If you feel like you will be using a variable in multiple places, it is best to declare it as a global scope to ensure it will be seen by the entire program. Most importantly, do not be discouraged! There is always a solution to the problem!

Resources:

W3Schools: JavaScript Scope

MDN: Scope