DEV Community: wgotterer

React Native Cookie Guessing Game

wgotterer — Wed, 09 Feb 2022 01:11:31 +0000

Description

Using React Native I aimed to create an IOS and Android compatible app that lets a user play a game, How Many Cookies In The Cookie Jar, with the computer in which the user picks a number and the computer has to guess which number the user picked. Below I have created various videos where I aim to explain the functionality of the application by diving into the code.

GitHub repo --> https://github.com/wgotterer/react-native-number-guessing

General Walkthrough

App.js Walkthrough

StartScreen.js 1 Walkthrough

StartScreen.js 2 Walkthrough

GameScreen.js Walkthrough

https://youtu.be/GXsFTVds43A

GameOverScreen.js Walkthrough

Resources

https://www.udemy.com/course/react-native-the-practical-guide/

https://reactnative.dev/docs/getting-started

10 Things I’ve Learned One Week After Graduating a Software Engineering Bootcamp

wgotterer — Tue, 18 Jan 2022 14:57:01 +0000

During interviews, use the STAR method, “Situation, Task, Activity and Results”, when answering behavioral questions
Practice and record yourself answering interview questions
Make your previous experiences relevant to what is needed in the sought out role
If there is a technology or framework listed in the “Skills” section of your resume, you should know it well as it’s fair game in the technical interview
Don’t immediately ask for something when cold messaging recruiters or developers. Build rapport first, then ask for something.
As a junior dev coming out of a bootcamp, don’t focus on algos, unless you're applying to a big company, for interviews. Get really really good at your stack instead.
If you get a rejection email, politely ask for feedback to know how to make yourself a better candidate
Getting a junior dev role is a lot like the stereotypical dating in college. You may not be the best looking, but if you are in the right place at the right time you might be the one! You may not be highly skilled as a developer, but there are so many other strengths you can bring to the table that could prove you’re a good fit!
Radiate positivity
Don’t be afraid to say “I don’t know”
BONUS: I can't wait to land my first dev role and be able help everyone that is in my current situation as much the devs that I've reached out to have helped me. The amount of stress and uncertainty that comes with this process is often difficult to handle. I guess one can only trust the process, listen to Miguel's "Pineapple Skies" to cheer up, and keep putting in work.

Get Swole: The React/Rails Workout App

wgotterer — Mon, 13 Dec 2021 17:04:00 +0000

In this blog I aim to give a detailed overview of what is happening behind the scenes in this application by first giving a walkthrough of the apps functionality and then looking at the code of both the Rails backend and React front end.

Demo the app here --> GET SWOLE

The full code on Git Hub can be found here

The front end is in the "client" folder

General Overview

Backend Rails Overview

Login Overview

Dashboard Overview

Online Classes Overview

Private Classes Overview

Trainer Overview

Monster Code: An application made with React, Ruby, SQLite, Sinatra and Active Record

wgotterer — Mon, 22 Nov 2021 17:34:55 +0000

In this blog one can get a more in depth analysis of the application my team made for our phase 3 project in the Flatiron School's software engineering bootcamp. React was used for the front end while Ruby, Active Record, Sinatra, and SQLite were used for the back end.

Application Overview

Front-End Login Page Overview

Front-End Level Page Overview

(update: When speaking about state "questionNum" in the "handleSubmit" function, I misspoke. What I should be saying is that we update the level if "questionNum === 2" because there are 3 questions and therefore indices 0-2. At the moment you submit the question with an index of 2 the level will be updated.

Front-End High Score Page Overview

Additional Thoughts On React

Backend Overview

To checkout the code more in depth, below are the links to the front and back end repos on Git Hub.

https://github.com/wgotterer/project-react-3

https://github.com/wgotterer/phase-3-sinatra-react-project

Creating Tables and Associations using Ruby/Active Record/Rake

wgotterer — Wed, 17 Nov 2021 18:46:55 +0000

This blog is written to help beginners take their first steps in creating a database using Ruby, Active Record, and Rake. Before all this can happen one needs to create the skeleton of each table and how they will be associated to one another. We will start using the "entity relation" table in https://app.diagrams.net/.

Imagine we are currently building out the backend for a social media music website and want to collect certain data and have access to this data through other pieces of data. Our tables let us visualize this. We see two arrows pointing from the fans' table's unique id and the musicians' table's unique id to the musicianfans' table. A third arrow is seen pointing from the bands' table's unique id to the musicians' table. With this in place we can visualize how we will write our association methods.

In our example the fans table has and arrow signifying that a fan has many musicianfans. But what is the purpose of the musicianfans table? Its purpose is to allow a fan to have many musicians through the table and a musician to have many fans through the table as well, serving as a join table. A join table contains data from two or more other tables. Thus, a many to many relationship is created between the data. Our join table also has data from the musician table, meaning a musician has many musicianfans and has many fans through musicianfans. In our join table, a musicianfan belongs to a fan and to a musician. Looking closer at our musicians' table, we can also deduce that a musician belongs to a band due to it containing a column holding the band_id. Lastly in our bands' table, a band can have many musicians and many fans. These associations will allow us to move throughout our database with ease.

I like to first build out the migration tables. To do this we can use the Rake tasks in Ruby. If you ever want to see a list of the tasks you can perform, use rake -T in your terminal. From there I made three migrations using rake db:create_migration NAME=create_fans. The next three I substituted "fans" for "musicians", "bands" and then "musicianfans". Keep in mind that it is best practice to use the plural form as a name. After each migration is created we then build out our tables. Using our table picture from before is a great reference point to add in our columns. Once everything in our tables have been written we can migrate everything using rake db:migrate. Our empty tables are now created. From here one can start working on their associations.

In this example I created three model files that will inherit Active Record and allow us to create our association methods.
Again using the initial brainstorming picture of the tables will be a good indicator for which Active Record associations we will use for each model. Some things to watch out for. Make sure your has_many associations are plural and belongs_to are singular. They won't work otherwise. Also, make sure your "has_many through" associations are created under the others as they rely on the association that comes before it. In the example above, the order of associations in the Band model matters. "has_many :musicians" needs to come before the "through" association below it or the association won't be read. We now can move on to making our seed data.

Creating a seeds.rb file allows one to visually see how your association methods work in action. In the example various instances of fans, bands, and musicians are created. The fan and band instances are set to variables so we can assign the musician instances' id keys a value pertaining to the unique id of the fan instance and band instance. Once we have our data we use the Rake task rake db:seed. At this point our tables that we have migrated are now populated with our seeds data. We will test this out in a moment. But fist, drawing one's attention to the top of the seeds picture one can see that the ".destroy_all" and ".reset_pk_sequence" method are being called on each class. What this does is it allows us to mess around with the seeds data, updating and deleting instances, without having to worry about duplicate data or ids changing when we re-seed. Great for trying things out in the beginning. This is thanks to a gemfile. Install gem install activerecord-reset-pk-sequence -v 0.2.0 in the terminal and then add gem 'activerecord-reset-pk-sequence' to your gemfile. Make sure the gem is pasted at the bottom as the the order matters here as well.

Now is the moment of truth. We want to test out to see if all our association methods are working.

In the above picture we are testing to see if our Band's model's associations are working. To get into the console use the task rake console. From here we can see that calling the .all method on the class of Band shows us all of our band instances within an array. Moving downward I create a variable "band" to signify just one band. In this case it's the first band instance within the array. Creating this variable provides us a cleaner way to move throughout the process. Let's test our first Band association, has_many musicians. As we can see it works! Moving down when the "fans" instance method is called on our band variable we see all the associated fans.

Always remember that these associations are instance methods! musicians, fans, bands, band, musicianfans, and fan are all instance methods that we call upon... instances!

Let's test our other associations! In the pictures below I do something very similar to the previous test. I am looking through my model associations and testing them on an individual instance of that particular model.

Testing Fan

Testing Musician

With everything we have gone over in place, we now have a good platform to begin other endeavours such as creating custom Ruby/Active Record methods or your own API!

Beginner’s guide to JavaScript’s map()

wgotterer — Thu, 04 Nov 2021 12:13:03 +0000

What is a map() function and how do we use it? Let’s use a Spongebob analogy to unpack what it does.

In this episode, Spongebob, Patrick, and Mr. Krabs go on an adventure to find the Dutchman’s treasure. The three rely on a map to get to their destination. This is a good start. A regular map outlines the terrain of the real world, gives us a copy of the features that exist, and we can arrive at different end points depending on the path we take. Our map() function takes on similar characteristics, hence, “map”().
W3schools defines a map() as

— a method that creates a new array with the results of calling a function for every array element

— a method calls the provided function once for each element in an array, in order.

— a method that does not change the original array.

Let’s delve into what this means using an example:

In the above example we have an array, “numOfKrabbyPatties”, that shows the amount of Krabby Patties we can imagine Mr. Krabs, Spongebob, and Patrick having at the beginning of their treasure hunt. Next, the variable, “leftoverPattiesArr”, is created to represent what happens to the Krabby Patties of each character after a certain amount of time. In this case 3 are eaten by each character.

If we take a look at the value of “leftoverPattiesArr” we can see that we are taking our “numOfKrabbyPatties” array and using the map() function on it. The map() function inherently calls on EACH item in the “numOfKrabbyPatties” array, but we need to tell it what we want it to do with the “numOfKrabbyPatties” array. This is where the function “hungryCharacters” play its role. It gives the map() some guidance. Just like our three characters traversing the ocean floor to find the “X” on the treasure map, our “hungryCharacters” function is similar in that it provides the trail the array must follow to get to its new end point.
Taking a closer look at our “hungryCharacters” function, one can notice that a parameter, “patties”, is set. Wrapping my head around what this parameter does was a little challenging at first. Alas, with the help of Spongebob and his friends, anything is possible! Remember that the function is called once for EVERY element in the array.

What is happing when we invoke “leftoverPattiesArr” is the map takes the first element in “numOfKrabbyPatties” and passes it through our function. In our case 12 Krabby Patties becomes the “patties” placeholders, and the subtraction (12–3) is performed. Again, the inherent property of the map() is to now take the second element of “numOfKrabbyPatties” and follow the same path. The second element is 6, therefore as it moves through the function it, for the time being, replaces the “patties” placeholders. Thus performing (6–3). The same process repeats for the last element in our array as well. Finally, we have a non-destructive process that keeps our old array, “numOfKrabbyPatties”, in tact while providing us with a new, manipulated array, “leftoverPattiesArr”.

As we navigate with our map, what gets altered is how we exist within that terrain. We are, in other words, making changes to our relationship with our map. One minute we are at point “a” and some time later we are at point “b”. Similarly, in our example the Krabby Patties are being manipulated as they move through their map() terrain. At the so called beginning, point “a”, of the map() they are one way and by the end, point “b”, another.

Let’s dig a little deeper!

We don’t always deal with arrays that are that simple. Let’s take a look at one with some objects inside. If you aren’t familiar with the Spongebob episode being referred to throughout this article, you should know that the three get into a small quarrel regarding the treasure after it’s found. Their commotion wakes the ghost of The Flying Dutchman and he is subsequently angry. For the purpose of this example, let’s say that he takes back his treasure chest and gives each of our characters 1 gold coin.

We want to express this by creating sentences with the new information we have. Below you will see “characters”, an array of 3 objects containing 2 key:value pairs. Our function “getTreasure” will be invoked for every object in our array. In this case 3. Similarly to our previous example, the parameter, “oneCharacter”, is a place holder for each entire object. For example, the first iteration would take {name : “Mr. Krabs”, treasure: 0} and pass it in as the new temporary placeholder. At this point, between the curly braces “{}”, is where we say what we want to do with this object. In this function we are saying we want ${oneCharacter.name}. “OneCharacter” being the placeholder for each object iteration within the array. We then want to grab the value of “name” to begin our sentence. This is interpolated using back-ticks at the beginning and end of the return statement. Then putting our variables between ${}. This allows us to incorporate stringed elements such as “has” and “piece of gold!”. We interpolate a second time using ${oneCharacter.treasure + 1}. Just like the previous interpolation, our “OneCharacter” is the placeholder for each iteration over the objects. We then grab ahold of the “treasure” key in order to get its value. Finally we add 1 to the value. As a final result one can see that characters.map(getTreasure) gives us a new array of three different strings! Remember, our initial array of “characters” was not changed because map() is non-destructive.

References:

https://www.w3schools.com/jsref/jsref_map.asp

Passing Props And The Power Of The Callback In React: A Bedtime Story

wgotterer — Fri, 29 Oct 2021 12:52:20 +0000

Many moons ago, in the not so distant future, lived the most powerful dragon to fly over this land. However, there was a time before this imminent future in which The Dragon Queen was becoming old and fragile, hardly able to cough out a puff of smoke from her horrendously chapped mouth. This all changed when, one day, her trusted servant, Hasty Hog, mentioned the whereabouts of some underground fungi that could restore her health. The Dragon Queen sent Hasty Hog on a quest to sniff out these fungi, gather all he could, and return back to her as fast as his little wings could flap.

Passing down props in React from a parent component to a child component and then invoking a callback in the child…
is an incredibly powerful tool that allows one to send information from a child component back to a parent component so it can utilize the information.

Delving into the code we can see that DragonQueen is our parent component and HastyHog is its child. In the DragonQueen component we are setting two states for queenPowers and queenFirePower. In the return statement we have two divs in which the two states will render a number depending on what the state is set to. Initially The Dragon Queen is very weak and when looking at the browser picture above, one can see her omnipotence is equal to 2 out of 9 (9 being the strongest) and her fire power is equal to 3 out of 9. She is tired of being decrepit and thus sends Hasty Hog off on his quest with some information. That information being what The Dragon Queen wants changed. In her case she wants her omnipotence and power to increase. In other words, The Dragon Queen wants to update the state of queenPowers and queenFirePower to a higher number. This information is crucial for Hasty Pig to know as it would be a disaster if he came back with some fungi that, for example, gave her food poisoning! We can be assured Hasty Pig will know what fungi to gather as the two functions handling state, handleOmnipotence and handleFirePower, are passed down as props to the HastyHog child component.

In the HastyHog component, in order for the Hasty Hog to keep ahold of what he needs to do, the “handle” functions need to be passed down as parameters. Let’s now dive snout first into our return statement where Hasty Pig will actually be gathering the mystical fungi. We have two inputs that can hold a number value. Hasty Hog gathers the powerful mushrooms for The Dragon Queen and needs to find his way home. How is that possible?!?! The route home is provided to us by the call-back function with a parameter of “e.target.value” inside the Onchange event. The call-back function is the key to having Hasty Hog return and restoring The Dragon Queen’s powers. Let’s take a closer look at what is happening in the call-back functions’ parameters. Each function is taking the value, whatever number is typed in, of the input field. If we then scroll up to our picture of the DragonQueen (parent) component we can see that both of our functions have parameters, or place holders. One being omnipresentPowerFromHogQuest and the other firePowerFromHogQuest. These again are just place holders for what is being passed up from the child component. In this example the two place holders become the “e.target.value” being passed up by HastyHog’s callback functions. At this point The Dragon Queen has her powerful fungi and due to the “e.target.value” being set to state in her component the numbers update and she regains her powers!