DEV Community: Ganesh Shetty

How to design a ChessBoard using CSS flex box and Javascript

Ganesh Shetty — Mon, 02 May 2022 11:43:32 +0000

In this article i am going to show how to design chessboard using css and little bit of javascript.
For this you need to have basic idea of CSS Flex-box and nth-child() property.

So let's get started...
We will add containerEven class as parent container for every even row and containerOdd for every odd row,

Below shows the CSS for the same


 css
    .containerEven>div:nth-child(odd) {
        background-color: white;
    }

    .containerEven>div:nth-child(even) {
        background-color: black;
    }

    .containerOdd>div:nth-child(odd) {
        background-color: black;
    }

    .containerOdd>div:nth-child(even) {
        background-color: white;
    }

Here is the html part



<div class="parent-class">
    <section class="containerEven" id='container1'></section>
    <section class="containerOdd" id='container2'></section>
    <section class="containerEven" id='container3'></section>
    <section class="containerOdd" id='container4'></section>
    <section class="containerEven" id='container5'></section>
    <section class="containerOdd" id='container6'></section>
    <section class="containerEven" id='container7'></section>
    <section class="containerOdd" id='container8'></section>
</div>

Now what's left is using javascript to dynamically append element inside these section tags with the help of corresponding id.



  var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
    for (i = 1; i <= 8; i++) {
        res1 += `<div class="item"></div>`
        res2 += `<div class="item"></div>`
        res3 += `<div class="item"></div>`
        res4 += `<div class="item"></div>`
        res5 += `<div class="item"></div>`
        res6 += `<div class="item"></div>`
        res7 += `<div class="item"></div>`
        res8 += `<div class="item"></div>`
    }
    document.getElementById(`container1`).innerHTML = res1;
    document.getElementById(`container2`).innerHTML = res2;
    document.getElementById(`container3`).innerHTML = res3;
    document.getElementById(`container4`).innerHTML = res4;
    document.getElementById(`container5`).innerHTML = res5;
    document.getElementById(`container6`).innerHTML = res6;
    document.getElementById(`container7`).innerHTML = res7;
    document.getElementById(`container8`).innerHTML = res8;

So here, what we are doing is we have taken 8 arrays to store each row data.Once we get the data we append it to corresponding container id,

Here is the complete code with output



<style>
    .parent-class {
        border: 5px chocolate groove;
    }

    .containerEven,
    .containerOdd {
        display: flex;
        background-color: dodgerblue;
    }

    .item {
        background-color: #f1f1f1;
        padding: 20px;
        font-size: 30px;
        flex: 1;
        height: 50px;
        text-align: center;
    }

    .containerEven>div:nth-child(odd) {
        background-color: white;
    }

    .containerEven>div:nth-child(even) {
        background-color: black;
    }

    .containerOdd>div:nth-child(odd) {
        background-color: black;
    }

    .containerOdd>div:nth-child(even) {
        background-color: white;
    }
</style>

<div class="parent-class">
    <section class="containerEven" id='container1'></section>
    <section class="containerOdd" id='container2'></section>
    <section class="containerEven" id='container3'></section>
    <section class="containerOdd" id='container4'></section>
    <section class="containerEven" id='container5'></section>
    <section class="containerOdd" id='container6'></section>
    <section class="containerEven" id='container7'></section>
    <section class="containerOdd" id='container8'></section>
</div>

<script>
    var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
    for (i = 1; i <= 8; i++) {
        res1 += `<div class="item"></div>`
        res2 += `<div class="item"></div>`
        res3 += `<div class="item"></div>`
        res4 += `<div class="item"></div>`
        res5 += `<div class="item"></div>`
        res6 += `<div class="item"></div>`
        res7 += `<div class="item"></div>`
        res8 += `<div class="item"></div>`
    }
    document.getElementById(`container1`).innerHTML = res1;
    document.getElementById(`container2`).innerHTML = res2;
    document.getElementById(`container3`).innerHTML = res3;
    document.getElementById(`container4`).innerHTML = res4;
    document.getElementById(`container5`).innerHTML = res5;
    document.getElementById(`container6`).innerHTML = res6;
    document.getElementById(`container7`).innerHTML = res7;
    document.getElementById(`container8`).innerHTML = res8;
</script>

Hope this helps you ..

An Overview of Redux and its Middleware for React Applications

Ganesh Shetty — Tue, 19 Apr 2022 10:33:00 +0000

In this post we will be looking at how redux works and its core concepts, principles, and patterns for using Redux.This will be mainly focusing on understanding concept in depth rather than exploring with example.

What is Redux?

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralised store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

When Should I Use Redux?
Redux is more useful when:

You have large amounts of application state that are needed in many places in the app
The app state is updated frequently over time
The logic to update that state may be complex
The app has a medium or large-sized codebase, and might be worked on by many people

To understand all these in depth let us take a small example

function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

This is small example of one way data flow

State describes the condition of the app at a specific point in time
The UI is rendered based on that state
When something happens (such as a user clicking a button), the state is updated based on what occurred
The UI re-renders based on the new state

As the application grows maintaining this one way data flow pattern gets very complicated especially if those components are located in different parts of the application.
One way to solve this problem is by passing props from parent to child components, but that doesn't always help.

So the best to solve this problem is to have centralised store so whichever components is subscribed to the store will get notified when the state is updated,

Thats awesome rite, No need to pass props down from parent to all of its children,

This is the basic idea behind Redux: a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state to make the code predictable.

Redux Terminology:-
Actions:
An action is a plain JavaScript object that has a type field. You can think of an action as an event that describes something that happened in the application.

Reducers:
A reducer is a function that receives the current state and an action object , it calculates the new state value based on the state and action arguments

You can think of a reducer as an event listener which handles events based on the received action (event) type.

Store:
Entire Redux application state lives in an object called store.

store can be created by passing in a reducer,It has a method store.getState() which returns current state value

Dispatch:

The Redux store has a method called dispatch. The only way to update the state is to call store.dispatch() and pass in an action object. The store will run its reducer function and save the new state value inside, and we can call getState() to retrieve the updated value

Core Concepts and Principles:-

Single Source of Truth
The global state of your application is stored as an object inside a single store. Any given piece of data should only exist in one location, rather than being duplicated in many places.

State is Read-Only
The only way to change the state is to dispatch an action, an object that describes what happened.

Redux Application Data Flow:-

Earlier, we talked about "one-way data flow", which describes this sequence of steps to update the app:

Redux uses a "one-way data flow" app structure

State describes the condition of the app at a specific point in time
The UI is rendered based on that state
When something happens (such as a user clicking a button), the state is updated based on what occurred
The UI re-renders based on the new state

For Redux specifically, we can break these steps into more detail:

Initial setup

A Redux store is created using a root reducer function
The store calls the root reducer once, and saves the return value as its initial state
When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.

Updates

Something happens in the app, such as a user clicking a button
The app code dispatches an action to the Redux store, like dispatch({type: 'counter/incremented'})
The store runs the reducer function again with the previous state and the current action, and saves the return value as the new state
The store notifies all parts of the UI that are subscribed that the store has been updated
Each UI component that needs data from the store checks to see if the parts of the state they need have changed.
Each component that sees its data has changed forces a re-render with the new data, so it can update what's shown on the screen

Here's what that data flow looks like visually:

Reading State from the Store with useSelector
We somehow should be able to get store data it in our component, useSelector hook, which lets your React components read data from the Redux store.

useSelector accepts a single function, which we call a selector function. A selector is a function that takes the entire Redux store state as its argument, reads some value from the state, and returns that result.

But, what happens if we dispatch an action and The Redux state will be updated by the reducer, but our component needs to know that something has changed so that it can re-render with the new list of data.

Fortunately, useSelector automatically subscribes to the Redux store for us! That way, any time an action is dispatched, it will call its selector function again right away.

const todos = useSelector(state => state.todos)

Above line shows how to read data from redux store in react component using useSelector hooks.

There is one problem, the component will re-render any time the selector result is a new reference! so we should use shallowEqual as a second arguments to useSelector hooks which checks if the state has actually changed.

Dispatching Actions with useDispatch

We now know how to read data from the Redux store into our components. But, how can we dispatch actions to the store from a component? We know that outside of React, we can call store.dispatch(action). Since we don't have access to the store in a component file, we need some way to get access to the dispatch function by itself inside our components.

The React-Redux useDispatch hook gives us the store's dispatch method as its result.

So, we can call const dispatch = useDispatch() in any component that needs to dispatch actions, and then call dispatch(someAction) as needed.

What is Middleware and Why we need it in Redux?

As we have seen, Redux store does not know asycn logic,It only knows how to synchronously dispatch an action,

And Redux should never contain side effects,A "side effect" is any change to state or behaviour that can be seen outside of returning a value from a function. Some common kinds of side effects are things like:

Logging a value to the console
Saving a file
Setting an async timer
Making an AJAX HTTP request

Any real app will need to do these kinds of things somewhere. So, if we can't put side effects in reducers, where can we put them?

Some people say we can easily do this in the component itself,Thats right we can, what if we have to use the same logic in other components as well, We will have to duplicate logic in that component as well.

And one more reason we should not write async logic/any complex logic in component is we should try to keep it small
so that it's much easier to change and maintain.

So if we go with keeping our async logic outside of our JSX component, with the existing redux pattern its not possible
As we can not wait till the async operation completed,We can write our own middleware logic to handle async operator.

But Why to write custom logic when we already have readymade middleware to enable writing side effects logic.

Redux middleware were designed to enable writing logic that has side effects.
"Side effects" are code that changes state/behaviour outside a function, like AJAX calls, modifying function arguments, or generating random values.

Middleware add an extra step to the standard Redux data flow,
We know the app code dispatches an action to the Redux store,
With middleware, After dispatching an action, it will first go through the middleware, then into the reducer.

Redux Async Data Flow:-
Just like with a normal action, we first need to handle a user event in the application, such as a click on a button. Then, we call dispatch(), and pass in something, whether it be a plain action object, a function, or some other value that a middleware can look for.

Once that dispatched value reaches a middleware, it can make an async call, and then dispatch a real action object when the async call completes.

Action Creators:-

An action creator is a function that creates and returns an action object. We typically use these so we don't have to write the action object by hand every time.
Action creator functions encapsulate preparing action objects and thunks.
Action creators can accept arguments and contain setup logic, and return the final action object or thunk function.

Source:(https://redux.js.org/)

Grouping Anagram in Javascript

Ganesh Shetty — Mon, 18 Apr 2022 05:31:07 +0000

An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once,

These are the examples

car = arc   arc = car   brag = grab
bored = robed   cat = act   cider = cried

In the first example we have eat = tea , here tea can be formed by eat by rearranging,

So now the task is not to find anagram but grouping them together from a list of elements.

for example, if we are given this array which contains anagram

["dusty", "night",'tea', "robed","ate","study","thing","eat"]

Then after grouping it should be something like below

[
 ['dusty', 'study'],
 ['night', 'thing'],
 ['tea', 'ate', 'eat'],
 ['robed']
]

So the idea is very simple,We keep an object and we sort each element and add as a key and value will be same as incoming element(without sorting),so if the sorted element is already present as key then we just push the element to existing array of elements

So the object looks like below,
[]

here is the code for the same

<script>
    function groupAnagrams(array) {
       let reducedObject = array.reduce((acc, cur) => {
          let newcur=cur.split('').sort().join('');
          if (!acc[newcur]) {
             acc[newcur] = [cur]
          } else {
             acc[newcur] = [...acc[newcur], cur]
          }
          return acc;
       }, {});
       return Object.values(reducedObject);
    }
    console.log(groupAnagrams(["dusty", "night",'tea', "robed","ate","study","thing","eat"]));
 </script>

How to find if two strings are isomorphic to each other in Javascript

Ganesh Shetty — Sun, 17 Apr 2022 15:43:00 +0000

Two strings str1 and str2 are called isomorphic if there is a one-to-one mapping possible for every character of str1 to every character of str2. And all occurrences of every character in ‘str1’ map to the same character in ‘str2’.

Input:  str1 = "aab", str2 = "xxy"
Output: True
'a' is mapped to 'x' and 'b' is mapped to 'y'.

Input:  str1 = "aab", str2 = "xyz"
Output: False
One occurrence of 'a' in str1 has 'x' in str2 and 
other occurrence of 'a' has 'y'.

Solution is very simple , we will consider every character of ‘str1’ and check if all occurrences of it map to the same character in ‘str2’.

We keep a hash map,We store each character in str1 as key and character in str2 for the same index as value,

<script>
    function isIsomorphic(str1, str2) {
        var obj = {};
        for (let i = 0; i < str1.length; i++) {
            if (!obj[str1[i]]) {
                obj[str1[i]] = str2[i];
            } else {
                if (obj[str1[i]] !== str2[i]) {
                    return false;
                }
            }
        }
        return true;
    }
    console.log(isIsomorphic("abc", "xyz"));
</script>

Hope this helps someone, Please comment if you need more such algorithm question in Javascript

Find the second largest number in an unsorted array without any built-in method in JavaScript

Ganesh Shetty — Sat, 16 Apr 2022 18:51:22 +0000

I am sure some of you have faced this question in an interview,When asked the same question in a sorted array or if we can use built-in method, this is definitely an easy question to crack, But this is little tricky without these.

But solution is very simple, first finding maximum number then to find second maximum when the array element is maximum we will just skip that element,

<script>
    let array = [10, 30, 35, 20, 30, 25, 90, 89];

    function secondLargestNumber(array) {
        let max = 0;
        let secondMax = 0;

        for (let i = 0; i < array.length; i++) {
            if (array[i] > max) {
                max = array[i];
            }
        }

        for (let i = 0; i < array.length; i++) {
            if (array[i] > secondMax && array[i] !== max) {
                secondMax = array[i];
            }
        }
        return secondMax;
    }
    console.log(secondLargestNumber(array));
</script>

How to convert an array into a specific format in Javascript?

Ganesh Shetty — Fri, 15 Apr 2022 09:45:39 +0000

  const endorsedSkills = [
        {
            language: "Javascript",
            user: 'Aarav'
        },
        {
            language: "ReactJS",
            user: 'Aarush'
        },
        {
            language: "Javascript",
            user: 'Aaryan'
        },
        {
            language: "ReactJS",
            user: 'Aayansh'
        },
        {
            language: "Angular",
            user: 'Aayush'
        },
        {
            language: "Javascript",
            user: 'Aayansh'
        },
        {
            language: "Angular",
            user: 'Adhrit'
        },
        {
            language: "Javascript",
            user: 'Adi'
        },
        {
            language: "ReactJS",
            user: 'Pranav'
        },
    ];

We are given an array which contains list of objects where each one of them represents a language and user it was endorsed by.

If we have to modify this array by grouping them by language so that we can display list of languages with endorsed by users list and count in our UI,So output would be something like this

  [
        {
            "language": "Javascript",
            "user": [
                "Aarav",
                "Aaryan",
                "Aayansh",
                "Adi"
            ],
            "count": 4
        },
        {
            "language": "ReactJS",
            "user": [
                "Aarush",
                "Aayansh",
                "Pranav"
            ],
            "count": 3
        },
        {
            "language": "Angular",
            "user": [
                "Aayush",
                "Adhrit"
            ],
            "count": 2
        }
    ]

How do we do it efficiently without any external libraries?

Answer is by using Array.reduce() method.reduce method is very useful in scenario like this.

Basic idea behind this is very simple, We keep an empty array as an accumulator, While iterating over each element of an array we check if element is already present if yes, then we update existing item with that particular index value if no, then we create a new item

 const formattedArray = endorsedSkills.reduce((acc, cur) => {
        const index = acc.findIndex((ele) => ele.language == cur.language);
        if (index != -1) {
            acc[index].user.push(cur.user);
            acc[index].count++;
        } else {
            acc.push({ language: cur.language, user: [cur.user], count: 1 });
        }
        return acc;
    }, []);
    console.log('formattedArray', formattedArray);

Hope this helps someone who is looking for something similar.