DEV Community: John Josef

Creating an application using Ruby & React

John Josef — Mon, 30 Jan 2023 09:09:05 +0000

My partner and I created an application that allows you to view a list of dad jokes that come from the database created using Ruby. I started by forking, then cloning the repository given to me by Flatiron's phase 3 project module which included a majority of the gems required for the project. I had to create 3 models, 2 having a 1-to-many relationship and the other one belonging to those 2 models. I started off creating models for all 3 of them (user, comment, joke) and using Active Record on all of them which had relationships through their hasmany relationships.
joke.rb

class Joke < ActiveRecord::Base
   has_many :comments,
   has_many :users, through: :comments

comment.rb

class Comment < ActiveRecord::Base
   belongs_to :joke 
   belongs_to :user

user.rb

has_many :comments 
has_many :jokes, through: :comments

After that I decided to create seeds for each model to show some data in the seeds.rb file. I decided to implement faker into the model to make some random information to use.
seeds.rb

require 'faker' 
I18n.reload! 
#reset seeds file 
User.destroy_all
Comment.destroy_all
Joke.destroy_all 

#create 20 random usernames
20.times do 
   User.create(username: Faker::Name.name, password: 'password')
end

#create 80 random comments
80.times do 
   Comment.create( 
      comment: Faker::Lorem.paragraph(sentence_count: 3)
      rating: Faker::Number.between(from: 0, to: 5),
      joke_id: Faker::Number.between(from: 0, to: 108)

#99 lines of dad jokes 🥴
(insert 99 lines of dad jokes here)

After that I had to create migrations for each model that I created in the terminal so that I could create tables for each model.
$bundle exec rake db:migrate db:seed
After that I noticed application controller had sinatra base inherited into it so I inherited that into my jokes controller where I had all of my crud operations.

We struggled a lot on the react portion of the project where we had to create Comment.js, ErrorPage.js, JokesList.js, JokesForm.js, Login.js, NavBar.js, Search.js, SingleJoke.js all having their own functions inside of the code to essentially be exported into App.js and having App.js exported into index.js. We start by rendering the Jokes onto JokesList which allows us to render the database of jokes onto the main page. We also have buttons implemented that allows us delete the jokes from the page and if you click on a joke, you can edit the joke.

const editJoke = (id, newJoke) => { 
   fetch(`${API}/jokes/${id}`, { 
      method: "PATCH",
      headers: { 
         "Content-Type": "application/json",
      }, 
      body: JSON.stringify({
         joke: newJoke
      }),
   })
};

Delete the joke.

const handleTrash = (someName) => {
   fetch(`${API}/jokes/${someName.id}`, {
      method: "DELETE"
   }) 
   const newJoke = jokes.filter

Import & Export

John Josef — Sat, 10 Dec 2022 00:19:12 +0000

React has a feature where you code different modules(js files) to run different features/functions. Starting off with App.js being exported into index.js, and having other modules imported into App.js such as perhaps a moduleContainer.js or navBar.js. Naturally when you're exporting JSX functions, you'd want to place anything that you need for the overall global scope somewhere such as in App.js, which allows you to pass down props called in the global scope.

The reason for coding in this style are various things such as:
Strict variable scoping. You wouldn't have to worry about mixing up codes or similar variables since variables declared in modules are private, making them non-accessible from the global scope.
Easier navigation. Allows for code to be more readable for other developers rather than jumbling up all the different parts of the code into separate pieces. Also makes it easier to debug since you can tell where you should be adding a debugger to. Also helps produce clean code that can be reused and repurposed.
Single-responsibility principle. Each module being responsible for running specific parts of the code
i.e.
App.js, RenderContainer.js, RenderCard.js, App.js, Search.js

Keys to the object

John Josef — Wed, 02 Nov 2022 06:54:17 +0000

Object

const obj = {key: value};

Object nested inside of an object

const obj = {
key : value;
key2 : {
innerKey : innerValue;
    },
};

Objects in javascript work just like arrays except you can easily access the values inside of an object by calling on the keys. They can also have nested arrays or nested objects inside of them. An example of things that could be an object are as such :

const charEquip = {
   hat: "Hero's helmet",
   top: "Hero's Plate Armor",
   bottoms: "Hero's Plate Legs",
   shoes: "Hero's cleaves", 
   gloves: "Hero's gloves",
   weapon: {
      primary: "Holy sword", 
      secondary: "Holy shield",
   },
};

Based on the comparison above, there may be a moment where you may want to know what the top-level keys are in an object. If you come across this situation, you can use Object.keys() to find out what the top level keys are :

Object.keys(charEquip);
//=> ["hat", "top", "bottoms", "shoes", "gloves", "weapon"]

By passing the value of the object into object keys, we can ask Javascript to let us know the top-level keys.

To access the inner keys nested inside of an object, you'd have to call on the innerKey as well as the outerKey.

charEquip.weapon.secondary;
//=> "Holy shield"

charEquip[weapon][primary];
//=> "Holy sword"

Compared to arrays where you can call the values inside of an array by using square brackets to call on which part of the array you want to access, object values are called by using square bracket notation or dot notation.

Dot Notation

charEquip.gloves; 
//=> "Hero's gloves"

Bracket Notation

charEquip[top];
//=> "Hero's plate armor"

In some situations, you may need to use bracket notation to call on the value of an object as such :

const rickRolled = {
"Never": "never",
"gonna": "gonna", 
"give": "let",
"you": "you",
"up": "down",
};

In this example if you were to try to use dot notation to try to access the value of "let", it would give you a syntax error.

rickRolled."give";
// ERROR: Uncaught SyntaxError: Unexpected string

So in this case you would have to use bracket notation.

rickRolled["give"];
//=> "let"

When assigning object keys you must also make sure the keys are specific, otherwise the processor will just log the last value that was logged to the specific key.

const juicy = {
fruit: apple,
fruit: cantaloupe,
fruit: dragonfruit,
}

juicy;
//=> {fruit: dragonfruit}

Burnout and Learning

John Josef — Tue, 25 Oct 2022 06:23:44 +0000

Been out of it for the weekend since I knew I failed the code challenge. I kept writing a bunch of code and deleting it until eventually I deleted a ton right at the end of time. I didn't notice it. When I retake it, I'll write notes in my index.js about what I need to do next time. Today we decided that for our code together that we're going to make a code that grabs different types of quotes depending on which button you press and to make sure that it's compatible with phone screens as well.

Intro to C++ into Javascript

John Josef — Wed, 19 Oct 2022 02:27:34 +0000

I've learned C++ before and it's very useful to note that in comparison, if you provide more than one argument in console.log, then it automatically prints out the arguments with a space in between rather than having to place multiple arguments and having to string a space in between each argument(It may have changed since I took it in 2014). It was very different going from having to #include the dev tools I was planning to use or having to type out the using namespace std; into int main ();. Using console.log, returning, or even just calling what I want returned rather than having to write cout >> " "; is also a lot better looking in my opinion. I found it interesting to see that Mozilla Firefox was one of the first browsers that had DevTools.

First blog post

John Josef — Mon, 17 Oct 2022 03:33:04 +0000

Starting off with learning javascript for the past week and everything has been very stressful yet interesting. I have a lot to learn still and I'm hoping things become easier as I progress. I've always wanted to be a coder but wasn't a fan of the US School system and decided to work while I decided with what I want to do but as I went through jobs and progressed I started realizing how expendable I am in a physical job setting and decided I wanted to continue my education and start my journey into finally learning how to code. So far I've been learning javascript, HTML, css, how the DOM works, and all things included. We've had to do a month worth of prep work before then and that was very stressful and I'm glad that we're starting live lessons because I feel like I'm learning a lot more compared to during the prep work phase, but it definitely helped. I've learned somethings for example to use textContent rather than innerHTML for situations that involve making the user input information since people can possibly hack that information. I'm currently learning functions and scopes and am very confused but hopefully I'll learn a lot more.