Prop drilling vs Context API, How the data is passed

React was initially released in 2013 and one thing that hasn’t changed so far is the way data is passed with props in the nesting level. But the good news is there are some other ways in which data can be passed to the child from the parent. Context API is especially useful when you have multiple levels of the nested child.

Let’s start with the basics to get more ideas about it.

What is Props?

React is a library that helps us divide the UI into small reusable pieces which we call a component. In order to pass data between the components, we make use of Props. Data is passed to the component with the help of props. Thus props help us pass the data from one component to another.

Now the data in props are read-only meaning it cannot be changed by the child who is consuming the data. Thus it is a unidirectional flow. (one way from parent to child). We can however pass data from child to parent making use of the function passing it via props.

What is Prop drilling?

Prop drilling refers to the passing of the data from the parent to all the nested children in the React Tree. Let’s look at the diagram above on how data has to be passed from parents to all its child.

When can prop drilling cause a problem?

1. Updating data format Let’s assume that you passed data to the nested child and now you want to refactor the data that is passed for example

<Profile user="Harsh">

Let’s assume that we now need to pass an object as we also need to pass profile status if it’s expired or not. so here is how the component will look like

<Profile user={"name": "Harsh", "status": "Expired"}

During such cases, you have to change the data format which is accessed by each of them.

2. Renaming props Let assume that later in the state of application there comes a time to rename the prop as you are removing some data or passing more. It has to be changed at all the places down the hierarchy.

Let’s take a look at how we can solve this problem by making use of React Context.

React Context

Context provides an awesome way to pass data through the component tree without having to pass props down manually at every level in your application.

Context has 3 main blocks:

Context Object

You can define the Context object in a separate file or right next to a component in a component file if you wish. Having multiple contexts within the component is also possible. Thus you can store any data you want in the context object which will be accessed globally in your application.

Context Provider

The provider provides the values in all the components within the application that needs to access this context object.

Context Consumer

In the below example, the context is nothing but the values of the context object. All the values which we defined during creating the context object are easily accessed here. Yeah, it’s that easy!

When can context API cause a problem?

Unnecessary re-rendering in Application

Everything that consumes a context re-renders everytime that context’s state changes.

Though context API seems to be an amazing feature overusing it might lead to unnecessary re-rendering in your application whenever the state of the provider changes it will re-render all it’s the child no matter even if they are customing the data from the provider or not.

Conclusion

• Context API is always a good choice when the data stored does not have frequent updates like dark/light mode (theme), profile picture details, account details, etc.

• React is already fast and doesn’t need many optimizations, Most of the case prop drilling can be also a good choice to consider as it is easy from an implementation perspective

• Try to keep the state of the app as close as to the render component.

• There is no proper guide on whether you should go with prop drilling or context API, Just validate your code in terms of necessity, whether it is required to do or no and then proceed.

Happy Learning.

On average a person has over 50,000 thoughts a day, Have you come across an idea which you think has the potential to generate revenue? You always have a second thought I wish this could be done in some days so that I can launch it on Producthunt and quickly evaluate it instead of wasting a lot of effort and money on this.

Image from undraw

This article will throw some light on choosing the right MVP stack to quickly go to the market making use of all possible low code/ no-code tools. Let’s take look at the possible lifecycle which idea needs to pass through in order to release the MVP.

Idea lifecycle to MVP

What is MVP (Minimum viable product)?

MVP is the basic version of your product which you are having an idea of, it has only the required features that are helping solve the real-world problem instead of running behind all the features which an application should have. This product then evolves based on customer feedback and becomes more mature as time passes by.

What Purpose does MVP serve?

• Budget is a key factor whenever we are planning to build some application, you are not sure if the idea which you have is really going to work

• Reduce time to market

• Quickly put your idea to test with a small budget

• If things go haywire you are able to spot them early rather than building the complete product and then evaluating it.

For the above lifecycle diagram, The major time which is spent is wasted on building things. Let’s take a look at how it can be reduced choosing the right so-called MVP stack. 🏆

Frontend Tools

Gone are those days where a dev use to check the responsive behavior in different resolution, add custom CSS to make it responsive, starting a new project from scratch. What no-code tools can you use then?

Apart from choosing the UI kit libraries which help you get your job done like

• Semantic UI
• Chakra UI
• Material UI
• Bootstrap You can level up your game which some of the tools mentioned below.

Divjoy

It is a React code base generator that will help you set up all layout boilerplate in minutes using drag and drop. Oh did I mention you can also choose the stack you prefer?

Image from Divjoy

This will handle all the boilerplate code starting from frontend to backend, marketing, analytics, payment integration, and lot more.

**UIBakery**

Create full-fledged apps visually in minutes. No coding required just drag and drop the things you want from the store and you are done. what more do you expect?

Image from UIBakery

Webflow

Building your landing page website would be faster like never before with webflow, codeless, and do more with this tool. This is a super-advanced version of WordPress which will save you time.

Image from webflow

Bonus 💰

Now that we have many options for the landing page & website it’s time to get some illustration for the website.

Image from unDraw unDraw - Open source illustrations for any idea Browse now Created by Katerina Limpitsouni Create better designed websites, products and applications. Browse to find…undraw.co Blush: Illustrations for everyone Blush makes it easy to add free illustrations to your designs. Play with fully customizable graphics made by artists…blush.design

Backend Tools

With a lot of tools coming to market, the is no need to use a database like MySQL which consumes a lot of time for setting up, creating tables, deploying it. Instead, there are some other tools that you can use as backend and get rid of the setup.

Airtable

Airtable provides a mix of database and spreadsheet with a better approach to organize the data. In a single airtable base you can have multiple tables, maintain a relationship somewhat similar to a database.

It provides REST API out of the box which can be used to create, read update, delete records without writing a single line of code.

Image from Airtable

Features:

• No code required to setup backend

• Easy to update values manually if required

• Free plans are sufficient for basic needs

• Save time and focus on what matters the most

NoCode API

If your use case in the MVP is with readily available apps integration i.e 3rd party apps integration you can go with this tool.

Image from NocodeAPI

Features:

• Super easy to set up REST API without a single line of code

• A mechanism to secure your token while accessing the data

• Serverless, no worry about hosting

• Easily connect 3rd API with your project

Firebase

It provides all in one solution from authentication, hosting, cloud function, and a lot more, kind of all in one solution for backend with support for real-time events on DB. Most of its services are free and within your budget for the MVP.

Image from firebase

Features:

• Real-time database

• Email, Github, Facebook, and Google authentication.

• Hosting service

• Cloud function, no need to setup server for your backend

• File storage

Hosting Platforms

There are lots of hosting services available in the market, but some of them stand out well. Auto deployment to production is something everyone is looking for to avoid any kind of human errors during deployment.

Netlify

It is a very famous hosting service that helps you code your code repository and pull your source code to generate the build process for you without your involvement.

Image from Netlify

Features:

• Customizable CI/CD workflow

• Purchase your domain

• Deploy multiple sites from a single repository

• Speed up your development flow

• Auto-preview your PR or branch

• Built-in Analytics

Workflow Automation Tools

While working with different events in your app there is some point in time where you need to push the events to some other apps/services so that you know what’s happening in your app once it is deployed. Whether it may be sending an email, slack post, or any other events writing custom code just consumes a hell lot of time, using some of the tools mentioned below will help you achieve app integration in minutes.

Zapier

Zapier is an automation application while helps to connect thousands of apps into workflows for your business to make your job easier. It helps to set up a custom trigger for any of the events that happen in your app and transfers the data to integrate the app inside zapier which is called Zap.

This is a completely no-code platform that helps you connect your app with a lot of other 3rd party apps with the readily available platform, thus saving time and helping you focus more on your business.

Image from zapier

Integromat

All the manually handled day to day processes can be automated using Integromat. Similar to Zapier even these tools have support for tons of apps and service which help you save time.

Image from Integromat

These are some of the tools you can consider to save time. I hope this article helps you build a rapid prototype. Happy Learning! 💻 😀

If you enjoyed reading this, you may also enjoy some of my other pieces:

• 🏆 10 Tips and Tricks to Boost Your React App’s Performance in 2020

• Replacing Lifecycle methods with React Hooks

• Tips to Level Up Your JavaScript and React Skills

Icons by Freepik on flaticon.

There are different ways of solving the same problem when it comes to programming — whether it be JavaScript, React, Python, or any other language. When you look into someone else’s code, there is always something new that you can learn.

React is evolving day by day and there are various approaches that can be used to solve any problem that we face in our application. Let’s look at ten tips and tricks that will definitely help you while working with React. Think of these tricks mostly as performance boosters for your application.

1. Pause Console Debugger

You have surely come across a scenario where you want to debug the style of dropdown or something else that closes automatically when you try to right-click on the element and click on “Inspect element.”

Here is a simple solution:

1. Open your console from a browser.

2. Type in the following command:

setTimeout(() => {debugger;}, 5000)

1. Then open the dropdown that you want to debug.

2. useState Lazy Initialization With Function

There are times when we need to set the initial value of the state from some variable or from a function that returns a value.

Let’s take a look at the example below:

const initialState = someFunctionThatCaluclatesValue(props)

const [count, setCount] = React.useState(initialState)

Since our function is in the body, every time a re-render happens, this function is getting called even if its value is not required (we only need it during the initial render).

Let’s see how to lazy initialize useState with a function:

const getInitialState = (props) => someFunctionThatCaluclatesValue(props)

const [count, setCount] = React.useState(getInitialState)

Creating a function is very fast. React will only call the function when it needs the initial value (which is when the component is initially rendered). So even if the function is taking a lot of time, it will be slow on the initial render only. This is called “lazy initialization.” It’s a performance optimization.

Let’s look at this GIF to get an idea of what that looks like:

Lazy function vs. ordinary function

To play around with the example above:

3. Making Use of Custom Hooks

With hooks, we don’t have some facility that can help us get the callback as in the case of setState.

For example, we get the callback in the state. Once the state is set, we usually use the callback function:

this.setState({
    "name" : "Harsh"
}, () => {
     // Hey that state is set successfully what do you
     // want to do, I'm callback your friend 😄
})

Let’s see how can we achieve similar behavior with a custom hook that gets called only when the state is changed and isn’t called during the initial render:

For more easy-to-understand hook recipes, check out Gabe Ragland. useHooks This hook makes it super easy to subscribe to data in your Firestore database without having to worry about state…usehooks.com

4. Monitor Unnecessary Renders in Your Applications

One of the common problems we face is evaluating the necessary renders in your application that are having a bad impact on the performance.

There are different ways we can evaluate them to avoid unnecessary renders in minutes

why-did-you-render

Image credit: GitHub.

According to its documentation, why-did-you-render “monkey patches React to notify you about avoidable re-renders.” This will display unnecessary renders that are happening in your application so that you can take action against them.

React Devtools

As noted by DebugBear:

“DevTools give us a visualization of the performance of your app. To see this, ensure that you are running React in development mode, open DevTools in your browser, and then go to the “Performance” tab. You can record the performance of your app from a point after the page has loaded or from the page load. There are two buttons in the top left corner of the DevTools dialog:”

Start recording

Once you stop recording, you will be able to see a graph showing different components that rendered and the time taken to render them.

Rendering information

5. Using React.memo and useMemo

According to React's official documentation:

"React.memo is a higher-order component. If your function component renders the same result given the same props, you can wrap it in a call to React. In some cases, memoizing the result will provide a performance boost. This means that React will skip rendering the component and reuse the last rendered result.”

React.memo does a shallow comparison out of the box and avoids rendering. A Stack Overflow user defined a shallow comparison as being “when the properties of the objects being compared are done using === or strict equality and will not conduct comparisons deeper into the properties.”

This will result in re-rendering.

Note: In the example above, true means that the component will render again despite the values being the same.

But there are times when you need to do a deep comparison, meaning you want to compare the nested properties in an array of objects. How can we do that? Let’s jump into our next trick.

6. Deep Comparison in shouldComponentUpdate

As we saw in the example above, React.memo can only help you to avoid re-rendering if your values are simple. But if you have a nested array of objects, you cannot compare them right out of the box.

Use deep-equal: deep-equal Node's assert.deepEqual() algorithm as a standalone module. This module is around 46 times faster than wrapping…www.npmjs.com

Compare two objects and return whether they are equal according to a recursive equality algorithm.

“If opts.strict is true, use strict equality (===) to compare leaf nodes. The default is to use coercive equality (==) because that's how assert.deepEqual() works by default.” — deep-equal

Note: There are many such packages that can help you compare two nested arrays of objects to avoid re-rendering via comparison.

7. React Window

Since most of the application has to do with rendering the data in the form of a list, when the list grows long, it’s like a poison is slowly entering your application and having a bad impact on the performance. It starts consuming a lot of memory in the browser as well. Since all the list items are in the DOM, there is a lag when you scroll the list.

How can we render only some parts of the items on the list that are currently visible on the screen then? Make use of React Window: bvaughn/react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a…github.com

No matter the size of your list (e.g. 1,000 items), it will only display 20–30 items in the DOM depending on the size of your window, which is completely customizable and will boost performance!

8. React Query

With hooks for fetching, caching, and updating asynchronous data in React, managing server state is easier than ever before with React Query.

Here are the features listed on GitHub:

• Transport/protocol/back-end agnostic data fetching (REST, GraphQL, promises, whatever!)

• Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)

• Parallel + Dependent Queries

• Mutations + Reactive Query Refetching

• Multi-layer Cache + Automatic Garbage Collection

• Paginated + Cursor-based Queries

• Load-More + Infinite Scroll Queries w/ Scroll Recovery

• Request Cancellation

• React Suspense + Fetch-As-You-Render Query Prefetching

• Dedicated Devtools (React Query Devtools)

tannerlinsley/react-query Hooks for fetching, caching and updating asynchronous data in React Enjoy this library? Try the entire TanStack! React…github.com

9. Lazy Loading React Components (With React.lazy and Suspense)

What is React.lazy( )?

As written by Nwose Lotanna, React.lazy is:

“A new function in React that lets you load React components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only needed or critical user interface items first, then quietly unrolling the non-critical items later.”

What is Suspense?

"Suspense is a component required by the lazy function that is basically used to wrap lazy components. Multiple lazy components can be wrapped with the help of the Suspense component. It also takes a fallback property that is going to accept the React elements you want to render as the lazy component is being loaded.” — Nwose Lotanna

See the code to play around with this on CodeSandbox.

You can now identify any large components on a page in your application that only render on certain user interactions (like clicking a button, toggle, etc). Splitting these components will minimize your JavaScript payloads and help you increase performance.

10. One Function to Update Multiple Input State Values

This is the common use case of keeping the same function to update multiple input values. Most of us know about this approach that helps to reduce the code and get our job done. This is useful in case there are multiple inputs in a form:

Conclusion

Did you know any of these tricks? Thanks for reading this article. I hope you learned something new!

Nowadays many of the apps prefer content loading for better user experience let’s first find out what is skeleton loading?

Icons made by https://www.flaticon.com/authors/freepik

Skeleton/Content Loading Screen

A skeleton screen is a version of the UI that doesn’t contain actual content/Information but it contains a mimics of how the page will look like when the actual content is displayed. It means that it will display the actual shape of how the layout will appear when all the information is loaded on the screen.

These screens usually content the place holder for different types of elements on the screens like text, images, videos, etc.

Advantages of Using Skeleton Screen

Instead of showing an old school loading mask at the center of your page where it is hard for the user to continuously keep staring at the loader, the skeleton screen will sometimes hide your performance issues 🤪 and the user is definitely going to enjoy watching the loading screen.

• Content loader helps to mimic how your web/mobile app screen is going to look like even before loading

• You can show loading for different types of elements like image, text, video or any other sections according to your content layout (A lot of tech companies display skeleton screens while their content loads to boost the UX.)

• The goal is to design for a perception of decreased waiting time. Users if already aware of what’s next in the menu

Now in order to give you more idea about the loader in you are still not convinced let’s have a look at the example below

Skeleton screen of different apps

How to achieve this using React?

Good News, there are a lot of readily available packages that you can use out of the box. Below are some of the packages which you can try in your applications

• react-content-loader (136,118 weekly downloads, 9K 🌟)

• react-loading-skeleton (54,298 weekly downloads, 1.3K 🌟)

• react-placeholder (22,808 weekly downloads, 1.2K 🌟)

Code Time ⚡️

Now that we know the libraries which we can use to achieve such content loading let’s start looking at the code which we need to add in our application

Installation

npm i react-content-loader — save 

OR 

yarn add react-content-loader

Usage

1. Using readily available presets

import ContentLoader, { Facebook } from 'react-content-loader'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

1. Custom mode, see the online tool

const MyLoader = () => (
 <ContentLoader viewBox=”0 0 380 70">
 {/* Only SVG shapes */} 
 <rect x=”0" y=”0" rx=”5" ry=”5" width=”70" height=”70" />
 <rect x=”80" y=”17" rx=”4" ry=”4" width=”300" height=”13" />
 <rect x=”80" y=”40" rx=”3" ry=”3" width=”250" height=”10" />
 </ContentLoader>
)

Demo Time 🧨

Sandbox credits — https://codesandbox.io/u/shaunwallace

Link to codesandbox — https://codesandbox.io/s/2wp1zoj09j

Happy Learning! 😄 💻

Recoil

While working with react you might have noticed that are different ways to manage the global state management in React. Let’s take look at the options that we have:

Redux

Redux is a predictable state container for JavaScript apps. It is used by a lot of web apps these days, it allows us to have a global state, register components to it and they will re-render by themselves every time a value they registered to will change.

• Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

• Centralizing your application’s state and logic enables powerful capabilities like undo/redo, state persistence, and much more.

• Redux works with any UI layer and has a large ecosystem of add-ons to fit your needs.

Read more about Redux — https://redux.js.org/

Context API

Context API is another approach that devs take for better management of state within the application.

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

• Scalable from any range of application (small, mid, large)

• Comparatively less complex than Redux

• No need to pass data to the children at each level. Consumer component instance can access all the data provided by the Provider Component at any level.

Read more about context API — https://reactjs.org/docs/context.html

Recoil

Now that we are already using to above two famous ways of adding global state to our application here comes something new i.e Recoil 🧨

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components.

• Atoms are units of the state that components can subscribe to. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of the React local component state. If the same atom is used from multiple components, all those components share their state.

• Selectors transform this state either synchronously or asynchronously. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change.

Demo Time 🚀

Let’s try to understand this with a Demo example.

Consider we want to store user data upon login into our application and share between two components, <Header /> and <Body />. Let’s say if we were to do this with the useState hook we would have to define the useState Hook at both the places i.e inside the Header and Body component we cannot differently share the same state with useState Hooks. But with Recoil, we can easily achieve this.

Let first define an atom which stores the logged-in user Data

Defining atom

Note: Don’t worry about the code snippet, I’ve got your back covered by adding the entire source code below.

In the above example, we have stored the object which has a name in it. It is stored inside our loggedInUserData atom.

Now consider we need to show this name in our <Header /> component which looks something like this with help of useRecoilState

Header component

And our <Body /> component looks something like this, which display the data from the same atom which is used in the header component again with help of useRecoilState

The syntax might look quite similar to useState which we are already used to in react hooks.

Now here’s the magic 🎩, As in the above example since the same state is shared between the <Header /> component and the <Body /> if you change the name of logged-in user from the <Body /> component, then it will change it globally performing or necessary re-renders to update the state.

*GIF: Clicking on button update the states of both component*

Here is a link to codesandbox for the code —

https://codesandbox.io/s/react-recoil-ehfkd

There are some other terms that were not used in the demo but you should know about

useRecoilValue(state)

This is one of the important hooks in the Recoil API. This hook will just subscribe to the component to the given Recoil state, it is used to return the value of the given Recoil state.

Reference and links to learn

Recoil was announced at ReactEurope a few days back (14th May 2020) check about this video

facebookexperimental/Recoil Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult…github.com Recoil A state management library for React Recoil works and thinks like React. Add some to your app and get fast and flexible…recoiljs.org

Thus this was a quick example of how recoil can be used to maintain the shared state within different components.

Happy Learning! 💻 😄

Bit.dev | A Cloud Component Hub

Publish reusable React components from any codebase to a single component hub. Use **Bit** to document, organize, and even keep track of component updates and usage.

Share components with your team to maximize code reuse, speed up delivery and build apps that scale.

Example: exploring React components published on Bit.dev

It’s been more than a year now since the release of Hooks. More devs are switching to Hooks implementation over classical class-based components. Even if the Hooks based implementation is difficult to understand at the beginning but it’s worth switching to Hooks at the end. 🎉

Before we start looking at the replacement method. Let’s look at the classic Lifecycle events which are used in React 16

React 16 Lifecycle Methods

Lifecycle Image credits — https://twitter.com/dceddia

Let’s have a look at each one of them and how it can be replaced.

componentDidMount( )

This method is usually called when the component has finished rendering for the first time. It is only called once throughout the lifecycle once after the component has finished mounting.

With Hooks:

function MyExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, []); // Pass an empty array to run only callback on mount only.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidUpdate( )

This method is called multiple times which the app lifecycle. It is invoked immediately after updating occurs. This method is not called for the initial render.

There are two ways to handle,

1. Call hooks on every render As you can see if the below example the second argument in the hooks is blank meaning it will render every single time.

function MyExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }); // No second argument, so run after every render.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. Call hooks when specific property (dependencies) are changed With this implementation, we need to pass the second argument to useEffect and it will be automatically triggered whenever that dependency is changed.

With Hooks:

function MyExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ComponentWillUnmount( )

As the name implies this method will be called when the component is unmounted and it will be called only once in the component’s lifecycle.

*With Hooks: *Return a callback in useEffect's callback argument and it will be called before unmounting.

function MyExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // It will be called before unmounting.
    return () => {
      console.log('componentWillUnmount!');
    };
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

shouldComponentUpdate( )

By default this lifecycle method is called every time the component is going to render where you can return true/false whenever you have to render the component or avoid rendering.

But since Hooks can be only used in functional component, and functional component internally handles the shouldComponentUpdate( ) method for use. You can already achieve this on the component level using React.PureComponent or React.memo. For preventing rerendering of the child components.

*With Hooks: *By default, it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.

import React from 'react'

function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}

const Weather = ({weather}) => {
    return (<div>
             <p>{weather.city}</p>
             <p>{weather.temperature}</p>
             {console.log('Render')}
            </div>
    )
}

export default React.memo(Weather, areEqual)

getDerivedStateFromProps( )

getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

with Hooks:

function ScrollView({row}) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  const [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row changed since last render. Update isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

Example reference — https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops

No Lifecycle method replacement

Below are some of the methods that do not have any lifecycle method replacement for hooks according to the react documentation:

1. componentDidCatch ( )

2. getSnapshotBeforeUpdate( )

3. getDerivedStateFromError ( )

Here is a quick preview of all methods together

Thanks for reading this article. I hope you are all geared up to start replacing the classical class-based components into hooks based implementation.

Happy Learning! 💻 😄

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: **AI in Plain English, [UX in Plain English](https://medium.com/ux-in-plain-english), [Python in Plain English](https://medium.com/python-in-plain-english) **— thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at **submissions@plainenglish.io **with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.

Image Credits — https://www.freepik.com/

Every year, there are a ton of different updates on the libraries, frameworks, and technical concepts that we use in our projects. Our goal as a good dev is to make the most of the new features to make our life easy.

Here are some of the small tips which I found useful while working with JavaScript and React, I hope you get to learn something new from this and can implement some of the tips while working with React/JavaScript.

1. React Router JSX API

I’m pretty sure everyone out there must be using React Router to maintain different routes within the application. But wait, did you know how to pass props to the route component?

Take a look at the below code snippet, instead of passing the component in the route you can pass the entire component with props while defining the route.

Read more:

2. Lazy Load Images Using Different Libraries

Did you know that with Chrome’s 76 version, it is now possible to lazy load the images without including any third-party libraries? Simply add the loading attribute to lazy-load resources.

Take a look at the below snippet:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Read more: Native lazy-loading for the web This post covers the loading attribute and how it can be used to control the loading of images and iframes.web.dev

3. Convert Number to String

Wondering which is the faster and easier way to convert a number to a string?

Simply add a blank string

This hack will automatically convert any number type into a string.

4. Fill Array

While defining an array, if you want to fill it with some data then it’s pretty easy.

Just define the size of the array along with the property that you want to fill in. This is a simple trick that comes in handy when you want to define a non-empty array.

Declaring array with values

5. Proper Data Structure for Fast Access to Data

Did you know that storing your data in an array of an object is much slower when compared to using object keys (usually ID) as the key in the data structure?

It does not require any iteration, you will be able to fetch any record of your choice.

6. Optional Chaining

Optional chaining in JavaScript really makes the developer’s job easy. This operator allows you to traverse through a nested object to get the value of variables without worrying if any of those will be undefined.

Let’s consider an example to get more of an idea about this:

const person = {  
  name: 'John Doe',  
  device: {  
    name: 'iPhone 11 Pro'  
  }  
};

Consider we have an object called person, now if I want to access the device name, the simple syntax would be something like:

const deviceName = person.device.name;

If device is undefined or null in person, the JavaScript interpreter will throw an error. With the optional chaining operator, you can write:

const deviceName = person?.device?.name;

If deviceName is undefined, the deviceName will be null. Thus, by using optional chaining if the property in the object isn’t present, you don’t have to handle it explicitly. Optional chaining is here to rescue you.

7. Use of SuspenseList

React 16.6 added <Suspense>, a component that lets you “wait” for some code to load and declaratively specify a loading state (like a spinner) while waiting.

Here’s a quick glimpse of what the code looks like:

SuspenseList takes two props:

• **revealOrder** (forward, backward, together) defines the order in which the SuspenseList children should be revealed.

• together reveals all of them when they’re ready, instead of one-by-one.

• **tail** (collapsed, hidden) dictates how unloaded items in a SuspenseList are shown.

• By default, SuspenseList will show all fallbacks on the list.

• collapsed shows only the next fallback on the list.

• hidden doesn’t show any unloaded items.

In short, SuspenseList can be used to load items, one at a time, in a defined order, or all together — for better user experience.

We can wrap multiple <Suspense/> inside the <SuspenseList/> Tag.

Example:

Lazy Load

Example repo link: Harshmakadia/react-suspenseList Demo example for suspense list ⚠️ SuspenseList is experimental feature that are not yet available in a stable release…github.com

Note: This is experimental features that are not yet available in a stable release.

8. Add Dynamic Object Properties

While defining an object, there might be a situation where you need to define the object properties dynamically. Let’s look at the example below.

9. Switching to CRA 2.0 From CRA 1.0

Wondering why?

10. Reducing the Length of an Array

Most of you might know this simple trick to reduce the array length. All you need to do is assign it a number to a specific number.

11. styled-components

Styled-components effectively belong to the CSS-in-JS libraries that abstract the CSS to the component level using only JavaScript to describe styles.

They can be created via the ES6 template literal notation using back-ticks like so:

12. Cache Busting a React App

Have you ever come across a scenario where the new build is not updated on the single-page refresh or requires clear caching to reflect the new changes?

This amazing blog explains how to handle versioning in React. Cache Busting a React App TL;DR - SemVer your app and generate a meta.json file on each build that won't be cached by the browser. Invalidate…dev.to

Below are some tips to consider, they have nothing to do with the logic but they help make your job easy.

13. Create Presentations With React

React MDX-based presentation decks.

Reveal.js is another library that can be used to develop catchy presentations. It’s an HTML presentation framework.

14. Documentation With Docz

Docz enables you to quickly create live-reloading, SEO-friendly, production-ready documentation sites with MDX and customize the look, feel, and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing. Docz It has never been so easy to document your thingswww.docz.site

15. Free Images and Illustrations

A collection of links for free stock photography, video, and illustration websites. neutraltone/awesome-stock-resources A curated list of awesome stock photography, video and illustration websites. I try my best to maintain this repository…github.com

Thanks for reading. These were some of the tips and tricks that I use in my day-to-day tasks.

Happy learning.

JS CONSOLE

Printing messages in the browser console have definitely come to rescue to all the developers out there. console.log( ) messages are like medicines for most of your diseases while debugging some wired problems in your code.

Most of the devs out there are like — Let’s print the message in the browser to know more about this issue. I’m sure that I’m not the only one doing this. 🤪

Debugging is like being the detective in a crime movie where you’re also the murderer — Filipe Fortes 🐛

Apart from the most commonly used console.log( ) message to print the message in the browser there are plenty of different ways to make your debugging process a lot easier. Let’s take a look at them one by one with examples.

console.log( ) | info( ) | debug( ) | warn( ) | error( )

These will directly print the raw string with appropriate color based on the type of event that is provided to them.

console log/info/debug/warn/error

Use placeholders

There are different placeholders that can be used as listed below %o — which takes an object, %s — which takes a string, and %d — which is for a decimal or integer

placeholders

Add CSS to console messages

Do all of your console messages look the same? well, it won’t be the same from now on, make your logs look more catchy for what matters the most to you.

Messages with colors

What to color only a specific word from the log message? Here you go 😄

highlighting specific word

console.dir( )

Prints a JSON representation of the specified object.

HTML elements in console

Get the HTML elements in the console just like inspecting elements

HTML Elements

console.table ( )

Want to view JSON in a proper and easily understandable way?

Better visualization of an array of objects huh!

console.group( ) & console.groupEnd( )

It is quite possible to group the messages with the console

Grouping messages

console.count( )

This function logs the number of times that this particular call to count() has been called. This function takes an optional argument label.

If label is supplied, this function logs the number of times count() has been called with that particular label.

If label is omitted, the function logs the number of times count() has been called at this particular line.

counter

console.assert( )

This comes quite handy when you only want to print some selected logs i.e. it will only print the false argument. It does nothing at all if the first argument is true.

Assertion

console.trace( )

This method displays a trace that shows how the code ended up at a certain point.

Trace

console.time( )

A dedicated function for tracking the time taken for actions, console.time() is a better way to track the microtime taken for JavaScript executions.

console.memory( )

Wondering how our JavaScript applications are using browser memory?

Memory

console.clear( )

This one is the last but not the least 😁, To clear all the above console messages which you’ve learned, It’s time to destroy them with clear() command

Here is the gist for all above snippets Link — https://gist.github.com/Harshmakadia/fc25e56cb8f49145f4c9b3528f04215f

If you enjoyed reading this, you may also enjoy some of my other pieces:

• 🏆 10 Tips and Tricks to Boost Your React App’s Performance in 2020

• 🚀 Replacing Lifecycle methods with React Hooks

• 🙌🏻 Tips to Level Up Your JavaScript and React Skills

Happy Learning! 💻 😀

React 16.6 added a <Suspense> component that lets you “wait” for some code to load and declaratively specify a loading state (like a spinner) while waiting.

Here’s a quick glimpse of how the code looks:

React Suspense

Suspense for Data Fetching is a new feature starting from React 16.6 that lets you use <Suspense> to explicitly “wait” for, well, anything. It can wait for images, scripts, or other asynchronous work along with Data Fetching.

SuspenseList

SuspenseList helps coordinate many components that can be suspended, by orchestrating the order in which these components are revealed to the user.

SuspenseList takes two props:

• revealOrder (forwards, backwards, together) defines the order in which the SuspenseList children should be revealed.

• together reveals all of them when they’re ready instead of one by one.

• tail (collapsed, hidden) dictates how unloaded items in a SuspenseList are shown.

• By default, SuspenseList will show all fallbacks on the list.

• collapsed shows only the next fallback on the list.

• hidden doesn’t show any unloaded items.

In short, SuspenseList can be used to load items, on at a time, in a defined order, or all together — for better user experience.

We can wrap multiple <Suspense/> inside <SuspenseList/> Tag.

Let’s Deep dive into the Demo example:

SuspenseList Example

In the above example, there is a div that displays a loader( ⌛️ ) until the apple ( 🍎 )emoji is loaded.

I’ve added a random setTimeout ( 🕰 ) to make the apple load at different time intervals. Thus the above example shows how we can use different props of SuspenseList to load items inside it according to our requirements.

⚠️ SuspenseList is experimental feature that are not yet available in a stable release. Don’t rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React.

Link to Sandbox

🔥Live Demo: React App Edit descriptionn3818.csb.app

🚀 Github Code: Harshmakadia/react-suspenseList Demo example for suspense list ⚠️ SuspenseList is experimental feature that are not yet available in a stable release…github.com

Link 🔗 to Suspense Documentation —

Suspense for Data Fetching (Experimental) - React Caution: This page describes experimental features that are not yet available in a stable release. Don't rely on…reactjs.org

Happy Learning! 😄 💻

Learn More

How to Share React UI Components between Projects and Apps A simple guide to help you easily share and reuse React components across apps, to build faster and better.blog.bitsrc.io 9 React Libraries and Tools to Master your Component Workflow 9 React UI component libraries and tools to speed your workflow.blog.bitsrc.io 5 Ways to Style React Components in 2019 Making sense of styling React components in 2019 in a short yet detailed reviewblog.bitsrc.io

This article will help you take the baby steps in using React Hooks, it will explain all the basic approach which you can take to make the most out of this beautiful feature.

React Hooks [ Icon Credit — wanicon, freepik ]

Let’s start with Quick Introduction to React Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work in classes — they let you use React without classes.

useState 😄

useState is a Hook, We call it inside a function component when we want to add some local state to it. The good thing about this is that the state will be preserved during re-rendering.

useState returns a pair: the current state value and a function that lets you update your component. Calling a function will work similarly to this.setState where it will update the values of the state, except it will not merge old and new state.

useEffect 😄

The Effect Hook, useEffect adds the ability to perform side effects from a function component.

The purpose of useEffect is similar to the purpose of Lifecycle methods in the class component like componentDidMount , componentDidUpdate and componentWillUnMount

You can also decide when to re-render. Consider below the example where we have passed a count array after the useEffect.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

Let’s consider if the count value is 60 and if the component re-renders with the count value being unchanged i.e. 60, React will compare the previous render value and decide whether to call effect or not. If values are different then only the effect is called. Now that’s a way to increase performance and avoid unnecessary calls. 💯 🚀

If there are multiple items in the array, React will re-run the effect even if just one of them is different.

Converting Class Component into a Functional Component with Hooks ⚖️

Let’s look at the example of how we can get the same behavior as a class component in a function component using Hooks.

Example: Consider an example where you need to make API calls and fetch the data and populate in our component and clicking on the load more button would fetch more data from the server.

Until the Release of React 16.8.0(Hooks), it wasn't possible to achieve these using functional components as lifecycle methods aren’t accessible in the functional component and it wasn’t possible to manage the state inside a functional component.

For making API calls we will use Github APIs https://developer.github.com/v3/search/#search-commits

Here is what a typical React code looks like for both ordinary class component and functional component using Hooks.

API call code [ Icon Credit — Roundicons ]

Whenever API calls are involved we need multiple state values —

• Holding that data that is to be rendered

• Page count to make API call

• Loading state (show loading screen/component until the data is received from server)

• Error state (show error message when something goes wrong while fetching data)

Thus above image with Class component and the functional component does the same thing of loading the commits from the Github. Thus this simple example will help you understand how easy it is to start using hook into your application. With hooks, you can use write code neatly and sort.

API Calls with React Hooks

Code Snippet — Class Component API calling Code

— Hooks API calling Code

Links to Live Demo Class Component API calls - CodeSandbox CodeSandbox is an online editor tailored for web applications.codesandbox.io

https://codesandbox.io/s/functional-component-api-calls-qgho3

Here are the rules you should keep in mind while working with React Hooks

1. Don’t try to convert the old code written in class components into Hooks. However, it is recommended you can try using Hooks in the new implementation

2. useState and useEffect are the two new concepts which you should know to master Hooks

3. Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

4. Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions.

Thus this is how React Hooks can be useful in making API calls, sometimes we have to convert a functional component into a class component only because of not being able to manage the state inside the functional component.

Reference

• https://reactjs.org/

Happy Learning 💻 😄

THE PLATFORM FOR COMPONENT DRIVEN DEVELOPMENT

If building with React, try **Bit** — the platform for modern components.

It makes it easy & simple to build modular components, reuse them with your team and between applications, collaborate on updates, and stay in sync.

Bit helps teams make sure they can reuse components together, share them between projects, and always keep everything consistent for users. If your team is seeking a way to share components or working on a great UI library, you should definitely check out Bit — and try it for free. teambit/bit Documentation Tutorials Quick start guide Workflows bit.dev components cloud Video demo Bit is an open-source…*github.com

Related Stories

5 Tools for Faster Development in React 5 tools to speed the development of your React application, focusing on components.blog.bitsrc.io 11 React UI Component Playgrounds for 2019 Useful online playgrounds and editors for your UI componentsblog.bitsrc.io How to Easily Share and Consume React Components Using Bit Learn how to easily create, share and consume react components with the awesome power of Bitblog.bitsrc.io

RPA evolved from three key technologies: screen scraping, workflow automation, and artificial intelligence. Fintech Startups are disrupting the Banking Industry around the World - Data Driven Investor Traditional brick & mortar banks have never really recovered from the major set back they received after the financial…www.datadriveninvestor.com

There are different tools available to perform automation like UiPath, Automation Anywhere, Blue Prism, WorkFusion and lot more.

Welcome to the world of automation

Lead scoring is a methodology used to rank prospects against a scale that represents the perceived value each lead represents to the organization.

Lead scoring helps the marketing team to prioritize the follow-up activities with the prospects. Here is a simple case study of how I automated lead scoring based on different types of factor to find out whether the lead is good enough to be approached using UiPath.

Goal:

RPA performed to get all the details of the user who had downloaded content from the website Or filled up contact-us form. Automation performed to get details about the lead current position, year of experience company strength, revenue, location, etc to check if it is a hot lead.

Below diagram gives a quick overview of different steps involved in the automation in order to process the inbound lead.

RPA workflow to process leads

Following steps were performed using robotics process automation

1. When the user downloads some content from the website like e-book/case studies or fills up contact us form an email is received to the company with the basics details of the user like name, email address, designation.

Details that are received in the email received

1. Lead scoring is nothing but giving a score to the user who downloaded the content from the website based on different factors like designation, company name, location, year of existence, company revenue, etc.

2. A sheet with all the type of scoring details is giving as an input to find out the actual score.

Config sheet for calculating the lead score

1. RPA robot reads email, parse all the required details

2. Tries to find the LinkedIn profile of the user from the email address provided at the time of download.

3. Get all the important details from the LinkedIn profile like education background, current job position, years of experience, location, company name

4. Find the details about the company using LinkedIn to find out the employee strength, what is company expertise in doing

5. Finds the details about the Twitter profile to check if twitter handle is active, gets last tweet time, followers and following of the handle

6. Try to find out company revenue making use of third party website and gather necessary details

7. Gather all these details in the CSV file to better understand about the lead

8. Send emails back to the marketing team to take better decision on follow up emails etc.

The email send back after automation performed has following fields

Thus this is how RPA saved a lot of human time/effort that was required to process all the leads manually and take action. Now with the automation marketing team can spend their time in other productive tasks. This is just a small use-case of how things can be automated, However, RPA can be used in lot more complex scenarios too.

There is no doubt on this, Robotics Process Automation will be a blessing for all the businesses in the coming year saving a lot of time and human effort.

Welcome to the world of automation

Happy Learning 💻 😄

React has become a fuzzword in front end development over the past few years. React is getting stronger and stronger with the new updates rolling out. This article will help you learn about React Context, which is a pure blessing for developers struggling with Data management between multiple components.

Wait what does REDUX do?

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.

In short, Redux helps to maintain a global state which can be accessed throughout the application.

Here is how typical redux works:

Redux Workflow (Image credits — The New Boston)

Whoa whoa, that escalated quickly. What just happened? There are a lot of concepts to learn about in redux like Store, Action, and Reducers. But there is no need to learn all these things. You can do similar things with React Context. Wondering how?

Introducing React Context

What is context?

Context provides an awesome way to pass data through the component tree without having to pass props down manually at every level in your application.

Until React 15, you could only make use of props to pass the values from the parent to the child component. But there is a lot beyond that: what do you do when you need to pass data between pages (different routes) within the application?

You have to either make use of redux or local storage, using cookies within the browser. Context solves all those problems. Context provides a way to share values like these between the components without having to explicitly pass a prop through every level of the tree within the application.

Main blocks of React Context

Context has 3 main blocks:

1. A context Object

2. A context Provider

3. A context Consumer

Let’s try to solve a real-world scenario with context. Assume we want to create an application where products can be added to a cart. There are two pages (routes): one which displays the list of products, and the other which displays items in your cart.

If you were using only react without redux, it would become difficult to manage the state. We will look into how we can use context to manage the global state.

**Live Demo**

Products and Cart Page (Demo inspiration)

The entire source code can be found here.

As you can see in the about example, there are two different components and the data has to be shared among both the components — a kind of global data.

Context Object

You can define the Context object in a separate file or right next to a component in a component file if you wish. Having multiple contexts within the component is also possible. Thus you can store any data you want in the context object which will be accessed globally in your application.

I’ve added Products and cart in the context object. Now it’s time to supply this context to all the components in the application which need to access this data.

Context Provider

The provider provides the values in all the components within the application that needs to access this context object.

As shown above, this is how the context is passed. However, you can render any components within the <ShopContext.Provider></ShopContext.Provider>

Whatever child component is wrapped inside the ShopContext will be able to access the context object.

Now that we have supplied the values, it’s time to access them with the consumer.

Context Consumer

There are two ways in which the data can be accessed:

1. Using Context.Consumer

2. Using static contextType

Using Context.Consumer:

In the above example, the context is nothing but the values of the context object. All the values which we defined during creating the context object are easily accessed here. Yeah, it’s that easy!

Using static contextType

This is a simple way of how context can be accessed with contextType. Using this.context you can access the entire context object similar to that of context Consumer.

So far what we have seen in the example is about passing the data and accessing it. Let’s look into how to update the context Object.

Updating Context Object

Updating context state is pretty easy, like how we update the values in the state normally. We have to pass a method from the component which will be used to update the values in that state of context. Once the values are updated via setState, it will automatically render the new values in all the components where the context object is being consumed. No rocket science 🚀 here!

The above two methods are how we usually pass a function from the child component to parent component while working with React.

In the above code snippet, addProductToCart and removeProductFromCart are the two methods that will be used to add/update values inside the context.

You are all set to use React Context Now!

But will Context replace Redux 🤔?

• Context is a clear win when you need to update the values rarely, like storing user objects upon login, language preference, theme colors and so on (as these do not trigger the updates more frequently)

• Context seems to be simple compared to redux, but you shouldn’t use it where the values update more frequently. It is not optimized for that.

• Adding Redux to your project brings more dependency packages with them, increasing the bundle size, while context can be used out of the box with React.

Thus from the above points, Context can definitely be used for low-frequency updates but is not recommended for general state management.

I hope in the coming updates that context becomes more powerful and is ready to fully use for state management 💪 🏋.

Happy Learning! 💻 😄

In this article, you will learn how to deploy applications on GCP. We will deploy a create-react-app.

Link to the Repo — https://github.com/Harshmakadia/react-docker

Before we get started with the actual steps of deploying the React App using GCP and Docker. First, let’s understand what docker actual is?

Docker is a tool which is designed to make the creating, deploying and running of applications easier with the help of containers. Containers are something which allows the developer to bundle the application with all the necessary ingredients like different libraries, dependencies and ship is as only a single package.

We will go step by step

1. Creating React Application

Create react app is a lot easier using the create-react-app (CRA)

We will use create-react-app package to install and configure simple react application from NPM, Open your terminal and install react app.

For more info on creating a react app facebook/create-react-app Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…github.com

once you run the application using command $ npm start After that, it’s time to create a build the app, run $ npm run build

2. Creating minimal Dockerfile

creating a docker file is a cup of your tea. The is no rocket science in creating a docker file.

Just Create a new file with name Dockerfile Now once the file is created we will add some command to that which will help us to create, run, deploy the application.

Here the content of Dockerfile for react app. Note I’m using Nginx to as a server.

Once the docker file is created. I’m creating a new folder named deployment within the app directory which has a nginx.conf file

The content of nginx file, note that this is default configuration you may not need to alter this file unless you have some special requirements.

3. Installing Docker on your machine

Head to this link below and download it for your respective operating system Docker Desktop Docker Desktop Enterprise is a new commercial desktop offering that gives you everything you need for enterprise-ready…www.docker.com

Once it is installed run open your terminal and run below command to check it is installed successfully

docker — — version

Docker version

Now that we have the docker setup on our machine it’s time to create the first image using the following command

docker build -t first-docker .

more info about different command can be found here.

Once you run this command it will execute all the command listed down in the Dockerfile.

Creating Image

we have successfully created the image. Let’s proceed to next step

4. Make use of gcloud SDK

Download SDK from the below link and setup on your machine Cloud SDK | Cloud SDK | Google Cloud A collection of command line tools for the Google Cloud Platform. Includes gcloud, bq, gsutil and other important…cloud.google.com

Now that we have the gcloud SDK setup on our machine

- — Create a new project in GCP

Next step is to create a new project in the GCP where we will be pushing our docker images to the containers.

Configure Docker to use gcloud as a credential helper or are using another authentication method. To use gcloud as the credential helper, run the command:

• gcloud auth configure-docker

It’s time to push the image to the registry

1. Tag the local image with the registry name by using the command:

2. docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]

3. where [SOURCE_IMAGE] is the local image name.

4. This command names the image with the registry name and applies the tag latest. If you want to apply a different tag, then use the command:

5. docker tag [SOURCE_IMAGE] [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG]

Push the tagged image to Container Registry

Push the tagged image to Container Registry by using the command:

docker push [HOSTNAME]/[PROJECT-ID]/[IMAGE]

This command pushes the image that has the tag latest. If you want to push an image that has a different tag, use the command:

docker push [HOSTNAME]/[PROJECT-ID]/[IMAGE]:[TAG]

When you push an image to a registry with a new hostname, Container Registry creates a storage bucket in the specifiedmulti-regional location. After pushing your image, you can:

• Go to the GCP Console to view the registry and image.

• Run gcloud container images list-tags to view the image's tag(s) and automatically-generated digest:

• gcloud container images list-tags [HOSTNAME]/[PROJECT-ID]/[IMAGE]

• The command’s output is similar to the following:

• DIGEST TAGS TIMESTAMP 44bde... test 2017-..-..

Where

• [HOSTNAME] is listed under Location in the console. It's one of four options: gcr.io, us.gcr.io, eu.gcr.io, or asia.gcr.io.

• [PROJECT-ID] is your Google Cloud Platform Console project ID. See Domain-scoped projects for how to work with projects IDs that include a domain.

• [IMAGE] is the image's name in Container Registry.

• [TAG] is the tag applied to the image. In a registry, tags are unique to an image.

Pushing Image

Navigate the GCP console and search of Container Registry, you will be able to see the image which we push.

It’s time to create cluster now inside *Kubernetes Engine* in GCP

Creating cluster

Create deployment under workloads

Select the image which you want to deploy and finally click on Expose to expose the deployment.

Set port to 80 in Target Port since we had EXPOSED our application to 80 in the Dockerfile

Once you have exposed the port you will get IP Adress where your react application will be running live.

Deployed Application

And that it’s you are all set with docker. Whenever you want to push new image to the container first build the image with above-specified commands and then push the image to container registry and finally make that image live by going to rolling update option.

Please note down your questions in the comment section below if you have any doubts & I’ll be happy to address them.

That’s the end 🔚 I hope you have learned something new. Happy Learning! 💻 😃

Have you heard about React Hooks?

Well, React Hooks, a feature which is available in React v16.7.0-alpha, is something awesome you should know about.

Here is a teaser for React Hooks.

React Hooks

In the above code, useState is the first Hook.

Now let’s jump into the problem that Reacts Hooks will be solving.

After all, every new feature is introduced to solve a problem. Here is the list of things that the official react website has to say about the problems that will be solved.

It’s hard to reuse stateful logic between components

Reusable behavior cannot be attached to the React component. A good example of it could be connecting to the store. If you’ve some experience in React, you may be knowing some of the patterns like render props and higher-order components that can be handy while solving such problems. Using such patterns, components have to be restructured in order to use them making code harder to follow and maintain.

With the introduction of Hooks, stateful logic can be extracted from the component. This allows it to be tested independently, and it can be reused.

With Hooks, you can reuse stateful logic without actually changing your component hierarchy.

Complex components become hard to understand

There are times when a component grows from having a small state to an unmanageable state of stateful logic.

Each lifecycle method sometimes contains a mix of unrelated logic. For example, a component might perform some data fetching via API calls in componentDidMount and componentDidUpdate. However, the same componentDidMount method might also contain some of the unrelated logic.

This logic sets up event listeners with cleanup performed in componentWillUnmount. Related code that changes together gets split. The unrelated code which is combined into a single method brings in bugs and inconsistencies.

We often come across a situation where we are not able to split a large component into smaller ones because of the stateful values. Also, it becomes difficult to test them.

To solve this problem, Hooks let you split one component into smaller functions based on what pieces are related. A good example of it could be setting up a subscription or fetching data, irrespective of code split based on the lifecycle method.

With Hooks, more of React’s features can be used without the need for classes.

But how do Hooks really work?

Here is the code snippet we saw above:

Link to CodeSandbox

The use of useState is the Hook that we are talking about.

We call it inside a function component to add a local state to it. React will preserve this state between all the re-rendering happening. useState returns a pair which has the current state value and a function that lets you update the value.

You can call this function from an event handler or from somewhere else. It’s similar to this.setState in a React class, but it doesn’t merge the old and new state altogether.

There is only one argument to useState that is the initial state. In this example given above, the initial state is 0 because our counter starts from zero. Note that unlike this.state, the state here doesn’t have to necessarily be an object — however it can be an object if you want.

Declaring multiple state variables

The array destructuring syntax gives different names to the state variables which we declared by calling useState. These names don't belong to part of the useState API. Instead, React assumes that if you call a lot many times, you are doing it in the same order during the time of every render.

*Note: Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside React classes — they let you use React without classes.*

Effect Hook

Working with React you might have already worked on data fetching, subscriptions, or manually changing the DOM from React components. We call these operations as “side effects” (or “effects” in short).

The Effect Hook, useEffect, adds the ability to perform the side effects from a function component. It has the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API.

For example, the below component sets the document title after React updates the DOM:

Link to CodeSandbox

When you make a call to useEffect, you’re telling React to run your “effect” function after flushing changes to the DOM. Effects are declared inside the component and thus have access to its props and state. By default, React runs the effects after every render that happens— including the first render.

Rules of Hooks

Hooks Rules

Hooks are JavaScript functions, but they have two additional rules:

• Only call Hooks at the top level. Don’t try to call Hooks inside loops, conditions, or nested functions.

• Only call Hooks from React function components. Don’t try to call Hooks from regular JavaScript functions.

Well, this is a quick glance into React Hooks. For more detailed description follow this link below: Hooks at a Glance - React A JavaScript library for building user interfacesreactjs.org

Happy Learning! 💻 😄

Azure Logic Apps

Azure Logic Apps is a cloud service that helps you automate and orchestrate tasks, business processes, and workflows when you need to integrate apps, systems, data, and services across enterprises or organizations. Logic Apps simplifies how you design and build scalable solutions for app integration, data/system integration, enterprise application integration, and business-to-business (B2B) communication, whether in the cloud, on-premises, or both.

Here are some of the examples where you could use Azure logics apps

1. Send an email notification when something happens in your system, app or services

2. Move files to Azure storage from SFTP or FTP servers

3. Monitor the tweets on Twitter, perform sentiment analysis on them to create alert for the tweet which needs to be reviewed

4. Change the logic in your app just with some toggles of the switch, no deployment of your entire codebase needed

   These are some of the benefits too, you will have more idea about it as you continue reading about it below.

Have a look at a quick video below

Enterprise integration solutions can be built with Azure logic Apps with the help of readily available connectors. Connectors play an integral part when you create automated workflows with Azure Logic Apps. By using connectors in your logic apps, you expand the capabilities for your on-premises and cloud apps to perform tasks with the data that you create and already have.

Out of the box integration with Connectors

Components of a Connector

Each connector offers a set of operations classified as ‘Actions’ and ‘Triggers’. Once you connect to the underlying service, these operations can be easily leveraged within your apps and workflows.

Actions

Actions are changes directed by a user. For example, you would use an action to look up, write, update, or delete data in a SQL database. All actions directly map to operations defined in the Swagger.

Triggers

Several connectors provide triggers that can notify your app when specific events occur. For example, the FTP connector has the OnUpdatedFile trigger. You can build either a Logic App or Flow that listens to this trigger and performs an action whenever the trigger fires

There are two types of trigger.

Polling Triggers: These triggers call your service at a specified frequency to check for new data. When new data is available, it causes a new run of your workflow instance with the data as input.

Push Triggers: These triggers listen for data on an endpoint, that is, they wait for an event to occur. The occurrence of this event causes a new run of your workflow instance.

Of course, it does come with a big box of benefits or rather why you should consider using Azure Logic Apps.

1. Create your own business process and flows visually A lot of business-oriented processes and system integration are out of box provided by the logic apps. They are executed in logical order starting from the trigger. The connector comes into handy to make all your task easy like sending email notification etc. The time to go live is really quick.

2. Wide Range of integration for the web, mobile apps, API apps and more Azure logic apps come as a single integrated service which is compatible with websites, mobile apps, APIs and business processes. Rest APIs and JSON help to easily connect over HTTP.

3. No scalability issues As everything is taken care of by azure you can meet the increasing demands from the client and customers. Delivering apps at a massive scale is just a cup of your tea.

4. No cost in setup Since the entire things are managed by Microsoft Azure logic apps there is no setup cost involved. You only pay when the logic is executed. It’s that simple.

5. Bonus — Increase in performance Creating logic is pretty simple since built-in-modules is there to rescue. It indirectly leads to faster delivery of projects to end user.

6. More insights through monitoring With the help of Azure Logic Apps, organizations can gain insights into the status of their applications. Logic Apps provides strong diagnostics and auditing with the help of Azure OMS (Operations Management Suite). Monitoring and tracking of the creation of custom queries on the data can be easily done. custom PowerBI report generation is also supported here.

7. Simplified Workflow definition

   parameters, triggers, actions, outputs are the main parts of any logic apps.

Parameters are things that you want to reuse across workflows. Re-using values or even complex objects throughout the definition makes it easier to comprehend. Separate out configuration from the definition itself makes sharing easy as well as across different environments.

Triggers are what start the Logic App. Triggers can be evaluated at recurring intervals or have its state maintained across executions.

Actions are the things that happen in a Logic App. Actions can depend on other actions. The dependencies are what will determine the order of the Actions executing. The state is also maintained across executions.

Outputs are what gets sent from calls into the workflow.

Sample workflow created using Azure Logic Apps

I hope the basics of azure logic are clear and you are now ready to roll with the actual implementation. 😄

For more detailed understanding about azure logic apps here is the link Azure Logic Apps Documentation - Tutorials, API Reference Azure Logic Apps simplifies how you build automated scalable workflows that integrate apps and data across cloud…docs.microsoft.com

Happy Learning! 💻

Below are some of the good features you should consider when migrating your existing app to React 16 from React 15.

Time to say Goodbye React15 👋

Error Handling

Error Handling be like :)

React 16 introduces the new concept of an error boundary.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree. They log those errors, and display a fallback UI instead of the crashed component tree. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info):

Then you can use it as a regular component.

<ErrorBoundary>  
   <MyWidget />
</ErrorBoundary>

The componentDidCatch() method works like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once. Then you’ll use it throughout your application.

Note that error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.

Check out the live demo:

For more information on error handling, head here.

New render return types: fragments and strings

Get rid of wrapping the component in a div while rendering.

You can now return an array of elements from a component’s render method. Like with other arrays, you’ll need to add a key to each element to avoid the key warning:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Starting with React 16.2.0, it has support for a special fragment syntax to JSX that doesn’t require keys.

Support for returning strings :

render() {
  return 'Look ma, no spans!';
}

Portals

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(child, container)

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

How to use it

When you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node:

render() {
  // React mounts a new div and renders the children into it
  return (
    <div>
      {this.props.children}
    </div>
  );
}

Sometimes it’s useful to insert a child into a different location in the DOM:

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.

Custom DOM Attribute

React15 used to ignore any unknown DOM attributes. It would just skip them since React didn’t recognize it.

// Your code:
<div mycustomattribute="something" />

Would render an empty div to the DOM with React 15:

// React 15 output:
<div />

In React16, the output will be the following (custom attributes will be shown and not be ignored at all):

// React 16 output:
<div mycustomattribute="something" />

Avoid Re-render with setting NULL in state

With React16 you can prevent state updates and re-renders right from setState(). You just need to have your function return null.

const MAX_PIZZAS = 20;

function addAnotherPizza(state, props) {
  // Stop updates and re-renders if I've had enough pizzas.
  if (state.pizza === MAX_PIZZAS) {
    return null;
  }

  // If not, keep the pizzas coming! :D
  return {
    pizza: state.pizza + 1,
  }
}

this.setState(addAnotherPizza);

Read more here.

Creating Refs

Creating refs with React16 is now much easier. Why you need to use refs:

• Managing focus, text selection, or media playback.

• Triggering imperative animations.

• Integrating with third-party DOM libraries.

Refs are created using React.createRef() and are attached to React elements via the refattribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Accessing Refs

When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.

const node = this.myRef.current;

The value of the ref differs depending on the type of the node:

• When the ref attribute is used on an HTML element, the ref created in the constructor with React.createRef() receives the underlying DOM element as its current property.

• When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current.

• You may not use the ref attribute on functional components because they don’t have instances.

Context API

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

Creates a { Provider, Consumer } pair. When React renders a context Consumer, it will read the current context value from the closest matching Provider above it in the tree.

The defaultValue argument is only used by a Consumer when it does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause Consumers to use defaultValue.

Provider

<Provider value={/* some value */}>

A React component that allows Consumers to subscribe to context changes.

Accepts a value prop to be passed to Consumers that are descendants of this Provider. One Provider can be connected to many Consumers. Providers can be nested to override values deeper within the tree.

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

A React component that subscribes to context changes.

Requires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().

static getDerivedStateFromProps()

getDerivedStateFromProps is invoked right before calling the render method. Both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

This method exists for rare use cases where the state depends on changes in props over time. For example, it might be handy for implementing a <Transition> component that compares its previous and next children to decide which of them to animate in and out.

Deriving state leads to verbose code and makes your components difficult to think about.

Make sure you’re familiar with simpler alternatives:

• If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use [componentDidUpdate](https://reactjs.org/docs/react-component.html#componentdidupdate) lifecycle instead.

• If you want to re-compute some data only when a prop changes, use a memoization helper instead.

• If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

This method doesn’t have access to the component instance. If you’d like, you can reuse some code between getDerivedStateFromProps() and the other class methods by extracting pure functions of the component props and state outside the class definition.

Note that this method is fired on every render, regardless of the cause. This is in contrast to UNSAFE_componentWillReceiveProps. It only fires when the parent causes a re-render and not as a result of a local setState.

We compare nextProps.someValue with this.props.someValue. If both are different then we perform some operation, setState

static getDerivedStateFromProps(nextProps, prevState){   if(nextProps.someValue!==prevState.someValue){     
   return { someState: nextProps.someValue};  
} else return null;}

It receives two params nextProps and prevState. As mentioned previously, you cannot access this inside this method. You’ll have to store the props in the state to compare the nextProps with previous props. In above code nextProps and prevState are compared. If both are different then an object will be returned to update the state. Otherwise null will be returned indicating state update not required. If state changes then componentDidUpdate is called where we can perform the desired operations as we did in componentWillReceiveProps.

Bonus: React Lifecycle events

Lifecycle credits — https://twitter.com/dceddia

Well these are some of the features that you should definitely try while working with React16!

Happy coding 💻 😀

Note: This is just an overview to have quick knowledge about machine learning and how it is helpful.

Machine learning is an application of artificial intelligence (AI) that provides systems the ability to automatically learn and improve from experience without being explicitly programmed. Machine learning focuses on the development of computer programs that can access data and use it learn for themselves.

Why Machine learning Matters?

Alpha Go

AlphaGo is a computer program that plays the board game Go. It was developed by Alphabet Inc.’s Google DeepMind in London.

AlphaGo defeated one of the best human players at Go — an extraordinary achievement in a game dominated by humans for two decades after machines first conquered chess.

Dota

Dota 2 is a multiplayer online battle arena (MOBA) video game developed and published by Valve Corporation

OpenAI reached yet another incredible milestone by defeating the world’s top professionals in 1v1 matches of the online multiplayer game Dota 2

Google Translate is a machine translation website from Google that can translate text between different languages. It can translate words, sentences, documents and web pages between any combination of more than 100 supported languages. It was launched on April 28, 2006, and has always been free to use.

Artificial intelligence will shape our future more powerfully than any other innovation this century.

Machine Learning Types

Supervised Learning

Let’s look at the two task of supervised Learning

1. Regression

2. Classification

SUPERVISED LEARNING = DATA SET CONTAINING TRAINING EXAMPLES WITH ASSOCIATED CORRECT LABELS

Supervised Learning is a function that maps an input to an output based on example input-output pairs. It infers a function from labeled training data consisting of a set of training examples.

For example, learning to classify handwritten digits.

• Train your data set to such extent that it becomes easy to find out the result of unknown inputs.

How supervised Learning Works?

let’s examine the problem of predicting annual income of person based on the number of years of higher education he/she has completed.

Inshort, Build a model that approximates the relationship f between the number of years of higher education X and corresponding annual incomeY

Solution

There are two ways you can find a solution

Engineering Solution This solution would go by simple formula

income = ($5,000 * years_of_education) + baseline_income

Learning Solution Get information about some basic parameters like Degree Type, Years of work experience, School tiers etc. This will helps use to find the income easily.

For example: “If they completed a Bachelor’s degree or higher, give the income estimate a 1.5x multiplier.”

Goal of supervised Learning

• Learns the relationship between income & education from scratch, by running labeled training data through a learning algorithm.

• This learned function can be used to estimate the income of people whose income Y is unknown, as long as we have years of education X as inputs.

• Inshort, we can apply our model to the unlabelled test data to estimate

  Predict Y as accurately as possible when given new examples where X is known and Y is unknown.

Regression — predicting continuous values

— Predicts a continuous target variable Y. — Estimate a value, such as housing prices or human lifespan, based on input data X. — Continuous means there aren’t gaps (discontinuities) in the value that Y can take on. Eg. A person’s weight and height are continuous values. — Discrete Variables means it can only take on a finite number of values Eg. Number of kids somebody has is a discrete variable.

Predicting income is a classic regression problem. Your input data X includes all relevant information about individuals in the data set that can be used to predict income, such as years of education, years of work experience, job title, or zip code.

— These attributes are called Features, which can be numerical(e.g. years of work experience) or categorical (e.g. job title or field of study).

You’ll want as many training observations as possible relating these features to the target output Y, so that your model can learn the relationship f between X and Y.

Linear regression(ordinary least squares)

We have our data set X, and corresponding target values Y. The goal of ordinary least squares (OLS) regression is to learn a linear model that we can use to predict a new y given a previously unseen x with as little error as possible. We want to guess how much income someone earns based on how many years of education they received.

β0 is the y-intercept and β1 is the slope of our line, i.e. how much income increases (or decreases) with one additional year of education.

Our goal is to learn the model parameters (in this case, β0 and β1) that minimize error in the model’s predictions.

To find the best parameters:

1. *Define a cost function, or loss function, that measures how inaccurate our model’s predictions are.
   1. Find the parameters that minimize loss, i.e. make our model as accurate as possible.*

Classification

• Classification predicts a discrete target label Y.

• Classification is the problem of assigning new observations to the class to which they most likely belong, based on a classification model built from labeled training data.

Logistic regression: 0 or 1?

Deals with binary type of classification

— example, when assigning handwritten digits a label between 0 and 9, or using facial recognition to detect which friends are in a Facebook picture.

SVM (Support vector Machines)

— The algorithm is geometrically motivated in nature, rather than being driven by probabilistic thinking. — SVMs use a separating line (or, in more than two dimensions, a multi-dimensional hyperplane) to split the space into a red zone and a blue zone

— The distance to the nearest point on either side of the line is called the margin, and SVM tries to maximize the margin. — Think about it like a safety space: the bigger that space, the less likely that noisy points get misclassified.

Unsupervised Learning

Unsupervised learning is a type of machine learning algorithm used to draw inferences from datasets consisting of input data without labeled responses. The most common unsupervised learning method is cluster analysis, which is used for exploratory data analysis to find hidden patterns or grouping in data.

Clustering

• Items inside a cluster should be very similar to each other, but very different from those outside.

• Does grouping of data without being told ahead of time

• Used for knowledge discovery rather than prediction

— clustering is useful whenever there is diverse and varied data Famous clustering Method k-means

Now you know about the basics types in Machine Learning let’s have quick look at the difference between supervised and unsupervised learning.

Main Difference

That’s it you are all good with the basics of Machine Learning.

Happy Learning! 😆 🖥

Application of chatbots rages wide from being your sales rep, booking a restaurant or your favourite movie running in theatre to answering customer queries. Chatbots can conduct conversations via auditory or textual methods. The good thing about them is they can function independently improving your business or get works done via integrations like facebook messenger, slack, skype and lot more.

Chatbots offer a customer a convenient way to get the information they need, help them in boosting the sales and due to there ease of use. Let’s look at some of the areas where chatbot has helped in growing the business in different sectors.

E-commerce

Chatbots are very useful in e-commerce helping brands to relate more quickly and directly with their customers on numerous messaging platforms.

• Chatbots can become your advisor in buying the product online for better customer satisfaction.

• Suggest products based on customer intents and browsing history.

• Share information about the new products and offers via a simple message which can be sent out using any messaging platform to stay connected with the customers.

Hospitality and Travel

Chatbots and service industries can go hand in hand to solve customer queries by saving time and providing a personalised experience to the customers.

• Helps staff to focus on the critical and rewarding task by answering the frequently asked questions by the customers.

• Chatbots can communicate in different languages and thus provide a personalized experience to the guests.

• Ordering food has become easier like never before selecting options from a wide list of menu and filing in the delivery address can be done just by making minimal clicks on your smartphones.

Call Centers

Recent studies show 52 Percent Of Consumers Prefer Text Conversations with Support Reps Over Their Current Support Method.

• Chatbots can be made run 24 X 7 to have seamless interaction with the customer and also answer queries about multiple customers, unlike the human agent.

• Gather information about the leads before it handovers to the human agent.

• Customers get an instant response for their queries rather than waiting in queue to talk to the human agent. Human interaction might take hours or even days to resolve queries which can be done in the fraction of seconds with chatbots.

Finance Assistant

Consumers will manage their 85% of the relationships with the enterprise without interacting with a human by 2020 according to this report by Gartner.

• Customers can manage multiple bank accounts and get there bank balance having the conversation with the finance bot anytime when needed.

• Eliminate use to third-party apps to make payment and other transactions instead why not just chat with the bot?

Healthcare

Grand View Research stipulates that the global chatbot market is estimated to touch at least $1.23 billion by 2025 which reflects a compounded annual growth rate (CAGR) of 24.3%.

• Patients can get quick and effective medical advice remotely with the need of booking an appointment.

• Medical chatbots can be programmed to handle the patient’s admission and discharge, order medical equipment for patients, renew prescriptions and schedule medical appointments.

• The patients can ask questions anytime and get an immediate response from the 24 x 7 running chatbots.

Wondering where can you get such chatbot which can help you drastically grow your business and boost sales?

Head to WotNot.io

WotNot is a bot making platform that easily integrates with your website and you can fully customize the bot as per your business needs.

Ready to use templates to get started

Key Advantages of using WotNot.io

1. FAST ONBOARDING Have the Chatbot available on your website just by entering your website URL and start reaping the benefits right away. No time is spent on training or teaching employees.

2. READY TO USE TEMPLATES It provides ready to use default templates to make your work easier and then you can customize it according to your need

3. SALES BOOSTER Capable of remembering customer preferences and uses order history to suggest products, learns from customer responses to the products advertised and cross-sells effectively.

4. LEAD GENERATION The chatbot can ask the necessary and related questions, persuade the user and generate a lead for you. The technology of the Chatbot ensures the flow is in the right direction to get higher conversion rates.

5. MULTI LINGUAL Chatbots can solve your customer care problems in multiple languages round the clock. This allows your business to scale up the operations to new markets while simultaneously personalising the experience for your customers.

6. 24/7 SUPPORT Think of it as an unremitting virtual robot committed to delivering a proactive conversational experience from the get go. Round the clock.

In conclusion there is no doubt that chatbots 🤖 are on the verge of conquering the world by proving an remarkable customer experience not matter which industry it is.

RPA evolved from three key technologies: screen scraping, workflow automation, and artificial intelligence.

Google Trends (Robotics Process Automation)

Benefits of using RPA —

• Allowing processes to be completed much more rapidly saving human efforts

• Creating cost savings for manual and repetitive tasks

• Enabling employees to be more productive

• Better customer service

• Reduce manual data edits, increasing the quality of data and reducing compliance risks

Applications of RPA —

1. Data migration and entry - There are many companies where critical functions are still performed by the legacy systems. Let’s say legacy billing systems need to perform some task that cannot be done using API’s, instead of employees manually migrating the data RPA can prove to prevent such manual labor and potential clerical errors.

2. Extracting data from scanned documents, PDFs, and other formats - Optical Character Recognition, Screen scraping technologies enables extraction of data from almost any format.

3. Customer service - By automating contact center tasks which also includes scanned documents, verifying information RPA can help companies to offer a good customer service.

4. Human Resources - RPA can also automate many HR tasks which include on-boarding and off-boarding of the employee, updating employee information and many more

5. Healthcare - RPA can handle patient records, customer support, claims, reporting, billing and lot more for providing the better experience to the patients

6. Financial Services - Foreign exchange payments, managing audit, processing claims, opening and closing of accounts are some of the use cases in this sector

7. Supply Chain Management - In this sector, RPA can help in automating orders, processing and payments, generating reports of different departments.

Tools that can be used for RPA —

Different Tools providing RPA solutions

Some of the Links to different tools — Note that the names are based on the alphabetic order.

AntWorks (www.ant.works)

Automation Anywhere (www.automationanywhere.com)

AutomationEdge (www.automationedge.com)

Blue Prism (www.blueprism.com)

Contextor (www.contextor.eu)

EdgeVerve Systems (www.edgeverve.com)

EnableSoft (www.enablesoft.com)

Epiance (www.epiplex500.com)

Jacada (www.jacada.com)

Jidoka (www.jidoka.io)

Kofax (www.kofax.com)

Kryon Systems (www.kryonsystems.com)

Nice (www.nice.com)

OpenConnect (www.openconnect.com)

Pegasystems (www.pega.com)

Redwood Software (www.redwood.com/robotics)

Softomotive (www.softomotive.com)

Syntel (www.syntelinc.com)

Thoughtonomy (www.thoughtonomy.com)

UiPath (www.uipath.com)

Verint (www.verint.com)

WorkFusion (www.workfusion.com)

In Summary, RPA cannot be ignored based on the number of advantages it provides and it’s application considered in many industries. RPA is the future of automating the repetitive tasks.

Make your work fun again!

When it comes to people working together to build great software, the right tools can make all the difference. *Alertly* provides you and your teammates with the ability to manage and work around JIRA alerts and complete tasks when due. Now, you can say goodbye to missing deadlines and dealing with tiny, annoying alerts as Alertly takes care of the whole task for you.

Here is a glimpse of the features which *Alertly* provides 😀

Reminders on Slack

Timely JIRA Reminders

Be punctual. Be productive

Defining new filters will give you the freedom to create your own JIRA reminders. Alerts can also be created by providing additional details.

Updates on Slack

Stay Updated

Send updates to every team member on slack so that your team members can move together towards achieving an objective.

Customizing Slack Templates

Custom Template

Your days of using the same message template for very single message are over. With Alertly, you have the power to define a message template.

Update JIRA status from Slack

Actionable Alerts

An actionable alert helps you solve JIRA issues right from your Slack account. It is powerful as it is effective.

Ready to use Templates

Marketplace Synchronization

Skip the stress of creating events from scratch with Alertly’s marketplace feature which allows you to add events from your Marketplace to your dashboard.

Easy Team Management

Easy Team Management

Alertly makes team management incredibly easy. Every team leader gets updates from members regarding team progress and development.

Here are some previews from alertly

Alertly + JIRA + Slack

Slack Post

The Power to do More… Right at Your Own Convenience ✌️

Know more about the features 🚀 — https://alertly.io/#features Alertly - Your Personalized Slack Bot for JIRA Alerts Your days of using the same message template for very single message are over. With Alertly, you have the power to…alertly.io