Forem: Prajwal

Comprehensive Guide to JavaScript - Part 6 - Data Structures

Prajwal — Sat, 11 Jul 2020 09:55:27 +0000

Arrays

Arrays vs Lists

Arrays	Lists
Has fixed size.	No fixed size.
Created by specifying its size.	Created empty and values are added later.
Write: arr[index] = value;	Write: list.add(value);
Read: value = arr[index];	Read: list.get(index);

Push element at the end of the array

var arr = [2, 4, 6, 8];
arr.push(9); // [ 2, 4, 6, 8, 9 ]

Pop element from the end of the array

var arr = [2, 4, 6, 8];
arr.pop(); // [ 2, 4, 6, 8 ]

Have a look at Part 3 of this series to get more information about array methods.
Check out some interesting problems and solutions using arrays in javascript here.

List

The list is built out of an array. Lists come with functions that modify this array in such a way that we can give it more functionality. The list can be imagined as a class that has an array and methods to performs certain actions on this array. This is depicted in the below piece of code:

class List {
    constructor() {
        this.arr = new Array(5);
        this.size = 0;
    }
    method() {
        console.log("Hello World!");
    }
    push(value) {
        this.arr[this.size] = value;
        this.size++;
    }
    display() {
        for (let i = 0; i < this.size; i++) {
            console.log(this.arr[i]);
        }
    }
}

const l = new List();
l.method(); // Hello World!
l.push(6);
l.push(9);
l.display(); // 6 9

More programs on the list concept here.

Linked Lists

Linked Lists are a dynamic data structure that can utilise memory efficiently and can grow as required. The linked list takes constant time for insertion and deletion. The linked list consists of nodes each of which contains two parts data and next. Every node holds the data and the address to the next node.

function printList(node) {
    let current = node
    let result = "root -> "
    while (current != null) {
        result += current.data + " -> "
        current = current.next
    }
    result += "null"
    console.log(result)
}

class ListNode {
    constructor(data, next) {
        this.data = data
        this.next = next
    }
}

// start: null
// end: 1 -> 2 -> 3
function problem1() {
    let root = null;
    printList(root)
    root = new ListNode(3)
    let node = new ListNode(2)
    node.next = root
    root = node
    node = new ListNode(1)
    node.next = root
    root = node
    printList(root)
    console.log()
}

// Insertion in the beginning
// start: 1 -> 2 -> 3
// end: 0 -> 1 -> 2 -> 3
function problem2() {
    let root = new ListNode(1, new ListNode(2, new ListNode(3)))
    printList(root)
    let zero = new ListNode(0)
    zero.next = root
    root = zero
    printList(root)
    console.log()
}

// Insertion in the middle
// start: 1 -> 3 -> 4
// end: 1 -> 2 -> 3 -> 4
function problem3() {
    let root = new ListNode(1)
    root.next = new ListNode(3)
    root.next.next = new ListNode(4)
    printList(root)
    let n2 = new ListNode(2)
    root.next = n2
    printList(root)
    console.log()
}

// Insertion in the end
// start: 1 -> 2 -> 3
// end: 1 -> 2 -> 3 -> 4
function problem4() {
    let root = new ListNode(1, new ListNode(2, new ListNode(3)))
    printList(root)
    let four = new ListNode(4)
    root.next.next.next = four
    printList(root)
    console.log()
}

// Deletion in the middle
// start: 1 -> 99 -> 2 -> 3
// end: 1 -> 2 -> 3
function problem5() {
    let root = new ListNode(1, new ListNode(99, new ListNode(2, new ListNode(3))))
    printList(root)
    root.next = root.next.next    
    printList(root)
    console.log()
}

problem1()
problem2()
problem3()
problem4()
problem5()

This is a typical program for performing basic operations on a linked list. Check out more programs on the linked list here.

Stack

The stack is an efficient data structure that follows the LIFO rule(Last In First Out). The stack data structure can be thought of like a collection of disks on a music recorder. A disk can be placed upon another(push) and the recently placed disk can be removed to get access to the underlying disk(pop). You can see the topmost disk that is currently playing(peek). Stacks give constant time access to its topmost element but don't provide random access. Stacks have a great application in Undo/Redo operations, parenthesis matching and function call during backtracking. Let's see how to construct a Stack using an array:

class ArrayStack {
    constructor() {
        this.data = new Array(10);
        this.size = 0;
    }

    isEmpty() {
        return this.size === 0;
    }

    push(value) {
        if (this.data.length === this.size) {
            this.grow();
        }
        this.data[this.size] = value;
        this.size++;
    }

    pop() {
        let result = this.data[this.size - 1];
        this.data[this.size - 1] = null;
        this.size--;
        return result;
    }

    peek() {
        return this.data[this.size - 1];
    }

    size() {
        return this.size;
    }

    grow() {
        let data = new Array(this.data.length * 2);
        for (let i = 0; i < this.data.length; i++) {
            data[i] = this.data[i];
        }
        this.data = data;
    }
}

let sl = new ArrayStack();
sl.push(1);
sl.push(32);
sl.push(122);
sl.push(9012);
while (!sl.isEmpty()) {
    let val = sl.pop();
    console.log(val); // 9012 122 32 1
}

It would be a better idea to implement stack using a linked list to optimize memory allocation. Linked list implementation of a stack and more such problems here.

Queue

The queue data structure works on the concept of FIFO(First In First Out). You can imagine this data structure as a line of people waiting to collect their tickets at a movie theatre. The people in the front collect their tickets and proceed to the theatre(dequeue). Then the next person in the queue walks up to the counter. Meanwhile more people arrive and join the queue at the end to collect their tickets(enqueue). The queue takes constant time to perform both enqueue and dequeue operations.

class Node {
    constructor(data, next) {
        this.data = data;
        this.next = next;
    }
}

class Queue {
    constructor() {
        this.front = null;
        this.rear = null;
    }

    isEmpty() {
        // Check if queue is empty
        return this.front === null;
    }

    enqueue(value) {
        // add elements to the end of the queue
        let node = new Node(value);
        if (this.isEmpty()) {
            // if the queue is empty make front and rear point to the same first node
            this.front = node;
            this.rear = node;
        } else {
            // make rear point to the new node
            this.rear.next = node;
            this.rear = node;
        }
    }

    dequeue() {
        if (this.isEmpty()) {
            // if queue is empty nothing to be dequeued
            return null;
        }

        // reference to first element in queue
        let result = this.front.data;

        if (this.front === this.rear) {
            // if only one node left then reset front and rearto null
            this.front = null;
            this.rear = null;
        } else {
            // front is the second element in the queue
            this.front = this.front.next;
        }

        return result;
    }
}

let q = new Queue();
q.enqueue("33");
q.enqueue("-22");
q.enqueue("11");
q.enqueue("90");
q.enqueue("99");
q.enqueue("-101");

while (!q.isEmpty()) {
    console.log(q.dequeue()); // 33 -22 11 90 99 -101
}

This is the basic implementation of the queue data structure for more interesting problems on queue please click here.

Recursion

Recursion isn't a type of data structure but it will be essential in the topics that are covered later. Calling a function in itself is termed as recursion. A simple implementation of recursion is shown below:

let i = 0;

function display() {
    console.log("Hello for the " + i + "th" + " time.");
    if (i != 10) {
        i++;
        display();
    }
}

display();

Recursions are very helpful when working with problems related to backtracking since it makes use of the call stack. More problems on recursion here.

Tree

The tree data structure is a collection of nodes connected by branches. The tree data structure is non-linear. The tree starts with a root node having children nodes and each of the children having more children nodes. Each node will have two-pointers which points to either of its children: left and right. The tree data structure is really efficient in performing complex database queries. Let's see a basic implementation of the tree data structure:

class Node {
    constructor(data, left = null, right = null) {
        this.data = data;
        this.left = left;
        this.right = right;
    }
}

class Tree {
    constructor() {
        this.root = null;
    }

    collect() {
        // return the value at every node
        return this._collect(this.root, []);
    }

    _collect(curr, result = []) {
        // recursion
        if (curr === null) return result;
        result.push(curr.data);
        this._collect(curr.left, result);
        this._collect(curr.right, result);
        return result;
    }
}

let t1 = new Node(12);
let t2 = new Node(-12);
let t3 = new Node(121);
let t4 = new Node(122);
let t5 = new Node(112);
let t6 = new Node(-1112);

let tree = new Tree();
tree.root = t1;
t1.left = t2;
t1.right = t3;
t3.right = t4;
t4.left = t5;
t5.left = t6;

console.log(tree.collect()); // [ 12, -12, 121, 122, 112, -1112 ]

Binary Search Tree: A binary search tree is a tree in which nodes which have lesser value is stored on the left branch and the greater numbers are stored on the right branch. The binary search tree implementation is given below:

class Node {
    constructor(data, left = null, right = null) {
        this.data = data;
        this.left = left;
        this.right = right;
    }
}

class Tree {
    constructor() {
        this.root = null;
    }

    insert(value) {
        if (this.root === null) {
            this.root = new Node(value);
        } else {
            this._insert(this.root, value);
        }
    }

    _insert(node, value) {
        if (value < node.data && node.left === null) {
            node.left = new Node(value);
        } else if (value > node.data && node.right === null) {
            node.right = new Node(value);
        } else if (value < node.data) {
            this._insert(node.left, value);
        } else {
            this._insert(node.right, value);
        }
    }

    collect() {
        return this._collect(this.root, []);
    }

    _collect(node, result) {
        if (node === null) {
            return result;
        }

        result.push(node.data);
        this._collect(node.left, result);
        this._collect(node.right, result);
        return result;
    }
}

let tree = new Tree();
tree.insert(43);
tree.insert(13);
tree.insert(23);
tree.insert(29);
tree.insert(115);
tree.insert(52);
tree.insert(102);
tree.insert(2);

console.log(tree.collect()); // [43, 13, 2, 23, 29, 115, 52, 102]

Trees are an amazing data structure to work with and has its applications practically in many fields. See more problems on trees here.

Hash Maps

The hash map data structure stores data in the form of a key-value pair like a table. Each value is associated with a unique key value such that it makes it easier to access any value in the hash table. The hash table data structure is the most sought after data structure as it has a constant time complexity to access, insert or delete an element in an average case scenario. Let's have a look at a simple implementation of the hash map:

class HashMap {
    constructor() {
        this.buckets = new Array(10);
    }

    hash(str) {
        // return the sum of all letters in the string by their alphabetical index value
        str = str.toLowerCase();
        const ALPHABET = "abcdefghijklmnopqrstuvwxyz";
        let sum = 0;
        for (let i = 0; i < str.length; i++) {
            sum += ALPHABET.indexOf(str.charAt(i));
        }
        return sum;
    }

    hashCode(key) {
        // this is a hash function that returns the modulus of the string sum by the bucket length
        let val = this.hash(key) % this.buckets.length;
        return val;
    }

    put(key, value) {
        // place the value in the hash map
        let index = this.hashCode(key);
        this.buckets[index] = value;
    }

    get(key) {
        // get value of a key from hash map
        let index = this.hashCode(key);
        return this.buckets[index];
    }

    remove(key) {
        // remove the value of a key from hash map
        let index = this.hashCode(key);
        this.buckets[index] = null;
    }
}

let h = new HashMap();
h.put("Apples", 22);
h.put("Oranges", 11);
h.put("Pineapples", 16);
h.put("Grapes", 19);
console.log(h.get("Apples")); // 16
console.log(h.get("GRAPES")); // 19
console.log(h.get("Banana")); // undefined

The program takes a string and passes it into a hash function to generate a unique number for it to store it a unique index.
Sometimes the modulus gives the same number for two different strings which results in a collision. Such collisions can be solved in two ways:

Linear Probing
Linked Lists Check out the programs on solving such collisions using the above two methods here.

Graphs

The final and most important data structure are graphs. These data structures hold importance in a variety of applications from relationships on social networks to finding the closest route to a destination on maps. Below is a simple implementation of the graph data structure:

class Graph {
    constructor() {
        this.edges = {};
    }

    addNode(node) {
        // Add a vertex to the graph
        if (!this.edges[node]) {
            this.edges[node] = [];
        }
    }

    addBidirectionalEdge(n1, n2) {
        // Add bidirectional edge between two nodes
        this.addEdge(n1, n2);
        this.addEdge(n2, n1);
    }

    addEdge(start, end) {
        // Add an unidirectional edge between two nodes
        this.edges[start].push(end);
    }

    getNeighbours(start) {
        // Get the nodes connected to any node
        return this.edges[start];
    }
}

let g = new Graph();
g.addNode("A");
g.addNode("B");
g.addNode("C");
g.addNode("D");
g.addNode("E");

g.addBidirectionalEdge("A", "B");
g.addBidirectionalEdge("A", "C");
g.addBidirectionalEdge("B", "C");
g.addBidirectionalEdge("C", "D");
g.addBidirectionalEdge("D", "B");
g.addBidirectionalEdge("D", "E");

console.log(g.getNeighbours("B")); // [ 'A', 'C', 'D' ]

Checkout more problems on graphs here.

Conclusion

This has been a roller-coaster ride. Learning data structures can seem like a daunting task but it will all make sense when you get enough hold on them. Knowledge of data structures is a must before attending technical interviews. Javascript makes things easier to code these data structures by not accounting for any pointers, importing libraries, and other aspects that draw attention away from the main programming concept to be covered.
To get familiar with these concepts it will require a lot of practice and problem-solving. Head over to online coding platforms such as Hackerrank, HackerEarth, CodeChef, etc and keep practising.
I hope I have delivered javascript data structures concepts well. I also hope that you have a firm foundation now to kick things off with data structures problems.

Thank You!

Comprehensive Guide to JavaScript - Part 5 - Advanced Concepts

Prajwal — Mon, 06 Jul 2020 12:08:38 +0000

Execution Context

When the javascript engine reads our code:

Before executing anything, the global execution context is created which is the global environment(browser window).
Any function executed creates a new execution context and this gets added to the call-stack.

Call Stack

The Call Stack is a data structure that contains information about the order of execution of function calls.

Example:

function Function1() {
    Function2();
}

function Function2() {
    throw new Error("Something went wrong!") 
}

Function1();

Call-Stack:

DOM Manipulation

DOM (Document Object Model) is something that is created by the browser when a web page is loaded. Go to your browser console and enter to see all the elements on your webpage.

console.log(document);

Now let's manipulate this document by creating an object:

var Obj = document.createElement("div");
console.log(Obj);

You can also add text inside the div. Create a div in the HTML file and assign an id to it as test. Then we manipulate the text inside the div:

var Obj = document.getElementById("test");
Obj.innerText = "DEV is the best!";

Now create a p tag in the HTML file and give it an id of test1 and add some contents. Now let's try and manipulate its style using javascript:

var para = document.querySelector("p");
para.style.fontSize = "25px";
para.style.color = "red";

There are many more such DOM Manipulation methods which you can learn about here.

Prototypes and Inheritance

Prototypes

In my previous article in the series, I had mentioned that almost everything in javascript is an object. Each object has a special private property which has a link to another object called its prototype. For Example:

const myCar = {
    name: "Lamborghini",
    model: "Aventador"
}

Running the below command:

console.log(myCar.name);

retrieves the name property of the myCar object. Now what if we printed something that doesn't exist in the object. Like:

console.log(myCar.color);

it returns undefined. But if we type in:

console.log(myCar.toString());

returns a String.
It's a bit tricky. Hope you understood what happened there. Just type in:

console.log(Object.prototype);

to get the list of all available prototypes on an object. Similarly, enter the command below to get all array prototypes.

console.log(Array.prototype);

Inheritance

Objects

const Student = {
    admitted: true,
}

const John = Object.create(Student);
console.log(John);

The above piece of code created an object called John which inherited properties of Student object.

Class

class Student {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}
class Boy extends Student {
   constructor(name, age, grade) {
      super(name, age); // super class Student constructor
      this.grade = grade;
   }
}
const obj = new Boy("John", 15, 9);
console.log(obj.name); // John

This code has a class called Boy which inherits from Student which is its superclass and calls its constructor upon instantiating an object.

Call, Apply, Bind

These are some of the important methods that are called on functions. These are designed to set the context(this).

call()

This function is used by an object to use a method belonging to another object.

var Car = {
   fullName: function() {
      return this.firstName + " " + this.lastName; 
   }
}
var car1 = {
   firstName: "Lamborghini",
   lastName: "Aventador"
}
console.log(Car.fullName.call(car1)); // returns Lamborghini Aventador

apply()

This is similar to call() and useful when arguments are in the form of an array.

var Car = {
   fullname: function(color, speed) {
      return this.firstName + " " + this.lastName + " with color " + color + " and top speed of " + speed; 
   }
}
var car1 = {
   firstName: "Lamborghini",
   lastName: "Aventador"
}
console.log(Car.fullName.apply(car1, ["orange", "349"])); // returns Lamborghini Aventador with color orange and top speed of 349

bind()

Returns a new function when called and has its this set to a specific value.

var car1 = {
   firstName: "Lamborghini",
   lastName: "Aventador"
}

var fullname = function(color, speed) {
   return this.firstName + " " + this.lastName + " with color " + color + " and top speed of " + speed; 
}

var binding = fullname.bind(car1);
console.log(binding("red", "349")); // Lamborghini Aventador with color red and top speed of 349

IIFE

IIFE(Immediately Invoked Function Expression) are functions that are executed as soon as they are created. They are used to avoid changing the global variables in the program.

(function() {
   console.log("Dev is amazing!");
})(); // returns Dev is amazing

Synchronous and Asynchronous Function

JavaScript is synchronous and executes code line by line. To demonstrate this have a look at the piece of code below:

function f1() {
   console.log("I am function 1");
}
function f2() {
   console.log("I am function 2");
}
f1(); // returns I am function 1
f2(); // returns I am function 2

This means that javascript executes function f1 completely and then moves onto the next function f2.
What if there were complex operations that are taking place in f1 and f2 has to wait a long time for f1 to finish? This is where javascript's asynchronous operations come in handy. For example:

function f1() {
   console.log("I am function 1");
}
function looper() {
   setTimeout(function() {
      for(let i=0; i<99999; i++) {}
      console.log(i);
   }, 1000);
}
function f2() {
   console.log("I am function 2");
}
f1();
looper();
f2();

Although looper is called before f2, the output's first line prints I am function 1, followed by I am function 2, then the looper function is executed. We have achieved asynchronous property of javascript here.

Callbacks and Higher Order Functions

Callbacks Functions

A function passed in to another function is called a callback. JavaScript objects are first-class objects i.e. we can pass a function as an argument to another function.

setTimeout(function() {
   console.log("Hello There!");
}, 5000); // prints "Hello There" after 5 seconds

Higher Order Functions

A function that takes another function as an argument and returns it. Functions such as map(), reduce(), filter(), sort(), etc. are called higher-order functions in javascript. These functions have been discussed in my previous article.

Strict Mode

Strict mode enables a 'strict' operating context and prevents certain actions and throws exceptions more often. Strict mode helps in writing better code and prevents the use of an undeclared variable. For example:

x = 50;
console.log(x); // prints 50

This will normally execute and won't throw any error. But in production, this might cause serious issues. Hence, strict mode helps in this case:

"use strict";
x = 50;
console.log(x);

Executing the above piece of code will throw errors as x is undeclared. There are other kinds of stuff which aren't allowed in a strict mode such as:

Restrict the use of an undeclared variable.
Deleting a variable or function.
Duplication of the parameter name.
Octal numeric literals not allowed.
Writing read-only and get-only property is not allowed.
Escape characters can't be used.

Promise

A promise is an object and is an assurance for resolving something that is to happen in the future else it is rejection. A promise has three states namely:

Resolve: Completed
Reject: Failed
Pending: State between success or failure of the promise When data is requested from the server, it is in pending state. If the data is successfully retrieved from the server the promise is said to be resolved. If the information isn't fetched it results in a rejection. For Example:

f1()
  .then(function(response) {
    return f2(response);
}).then(function(nextResponse) {  
    return f3(nextResponse);
}).then(function(result) {  
    console.log(result);
}).catch(rejection);

The above code demonstrates how promises can be chained together and make each promise dependent on the previous one. This is achieved using then(), which depicts the action to be performed upon resolving the promise.

Async/Await

Async/Await is a type of promise. Probably the most popular and most used one. We declare an async function and await for the promise to resolve before printing a message.

async function hello() {
  return greeting = await Promise.resolve("Hello");
};

hello().then(alert);

These were some of the advanced topics in javascript. I hope I delivered them well.

Thank You!

A Comprehensive Guide to JavaScript - Part 4 - Arrays

Prajwal — Sun, 05 Jul 2020 11:37:57 +0000

Arrays

Arrays are list-like objects. They are just single objects that contain multiple values stored in a list.

var array = [1, 2, 3, 4, 5];

Properties of Arrays

length: Returns the number of elements in the array.

array.length // returns 5

constructor: Returns the constructor function for the object.

array.constructor; // returns the array constructor

prototype: Add properties and elements to an array object.

array.prototype; // refers to array object itself

Important Methods

push(): Add an element at the end of the array.

array.push("10"); // [1, 2, 3, 4, 5, 10]

pop(): Remove an element from the end of the array.

array.pop(); // 10

shift(): Remove the first element and return it.

array.shift(); // 1

unshift(): Add an element to the beginning of an array and return length.

array.unshift(0); // 5

concat(): Join two arrays together and return a copy of the joined array.

array2 = [99, 100];
array.concat(array2); // 0, 2, 3, 4, 5, 99, 100

find(): Find the first element in an array that satisfies a condition.

array.find(function satisfy(num) {
    return num>4; // 5
});

sort(): Sort the array.

array.sort(function(a, b){return a-b}); // 0, 2, 3, 4 ,5, 99, 100

filter(): Make a new array from an existing one after satisfying a condition.

array.filter(function satisfy(num) {
    return num>4; // 5, 99, 100
});

forEach(): calls a function for every element in the array.

var array = [0,2,3,4,5,99,100];
var array2 = [];
array.forEach(function mult(num) {
    array2.push(num*num);
});
array2; // [ 0, 4, 9, 16, 25, 9801, 10000 ]

map(): Creates a new array with results of a function called for each and every element in the array.

array3 = array2.map(Math.sqrt)
array3; // [ 0, 2, 3, 4, 5, 99, 100 ]

reduce(): Reduce values of an array to one value.

var array = [0,2,3,4,5,99,100];
var s = array.reduce(function sub(total, num) {
  return total + num; // 213
});

slice(): Select and return part of an array.

var array = [1, 2, 5, 99, 101];
array.slice(0, 2); // [ 1, 2 ]

splice(): Add/remove element from an array.

var lang = ["HTML", "CSS", "JS", "Bootstrap"];
var removed = lang.splice(2, 1, 'PHP', 'React');
console.log(lang); // HTML,CSS,PHP,React,Bootstrap
console.log(removed); // JS

These methods will come in handy when working with data on the web and I hope you have a fair understanding of the most important ones by now.

Thank You!

A Comprehensive Guide to JavaScript - Part 3 - Objects

Prajwal — Sun, 05 Jul 2020 09:19:32 +0000

Objects

An object is a non-primitive data type. It is a collection of related data or functionality. These consists of several variables and functions which are called properties and methods of the object.
Example:

var Student = {name: "Prajwal", age: "20"}; // Student object with two properties

Almost everything in javascript is an object. All javascript values such as Booleans, Strings, Numbers, Maths, Dates, Regular Expressions, Array and Functions are all objects.

Creating an Object

Using an object literal:

var Car = {company: "Lamborghini", name: "Aventador", year: "2020"};

Using new keyword:

var Car = new Object();
Car.company = "Lamborghini";
Car.name = "Aventador";
Car.year = "2020";

Adding New Properties to an Object

Dot notation

Car.color = "royal blue"

Bracket notation

Car['color'] = "royal blue"

Deleting Properties from an Object

delete Car.color;

Adding a Method to an Object

Car.fullname = function() {
    return this.company + " " + this.name;
};

Built-In Constructors

New Object object

var a = new Object();

New String object

var a = new String();

New Number object

var a = new Number();

New Boolean object

var a = new Boolean();

New Array object

var a = new Array();

New Regular Expression object

var a = new RegExp();

New Function object

var a = new Function();

New Date object

var a = new Date();

Using this for Object References

The keyword this is used in javascript to refer to the properties of the current object.

var Car1 = {name: "Lamborghini"};
var Car2 = {name: "Ferrari"};
function display() {
    console.log("Car name is: ", this.name);
}
Car1.display = display;
Car2.display = display;
Car1.display(); // Lamborghini
Car2.display(); // Ferrari

Objects play a very important role in javascript and I hope you've understood them well by now.

Thank You!

A Comprehensive Guide to JavaScript - Part 2 - DataTypes and Expressions

Prajwal — Sun, 05 Jul 2020 07:13:41 +0000

DataTypes in JavaScript

Boolean

var a = true; // true or false

Number

var a = 100; // including decimal numbers

String

var a = 'Hello, World!'; // enclosed under single or double quotes

BigInt

var a = x + 1n; // 9007199254740993n

Null

var a = null; // null variable

Undefined

var a; // value not declared

Symbol

var a = Symbol("abc"); // unique identifier

Expressions

You might have come across certain memes where javascript behaves strangely with respect to other programming languages when it comes to certain expressions. For example:

var a = "" + 1 + 2 // evaluates to "12"

But we are adding up a String type with a Number type here. How is that even logical? Alright! JavaScript initially checks the first expression and notices that it is of String type so therefore it concludes that the entire expression is of type String and concatenates the rest of the expression. This makes javascript a lot of fun to work with. Let's see another example and guess the output:

var a = true + false;

The above expression evaluates to 1 of Number type because true gets interpreted as 1 and false as 0. Awesome! Let's check out another one:

var a = "2" * "10";

You might think this could result in an error, but javascript is clever enough to understand that multiplying string makes no sense, hence it multiplies them as numbers and returns 20.
The sole purpose of this was not to show javascript is a "weirdo", but to depict how flexible, adaptable and diverse this language is and the amount of fun it is to work with.
Still not convinced? I have a fun activity for you. There is a huge debate on the topic, "Was it the hen or the egg that appeared first on this planet?". JavaScript answers this easily. Just go to your browser console and enter the following piece of code:

['🥚','🐔'].sort();

This clearly says that the egg appeared first on this planet and settles the debate(Scientists say the same too).

I hope you understood some of the basics and fun involved in learning javascript.

Thank You!

A Comprehensive Guide to JavaScript - Part 1 - ES6

Prajwal — Sun, 05 Jul 2020 05:58:43 +0000

JavaScript is an amazing programming language for the Web. JavaScript can execute on the browser, the server, or any device for that purpose which has a javascript engine(Chrome - V8 Engine, Firefox - SpiderMonkey). This engine parses the script, compiles it and runs the machine code really fast. JavaScript has many characteristics such as being dynamic, single-threaded, prototype-based, lightweight, interpreted, object-oriented and both imperative as well as declarative.
ECMAScript is the scripting language that forms the foundations of JavaScript. ES6 or ES2015 or JavaScript 6 was the major advancement to this language which adds many features and adds significantly new syntax for writing complex applications to make development easier.

Features of ES6

If you are new to javascript it is essential to learn these features to enhance your productivity. Features of ES6 include:

let and const variables: These introduced a new scope feature to javascript called Block Scope in addition to Global and Function Scopes. The main difference between the var and let is that var can't have block scope whereas let can have block scope.

var a = 5; // a is 5
{
    let a = 10; // a is 10
}
// a is 5 again

const helps in declaring a value only once per scope.

var a = 5; // a is 5
{
    const a = 10; // a is 10
}
// a is 5

Arrow Functions: These are probably the most important feature of javascript introduced by ES6. They are similar to regular functions but have simpler syntax.

var increment = inc => inc+1; // increment is the function name which takes one parameter called inc and returns inc+1
increment(3); // returns 4

Default Parameter Values: ES6 introduced the concept of declaring the function parameters with default values.

var x = (a, b=2) => a+b; // b has default value of 2
x(3); // returns 5

JavaScript Classes: ES6 introduced a more formal class definition and intuitive object oriented concepts in javascript.

class Student {
    constructor(name) {
    this.StudentName = name;
    }
}

String Templating: This feature allows to involve variables and expressions among string. The syntax is provided below:

const name= "Prajwal";
const hi = `Hi ${name}`; // returns "Hi Prajwal"

These are some of the most important features of ES6 that one must understand before deep diving into javascript.

Thank You!

Create a 3D Image Slideshow using HTML, CSS & JS

Prajwal — Tue, 30 Jun 2020 12:53:24 +0000

In this article, you will learn how to create an amazing 3D image slideshow on the web using just HTML, CSS and JavaScript which you can use in your personal websites to render images beautifully.

HTML

In our HTML file, we will primarily have a container div that encloses three other divs that will mark the three rotating sections of our image. A cube class is assigned to each of these divs which will behave as independent cubes rotated along a common axis (Like a Rubix cube but cut only along one side). The face class will depict the regions of the cube where the image is held.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Cube</title>
</head>
<body>

    <div class="container">
        <div class="viewport">
            <div class="control left-arrow"><i class="fas fa-arrow-left"></i></div>
            <div class="cube cube-1">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="cube cube-2">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="cube cube-3">
                <div class="face front"></div>
                <div class="face back"></div>
                <div class="face top"></div>
                <div class="face bottom"></div>
                <div class="face left"></div>
                <div class="face right"></div>
            </div>
            <div class="control right-arrow"><i class="fas fa-arrow-right"></i></div>
            <div class="control play-pause"><i class="fas fa-play"></i></div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

CSS

We will provide our basic styles to the body, background and the viewport. Here is where the high-tech CSS wizard skills come into picture along with some amount of maths. The CSS file is provided below and I think it is pretty much self-explanatory. Create a folder called img and save some images in it with the name used in the CSS file.

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .8)), url(images/bg.jpg) no-repeat;
    background-size: cover;
}

.viewport {
    height: 21vw;
    width: 42vw;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    perspective: 1300px;
}

.viewport::after {
    width: 120%;
    height: 20%;
    top: 140%;
    left: -10%;
    content: '';
    position: absolute;
    background-color: #000;
    z-index: -1;
    filter: blur(50px);
}

.cube {
    width: 100%;
    height: 33.3333333%;
    transform-style: preserve-3d;
    position: relative;
}

.cube-1 {
    transition: transform .4s;
}

.cube-2 {
    z-index: 10;
    transition: transform .4s .2s;
}

.cube-3 {
    transition: transform .4s .4s;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
}

.front {
    transform: translateZ(21vw);
}

.cube-1 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .front {
    background: url(images/slide-img-1.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.back {
    transform: translateZ(-21vw) rotateY(180deg);
}

.cube-1 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .back {
    background: url(images/slide-img-2.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.left {
    transform: translateX(-21vw) rotateY(-90deg);
}


.cube-1 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .left {
    background: url(images/slide-img-3.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.right {
    transform: translateX(21vw) rotateY(90deg);
}


.cube-1 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% 0;
    background-size: cover;
}

.cube-2 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% -7vw;
    background-size: cover;
}

.cube-3 .right {
    background: url(images/slide-img-4.jpg) no-repeat 50% -14vw;
    background-size: cover;
}

.top {
    height: 42vw;
    background-color: #111;
    transform: translateY(-21vw) rotateX(90deg);
}

.bottom {
    height: 42vw;
    background-color: #111;
    transform: translateY(-14vw) rotateX(-90deg);
}

.control {
    width: 40px;
    height: 40px;
    align-items: center;
    color: #fff;
    position: absolute;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    background-color: rgba(59, 52, 50, .7);
    display: flex;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: background-color .3s;
}

.control:hover {
    background-color: rgba(42, 38, 36, .8);
}

.control i {
    pointer-events: none;
}

.left-arrow {
    top: 50%;
    left: -35%;
}

.right-arrow {
    top: 50%;
    left: 135%;
}

.play-pause {
    top: 140%;
    left: 120%;
}

JavaScript

The javascript part of this project will handle the initiation of the rotation and the little play and pause button in the bottom of the page that is responsible for automating the slide show after a set amount of time interval.

const rotate = () => {
  const cubes = document.querySelectorAll(".cube");

  Array.from(cubes).forEach(
    (cube) => (cube.style.transform = `rotateY(${x}deg)`)
  );
};

const changePlayPause = () => {
  const i = document.querySelector(".play-pause i");
  const cls = i.classList[1];
  if (cls === "fa-play") {
    i.classList.remove("fa-play");
    i.classList.add("fa-pause");
  } else {
    i.classList.remove("fa-pause");
    i.classList.add("fa-play");
  }
};

let x = 0;
let bool = false;
let interval;

const playPause = () => {
  if (!bool) {
    interval = setInterval(() => {
      x -= 90;
      rotate();
    }, 3000);
    changePlayPause();
    bool = true;
  } else {
    clearInterval(interval);
    changePlayPause();
    bool = false;
  }
};

document.querySelector(".left-arrow").addEventListener("click", () => {
  x += 90;
  rotate();
  if (bool) {
    playPause();
  }
});

document.querySelector(".left-arrow").addEventListener("mouseover", () => {
  x += 25;
  rotate();
});

document.querySelector(".left-arrow").addEventListener("mouseout", () => {
  x -= 25;
  rotate();
});

document.querySelector(".right-arrow").addEventListener("click", () => {
  x -= 90;
  rotate();
  if (bool) {
    playPause();
  }
});

document.querySelector(".right-arrow").addEventListener("mouseover", () => {
  x -= 25;
  rotate();
});

document.querySelector(".right-arrow").addEventListener("mouseout", () => {
  x += 25;
  rotate();
});

document.querySelector(".play-pause").addEventListener("click", () => {
  playPause();
});

Result

By now, I know you are all wondering, "What could these enormous and gigantic set of code possibly do?". Please have a look at the gif provided below to get a clear cut idea of how all these codes work together.

Thank you for reading this article. The entire project is available on GitHub. For any queries feel free to contact me on my LinkedIn.

Thank You!

Building a Progressive Web App and Deploying it

Prajwal — Fri, 12 Jun 2020 05:07:17 +0000

In my previous article (which, thanks to you guys, became the top article of the week) I had discussed about how to build a weather app using ReactJS. In this article, you will learn what progressive web apps are and how to deploy the weather app to the PWA store.

Introduction to PWA

Progressive web apps are websites that bring web capabilities to an app-like experience. What it basically means is that instead of having to build a separate mobile app for your company or business interest, you can just build a progressive web app and take advantage of both web and native features. To make it even simpler, think of PWA as the best combination of both web and mobile apps.

Advantages of PWA:

Progressive web apps are incredibly fast.
Easier to visit the website than having to install the application.
Native apps are well integrated and configured to the operating systems which provides better performance.
Offline access.
Less data usage.

Getting Started

While building the weather app we focused all our attention on the src folder. For building our PWA application we can concentrate on the public folder. Let's start by clearing the clutter in this folder until only index.html file remains.

Let's start of by creating a Service Worker in the index.html. Service worker is a script that runs in the background of a website. This can be very helpful because it can run even after termination of our application and hence can be capable of delivering notifications and working offline. A new service worker can be created using the following code in the index.html file just below the div with root id.

<script>
      if('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('./serviceworker.js')
          .then(reg => console.log(reg.scope))
          .catch(err => console.log(err))
        })
      }
</script>

Create a serviceworker.js file in the public folder. In this folder paste the following code:

const CACHE = "dev";
const URL = ["index.html", "offline.html"];
const self = this;

As I mentioned earlier, PWA are extremely fast. The reason for this is that they maintain a cache. So, we create a variable CACHE and give it a name. Then, in variable URL we provide the URLs to be cached.

Now, there are three events that needs to be performed in this file:

Installing the service worker

Add the URLs into the Cache Storage.

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((cache) => {
      return cache.addAll(URL);
    })
  );

Listen for requests

Match the request the page recieves and return the request if the fetch is a success, else render the offline page.

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then(() => {
      return fetch(e.request).catch(() => caches.match("offline.html"));
    })
  );
});

Activate the service worker

Remove old cache and store a new one.

self.addEventListener("activate", (e) => {
  const newCache = [];
  newCache.push(CACHE);
  e.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!newCache.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      )
    )
  );
});

If you would like to learn more about caching, please refer to this link.

To make to sure we test this hit npm start on your terminal, go to your chrome developer console and select Application tab and on the Service workers Panel make sure to check Update on reload and then on the Clear storage panel hit Clear site data.

It's time to build our offline.html page. I will be using minimal styling for this page, but feel free to make this offline page look extraordinary.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Weather App</title>
        <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
        <style type="text/css">
            html {
                height: 100%;
            }
            body {
                height: 100%;
                background-image: linear-gradient( to right, rgba(255, 100, 0, 0.52), rgba(0, 195, 255, 0.73) );
                display: flex;
                font-size: 30px;
                color: white;
                font-family: 'Balsamiq Sans', cursive;
                align-items: center;
                text-align: center;
                justify-content: center;
            }
            .lds-ripple {
                display: inline-block;
                position: relative;
                width: 80px;
                height: 80px;
            }
            .lds-ripple div {
                position: absolute;
                border: 4px solid #fff;
                opacity: 1;
                margin: -120px 170px;
                border-radius: 50%;
                animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            }
            .lds-ripple div:nth-child(2) {
                animation-delay: -0.5s;
            }
                @keyframes lds-ripple {
                0% {
                    top: 36px;
                    left: 36px;
                    width: 0;
                    height: 0;
                    opacity: 1;
                }
                100% {
                    top: 0px;
                    left: 0px;
                    width: 72px;
                    height: 72px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="lds-ripple"><div></div><div></div></div>
        <span>You are currently offline. Please go online to check the weather.</span>
    </body>
</html>

Now, reload the page and watch your cache storage. If it looks something like the picture below, Congratulations! You've just cached your web pages for faster and offline access.

For further testing, go to the Network tab and select Offline.

Now reload your page to see your cached offline.html page.

Manifest

A manifest file is a simple JSON file that provides information about the application. So create a manifest.json file and paste this piece of code in there.

{
  "name": "Weather App PWA",
  "short_name": "Weather App",
  "icons": [
    {
      "src": "./logo.png",
      "type": "image/png",
      "sizes": "1024x1024"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

To learn more about manifest files check out this link.

Lighthouse

Lighthouse is a tool to assess the quality of web applications. Install it and then on your chrome developer console click Generate report. Now let's check how our app performs:

Well, we have a pretty good score as per Lighthouse. As you can see there is one test that is still not passing which is responsible for keeping our Performance score low.

Deploying the application

In order to overcome the error of not redirecting HTTP traffic to HTTPS, we will have to deploy our application.
Go to your terminal and enter, npm run build to create build folder in your project directory.
Create an account on Netlify and on your dashboard that looks something like this:

Just drag and drop your build folder onto this screen and that's all it takes to deploy your application online on netlify.

Click the generated URL to see your application for real on the internet, try and disconnect your internet to see the offline page too.

Result

Now, let's run a Lighthouse test on our deployed application:

Amazing! That's a great score for our PWA application.
Now, if you have done everything right, then you should see a + icon next to your bookmark icon on url search bar on chrome.

Now, this is the button that will allow you to install this application on your device. Click on the + icon and install the application.

Disconnect your internet connection to see the offline page.

That's really wonderful. The application is now native to your system and you can use it on your mobile too.

Now for the most amazing part - Publishing the app on PWA store. Head over to PWA Store and signup. After logging in, go to your profile page and click on the hamburger icon on the far right, and click on the little + symbol. Enter all the details of your application including name, description, screenshots, etc. Finally, run the Lighthouse PWA check. After getting all three ticks, you can submit it for review.

Voila! That's it. After review, your app will be published on the PWA store and after some time you can find it under Discover section.

This has been a long article, yet an informative one. I hope you understood every bit of what a Progressive Web App is, how you could build one, testing it using Lighthouse tool and also deploying the PWA application.

In case of any queries, please feel free to contact me on my LinkedIn. The code is available on my Github.

Thank You!

Build a Sorting Visualizer in Python

Prajwal — Sun, 07 Jun 2020 10:30:53 +0000

Python

Python programming language has been dominating the field of computer science recently with its applications in many areas such as machine learning, data science, artificial intelligence, web development and software programming which are the recent trends of the 21st century. According to PYPL PopularitY of programming language index, python has about 31.6% of the total share compared to other programming languages.

So, I guess we could learn python in the best way possible, by building an amazing project to master one of the fundamentals in any programming language - Sorting.
By the end of this article you would have built an amazing sorting visualizer using five different algorithms:

Selection Sort
Bubble Sort
Insertion Sort
Merge Sort
Quick Sort

Algorithms

Let's create a file called algorithms.py and in that, we will write all the sorting algorithms in python. Import the time module to inform the user about the time taken by the visualizer (Note: The time that will be displayed is the time taken by our system to render the visualizer and has no relevance to the sorting algorithm).
Create a class called Algorithm and paste this piece of code in there:



class Algorithm:
    def __init__(self, name):
        self.array = random.sample(range(512), 512) # Random array of size 512
        self.name = name # Get name of the variable

    def update_display(self, swap1=None, swap2=None):
        import visualizer
        visualizer.update(self, swap1, swap2) # pass the indexes to be swapped into the visualizer

    def run(self): # Start the timer and run the algorithm
        self.start_time = time.time() 
        self.algorithm()
        time_elapsed = time.time() - self.start_time
        return self.array, time_elapsed

We will initially create a random array of size 512. In the update_display method we will call the update function in visualizer.py which we will write later to handle the graphics. Finally, the run method will start the timer and call the algorithm function which is a part of every sorting algorithm to come. It returns the sorted array and the elapsed time.

Selection Sort



class SelectionSort(Algorithm):
    def __init__(self):
        super().__init__("SelectionSort")

    def algorithm(self):
        for i in range(len(self.array)):
            min_idx = i
            for j in range(i+1, len(self.array)):
                if self.array[j] < self.array[min_idx]:
                    min_idx = j
            self.array[i], self.array[min_idx] = self.array[min_idx], self.array[i]
            self.update_display(self.array[i], self.array[min_idx])

The SelectionSort class will inherit the Algorithm class and in its algorithm method we implement Selection sort. Every time the array updates we continuously call the update_display method and render the sorting of the array realtime. Similarly, we implement likewise to all the other algorithms as well.

Bubble Sort



class BubbleSort(Algorithm):
    def __init__(self):
        super().__init__("BubbleSort")

    def algorithm(self):
        for i in range(len(self.array)):
            for j in range(len(self.array)-1-i):
                if self.array[j] > self.array[j+1]:
                    self.array[j], self.array[j+1] = self.array[j+1], self.array[j]
            self.update_display(self.array[j], self.array[j+1])

Insertion Sort



class InsertionSort(Algorithm):
    def __init__(self):
        super().__init__("InsertionSort")

    def algorithm(self):
        for i in range(len(self.array)):
            cursor = self.array[i]
            idx = i
            while idx > 0 and self.array[idx-1] > cursor:
                self.array[idx] = self.array[idx-1]
                idx -= 1
            self.array[idx] = cursor
            self.update_display(self.array[idx], self.array[i])

Merge Sort



class MergeSort(Algorithm):
    def __init__(self):
        super().__init__("MergeSort")

    def algorithm(self, array=[]):
        if array == []:
            array = self.array
        if len(array) < 2:
            return array
        mid = len(array) // 2
        left = self.algorithm(array[:mid])
        right = self.algorithm(array[mid:])
        return self.merge(left, right)

    def merge(self, left, right):
        result = []
        i, j = 0, 0
        while i < len(left) and j < len(right):
            if left[i] < right[j]:
                result.append(left[i])
                i += 1
            else:
                result.append(right[j])
                j += 1
            self.update_display()
        result += left[i:]
        result += right[j:]
        self.array = result
        self.update_display()
        return result

Quick Sort



class QuickSort(Algorithm):
    def __init__(self):
        super().__init__("QuickSort")

    def algorithm(self, array=[], start=0, end=0):
        if array == []:
            array = self.array
            end = len(array) - 1
        if start < end:
            pivot = self.partition(array,start,end)
            self.algorithm(array,start,pivot-1)
            self.algorithm(array,pivot+1,end)

    def partition(self, array, start, end):
        x = array[end]
        i = start-1
        for j in range(start, end+1, 1):
            if array[j] <= x:
                i += 1
                if i < j:
                    array[i], array[j] = array[j], array[i]
                    self.update_display(array[i], array[j])
        return i

Visualizer

Congratulations! You just wrote all the popular sorting algorithms. The final step is to visually display the way how each of these sorting algorithms work.

Here is the code for visualizer.py file.



import algorithms
import time
import os
import sys
import pygame

 # Set the window length and breadth  (Make sure that the breadth is equal to size of array. [512])
dimensions = [1024, 512]
# List all the algorithms available in the project in dictionary and call the necessary functions from algorithms.py
algorithms = {"SelectionSort": algorithms.SelectionSort(), "BubbleSort": algorithms.BubbleSort(), "InsertionSort": algorithms.InsertionSort(), "MergeSort": algorithms.MergeSort(), "QuickSort": algorithms.QuickSort()}

# Check list of all the available sorting techniques using 'list'
if len(sys.argv) > 1:
    if sys.argv[1] == "list":
        for key in algorithms.keys(): print(key, end=" ") # Display the available algorithms
        print("")
        sys.exit(0)

# Initalise the pygame library
pygame.init()
# Set the dimensions of the window and display it
display = pygame.display.set_mode((dimensions[0], dimensions[1]))
# Fill the window with purple hue
display.fill(pygame.Color("#a48be0"))

def check_events(): # Check if the pygame window was quit
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit();
            sys.exit();

def update(algorithm, swap1=None, swap2=None, display=display): # The function responsible for drawing the sorted array on each iteration
    display.fill(pygame.Color("#a48be0"))
    pygame.display.set_caption("Sorting Visualizer     Algorithm: {}     Time: {:.3f}      Status: Sorting...".format(algorithm.name, time.time() - algorithm.start_time)) # Display on title bar
    k = int(dimensions[0]/len(algorithm.array))
    for i in range(len(algorithm.array)):
        colour = (80, 0, 255)
        if swap1 == algorithm.array[i]:
            colour = (0,255,0)
        elif swap2 == algorithm.array[i]:
            colour = (255,0,0)
        # The most important step that renders the rectangles to the screen that gets sorted.
        # pygame.draw.rect(dsiplay_window, color_of_rectangle, size_of_rectangle)
        pygame.draw.rect(display, colour, (i*k,dimensions[1],k,-algorithm.array[i]))
    check_events()
    pygame.display.update()

def keep_open(algorithm, display, time): # Keep the window open until sort completion
    pygame.display.set_caption("Sorting Visualizer     Algorithm: {}     Time: {:.3f}      Status: Done!".format(algorithm.name, time))
    while True:
        check_events()
        pygame.display.update()

def main():
    if len(sys.argv) < 2:
        print("Please select a sorting algorithm.") 
    else:
        try:
            algorithm = algorithms[sys.argv[1]] # Pass the algorithm selected
            try:
                time_elapsed = algorithm.run()[1]
                keep_open(algorithm, display, time_elapsed)
                pass
            except:
                pass
        except:
            print("Error.")

if __name__ == "__main__":
    main()

Yes! I know, its a lot of code to digest, but I assure you that it will all be fruitful when you hit the run button on this project. Meanwhile, let me explain the visualizer code to you.

Firstly, we import the algorithms python file where we wrote our algorithms. Then, import pygame module in python to work with graphics in our project.
Also, install pygame by executing pip install pygame in your terminal.
Set the window size in dimensions array and make sure to leave the second parameter 512, as that is the number of random samples we are using.
The next few lines of commands are to display the list of available algorithms to the user and prompt them to choose one and enter it while running our code.
Then, initialize the pygame module, set the dimensions of the window and fill the display with a colour.
The check_events function is to exit out of the program in case the window is closed.
Then there is the most important function in the entire program - update method. This method takes in the array after every iteration, and the two swapping variables at hand, swap1 and swap2 variables. These variables are assigned different colours.
Then we use the pygame.draw.rect() function to render those array elements to the window and update it.
The keep_open function keeps the pygame window open as long as it is running and the window hasn't been terminated.
Finally, the main function takes in the user-selected algorithm as input and calls the specific algorithm along with its timer.

Result

Ultimately, the time has come to run our project. Open up your terminal in the project directory and execute python visualizer.py list to obtain the list of all available algorithms.

Then execute python visualizer.py <sorting-algorithm>
Where, sorting-algorithm is one of the algorithms mentioned in the list.

For example,
python visualizer.py SelectionSort

I hope you enjoyed working on this project and at the same time learnt a few sorting algorithms in python. For any queries feel free to contact me on my LinkedIn. The code is available on my GitHub.

Thank You!

Learn React by building a Weather App

Prajwal — Thu, 04 Jun 2020 08:16:13 +0000

React

In my previous article, I had talked about react and its significance in the world of web application development. In this article, you'll learn how to work with react by building a web application.

Getting Started

We've seen how to start a new project with react. So, lets get started by using the command: npx create-react-app weather-app
Go into the project directory after installation using cd weather-app.

Understanding the structure of your project

After executing the above command your project folder will look something like this:

We don't have to worry about most of the files in this folder. All that matters is the index.html, App.js, index.css and index.js files. As of now the way things work is that, all the things we want to render to the screen is written into App.js file(with the styles in index.css) which is passed onto the index.js that renders this App component in the div tag with the id 'root' in the index.html, which is displayed on the screen. Phew! Well, this is simply how react works, breaking the structure into components, using it wherever required and passing it finally to the html file. Awesome!

The Weather App

Follow these steps to build a wonderful weather application:

Sign up at OpenWeatherMap and obtain the API keys.
Make a file called 'keys.js' in the src folder and use your api keys to place them in this file like mentioned below.

module.exports = {
  API_KEY: "<your-api-key-here>",
  BASE_URL: "https://api.openweathermap.org/data/2.5/",
};

Copy paste this piece of code into your App.js:

import React, { useState } from "react";
import keys from "./keys";

const api = {
  key: keys.API_KEY,
  base: keys.BASE_URL,
};

function App() {
  const dateBuild = (d) => {
    let date = String(new window.Date());
    date = date.slice(3, 15);
    return date;
  };

  const [query, setQuery] = useState("");
  const [weather, setWeather] = useState({});
  const search = (e) => {
    if (e.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then((res) => res.json())
        .then((result) => {
          setQuery("");
          setWeather(result);
          console.log(result);
        });
    }
  };

  return (
    <div
      className={
        typeof weather.main != "undefined"
          ? weather.main.temp > 18
            ? "App hot"
            : "App cold"
          : "App"
      }
    >
      <main>
        <div className="search-container">
          <input
            type="text"
            placeholder="Search..."
            className="search-bar"
            onChange={(e) => setQuery(e.target.value)}
            value={query}
            onKeyPress={search}
          />
        </div>
        {typeof weather.main != "undefined" ? (
          <div>
            <div className="location-container">
              <div className="location">
                {weather.name}, {weather.sys.country}
              </div>
              <div className="date"> {dateBuild(new Date())}</div>
            </div>
            <div className="weather-container">
              <div className="temperature">
                {Math.round(weather.main.temp)}°C
              </div>
              <div className="weather">{weather.weather[0].main}</div>
            </div>
          </div>
        ) : (
          ""
        )}
      </main>
    </div>
  );
}

export default App;

Then, Copy this into your index.css file:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Ubuntu", sans-serif;
}

.App {
  background-image: linear-gradient(
      to right,
      rgba(255, 0, 0, 0.52),
      rgba(0, 195, 255, 0.73)
    ),
    url("img/app.jpg");
  background-repeat: no-repeat;
  transition: 0.2s ease;
}

.App.hot {
  background-image: linear-gradient(
      to bottom,
      rgba(255, 16, 16, 0.52),
      rgba(0, 0, 0, 0.73)
    ),
    url("img/hot.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.2s ease;
}

main {
  min-height: 100vh;
  padding: 25px;
}

.App.cold {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 255, 213, 0.52),
      rgba(0, 0, 0, 0.73)
    ),
    url("img/cold.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.2s ease;
}

.search-container {
  width: 100%;
  margin: 0 0 75px;
}

.search-bar {
  color: black;
  font-size: 15px;
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  outline: none;
  appearance: none;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0px 5px rgba(58, 53, 53, 0.73);
  background: rgba(255, 255, 255, 0.52);
  transition: 0.4s ease;
}

.search-container .search-bar:focus {
  background-color: white;
}

.location-container {
  color: white;
  font-size: 30px;
  text-align: center;
  text-shadow: 3px 3px rgba(58, 53, 53, 0.73);
}

.location-container .date {
  color: white;
  font-size: 20px;
  text-align: center;
  text-shadow: 3px 3px rgba(58, 53, 53, 0.73);
}

.weather-container {
  text-align: center;
}

.weather-container .temperature {
  color: white;
  position: relative;
  display: inline-block;
  margin: 30px auto;
  padding: 15px 25px;
  font-size: 100px;
  font-weight: 700;
  background-color: rgb(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 3px 3px rgba(58, 53, 53, 0.73);
  text-shadow: 3px 3px rgba(58, 53, 53, 0.73);
}

.weather-container .weather {
  color: white;
  font-size: 50px;
  font-weight: 700;
  text-shadow: 3px 3px rgba(58, 53, 53, 0.73);
}

Explanation

I know your overwhelmed by the code, but it will all be very clear once I break it down for you.

HTML: Only focus on the HTML elements of the App.js file. These HTML div's include the search box, the location to be displayed, the temperature and the prevalent conditions.

CSS: We will assign these div elements with a classname so that they can be given necessary styles in our CSS file.
(P.S: A little understanding of HTML and CSS is a pre-requisite.)

Date function: In the div class that handles the date we make sure to call a function called 'dateBuild'. This 'dateBuild' function in javascript gets the date in string format. Then we extract the current month, date and year using the slice() function.

API Fetch and Hooks: We make use of 'useState' Hook of react to change the state of what is being rendered on the screen. One hook for the search bar value and the other for the content being displayed.
In the div which handles the search bar, we call a function called 'search' when user hits 'Enter' key. In this function we make a call to the URL using our credentials and query to fetch the data from the server and then we change the state of what is being displayed on the screen. Hence, the useState hook is significant when it comes to state management in React.

Dynamic Background: This is just a simple logic to show the power of JSX in react. In my previous article, I had mentioned that JSX is an essential feature of react that combines the power of both javascript and HTML. This dynamic background feature is to make the application more stylish. In the class where we render the whole app, we just add a condition to check if the temperature fetched is greater than a certain limit. If yes, then add a different classname to the div tag that changes the background of the screen. Likewise, many such conditions can be applied to display a whole range of weather scenarios as background.

Result

If you have understood so far about how this application works, then go ahead and enter npm start into your terminal to get this app up and running.

There you go, you just built an amazing weather application that keeps you informed of the weather conditions of cities thousands of miles away, right in your fingertips.

Thank you for reading this article, if you faced any issues feel free to contact me on LinkedIn. The entire project is available on GitHub.

Getting Started with ReactJS

Prajwal — Sat, 30 May 2020 06:38:35 +0000

React

React is a product of Facebook. It is a very flexible and efficient Javascript library for building interactive user interfaces. React forms the view layer of the web application which is technically the frontend. This makes it easier to make web applications with essential features such as reusable components, state management, DOM rendering and many more which are explained later. React is mainly used in making single-page web applications. In this article we'll see the fundamentals of react library and why is it so popular.

Features

Components

ReactJS makes use of components which are independent and reusable bits of code. In other words, components are functions that work in isolation and each component manage their own state. It makes building web applications very much easier when individual blocks of elements are broken down while building large scale applications.

Virtual DOM

Every time there is any changes in the original DOM. The whole application is re-rendered onto the virtual DOM. The difference between the original and virtual DOM is checked and only this difference is updated in the original DOM. This boosts the speed of react application as the page need not be refereshed to see the changes.

Declarative

Designing any view on React is very easy and they manage their own state. React will make sure to render just the right components onto the DOM which enables the user to easily maintain and debug the code.

JSX

JSX stands for Javascript XML. It is a mixture of both Javascript and XML. As talked about earlier, the react is made up of components. These components have both javascript logic as well HTML/XML to render onto the screen. These component files have an extension .jsx.

Performance

React is ridiculously fast. Its virtual DOM minimizes the re-rendering of entire DOM unnecessarily. Also, React uses one-way binding (unidirectional data flow) using a pattern called Flux. This makes the components immutable hence, giving more felexibility and efficiency.

Why React?

Easy to learn

Compared to other libraries or frameworks out there like Angular or VueJS, React is comparably easier to learn and handle. With the basics of HTML, CSS and Javascript in place, you are ready to get started with React.

Simplicity

React is very simple to use. It has some very powerful packages to run its engine like webpack. With some simple JSX you will have components rendering independently on your screen. React becomes such a powerful tool when used with other JS libraries such as Redux, Material-UI, Materialize, GraphQL, etc.

Used by Developers

React is the most loved library compared to other libraries out there. React is open-source and has active contributors on its GitHub. The repository itself has over 150,000 stars and it's used by 3.8 million developers.

React Native

React can also be used to create mobile apps. And this version of react is called React Native. This shows the power of react's flexibility to adapt. With the perfect plan and execution a developer can make an app for android, iOS and the web.

Setup

React is incredibly easy to set up in the beginning and doesn't require frequent set ups if the package has been installed globally on your system.

Make sure to install NodeJS and NPM( Node Package Manager) on your system before installing react.

To install react, run the following command:

npx create-react-app <your-app-name>

After the installation is completed, go into your app directory:

cd <your-app-name>

Run to see your default app:

npm start

Result

You see a beautiful React App running on your browser. Feel free to play around with the files in the src folder of react to make your own web or mobile app.

I hope this serves as good beginning into your journey as a React developer. For any queries feel free to contact me on my LinkedIn.

Thank You!