DEV Community: Suresh Hariharan

Introduction to Docker

Suresh Hariharan — Mon, 13 Nov 2023 13:40:01 +0000

1. Basic Linux and Docker commands.

$docker images - list all your images from your docker desktop.
$docker pull <image_name> - this command helps you to download images from the docker hub(if that image not present in your local machine)
$docker ps - list all the running containers.
$docker ps -a - list all the stopped containers.
$docker container exec -it <#roothash_no> bash - Attach the bash terminal with the running container.
$docker logs <container_id> - list all the activities that previously performed in the container.
$docker <container_name> or <container_id> - list all the implementation details of the particular image or container.
$docker container prune -f - delete all the stopped containers.
$docker run -d <container_name> - run a container in your machines background.
note:(-d) means detach i.e, background mode.

2. What is Docker?

Docker is a containerising tool of applications. It helps to easily build, deploy and test your applications. A developer defines all the applications and it’s dependencies in a Dockerfile which is then used to build Docker images that defines a Docker container. Doing this ensures that your application will run in any environment.

3.Docker Architecture

Docker uses a client-server architecture. The Docker client talks to the Docker daemon, which does the heavy lifting of building, running, and distributing your Docker containers.

4. Docker-Containerization vs Virtualization:

Now you may think "Wait..! docker-containerization does the same thing that virtual machines does, then why should i need to use docker instead of a virtual machine.?" well you are right to some point but it's not entirely true.

Let me tell you the difference.Observe the below diagram.

Now the main difference between the virtual machines and containers you may notice is the operating system. In a virtual machine we insert a virtualization layer( this is know as hypervisor in cloud) at the top of the host's operating system and top of this layer multiple VM's are created and run with different Guest OS. But in a docker a single OS and using a single Docker engine we can run multiple multiple conatiners with application.

5. Image vs Container.

Docker Image:
A Docker Image is a file that defines a Docker Container. It is similar in concept to a snapshot of a VM. A container that moves from one Docker environment to another with the same OS will work without changes because the image includes all of the dependencies needed to execute the code. Docker Image is run to create a docker container. Images are immutable. Once built, the files making up an image do not change.

Docker Conatiner:
A container is a runnable instance of an image. This is where your application is running. You can manage containers using the Docker API or CLI. You can connect a container to one or more networks, attach storage to it, or even create a new image based on its current state. If we delete a container the data will be lost! Because when the container went down and we brought it back up, the last layer got created again as a new layer. This helps in development if you don’t want to store record for each test.

6. Docker Hub:

Docker hub is like a App store or Play store in our mobiles. Docker hub contains all the images that you will ever need. It is a place where developers contribute their images, you can also publish your own image that you create.

7. Docker Daemon:

It listens to the API requests being made through the Docker client and manages Docker objects such as images, containers, networks, and volumes.

8. Run Ubuntu OS on your local machine using container

Understanding Binary Search in JAVA

Suresh Hariharan — Thu, 05 Oct 2023 16:58:36 +0000

Why we need a searching algorithm in the first place 🤔?

Search algorithms are like helpful detectives for computers. They help computers find things quickly and accurately in a big pile of information. This is important because it saves time and makes sure we get the right answers.

Imagine searching for a specific toy in a messy room. A search algorithm is like a smart friend who knows exactly where to look, so you find the toy faster. These algorithms are used in many places, like when you search for stuff on the internet or when your GPS finds the best route for you. They're like superhelpers for computers!

Binary search

Some of us think,linear search is a basic technique. In this technique, the array is traversed sequentially and each element is compared to the key until the key is found or the end of the array is reached.

Linear search is used rarely in practical applications. Binary search is the most frequently used technique as it is much faster than a linear search.

you might be wondering what i mean by it's fast! there is a thing in coding called time complexity

O(n),O(n^2),O(nlogn),O(logn) and O(1)
where O(1) is the efficient time complexity.

Java provides three ways to perform a binary search:

Using the iterative approach
Using a recursive approach
Using Arrays.binarySearch () method

In this blog we are going to see iterative approach and remaining in the following blogs.

Iterative Binary Search:

In the binary search method, the collection is repeatedly divided into half and the key element is searched in the left or right half of the collection depending on whether the key is less than or greater than the mid element of the collection.

A simple Binary Search Algorithm is as follows:

Calculate the mid element of the collection.
Compare the key items with the mid element.
If key = middle element, then we return the mid index position for the key found.
Else If key > mid element, then the key lies in the right half of the collection. Thus repeat steps 1 to 3 on the lower (right) half of the collection.
Else key < mid element, then the key is in the upper half of the collection. Hence you need to repeat the binary search in the upper half

As you can see from the above steps, in Binary search, half the elements in the collection are ignored just after the first comparison.

Note that the same sequence of steps holds for iterative as well as recursive binary search.

Let’s illustrate the binary search algorithm using an example.

*For example, take the following sorted array of 10 elements.
*

Let’s calculate the middle location of the array.

Mid = 0+9/2 = 4

1) Key = 21

First, we will compare the key value with the [mid] element and we find that the element value at mid = 21.

Thus we find that key = [mid]. Hence the key is found at position 4 in the array.

2) Key = 25

We first compare the key value to mid. As (21 < 25), we will directly search for the key in the upper half of the array.

Now again we will find the mid for the upper half of the array.

Mid = 4+9/2 = 6

The value at location [mid] = 25

Now we compare the key element with the mid element. So (25 == 25), hence we have found the key at location [mid] = 6.

Thus we repeatedly divide the array and by comparing the key element with the mid, we decide in which half to search for the key. Binary search is more efficient in terms of time and correctness and is a lot faster too.

Binary Search Implementation Java

import java.util.*;
class Main{  
 public static void main(String args[]){  
    int numArray[] = {5,10,15,20,25,30,35}; 
    System.out.println("The input array: " + Arrays.toString(numArray));
    //key to be searched
    int key = 20;
    System.out.println("\nKey to be searched=" + key);
    //set first to first index
    int first = 0;
    //set last to last elements in array
    int last=numArray.length-1; 
    //calculate mid of the array
    int mid = (first + last)/2;  
    //while first and last do not overlap
    while( first <= last ){  
        //if the mid < key, then key to be searched is in the first half of array
        if ( numArray[mid] < key ){  
            first = mid + 1;     
        }else if ( numArray[mid] == key ){ 
            //if key = element at mid, then print the location
            System.out.println("Element is found at index: " + mid);  
            break;  
        }else{  
            //the key is to be searched in the second half of the array
            last = mid - 1;  
        }  
        mid = (first + last)/2;  
   }  
   //if first and last overlap, then key is not present in the array
   if ( first > last ){  
      System.out.println("Element is not found!");  
   }       
 }  
}

Output:

The input array: [5, 10, 15, 20, 25, 30, 35]
Key to be searched=20
Element is found at index: 3

The above program shows an iterative approach of Binary search. Initially, an array is declared, then a key to be searched is defined.

After calculating the mid of the array, the key is compared to the mid element. Then depending on whether the key is less than or greater than the key, the key is searched in the lower or upper half of the array respectively.

Hope this helped alot..! happy coding guys..!♥️

Understanding Selection sort in Java

Suresh Hariharan — Thu, 29 Jun 2023 16:45:31 +0000

Introduction:

Sorting algorithms are a fundamental concept in computer science and are used to arrange a collection of elements in a specific order. These algorithms take an input array or list and rearrange its elements according to a predetermined comparison rule.It also makes the easy way to solve the problem.

1. Why selection sort?

Selection sort is one of the easiest sorting algorithms to understand and implement. It has a straightforward logic, making it a good choice for educational purposes or when simplicity is preferred over optimal performance.Selection sort performs reasonably well on small data sets or arrays with a small number of elements. Its time complexity of O(n^2) is not as significant for small input sizes, and the simplicity of the algorithm may outweigh the performance considerations.

2. Visual representation of selection sort.

Before we jump into the code let's understand the algorithm visually so that it will be easy to get a good grasp of the algorithm.

let's assume an unsorted array with the following elements.

Array = {9,1,8,4,7,2,}

Step 1: Select the maximum element in the array, in our array the maximum element id 9.

Step 2: Swap the largest element with the last element in the array

Step 3: After the elements is swapped move the right side pointer one step ahead i.e *Array.length-1 * since the largest element is moved to the end of the array.

Step 4: Repeat the above mentioned process till our window size is down to the one element in the array. Which looks like.

Seven is already in the desired place so no need to change it

Now six is swapped with four

Now four is swapped with two

Now two is swapped with one

Now all the element in the array is sorted. We get,

3. Java Code for selection sort:

The example for the selection sort looks like,

import java.util.Arrays;

public class selectionSort {
    public static void main(String[] args) {
        int[] nums = {9,1,8,4,7,2,6};
        selection(nums);
        System.out.println(Arrays.toString(nums));

    }

    public static void selection(int[] nums){
        for(int i=0;i<nums.length;i++){
            int last = nums.length-i-1;
            int maximum=maximumIndex(nums,0,last);
             swap(nums,maximum,last);
        }

        }
       static int maximumIndex(int[] nums,int start,int end){
        int max=start;
        for(int maxIndex=start;maxIndex<=end;maxIndex++){
            if(nums[max]<nums[maxIndex]){
                max=maxIndex;
            }
        }
        return max;
    }

    static void swap(int[] nums,int maximum,int last){

        int temp=nums[maximum];
        nums[maximum]=nums[last];
        nums[last]=temp;

    }


}

4. Code explanation:

Let's assume an number array with the elements 9,1,8,4,7,2,6

I always prefer writing a separate functions for each repeated task that takes place in my program and it is also a good practice it makes our code looks clean and neat. I suggest you guys to follow the same.

so i created a separate function for the sorting algorithm named as selection which takes the nums array as the argument ,

public static void selection(int[] nums){...}

Now i run a simple for loop to find the maximum element in the array i swap it with the last element in the array and move the pointer one step ahead and return the max.

static int maximumIndex(int[] nums,int start,int end){
        int max=start;
        for(int maxIndex=start;maxIndex<=end;maxIndex++){
            if(nums[max]<nums[maxIndex]){
                max=maxIndex;
            }
        }
        return max;

Again, i created a separate function for swapping the numbers named swap() which takes the nums array , maximum element and the last element of the array as arguments. In the swap array i simply swap them using three variables

static void swap(int[] nums,int maximum,int last){

        int temp=nums[maximum];
        nums[maximum]=nums[last];
        nums[last]=temp;

    }

And i simply call these two methods in the selection method and run till the end of the array using a for loop.

for(int i=0;i<nums.length;i++){
            int last = nums.length-i-1;
            int maximum=maximumIndex(nums,0,last);
             swap(nums,maximum,last);
        }

After completing these simple steps i would have achieved the sorted array and i simply display the nums array by calling the selection in the main method and print the array in the terminal.

public static void main(String[] args) {
        int[] nums = {9,1,8,4,7,2,6};
        selection(nums);
        System.out.println(Arrays.toString(nums));

    }

final Output:

[1, 2, 4, 6, 7, 8, 9]

I hope this post helps you to get a better understanding about selection sort using java.
Happy coding...😉

Understanding basics of HashMaps in Java

Suresh Hariharan — Wed, 21 Jun 2023 17:09:04 +0000

Introduction:

A HashMap in Java is a data structure that allows you to store and retrieve key-value pairs efficiently. It works like a dictionary where each key is associated with a value. When you add a key-value pair to a HashMap, Java uses a hash function to compute a unique hash code for the key. This hash code is then used to determine the index at which the key-value pair will be stored in an underlying array.

1.Why Hashmap?
2.How does HashMap works in java?
3.Hashmap initialization
4.Hashmap example
5.Frequently used Hashmap Methods

1. Why HashMap?

Let's assume a scenario where we need to declare multiple number of variables , of course we can assign each variable individually one by one but after certain number of variables declared it becomes clumsy and hard to keep track of the variables. So in order to solve this Hashmap comes into play. Hashmap assigns the variables and their values in key-Value pairs similar to dictionary in python.

2. How does HashMap works in java?

Here are some points to remember for Hashmaps in Java:

It does not maintain any order.
It is non-synchronised.
It may contain one or more null values.
Initially, the default capacity of the Java Hashmap class is 16.
The operation of storing and retrieving the object is done at a constant time, provided that the key is known. The method to store the object is put(key, value) and the method to retrieve the object is get(key).

There are following parameters in Java Hashmap:
K: the type of keys maintained by the map
V: the type of values mapped.

3. Hashmap initialization:

In java hashmaps can be initialization by following code snippet,

HashMap<wrapperClass of Key, wrapperClass of Value> hash = new HashMap<String,Integer>();

Now what is this wrapper class? let's understand that,

A wrapper class is a class that provides a way to encapsulate primitive data types (such as int, char, boolean, etc.) into objects. Wrapper classes allow us to treat these primitive types as objects and provide additional functionality to them.

4. Hashmap example:

Let us take a scenario where we have to assign variables for a set of usernames and passwords, if we try to implement this without hashmaps it looks something like this,

        String user1="person1";
        String password1="xxz";
        String user2="person2";
        String password2="xxxz";
        String user3="person3";
        String password3="xxxxz";

This looks ugly and this is not a good practice of coding. Let's implement the same using Hashmap.

import java.util.HashMap; //importing hashmap package

public class hashmap {
    public static void main(String[] args) {

//initialization of hashmap by creating an instance

    HashMap<String,String> usersHash = new HashMap<String,String>();

//Using put method of hashmap to add new values in hashmap

    usersHash.put("person1","xxz");
    usersHash.put("person2","xxxz");
    usersHash.put("person3","xxxxz");

    System.out.println(usersHash);
    }
}

The output for the above example would be,

{person3=xxxxz, person2=xxxz, person1=xxz}

it returns a key-value pair.

It's as simple as that.!, Hashmap also has number of methods to perform various actions on the map.

5. Frequently used Hashmap Methods:

boolean isEmpty() - Return true if this map contains no
key-value mappings.

Object clone() - Return a shallow copy of this HashMap
instance: the keys and values themselves
are not cloned.

Set entrySet() - Return a collection view of the mappings
contained in this map.

Set keySet() - Return a set view of the keys contained in
this map.

V put(Object key, Object value) - It is used to insert
an entry in the map.

putAll(Map map) - Insert the specified map in the map.

V remove(Object key) - Delete an entry for the specified key.

I hope this post helps you to get a better understanding about hashmaps in java.
Happy coding...😉

Understanding "this" keyword in Javascript

Suresh Hariharan — Thu, 15 Jun 2023 09:25:44 +0000

1. What is this keyword and why it is confusing?

When i started learning javascript i came across the this keyword and it was quite difficult for me to understand the this keyword and i came to know that many of the developers had hard time understanding this .

So what is this 🤔 ? , let's look into that.

this is a special keyword that is created for every execution context.

Execution context: When the JavaScript engine scans a script file, it makes an environment called the Execution Context that handles the entire transformation and execution of the code. During the context runtime, the parser parses the source code and allocates memory for the variables and functions.

this is not static i.e it changes depending upon the place where it is used.In most cases, value of this is determined by how function is called.

2. Global execution context

In the global execution context i.e outside of any function this refers to global object which is window in case of browsers.

console.log(this) //Window
this === window //true

3. this keyword Inside Method

In a method, this keyword refers to the object it belongs to ,which means using this keyword we can able to access its properties inside an object.

const profile = {
    name: 'suresh',
    favLang: 'javascript',
    printUser: function(){
        console.log(`${this.name} ${this.favLang}`);
    }
}
profile.printUser();

In browser's console we get,

suresh javascript

4. Simple Function Call

his in a function refers to global object Window but in strict mode this keyword refers to undefined.

Strict mode: In order to use strict mode we use an expression: “use strict”.It helps to write cleaner code, like preventing from using undeclared variable.

function testThis(){
    console.log(this);
}
testThis()   // represents Window

“use strict"
function testThis(){
    console.log(this);
}
// undefined

5. Event Listener

In event listeners this keyword refers to DOM element that handler is attached to.In simple words it refers to HTML element that received the event.

6. Arrow functions

In javascript Arrow function does not get its own this keyword.It uses lexical i.e it uses parent scope of this keyword.

const ex=()=>{
    console.log(this);
}

ex(); 
// refers to parent _this_ keyword.

const profile={
    name:'suresh',
    print:function(){
        const fav='javascript'
        return ()=>{
            console.log(this,this.fav);
        }
    }
}
profile.print()();


name: "ch",
print:f()
},js

Isn't it cool..! the this keyword also makes easier to reference the object in our program.

7. Take aways form this blog

Method-this refers to object in which method is called
Simple function call -Window Strict mode-undefined
Event Listener-DOM element in which handler is attached to
Arrow function-does not get its own this.It uses lexical(parent scope of this)
Global context- Window object.

Schema based form validation in React JS using React Hook Form and Zod library

Suresh Hariharan — Sun, 11 Jun 2023 17:08:07 +0000

Form Validation

Form validation is an essential aspect of website development that ensures the data entered by users into web forms is accurate, complete, and follows the specified format. It helps maintain data integrity, improves user experience, and prevents potential issues resulting from incorrect or malicious input.

Zod

The Zod library is a TypeScript-first runtime validation library that provides a simple and expressive way to validate data objects against predefined schemas. It focuses on type safety and usability, making it easier to validate and enforce data integrity in TypeScript projects.

In ZOD we can only define data constraints such as minLength, maxLength we cannot define field constraints such as reset , required etc..

Setup the project

Create project using vite

`npm create vite`

Enter the application name

`Project name: "your application name"`

Select react form below list

`❯ Vanilla
   Vue
   React
   Preact
   Lit
   Svelte
   Others`

Select the programming language
In this example i will be using typescript and bootstrap for styling this component

❯ TypeScript TypeScript + SWC JavaScript JavaScript + SWC

Now execute the following commands one by one to run the application

cd summa npm install npm run dev

After executing the above steps your application will be running on localhost:5173

The running application will be like this,

Before moving on further install the following libraries in your application by using the commands

npm install react-hook-form
npm i zod
npm i @hook-form/resolvers

Zod resolvers are used to handle asynchronous validation and transformation of data using the Zod library. While Zod itself provides powerful and flexible schema validation capabilities, it doesn't handle asynchronous operations by default. Zod resolvers fill this gap by providing a convenient way to perform asynchronous validation tasks.

Create a form component in your application
create a basic form in your component



 <form>
      <div className="mb-3">
        <label htmlFor="name" className="form p-3">
          name
        </label>
        <input
          id="name"
          type="text"
          className="form.control"
        />
      </div>
      <div>
        <label htmlFor="age" className="form p-3">
          age
        </label>
        <input
        />
      </div>
      <button className="btn btn-primary mx-3" type="submit">
        Submit
      </button>
    </form>

In zod the validation will be done based on the schema we provide. So after creating a form create a schema for the inputs that will be accepted in the form.

Schema:Schemas are nothing but a set of constraints of the type of data that the user will be passing as input in the form.In other words schemas are the datatypes for the from

In react Schemas should be defined after the import statements in your component.

Schema declaration for our form



const schema = z.object({
  name: z.string().min(3),
  age: z.number().min(18),
});

Define a Type and pass this schema as an interface in the component

type formData = z.infer<typeof schema>;

We can define the types of the field data as methods and can also define validation constraints .So that later in form hook we can use this validation as references.

Now as the next step use the useForm hook that we installed earlier



const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<formData>({ resolver: zodResolver(schema) });

Let's understand whats happening here, the useForm has couple of predefined methods that we destructured as ,

"register"- The register method is use to register our form field in the hook so that later we can reference it for validation, this method takes the name attribute of the input tag as an argument

"handleSubmit"- This method takes care of all form submission tasks for us, we only need to simply reference in onSubmit event listener.

"formState"- This method keeps track of our form field state and notifies to handle any errors.

Thats enough of the theory stuff, let's see the code in action.

Define an submit function and call it in handleSubmit() in the form tag.



const submit = (data: FieldValues) => {
    console.log(data);
  };

<form onSubmit={handleSubmit(submit)}>

Use the register method in the input tag and set validation conditions such as 'required'

{...(register("name"), { required: true})}

In zod we can also display custom Error messages or default messages that are predefined in the zod library

We can do this by using simple logic as ,

{errors.name && <p>{errors.name.message}</p>}

And finally, after all the above steps are implemented the final code looks like this,



import { useForm, FieldValues } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  name: z.string().min(3),
  age: z.number().min(18),
});

type formData = z.infer<typeof schema>;

const form = () => {
const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<formData>({ resolver: zodResolver(schema) });

  const submit = (data: FieldValues) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      <div className="mb-3">
        <label htmlFor="name" className="form p-3">
          name
        </label>
        <input
            {...(register("name"), { required: true})}

     id="name"
          type="text"
          name=""
          className="form.control"
        />
        {errors.name && <p>{errors.name.message}</p>}
     </div>
      <div>
        <label htmlFor="age" className="form p-3">
          age
        </label>
        <input
          {...register("age")}
         id="age"
          type="number"
          className="form.control"
        />
</div>
      <button className="btn btn-primary mx-3" type="submit">
        Submit
      </button>
    </form>
  );
};

export default form;

Thats all it takes to create a form with schema based validation using react-hook-form and zod library.

DEV Community: Suresh Hariharan

Introduction to Docker

Table of contents:

1. Basic Linux and Docker commands.

2. What is Docker?

4. Docker-Containerization vs Virtualization:

5. Image vs Container.

Understanding Binary Search in JAVA

Why we need a searching algorithm in the first place 🤔?

Binary search

Iterative Binary Search:

1) Key = 21

2) Key = 25

Binary Search Implementation Java

Understanding Selection sort in Java

Introduction:

Table of contents:

1. Why selection sort?

2. Visual representation of selection sort.

3. Java Code for selection sort:

4. Code explanation:

final Output:

Understanding basics of HashMaps in Java

Introduction:

Table of contents

1. Why HashMap?

2. How does HashMap works in java?

3. Hashmap initialization:

4. Hashmap example:

5. Frequently used Hashmap Methods:

Understanding "this" keyword in Javascript

Table of Contents:

1. What is this keyword and why it is confusing?

2. Global execution context

3. this keyword Inside Method

4. Simple Function Call

5. Event Listener

6. Arrow functions

7. Take aways form this blog

Schema based form validation in React JS using React Hook Form and Zod library

Form Validation

Zod

Setup the project