DEV Community: Sumit Singh

React Hooks ⚓: Part 1

Sumit Singh — Sun, 10 Jan 2021 06:46:14 +0000

What is a HOOK?
A Hook is a special function that lets you “hook into” React feature. These can't be called from a regular JavaScript function, they are called from react function components or a custom made hook (which we are going to learn in the upcoming days)

Types of Hooks
In general, we have two types of Hooks which use very frequent:

useState
useEffect

UseState
UseState is a Hook that lets you add React state to function components. It enables us to see real-time updates. You can think of an example such as when you take out the cash of an ATM machine, your balance gets updated in real-time (here I am not considering how the bank works in the background).

Declaring a state:

const[balance, setBalance] = useState(I_S);

It declares a “state variable”.
I_S is the initial state of our state variable.
The 1st passed argument is the state variable and the second is the function that updates the value of the state
Normally, variables “disappear” when the function exits but state variables are preserved by React.
Where ever we want to render our component, we render it like this

{state_varibel_name}

UseEffect
Now as we have updated our state, that state will show its effect and we need to also take care of it. UseEffect state help to make it possible.

Declaring an Effect function:

useEffect(() => {
   // Any effect which we want to render or
   // is written here
  }, []);

Placing useEffect inside the component lets us access the react variable
The first argument i.e. the function is the effect of the hook
The second argument is an array of states, i.e. all the state on which we want to show the effect, it can be empty too
In case if there is no second argument like this

useEffect(() => {
    // Your Code......
});

then the effect still also runs at least once, upon opening the page or on each refresh

Example with code
I have created a simple code, which has three state value1, value2, and sum which sums the value1 and value2.

import "./App.css";
import { useState, useEffect } from "react";

const App = () => {
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
  const [sum, setSum] = useState();

  useEffect(() => {
    setSum(parseInt(value1) + parseInt(value2));
  }, [value1, value2]);

  const set1 = (e) => {
    setValue1(e.target.value);
  };

  const set2 = (e) => {
    setValue2(e.target.value);
  };
  return (
    <div className="field">
      <input type="number" placeholder="Value 1" onChange={set1} />
      <input type="number" placeholder="Value 2" onChange={set2} />
      <p>Sum = {sum}</p>
    </div>
  );
};

export default App;

Go try yourself
Get GitHub code here

Responsive vs Adaptive Designing - Which is BETTER...🤔?

Sumit Singh — Sat, 12 Dec 2020 05:16:12 +0000

What Responsive Design Means?
In its simplest definition, responsive design uses just one layout for a web page and “responsively” adjusts to better fit the user's screen, whether it’s a desktop, a laptop, a tablet, or a mobile phone.

What Adaptive Design Means?
In layman's terms, the adaptive design creates different fixed layouts that adapt to specific screen sizes. In short, you have multiple versions of a web page to fit someone’s device, as opposed to a single, static page that looks the same (and reorders or resizes content) across all devices.

Responsive UI vs Adaptive UI

Responsive is fluid and adapts to the size of the screen no matter what the target device.
Responsive uses CSS media queries to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the site to adapt to different screens.
Adaptive design, on the other hand, uses static layouts based on breakpoints that don’t respond once they’re initially loaded.
Adaptive works to detect the screen size and load the appropriate layout for it.
On the surface, it appears that adaptive requires more work as you have to design layouts for a minimum of six widths. However, responsiveness can be more complex as improper use of media queries (or indeed not using them at all) can make for display and performance issues.

Why Use Responsive Design?

Maintaining separate sites for your mobile and non-mobile audiences can get expensive. By using responsive design, you can save money by eliminating the cost of paying for a mobile site. You will only need to invest in a single site design to appeal to all visitors and all devices.
When you have a website with a responsive design, you can make changes quickly and easily. You do not need to worry about making changes on two websites. This flexibility is a huge advantage when you just want to make a quick design tweak or fix a typo on your site—you only have to do it once.
User experience is crucial to website owners. You want people to like your site, and you want it to be easy to use to convince them to come back. If someone visits your website on a mobile device, and it takes forever to load or your pictures do not have the proper resolution, it can make your company appear unprofessional.
No one wants to do business with a place that is unprofessional. But responsive design, which offers a much better user experience, can help convince people to give your company a chance. Because zooming and scrolling will be eliminated, content can be viewed quicker, and the overall impression that visitors have will be much more positive.
Search engine optimization gains Search engine optimization, or SEO, is a strategy used by many companies to help boost themselves in Google’s search page rankings. The closer you are to the top, the better the chance potential customers will find you.
Responsive design can help with SEO because Google, as mentioned, gives preference to websites that are mobile-friendly. In combination with other SEO factors, responsiveness can help give you a big boost in search engine results.
Ease of management Most businesses, especially smaller ones, don’t have a lot of time to update or refresh the way their website looks. But rather than having to hire a designer to handle every aspect of your website, responsive design allows you to make the changes yourself, quickly and easily.
Additionally, with just one website, other elements of your marketing will be much easier to manage. You’ll never have to wonder if you should link the mobile or desktop site on a social media update, or question whether or not all of your redirect links will be working to get the right visitors to the right site. Responsiveness takes much of the stress out of managing a business website

Why Use Adaptive Design?

Adaptive is useful for retrofitting an existing site in order to make it more mobile-friendly.
This allows you to take control of the design and develop for specific, multiple viewports.
The number of viewports that you choose to design for is entirely up to you, your company, and your overall budget.
It does, however, afford you a certain amount of control (for example over content and layout) that you won’t necessarily have using responsive design.
As mentioned previously, it’s standard to design for six resolutions. However, you can make a more informed decision by looking at your web analytics for the most commonly used devices and then designing for those viewports. Why Use Responsive Design?
Responsive doesn’t offer as much control as adaptive, but takes much less work to both build and maintain.
Responsive layouts are also fluid and whilst adaptive can and do use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized. For example, in the image below, which shows a fluid layout, the designer is using percentage widths so that the view will be adjusted for each user.
With responsive, you will be designing with all layouts in mind and this, of course, can confuse the process and make it quite complex.
This means that you should focus on creating a viewport for mid-resolution and you can then use media queries to adjust for low and high resolutions later on.
Responsive design often turns into solving a puzzle — how to reorganize elements on larger pages to fit skinnier, longer pages or vice versa.
However, ensuring that elements fit within a page is not enough. For a responsive design to be successful, the design must also be usable at all screen resolutions and sizes.
It will also depend largely on whether you have an existing site to work with or you’re starting from scratch.
Responsive design has become the go-to design technique and it’s thought that around 1/8 websites now use responsive (while there’s little to no data on how many use adaptive).
Adoption rates for responsive are growing quickly too and have almost reached the same level as standalone mobile sites.
With all of that in mind, it’s safe to say that responsive is usually the preferred technique if only because of the ongoing work that adaptive design demands

Top Visual Collaboration tools for team

Sumit Singh — Sat, 14 Nov 2020 08:31:31 +0000

It’s nearly impossible to build a complex application without the right tools and proper direction. Add the need to deliver products and iterations quickly, and application development grows even more challenging–if not unattainable. Also when working from home a need for visual workspace arises at a much more rate where multiple teams or individuals can come and collaborate.
Here is a list of tools that you can add to your inventory to work with ease:

Whimsical
Whimsical is free to use tools to work. It provides communicates visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps. But, If you are using the free version of it, then you are only limited up to 4 whiteboards only.

However, 4 are very much sufficient for me as I don't work at a much larger scale. If you want more, you can upgrade as per your wish. One drawback is that currently, its mobile version is not available, if you want to access Whimsical the only way is through your desktop/laptop.

Miro
Miro is the online collaborative whiteboarding platform that enables distributed teams to work effectively together, from brainstorming with digital sticky notes to planning and managing agile workflows.

You can easily create mind-maps, user stories, flow charts, and many more.

LucidChart
LucidChart provides excellent features for the designer as for the creation of flowcharts, use case diagrams, flowcharts, and many more sort of documents at a very easy.

At a free version, you are, limited to only a few workspaces and in each workspace, you can not add more than 60 shapes. Although it works pretty much well for me under 60 shapes.

Creately
Creately is a web-based diagramming tool, that supports many diagrams types including Flowcharts, Venn diagrams, storyboards, etc, which are commonly used in teaching. Creately even has its own desktop software that automatically syncs with your online account, making it ideal for offline drawing as well.

Creately provides a very large variety of documents which is a very big advantage from all the above-mentioned tools.

Although all the above-metioned tools are very much attractive and using them once will always make you use again and again and going for the paid version is absolutely your choice as per your usage and love towards the tool.

Dependable drop-down in android using Java

Sumit Singh — Tue, 10 Nov 2020 09:13:19 +0000

A dependable dropdown means that your drop-down list is dependent on another factor or value, which will change the content of the dropdown. In android it is known as spinner.

Spinner
Spinner provides functionality to select a value from a list of multiple values. The first value is set as the default value in the spinner and upon clicking a dropdown list appears from where the user can select the desired value.

Implementation
If you don't know how to create a simple dropdown, then refer to this article, spinner in android

XML file
Add the following code in your XML file to include spinner in your Activity

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="30sp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginVertical="10sp"
                android:text="Dependable dropdown"
                android:textSize="30sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginVertical="10sp"
                android:text="Select Gender"
                android:textSize="24sp" />

            <Spinner
                android:id="@+id/spinner_gender"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginVertical="5sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginVertical="10sp"
                android:text="Select Name"
                android:textSize="24sp" />

            <Spinner
                android:id="@+id/spinner_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5sp"
                android:layout_marginBottom="10sp" />
        </LinearLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Resource XML file
Now the spinner is needed to be provided with the list of values for that we need to create a resource file in the resource file. Follow the following steps to create the resource file

Right-click on your project
From the menu go to New > Android Resource File
Give a name to your file and press **Enter*

Add the following code into your resource file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="gender_type">
        <item>Male</item>
        <item>Female</item>
    </string-array>

    <string-array name="girls">
        <item>Priya</item>
        <item>Dolly</item>
        <item>Muskan</item>
        <item>Vaishnavi</item>
    </string-array>

    <string-array name="boys">
        <item>Sumit</item>
        <item>Ujjwal</item>
        <item>Jaskirat</item>
        <item>Sukrut</item>
        <item>Prince</item>
    </string-array>
</resources>

JAVA file
To populate the spinner with a list of choices, you then need to specify a SpinnerAdapter in your Activity or Fragment source code. Following are the key classed:

Spinner
SpinnerAdapter
AdapterView.OnItemSelectedListener

package com.example.spinner;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import com.google.android.material.snackbar.BaseTransientBottomBar;
import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Spinner spinner_gender
            = (Spinner)findViewById(R.id.spinner_gender);
        final Spinner spinner_name
            = (Spinner)findViewById(R.id.spinner_name);

        // Create an ArrayAdapter using the string array and
        // a default spinner layout
        ArrayAdapter<CharSequence> ad_gender
            = ArrayAdapter.createFromResource(
                this, R.array.gender_type,
                android.R.layout.simple_spinner_item);

        // Specify the layout to use when the list of
        // choices appears
        ad_gender.setDropDownViewResource(
            android.R.layout.simple_spinner_dropdown_item);

        // Apply the adapter to the spinner
        spinner_gender.setAdapter(ad_gender);

        spinner_gender.setOnItemSelectedListener(
            new AdapterView.OnItemSelectedListener() {
                @Override
                public void onItemSelected(
                    AdapterView<?> adapterView, View view,
                    int i, long l)
                {

                    if (adapterView.getSelectedItem()
                            .toString()
                            .equals("Female")) {
                        ArrayAdapter<CharSequence> ad_name
                            = ArrayAdapter.createFromResource(
                                getApplicationContext(),
                                R.array.girls,
                                android.R.layout
                                    .simple_spinner_item);
                        spinner_name.setAdapter(ad_name);
                    }
                    else {
                        ArrayAdapter<CharSequence> ad_name
                            = ArrayAdapter.createFromResource(
                                getApplicationContext(),
                                R.array.boys,
                                android.R.layout
                                    .simple_spinner_item);
                        spinner_name.setAdapter(ad_name);
                    }
                }

                @Override
                public void onNothingSelected(
                    AdapterView<?> adapterView)
                {
                }
            });

        spinner_name.setOnItemSelectedListener(
            new AdapterView.OnItemSelectedListener() {
                @Override
                public void onItemSelected(
                    AdapterView<?> adapterView, View view,
                    int i, long l)
                {
                    Snackbar
                        .make(findViewById(R.id.layout),
                              adapterView.getSelectedItem()
                                      .toString()
                                  + " is a "
                                  + spinner_gender
                                        .getSelectedItem()
                                        .toString(),
                              BaseTransientBottomBar
                                  .LENGTH_LONG)
                        .show();
                }

                @Override
                public void onNothingSelected(
                    AdapterView<?> adapterView)
                {
                }
            });
    }
}

The setOnItemSelectedListener will work whenever anything selection is made.

Download Source code

Static and Dynamic Binding in JAVA

Sumit Singh — Mon, 09 Nov 2020 10:29:57 +0000

What does binding actually mean?
Let us understand with an example. Suppose today is the day you are going to propose to your partner, but you had wanted to make it special. To make it so, you reach early at the place look for the head waiter and instructed him/her to bring a cake, wine, etc... and also told the musician to play your favorite romantic song as soon as you propose to her (By saying those magical words). Now, that moment comes, she arrived and you proposed to her. Now, what will happen? Obviously, she will say YES (Just one piece of advice don't get friend zone buddy), but apart from this waiter will bring the cake, wine, etc... and the musician will change the song to the romantic one.

Now, the thing to notice is what made the waiter bring foodstuff and the musician to change the song? and yes our are thinking correct, your action of proposing to her made them do so, we can simply say that waiter's and musician's actions are bounded to your call (proposing).
In the world of coding, binding is referred to as a mechanism of creating a link between a method call and method actual implementation.

Types of binding
As per the polymorphism concept in OOPs, an object can have many different forms. Object forms can be resolved at compile time and run time. There are two types of binding:

Static Binding
Dynamic Binding

Static Binding
If linking between a method call and method implementation is resolved at compile time then we call it static binding
OR
The binding which can be resolved at compile time by the compiler is known as static or early binding. The binding of static, private, and final methods is compile-time. Why? The reason is that these methods cannot be overridden and the type of the class is determined at the compile time.

public class FastFood {
   public void create() {
      System.out.println("Creating in FastFood class");
   }
}

public class Main {
   public static void main(String[] args) {
      //Static binding
      FastFood fastFood= new FastFood();
      fastFood.create();
   }
}

Here we can observe that simply the object fastFood will be binded to the create method of the FastFood class in the compile time.

Dynamic Binding
If linking between a method call and method implementation is resolved at run time then it dynamic binding. The dynamic binding uses an object to resolve binding but static binding uses the type of the class and fields.
OR
When the compiler is not able to resolve the call/binding at compile-time, such binding is known as Dynamic or late Binding. Method Overriding is a perfect example of dynamic binding as in overriding both parent and child classes have the same method and in this case, the type of the object determines which method is to be executed. The type of object is determined at the run time so this is known as dynamic binding.

public class FastFood {
   public void create() {
      System.out.println("Creating in FastFood class");
   }
}
public class Pizza extends FastFood {
   @Override
   public void create() {
      System.out.println("Creating in Pizza class");
   }
}
public class Main {
   public static void main(String[] args) {
      //Dynamic binding
      FastFood pza= new Pizza();
      pza.create();
   }
}

Here we can observe that simply the object fastFood will be binded to the create method of the FastFood class in the compile time. But, that will remain no longer as during runtime, the compiler will get a new definition of the create method in the child class i.e. in the Pizza class (As Pizza object is created by FastFood class).

Now, some of you might wonder, what if the Pizza class doesn't have a definition of the create method. Here, no need to worry it will just simply use the create method of the FastFood class (as static binding has already occurred at the compile-time).

Important Points

private, final, and static members (methods and variables) use static binding while for virtual methods (In Java methods are virtual by default) binding is done during run time based upon run time object.
Static binding uses Type information for binding while Dynamic binding uses Objects to resolve binding.
Overloaded methods are resolved (deciding which method to be called when there are multiple methods with the same name) using static binding while overridden methods using dynamic binding, i.e, at run time.

Find the starting node in a directed graph which covers the maximum number of nodes

Sumit Singh — Tue, 13 Oct 2020 17:45:31 +0000

Given a directed graph with N number of nodes and exactly N number of edges. Each node has exactly one outgoing edge from it. Find a path such that the maximum number of nodes can be covered from the starting point, and return the starting point.

NOTE: A node can have multiple edges which are pointing towards him, but only one outgoing edge



Input: N = 5
1->2, 2->1, 3->1, 4->2, 5->3

Graph Structure:



Output: 5
Explanation: 
If we start from node 1 as beginning then the path is: 1 -> 2
If we start from node 2 as beginning then the path is: 2 -> 1
If we start from node 3 as beginning then the path is: 3 -> 1 -> 2
If we start from node 4 as beginning then the path is: 4 -> 2 -> 1
If we start from node 5 as beginning then path is: 5 -> 3 -> 1 -> 2

Hence, we can clearly see that if we start for 5, we cover the 
maximum number of nodes in the
graph i.e. 4.

Approach:

To find the number of nodes reachable from a particular node, one thing to observe is that we can reach from a node X to a node Y only when they are in the same connected component.

Since the graph is directional, any node in a connected component to any other node in the same connected components. Hence for a particular node X number of nodes that will be reachable will be the number of nodes in that particular component. Use a depth-first search to find the answer.

CODE
Following is a Java implementation of the code:



import java.util.HashSet;
import java.util.Set;

public class Main{

    static int[] graph;

    // Driver Function
    public static void main(String[] args) {

        // Taking the number of nodes from the user
        int n = 5;

        // Array to store the nodes direction
        graph = new int[n];

        // Initializing graph
        // 1->2, 2->1, 3->1, 4->2, 5->3
        graph[0] = 1;
        graph[1] = 0;
        graph[2] = 0;
        graph[3] = 1;
        graph[4] = 2;

        System.out.println(find(n));
    }

    static int find(int n) {

        int max = 0; // Holds the maximum count of nodes visited
        int node = 0; // Starting index of the node with maximum max count

        // Considering each node one-by-one as beginning node
        // Using DFS to fully explore that node
        for (int i = 0; i < n; i++) {

            // Finding the total number of node that can be covered by
            // considering the ith node as beginning
            int visits = canVisit(i);

            if (visits > max) { // If ith node covers more node then
                max = visits; // Store the number of nodes covered
                node = i; // Store the node index
            }
        }

        // As we are considering the indices from 0 just add 1 into the index
        return node + 1; // and return it
    }

    // Function to perform the DFS calculating the
    // count of the elements in a connected component
    static int canVisit(int n) {
        // This set contains the indices of the visited elements
        // This will help use to make sure that we are not running
        // inside a cycle in the graph
        Set<Integer> set = new HashSet<>();

        set.add(n); // Add the current node into the graph as it is visited

        // Go to the next node in the graph towards with the current directs
        int visit = graph[n];

        // Hold the total number of nodes visited
        // Since we at least visit the beginning node hence assign count to 1
        int count = 1;

        // Explore until the node repeats or we reach at the dead-end
        while (!set.contains(visit)) {
            set.add(visit); // Add the next visit into the set
            visit = graph[visit]; // Jump to next directed node
            count++; // Increment the count as one more has been explored
        }

        return count; // Return the total number of nodes visited
    }
}

Complexity:

We will have the worst case if the graph is linearly connected with no internal cycles, which will give us O(N²). With an Auxiliary space of O(N).