DEV Community: Jordan

What CRUD means to a new Software engineer when dealing with JavaScript and React!

Jordan — Wed, 18 Jan 2023 22:04:55 +0000

The title is deceiving, and might even need to be clarified to most. CRUD stands for CREATE, READ, UPDATE, and DELETE. To a new software engineer, it means one of two things. When talking about normal full-length javascript it's about using a long more intricate code to help send information where it needs to go or where it is being received from. For an example of the long code:

function choresForHome(){
fetch(“http://localhost:4000/chores”)
    .then(response => response.json())
    .then(chores => console.log(chores))
}

Now the second thing that would pop into a new software engineer head is the React version. Which is a much smaller code pulling from code that has already been put together by others. It shortens the amount of code needed to complete one task to another. For an example of the shorter code:

useEffect(() => {
    fetch("http://localhost:4000/chores")
    .then((r) => r.json())
    .then((items) => setItems(items));
}, [ ])

In javascript and React CRUD does the same things just in different ways. One way is shortening the code while using others' code to fill in the gaps like in React. Another way is laying out everything in front of you with javascript.

Each of the CRUD operations looks different but not by much. For example, if you look at both the examples that we already went over you will see the similarities. Both examples are known as the HTTP verb GET(better known as READ). It requests information from an outside API or from a created .json. Then it returns the promise of information which then is placed onto the front end of your app. The only true difference between the two codes is the useEffect.

The hook known as the useEffect is only used in React. If you attempt to use it as normal code without react you will run into coding problems. The useEffect hook tells react that your component has to do something after rendering. When using this hook you need to be careful of not creating a never ending loop. Even if you do create a loop it is simple to fix. In this example:

useEffect(() => {
    fetch("http://localhost:4000/chores")
    .then((r) => r.json())
    .then((items) => setItems(items));
}, [ ])

You can see brackets at the very end ([ ]). These brackets stop the continuous loop that would occur if you just used the operation. Now let's look at all the different operations of the CRUD acronym.

Since we have used the READ (better known as GET) in our example we will start with CREATE. CREATE (better known as POST) is a way to display information that was created. For example:

fetch("http://localhost:4000/chores", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(infoData)
    })
      .then(response => response.json())
      .then(data =>{
        history.push(`ChoreDetails/${data.id}`)
      })

This operation will take the information given to it and post it to a list or show you information from a form someone would complete.

Our next operation is an UPDATE which is also known as a PATCH and PUT. When using the UPDATE operation you will be using one of these HTTP verbs. An example of an UPDATE operation is:

fetch("http://localhost:4000/chores", {
   method: "PATCH",
   headers: {
       "Content-Type": "application/json"
   },
   body: JSON.stringify({ chore: { completed: true } })
})
   .then(r => r.json())
   .then(data => console.log(data.chores))

When using PUT or PATCH is not much different then using a POST but you need to be careful not to mix the two or you will be updating information when really you want to push some information.

Now last but not least the CRUD operation. Everyone knows what DELETE is. The operation DELETE is also an HTTP verb. It helps to delete information someone has messed up on or no longer wants. Software engineers would attach it to a button with an event listener so someone on the front-end server could delete information they didn't want. Here is an example of the final CRUD operation:

function handleDelete() {
       fetch(`http://localhost:4000/chores${id}`, {
           method: "DELETE"
       })
       onDeleteChore(id)
   }

It might seem hard to remember all the information that has been given to you. It might be extremely overwhelming to most, but one thing you need to remember is that you're not meant to remember EVERYTHING that is taught to you. Sure remember the CRUD acronym CREATE, READ, UPDATE, and DELETE but you do not have to remember how to create each one of them from scratch. So have fun with coding and try not to let it overwhelm you!

The different levels of Scope with examples

Jordan — Fri, 16 Sep 2022 04:50:35 +0000

During my time coding this past phase I had a little difficulty not only remembering the definitions of scope but understanding which Scope went with which part of the function. Sometimes with all the information they give you it is hard to remember the definitions of the different parts of coding. In this blog, I will help explain the Three Scope levels and give examples of what each level is as an example.

In JavaScript, there are three different levels. The first is Global Scope:

The technical meaning for Global Scope is the context where everything in a Javascript program executes by default. This includes all variables, objects, and references that are not contained within another scope.

In simple terms, this means that any variable that can be accessed throughout the entire code is considered a part of the Global Scope. You can define any variable on a global scope with: let, const, and var.

Warning: Though var is one of the Keywords
it is not suggested to use due to it being able to
be accidentally redefined which can and will lead to a
buggy program.

Now that we have the definition let's get into a few examples of a Global Scope from my code:

     `const mainDiv = document.getElementById("main")

     function chores(event){
      //code here can use mainDiv variable
      }

    function antherFunction(event){
     //and the code here can use mainDiv variable
      }`

Now in this example the Keyword being used is const. What is being set as a variable that can be reached through the entire code is mainDiv. The last is what the variable mainDiv is being assigned to document.getElementById(“main”).

If this is a little difficult to understand here is a little more simple:

    `let submitchore = 'theChores';

    function chores(event){
    //code here can use mainDiv variable
            }

           function newChores(event){
    //code here can use mainDiv variable
            }`

Again we have one of the Keywords let, const, or var we need to assign a Global variable. The variable being assigned is submitChore. The last part we need is what the variable is being assigned to, ‘theChores’. That same Variable is outside both functions making it accessible to both and not just one function.

The second level of Scope in JavaScript is called Functional Scope:

The technical term for the Functional Scope is a variable declared inside a function, it is only accessible within that function and cannot be used outside that function.

A simpler breakdown is each function creates a Functional Scope. For example:

 `function chores(event){
  let submitchore = 'theChores'; //This is a Functional scope
  }

 function chores(event){
 const submitchore = 'theChores'; //This is a Functional scope
 }

 function chores(event){
 var submitchore = 'theChores'; //This is a Functional scope
 }`

No matter how many functions you might have they all have their own Functional Scope.

There is a Local Scope that occurs when you create a variable inside a function. For an example of Local Scope let's take the function from above so you can see the difference:

    Global Scope Example:

       `let submitchore = 'theChores';

    function chores(event){
    //code here can use mainDiv variable
            }

            function newChores(event){
    //code here can use mainDiv variable
            }`

Local Scope Example:

    `function chores(event){
    let submitchore = 'theChores';
    //code here can use submitchore
            }

            function newChores(event){
    //code here cannot use submitchore
            }`

Now, if you look at each of the examples, you can see a distinct difference. The variable submitchore has moved from outside of both functions into the chores function. This makes the variable submitchore inaccessible to the newChores function. Even if you were to put the submitchore variable into the newChore function it again would be inaccessible to the chores function.
Example:

    `function chores(event){
    //code here cannot use submitchore
            }

            function newChores(event){
            let submitchore = 'theChores';
    //code here can use submitchore
            }`

Now the last of the three Scopes is Block Scope:

The technical definition for the Block Scope variable means that the variable defined within a block will not be accessible from outside the block.

A good breakdown of this is anything within the { } is a Block Scope. A few examples of this:

    `//Can’t be used here

           {let submitchore = 'theChores';
    //code here can use submitchore
            }

           //Can’t be used here`

A block can be inside a function and the variable will still not be available outside of the { }.

So what I hope you take from this blog is a better understanding of the three different Scopes: Global Scope, Functional Scope, and Block Scope. I also hope it helps you better understand each placement and how they apply to the code you create later. Have fun coding!

The top five challenges I faced and the top five helpful sites I used while working on my Project.

Jordan — Sun, 21 Aug 2022 12:08:00 +0000

``I am a mother of three with an amazing husband that is extremely supportive. When I told him that I wanted to go back to school he was right behind me all the way. The difficulty was that we have an autistic son that had difficulty with things changing around him. So naturally when I started school it disrupted his schedule and made everything difficult for all of us.

During the first phase of school I had had so many ups and downs in emotions that I felt like I was going to go insane. With me having to work a swing shift then try to complete the list of items needing to be completed for school then sleeping until my next shift. It has been exhausting, stressful, and all over complicated with the schedule.

When I finally reached the Phase 1 project I felt like I was going to cry. I felt like I knew nothing that was just taught. Every time I tried to read the Guidelines for the project or tried to start it I would get anxious and the words would blur on the page. I never thought that I would complete my project, so I walked away.

While I was trying to relax I decided to think about my project again, but this time I thought about how I wanted to build something that would make a difference in someone else’s life. Thoughts ran through my head about building apps that were way out of the league I was currently in. I had to downsize to a smaller project somehow. I decided to talk to my husband, an outside opinion that knew nothing about what I was doing, and we came up with a Special Aide.

I decided to create a Special Aide for children like my son, autistic or special needs. The application is meant to be an interactive checklist for the day. It will help young children attempt to complete their daily task throughout the day with little to no assistance from an adult. It currently has the parental control where a parent is able to create a list of age appropriate chores for their child and even put a picture that displays what they are to do, with the chore name.

I personally ran into a lot of issues going through my first Project. I would get overwhelmed easily and want to throw my computer across the room. I mean who wouldn’t want to? This is like trying to learn another language. I would feel defeated and really stupid when I couldn’t get something right and just between us I felt like quitting a lot. I have to admit this has been one of the most challenging things I have ever had to learn and I wouldn’t have it any other way. These are the top five Issues I ran into while trying to complete my project:

1.) Frustration
We all know the definition of it “the feeling of being upset or annoyed, especially because of inability to change or achieve something” and we have all, at one point or another, experienced it. This was one of my main companions because it was hard for me to concentrate due to my children needing my attention or having to go to work or fighting to stay away so I could finish something.

2.) Sleep Deprivation
This is another one that I feel like no one needs explained. If you have not felt like a zombie at work or tried to survive off nothing but caffeine well I would love to know how you do it. I had such a difficult time trying to find a minute to sleep seeing as I work, go to school, and help my husband take care of three children and my grandmother. ON TO THE NEXT ONE!

3.) Quiet Time So I Could Concentrate
Ahhhh! Another thing that I think all adults with children wish they could get more often. My husband helped me out a lot with this when I first started learning about Software Engineering. I was getting overwhelmed with my kids wanting my attention and not being able to give my full attention to my schooling for even five minutes. My husband walked up, took my computer while I protested, and took it to the bedroom. He then proceeded to lock me in our room and made sure the kids left me alone. I understand not everyone has this option but you can also complete your work while your kids are at school or asleep.

4.) Becoming to Stress
I stress is the one thing everyone has in common. What am I going to do about the house bill? Who was supposed to go to the doctors today? Is little Jimmy going to go to his dad's house? This is only the very tip of the stress iceberg most of us deal with and then we want to add going to school to the never ending stress list.

5.) Depression
This one was the hardest for me to deal with the most. I have battled with depression my whole life. It is hard enough to try to deal with it in day to day tasks but to have to fight it repeatedly while working through something makes it even harder. It is also not something to take lightly and I hope if you feel it is getting too difficult to handle you will get help.

Until then here are some links  of the things I used to help me:

For stress: https://www.webmd.com/balance/guide/tips-to-control-stress

For Depression: https://www.healthline.com/health/depression/how-to-fight-depression

For achieving Quiet time: https://inspiremystyle.com/benefits-of-quiet-time/

For Sleep Deprivation: https://www.verywellhealth.com/what-is-the-treatment-for-sleep-deprivation-3015326

For Frustration: https://mhanational.org/18-ways-cope-frustration

This blog helped me alot!

Jordan — Sat, 02 Jul 2022 10:00:01 +0000

https://medium.com/@aquilhussain15/demystifying-higher-order-functions-in-javascript-5fc37b649048d