DEV Community: BillyGoat12

Stateful and Stateless protocol

BillyGoat12 — Mon, 18 Jan 2021 18:11:56 +0000

What is protocol?

Protocol is known as "A set of rules that you have to follow". When a computer wants to send data to another computer they also must follow a protocol. Technically we can send data between computers without protocol but it would not be effective and may have collisions. Think of a classroom full of English speaking kids all learning math from a Spanish speaking teacher. This is an example of how not following protocols can lower the efficiency of the kids ability to learn and this can also happen in data transfer affecting our database ability to read data. Now think of a classroom with everyone speaking, no one would be able to get their point across and this would be an example of collision and this can happen when two devices are sending data at the same time.

Stateful Protocol

Now that we know the importance of protocol let's talk about stateful protocol. Stateful protocol is defined as "If client send a request to the server then it expects some kind of response, if it does not get any response then it resend the request." So basically if you login using a certain credentials it will be pass into the server and the server will pass that into the database and the database will verify that password match the username. Then the server will store some kind of variable(key) saying that the client is okay and pass it to the client. Now everytime the client communicates with the server, the server will check if the client variable(key) matches the server variable(key) and store the data in the server. The protocol taken in a stateful server will cause "a tight dependency between server and client". So if the client tries to switch server or if the server crash their credentials would not match nor was their session recorded in this new server causing them to restart the whole process again on the new server.

Stateless protocol

Now that we understand stateful servers let's talk about stateless servers. stateless server is when the “client sends a request to the server and server response back according to current state. It does not require the server to retain session information or a status about each communicating partner for multiple requests”. So basically just like stateless expect the database store the sessions and the variable(key) not the server. The protocol taken in a stateless server "there is no tight dependency between server and client". This means if your server crashes or if you switch server you will be able to still access your session.

conclusion

In conclusion the difference is where the sessions and verification variable is being stored at. In stateful protocol it will be stored in the server and in stateless it will be stored in the database. Because of this difference stateful will not handle crashes of servers better then stateless. On the other hand if your application needs better security then stateful is the way to go because stateful takes in the state of the connection causing it to be more strict.

Geolocation with IP address

BillyGoat12 — Sun, 10 Jan 2021 21:36:31 +0000

Intro

Writing code is cool and there is always new or different tech to work with which will make programming always interesting. Today we will be talking about geolocation. What is geolocation, well it refers to the geographical location of an Internet-connected device. We will be using this to track users' location that access your website.

ipify API

Before we can find a user location we will need a way to access their ip address. The api we will be using to accomplish this task is called ipify API. This is a very useful and simple api to use to get a public IP address. Also it is free and has no cap on usage. To use this api all you have to do is make a request to “https://api.ipify.org” and you will get your public ip address.

ipstack API

ipstack API is an API for software developers to search the geolocation of IP addresses. It is also one of the top geolocation api out today. This api is also easy and quite simple to use. First you will have to create a free account at “https://ipstack.com/product” after you will get an api key that you can use. Now all you have to do to get your location is make a request to http://api.ipstack.com/${ip}?access_key=${key} with the ip address and the key provided with your account. This will return an object with information to your address.

DEMO

This is going to be a demo on how to code your application to get geo location after your api key is available to use. Allowing you to get the location of every visitor to your site.

const App = () => {
  const [input, setIput] = useState('')
  useEffect(() => {
    axios.get('https://api.ipify.org')
      .then(({data}) => axios.get(`http://api.ipstack.com/${data}?access_key=${key}`))
      .then(({data}) => setIput(`${data.city},${data.region_name} ${data.zip} ${data.country_name}`))
      .catch((err) => console.warn(err));
  }, [])
  return (
    <div>
      <h1>{input}</h1>
    </div>
  );
};

Conclusion

If you followed the step correctly then the result should look like this on the client side.

How To Embed HTML Into A 3D Model

BillyGoat12 — Tue, 05 Jan 2021 05:34:52 +0000

Into To Blog

This article is assuming that you know how to use the basics of react-three-fiber. So assuming you have a basic layout with react three fiber, lets say a canvas and some 3d model with react three fiber but now you want a 3d model with html embedded into it. This article will be telling you how to exactly do that.

CSS3DRenderer

The approach I used for this was to use CSS3DRenderer from three JS since react three fiber is based on three. CSS3DRenderer renderer is particularly interesting if you want to apply 3D effects to a website without canvas based rendering, But the way we are using it is to have it render dynamically what you want to put in. There are, however, some important limitations like It's not possible to use the material system of three.js and It's also not possible to use geometries. CSS3DRenderer is just focused on ordinary DOM elements. These elements are wrapped into special objects CSS3DObject and then added to the scene graph.

Getting started

First you would want to import all of the things you would need to use CSS3DRenderer.

import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
import { Canvas as CanvasCSS3D, useThree as useThreeCSS3D, useFrame as CSSFrame } from 'react-three-fiber/css3d';

After importing that you will have to create a constructor that will build out your 3D objects, your construtor should look like this.

function DOMObject({
  dom, position, scale, rotation,
}) {
  const { scene } = useThreeCSS3D();
  const ref = useRef(CSS3DObject);
  CSSFrame(() => {
    ref.current.rotation.y += 0.01;
    ref.current.rotation.x = 0.1;
  })
  useEffect(() => {
    ref.current = new CSS3DObject(dom.current);
    ref.current.position.copy(position);
    ref.current.scale.copy(scale);
    ref.current.rotation.copy(rotation);
    scene.add(ref.current);
    return () => scene.remove(ref.current);
  }, [dom, scene, position, scale, rotation]);
  return null;
}

Now you are all set to create your html embedded 3D models.

Implementation

Now let's head to where we are rendering our canvas and the first thing we will have to do in this component is to wrap the entire canvas in a fragment. Fragments should look like this.

<>
</>

Next thing we have to do is create a reference so the constructor can know what to use to create a 3D model and we can do this by simply adding this.

const ref = useRef(null);

After that you will want to place a new and special canvas under the original canvas but inside your fragments and inside the new canvas you will place your special 3D object constructor so that it’ll render the object.

<>
<Canvas>
      <directionalLight intensity={0.5} />
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 15, 10]} angle={0.9} />
      <Suspense fallback={<Loading />}>
        <Table />
        <Cards />
      </Suspense>
    </Canvas>
    <CanvasCSS3D style={{ position: 'absolute', top: '0' }} camera={{ position: [0, 30, 150] }}>
        <DOMObject
          dom={ref}
          rotation={new THREE.Euler(Math.PI / 4, 0, 0)}
          position={new THREE.Vector3(0, 0, 0)}
          scale={new THREE.Vector3(1, 1, 1)}
        />
      </CanvasCSS3D>
</>

Finally you can create a div right before your fragment and add some html to it and that will render in your canvas as a 3D model but your div must contain the ref that your special 3D object constructor referenced. (ps) you can put an input box or buttons in your div and that will register in the object also.

<div style={{ background: 'green', width: '100px', height: '100px' }} ref={ref}>
        hello
 </div>

Conclusion

If everything is done correctly then you canvas should look like this.

PostgreSQL

BillyGoat12 — Mon, 21 Dec 2020 10:44:58 +0000

Relational and Non Relational?

PostgreSQL is a relational database system that is able to support both relational and non-relational querying. This means that PostgreSQL has the benefit of both, it can have the benefits of a relational database and/or have the benefits of a non-relational database. PostgreSQL is highly extensible, you can define your own data types and build out custom functions. PostgreSQL has been proven to be highly scalable both in the sheer quantity of data it can manage and in the number of concurrent users it can accommodate. PostgreSQL is like if MySQL and Mongo had a kid that took steroids.

Installation

To start you will need to create the file repository configuration and to do this you will need to run sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list' in your terminal. Then you will have to import the repository signing key by running this wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -. After you will need to update the package lists by running this sudo apt-get update. Lastly to get postgres on your system you will need run this sudo apt-get -y install postgresql.

How to start working in PostgreSQL

Once you have successfully installed PostgreSQL you can open it by running sudo -u postgres psql. To create a database you can run CREATE DATABASE databasename. To check your database you can run \l. To connect to a database you can run \c databasename. To create a table you can run CREATE TABLE table_name (
column1 datatype(length) column_contraint,
column2 datatype(length) column_contraint,
);. Now that you have a database and a table you are able to manipulate data. To insert data into the your table you will run INSERT INTO table(column) VALUES (value);. Once you have successfully inserted data you can check it by running SELECT * FROM tableName;.

using PostgreSQL in Visual Studio Code

To be able to use PostgreSQL in Visual Studio Code you will need to npm install pg. Once that is successfully installed you can start by creating a file where your database will be stored. In this file you will import the client from pg. Then you will create a new instance of client with valid arguments, client takes in your PostgreSQL information. Next you can connect with the connect function and use a dot then statement to log if the connection was successful. Lastly you would want to export this file to the main server file. if done correctly you should see what you log in your terminal.

const {Client} = require('pg');

const db = new Client({
    user: 'postgres',
    password: 'newpassword',
    host: 'localhost', 
    port: 5432,
    database: 'testing'
})

db.connect()
    .then(() => console.info('connected'))
    .catch((err) => console.error(err));

module.exports = db;

querying to the front

Now that you imported the database to your main server you can send data to the front. First you can set up a route that you would like to receive your data. Next use the database you imported to do a query. You can do this with the .query function. Lastly insert the query as a string into the augment and use a then statement to send it to the front.

const express = require('express');
const path = require('path');
const http = require('http')
const socketio = require('socket.io')

const db = require('./database/index')

const app = express();
app.use(express.json());
const sever = http.createServer(app);
const io = socketio(sever)

const DIST_DIR = path.join(__dirname, '../client', 'dist');
app.use(express.static(DIST_DIR))

app.get('/data', (req, res) => {
    db.query(‘SELECT * FROM roles;’)
      .then(result => res.send(result.rows));
      .catch(err => res.send(err));
})

sever.listen(5000, function() {
    console.log('listen on: http://localhost:5000')
});

conclusion

Now you can check your route and see if it's working.

Intro into WebSocket

BillyGoat12 — Mon, 14 Dec 2020 14:17:54 +0000

Axios Request

We would need to know a bit about axios requests before we can understand websockets. Axios requests are awesome because they allow users to make requests from the browser to the client and send a response back per request. This is normally great because if you want more information you just ask the server for it without having to refresh the page but what would happen if you want to do something a bit more real time? If we tried to make our application to work in real time with axios then we would have to either set up a button that loads current feeds or have the client browser send an infinite amount of requests to the server. There are several flaws with this approach, the button approach is not very user friendly and the infinite request will cause too many issues. This is where websockets come into play.

What Are Websockets

Websocket is kinda like axios but better. What a websocket does is that when a client sends a request to the server, the server listens on the request and sends back a response to all the clients that are connected to that server. This is why websocket is considered ideal implementation when it comes to working with real time.

Implementation

There are many different apis we can use to implement websocket but today we will only be talking about Socket.IO implementations. If you want to go to the docs for this api here is the link: https://socket.io/docs/v3/index.html. Without further ado, we can start talking about implementations. First we will have to install socket.io and http then import those on your server page. Then you will need to add const server = http.createServer(app); and
const io = socketio(server); to your server page. After that you will have to change your app.listen to server.listen. Now somewhere in the middle of your page you can add
io.on('connection', (socket) => {
socket.on('sent', () => {
io.emit('received');
});
}); what this does is io.on connection happens when a user connects to the server and then when a user browser emits a sent the server gets it and emits a 'received' to all the client browser. Here is what your server page should look like.

const express = require('express');
const path = require('path');
const http = require('http')
const socketio = require('socket.io')


const app = express();
app.use(express.json());
const server = http.createServer(app);
const io = socketio(sever)

const DIST_DIR = path.join(__dirname, '../client', 'dist');
app.use(express.static(DIST_DIR))

io.on(‘connection’, (socket) => {
  socket.on(‘sent’, () => {
    io.emit(‘received’);
  })
});

server.listen(5000, function() {
    console.log('listen on: http://localhost:5000')
});

Then on your front end you will add const socket = io(); and then set up a button that when clicked it will emit sent. socket.emit('sent');

socket.on('received', () => {
console.log(‘hello’)
});
What this does is when your server emits ‘received’ then it will invoke this function.
Here is what your code should look like.

Const socket = io();
Const app = () => {
  socket.on(‘received’, () => {
    console.log(‘hello’);
  });

  Return (
  <div>
  <button onClick={() => socket.emit(‘sent’)}>click</button>
  </div>
  )

}

Lastly you will need to add a script tag to you index.html and is should be like this ** ** and your file should look like this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>live</title>
</head>
<body>
    <div id="root"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

conclusion

So now when you start your server and open two tabs and then on one tab click the button and the other tab should log to the console hello and this should work vice versa. Ultimately you will use this pattern to implement live data.

API?

BillyGoat12 — Mon, 09 Nov 2020 12:16:13 +0000

What is API?

We as programmers see the word API Quite often in our lives, in fact we will even use it quite often as a programmer. API Stands for application programming interface. Interface is how the client interacts with the option provided without having to know how it works. We programmers also work with many different interfaces and that's where API comes in handy. For example, a developer will write codes that happen when a button is clicked, but what that developer didn't have to do is write the codes that make the button interact if they used an API to do that for them. Basically
API is a way for different programs to work together.

The structure of API

API normally consists of a structure request and response. One software will request for information formatted in this way and it will give the data (response). Certain API is formatted to take only certain requests so the client would have to format the request to accommodate that and anything else would result in some kind of error.

request and response

Think of API as a messenger between the programs and since these messenger takes in requests a certain way. We would have to use rest which in turn let us use HTTP request to format those to format those messages (request). A GET request is used to get or retrieve data from a specified resource. A Post request is used to submit data to be processed to a specified resource. These two can be used to format the API request and response.

API can allow data access

API can be used to access data from third parties. When we were building our own vision of YouTube we used their API to gain access to their data. Even though we coded what we wanted our application to do we lacked a database of videos. API allows different apps and services to exchange information. Anything you would want to look up in specific there is probably an API that can do that for you.

API can perform task

In the app where we created our own version of YouTube we used a media player API provided by our devices. This allows us to play videos without needing to send video data to our software. Also our video was not stored in our devices it was streamed over the internet so we used a web base API to get the data. Another example is instead of writing codes to paint a map in our application we can outsource all of this using google map API.

Security

When you download an app on your phone that uses your camera it would ask the user if they would like to allow this app permission to gain access to this functionality. So every time you get a notification that asks for permission you know that an app is using an API of your phone system. So if you do not want to share certain information then you can deny it to the app.

Conclusion

API is just like how client users access their interface with options provided except for a software application to be able to access the same information the same way the client may access the information but is designed so the software can do it instead. There is basically nowhere on the internet you can go without an API. It is filled with different types of API and we use some of those API.

Basic of MongoDB

BillyGoat12 — Mon, 02 Nov 2020 03:35:15 +0000

Database management system

Data is facts about any object in consideration and we normally store data in a database because data in a database is organized which makes it easy to manage. A Database Management System is a collection of programs that enables users to access databases, manipulate data, and help in representation of data. Today we will be talking about databases and their management system.

Non-Structured Database

MongoDB is a non-structured database, this means that the data is not constricted to the shape of a table. To understand non-structured databases I will talk about structured databases first. Another name for structure databases is called relational database and when we are talking to this kind of database we use SQL. SQL is known as Structured Query Language. When talking to a non-Structured Database we use NoSQL. NoSQL means Not Only Structured Query Language.

Relational Database vs Non-Structured Database

We can think of relational databases as in structuring data in tables. A table has columns and this defines the structure of our data. So if we made a table with 3 columns then every single row has to follow that structure and if for some reason we want to add a new column for only a certain row it would not work unless we add a new column for the whole table. A field is what we refer to when we are talking about a value for a certain column. Now when we think about Non-Structure databases we do not have to worry about our data fitting perfectly inside a table. In a Non-Structure database we use a collection instead of a table and collection is a little different from a table. We can put a document in a collection and that document would be like a row in a table. The difference is that we can add a new document(row) with different data into our collection(table) because it's not restricted just to the documents that fit a specific format. Inside a document you will have key-value pairs and the key would be the field and the value would be that value. So basically a document is like an object.

Mongo

The way mongo works is pretty cool. For example, if we try to work with something that does not exist then mongo will create it for us. If we tried to work with a database that does not exist mongo will create it for us so like if we type use and a name it will create that database with that name for us so we can use it. Now that we are in the collection we can type db.a-collection-name.a-function and that will help us create that collection. So if we do db.user.insertOne ( { field: value } ) this would return
{ acknowledge: true, insertedId: ObjectID ( some number ) }.
The numbers in the objectId is like a primary key in the table but we did not have to set that up, mongo did it for us.

conclusion

Mongodb is a non-structure database and doesn't have to follow normal rules when creating data. Also mongodb makes it easier to change and create data because of its shortcuts and how its not restricted to a certain format.

Cross Origin Request

BillyGoat12 — Mon, 26 Oct 2020 08:07:13 +0000

Cross origin request is when a origin makes a request to a different origin. An origin is a server’s hostname. A origin consist of scheme, domain, and port. So https://www.google.com/routeA and https://www.google.com/rounteB are the same origin but are at different route but if anything before the route was different in the URL then that would make it a different origin.

Before we can go into making a request to another origin we will have to talk about the same origin policy. Same origin policy is something your web browser enforces that says if the origin is not the same then you will not be able to make request to that origin. So when we are trying to access resources from a different origin we will need to bypass this policy. Also the same origin policy is something your browser enforces and not your server but your server can enhance the it.

How can we get around this? Well there are several methods you can use to get around this actually but today we will be talking about just one way. So the biggest thing here is having a header that says access-control-allow-origin. One way you can accomplish this is through a proxy. The Access-Control-Allow-Origin is a response header that determines whether the response can be shared with requesting code from the given origin. The literal value "*" tells browsers to allow requesting code from any origin to access the resource.

Servers are not under the same origin policy rule, they can request data from any other server. What we can do here is have a middle man to make the request for us and the middle man will be the server. We will be asking the server to make a request for us and send us back the response and this is known as a proxy. There is an API called CORS-anywhere and it basically is a proxy that will add the header that says access-control-allow-origin.

How to use a proxy? well using a proxy is really easy and all you have to do is add the proxy URL before the URL of the origin of whom you wish to make the request to in your request function.

In conclusion using a proxy is one of the best ways to bypass the same origin policy because a request we made that goes out, goes through the proxy and will not send my cookies or anything specific to that website. When your browser is making a request out to specific website and if your browser has set cookies in your browser, when the request goes out it will send those cookies with it. So if you made a request out to Facebook then your cookie data will also go with it but if you use a proxy you will be able to protect this data.

default params, this, and recursion implmenation on tree

BillyGoat12 — Sun, 18 Oct 2020 21:12:55 +0000

Today I will be teaching you all on how to implement default parameters, this and recursion to create a tree data structure. To start we will need to have a deep understanding of a tree database. A tree is a hierarchical data structure consisting of a node with children. The children are trees unto themselves, that is, nodes with children. So basically this is saying that when you create the tree the children are also an instance of the tree if they have children. The tree function is a constructor that creates the nodes(object) we will need to create the “children” in the tree.

Since a tree is a constructor function we will need to just focus on the object we need to create an instance of first and after we can worry about implementing the methods to that object. Today we will use Functional Shared Instantiation to create a node(object) with the needed methods and properties. The properties we need in this object is value which will represent the value and children which will hold other nodes. The methods that are needed in the object are added and contained.

Now we can finally start implementing our methods since our constructor is returning the object we want it to. We will use the “this” keyword to access the children array in the object from the constructor, because this will reference the object being returned in our constructor. In the children array we will push a new node into that array and since our constructor function creates a new node with all the needed key/value pairs we can just push the result of the constructor function.

For our contain method we will be using default parameters and recursion. Default parameters are parameters that have a defaulted value if no arguments are placed in for that parameter. Recursion is recalling the function in the same function. For the function we would want it to check if something exists in the tree and when we think about it the tree is made up of nodes that were created by the tree constructor so lets start small and have our contain method only check one node. So contain should take in a value to check if that value is in the node and an node. This contain method should return true or false depending on if the value is in the node or not and if no node is is placed in as an argument we can set the default parameters to this which will refer to the node returned from the constructor function.

Now our function checks a node and returns true or fault if the value is the targeted-value and by default it checks the very first node in the tree. Now we can use recursion to have it do the same for all the other nodes. So the first thing we would want to do is loop over the children array in the node and have a if statement saying if the node is in any of the other nodes return true. To do this we will use recursion in our if statement and pass in each child node as the second argument and the if statement will only hit if the function returns true.

In conclusion this is how you will go about start and finishing creating a tree data structure with recursion, this, and default parameters.

Javascript tree explained!!

BillyGoat12 — Sat, 22 Aug 2020 17:36:24 +0000

What is a Tree?

A tree in Javascript is a data structure made of nodes which are nested into each other. A node is typically an object that contains a value and a nested child node. This data structure is arranged in order of rank according to its value.

This data structure is important because binary search can be easily used in it. According to Wikipedia, a binary search is a "search algorithm" that will improve the efficiency of our code by reducing input required for the next iteration when looping through the data. It does that by "compares the target value to the middle element of the data structure".

adding node to the tree

step 1: When adding nodes to the tree you will have to check if the current node has a value that is greater or less then the value you are trying to add to the tree. Step 2: If the value is greater then the value you want to add, then you will have to check if the node at the left has a value, otherwise check the right. Step 3: If it does not have a value, then set it to the value you are adding, otherwise go into that node and repeat the process all over again.

Here is an example of what your insert function would look like!

when iterating through the tree

You will have to check if the current value is the value you want and if so return true. Check if the current value is undefined and if so return false. otherwise, you will have to check if the value is greater or less then the value you are trying to access from the tree. If the value is greater then the value you want to access, then you will have to check if the node at the left has a value, otherwise check the right. If it does not have a value, then return false, otherwise go into that node and repeat the process all over again.

Here is an example of what your contains function would look like!

Here is an example of tree data structure using binary search!!

This picture is from:(https://www.guru99.com/binary-search-tree-data-structure.html)

More about this picture

As you can see that it is the goal of the tree data structure is to have the median value at the very top of the tree this will help your function to access the child node based on greater than and less then that value.

One problem we may face when using the tree data structure.

One problem we may face is when the order of rank according to value is not in the correct order. To fix this you will have to re-balance the tree by adding complexity to your insert and remove code. Even though your add and remove code will increase in complexity, the complexity of the code required to sort through the data will be halved. You could also just reset the tree and re-balance it accordingly.

Conclusion

Binary search tree is one of the many data structures to choose from when building your data. This data structure comes with its advantages and disadvantages, but when used correctly can be very powerful.