DEV Community: JerryMcDonald

Color in React.js using percentages and a custom gradient.

JerryMcDonald — Fri, 25 Feb 2022 19:59:43 +0000

Do you need to create a gradient array in React.js that is a length of your choice, incorporating the colors of your choice? Then You came to the right blog!

For this exercise, I will be creating a gradient array of length 31 and grabbing a color from that array based on the percentage provided. For example, %50 percent will be in the middle, and 100% will be the color at the end.

This exercise will be quite easy thanks to a nifty package called javascript-color-gradient created by Adrinlolx

Install and import the package

npm i javascript-color-gradient

import colorGradient from 'javascript-color-gradient';

Here is a quick look at my dummy data.

const dataForBlog = [
    { percentage: '0%', decimal: 0 },
    { percentage: '10%', decimal: 0.1 },
    { percentage: '20%', decimal: 0.2 },
    { percentage: '30%', decimal: 0.3 },
    { percentage: '40%', decimal: 0.4 },
    { percentage: '50%', decimal: 0.5 },
    { percentage: '60%', decimal: 0.6 },
    { percentage: '70%', decimal: 0.7 },
    { percentage: '80%', decimal: 0.8 },
    { percentage: '90%', decimal: 0.9 },
    { percentage: '100%', decimal: 1 },
  ];

Let's create an array of Hex color codes that will be the template for our gradient.

If you decide to only use two colors then our function will create 31 color codes that are between them.

// simple gradent between orange and white
  const gradentParams = ['#FFAC1C', 'FFFFFF'];

But I want to create a more complex gradient from 5 colors

  // 'red','pink','white','lightgreen','forestgreen'
  const gradentParams = ['#FF0000', '#FFC0CB', '#FFFFFF', '#90EE90', '#228B22'];

Then we can create our function to take our array of HEX colors, the desired length of the gradient, and our percentage (which we will represent as a decimal)

const colorCellFromValue = (params, value, midpoint = 31) => {
    const getColorIndex = Math.round(midpoint * value);
    return colorGradient
      .setGradient(...params)
      .setMidpoint(midpoint).getColor(getColorIndex === 0 ? 0.01 : getColorIndex);
  };

The colorGradient npm page (https://www.npmjs.com/package/javascript-color-gradient) has documentation to understand the built-in functions. As for my code:
I multiplied the midpoint by the value to get the desired index. getColor does not play nice with zeros, so I added a quick conditional. Let me know if you come up with a cleaner solution!

Now in my case, because I want to use this function to color the background of a table, I will call it in some in-line CSS. Dont mind my class names.

  return (
    <div className="metrics-table">
      <table className="metrics-table__table">
        <thead className="metrics-table__header">
          <tr className="metrics-table__header-row">
            <th
              colSpan="1"
              className="metrics-table__header-cell"
            >
              <div>
                Example Data For Blog
              </div>
            </th>
          </tr>
        </thead>
        <tbody className="metrics-table__body">
          {Object.keys(dataForBlog).map((keyName) => (
            <tr key={keyName} className="metrics-table__body-row">
              <td className="metrics-table__body-cell" style={{ backgroundColor: colorCellFromValue(gradentParams, dataForBlog[keyName].decimal) }}>
                {dataForBlog[keyName].percentage}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

There you have it. If this helped you with your specific task throw me a heart! Have a nice day.

C++ Variables, Functions, Conditionals, and Logic. In VSCode.

JerryMcDonald — Sat, 19 Dec 2020 21:23:46 +0000

In this series, I am reviewing the C++ basics, primarily for those who already understand a coding language and are curious about what makes C++ different.

Here is part one.
Create a C++ program. Run in Visual Studio Code.

Key concepts I am going to review in this blog:

Structuring your .cpp file
void and int type functions
Variable type and scope
C++ Random number generation
Conditionals
Compile and play!

Structuring your .cpp file

Open your C++ folder in Visual Studio Code and create a spock.cpp.

Then create a skeleton for the program.

#include <iostream>
#include <cstdlib>

using namespace std;

void showHand(int num) {
}

int main() {
}

#include <iostream>:
<iostream> is our pre-processor directive providing input and output functionality, <cstdlib> defines several general-purpose functions, including a random number generator, which we will need.

using namespace std
std, which is the C++ standard library, is written into the core C++ language. Declaring our namespace with using namespace std provides scope to our identifiers, improving organization when our code becomes more complex and reducing typing. std::cout becomes cout, and std::rand() becomes rand().

C++, like most coding languages, works from top to bottom, so if we were to create handThrown() under the main() function, then an error would occur.

`void` and `int` type functions

When declaring functions, we also need to state what data type we expect returned. In the case of our showHand() function, we do not expect it to return a value; instead, we want it to perform a task, then have control return back to the caller. The void keyword specifies that the function does not return a value.

The C++ standard requires main() to return int. Even if we leave the return statement out, it will return zero, indicating to the operating system that the program ran successfully.

Variable type and scope

Create a user variable and ask the user to input a number.

int user;

  cout << "=================================\n";
  cout << "rock paper scissors lizard spock!\n";
  cout << "=================================\n";

  cout << "1) ✊ rock\n";
  cout << "2) ✋ paper\n";
  cout << "3) ✌️  scissors\n";
  cout << "4) 🦎 lizard\n";
  cout << "5) 🖖 Spock\n\n";

  cout << "shoot: ";

  cin >> user;

C++ is a strongly-typed language. It enforces strict restrictions on intermixing values with different data types. On the other hand, Javascript (created in C++) resembles C++ closely in syntax but is a weakly typed language, meaning its variables still have a type but have looser type rules.

C++ basic data types include:

int: integers
double: floating-point numbers
char: individual characters
string: a sequence of characters
bool: true/false

The user variable is considered locally scoped. It can be used only by statements inside the main() functions block of code. user is not accessible within our showHand() function. Global variables are declared outside of all the functions and will hold their value throughout your program's lifetime.

C++ Random number generation

Generate a random number between 1 and 5 and assign it to the computer variable.

  srand(time(NULL));
  int computer = 1 + rand() % 5 ;

srand(x) is used to set the seed of the random number generator algorithm used by the function rand(). In combination with (time(NULL), we can use our computers 'continually changing' internal clock to set the seed to a different value on each run.

To produce a random integer within a given range, we can use the following formula:
int number = a + rand( ) % n;
a = the first number in your range
n = the number of terms in your range

Conditionals

C++ supports the usual logical conditions from mathematics and the if-else and switch constructs you also see in C, Java, JavaScript and Visual Basic .

Javascript was written in C++, and the similarities in syntax show in the switch and if-else statements.

Fill your showHand() function with the following switch statement.

void showHand(int num) {
  switch(num) {
    case 1:
    cout << "rock! ✊ \n";
    break;
    case 2:
    cout << "paper! ✋ \n";
    break;
    case 3:
    cout << "scissors! ✌️ \n";
    break;
    case 4:
    cout << "lizard! 🦎 \n";
    break;
    case 5:
    cout << "spock! 🖖 \n";
    break;
  }
}

When writing, functions are an excellent way to reduce code length if a piece of logic is required multiple times. In our program's case, we can use showHand() for both the user's and computer's choice.

  cout << "You chose ";
  showHand(user);

  cout << "The computer chose ";
  showHand(computer);

Here is the logic behind Rock, Paper, Scissors, Lizard, Spock:

  rock > scissors
  scissors > paper
  paper > rock
  lizard > spock
  spock > scissors
  scissors > lizard
  lizard > paper
  paper > spock
  spock > rock
  rock > lizard

With that logic in mind, we can write conditionals for all winning factors or a tie. For the sake of brevity, I did not include them all here.

// note: more code needed; check repo
  if (user == rock && computer == scissors) {

    cout << " You Win!\n";

  } else if (user == computer) {

    cout << " Tie!\n";

  } else {

    cout << "You Lose!\n";

  }

6. Compile and play!

Here is my repo with the full code:
github.com/JerryMcDonald/spock.cpp

In your bash terminal, compile and run the program.

g++ spock.cpp -o spock
./spock

As Sheldon explains, "Scissors cuts paper, paper covers rock, rock crushes lizard, lizard poisons Spock, Spock smashes scissors, scissors decapitates lizard, lizard eats paper, paper disproves Spock, Spock vaporizes rock, and as it always has, rock crushes scissors."

Thanks for reading. If you want to connect, here is my Linked-In

Stay Focused || Love your code

Resources

Create a C++ program. Run in Visual Studio Code.

JerryMcDonald — Wed, 16 Dec 2020 23:38:12 +0000

Do you think that C++ is too old school to learn? Think again! It is still a highly sought after skill. Learning C++ will better prepare you for learning C# and give you a broader skill set!

Here are the key concepts I am going to review in this blog:

Create a hello world program in C++
Installing Microsoft Visual Studio Code
Adding C/C++ language extension
Install the g++ compiler to compile the source code and GDB
Compile and run the program!

Create a hello world program

Create a folder on your desktop that will hold your C++ files and call it whatever you like. Open the notepad and type the following code.

You could also create your .cpp file in Visual Studio Code.

#include <iostream>
int main() 
{
  std::cout << "Hello World!\n";
  std::cout << "Welcome to C++ in VSCode!\n";
}

#include <iostream>:
"Pre-processor directive." This code will instruct the compiler to locate the file that contains code for the library known as iostream.

int main() {}:
Every C++ program must have a function called main(). It will house all of the instructions for our program. The main() function is where we will start writing our code.

std::cout:
The 'character output stream"; is pronounced "see-out."
<< is an operator

In C++, you need double quotes around the text. Just like in Javascript, the ";" is the punctuation that will tell the computer that you are at the end of a statement. When you are typing text for your output, you need to remember to type /n inside the double quotations to move to the next line.

Save your word doc as a .cpp file in your new folder.

Installing Microsoft Visual Studio Code

The instructions for installing Visual Studio Code is very similar on Mac and PC.

I'm on Windows, So I can follow the installer instructions and keep all of the default options.

For Mac users, drag the Visual Studio Code app over to your application folder.

Adding C/C++ language extension

Run VSCode. Under the Welcome tab, click the open folder button. Then select your C++ folder on your desktop.

You should see your "helloWorld.cpp" file. When you select it, you should see a popup for recommended extensions that can run it. Or, you can click on your extensions tab on the left and search for one.

Install the g++ compiler to compile the source code and GDB

Mac User? You have it easy (surprise surprise); skip this step.

Windows User? This guide will go through this step in more detail:
https://code.visualstudio.com/docs/cpp/config-wsl.

I can summarize the steps for you. You will have to install the g++ compiler to compile the source code and GDB for debugging. These tools do not come by default on Ubuntu, so follow these steps in your bash shell for WSL.

Run apt-get update to update the Ubuntu package lists. (An out-of-date distro can sometimes interfere with attempts to install new packages).

sudo apt-get update

Now From the command prompt, install the GNU compiler tools and the GDB debugger by typing:

sudo apt-get install build-essential gdb

There you go, now you should be caught up to the glorious Mac users.

Compile and run the program!

Now we are going to compile our .cpp file. In your bash terminal.

The command to compile a file is g++.

If you would like to give the executable file a specific name, you can do this by typing -o and the title after your .cpp file.

g++ helloWorld.cpp -o HelloWorld

Now that our .cpp program has been translated into machine language. Run it.

./helloWorld

Great work. Your first C++ program.

Stay Focused || Love your code

Automatically Restart Your Node.js Application Using Nodemon

JerryMcDonald — Mon, 27 Jul 2020 12:01:09 +0000

While developing your node.js application, you may get tired of restarting my server after each change made on the back end. Nodemon is a CLI (command-line interface ) utility that can wrap your node.js application. It can watch the files in your server folder and automatically restart when changes are detected.

What is the great thing about getting started with nodemon? It does not require any additional changes to your code or your method of development.

You can install it locally for just your current application or even install it globally for all of your projects.

Global install

$ npm install nodemon -g

What is the benefit of installing locally? It will get listed as one of the developer dependencies on your project in the package.json file. This way, you can create a script to run Nodemon that you and the rest of your team can use.

Local Install

npm install nodemon --save-dev

Getting started

Nodemon can handle the same arguments passed to a Node script. If your node.js or express setup is in a server.js or an index.js file, begin your application like you would with Node.

$ nodemon server.js

Like running your script with Node, you can pass in arguments at the end.

$ nodemon server.js 8080

By default nodemon will watch the following extensions in the specified directory or any of it's sub-directories.

.js
.mjs
.json
.coffee
.litcoffee

If you need to restart your application while Nodemon is running manually. Instead of stopping and restarting your app, you can type rs and then enter. This action will do a quick reboot of your process.

If at any point you would like to look at the available CLI options, then you can use -h.

nodemon -h

Here are a few of the main options that you have access to:

`--delay`

Maybe you would like to wait for several files to change before restarting your application in some situations. By default, the timeout for checking for changes is one second. You may not want to restart your application multiple times unnecessarily; you can use the delay option as a throttle.

The below command will have Nodemon wait for 8 seconds to restart the server after detecting a change.

nodemon --delay 8 server/index.js

You can also specify the wait time in milliseconds using a float or the time specifier (ms). The following two commands will have Nodemon wait for 3.5 seconds.

nodemon --delay 3.5 server/index.js

nodemon --delay 3500 server/index.js

exec

Suppose you would like to run non-node scripts. You can specify other programs to execute and run. For example, if you are running typescript files, then you are likely using ts-node.

nodemon --exec "ts-node" server/index.ts

ext

With ext, you can specify what type of extensions you would like Nodemon to watch. Provide a comma-separated list of the file-extensions.

nodemon server/index.js --ext js, ts

watch

Every file in the directory that matches the default or specified file type will be run by default. Would you like to be more direct about the files you watch for changes? Then you can specify them with the --watch option.

In the below command example, Nodemon will only watch for changes in the app or libs directory.

nodemon --watch app --watch libs server/index.js

ignore

If you would also like to ignore specific directories, you can use the following --ignore command.

nodemon --ignore lib/ --ignore test/ server/index.js

You can also specify a file to ignore

nodemon --ignore lib/app.js

Of course, the best way to use Nodemon is by creating a script for it inside your package.json.

"scripts": {
    "start": "...",
    "dev-server": "nodemon server/index.js",
}

You can also add configurations in your package.json with any of the available options.


  "nodemonConfig": {
    "watch": [
      "server"
    ],
    "ext": "ts",
    "ignore": [
      "*.test.ts"
    ],
    "delay": "3.5",
    "execMap": {
      "ts": "ts-node"
    }
  },

That concludes this walkthrough. Nodemon is one of those npm packages that you wish you would have learned about sooner. But one of the most exciting things about software development is the surprising utilities you find when not even looking. Thanks for reading, and I hope you have learned about a useful tool that can help you speed up your application development.

Stay Focused || Love your code!

Resources:

Nodemon npm
[Restart You Apps Using Nodemon] https://www.digitalocean.com/community/tutorials/workflow-nodemon)
Using express and nodemon

A shareable whiteboard with Canvas, Socket.io, and React.

JerryMcDonald — Fri, 17 Jul 2020 18:23:34 +0000

Do you need a shareable Canvas for your React Project?

The Socket.io documentation does a great job of getting you started with a whiteboard, but unfortunately, it is built-in HTML. In this blog, we see what it takes to create a whiteboard With React. Then make it shareable through a socket.io connection!

Start by using create-react-app.

npx create-react-app my-whiteboard
cd my-whiteboard

Go ahead and bring in the npm packages you will need.

npm i socket.io
npm i socket.io-client

Starting with the back end

Let us begin with the easy part. Creating our socket server and listening for a connection. In your my-whiteboard directory, you want to create a folder called server and a file named index.js.

Create-react-app already comes with express as an installed node package, so let us make use of it at the top of our index.js. The var app = express() statement creates a new express application for you.

We can transfer data over the HyperText Transfer Protocol (HTTP) with a Node.js built-in module called HTTP. So bring it in with const HTTP = require('HTTP').

Next, we will essentially turn our computer into a server with HTTP.createServer(app).

Here is where we are at so far:

const express = require('express');
const app = express();

const http = require('http');
const server = http.createServer(app);

Now you should pass your created server to socket.io.

const socket = require('socket.io');
const io = socket(server);

If you do not understand how socket works, the socket.io documentation sums it up quite nicely.

Socket.io is a library that enables real-time, bidirectional, and event-based communication between the browser and the server.

We will essentially establish our server, and socket.io will be listening for a 'connection.' When the client-side socket emits a signal, our server-side will make that connection and execute any commands create. Usually, this will involve 'emitting' data back to the client.

After we establish the connection, we want to listen for a drawing event. We can then take that data passed to use and broadcast it, attaching the 'drawing' label.

io.on('connection', onConnection);

function onConnection(socket){
  socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
}

Next, we can decide on a port to listen on. Make sure to call .listen on the server, not the app.

Here is a look at our entire index.js:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const socket = require('socket.io');
const io = socket(server);

io.on('connection', onConnection);

function onConnection(socket){
  socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
}

const port = 8080;
server.listen(port, () => console.log(`server is running on port ${port}`));

Creating our Canvas Application

Before we get to the front end code, let us talk about our file structure.

Make a styles folder inside of the src folder.
Create a board.css file inside of your new styles folder.
Create a Board.js file in the src folder

Here is a look at my front end file structure:

In this demo, we can take the app.js file out of the application and replace it with the board. Go into your index.js file and render your new Board Component.

import Board from './Board.js';

ReactDOM.render(
  <React.StrictMode>
    <Board />
  </React.StrictMode>,
  document.getElementById('root')
);

I have included the full code for the board.js at the bottom of this blog.

If you would like to hang around and read about what's inside, we can do that too!

board.css

In our board.css can set our board height and width to 100%, then set the position to absolute. Then the whiteboard fills in the entirety of its container.

We can then set our color classes, necessary because of how we will be changing colors on click.

Here is a look at the board.css:

 * {
  box-sizing: border-box;
}

.whiteboard {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.colors {
  position: fixed;
}

.color {
  display: inline-block;
  height: 48px;
  width: 48px;
}

.color.black { background-color: black; }
.color.red { background-color: red; }
.color.green { background-color: green; }
.color.blue { background-color: blue; }
.color.yellow { background-color: yellow; }

Board.js

At the top of your Board.js, you should bring in your React tools, the board.css, and io from the socket.io-client package we installed earlier.

import React, { useRef, useEffect } from 'react';
import io from 'socket.io-client';
import './styles/board.css';

We can now useRef to grab our whiteboard, color, and socket elements, references we will create later when we render our HTML. If you are unfamiliar with useRef and would like to learn more, there is an excellent blog about it here

const Board = () => {
  const canvasRef = useRef(null);
  const colorsRef = useRef(null);
  const socketRef = useRef();

We will now begin our useEffect hook. It will make sure our code within runs when the component loads.

useEffect(() => {

Set the current property of our canvisRef element to the variable canvas. Then, by calling getcontext('2d') we will set the drawing context of our canvas to a 2d plane and thus giving us access to some unique 2d methods built into the canvas.

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

The Colors

Now add click listeners to your color palette. Set your starting color to black. Then create a color update function. Then loop through your color elements and execute onColorUpdate when clicked.

    const colors = document.getElementsByClassName('color');

    const current = {
      color: 'black',
    };

    const onColorUpdate = (e) => {
      current.color = e.target.className.split(' ')[1];
    };

    for (let i = 0; i < colors.length; i++) {
      colors[i].addEventListener('click', onColorUpdate, false);
    }
    let drawing = false;

The Drawing

Create a drawLine function. The beginPath() and moveTo() methods move the path to the canvas's specified point. The lineTo() method will take in the coordinates of our ending point. Then stroke() will draw the path we have defined. Finally, we can use closePath() to bring us back to our starting point.

When creating draw lines, we will emit the line back to the socket server. The emit variable is set to a boolean because we only want to send the lines we draw, not the lines we have received. (we do not want to create an infinite loop)!

    const drawLine = (x0, y0, x1, y1, color, emit) => {
      context.beginPath();
      context.moveTo(x0, y0);
      context.lineTo(x1, y1);
      context.strokeStyle = color;
      context.lineWidth = 2;
      context.stroke();
      context.closePath();

      if (!emit) { return; }
      const w = canvas.width;
      const h = canvas.height;

      socketRef.current.emit('drawing', {
        x0: x0 / w,
        y0: y0 / h,
        x1: x1 / w,
        y1: y1 / h,
        color,
      });
    };

Mouse movement and clicks

The next three functions will check for mouse movement, a mouse click, or finger touch. They will utilize the drawLine function we just created. onMouseDown will check for a click, then set the drawing variable to true and begin our line.

The onMouseMove function will check if we have begun our line. If so, It will grab our mouse's start position and track its path, sending the place to our drawLine function to be rendered and shared.

Finally, when the user lets off their mouse or finger, the drawing variable will get to false, and a final small line is drawn and emitted.

Without some throttle, onMouseMove would get called a ridiculous amount of times to create a throttle function in the following step.

    const onMouseDown = (e) => {
      drawing = true;
      current.x = e.clientX || e.touches[0].clientX;
      current.y = e.clientY || e.touches[0].clientY;
    };

    const onMouseMove = (e) => {
      if (!drawing) { return; }
      drawLine(current.x, current.y, e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY, current.color, true);
      current.x = e.clientX || e.touches[0].clientX;
      current.y = e.clientY || e.touches[0].clientY;
    };

    const onMouseUp = (e) => {
      if (!drawing) { return; }
      drawing = false;
      drawLine(current.x, current.y, e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY, current.color, true);
    };

The throttle

We do not want to overload our socket connection. A throttle can help us. Essentially this function will take a callback and a delay time (in milliseconds). It works by grabbing the current time and comparing it to the time throttle was called initially.

    const throttle = (callback, delay) => {
      let previousCall = new Date().getTime();
      return function() {
        const time = new Date().getTime();

        if ((time - previousCall) >= delay) {
          previousCall = time;
          callback.apply(null, arguments);
        }
      };
    };

Setting the event listeners and canvas resizing

Now you can have the canvas listen for mouse clicks or touch.

You also want to have the canvas listen for a screen resize and set the current canvas width and height to the changed window.

    const onResize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };

    window.addEventListener('resize', onResize, false);
    onResize();

Our client-side socket connection:

Now create the onDrawingEvent function that will fire when the client-side socket receives a 'drawing' signal from the server. When the drawing object is received, we want to send it to the drawLine function, omitting the last emit parameter.

    const onDrawingEvent = (data) => {
      const w = canvas.width;
      const h = canvas.height;
      drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
    }

    socketRef.current = io.connect('/');
    socketRef.current.on('drawing', onDrawingEvent);
  }, []);

The Canvas and Color elements

Return and render your canvas and color elements along with their references and classes. If you wanted to give the color blocks or the canvas a unique look you can pick a style library or modify the CSS

   return (
    <div>
      <canvas ref={canvasRef} className="whiteboard" />

      <div ref={colorsRef} className="colors">
        <div className="color black" />
        <div className="color red" />
        <div className="color green" />
        <div className="color blue" />
        <div className="color yellow" />
      </div>
    </div>
  );
};

Here is the full board.jsx for an easy copy and paste

import React, { useRef, useEffect } from 'react';
import io from 'socket.io-client';
import './styles/board.css';


const Board = () => {
  const canvasRef = useRef(null);
  const colorsRef = useRef(null);
  const socketRef = useRef();

  useEffect(() => {

    // --------------- getContext() method returns a drawing context on the canvas-----

    const canvas = canvasRef.current;
    const test = colorsRef.current;
    const context = canvas.getContext('2d');

    // ----------------------- Colors --------------------------------------------------

    const colors = document.getElementsByClassName('color');
    console.log(colors, 'the colors');
    console.log(test);
    // set the current color
    const current = {
      color: 'black',
    };

    // helper that will update the current color
    const onColorUpdate = (e) => {
      current.color = e.target.className.split(' ')[1];
    };

    // loop through the color elements and add the click event listeners
    for (let i = 0; i < colors.length; i++) {
      colors[i].addEventListener('click', onColorUpdate, false);
    }
    let drawing = false;

    // ------------------------------- create the drawing ----------------------------

    const drawLine = (x0, y0, x1, y1, color, emit) => {
      context.beginPath();
      context.moveTo(x0, y0);
      context.lineTo(x1, y1);
      context.strokeStyle = color;
      context.lineWidth = 2;
      context.stroke();
      context.closePath();

      if (!emit) { return; }
      const w = canvas.width;
      const h = canvas.height;

      socketRef.current.emit('drawing', {
        x0: x0 / w,
        y0: y0 / h,
        x1: x1 / w,
        y1: y1 / h,
        color,
      });
    };

    // ---------------- mouse movement --------------------------------------

    const onMouseDown = (e) => {
      drawing = true;
      current.x = e.clientX || e.touches[0].clientX;
      current.y = e.clientY || e.touches[0].clientY;
    };

    const onMouseMove = (e) => {
      if (!drawing) { return; }
      drawLine(current.x, current.y, e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY, current.color, true);
      current.x = e.clientX || e.touches[0].clientX;
      current.y = e.clientY || e.touches[0].clientY;
    };

    const onMouseUp = (e) => {
      if (!drawing) { return; }
      drawing = false;
      drawLine(current.x, current.y, e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY, current.color, true);
    };

    // ----------- limit the number of events per second -----------------------

    const throttle = (callback, delay) => {
      let previousCall = new Date().getTime();
      return function() {
        const time = new Date().getTime();

        if ((time - previousCall) >= delay) {
          previousCall = time;
          callback.apply(null, arguments);
        }
      };
    };

    // -----------------add event listeners to our canvas ----------------------

    canvas.addEventListener('mousedown', onMouseDown, false);
    canvas.addEventListener('mouseup', onMouseUp, false);
    canvas.addEventListener('mouseout', onMouseUp, false);
    canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);

    // Touch support for mobile devices
    canvas.addEventListener('touchstart', onMouseDown, false);
    canvas.addEventListener('touchend', onMouseUp, false);
    canvas.addEventListener('touchcancel', onMouseUp, false);
    canvas.addEventListener('touchmove', throttle(onMouseMove, 10), false);

    // -------------- make the canvas fill its parent component -----------------

    const onResize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };

    window.addEventListener('resize', onResize, false);
    onResize();

    // ----------------------- socket.io connection ----------------------------
    const onDrawingEvent = (data) => {
      const w = canvas.width;
      const h = canvas.height;
      drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
    }

    socketRef.current = io.connect('/');
    socketRef.current.on('drawing', onDrawingEvent);
  }, []);

  // ------------- The Canvas and color elements --------------------------

  return (
    <div>
      <canvas ref={canvasRef} className="whiteboard" />

      <div ref={colorsRef} className="colors">
        <div className="color black" />
        <div className="color red" />
        <div className="color green" />
        <div className="color blue" />
        <div className="color yellow" />
      </div>
    </div>
  );
};

export default Board;

Make it live

Run the following commands in your app terminal.

npm run start

Then open another app terminal and begin your server:

node server/index.js

You can visit your localhost and see your whiteboard. If you open another window at the localhost, you establish the socket connection and share your drawings.

If you were having trouble getting a canvas whiteboard working with a React front end, I hope this has helped jump-start your project.

Stay Focused || Love your code!

Resources:

How socket.io interacts with node.js in a WebRTC application.

JerryMcDonald — Fri, 10 Jul 2020 18:34:08 +0000

Are you building an application that will utilize webRTC for real-time communication features? If so, and you have a node.js environment in the back end of your application, you will likely want to use Socket.io to create connections. In this blog, I will add Socket.io to your server-side code and create some event listeners and handlers.

Let's first talk a little about the WebRTC portion of our application. WebRTC stands for real-time Web communication, and as the name suggests, we are talking about how peers communicate in real-time from inside their browser. What is interesting about webRTC streams (for example, voice and video) is they are 'server-less communication.' But I do not mean they do not require a server to create the connection; once established, the streaming in your web application will continue in the browser. They do not need more work from your server.

To get the video and voice stream communication established between the two web browsers, we can use socket.io to establish the 'handshake.'

Socket.io enables real-time, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser and a server-side library for Node.js. Both components have a nearly identical API.

https://en.wikipedia.org/wiki/Socket.IO

Down below, we will watch the server-side library, listening for a connection from our webRTC front end application.

The first thing you want to do in your Node.js application is to make sure you have express installed. Express.js is considered the de facto standard server framework for Node.js.

$ npm install express

Now install socket.io, and we can get started.

npm i socket.io

The following code is in the server.js file. The first thing you want to do is require and Call the express function "express()" that will put a new Express application inside the app variable (to start a new Express application)

const express = require('express');
const app = express();

HTTP is a built-in Node.js module that allows Node.js to transfer data over the HyperText Transfer Protocol (HTTP). It will enable us to use the HTTP.createServer() method to create the server object. We are turning our computer into an HTTP server.

const http = require('http');
const server = http.createServer(app);

Now we can import socket.io and create a socket server

const socket = require('socket.io');
const io = socket(server);

Then creating a room object will allow us to store users that connect to our video chat.

const rooms = {};

We will create an event listener with io that will wait for that 'connection' signal. I will show the whole connection function at once.

io.on('connection', socket => {
  // attach an event listener
  // Grab the room ID from the browser
  socket.on('join room', roomID => {
    // check if roomID exists
    if (rooms[roomID]) {
      // if so add the joining users socket id to the ids array
      // (each socket will have a unique id)
      rooms[roomID].push(socket.id);
    } else {
      // else create the key/value pair
      rooms[roomID] = [socket.id];
    }
    // check if you are currently user a joining or user b
    const otherUser = rooms[roomID].find(id => id !== socket.id);
    if (otherUser) {
      // if the other user exists in the room..
      // (user b) emit a 'current' back up to ourselves with the other users socket id
      socket.emit('other user', otherUser);
      // emit the other users socket.id
      socket.to(otherUser).emit('user joined', socket.id);
      // you can see how this plays out more on the front end.
    }
  });

In the above code snippet. Once a connection is established with io.on('connection'), a socket object is created. This object will allow us to create more event listeners, and it will have a unique socket id. We then create the socket.on('join room') event listener that will wait from a signal from our front end app called join room. When this event fires, we can store the unique room id (also generated in the front) along with the unique socket id.

Because the current webRTC application's scope is only a peer to peer video connection (not group), that means there will only be two users in the room. You can use some creative JavaScript to check if another user is present in the room you joined.
rooms[roomID].find(id => id !== socket.id)
And if there is another user, we can 'emit' another signal back to the front of the application that will carry along the other user's socket information.

      socket.emit('other user', otherUser);
      // emit to user a our socket.id
      socket.to(otherUser).emit('user joined', socket.id);

Because socket.io deals with bi-directional communication, we need to establish the 'offer' and 'answer' listeners to create the 'handshake' between servers. In each case of receiving an offer and sending out an answer, we handle a payload. The payload is essentially the data carried within a packet or other transmission unit.

  // Now, let us create a 'handshake.'

  // when offer gets fired
  socket.on('offer', payload => {
    io.to(payload.target).emit('offer', payload);
  });

  // the payload contains who we are as a user and the 'offer' object.

  // listen for the answer event
  socket.on('answer', payload => {
    io.to(payload.target).emit('answer', payload);
  });

The next bit of code in establishing our connection is ice-candidate. The ICE stands for Interactive Connectivity Establishment. It is all about finding the best method for connecting to the network of the other peer. Think of your network as a large neighborhood; an ICE candidate would be the route you would take to reach a particular house. Because a lot is going on behind the networking scenes, socket.io needs to know what connection points it has to contact the other peer.

  // each peer will come up with an 'ice server'
  socket.on('ice-candidate', incoming => {
    io.to(incoming.target).emit('ice-candidate', incoming.candidate);
  });
});

We now can create our HTTP server and have it listen on our port

server.listen(8000, () => console.log('server is running on port 8000'));

That does it for setting up and understanding the back-end library of our socket.io application. Because the front end library has a nearly identical API. Once you understand how the event listeners and emitters work, you can find a webRTC library you would like to use and begin building your application.

As Always,
Stay Focused || Love your code!

Resources:

Understanding React Hooks

JerryMcDonald — Mon, 06 Jul 2020 13:43:44 +0000

React Hooks are a feature that is new to react since the React 16.8 update. They give you the ability to use state features without creating a class constructor. Hooks allow developers to break up complex class constructors even further. Developers wanted an easier way to break down substantial class components, extract stateful components to function or another element, and cut down on intricate patterns like props and higher-order components. Hooks solved the problem of React functions not having "state" in them.

According to the React documentation on hooks, the company has no plans to eliminate the class component. The React team would like developers to gradually adapt hooks and combine the knowledge with React skills they already know. I am going to talk about some hooks you should know to get started. But before we do, let us look at some of the rules you need to follow while using hooks.

Rules of hooks

You only want to call hooks at the top level of your function. Do not use useState in a loop, conditional, or nested function. Because for React to keep track of your hooks, they need to be called in the same order each time your functional component runs.
You only want to call hooks from React Functional Components. You will need these inside a class component or outside of a component.
When you learn enough to create custom hooks. The names of your hooks must start with 'use.'

Let's take a look at the two hooks you already have access to in your React application. useState and useEffect.

State Hook

The first hook I will talk about is 'useState,' designed to hold a small-ish amount of data in a function components state. The great thing about 'useState' is that you can assign any data type you would like. You can useState with an array, an object, a number, a string, or a boolean. Each useState call will create a new single piece of state.

Let look at an example of a state variable that I would like to call visible. I would also like to change the value of visible at any point in my functional component.

  // Create a piece of state, and initialize it to `true`
  // `visible` will hold the current value of the state,
  const [visible, setVisible] = useState(true);

In the above example, we can see that useState is returning an array of two components. A visible element that will hold the state's value and a setVisible function that will change the value of the state.

function Profile() {
  const [visible, setVisible] = useState(true);

  function toggleVisibility() {
    setVisible(!visible);
  }

But what if we need another way to do the functionality above but by using an updater function. Using prevState can be useful if you are updating your state inside of a closure. The below example will have the same outcome as above.

function Profile() {
  const [visible, setVisible] = useState(true);

  function toggleVisibility() {
    setVisible(prevState => !prevState);
  }

We can also save arrays and objects to our state.

// array example
const [someArray, setSomeArray] = React.useState([]);

setSomeArray(prevState => [...prevState, 'newdata'] );

You can see here when we are setting a new value to the state array; we utilize the ES6 spread operator to concatenate the prevState array with our new data.

Let's look at setting an object to state and using the spread operator to update it.

function Profile() {
  const [user, setUser] = useState({
    username: '',
    profileImgUrl: ''
   });

  const updateUrl = url => {
    setUser({
      ...user,
      profileImgUrl: url
    });
  };

An important thing to remember is that you cannot update a state by reassigning the state name. Suppose you find yourself having a nested array or object and having trouble using the spread operator, concat, and update a single element in your object. You do a trick that I like to use and create a new object before updating the state.

function Profile() {
  const [user, setUser] = useState({
    username: '', 
    password: '',
    pets: ['Ms.Mittens', 'JoJo'],
    }

  const addAPet = petName => {
    // make a copy of the user
    const userCopy = { ...user }
    // now you can make changes to the copy
    userCopy.pets.push(petName);
    // then you can set the state to the new object
    setUser(userCopy);
  };

Learning the trick can come in handy when your objects become a bit more complicated and you can't get the spread operator to work quite right.

Effect Hook

The Effect hook useEffect allows the developer to perform side effects from a functional component. These side effects can include but are not limited to data fetching and subscriptions.

The useEffect hook can be considered a componentDidMount or a componentDidUpdate from a class component.

function MemberPage() {
  const [memberCount, setMemberCount] = useState(0);

  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You have ${memberCount} members`;
  });

  return (
    <div>
      <p>You have ${memberCount} members</p>
      <button onClick={() => setMemberCount(prevState => prevState + 1)}>
        Add a member
      </button>
    </div>

By default, React is running the useEffect each render, including the first render, making the useEffect useful for a fetch request at the beginning of your components life cycle.

  useEffect(() => {
    fetch(
      `https://api.github.com...`,
      {
        method: "GET",
        headers: ..."
        })
      }
    )
      .then(res => res.json())
      .catch(error => console.log(error));
  });

Using the useEffect Hook will allow you to affect other components and do important data collection that cannot be done during rendering.

Using Hooks can allow you to separate your class components even further, which will make your code easier to read and debug. If you are new to using hooks and would like to learn more about them (or even how to create hooks), I put some excellent resources down below.

Resources:

Building a screen responsive webpage

JerryMcDonald — Mon, 29 Jun 2020 12:54:25 +0000

Now more than ever, websites are getting viewed more often on a smaller screen. "... In 2019, 52.2 percent of traffic came from mobile phones." (via. Internet Usage Statistics). And that percentage is not even including tablets. The trend has smaller screen webpage views going up and typical computer screen views going down. That means if you are developing a website (for anything other than small projects), you should keep this trend in mind. A good developer builds your users' foundation on an HTML landscape that can adapt to different screen sizes.

How do you use HTML and CSS to automatically resize, shrink, or enlarge a website and make it look good on all devices? Well, that is a loaded question. Some developers are great at customizing CSS that can fluidly resize on different screens. Others utilize front end libraries that can produce great looking and adaptable website with just a few utility classes. The choice is up to you and your team. I can show you a couple of options that may make your choice a little easier.

The basics to making HTML more responsive to screen size:

Let's being by taking a look at a webpage built with vanilla HTML, zoomed to mimic a Moto G4 cellphone screen.

The text looks pretty good. But the horse photo is not the size I wanted due to a lack of scaling the dimensions of the image. The screen is smaller, but the picture is still displayed as if on a computer monitor. To fix this, we can add the following tag inside our HTML head.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Here we are, with the photo filling up the entire screen. Not quite responsive all together but much closer to what I was expecting.

If you would like to make your HTML images and components respond even better to screen size changes, you can begin by following the guide on [W3schools - responsive HTML (https://www.w3schools.com/html/html_responsive.asp). Now I would like to show you three front-end frameworks that can do some of that work for you and give you many more options for style and functionality.

1. Bootstrap

The first framework that I will introduce is the most popular. With Bootstrap, designing for smaller screen sizes is no longer a separate project in itself. If you include the relevant Bootstrap classes, the design will automatically adjust for different screen sizes.

The code below courtesy of bootStrap docs

    <div class="jumbotron">
      <h1 class="display-3">Jumbotron heading</h1>
      <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
    </div>

Let's Consider the impressive documentation library and the large scale community online. FullStack developers who want a straightforward framework with a large community have a lot to like about BootStrap.

Pros:

Easy to pick up and use: apply the right CSS utility classes to your standard HTML components, and you can have a sharp-looking and responsive web page. A beginner can install the script and begin building their front end with little research.

A large community: By large, I mean massive. Bootstrap is the most popular front-end framework out there, and because of that, you will almost certainly find the solution to most code-related problems. Just google an error or a design you would like to build, and you will likely find the answer.

Cons:

A little too popular: The biggest con I continuously read about from experienced front end developers is how boring a Bootstrap layout can become. (I am not yet tired of the look) because Bootstrap offers so many pre-built components, out of the box, the internet has become populated with website styles that look very similar to one another. BootStrap can become dull for a more experienced designer wanting to create a fresh look.

2. Tailwind CSS

Another less popular utility class-based framework would be TailWind CSS. Tailwind has a set of small CSS class names that you can use to change your element's style. Let's check out what a Tailwind website can look like on the small screen.

//Tailwind example

code below courtesy of fifthre.com

  <div class="section__side relative z-30 bg-fifth-dark-green">
    <span class="side-text">
      <span class="font-tuesday normal-case">The</span> sweet spot <span class="line h-10 bg-fifth-yellow inline-block"
        style="width: 1px;"></span>
      <a href="https://www.instagram.com/fifthnre/" target="_blank"><i class="fab fa-instagram text-xl mb-2"
          aria-hidden="true"></i></a>
      <a href="https://www.facebook.com/FIFTHNRE/" target="_blank">
        <i class="fab fa-facebook-square text-xl mb-2" aria-hidden="true"></i>
      </a>
      <a href="https://www.tripadvisor.nl/Restaurant_Review-g188582-d17733481-Reviews-Fifth_NRE-Eindhoven_North_Brabant_Province.html"
        target="_blank">
        <i class="fab fa-tripadvisor text-xl" aria-hidden="true"></i>
      </a>
    </span>
  </div>

Pros:

Also easy to use: Tailwind makes use of utility-first classes that are reusable and customizable. I continue to read about developers who are unsure about the framework at first, but they can't put it down when they use it. For example, the fluid, container, or text-color classes that you can pop right into your div class to give it the utility and style you want.

A unique look compared to Bootstrap: I feel that a tailwind website has sharper edges and a more minimal, cleaner look than bootStrap. (But that is just opinion) The boxes seem to pop out and make you focus on the content of the containers. Great if you've already designed a dozen sites in bootStrap and want something new.

small community?: Yeap, this can be a pro for some designers. There is a sense of accomplishment in designing a beautiful and responsive website in a less popular framework. It can be a joyful challenge to know that you will have to read the docs and experiment independently.

Cons:

Code can become crowded: Utility-first CSS is excellent for functional and clean looking websites, but the implementation can get a little rough as you build more complicated code. Even in the above code snippet, you can see the elements and classes are getting crowded, unlike other designs where you may have more utility or style separated in a CSS file.

Smaller Community: This con would be for those developers that are not looking for the accomplishment of building a beautiful website with a framework that has less support and pre-build components. Some full-stack builders would prefer easy examples and resources for their front end so they can concentrate on other parts of their site.

3. Bulma

Bulma is a relatively new framework, but its popularity has snowballed in a short amount of time. Its attractiveness lies in a strict, CSS-only approach (there are no JavaScript components) and elegant default classes, making many developers tired of BootStrap sigh in relief.

The code below is courtesy of Free Bulma Templates

  <section class="hero">
    <figure class="image">
      <img
        src="https://images.pexels.com/photos/167636/pexels-photo-167636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    </figure>
  </section>

  <section class="section">
    <div class="container has-text-centered">
      <h2 class="title">The Band</h2>
      <p>We have created a fictional band website... </p>
    </div>
  </section>

Pros:

popular: Not quite as popular as Bootstrap, but the Bulma community is dedicated, and the support online is more significant than many other frameworks. Bulma is an excellent option if you are looking for that different style but with a lot of community help.

easy learning curve Bulma has easy to understand class names and is built to be more modular and solve practical, everyday problems. You may find that Bulma is straightforward to learn even with just a little background in CSS.

Cons:

Some Compatibility issues: The CSS of this framework runs very slow on IE web browser. IE compatibility may not be much of a problem because many frameworks, i.e., Bootstrap 5, are dropping support for IE altogether.

Still in development stage: Meaning there are still many updates to come, and the actual documentation still has a lot of growing to do.

Conclusion

If you want to continue learning about these or other front-end frameworks, I linked some excellent resources below. Ankush Thakur wrote a great article about the '10 Best CSS Frameworks for Front-End Developers'. But whichever path you and your team choose to develop a visually stunning and responsive website, I know you will have success.

What is your favorite front end framework?

And as always:
Stay focused || Love your code

Resources:

Journey To FullStack, Express

JerryMcDonald — Mon, 01 Jun 2020 13:36:29 +0000

Here we are, training to become a full stack developer and trying to piece together and understand the cogs in the machine that is web and application development. Many sprouting developers begin their journey into development by learning some of the most building blocks of many applications. In my case, it was javascript, CSS, and HTML. These topics were pretty fun and straight forward. Given a code problem, I hack my way through to the solution. Always know where the gaps in my knowledge were and understanding the step I would have to take to fill them. CSS and HTML are also similar in that you have a specific goal in mind, and finding the solution is as easy as researching a particular language. Those were simple times, but eventually, if you want to earn your stripes and say you are a full stack developer, you will have to learn more. Here I will talk about one way to handle back-end requests. Express.js

If you want to build web applications, you will need web frameworks to support your development. One of the most popular frameworks for developing these server-side applications is Node.js. Node.js can take your javascript code and compile it much faster than machine code. Node.js also uses event-driven programming, which means that your code's flow is determined by whichever event is taking place. Node uses the input/output model, so while working with node.js, you will be dealing with the incoming request and the outgoing response.

Unfortunately, while working with Node.js, you can end up writing quite a good deal of code even if you are trying to serve up static images or links. One of the downfalls of code, no matter how good of a programmer you are, is the possibility of introducing more errors into your application. But there is a Node.js web application framework that can significantly reduce the code needed to handle and respond to incoming requests. It is called Express. Express is a package you can download to help you establish a connection to your server and write paths that can handle incoming messages. It will significantly reduce the code you will need to write on the back end. Assuming you are already familiar with Node.js, let us look at how we can access Express and some of the primary request handling functions. You will likely need the below functionality in every application you create.

Let us begin by getting Express installed from NPM. You can type this in your terminal while inside your project folder.

Inside of your server.js or your app.js file, you will need to require Express.
We can also use 'app' to reference our new instance of Express.
Now, we can set up and listen to a specific port. In the code below, PORT will be assigned by our code to our process.env.PORT if it exists, or it will go to the default port we prefer.

The application will execute the commands below (inside of app.use()) before each request handling. Remember that the order you specify these commands is essential because of javascript synchronous (top to bottom) nature.

The commands below are important in just about any application you are building. These will handle data parsing for JSON and URL-encoded requests

Now you will have to handle REST requests. An easy example would be paths like GET and POST. Both routes will require a callback function that will allow you to handle the request, and if need be, the response.

In the below example at the "path" of your choice. The function will take in a GET request and respond with a simple string.
In the below example, we are receiving a POST request at a specified path. Then we are assigning the body of that request to a variable. Then we can send our request to our database, which we can design to handle this type of request, and send us back a response.

You may now have a basic understanding of Express.js and how it can streamline node.js. When you are trying to build out full-stack applications, you want to use the best frameworks and libraries out there. Express can help with your application building and streamline your server request and response handling. There are still many topics to learn about front end and back end web development. But, the best way to learn is to start creating! Good luck in your journey to becoming a full stack developer.

Resources:

Journey To Full Stack: The Schema Of Things

JerryMcDonald — Mon, 25 May 2020 05:43:23 +0000

On your journey to become a full-stack software developer, you will have to learn about databases. You may have already begun thinking about different database technologies like MySQL or Oracle 12c and other techniques for utilizing these databases. You have to start thinking about how to interact with a database to store and retrieve data and structure that information. In this blog, I will discuss how to extract data out of a database utilizing SQL queries. First, I will discuss a planning technique that many developers use to map out their data storage by creating a schema.

What do I mean when I say schema? A schema is how you describe the technique of organizing a database and connecting the relationships between its different pieces or "entities." It will tell you how specific data relates to other data. Think of a schema as a "blueprint for your database." A schema is something that you will design and plan during the starting stages of a project. It gives you a visual picture of your data before you begin writing code.

Design a database for a movie collection. We will only keep track of necessary information about the movies for this blog: their genre and their director. A real-life application of a movie database will require much more information, but I have chosen to keep things simple for this demonstration.

This blog's schema was designed in dbdiagram.io, an easy to use tool for drawing entity-relationship diagrams.

When you see or hear the term 'entity' while dealing with database diagrams, it refers to a distinct unit in our diagram that has data associated with it.

Our movie collection diagram shows a movie entity, a director entity, and a genre entity. Our entities in our schema represent a table. In the table, we list each of the attributes that are related to that table name.

We are discussing relational database systems and working with multiple tables. So we will need to make connections to show relationships between the tables. The connections shown in the diagram below represent a one to many relationships. Each movie will only have one director or one genre, but each genre is related to many movies, and a director could have made many movies. Those connections are shown below with the line.

The dir_id from our director table connects to the id_director in our movie table. The gen_id in our genres table connects to our id_genre in our movie table. You will see how we can utilize those connections later to display data from our table.

Let us create our table; you use SQL commands to make your table in the database; the CREATE TABLE statement will tell the database to name the table accordingly. In our movie, director, and genres tables, we stated our rows' names and declaring what data type they will be. The ALTER TABLE commands will establish connections between our tables. Since the director and genre tables are related to many different movies, we will add a foreign key to them and reference our main movie table.

Now that we've designed our tables, we can fill them with some movies. We can use INSERT INTO to state the table we would like to enter data. Then we can enter the column name in parentheses and their VALUES after.

If we would like to view all the data from our movie table, we can use the SELECT * FROM to select all the data of that table from the database.

You can see in id_genre and id_director the corresponding number to the genre and director they are related to.

Let us look at similar syntax to grab all of the data from our other tables.

If we would like to see our movie table and include the genre and director, we can utilize our connections to the other tables and join the data to our main table. In the code below, the LEFT JOIN keyword returns all movies from the left table (movie) and the matched genre from the right table (genres). The same for the related data in the director's table.

You can see below that we have all the data on our movies. It is essential to learn how to display data in your MySQL database because you may need to grab just the right kind of information for a website. Let us take a final look at our movies and all of their properties.

The journey to becoming a full-stack developer can seem overwhelming. But the accomplishment of learning a concept of computer science that has been around your whole life can be empowering. I hope you learned a little more about database planning and building a schema.

Stay Focused || Love your code

Resources:

🌊 Baby Know Recursion!

JerryMcDonald — Mon, 11 May 2020 07:04:20 +0000

Note: This blog is not professional in any way; it's just for laughs! (mostly mine)

Alright! a little bitty "Paper, Rock, Scissors" recursion toy problem, and I am ready for it. Let's break it down. You have n number of rounds, so let's make a loop for n, then send the possible throw into recursion.

Dawg Gone it why is my recursive code not working? You use recursion on the next round, then try to do an array concatenate, use a spread operator here, how many loops should I put, wait...

No...
Oh no...
Can it be...

But I thought I was the recursion master!
Maybe my head is not 100% today; ok, forget recursion.
Leonidas didn't have "recursion" when he died fighting for Sparta!
I can do this with...
FOR LOOPS AND CONDITIONALS
LOTS AND LOTS OF FOR LOOPS AND CONDITIONALS
Let's get this code crackalackin!

When they see my code, they will say:
GOOD GOD, what determination! So many loops!

Holy Mathematicians of the past! It is just paper rock scissors!
Why is this taking so many loops!

Let me stop and think.

Ok, what advice did I hear one of my instructors tell me many years ago (2 weeks ago), if you hit a code wall: try to draw out the problem and visualize it.

And that is just what I did; I left my computer desk and hid in the corner, playing paper rock scissors with myself; my family looked on and thought I lost my mind.

If we want to use recursion and build an array the same length as the rounds given to us, maybe I should send the type of throw as the recursive variable.

But you would also want to continue with the original code run.

And in the forEach, you can use concat or a spread operator to account for the multiple arrays... GOT IT

I'm back on track! Call DeepMind and tell them I'll be able to start in August. Together, we will create an AI that will put us all in matrix chambers. No problem is too big and...

what is that in the distance approaching the city? Dear Keanu Reeves, it is massive! We are all doomed; it is the mother-ship of junior level recursion problems.
It is...
n-queens...

So we are going from paper rock scissors to chess? For real?

Well, this is starting to look like a bigger version of the paper rock scissors problem.

So we want to go down an entire length of column height. And send a recursive call at each index to check the next row for solutions while continuing on with our original code. That's the trick! Use recursion but don't stop with just one iteration!

Thanks for reading. I hope it made you smile!

Stay focused || love your code

Javascript object construction and inheritance

JerryMcDonald — Mon, 04 May 2020 12:50:18 +0000

Hello fellow developer, This blog is geared towards junior-level developers learning about the prototype property in functions. You will undoubtedly require you to build these object constructing functions in course of your career, in more than one style.

The prototype property is put into Javascript functions by default, and a developer can add even more properties or methods to it. If you use the 'said' process to construct an object, that object can 'inherit' the object's parent function's properties and methods. This process is called Prototype inheritance.

If that were it, then I could end my blog here. But the idea of objects inheriting properties from the parent function gets complicated because there are different styles to accomplish the construction and inheritance:

Functional
Functional-Shared
Prototype
Pseudo classical Instantiation ES5 && ES6

Below I will give some code examples, and we will review the different inheritance styles mentioned above. Hopefully, after studying and practicing on your own, if an assignment calls for you to build a constructor function in the Pseudo classical style, you will know how to start.

Functional

Here, this style is just an object inside of a function and assigning methods to it, then returning the created object. The issue with this is the extensive system memory required to create many objects. The program in the system memory recreates each method.

Reviewing the basics like this is an excellent way to get our heads around what we expect our code to be doing; now, we can choose a style path toward object inheritance.

Here is how the above code would look if executed:

Functional-Shared

Now we have our first look at an actual constructor function in our above example. Notice that our brave hero's methods are in a separate object; this is where our extends function comes into play. When called on the hero object, it will loop through each key in heroMethods and assign each key-value pair to the hero object after constructing the object with our 'new' keyword. We are allowed to access those functions in our new hero object.

While functional shared removes duplicating code like in the function style, saving system memory, it has the disadvantage of multiple objects having separate reference points to the same methods. If we modified a method and created another object, the two hero objects would refer to different heroMethods.

Prototypal

Let's talk about prototype.

Each function in javascript has a prototype property, and when constructor functions build objects, they pass a reference to this prototype property to it. So, in turn, if you add a method to the prototype of that function. Then any object you create will also have access to that method.

Object.create in the above example will make an empty object, and it will assign each of the methods from heroMethods into the hero's prototype. These methods will act as a fall-back, meaning the code-runner will search the prototype for those methods if they are not found first in the object's main body.

Adding methods to the prototype is a great way to save system memory. It is available to every object created with the Createhero function.

Pseudo classical

In the above example, we have our CreateHero constructor function at the top, and in it, we are assigning properties with the 'this' keyword... but this time, when we add methods, we are adding to the prototype of the function. When we create a new function with the 'new' keyword, we are also passing the prototype methods. This older pseudoclassical style can look a bit more complicated than the other styles, so let's look at the newer ES6 version of this:

Pseudo classical with the class feature added with ES6

I like the clean look of the ES-6 class constructor function. You can see we should start with the class keyword; then, our first method should be the object's constructor. The constructor is a particular function where we define our properties. Then below, we can define our methods. And they are all neat and together as you would see in a regular function.

But it is important to note that even though we did not specifically add those methods to CreateHero.prototype, they are stored by javascript in the functions prototype property. That is the beauty of the class keyword.

I hope you have learned something from this blog or have a better foundation to build your knowledge of constructors and object inheritance.

Stay focused || love your code

Javascript Prototype inheritance explained, by TechSmith, Parts 1 and 2:
https://youtu.be/7oNWNlMrkpc
https://youtu.be/uIlj6_z_wL8

Prototypes in JavaScript - FunFunFunction
https://youtu.be/riDVvXZ_Kb4

DEV Community: JerryMcDonald

Color in React.js using percentages and a custom gradient.

C++ Variables, Functions, Conditionals, and Logic. In VSCode.

Structuring your .cpp file

void and int type functions

Variable type and scope

C++ Random number generation

Conditionals

6. Compile and play!

Resources

Create a C++ program. Run in Visual Studio Code.

Create a hello world program

Installing Microsoft Visual Studio Code

Adding C/C++ language extension

Install the g++ compiler to compile the source code and GDB

Compile and run the program!

Automatically Restart Your Node.js Application Using Nodemon

Global install

Local Install

Getting started

--delay

exec

ext

watch

ignore

Resources:

A shareable whiteboard with Canvas, Socket.io, and React.

Do you need a shareable Canvas for your React Project?

Starting with the back end

Creating our Canvas Application

Here is a look at my front end file structure:

board.css

Board.js

The Colors

The Drawing

Mouse movement and clicks

The throttle

Setting the event listeners and canvas resizing

Our client-side socket connection:

The Canvas and Color elements

Here is the full board.jsx for an easy copy and paste

Make it live

Resources:

How socket.io interacts with node.js in a WebRTC application.

Resources:

Understanding React Hooks

Rules of hooks

State Hook

Effect Hook

Resources:

Building a screen responsive webpage

Resources:

Journey To FullStack, Express

Resources:

Journey To Full Stack: The Schema Of Things

Resources:

🌊 Baby Know Recursion!

Javascript object construction and inheritance

`void` and `int` type functions

`--delay`