DEV Community: reyes2981

what i learned last week: intro to test driven development

reyes2981 — Mon, 14 Mar 2022 16:29:42 +0000

Prerequisite: Angular.js

Throughout the past several years, as I've launched my developer career, the one practice that has seemed daunting to me is Test Driven Development. It mostly stems from the fact that up until my time at General Assembly I never implemented it into my codebase. That has all changed as I prep for an upcoming interview that will go over TDD. So to practice I've decided to dedicate this weeks entry to this feared and misunderstood practice.

WHAT?

So what is Test Driven Development?

Per Wikipedia, Test-driven development (TDD) is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later.

Okay, but what does that mean?

In other words, test cases for each functionality, of a program, are created and tested first and if the test fails then the new code is written in order to pass the test and making code simple and bug-free.

HOW?

So how exactly does test driven development work?

Read, understand, and process the feature or bug request.
Translate the requirement by writing a unit test. If you have hot reloading set up, the unit test will run and fail as no code is implemented yet.
Write and implement the code that fulfills the requirement. Run all tests and they should pass, if not repeat this step.
Clean up your code by refactoring.
Rinse, lather and repeat.

Note: In Angular, there are two main types of tests.

A unit test is a way of testing a unit - the smallest piece of code that can be logically isolated in a system. In most programming languages, that is a function, a subroutine, a method or property.

End to end testing is the process of validating an application’s workflow from the beginning to the end. This testing methodology is aimed at replicating real user scenarios, so that the system can be validated for overall functionality.

TDD EXAMPLE:

Note: I'm going to being using Jasmine to test out my code. Jasmine is a behavior-driven development framework for testing JavaScript code that plays very well with Karma. Similar to Karma, it’s also the recommended testing framework within the Angular documentation as it’s setup for you with the Angular CLI. Jasmine is also dependency free and doesn’t require a DOM.

Lets get to it, in the terminal I'm going to create a new Angular project by running the following command.

ng new zoo

Next, I'm going to create a new component named "zoo".

ng generate component zoo

Now that my new Angular project has been created I'm going to head over to my terminal again and run the following command.

ng test

The terminal output will look like the below screenshot.

Also, a browser window will open up letting you know all of the initial tests are passing. Neat, huh?

Per the first step, I need to figure out what new feature I want to build out. In this case, I want my zoo component to have a name.

Second, I need to translate the requirement by writing a unit test.

In zoo.component.spec.ts write the following test.

 it('should have a name', () => {
    expect(component.zooName).toBeTruthy();
  });

You'll notice that the test fails because no code has been implemented.

Step three states that I need to now implement code that makes the test pass. How would I do that in this example? I simply need to create a new property in the zoo component called "named" and add a value to it.

Sweet! All of our tests are now passing!

This was a simple example and don't need to refactor but next we would usually want to move onto step four and refactor.

Voila! You've implemented your first application feature utilizing TDD!

WHY?

Test Driven Development gives developers the confidence that our code will work 100% of the time in the expected conditions.

TDD provides several benefits:

It can enable faster innovation and continuous delivery because the code is robust.

It makes your code flexible and extensible. The code can be refactored or moved with minimal risk of breaking code.

The tests themselves were tested. A key characteristic of a test is that it can fail, and the development team verifies that each new test fails.

The code that is produced is, by design, easy to test.

The requirements are implemented with little to no wasted effort because only the function that is needed is written.

what I learned last week: merge sort algorithm

reyes2981 — Mon, 07 Mar 2022 21:38:42 +0000

I know it's been several weeks since I last posted an entry but I'm happy to be back after successfully completing General Assembly's Java Immersive Program!

Prerequisite: Recursion

Lets get right to it. In this entry I'm going to go over Merge Sort which is a Divide and Conquer algorithm.

Remember, the divide and conquer technique can be divided into three parts:

Divide: This involves dividing the problem into smaller sub-problems.
Conquer: Solve sub-problems by calling recursively until solved.
Combine: Combine the sub-problems to get the final solution of the whole problem.

So, let's say you are asked to sort the unordered array below.

How would you achieve this and return this ordered array? One way, would be utilizing Merge Sort.

The first thing, we want to do is divide the unordered array into halves.

Next, I divide these two arrays into halves.

We further divide these arrays until we reach atomic value and the array can no longer be divided .

Now, I will combine them in a sorted manner.

Next, I continue combining the arrays in a sorted fashion.

The final merge will look like this.

You're probably asking yourself "how do I code the above algorithm?" First step, we need to write some pseudocode.

In computer science, pseudocode is a plain language description of the steps in an algorithm or another system. Pseudocode often uses structural conventions of a normal programming language, but is intended for human reading rather than machine reading.

Example Pseudocode

//array of elements
let arr = []

mergeSort(arr) {

//variable that stores number of elements in the array
n <-- array.length 

//cut the array into two halves
if(n < 2) {
    return n
  }

mid <-- n/2
left <-- array of size(mid)
right <-- array of size(n-mid)

for(i <- 0 to mid - 1) {
    left[i] <- arr[i]
  }

for(i <- mid to n - 1) {
    right[i - mid] <-- arr[i]
  }

//recursion
mergeSort(left)
mergeSort(right)
Merge(left, right, arr)
}

Justin Kim

Code Implementation in JavaScript

//helper method
const merge = (leftArr, rightArr) => {
    const output = [];
    let leftIndex = 0;
    let rightIndex = 0;

    while (leftIndex < leftArr.length && rightIndex < rightArr.length) {
        const leftEl = leftArr[leftIndex];
        const rightEl = rightArr[rightIndex];

        if (leftEl < rightEl) {
            output.push(leftEl);
            leftIndex++;
        } else {
            output.push(rightEl);
            rightIndex++;
        }
    }
    return [...output, ...leftArr.slice(leftIndex), ...rightArr.slice(rightIndex)];
};

//console.log(merge([3, 6], [2, 4]));

//recursive function
const mergeSort = arr => {
    if (arr.length <= 1) {
        return arr;
    }

    const middleIndex = Math.floor(arr.length / 2);
    const leftArr = arr.slice(0, middleIndex);
    const rightArr = arr.slice(middleIndex);

    return merge(
        mergeSort(leftArr),
        mergeSort(rightArr)
    );
};


console.log(mergeSort([1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]));

Now if you run the program, you will see a newly sorted array

$ node app.js
[
    1,    1,   2,   2,   4,
    8,   32,  43,  43,  55,
   63,   92, 123, 123, 234,
  345, 5643
]

In conclusion, here is a group of folk dancers explaining Merge Sort. Yes, you read that right.

resources
https://www.tutorialspoint.com/data_structures_algorithms/merge_sort_algorithm.html
https://www.youtube.com/watch?v=TzeBrDU-JaY&t=69s
https://www.youtube.com/watch?v=x_Z9FcAPmbk

what i learned last week: how to build tic tac toe using html, css and javascript

reyes2981 — Mon, 10 Jan 2022 14:14:09 +0000

Good Morning! It's a snowy Sunday here in Chicago and today I'm going to build the game tic tac toe. In the process of building this program I will provide a high level overview of HTML, CSS and JavaScript.

HTML

The first thing I'm going to do is create an index.html file. Remember, HTML is the standard markup language for creating Web pages. I like to think of it as the "skeleton" of a website.
Next, I want to start writing code in the newly created index.html file. The boilerplate code for an index.html file should look something like this...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Note, HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.
Next, utilizing <div>'s, I'm going to build the tic tac toe board. The <div> tag defines a division or a section in an HTML document. It's also used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Tic Tac Toe Board -->
    <div id="board-container">
      <div data-index="1" class="box"></div>
      <div data-index="2" class="box"></div>
      <div data-index="3" class="box"></div>
      <div data-index="4" class="box"></div>
      <div data-index="5" class="box"></div>
      <div data-index="6" class="box"></div>
      <div data-index="7" class="box"></div>
      <div data-index="8" class="box"></div>
      <div data-index="9" class="box"></div>
    </div>
</body>
</html>

I'm making good progress! So far, I've created an index.html file and added <div>'s that represent a tic tac toe board. Notice that I've created a div with an id of board-container. The HTML id attribute is used to specify a unique id for an HTML element. Nested inside of the #board-container div there are 9 separate, child, <div>'s that represent a cell in the tic tac toe board. Remember, an HTML document is like a big family tree, with parents, siblings, children, ancestors, and descendants. I'm about to dive into CSS and will need to somehow reference these newly created children elements so I'm adding a class of box to each individual <div>.

CSS

Next, I want to see this newly created grid so let's build and display it to the client side using CSS. If HTML is the skeleton of a website than CSS is the clothes that dress up a person.

Below, is a screenshot of my completed tic tac toe game - designed with CSS.

#board-container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: #e9c46a;
  color: #fff;
  border: 6px solid #e9c46a;
  border-radius: 10px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  position: relative;
  top: 30%;
}

Note, I'm able to style a div by referencing it's id attribute. The same thing can also be done with the class attribute.

JavaScript

Below is part of the code used to build and store the logic of my program.

document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM Content Loaded");
    //RETREIVE HTML ELEMENTS
    const boxes = document.querySelectorAll(".box");
    const strikethrough = document.getElementById("strikethrough");
    const gameOverArea = document.getElementById("game-over-area");
    const gameOverText = document.getElementById("game-over-text");
    const playAgain = document.getElementById("play-again");
    const playerxDiv = document.getElementById("player-X");
    const playeroDiv = document.getElementById("player-O");
    //CREATE PLAYERS, ARRAY THAT REPRESENTS BOARD AND WINNING COMBOS
    const playerX = "X";
    const playerO = "O";
    const boardArray = Array(boxes.length); //TRACKS STATE OF PROGRAM - CREATED AN ARRAY WHICH HAS 9 ITEMS(BOXES)
    const winningCombos = [
        //ROWS
        {  // KEY   VALUE
            combo: [0, 1, 2],
            strikeClass: "strike-row-1"
        },
        {
            combo: [3, 4, 5],
            strikeClass: "strike-row-2"
        },
        {
            combo: [6, 7, 8],
            strikeClass: "strike-row-3"
        },
        //COLUMNS
        {
            combo: [0, 3, 6],
            strikeClass: "strike-column-1"
        },
        {
            combo: [1, 4, 7],
            strikeClass: "strike-column-2"
        },
        {
            combo: [2, 5, 8],
            strikeClass: "strike-column-3"
        },
        //DIAGONALS
        {
            combo: [0, 4, 8],
            strikeClass: "strike-diagonal-1"
        },
        {
            combo: [2, 4, 6],
            strikeClass: "strike-diagonal-2"
        },
    ];
    let turn = playerX; //TRACKS WHO'S TURN IT IS

    playAgain.addEventListener("click", restartGame);

    //THE FILL() METHOD CHANGES ALL ELEMENTS IN AN ARRAY TO A STATIC VALUE, FROM A START INDEX (DEFAULT 0) TO 
    //AN END INDEX (DEFAULT ARRAY.LENGTH). IT RETURNS THE MODIFIED ARRAY
    boardArray.fill(null);

    playerxDiv.append(playerX);
    playeroDiv.append(playerO);


    boxState();
    //FUNCTION THAT ITERATATES OVER LIST OF BOXES AND ADDS AN EVENT LISTENER TO EACH INDIVIDUAL BOX
    function boxState() {
        boxes.forEach((box) => {
            box.addEventListener("click", boxClick); //FUNCTION WILL BE CALLED WHENEVER THE SPECIFIED EVENT IS DELIVERED TO THE TARGET
        })
    }

    function boxClick(e) {
        const box = e.target; //REFERENCE TO THE HTML ELEMENT CLICKED
        const boxNumber = box.dataset.index;//ACCESS DATA-INDEX ATTRIBUTE
        //IF GAMEOVER AREA CLASSLIST CONTAINNS "VISIBLE" THE FUNCTION WILL STOP EXECUTING
        if (gameOverArea.classList.contains("visible")) {
            return;
        }
        //CHECK IF SPECIFIC BOX IS EMPTY OR HAS AN "X" OR "O" IN IT
        if (box.innerText != "") {
            return;
        }
        if (turn === playerX) {
            box.innerText = playerX;
            boardArray[boxNumber - 1] = playerX; //ARRAYS ARE ZERO INDEXED SO I NEED TO SUBTRACT 1 FROM PLAYERS CHOICE FOR GAME TO BE ACCURATE
            turn = playerO;
            console.log(`It's ${playeroDiv.innerText}'s turn`);
        } else {
            box.innerText = playerO;
            boardArray[boxNumber - 1] = playerO;
            turn = playerX;
            console.log(`It's ${playerxDiv.innerText}'s turn`);
        }

        //FUNCTION IS CALLED ON EVERY SINGLE BOX CLICK - CHECKS IF THERE IS A WINNER
        checkWinner()
    }

Deployed Program: https://clever-noether-f61a54.netlify.app/
Github: https://github.com/reyes2981/project1

what i learned last week: if/else statements

reyes2981 — Tue, 14 Dec 2021 18:56:47 +0000

I'm happy to share that I've officially completed week one of General Assembly's Java Immersive program. We dove into the command line, HTML/CSS and JavaScript. I haven't written in about two months so lets get right to it! I'll be going over if/else statements to solidify my knowledge in JavaScript.

The if statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed.

if () {}

Let's dive into the above piece of code. Within the parentheses you'll need to write a conditional expression.

if (condition) { statement1 }

First, I've declared a variable and stored the number 400 inside of it. Next, I created an if statement and added a condition inside of the parentheses.

let x = 400 if (x > 50) { console.log("I'm larger than the number 50!"); }

Within the curly brackets I've gone ahead and created a statement. In this case I've written code that will show in the console ONLY if the condition returns a truthy value.

Remember, a truthy value is a value that is considered true when encountered in a Boolean context. See below for the group of values that are considered falsy in JavaScript. Note, all values outside of the group below are considered truthy.

What do you think will be the output when I run the above block of code. To confirm let's head over to the browser console.

INPUT

let x = 400 if (x > 50) { console.log("I'm larger than the number 50!"); }

OUTPUT
I'm larger than the number 50!

Since 400 is larger than 50 the statement is displayed in the console. What if I want to display a different output if the number is less than 50? How would I set that up? In this case we can add an else statement to the above code.

let x = 41 if (x > 50) { console.log("I'm larger than the number 50!"); } else { console.log("I'm smaller than the number 50!"); }

Output

I'm smaller than the number 50!

The reason why we get the above output is because when the first condition was executed it resolved as falsy.

Let's check out a real world example.

function startAdventure() { let local = prompt('Captian Picard has a mission for you in the Delta Quadrant. Do you take along riker or data?') if (local === "riker") { riker(); } else if (local === "data") { data(); } }

Above I have a function that allows the client to navigate prompts depending on their response.

intro to react pt. 1

reyes2981 — Wed, 06 Oct 2021 15:41:59 +0000

Welcome to this weeks blog entry where I'll provide you a high level introduction to React by creating a program. Lets get to it!

WHAT IS REACT?

Below is an example of a React program. As you can see the UI is seamless and organized. Imagine the possibilities!

CREATE REACT APP
The first thing I want to do is create a new React app. How would I do this? There are various ways to solve this problem and for the purpose of this entry I'm going to run the following code in my terminal.

npx create-react-app react-example

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
Once the new React app is finished installing you will see something like the image below.

NOTE: I'll be using Yarn, a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world.
Now that I've created a new React program I'm going to open it up in my text editor and you'll be able to see all of the newly created files.
.

Next, to view the program in a browser I'm going to run the following code in the command line.

yarn start

Awesome, lets go back to the text editor and check out index.js.

The first couple of lines seem like simple code but what do they mean? In React we use the keywords import and from to import a particular module or a named parameter.

import React from 'react';
import ReactDOM from 'react-dom';

The import statement is used to import read only live bindings which are exported by another module.
To summarize, I'm using both the import and from keywords to import React and ReactDOM into my program.
The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.
methods provided by the react-dom api
render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()
Next, you'll see code similar to the example below. Remember, we have access to render() because we imported the react-dom API into our program.

ReactDOM.render(

);

ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called.
Awesome, let's start going over what is inside render()

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <App />
  document.getElementById('root') // We call this a “root” DOM node because everything inside it will be managed by React DOM.
);

First, there is an App element which is a plain object describing a component instance or DOM node and its desired properties. Second, Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
Sweet, lets go ahead and check out the App component being referenced! To do that head over to the directory in your text editor and go to the App.js file.

This is the file that is holding the UI logic displayed in the browser and where I'm going to end this entry. Next week, I'll dive deeper into Components, Elements and JSX!

RESOURCES
https://reactjs.org/docs/hello-world.html
https://www.c-sharpcorner.com/article/what-and-why-reactjs/
https://reactjs.org/docs/getting-started.html
https://classic.yarnpkg.com/en/docs/getting-started
https://medium.com/@gabrielrasdale/react-react-dom-eli5-db2101e614e5
https://www.taniarascia.com/getting-started-with-react/

what i learned last week: creating an animated 2d background with canvas and javascript

reyes2981 — Thu, 30 Sep 2021 13:41:42 +0000

Hello and welcome to this weeks blog entry where I'll continue working on Angry Borgs, a 2D game I'm building using vanilla JavaScript for the frontend and Ruby on Rails on the backend. To review, I've successfully modeled physics to create a dynamic player object that can be controlled with the spacebar.

In this entry, I want to add more depth to Angry Borgs so I'm going to build an animated background. The final product for this blog will be a variation of this...

First, I'll retrieve the canvas reference and store it inside a similarly named variable. Next, I need to initialize the context of the canvas element and store that in a variable named ctx.

const canvas = document.querySelector('canvas');// reference to the CANVAS element
const ctx = canvas.getContext('2d');

Next, I create a new instantiation of the Image() constructor and store it inside of a variable.

const backgroundImage = new Image();

Note, the above code has the same functionality as the code below. There is no "correct way" to use either form rather up to the situation and your best judgement.

document.create('img');

Second, I want to reference the image I'm going to use as the animated background. I can do this by calling src on backgroundImage and then storing the file path as a string.

backgroundImage.src = 'assets/bg5(1).jpg';

So far the code should look something like this...

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg';

Now that we have our variables all set up, what is the next step? We need to not only build out the logic of the program but also organize it. In this case, I'm going to create a draw() Function.

function draw() {
}

Next, we are going to reference the canvas using clearRect() which is a method of the Canvas 2D API [that] erases the pixels in a rectangular area by setting them to transparent black. For this example I want to clear out the entire browser screen so I passed in the following arguments:.

x-coordinate = 0,
y-coordinate = 0,
width = canvas.width
height = canvas.height

clearRect(0, 0, canvas.width, canvas.height)

Let's review all of the code I have so far and debug, debug, debug!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg'; 

function draw() {
clearRect(0, 0, canvas.width, canvas.height)
}

If we run the above code what do you think will happen on the browser side?

NADA!
Let's call draw() and see what happens

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg'; 

function draw() {
clearRect(0, 0, canvas.width, canvas.height)
}
draw()

Sweet, we got an error!

The error says clearRect is not defined but if you look at the code it's clearly there. Why is there an error? The answer - clearRect is a method of the Canvas 2D API. When I run the below code the program has no idea what that function is. How is this fixed?

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg'; 

function draw() {
clearRect(0, 0, canvas.width, canvas.height)
}
draw()

You simply need to call clearRect() on your ctx variable. Remember, ctx initializes the context of the canvas element.

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}

Success!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg'; 

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
draw()

Next, within draw() I'm going to be using the requestAnimationFrame()method which tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

function draw() {
console.log('hello from the draw function')
ctx.clearRect(0, 0, canvas.width, canvas.height)
requestAnimationFrame(draw);
}

Sweet, quick review of the code so far!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg'; 

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
requestAnimationFrame(draw);
}
draw()

Next, I'm going to use drawImage() which is a method of the Canvas 2D API [that] provides different ways to draw an image onto the canvas. I want to fill out the entire browser screen so I passed in the following arguments:.

image = backgroundImage,
x-coordinate = 0,
y-coordinate = 0,
width = canvas.width,
height = canvas.height

ctx.drawImage(backgroundImage, backgroundImage, 0, 0, canvas.width, canvas.height);

Awesome, let's head over to the browser and check if we see the image.

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

requestAnimationFrame(draw);
}

Finally, I don't need a static image I need a dynamic one and I can do that with the following code...

backgroundImage.x -= 0.1;

The above code tells the program to move the backgroundImages x-axis an x-amount of distance. Let's see the final code for better, no pun intended, context.

const canvas = document.querySelector('canvas');// reference to the CANVAS element
const ctx = canvas.getContext('2d');
const backgroundImage = new Image();
backgroundImage.src = 'assets/bg5(1).jpg';

function draw() {
console.log('hello from the draw function')
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
backgroundImage.x -= 0.1;
requestAnimationFrame(draw);
}
draw();

As you can see above, when the draw() function is called it initializes a canvas element, then draws out an image, next the image's x-axis is moved an x amount of distance and finally it "hits" the requestAnimationFrame() method where a loop is created.

FIN!

Thank you for reading.

Say Hi on LinkedIn! I'm always open to connecting, networking and new opportunities.

and/or

Checkout my Github.

RESOURCES
https://dev.to/ibrahima92/make-a-parallax-effect-with-10-lines-of-javascript-3hia
https://luka712.github.io/2018/12/02/Parallax-scrolling/
https://www.youtube.com/watch?v=Mg7ibYWhjPI

what i learned last week: overview of async and await

reyes2981 — Wed, 22 Sep 2021 16:14:37 +0000

Welcome! This week I'll be reviewing async and await. I haven't written a blog entry in a couple of weeks so let's get to it!

What is going to display first, second and third in the console when I run the below program?

If you said...

Hello.
Goodbye!
Hello again!

You are on the right track but wrong.

So why did the program not run the code synchronously, line by line? Well, because setTimeout() is an asynchronous function, meaning that the timer function will not pause execution of other functions in the functions stack.

For a more detailed example of asynchronous functions let's check out some code from the what i learned last week: overview of fetch() entry...

fetch("http://startrek/planets", configObj)
  .then(function(response) {
    return response.json();
  })
  .then(function(object) {
    console.log(object);
  });

First, fetch() makes an HTTP request to a resource via a URL.

fetch("http://startrek/planets")

Next, we utilize the then() method to handle the returned promise. and the json() method, It returns a promise which resolves with the result of parsing the body text as JSON.

  .then(function(response) {
    return response.json();
  })

Finally, I can do work with the JSON data. In this case I just want to display the returned data in the console.

  .then(function(object) {
    console.log(object);
  });

While this code is perfectly acceptable we can make it more leaner with async/wait!

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let object = await response.json()
   console.log(object);
}

First, I declared a function with the async keyword which means means that the function will return a promise in response.

async getPlanets() {

}

Second I created the response variable and saved a fetch request to it. Do you notice anything specific about the below code. Take your time I'll await...

The await keyword makes a function wait for a Promise.

async getPlanets() {
   let response = await fetch("http://startrek/planets");

}

Next, I created the data variable and saved the result of calling json() on response.

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let data = await request.json();
}

Finally, I can do work with my newly returned JSON object, again, in this case I just want to display the data in the console.

async getPlanets() {
   let response = await fetch("http://startrek/planets");
   let object = await response.json()
   console.log(object);
}

As you can see utilizing the async/await keywords is a fantastic supplement to promises. With that being said, it's important to note that async/await aren't necessarily substitutes for promises but what programmers like to call syntactic sugar.

I'm going to keep this blog entry cute and simple and end it here. I appreciate all comments and feedback. Thank you for reading!

what i learned last week: how to build an api utilizing ruby on rails and connecting it to a javascript frontend pt 1

reyes2981 — Mon, 30 Aug 2021 16:38:17 +0000

INTRO

Hi! In this series I'm going to go over how to build an API utilizing Ruby on Rails and connecting it to a JavaScript frontend. Remember, an application programming interface (API) is a connection between computers or between computer programs. It is a type of software interface, offering a service to other pieces of software.

Note, I'm learning that I code most efficiently when I work on features vertically and not horizontally. What do I mean by that? It means for the purpose of this series I'm going to through the process of creating a model, controller and view for a Player. Hmm...sound familiar?

API

First, to build out and specify properties of the API head over to the terminal. As you can see I'm adding commands that tell the system that the new project being created is an API and for this example has a postgresql database.

rails new example_api --api --database=postgresql

Success! Once the command has been completed you should see something like the above image in your terminal.

Next, to work with the newly created API head over to your preferred text editor and open up the newly created directory.

Easy, right? Now that our API has been created we can start coding! As previously mentioned, I'll be using the MVC architecture to build out my program.

MODEL

The central component of the pattern. It is the application's dynamic data structure, independent of the user interface. It directly manages the data, logic and rules of the application.

Lets get to it and head over to the terminal to build out our Player model and run the following command:

rails generate model Player username:string email:string

As you can see above, multiple things occurred when the above command was ran. Most importantly, a Player class and migration file were both simultaneously created.

Speaking of migration file...

Do you notice anything about the newly created migration file? Our Player already has a username and email attribute.

Sweet, I have my player model set up let me go create an instance of it!

WELP. An error?

I forgot to actually create the database! In the terminal run the following command:
rails db:create

Ok, now if I head over to the console lets see if I can create an instance of a Player.

Do you know what step I'm missing?

If you guessed run rails db:migrate in the terminal you are correct! In its most basic form it just runs the up or change method for all the migrations that have not yet been run. If there are no such migrations, it exits. It will run these migrations in order based on the date of the migration. Note that running the db:migrate also invokes the db:schema:dump task, which will update your db/schema.rb file to match the structure of your database.

lets try creating a Player instance.

Success!

To review, in the first part of this series I've built out an API, created a Player model, set up a database and finally confirmed that the created database is up and running! In the next entry I'll be going over the controller of my Player model. Thank you for reading!

what i learned last week: how to make a bouncing object using vanillajs part 2 animation

reyes2981 — Tue, 24 Aug 2021 18:34:59 +0000

Welcome to part 2 of how to make a bouncing object using vanillajs! As you may recall, I'm creating a clone of Flappy Bird and I want the player to be controlled with the spacebar. This means that within my program I need to model physics!

CODE SO FAR

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

}

const player = new Player(100, 100, 30, 'blue');

PLAYER IN BROWSER

The first thing I did is add a gravity, velocity and lift property to the constructor of my Player class. The reason why I'm adding these properties is because I want my player object to be affected by physics like they would in the real world.

Class Player {
  constructor(x, y, radius, color, gravity, velocity, lift) { 
        this.x = x;
        this.y = y;
        this.radius = radius; 
        this.color = color; 
        this.gravity = gravity;
        this.velocity = velocity;
        this.lift - lift;
  }

PHYSICS REFRESHER

Gravity, also called gravitation, in mechanics [is] the universal force of attraction acting between all matter.

Velocity [is the] distance traveled per unit time in one direction.

Lift occurs when a moving flow of gas is turned by a solid object. The flow is turned in one direction, and the lift is generated in the opposite direction, according to Newton's Third Law of action and reaction. Because air is a gas and the molecules are free to move about, any solid surface can deflect a flow. For an aircraft wing, both the upper and lower surfaces contribute to the flow turning. Neglecting the upper surface's part in turning the flow leads to an incorrect theory of lift.

Next, I created the up class method which runs every time the user presses the spacebar. To create a "bouncing" effect I added the players velocity plus lift and saved it to this.lift.

  up() {
    this.velocity = this.velocity + this.lift;
  }

Alrighty, next I created the class method -- update. This is where I compare Player properties versus where I'm actually manipulating the property on the screen

update() {
   // Update the state of the world for the elapsed time since last render
}

For each frame within our animation loop I'm going to set the velocity of player to this.gravity and the y coordinate to this.velocity.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color, gravity, velocity, lift) { 
        this.x = x;
        this.y = y;
        this.radius = radius; 
        this.color = color; 
        this.gravity = gravity;
        this.velocity = velocity;
        this.lift = lift;
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

  update() {
        this.velocity += this.gravity;
        this.y += this.velocity; 
  }

}

const player = new Player(100, 100, 30, 'blue', 0.6, 0, -15);

Next, I created the function animate which is responsible for the looping of the player object. How do I do this?

function animate() {

}

Inside of animate I'm using the requestAnimationFrame method which tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

function animate() {  
  requestAnimationFrame();
}

In the above example, what do I need to pass into requestAnimationFrame if I want to create a moving object?

function animate() {  
  requestAnimationFrame(animate);
}

Now when I instantiate the function animate a looping effect will be created.

function animate() {  
  requestAnimationFrame(animate);
}

animate();

Lastly, I need to add an EventListener so that the user can control the player by pressing on the spacebar. The first argument I pass in is keyup. The second argument is a callback function that runs the class method up everytime the user presses spacebar

addEventListener('keyup', event => {
    if (event.code === 'Space') {
      player.up();
    }

})

VOILA!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color, gravity, velocity, lift) { 
        this.x = x;
        this.y = y;
        this.radius = radius; 
        this.color = color; 
        this.gravity = gravity;
        this.velocity = velocity;
        this.lift = lift;

  }
  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }
  up() {
    this.velocity += this.lift;
    console.log(this.velocity); 
  }
  update() {
        this.velocity += this.gravity;
        this.y += this.velocity; 
  }
}

const player = new Player(100, 100, 30, 'blue', 0.6, 0, -15);

function animate() {  
  requestAnimationFrame(animate);
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  player.draw();
  player.update();
}

animate();

addEventListener('keyup', event => {
    if (event.code === 'Space') {
      console.log('Space pressed');
      player.up();
    }

})

If you've been following along you should see something like the blue object below with similar animation.

Fin

what i learned last week: how to make a bouncing object using vanillajs part 1 drawing the object

reyes2981 — Mon, 16 Aug 2021 18:01:20 +0000

Welcome to this weeks blog entry! Phase four of Flatiron School is coming to a close which means it's project time. I've decided to create a 2D game using vanillajs for the frontend and Ruby on Rails on the backend. The game is a clone of Flappy Bird and the player will use the spacebar to "fly" and avoid the enemy. Finally, this blog will be focused on the player object and how draw an object.

The first thing I'll need to do is create an index.html. Within this file we need to create a canvas element which is used to define the area on the page into which the image will be drawn.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css"></link>
    <title>Angry Borg</title>
</head>
<body>
    <canvas></canvas>
<script src="index.js"></script>
</body>
</html>

Note: I made sure my index.js file was being properly read by adding a script element to index.html with a source of index.js. Once the index.html file is set up I'll want to create the index.js file that will house our code. The first thing I'll do is select the canvas element. Selecting an element....that sounds familiar....

const canvas = document.querySelector('canvas');

Above, I've created const canvas and selected the canvas HTML element using the querySelector method. Remember, the querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

Next, to draw on the selected canvas, I create the variable const ctx and save the canvas context to it. The canvas context aka The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Neat, right? Before this project I had no idea what Canvas was let alone the power behind it!

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

What is the first thing I'll need to do if I want to create an object that represents a player? If you said "create a class" you are correct. Remember, classes are a template for creating objects. They encapsulate data with code to work on that data.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {

}

Next, I need to create a constructor which is called each time you instantiate a new version of the Player class. Remember, the constructor method is a special method of a class for creating and initializing an object of that class.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 

  }

// constructor allows for class properties to be unique for each object that is created

}

Above, I've defined a constructor and passed in multiple arguments that each represent a property of our Player.

x represents the x coordinate of the Player object inside of the browser
y represents the y coordinate of the Player object inside of the browser
radius represents the radius of the Player object
color represents the color of the Player object

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x // x coordinate
        this.y = y // y coordinate
        this.radius = radius // radius of player object
        this.color = color // color of player object

  // note we set the players properties as the arguments 
     we passed in the constructor method. 

  }
}

When you instantiate a JavaScript constructor function, an object is returned. The JavaScript “this” keyword has a special meaning inside of that object: it refers to itself. In other words, when you create your constructor function, you can use the “this” keyword to reference the object that WILL be created when the constructor is instantiated. After passing in our arguments I define the properties inside of the constructor method. Each time a new Player object is created we add new properties to that new instance of the Player.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }
}

const player = new Player()

Now that I have our class set up we can create an instance of our Player. If you look at the above code you'll see that I've created const player and saved a new instance of the Player class to it. Next, I need to pass in properties to this Player instance

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }
}

const player = new Player(100, 100, 30, 'blue');

Above, I've passed in an x coordinate of 100, y coordinate of 100, radius of 30 and finally blue as the color to our player. Lets confirm we've created a new object by using console.log

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }
}

const player = new Player(100, 100, 30, 'blue');
console.log(player);

To view our object in the console we pass in player to the console.log method. If you head over to your browsers console you should see something similar to the below image.

Awesome, so far I've created a Player class and the ability to create instances of the class with the constructor method. I've confirmed that new instances are being created by using console.log() and passing const player to the method. Now that we've done the above we can actually draw out the object in our browser. We do this by using the properties inside of the contructor method.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {

  }

}

const player = new Player(100, 100, 30, 'blue');

First, inside of the Player class I've created a new function named draw and it will be responsible for drawing out an object using passed in properties.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
  }

}

const player = new Player(100, 100, 30, 'blue');

Second, I referenced the canvas context using the ctx variable. Then I add beginPath() to ctx which lets our browser know we are going to start drawing..

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
      //ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise])
  }

}

const player = new Player(100, 100, 30, 'blue');

Third, I referenced the canvas context using the ctx variable. Then I add arc() to ctx which creates a circular arc centered at (x, y) with a radius of radius. As you can see above, I'm able to pass in the properties from the constructor to inside of the draw function using the This keyword

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color

  }

}

const player = new Player(100, 100, 30, 'blue');

Fourth, I referenced the canvas context using the ctx variable. Then I specify that the fillstyle will equal to This.color. Doing this tells JavaScript that the color of our player object's color will be whatever is passed in when the constructor is instantiated.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

}

const player = new Player(100, 100, 30, 'blue');

Finally, I referenced the canvas context using the ctx variable. Then I addfill()

Awesome, I've successfully created a player object and drew it on my browser using the HTML element canvas and JavaScript. Now we need to position the object in our browser. For this game I want my player to be on the left side AND middle of the browser and the enemy on the right side. Our final object position should look like something in the above image.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;

Class Player {
  constructor(x, y, radius, color) { 
        this.x = x
        this.y = y
        this.radius = radius 
        this.color = color 
  }

  draw() {
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
        ctx.fillStyle = this.color
        ctx.fill()
  }

}

const player = new Player(100, 100, 30, 'blue');

To ensure that my image is always in that position, regardless of window size, we need to set up some new global variables that reference the canvas height and width.

Like a Stephen King novel I'm going to end with a little suspense. In the next entry I will model physics inside of my game and make an interactive object.

what i learned last week: the basics of execution context

reyes2981 — Mon, 09 Aug 2021 22:23:05 +0000

Introduction

Welcome to this weeks entry of my WILLW series. Today, I'm going over the basics of execution context.

What is the execution context

In JavaScript, execution context is an abstract concept that holds information about the environment within which the current code is being executed.

Types of execution context

There are three types of execution context and we are going to focus on two.

Global Execution Context
Function Execution Context

First, Global Execution Context is the default execution context in which JavaScript code start its execution when the file first loads in the browser.

All of the global code i.e. code which is not inside any function or object is executed inside the global execution context. GEC cannot be more than one because only one global environment is possible for JavaScript code execution as the JavaScript engine is single threaded.

Remember, a call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

Next up, we have the Function Execution Context which is defined as the context created by the JavaScript engine whenever it finds any function call. When a function executes, an execution context is created and virtually placed on top of the global execution context, the stacking of execution context is, again, called the call stack. Once a function has finished executing, it gets popped off of the call stack.

The two phases of execution context creation

The creation of a execution context occurs in two phases

Creation
Execution

The creation phase

When a script executes for the first time, the JavaScript engine creates a Global Execution Context. During this creation phase, it performs the following tasks:

Create a global object i.e., window in the web browser or global in Node.js.
Create a this object binding which points to the global object above.
Setup a memory heap for storing variables and function references.
Store the function declarations in the memory heap and variables within the global execution context with the initial values as undefined.

The Execution Phase

During the execution phase, the JavaScript engine executes the code line by line. In this phase, it assigns values to variables and executes the function calls.

That is it for this entry!

what i learned last week: javascript conditionals

reyes2981 — Sun, 01 Aug 2021 12:33:36 +0000

Right out of the gate, what actions do you take when you're thirsty? hungry? sleepy? Maybe you drink a Gatorade, eat a burger or go to sleep. Keep the below pseudocode in the back of your mind because we are going to build on it.

if thirsty => drink water.
else => don't drink water.

if hungry => eat tamal.
else => don't eat tamal.

if sleepy => sleep
else => write code.

Conditional statements are used to perform different actions based on different conditions. We can also refer to this as the control flow which is the order in which the computer executes statements in a script. In JavaScript there are a couple of ways to implement a conditional based control flow structure.

if...else statement,
switch statement,

First, if...else executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed. We can make this happen with the Strict equality (===) operator which checks whether its two operands are equal, returning a Boolean result.

let thirsty = true; // The let statement declares a block-scoped local variable, optionally initializing it to a value.
if (thirsty === true) { // You should prefer Strict Equality Operator for comparisons.
console.log('I need H20'); // displays message on console.
}

Since the above condition returns a truthy value the code runs. Neat, right!

Note: In JavaScript a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN). A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Boolean context.

Next, I've added else to our statement.

let thirsty = false;

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log('I/'m not thirsty');
}

// What do you think is going to be displayed in the console? Copy and paste the above code into your browsers console to see the answer.

Above I've created the thirsty variable and inside of it have stored false. Remember, false is a boolean and it's value is falsy. Next, we want to create some sort of logic that logs 'I need H20' or I'm not thirsty' to our console. In this example we want to display a statement on our console depending on the value of a condition. Were you able to figure out what will be displayed in the console?

// => I'm not thirsty

^^SOLUTION^^

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log("I'm not thirsty");
}

Again, The if...else statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed. The reason why the console displays I'm not thirsty is because the two operands in the condition are NOT equal.

let thirsty = false;

if (thirsty === true) {
    console.log('I need H20');
} 
else {
    console.log("I'm not thirsty");
}

// => I'm not thirsty

Now that we've briefly gone over a basic if...else statement let's move on.

Next, the switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.

switch (expression) {
    case value1:
        // Statements
        break;
    case value2:
        // Statements
        break;
    default:
        // Statements
        break;
}

Ok, but what does that mean? Lets break it down.

The value of expression is checked for a strict equality to the value from the first case (that is, value1) then to the second (value2) and so on.
If the equality is found, switch starts to execute the code starting from the corresponding case, until the nearest break (or until the end of switch).
If no case is matched then the default code is executed (if it exists).

switch (expression) {
    case value1:
        // Statements
        break;
    case value2:
        // Statements
        break;
    default:
        // Statements
        break;
}

Switch Statement Example:

const mood = 'thirsty';

switch (mood) {
    case 'thirsty':
        drink = 'water';
        console.log(`I'm thirsty so I'm going to drink ${drink}.`);
        break;
    case 'hungry':
        food = 'burger';
        console.log(`I'm hungry so I'm going to eat a ${food}.`);
        break;
    case 'sleepy':
        action = 'sleep';
        console.log(`I'm sleepy so I'm going to ${action}.`);
        break;
}

// => I'm thirsty so I'm going to drink water.