DEV Community: bhupendra

Understanding Redux with React

bhupendra — Sat, 09 Oct 2021 11:19:06 +0000

This is sequence of my earlier post about how to understand Redux in isolation and the problems it solves which cannot be solved by context API. To understand the importance of Redux in depth , here is an excellent article.

How to use React with Redux

Redux handles the store creation, middlewares & reducers logic. To use it with React, we need the instance of redux store for all components which is made available through Provider (using Context API). In Order to get the state and dispatch methods from the store we can use the connect from react-redux package. After Redux 7.0 we can use the useSelector and useDispatch hooks instead of wrapping our component with mapStateToProps and mapDispatchToProps.

Let's Build a React/Redux Project

We will continue building the project that was discussed in this post, but this time we will build the React UI also.

The project would have UI for two types of accounts: Current and Savings. There would also be a list of bank customers.

To get started we need to install below dependencies.

Here is how the directory structure of the project would look like:

In the previous , we have already seen how to setup action creators, reducers and combining reducers.
Here is how the redux store looks like now:

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import logger from "redux-logger";
import rootReducer from "./rootReducer";

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger, thunk))
);

export default store;

Store instance would be passed down the components tree via Provider

import { Provider } from "react-redux";
import store from "./redux/store";

export default function App() {
  return (
    <Provider store={store}>
      <div className="App">   
      ...    
      </div>
    </Provider>
  );
}

To subscribe to the store we would be using useSelector hook and to get the dispatch function we would require useDispatch hook. Earlier connect function was difficult to setup with Typescript but now these hooks provide easy TS integration.

export default CurrentAccounts = () => {
  const amount = useSelector((state) => state.current.amount);
  const dispatch = useDispatch();

  return (
    <div>
      <label>Current Account</label>
      <h3>{amount}</h3>
      <div>
        <button onClick={() => dispatch(withdrawMoneyCurrent())}>
          Withdraw
        </button>
        <button onClick={() => dispatch(depositMoneyCurrent())}>Depoist</button>
      </div>
    </div>
  );
};

Async Action Creator
We have used redux-thunk to call the dispatch function with actions in case of loading, success, error state for fetching data.

export const fetchCurrentUsers = () => {
  return function (dispatch) {
    dispatch(fetchStatusLoading);
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        const data = res.data.map((item) => ({ id: item.id, name: item.name }));
        dispatch(fetchStatusSuccess(data));
      })
      .catch((error) => {
        dispatch(fetchSatusError(error.message));
      });
  };
};

👇 Here is the complete sandbox to practice above concepts

And if you have Redux Dev Tools chrome extension , then you can replay the state transitions , dispatch custom functions and generate tests.

If you are using redux only to fetch data and save it to a centralized store then there is an another way to do it with more efficient cache performance and less code ~ Redux Query. Dan's blog on when not to use Redux is also a worth to read.

Understanding Redux without React

bhupendra — Fri, 08 Oct 2021 15:01:37 +0000

I always use to talk about react and redux in the same breath and thought redux does not exist without react. This was a big misconception that was cleared by responses to my tweet :
.
In this post I will share how to learn redux in isolation and that will answer the question is Redux relevant today ?

What is Redux

Redux is predictable state container for JS Apps as per official docs, let's break down this definition :

Predictable : State changes to application is predictable, which can be tracked over time (time travel)
State Container: Redux stores the state of our application. App State means state represented by all the individual components of the application
JS Apps : Redux can be used with any UI library(React/Vue/Angular/Vanilla...), this was unclear to me

Why Redux

Let's see how complex state management can be without Redux

Components manage their State internally, but when there is a need of communication of state between different components then we need to lift the state up to common ancestor component and then drill it down to the component which needs it.
In above ex: name state (+ setter method) is managed by Component C , then D requires it , we lift to A , but suppose Component F requires it then we need to move to App Component and then pass it down to Component F. This state management becomes messy and complex as the App grows.

You might think this is classical example of Props Drilling and can be solved by Context, then here is a great article on it.

Now lets figure out how Redux can simply above state management process :

Redux maintains a centralized store which holds state of app, each component which have subscribed the store , receive the updated state. We will look into the complete flow of Redux in next section.

Real Life Example

All of us, would have visited a Bank at least once in our life for depositing / withdrawal/ etc... We don't go to bank's vault directly but ask to the cashier, where the bank staff handles operation for us. We give deposit/withdraw request by filling a slip and giving it cashier. Let's think this scenario in terms of Redux :

Bank's Vault is the store which stores all the money
Cashier is the Reducer which executes users action to update money in the vault
Customer dispatches an Action describing the intent

Principles of Redux

Store holds the state of application The state of whole application is stored in an object within a single store
Action describes the changes in the state of the application Cannot directly update the state object that is done by redux only
Reducer which carries out the actual state transition based upon the action. Pure reducers which take state and action and returns a new state.

Here is how we can implement above concepts in the banking scenario example :
Action

// Actions Objects to withdraw and deposit money
{ 
  type: 'WITHDRAW_MONEY',
  payload: 1000
}
{ 
  type: 'DEPOSIT_MONEY',
  payload: 500
}

// Action Creator
function withdrawMoney() {
  return {
    type: "WITHDRAW_MONEY",
    payload: 1000,
  };
}

Reducer

const initialState = {
  amount: 5000,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "WITHDRAW_MONEY":
      return { ...state, amount: state.amount - action.payload };
    case "DEPOSIT_MONEY":
      return { ...state, amount: state.amount + action.payload };
    default:
      return state;
  }
};

Store

const redux = require("redux");
const createStore = redux.createStore;
const store = createStore(reducer);

// access to State
console.log("Initial State", store.getState());

//register listeners via subscribe(listener)
const unsubscribe = store.subscribe(() =>
  console.log("Update State :", store.getState())
);

//state update via dispatch(action)
store.dispatch(withdrawMoney());

//handles unregistering of listeners by function returned by subscriber
unsubscribe();

Going back to the Bank analogy, our bank is expanding and opening current accounts for businesses. It would be difficult to manage retail and business customers from single window as both types of customers have different types of need. So to manage all customers efficiently , bank opens a new window called 'Current Accounts' ( a new Reducer in Redux terms)

const initialState = { 
amount: 10000
}
const currentAccountsReducer = (state=initialState , action) => {
 switch (action.type) {
    case "WITHDRAW_MONEY_CURRENT":
      return { ...state, amount: state.amount - action.payload };
    case "DEPOSIT_MONEY_CURRENT":
      return { ...state, amount: state.amount + action.payload };
    default:
      return state;
  }
}

Now we have to combine the two reducers to create the store (as it can be only one for entire application).In Bank's analogy this can be kind of token vending machine which gives the customer a token for saving / current account facilities.

const combineReducers = redux.combineReducers;
const createStore = redux.createStore;

const rootReducer = combineReducers({
  savings: savingAccountsReducer,
  current: currentAccountsReducer,
});

const store = createStore(combineReducers)

Whenever an action is dispatched, it goes to both the reducers but only one acts on it , other one ignores.

Middleware
It is the how we can extend Redux with custom functionality. It gives us a point to hook our functionality after action is dispatched and before it reaches the reducer.
One of commonly used middleware is redux logger

const reduxLogger = require("redux-logger");
const logger = reduxLogger.createLogger();

const applyMiddleware = redux.applyMiddleware;
const store = createStore(combineReducers, applyMiddleware(logger))

👇 Here is how we get the state transition in Redux

Async Actions

Up till now we have seen synchronous actions ~ as soon as action is dispatched , reducers update the state immediately but in a real world scenario we have to make async API calls to fetch data from endpoint.

Let's see how to fetch data from API and store in a Redux store.

Firstly let's figure out the initial State of Application

const initialState = {
  loading: false,
  error: "",
  data: [],
};

Since dispatch method needs to be called asynchronously so we would need a middleware called 'redux-thunk' which will handle the function returned from our action creator.

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

👇 CodeSandbox to practice above concepts :

In order to understand how to use Redux with React , you can read this post

Composition vs Context in React

bhupendra — Tue, 14 Sep 2021 17:30:41 +0000

In a React App , there are two types of states that needs to be managed :

Sever Cache : state that is unique for a page and syncs to DB
UI State : state that refreshes on reload of page

When we talk about State Management in React , we refer to the UI State . Based upon how many components share the same state either we can Lift the State up ⬆ to the least common parent element Or we can co-locate⬇ the state to the component where it's used. This is explained in depth by Kent in his blog.

The problem arises when we have the state at top and it has to be passed via props to a deeply nested component, although the intermediate components don't require the state value , but they have to receive and forward to any of child component. This behavior is called Props drilling .



function App() {
  const [status, setStatus] = React.useState(false);
  return <Header status={status} />;
}

const Header = ({ status }) => {
  return <Account status={status} />;
};

const Account = ({ status }) => {
  return status ? "LogOut" : "LogIn";
};

In above code Header Component does not require status prop but only forwards it to the Account component which shows Log Out/In option based upon status prop.

First thing that comes to mind in solving Props Drilling problem is to use the Context API.

Let's see how to avoid props forwarding with context API :



const StatusContext = React.createContext();

function App() {
  const [status, setStatus] = React.useState(false);
  return (
    <StatusContext.Provider value={status}>
      <Header />
    </StatusContext.Provider>
  );
}

const Header = () => {
  return <Account />;
};

const Account = () => {
  const status = React.useContext(StatusContext);
  return status ? "LogOut" : "LogIn";
};

If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context. ~ React docs

, but before we try to solve props drilling with Composition,let's understand what does composition mean ~ Composition means building ⚒ or choosing what goes inside a component. So instead of writing <Header /> , we can refer it to as ```

React by default provides a *children* prop to all nested components and it's using this special props it becomes possible to make scalable & reusable components.

Let's see how to apply solve props drilling problem by composition :
```java


function App() {
  const [status, setStatus] = React.useState(false);
  return (
    <Header>
      <Account status={status} />
    </Header>
  );
}

const Header = ({ children }) => {
  return <>{children}</>;
};

const Account = ({ status }) => {
  return status ? "LogOut" : "LogIn";
};

💡Context should be used when data is needed for many components at different nesting levels. Using Context makes the component less reusable as the consumer component can't be used outside the provider component hierarchy.

Complete Example with both approaches :

React Performace Guide

bhupendra — Thu, 09 Sep 2021 10:16:23 +0000

As we know, React re-renders the component whenever there is change in state or props. There is no magical binding or any watcher which observes the state variable and updates it , infact it re-rendering of component which updates the UI. Each render has it's own props, state, event-listeners and effects, this is very well explained by Dan.

The Problem

In below code, Parent Component has 5 child components and all are rendered again even if the change is not related to them.

Here is how performance in impacted by unnecessary re-renders of components.

The Solution

The first line of defense to avoid unnecessary re-renders is using React.memo. React.memo will skip rendering the component, and reuse the last rendered result.
Let's wrap all the child components in React.memo.

We managed to save 3 components from re-rendering on change of Name input field, but still Address Input field re-renders. React.memo only does a shallow comparison of props changes but the handleAddressChange function is recreated new for each render and since functions are compared by reference, React.memo will not able to stop it from re-rendering Input Component as it is prop is callback function, which is new for each render of Parent Component.

The way to optimize this scenario is by using useCallback hook.

Now we have re-rendering only for the components that require it, as callbacks are passed to optimized child components that rely on reference equality to prevent unnecessary renders

💡 Now suppose if we have another requirement that is to validate address and show the suggestion. Address Validation API can take some time , lets see that in action

    const isValidAddress = () => {
    console.log(`validating Address... for ${city}`);
    for (let i = 0; i < 10000; i++) {
      //some delay to simualte address validation API
    }
    return city.length < 3 ? false : true;
  };
<!--  markup for address validation-->
 <Input
        target="Address"
        value={city}
        handleChange={memoizedAddressChange}
      />
      <span> Address is {isValidAddress() ? "✅" : "❌"}</span>

For this example , let's assume if address length is less than 3 then it's invalid otherwise it's valid.

Now isValidAddress() which is an expensive fn, is getting called even if we are changing the name , it is happening due re-render of component due to change in name state.
We can memoize the result of addressValidation function when we are changing any other state and only recalculate when there is change in address field.

The optimized solution with useMemo saves time of unnecessary evaluation of any expensive function. ⤵

The difference between useCallback() and useMemo() is that useCallback is to memoize/memorize the callback function that are passed to as props and useMemo is helpful in memozing the result of any expensive calculation.

Here is full code example of above concepts:

How JS Works ? Part 1

bhupendra — Thu, 17 Jun 2021 17:03:03 +0000

JavaScript is one of the most powerful language on the planet today. From being a scripting language in 90's , today it has reached space 🚀.

In Order to better understand the language , I have gone through multiple blog posts and videos and have prepared a Reference Guide , which could be a quick refresher guide on JS Concepts.

Below is the guide on JS Core Concepts , will soon publish another for the advanced concepts as well.

Click here to read the guide.

10 Productivity Hacks for Developers

bhupendra — Tue, 01 Jun 2021 04:15:02 +0000

These hacks (quick tips) would help in getting Efficient at work and plan our day to achieve maximum productivity without increasing the amount of time spent on work.

1) Momentum - Eliminate Distraction & beat Procrastination
This is my favorite chrome extension as it enables to focus on important tasks of the day. We no longer get distracted on opening new tab but are focused to complete our priority tasks. Best Part is its FREE

2) Session Buddy - Brower Tabs Manager Developers often have multiple tabs open when searching solutions , and if by mistake browser window gets closed then all that effort is gone . Session Buddy will save our important chrome session.

3) Auto Import - Imports made easy
Often we have to struggle with relative path (../..) of files , while importing them in other files , Auto Import VS code extension completes the import statements for us.

4) ScreenToGif - Record demos in a breeze

Windows does not have a inbuilt way to Record GIFs. Often for recording demos we don't prefer videos as its too heavy for simple tasks. After experimenting with many solutions to record GIFs, finally ScreenToGif worked well. Thankyou @NickeManarin for this amazing software. And Best Part is that its FREE

5) JR Screen Ruler - Pixel Perfect Spacing Issues

This Virtual Ruler accurately measures anything on screen.

6) Pocket - Put Knowledge in your Pocket

Often while reading about articles or watching videos , we want to save it for future reference and continue reading it from mobile. The content collected appears across all your devices in a clean, distraction-free space—there to read when you’re ready, whether at home, at work, or on the go.

7) CodeImg.io - Share Images of Source Code

This a great tool to create code snippets to be shared on blogs or any social media. Various Light & Dark mode themes are available to create images of code snippets in different formats.

8) Code Radio : 24*7 Music Station for Coders

Listen to curated, non-vocal and distraction-free music to increase your productivity and focus while coding. There are no commercials to interrupt your flow and its FREE.

9) Visualize Git : Understand Git with Visualization

Whenever I am stuck with a git issue , this visualizer helps me in understanding git through power of visualization. This is achieved through a game with different levels to get acquainted with the different git commands.

10) Pomodoro Work & Stretch - Secret to Effective Time Management

Thinking in terms of tomatoes (Pomodoro is Italian for tomato 🍅) rather than hours has really helped me to have focused work sessions with short break to stretch. Now a days this is extremely important not have mental fatigue with sustained concentration. Learn more how Pomodoro Technique can make us productive, more focused and even smarter.

React Hooks | Why useCallback ?

bhupendra — Sat, 24 Apr 2021 19:17:17 +0000

The Problem

Functions are First-class citizens/objects in JS , which simply means they behave like objects , functions can be ~ stored in variable , passed as argument or returned from a function.

// Referential Equality 
( () => {} ) === ( () => {} ) // false   
{ greeting:"Hi"} === { greeting:"Hi"} //false

Components Re-rendering

In React rendering means creating react elements and displaying on screen , this can be caused by state change, context change or a parent re-render. This is will cause re-run of the functional Component which will cause any function inside the Component to be destroyed (Garbage Collected) and created again on each re-render.

Example

Below Component renders a Text and button fields. value from the text field is saved to localStorage onChange.

import React from "react";

const fnCount = new Set(); // stores only unique values

export default function App() {
  const [name, setName] = React.useState(
    () => window.localStorage.getItem("name") || ""
  );
  const [count, setCount] = React.useState(0);

  const saveText = () => {
    window.localStorage.setItem("name", name);
  };

  React.useEffect(() => {
    saveText();
  }, [saveText]);

  fnCount.add(saveText); // keeps count of times new fn created
  console.log(fnCount);

  return (
    <div className="App">
      <h1>Understanding useCallback</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Your Name :"
      />
      <button
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        Count:{count}
      </button>
    </div>
  );
}

In above code fnCount is a Set so it will keep track of number of times function saveText is created on each re-render of App component triggered on change of Input field.

Below is the console log after 3 button clicks

On Component mount, fnCount had one 1 entry but on each re-render of component saveText fn is re-initialized and is brand new so now fnCount has 4 entries (1 + 3 for each re-render). Since saveText is related to name state so should not be re-run on button click. This is the problem useCallback solves by not letting React to initialize function on each render unless dependencies in useCallback changes.

Solution

  // const saveText = () => {
  //   window.localStorage.setItem("name", name);
  // };

  const saveText = React.useCallback(() => {
    window.localStorage.setItem("name", name);
  }, [name]);

After wrapping saveText fn with useCallback , function count for saveText remains 1 in fnCount (mount time) after 3 clicks.
Since on button Click no dependencies of saveText is changed so
useCallback returns the memoized (or memorized) function , that was returned last time.

Example App :

Higher Order Functions from scratch - Functional JS

bhupendra — Mon, 02 Mar 2020 08:26:38 +0000

Why Functional Programming

Functions are first class objects in JavaScript that means functions can be treated as objects as well, functions can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

function greet() { 
console.log(`Hello ${greet.person}, how are you !`)
}
greet.person = 'Mohit'  // using fn as object
greet() // prints Hello Mohit, how are you !

Functional Programming pattern makes asynchronicity possible in JS , functions are invoked when () is present after variable containing function definition. What if we don't want to run a function immediately but after some delay like setTimeout which takes in two parameters - a callback function and other is delay in ms. This type of function is called Higher Order Function, which is a function that takes in a function as an argument or returns a function. This pattern gives rise to concept of Closures which is the most powerful concept in JS.

Inbuilt High Order Functions in Arrays

JS provides us with many higher order functions like map,reduc,filter,sort ... , this allows functions composition possible which helps us in writing cleaner and maintainable code.

Let's see how we can create few Higher Order functions from scratch :

Map method from scratch

Array.prototype.map -
The map() method creates a new array by calling the callback function provided as an argument on every element in the input array.

Array.prototype.map2 = function(fn) {
    let result = [];
    for (let i = 0, l = this.length; i < l; i++) {
        result.push(fn(this[i]))
    };
    return result;
}
const arr = [1,2,3];
const mulBy2 = (ele) => ele*2;
console.log(arr.map(mulBy2)) // [2,4,6]
console.log(arr.map2(mulBy2)) // [2,4,6]

Filter method form scratch

Array.protoype.filter -
The filter() method creates a new array with all elements that pass the test provided by the callback function.

Array.prototype.filter2 = function(fn) {
    let result = [];
    for (let i=0,l=this.length;i<l;i++) {
        fn(this[i]) && result.push(this[i])
    };
    return result;
}
const arr1 = [1,2,3,5,8];
const getOddNos = (ele) => ele%2 !== 0;
console.log(arr1.filter(getOddNos))  // [1,3,5]
console.log(arr1.filter2(getOddNos)) // [1,3,5]

Reduce method form scratch

Array.prototype.reduce -
The reduce method executes the callback function on each member of the calling array which results in a single output value. The reduce method accepts two parameters: 1) The reducer function (callback), 2) and an optional initialValue.

 Array.prototype.reduce2 = function(fn, acculumator) {
    for (let i = 0, l = this.length; i < l; i++) {
        acculumator = fn(acculumator, this[i])
    };
    return acculumator;
}
const arr2 = [1,2,3,4,5];
const sumSeries = (acculumator,currentValue) => acculumator+currentValue;
console.log(arr2.reduce(sumSeries,0)); // 15
console.log(arr2.reduce2(sumSeries,0)); // 15

How to write blog posts [Markdown]

bhupendra — Tue, 12 Nov 2019 05:32:28 +0000

Why Learn Markdown

If you have worked on any GitHub repo, you would have surely seen a README.md file, this is the markdown file where you can describe your repo. Markdown is easy to learn. It is helpful in writing questions on forums like StackOverflow,
useful in commenting on Pull Request in Github, etc. It is a quick way to generated formatted text.

VS Code had inbuilt support for Markdown with the preview mode for generated HTML.

Below is the markdown code that will generate HTML markup.

# Basics of Markdown
Markdown is the most popular markup language that can be used to format documents. It can be used to create *websites*,*ebooks*,*email*,*chats in discussions forums*.

## Topics
1. Paragraphs 

    MD expects a full line space to show texts in a different line else it joins text in the same line.
2.  Text decorations

    MD can write **bold** texts, ~~italiic~~ *italic*  texts
3. Headings
    No of #'s represent the type of heading. Github will automatically add id's to headings, so the text will be automatically linked. 
    ## This is h2
    ### This is h3
4. Links

   [My Github](https://github.com/bhupendra1011 "all repos") account.[Bhupendra][1] github repo.

5. Images
    Images can be used just like links. ![Alt txt](img url)

    !["cat Img"](http://placekitten.com/200/200)

    Thumbnails images can also be used which links to larger image 
    [<img src="http://placekitten.com/20/20">](http://placekitten.com/200/200)

6. Ordered and Unordered Lists

    Coding Best Practices:

    * Keep code DRY
    * Writing Unit Test cases
    * Checking cross-browser support

    Steps to merge branch:

    1. Create a branch from feature
    1. commit your changes
    1. push your changes
    1. raise a pull request

7. Code Blocks

    This is super helpful when posting any code snippet
    ```js
    const fn = () => alert("some fn");
    ```
    ```css
    .hide {
        display:none
    }
    ```
    Also can show code difference
    ```diff
    var x = 10;
    - const counter = 0;
    + let counter = 0
    ```

8. Tables 

    Tables can be generated with headings and text alignment option

    |Stocks|Price|
    |:-----:|------:|
    |TCS|230|
    |YES Bank|500|



Cool Tips 

 * [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly) extension can eliminate typo and grammar mistakes
 * [ScreenTOGif](https://www.screentogif.com/) to record videos in GIF format
 * Upload GIF's to [giphy](https://giphy.com/) to embed them into blog posts.
 * [Stackedit](https://stackedit.io/) for Markdown Editing in Browser.

Below is the generated HTML from the markdown:

Basics of Markdown

Markdown is the most popular markup language that can be used to format documents. It can be used to create websites,ebooks,email,discussions forums

Topics

Paragraphs

MD expects a full line space to show texts in a different line else it joins text in the same line.
Text decorations

MD can write bold texts, ~~italiic~~ italic texts
Headings
No of #'s represent the type of heading . Github will automatically add id's to headings, so text will be automatically linked.

This is h2

This is h3
Links

My Github account.Bhupendra github repo.

Images
Images can be used just like links.

Thumbnails images can also be used which links to larger image
Ordered and Unordered List

Coding Best Practices:

* Keep code DRY
* Writing Unit Test cases
* Checking cross-browser support

Steps to merge branch:

1. Create a branch from feature
1. commit your changes
1. push your changes
1. raise a pull request

Code Blocks

This is super helpful when posting any code snippet
```
const fn = () => alert("some fn");
```

```css
.hide {
    display:none
}
```

Also can show code difference

```diff
var x = 10;
- const counter = 0;
+ let counter = 0
```

Tables

Tables can be generated with headings and text alignment option

Stocks Price

TCS 230

YES Bank 500

Stocks	Price
TCS	230
YES Bank	500

Cool Tips

Grammarly extension can eliminate typo and grammar mistakes
ScreenTOGif to record videos in GIF format
Upload GIF's to giphy to embed them into blog posts.
Stackedit for Markdown Editing in Browser.

Performance Debugging using Chrome Dev Tools

bhupendra — Tue, 15 Oct 2019 09:04:55 +0000

Performance Debugging using Chrome Dev Tools

I was exploring different features in chrome dev tools. I tried recording a performance profile but could not understand what the flame chart and other metrics mean. Also, I am not sure of how to solve Memory leak issues using Memory Tab.
I frequently used Sources (Local overrides) and Network tabs. But never got familiar with Performance and Memory Tab and how to read metrics and do performance debugging

Kindly suggest any video/article to understand Performance and Memory tabs in dev tools

How to use GIT workflows in VS Code

bhupendra — Thu, 10 Oct 2019 08:52:57 +0000

How to setup a GIT profile when there are Enterprise Proxies

If your organization has a proxy server setup then if you tried to access remote repositories, you would have got error message Connection Refused: 443. If you try to add the proxy then your work repository will throw the same connection refused error. Now the challenge is how to configure git to have access to both the work repository and your personal code repositories.

Use below commands to setup global proxies :

git config --global http.proxy http://username:password@proxy-server:port

git config --global https.proxy https://username:password@proxy-server:port

Now go to your work repository and unset the proxy as it is the internal repo :

git config --local --unset http.proxy

git config --local --unset https.proxy

How to specify multiple users in GIT profile

Often you would have encountered the issue when the commit in your personal repo is made using your official username and email. This happens because there is only a global username and email setup in ~/.gitconfig.
There are two ways to fix this :
1) Set username and email explicitly in each of the private repo that you clone:

git config user.name yourName git config user.email yourEmail

2) Since git 2.13, there is a feature called conditional includes :
Replace any user config details present in ~/.gitconfig file with the below condition

[includeIf "gitdir:~/Personal/"]
  path = .gitconfig-personal
[includeIf "gitdir:~/Work/"]
  path = .gitconfig-work

Now create two siblings config files, next to .gitconfig
For personal or open-source work, personal user details to be added in .gitconfig-personal

[user]
name = yourUserName
email = email@gmail.com

For Official code related work, official user details to be added in gitconfig-work

[user]
name = yourUserId
email = email@work.com

With this approach, you would not require to set user details in every repo that you clone. You need to only place your repositories in specified directories. Git will automatically fetch correct user details.

Now with our Git setup is complete for open source work, let's see how efficiently VS code manages GIT workflows

Cloning a Repo

1) Fork the Repo that you need to clone
2) On your forked repo, click on "clone or download" button to copy URL
3) Open VS Code and open Command Palette (Cmd/Ctrl + Shift + P)
4) Select Git Clone and paste the URL copied from Github
5) Select Repository Location
6) VS Code will automatically set the upstream for the cloned repo

Pushing code to Remote

Analyzing the changes to the source file is very helpful in vs code
1) Whenever any line is modified, VS code puts a blue bar against that line number
2) When any is line is deleted (Shift+Del), VS code adds a red triangle against that line number
3) When any line is added, the VS code adds a green bar against that line number.

These colored gutter indicators can be expanded to review what changes have been done.

Resolving Merge Conflicts

Merge conflicts occur when two people change the same file outside the origin (upstream). GIT can auto-merge only if changes are at different locations, but for the conflicts occurring at the same place, manually it has to be resolved.
VS Code provides an easy way to resolve these conflicts within the editor itself.

Below is the scenario when merge conflicts will occur:
1) User2 has a forked a repo of User1
2) User2 creates a feature branch from master
3) User2 does changes and commits in the feature branch
4) User2 raises a Pull Request to merge with the master branch of forked Repo
5) In the meantime, User1 has also done some changes in the master and pushed to remote
6) User2 now creates the pull request to merge his master branch with User1's master branch.
7) Since both have modified the file at the same location, Auto_merging of files gets failed, although PR is raised but until conflicts are resolved, PR cannot be merged.

Steps to resolve the conflicts:
1) User1 needs to have GitHub Pull Request extension to view all the Pull Requests inside VS Code
2) User1 also needs to connect VS Code with his GitHub account
3) Under All section in the Source Control Explorer,Pull requests would be visible
4) To view the changes in PR, User1 clicks on Description text.
5) User1 will checkout the PR branch , now User1 can comment on PR from VS Code
6) After reviewing the changes, User1 switches to master branch
7) User1 opens Command Palette (Cmd/Ctrl + Shift + P) and selects merge branch to merge PR branch with master
8) Since there are conflicts, auto-merging will get failed.
9) Source Control inserts <<<,>>> and ==== characters to show conflicting changes
10) VS Code identifies the changes as Current Change or Incoming Change
11) After selecting the correct code version , changes needs to committed.
12) After syncing with Remote , PR raised by User1 get's merged and shows in his GitHub

Pro Tip : 👍
1) Install GitLens extension to get a history of each line of code
2) Prefer git sync over git push. Git Sync (🔃 icon in VS Code status bar next to branch name) will pull remote changes down to your local repository and then push local commits to the upstream branch.

Build a chat application in JavaScript

bhupendra — Tue, 24 Sep 2019 10:19:26 +0000

Why Build a Chat App

An easy way of learning something is trying to solve a problem. In my case, I wanted to build a [Node JS] App (https://nodejs.org/en/) and deploy it on cloud ( something like Heroku which I later 🔎 out).

So here is the problem >> Most of my friends were working in different organizations, to communicate with each other on desktop we tried apps like hangout ... but most of the apps were blocked in most of the organizations. WhatsApp Web was not launched by then (Aug 2014), so I decided to solve this problem by learning Node JS and socket.io.

Getting Started

Install NodeJS and start a new node project with below package.json


{
  "name": "Chat-App",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.13.3",
    "moment": "^2.12.0",
    "socket.io": "^1.3.7"
  }
}

Set up Node JS file to setup application

var PORT = process.env.PORT || 3000;
var express = require("express");
var app = express(); // express app which is used boilerplate for HTTP
var http = require("http").Server(app);
// expose the folder via express thought
app.use(express.static(__dirname + '/public'));
http.listen(PORT, function() {
  console.log("server started");
});

Set up client side public folder for the UI

Add index.html to launch the landing page
Add chat.html to open chat screen after logging from chat window
Add app.js to show messages received from Node Server (using Socket.io).

Socket Communication

Showing Welcome message

When a user joins a chat room, he is greeted by the system for logging into the system.

  socket.emit("message", {
    text: "Welcome to Chat Appliction !",
    timestamp: moment().valueOf(),
    name: "System"
  });

server.js

Also if other person has joined room , client side has to emit an event

 socket.on("connect", function() {
   console.log("Connected to Socket I/O Server!");
   console.log(name + " wants to join  " + room);
   // to join a specific room
   socket.emit('joinRoom', {
     name: name,
     room: room
   });
 });

app.js

Now server broadcast this message to all the users joined in that room

  socket.on('joinRoom', function(req) {
    clientInfo[socket.id] = req;
    socket.join(req.room);
    //broadcast new user joined room
    socket.broadcast.to(req.room).emit("message", {
      name: "System",
      text: req.name + ' has joined',
      timestamp: moment().valueOf()
    });

  });

server.js

Show notification when user is typing

As user is typing in the message field , client side emits that event :

 $('#messagebox').keyup(function() {
   console.log('happening');
   typing = true;
   $("#icon-type").removeClass();
   //console.log("typing typing ....");
   //socket.emit('typing', 'typing...');
   socket.emit('typing', {
     text: name + " is typing ..."
   });
   clearTimeout(timeout);
   timeout = setTimeout(timeoutFunction, 1000);
 });

app.js

The server then broadcasts this notification:

  socket.on('typing', function(message) { // broadcast this message to all users in that room
    socket.broadcast.to(clientInfo[socket.id].room).emit("typing", message);
  });

server.js

When a user sends a message When the user submits the message form then after sanitizing the input , the message is emitted to the server

 var $form = $("#messageForm");
 var $message1 = $form.find('input[name=message]');
 $form.on("submit", function(event) {
   event.preventDefault();
   var msg = $message1.val();
   //prevent js injection attack
   msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;").trim();
   if (msg === "") return -1; //empty messages cannot be sent

   socket.emit("message", {
     text: msg,
     name: name
   });
   // show user messageForm
   var $messages = $(".messages");
   var $message = $('<li class = "list-group-item"></li>');

   var momentTimestamp = moment().format("h:mm a");
   // $(".messages").append($('<p>').text(message.text));
   $message.append("<strong>" + momentTimestamp + " " + name + "</strong>");
   //$message.append("<p>" + $message1.val()+ "</p>");
   $message.append($("<p>", {
     class: "mymessages",
     text: $message1.val()
   }));
   $messages.append($message);
   $message1.val('');
   // manage autoscroll
   var obj = $("ul.messages.list-group");
   var offset = obj.offset();
   var scrollLength = obj[0].scrollHeight;
   //  offset.top += 20;
   $("ul.messages.list-group").animate({
     scrollTop: scrollLength - offset.top
   });

 });

app.js

Server listens to the above client event , then after checking if the input message is not a predefined command {@currentUsers gives list of users in current chat room}, broadcasts the received message.

  socket.on("message", function(message) {
    console.log("Message Received : " + message.text);
    // to show all current users
    if (message.text === "@currentUsers") {
      sendCurrentUsers(socket);
    } else {
      //broadcast to all users except for sender
      message.timestamp = moment().valueOf();
      //socket.broadcast.emit("message",message);
      // now message should be only sent to users who are in same room
      socket.broadcast.to(clientInfo[socket.id].room).emit("message", message);
      //socket.emit.to(clientInfo[socket.id].room).emit("message", message);
    }

server.js

Checking if the message has been by the user or not

On Client side, when the message is received, then a check is made to see if the user has opened the chat window or not. If chat window is open, then it means, the message is seen, then an event is emitted

// notify, only when the user has not open chat view
   if (document[hidden]) {
     notifyMe(message);
     // also notify server that user has not seen messgae
     var umsg = {
       text: name + " has not seen message",
       read: false
     };
     socket.emit("userSeen", umsg);
   } else {
     // notify  server that user has seen message
     var umsg = {
       text: name + " has seen message",
       read: true,
       user: name
     };
     socket.emit("userSeen", umsg);
   }
 });

app.js
User gets a notification if the chat window is minimized

If user clicks on the notification window , then user seen message is emitted so that blue ticks (user not message) gets converted to green (user has seen the message)

function notifyMe(msg) {
   // Let's check if the browser supports notifications
   if (!("Notification" in window)) {
     alert("This browser does not support desktop notification,try Chromium!");
   }

   // Let's check whether notification permissions have already been granted
   else if (Notification.permission === "granted") {
     // If it's okay let's create a notification
     //  var notification = new Notification(msg);
     var notification = new Notification('Chat App', {
       body: msg.name + ": " + msg.text,
       icon: '/images/apple-icon.png' // optional
     });
     notification.onclick = function(event) {
       event.preventDefault();
       this.close();
       // assume user would see message so broadcast userSeen event
       var umsg = {
         text: name + " has seen message",
         read: true,
         user: name
       };
       socket.emit("userSeen", umsg);
       //window.open('http://www.mozilla.org', '_blank');
     };
   }
   // Otherwise, we need to ask the user for permission
   else if (Notification.permission !== 'denied') {
     Notification.requestPermission(function(permission) {
       // If the user accepts, let's create a notification
       if (permission === "granted") {
         var notification = new Notification('Chat App', {
           body: msg.name + ": " + msg.text,
           icon: '/images/apple-icon.png' // optional
         });
         notification.onclick = function(event) {
           event.preventDefault();
           this.close();
           var umsg = {
             text: name + " has seen message",
             read: true,
             user: name
           };
           socket.emit("userSeen", umsg);
           // assume user would see message so broadcast userSeen event

         };
       }
     });
   }

   // At last, if the user has denied notifications, and you
   // want to be respectful there is no need to bother them any more.
 }

app.js

Server side needs to be notified when user sees the message

 // to check if user seen Message
  socket.on("userSeen", function(msg) {
    socket.broadcast.to(clientInfo[socket.id].room).emit("userSeen", msg);
    //socket.emit("message", msg);

  });

server.js

Deploying to the Cloud

Now code needs to be deployed to the cloud , this can be easily done through Heroku. Five applications can be deployed at a time in Heroku for free.

Conclusion

I got really excited when I shared this with my friends, we could chat through a web application which is not blocked due to any organization policies.
This is a 4 year old project , when I came to know about dev.to decided to put my learning here.

To improve this chat application, below features could be added :

Implement authentication using OAuth2
Add the option to change username , add a profile picture.
Add DB to persist the chat messages.
any other feature ...

Source Code : https://github.com/bhupendra1011/Chat-App
Demo : https://bhupendra1011.herokuapp.com/