Forem: codebond

Can someone explain TypeScript to me like I'm 5 years old?

codebond — Sun, 17 May 2020 18:10:00 +0000

Kyle Shook⚡️

@elyktrix

Can someone explain TypeScript to me like I'm 5 years old?

00:03 AM - 07 May 2020

279 1625

Thomas Irizarry

@tommytomtj

@elyktrix If you say 'orange' TypeScript will ask if you mean the fruit or the color, JavaScript won't ask and you might end up drinking a glass of orange paint instead of orange juice.

02:51 AM - 07 May 2020

157 1197

ian h

@ianhunter

@elyktrix Typescript is this toy.

01:37 AM - 07 May 2020

13 306

Tommy Rocket

@tomhockett

@elyktrix TypeScript is like your teacher who yells at you a lot and you're not quite sure why until you listen to what they're saying.

01:40 AM - 07 May 2020

6 120

Tim Myers

@denvercoder

@elyktrix JavaScript is like “go play outside”. Typescript is like “you can’t play outside until you clean your room”.

03:48 AM - 07 May 2020

21 220

Quarterstack developer

@ocramius

@elyktrix @Jan0707 Like driving a train, except that in JavaScript you are off-road, and in TypeScript you have rails.

10:21 AM - 07 May 2020

5 73

Amilcar Calles

@amilcarcalles

@elyktrix I will say to my son: typescript is like when we study math together at home, I’m there to help you if you make some mistake (I’m TypeScript), JavaScript well, JavaScript is your final exam, you complete the writing, then you wait the result without knowing if something was wrong

02:20 AM - 07 May 2020

1 4

How will you explain? But should be unique.

Implementation of a Graph -JavaScript

codebond — Sun, 10 May 2020 09:39:46 +0000

Introduction

In previous tutorials, we learned some basics of a graph, it's representation, and it's application. In this tutorial, we are going to practically implement our previous knowledge and learn to create an undirected graph.

pre-requisite:

class Graph {
  constructor(){
      this.nodes = new Map()
  }
  addNode(){}
  addEdge(){}
  removeNode(){}
  removeEdge(){}
  depthfirstSearch(){}
  breadthFirstSearch(){}
  display(){}
}

The above snippet shows the steps and method takes to create a graph. as we go further, we will get to see the implementation and pseudo-code.

let's start

this.nodes

this.nodes is an Object in which key holds the node and value hold an array of adjacent nodes.

initially, it is empty.

this.nodes = {}

addNode(node)

It adds a new node to the graph.

addNode(node){
 this.nodes.set(node,[])
}

the array of adjacent nodes is initially set to be empty because the new node does not have any edge yet.

addEdge(source,destination)

It adds an edge between source node and destination node.

In order to add an edge, we need the adjacency list of the source node then push destination node to it. since it is an undirected graph, we also need to push the source node to the adjacency list of destination node.

addEdge(source,destination){
  this.nodes.get(source).push(destination)
  this.nodes.get(destination).push(source)
}

let's implement what we learn so far.

removeNode(node)

It basically removes the node from the graph.

But, in order to remove a node, we must first remove the edges that are associated with the removal node.

In the above example. to remove node "D" we first have to remove the edges that are associated with "D" which are "D-A" and "D-B" after that we can remove the "D".

In the following code, we added a helper function getIndexAndRemoveItem(item,list) it takes argument item as node (that we are going to remove) and list as an array (from which we are going to remove item).

 removeNode(node) {
        let neighbors = this.nodes.get(node);

        for(let neighbor of neighbors){
            let adjacencyListOfNeighbor = this.nodes.get(neighbor);
            this.getIndexAndRemoveItem(node, adjacencyListOfNeighbor);
        }

        this.nodes.delete(node);
 }

 getIndexAndRemoveItem(item, list) {
        const index = list.indexOf(item);
        list.splice(index, 1);
 }

Checkout the 👉 pseudocode for removeNode()

removeEdge(source,destination)

It removes the edge between source node and destination node.

To remove the edge, we must have all the nodes that share an edge with source node in a simple term adjacency list of the source node. since it is an undirected graph, we need an adjacency list of destination node as well.

Then, with the help of our helper function getIndexAndRemoveItem() we can remove the edge.

removeEdge(source, destination) {
        let adjacencyListOfSource = this.nodes.get(source);
        let adjacencyListOfDestination = this.nodes.get(destination);

        this.getIndexAndRemoveItem(source, adjacencyListOfDestination);
        this.getIndexAndRemoveItem(destination, adjacencyListOfSource);
}

getIndexAndRemoveItem(item, list) {
        const index = list.indexOf(item);
        list.splice(index, 1);
}

Checkout the 👉 pseudocode for removeEdge()

let's implement

depthFirstSearch(startingNode)

depth-first-search is a traversal technique in which we go as deep as possible in the graph once we reach a node where we cannot further go down, we backtrack to the node we came from. This process repeated until we explore all other nodes in the graph.

depthFirstSearch(startingNode) {
   let visitedNode = [];
   this.dfsRecursion(startingNode, visitedNode);
}
dfsRecursion(currentNode, visitedNode) {
   visitedNode[currentNode] = true;

   console.log(currentNode);

   let adjacencyListOfCurrentNode = this.nodes.get(currentNode);

   for (var node of adjacencyListOfCurrentNode) {
       if (!visitedNode[node]) this.dfsRecursion(node, visitedNode);
   }
}

checkout the 👉 pseudocode for depthFirstSearch()

breadthFirstSearch(startingNode)

Unlike depth-first-search, where we go deep before exploring neighbors, in breadth-first-search, we explore all the neighbors of a node before moving a level down.

breadthFirstSearch(startingNode) {
     let visitedNode = [];
     let queue = [];

     visitedNode[startingNode] = true;
     queue.push(startingNode);

     while (queue.length > 0) {
         const currentNode = queue.shift();

         console.log(currentNode);

         const adjacencyListOfCurrentNode = this.nodes.get(currentNode);

         for (let node of adjacencyListOfCurrentNode) {
             if (!visitedNode[node]) {
                 visitedNode[node] = true;
                 queue.push(node);
             }
         }
     }
 }

checkout the 👉 pseudocode for breadthFirstSearch()

Summary

We learned to create and manipulate a graph by adding, removing nodes and edges. we also covered the depth-first-search and breadth-first-search algorithm.
Soon in the next posts, we will see the more efficient and professional way to create a graph.

Thank for reading 🙏

Was this article helpful? don't forget to share because Sharing is Caring.

Reference

Graph Representation

codebond — Thu, 30 Apr 2020 04:10:18 +0000

In Introduction To Graph Data Structure, we learned

In this tutorial, we gonna see two common and recommended ways to represent a graph.

Adjacency matrix
Adjacency List

If i asked what are adjacent node of node "A"? you will find all neighbors connected to node "A" by just looking at the graph.

But the question is how the computer will understand the graph and adjacent of node "A" 🤔???

Well, bear with me, we will make sure that computer understands the graph.

Adjacency Matrix

An adjacency matrix is a 2-dimensional array of size N x N where N is the number of the node.

let 2-dimensional array be adj[ i ][ j ] .

adj[ i ][ j ] = 1 means there is edge between node "i" and "j".

adj[ i ][ j ] = 0 means there no edge between node "i" and "j".

lets understand by above example:

adj[ 0 ][ 0 ] = 0 (edge between node 0 and 0)

adj[ 0 ][ 1 ] = 1 (edge between node 0 and 1)

adj[ 0 ][ 2 ] = 0 (no edge between node 0 and 2)

adj[ 0 ][ 3 ] = 1 (edge between node 0 and 3)

adj[ 0 ][ 4 ] = 1 (edge between node 0 and 4)

adj[ 0 ][ 5 ] = 0 (no edge between node 0 and 5)

similarly for other node....

Representation of graph by Adjacency Matrix: javascript

initialize()

It creates a 2-dimensional array and sets the adjmatrix[row][coloumn] to 0 which means there is no edge between any node.

addEdge()

It creates an edge between source and destination and destination and source.

Adjacency List

In graph theory and computer science, an adjacency list is a collection of unordered lists used to represent a finite graph. Each list describes the set of neighbors of a vertex in the graph. __Wikipedia

In simple words
In Adjacency List each Node will have a list(array) of his adjacent(neighbor) nodes.

Representation of graph by Adjacency List: javascript

addNode()

It creates a new node with an empty list.

addEdge()

It creates an edge between source and destination by pushing the destination node to the list of the source.

This post first published on codebond

Clean Code Principles - Function

codebond — Tue, 14 Apr 2020 10:33:17 +0000

I am reading a book Clean Code by Robert C. Martin and It is amazing so far. some principles he made need to be highlighted.

I am thinking of sharing other principles too as I go ahead in reading. because it will help me and you to learn and implement.

In this post, i covered clean code principles for functions.

Function should do one thing. They should do it well. They should do it only.

If a function does only those steps that are one level below the stated name of the function, then the function is doing one thing.

The smaller and more focus a function is, the easier it is to choose a descriptive name.

Another way to know that a function is doing more than "one thing" is if you can extract another function from it with a name that is not merely a restatement of its implementation.

A long descriptive name is better than a long descriptive comment.

The ideal number of arguments for a function is zero (niladic). Next comes one (monadic), followed closely by two (dyadic). Three arguments (triadic) should be avoided where possible. More than three (polyadic) requires very special justification-- and they shouldn't be used anyway.

Function should either do something or answer something, but not both. either your function should change the state of an object, or it should return some information about that object. doing both often leads to confusion.

Happy coding.

This post first published on codebond.co

Introduction To Graph Data Structure

codebond — Tue, 31 Mar 2020 18:13:20 +0000

What is a Graph data structure?

A Graph is a collection of vertices/nodes and edges in a way that vertices/nodes are connected by an edge.

Graph Terminologies

fig01

Vertex or Node

Every individual point that holds or represents some kind of data is called vertex or node.

In fig01 points "A", "B", "C", "D", "E" are vertex/node since there multiple vertex/node so it called vertices/nodes.

nodes and vertices both terms are the same.

Edge

A connection between two nodes is called an edge. In fig01 the connection between node B and node E is edge similarly A-B, A-C, A-C, A-D, B-D, C-D, D-E are edges.

Adjacent

fig02

This terminology often used with vertices/nodes.

Adjacent node shares a common edge.

let me explain you.

In fig02 nodes B, D, C shares a common edge with node "A" and similarly with others too.

Now if i ask you what are adjacents nodes of "A" that means all the nodes that share common edges with node "A".

Adjacent of all nodes

Nodes	Adjacents
A	BDC
B	ADE
C	AD
D	CABE
E	BD

Degree

fig03

The degree is the number of edges connected to a node.
for example, the node "D" has a degree of 4 while the "E" has a degree of 2.

Types of graph

fig04

disconnected graph

In a disconnected graph, not all nodes have edges. nodes might be isolated.

if you see the above disconnected graph, there are three isolated regions. in simple words, these three regions don't have a connection between them.

connected graph

a graph is connected if all nodes have at least one edge.

undirected graph

an undirected graph has no direction. The edges indicate a two-way relationship, in that each edge can be traversed in both directions.

directed graph

a directed graph has edges with direction. The edges indicate a one-way relationship, in that each edge can only be traversed in a single direction.

complete graph

A graph is said to be complete if each node have a degree of n-1(n = total nodes)

sound like mathematics

in simple words

A graph is said to be complete if each node has an edge with all other nodes except itself.

cyclic graph

A graph can have cycles which means that if you traverse through the node, you could get the same node more than once.

acyclic graph

a graph is acyclic that means the graph must have at least one node with no targets (called a leaf).

in the above image, the orange node doesn't have any outgoing edge.

Applications Of Graph

Social media like Facebook, LinkedIn uses graphs that store users, groups, check-ins, likes and more as nodes.
Google Maps, Apple Maps, Waze use graphs to treat all cities and places as nodes and routes between them as edges.
Webgraph describes a directed graph between pages of the WWW. Each page is a vertex and the hyperlinks are edges. This is the basic idea behind the Google Page Ranking Algorithm.
Uber, Ola, Lyft uses a graph to find the shortest and cheapest path for a car from one city to another.
The graph also used in a database for representing Entity-Relationship.
Graph theory also used to study molecules in chemistry and physics.

reference

this tutorial first published on codebond.co

How to build and publish npm package.

codebond — Wed, 26 Feb 2020 13:35:01 +0000

I recently published an article (tutorial) How to build and publish npm package on codebond in which I visually covered all the steps required to publish and update npm package.

Checkout full article here

Build

Publish

Gitex - Git Command Explorer

codebond — Thu, 20 Feb 2020 08:00:28 +0000

What is gitex?

Gitex is Git Command Explorer. It helps to find Git Command right in your terminal.

Why did i build?

.ltag__user__id__5259 .follow-action-button { background-color: #1C0BBA !important; color: #FFFFFF !important; border-color: #1C0BBA !important; }

Addy Osmani

My name is Addy and I’m an engineering manager on the Chrome team. Let's make the web fast <3

addyosmani addyosmani https://addyosmani.com

Addy Osmani recently shared an amazing tool git explorer which i found helpful i thought it would be great if i make cli of this because at the end git command used in terminal.

How to install

for Linux and mac

sudo npm install gitex -g

for window

npm install gitex -g

start

run gitex in terminal

hi i am new in dev community

codebond — Fri, 13 Dec 2019 07:10:59 +0000