Mar 28, 2020

Textual description of firstImageUrl

ReactJS (HTTP/AJAX): Asynchronous Interaction between React application and Server (REST API with axions)

React application interaction with server to fetch data and submitting data to server is very common for any enterprise web application. Like any application react application requires HTTP Library to interact with server. We have HTTP library available some are promise based and some are callback based. Fetch and Axios are promised based HTTP library and Superagent is callback based HTTP library.

In this post I will use Axios for executing HTTP methods like GET and POST. In order to simply server side setup I have used Firebase Realtime Database. Firebase deals with JSON data and persist it in tree structure.

HTTP call in React component life cycle: componenetDidMount() is right place from where HTTP methods are executed with precaution do not update state as it will trigger re-rendering cycle and HTTP call be executed in infinite loop.

Prerequisite

1. Install and setup axios
2. Setup Firebase real time database & sample data setup

Install axios
$ npm install axios

Firebase setup: Create a sample project at Firebase(Spark mode is free). I have created project "react-devinline". Under database tab -> create Realtime Database "devinlineaction". Firebase generates URL https://devinlineaction.firebaseio.com/ which act as end point to access data from Firebase realtime database.

Under Rules tab update read and write access. It makes data access without auth and prevents error like "Failed to load resource: the server responded with a status of 401 (Unauthorized)"
{
  "rules": {
    ".read": true,
    ".write": true
  }
}. 

Import below JSON data in Firebase database devinlineaction
 {
  "orders": [
    {
      "orderNo": "3330047777379",
       "status": "Delivered",
      "customerInfo": {
        "customerId": "832edb65-6ea2-40e4-bb07-8c3a2bacc159",
        "primaryContact": {
          "name": {
            "firstName": "Nikhil",
            "lastName": "Ranjan"
          },
          "phone": {
            "completeNumber": "408-660-5027"
          },
          "email": {
            "emailAddress": "nikhilranjan@email.com"
          }
        },
        "address": {
          "addressLineOne": "655 S Fair Oaks Avenue",
          "addressType": "RESIDENTIAL",
          "city": "Sunnyvale",
          "countryCode": "USA",
          "postalCode": "94086",
          "state": "CA"
        }
      },
      "orderLines": [
        {
          "productName": "Fujifilm Instax Mini 7S Instant Camera (with 10-pack film) - Light Blue",
          "lineno": 1,
          "orderedQty": {
            "unitOfMeasure": "EA",
            "measurementValue": 1
          },
          "unitPrice": {
            "currencyAmount": 125,
            "currencyUnit": "USD"
          }
        },
        {
          "productName": "Sumsung Monitor 45' ",
          "lineno": 1,
          "orderedQty": {
            "unitOfMeasure": "EA",
            "measurementValue": 1
          },
          "unitPrice": {
            "currencyAmount": 305,
            "currencyUnit": "USD"
          }
        },
        {
          "productName": "Wirelss mouse Dell-UQA765",
          "lineno": 1,
          "orderedQty": {
            "unitOfMeasure": "EA",
            "measurementValue": 2
          },
          "unitPrice": {
            "currencyAmount": 25,
            "currencyUnit": "USD"
          }
        }
      ]
    },
    {
      "orderNo": "3330047777380",
       "status": "Shipped",
      "customerInfo": {
        "customerId": "832edb65-6ea2-40e4-bb07-8c3a2bacc159",
        "primaryContact": {
          "name": {
            "firstName": "Nikhil",
            "lastName": "Ranjan"
          },
          "phone": {
            "completeNumber": "408-660-5027"
          },
          "email": {
            "emailAddress": "nikhilranjan@email.com"
          }
        },
        "address": {
          "addressLineOne": "655 S Fair Oaks Avenue",
          "addressType": "RESIDENTIAL",
          "city": "Sunnyvale",
          "countryCode": "USA",
          "postalCode": "94086",
          "state": "CA"
        }
      },
      "orderLines": [
        {
          "productName": "Purell Advanced - 8 fl Oz",
          "lineno": 1,
          "orderedQty": {
            "unitOfMeasure": "EA",
            "measurementValue": 1
          },
          "unitPrice": {
            "currencyAmount": 10,
            "currencyUnit": "USD"
          }
        },
        {
          "productName": "Mask-12 pc",
          "lineno": 1,
          "orderedQty": {
            "unitOfMeasure": "EA",
            "measurementValue": 1
          },
          "unitPrice": {
            "currencyAmount": 12,
            "currencyUnit": "USD"
          }
        }
      ]
    }
  ]
}

HTTP GET API using axios

Create a class based component "Orders.js" and a functional component "Order.js". Class based component Orders executes GET API and displays orders in UI using Order functional component.

[Orders.js]- Class based component which manages state. orderStatus fetches order# and status & using Order component data are displayed.

import React, { Component } from 'react';
import axios from 'axios';

import Order from './Order';

class Orders extends Component {
    state = {
        ordersStatus: [],
        error: false
    }

    deleteDataHandler = (_orderNo) => {  
    }

    componentDidMount() {
        let ordernoAndStatus = []
        axios.get('https://devinlineaction.firebaseio.com/orders.json' )
            .then(res => {
                const fetchedOrders = [];
                for (let key in res.data) {
                    let orderNo = res.data[key].orderNo;
                    let status = res.data[key].status;
                    ordernoAndStatus.push({orderNo,status})
                    fetchedOrders.push({
                        ...res.data[key],
                        id: key
                    });
                }
                this.setState({ordersStatus : ordernoAndStatus});
                console.log(fetchedOrders);
            })
            .catch(err => {
                this.setState({loading: false});
            });
            
    }

    render () {
        let orders = <p style={{textAlign: 'center'}}>
            Opps!! Something went wrong.</p>;
        if (!this.state.error) {
            orders = this.state.ordersStatus.map(orderStat => {
                return <Order 
                    key={orderStat.orderNo}
                    orderNo={orderStat.orderNo} 
                    status={orderStat.status}
                    deleteHandle=
                        {this.deleteDataHandler(orderStat.orderNo)} />;
            });
        }
        return (
            <div>
                <section>
                    <h1> Get API using axios: Orders status</h1>
                    {orders}
                </section>
            </div>
        );
    }
}

export default Orders;

[Order.js] - Order component is functional/presentational component to generate UI with order# and status. Based on status Cancel order button is displayed (if order is delivered -> button is not displayed)
import React from 'react';

const order = (props) => (
    <div>
            <h3>{props.orderNo}</h3>
            {props.status}
            {props.status !== 'Delivered' ? <div><button 
                style={{ background: '#f44336', 
                         border: 'none',
                         color: 'white',
                         padding: '8px 5px',
                         fontSize: '20px',
                         cursor:'pointer',
                         }} 
                onClick={props.deleteHandle}>Cancel Order</button></div> : null}
     <div style={{width: '700px',
                    margin:'auto',
                    height: '7px',
                    borderBottom: '1px solid black'}}></div>
     </div>
     
);

export default order;


[App.js]
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Orders from './containers/Orders'
import NewOrder from './components/NewOrder';

class App extends Component {
  
  render() {
    console.log('[App.js] render() execution');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>

        {/* Render Child component Checkout */}
        <Orders/>
        <NewOrder/>
      </div>
    );
  }

}

export default App;


Start server using command : $ npm start and open http://localhost:3000/.
UI displaying order# and status & Console displaying GET Response

HTTP POST API using axios

[NewOrder.js] - HTTP Post method is executed on clicking create new Order button.

import React, { Component } from 'react';
import axios from 'axios';

class NewOrder extends Component {
    postDataHandler = () => {
        const data = {
            "orderNo": "3330047777381",
            "status": "Processing",
            "customerInfo": {
              "customerId": "832edb65-6ea2-40e4-bb07-8c3a2bacc159",
              "primaryContact": {
                "name": {
                  "firstName": "Nikhil",
                  "lastName": "Ranjan"
                },
                "phone": {
                  "completeNumber": "408-660-5028"
                },
                "email": {
                  "emailAddress": "nikhilranjan@email.com"
                }
              },
              "address": {
                "addressLineOne": "655 S Fair Oaks Avenue",
                "addressType": "RESIDENTIAL",
                "city": "Sunnyvale",
                "countryCode": "USA",
                "postalCode": "94086",
                "state": "CA"
              }
            },
            "orderLines": [
              {
                "productName": 
                    "Garmin vivoactive 3 Black with Stainless Hardware",
                "lineno": 1,
                "orderedQty": {
                  "unitOfMeasure": "EA",
                  "measurementValue": 1
                },
                "unitPrice": {
                  "currencyAmount": 149,
                  "currencyUnit": "USD"
                }
              }
            ]
          };
        axios.post('https://devinlineaction.firebaseio.com/orders.json', data)
            .then(response => {
                console.log(response);
                alert("Order Placed successfully !!")
            });
    }

    render () {
        return (
            <div>
                <h1> Post using axios: Place new order</h1>
                <button 
                    style={{ background: '#008CBA', 
                         border: 'none',
                         color: 'white',
                         padding: '15px 32px',
                         fontSize: '20px',
                         cursor:'pointer',
                         }} 
                    onClick={this.postDataHandler}>Create new Order</button>
            </div>
        );
    }
}

export default NewOrder;

Successful execution server respond with status code = 200

After refreshing UI - 3 orders are displayed in UI and Firebase database can be validated for new record.
Axios HTTP library can be used to execute DELETE,HEAD and PUT methods. It provides flexibility to configure request sent to server and handle server response. Error handling is also supported with axios.
Textual description of firstImageUrl

React components and life cycle: Stateful and stateless, Class-based and functional component & Class component life cycle.

React component can be classified in two category: Class(or Container) based component and Functional (or presentational) component. Historically(before ReactVersion 16.8) class based component has been considered stateful component and functional component is stateless component. From React-16.8 functional component can manages state using React Hooks useState().

A good strategy for React application is to restrict state management with very few component (ideally class based) and presentational component should be dependent on props and it makes presentational component more reusable.

Class based and functional component: Class based and functional component can be differentiated in following ways.

1. Class and functional component Syntax: Class-based component extends Component and function component is represented as function.
Functional component 
import React from 'react';

const contact = (props) => (
  <div>
    <h1>{props.title}</h1>
  </div>
);

export default contact;
Class-based component 
import React, { Component } from 'react';
import './Checkout.css';

class Checkout extends Component {
    state = {
        loggedInCustomer: null,
        guestCustomer:null
    }
  render() {
    return (
      <div className="Checkout">
        {/* manages state of app...  */}
      </div>
    );
  }
}

export default Checkout;

2. State accessibility and life cycle hooks: Both class-based component and functional component(From react 16.8) can access state. But only class based component has life cycle hooks. Life cycle hooks provides ability to modify state before and after loading components.
  • Class-based component access state and props via "this" and 
  • Functional component access state using useState() and Properties using props.
Class-component accessing state and props:
this.state.property-1 
this.props.property-2


Class component life cycle

Component Create life cycle: Create component life cycle starts from constructor() and ends at componentDidMount() methods. Both constructor() and componentDidMount() are optional methods, render() method must be defined to full component creation cycle.
Sample App.js to demonstrate component create cycle:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Checkout from './containers/Checkout';

class App extends Component {
  /*Step-1: Constructor */
  constructor(props){
    super(props);
    console.log('[App.js] constuctor');
  }
  state = {
    orders:[
      { upc: '007410134707', productName: 
        'Fujifilm Instax Mini 7S Instant Camera', unitPrice: "210" },
      { upc: '007410134708', productName: 
      'Monitor 43 Inch', unitPrice: "340" }
    ]
  }

  /* Step-2: getDerivedStateFromProps */
  static getDerivedStateFromProps(props,state){
    console.log('[App.js] getDerivedStateFromProps', props,state);
    return state;
  }

  /* Step-3: Execute render method */
  render() {
    console.log('[App.js] render() execution');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          My First React App !!
        </p>
        {/* Render Child component Checkout */}
        <Checkout/>
      </div>
    );
  }

  /* Step-4: Execute componentDidMount: 
             make HTTP call at this point.... */
 componentDidMount(){
  console.log('[App.js] componentDidMount execution');
 }
}

export default App;

Component creation journey with child component Checkout 
Component update life cycle: Update component life cycle is more complex and has additional states. Update component life cycle pays important role in improving performance of application.

import React, { Component } from 'react';

class Checkout extends Component {
    /*Step-1: getDerivedStateFromProps: This will throw warning when loaded as initial satte is empty */
    static getDerivedStateFromProps(props,state){
        console.log('[Checkout.js] getDerivedStateFromProps');
        return state;
    }
    /* Step-2: Should return boolean(true/false) based on some condition */
    shouldComponentUpdate(nextProps, nextState){
        console.log('[Checkout.js] shouldComponentUpdate');
        /* Shalllow comparision not deep */
        if(nextProps.orders !== this.props.orders)
            return true;
        return false;
    }
    
    state = {
        loggedInCustomer: null,
        guestCustomer:null
    }
  /* Step-3: */
  render() {
    console.log('[Checkout.js] render() execution');
    return (
      <div className="Checkout">
        {/* manages state of Checkout...  */}
      </div>
    );
  }

    /* Step-4: Used to some operation before componentDidUpdate like gettting scrolling co-ordinate. 
        Save some data before udpate state.*/
    getSnapshotBeforeUpdate(prevProps, prevState){
            console.log('[Checkout.js] getSnapshotBeforeUpdate');
        return {message:'Snapshot!!'};
    }
        
        
  /* Step-5: */
  componentDidUpdate(prevProps, prevState,snapshot){
    console.log('[Persons.js] componentDidUpdate');
    console.log(snapshot);
}
}

export default Checkout;

Functional component with useEffect and setState
: Functional component does not have life cycle as class based component. Functional component uses React hooks to update state & execute certain method on every load of functional component.

Mar 23, 2020

Textual description of firstImageUrl

Getting started with React Application : How to install and setup React Application

React(ReactJS) is a component based declarative JavaScript library for building user interfaces. It has been developed and maintained by Facebook and community. In this post I will use "create-react-app" tool to create ReactApp.

Prerequisite: I am using homebrew to install all required softwares. Install homebrew

Step-1. Install node.js:  node is required to run tool create-react-app which setup react app in single command. Install node.js using below command or download node.js.
m-c02z31rnlvdt:~ n0r0082$ brew install node
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> New Formulae
.....
......
==> Summary
🍺  /usr/local/Cellar/icu4c/64.2: 257 files, 69.2MB
==> Installing node
==> Downloading https://homebrew.bintray.com/bottles/node-13.5.0.mojave.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/59/59bfd67c59d4af7643a12d9?__gd
######################################################################## 100.0%
==> Pouring node-13.5.0.mojave.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/13.5.0: 4,663 files, 59.1MB
==> Caveats
-----
-------
For compilers to find icu4c you may need to set:
  export LDFLAGS="-L/usr/local/opt/icu4c/lib"
  export CPPFLAGS="-I/usr/local/opt/icu4c/include"

==> node
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

Validate node installation
m-c02z31rnlvdt:~ n0r0082$ node -v
v13.5.0
m-c02z31rnlvdt:~ n0r0082$ npm -v
6.13.4
m-c02z31rnlvdt:~ n0r0082$ which node
/usr/local/bin/node

Step-2: Install create-react-app tool which has enriched with all required utility and packages to setup react application with just one single command. -g indicates tool installed globally so that it can be executed from anywhere.

m-c02z31rnlvdt:reactApp n0r0082$ sudo npm install create-react-app -g 
Password:
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.3.0
added 91 packages from 45 contributors in 13.17s

Step-3: Crate react application using above installed tool create-react-app. Application name is my-first-app. --scripts-version only enforce structure of project created not react version.
m-c02z31rnlvdt:Learing n0r0082$ create-react-app my-first-app --scripts-version 1.1.5

Creating a new React app in /Users/n0r0082/Learing/my-first-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

......
........

added 1383 packages from 748 contributors and audited 14828 packages in 69.561s

18 packages are looking for funding
  run `npm fund` for details

found 40 vulnerabilities (29 low, 5 moderate, 6 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Success! Created my-first-app at /Users/n0r0082/Learing/my-first-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-first-app
  npm start

Happy hacking!


Step-4: Go to location where my-first-app has been created. Start server using npm start. Once server is started, open browser and hit URL http://localhost:3000/


m-c02z31rnlvdt:my-first-app n0r0082$ npm start 

> my-first-app@0.1.0 start /Users/n0r0082/Learning/my-first-app
> react-scripts start


Compiled successfully!

You can now view my-first-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.0.3:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

my-first-app structure in VStudio:

Open App.js and make some changes and immediately it will be reflected in UI.
Referencehttps://github.com/facebook/create-react-app

Mar 21, 2020

Textual description of firstImageUrl

JavaScript Array and its functions - map(), reduce() and filter()

JavaScript Array class is a global object that is used in the construction of arrays. Arrays are objects with additional methods and properties. Like Object Array can have indexed and non-index elements. Before discussing commonly used JS Array functions, let's see how Array is different from Object.

Create an array with two elements(or properties) : Two elements added to array are indexed element.

  let my_cart = ['Item1-Brush', 'Item2-Stove','Item3-Laptop']

Currently length of array my_cart is 3. Add to non-indexed element/properties to my_cart using dot & bracket notation.

 my_cart.nonIndexed_item4 = "Item4-Laptop"
 my_cart["nonIndexed_item5"] = "Item5-monitor"

After adding two non-indexed property length of Array my_cart is still 3. Why? - length property of array does not indicate how many elements are present in Array, length is numerically greater than the biggest array index.


How to find length of Array/total number of elements present in an array ? 
- Using Object.keys(my_cart).length

Array.prototype functions

Array.prototype.map() - Used to create a new array by passing a callback function. Callback is applied on every element in the array.
An array with numbers and fetch square of positive integers from the given array. Original array is not modified.
let numbers = [1, 2, 3, 4, 5]
let modifed_numbers = numbers.map(num => (num*num))
// modifed_numbers [1, 4, 9, 16, 25] //numbers [1, 2, 3, 4, 5]

Get a modified array of object using callback function
let check_out_items = [{
    item_id: 1001,
    quantity: 10,
    item_name: 'Apple',
    unit_price: .4
}, {
    item_id: 2001,
    quantity: 20,
    item_name: 'Orange',
    unit_price: .3
}, {
    item_id: 3001,
    quantity: 5,
    item_name: 'mango',
    unit_price: .7
}]
//print check_out_items
0: {item_id: 1001, quantity: 10, item_name: "Apple", unit_price: 0.4}
1: {item_id: 2001, quantity: 20, item_name: "Orange", unit_price: 0.3}
2: {item_id: 3001, quantity: 5, item_name: "mango", unit_price: 0.7}

let check_out_price = check_out_items.map(item => {
    let item_price = {}
    item_price[item.item_name] = (item.quantity * item.unit_price)
    return item_price
})
//print check_out_price
0: {Apple: 4}
1: {Orange: 6}
2: {mango: 3.5}

Use .map() method should be only used when modified array need to re-used, otherwise .forEach() will be right choice to iterate all array elements and perform operation. 

Array.prototype.reduce()
- reduce() method executes a reducer function on each element of the array and resulting in a single output value. Consider above array check_out_price and apply reduce method find total price need to be paid at checkout.
Sample reduce() function:
function (accumulator, currentValue) {
  return accumulator + currentValue
}, initialValue

let check_out_price = check_out_items.map(item => {
   return (item.quantity * item.unit_price)
})

// console.log(check_out_price) [4, 6, 3.5]

let total_price = check_out_price.reduce(function (accumulator, currentValue) {
    return accumulator + currentValue
}, 0)

//console.log(total_price) 13.5

Reduce function can be applied to an array with an initial Value or without initial Value. If initialValue is not provided, reduce() will execute the callback function starting at index 1, skipping the first index. If initialValue is provided, it will start at index 0.

Array.prototype.filter() - filter() method creates a new array with all elements that pass the test implemented by the callback function.
let input = [4, 5, 6, 8, 9, 12, 17];
//console.log(input) [4, 6, 8, 12]
let filtered_input = input.filter(num =>; num %2 ==0)
// let filtered_input = input.filter(function(num){return num %2 ==0})

//console.log(filtered_input) [4, 6, 8, 12]


Apr 17, 2019

Textual description of firstImageUrl

(Promotional) - Pre-employment assessment, skill testing and interviewing

We often hear terms like pre-employment assessment, skill testing and even interviewing used interchangeably. While they may have similar high level goals, such as identifying a suitable candidate, they are fundamentally different methods of achieving those goals. It’s important to know the difference because each evaluation method will produce completely different outputs. Moreover, in some cases it might make sense to combine one or more of these methods.

One of the best discussions I’ve heard on this topic was on a podcast called Hire Up hosted by John P. Beck, Jr. The episode was titled Assessments Made Simple, Human, Smart and featured Dr. Scott Hamilton, the CEO of Hamilton &amp; Associates Consulting.

Dr. Hamilton distinguished between each candidate evaluation method with ease and clarity. It’s worth listening to the entire episode but, otherwise, I have summarized some of the key points in this article and added my own thoughts as well.


Skill testing

Skill testing is all about understanding whether someone can do something or knows something. It can be a simple task, a range of complex tasks or demonstrable knowledge. It’s possible to test for almost any skill because you can simply watch people perform tasks.

Dr. Hamilton gives the simplest of examples: “if someone is going to have to weld metal, you want see them weld metal”.

This is why résumés and interviews are inherently poor methods of validating skills. They are focused on what candidates claim they can do, not what they can actually do. Instead, it’s far more compelling to see how people perform. Literally. Moreover, it’s far simpler.

Skill testing is context-dependent, and therefore subjective in nature. But it’s also capable of being objectively assessed, which means it can be pass/fail. Confusing, right?

Let’s take a writing test as an example. The style of writing you test depends entirely on the job. It could be anything from creative writing to technical writing. So the test is bespoke. At the same time, it is usually possible to objectively determine whether a candidate performed well. To use Dr. Hamilton’s welding example, either someone knows how to weld metal or they don’t.

The opposite is usually true of pre-employment assessment.


Pre-employment assessment: what is it?

Pre-employment assessment is focused on predicting how people will behave in certain scenarios, not what they can do. They explore key personality traits based on an understanding that someone’s personality can predict their behaviour. Most personality assessments are based on the Five-Factor Model, which asserts that there are five personality supertraits:

  • Openness to experience
  • Conscientiousness
  • Extraversion
  • Agreeableness
  • Neuroticism

Therefore, if we gain an understanding of someone’s personality, and particularly these five supertraits, we will have a good chance of knowing how they will react in different situations. Unlike skill testing, this doesn’t mean someone can do the job. But it may shed light on how they will do the job.


Pre-employment assessment: does personality change?

Now here’s the tricky part. While skills can be taught, many people think that personality is fixed. However, that isn’t entirely true. Studies have shown that personality can, and does, change over time. While most people don’t change in a fundamental way, it is possible to change behaviors and habits, according to Carol Dweck. And it’s those very behaviors that are relevant to how someone will perform in a job, not their personality per se. That’s why two people with different personalities can perform well in the same role.

Whether we believe personality is fixed or not, it is not something that can be measured in binary terms such as pass/fail, like an Excel test. It’s who we are and, if we subscribe to the theory that personality changes over time, it’s who are are at the time of assessment. This means that the outcome of a personality assessment can’t be viewed as “good” or “bad” in isolation, it can only indicate potential suitability for a specific job. Conversely, someone can be good at Excel.





Additionally, if used incorrectly, personality assessments can be harmful to the hiring process. That’s why pre-employment assessments that test personality need to be validated. Skill testing, on the other hand, is inherently bespoke.

What does this all mean?

This is where it gets interesting. Let’s start with the dictionary:

  • A test means “a procedure intended to establish the quality, performance, or reliability of something, especially before it is taken into widespread use”.
  • To assess means  to “evaluate or estimate the nature, ability, or quality of”.
  • An interview means “A meeting of people face to face, especially for consultation”.

Interviewing

Tests and assessments sound fairly similar. They are ways of measuring ability or quality. On the other hand, an interview is a discussion. Technology also makes it possible to conduct one-way interviews using video, which are essentially discussions without real-time interaction. And yet, the most commonly used method for making hiring decisions is interviewing. For some reason the notion that skills and behaviors can be evaluated without skill tests or assessments – but through a discussion – has become the norm.

Maybe it’s because of a lack of resourcing. Maybe we trust our intuition more than third party methods. Or maybe it’s a lack of awareness. But it doesn’t make a lot of sense because interviews don’t predict performance. They typically focus on understanding what someone did in the past or discussing what they claim to be able to do, without proof.

Can interviews nevertheless play a valuable role in the hiring process? Interviews should be used to get to know a preferred candidate after their skills and behaviors have been validated. Only candidates who have already demonstrated they can do they job should be interviewed. That would allow for a much more valuable interviewing experience, and a far better use of everyone’s time. Unfortunately, that is not normally the case.

Can we combine skill testing, pre-employment assessment and interviewing?

A strong hiring process will combine reliable insights about a candidate’s ability to do the job and their expected behavior with high-quality human interaction. In theory, this could involve a skill test, some form of pre-employment assessment and an interview. It very much depends on the type of role, and the candidate experience the company wants to deliver.

Hiring is not a “one size fits all” endeavour. Every situation is different. But understanding what each evaluation method can achieve and, more importantly, what it will not achieve, will go a long way to helping companies build hiring robust processes. 




AUTHOR

Omer Molad
Making hiring about merit, not background | Co-founder and CEO of Vervoe

Oct 8, 2018

Textual description of firstImageUrl

Setup Kafka and Zookeeper with brew(homebrew) on Mac operating system: Use Kafka tool(UI) to Publish message and monitor Kafka topic message.

Kafka is publish subscribe messaging system which are most commonly used in asynchronous work flow. Homebrew is a software package management system that simplifies the installation of software on Apple's macOS operating system. Using brew Kafka and Zookeeper can installed & setup with ease.

Install zookeeper using brew(homebrew):
brew install zookeeper
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core, homebrew/cask).
==> New Formulae
bundletool         geant4             i2pd               mallet             opensubdiv         opentracing-cpp    stanford-corenlp   tdlib
==> Updated Formulae
....
.....
==> Downloading https://homebrew.bintray.com/bottles/zookeeper-3.4.12.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring zookeeper-3.4.12.high_sierra.bottle.tar.gz
==> Caveats
To have launchd start zookeeper now and restart at login:
  brew services start zookeeper
Or, if you don't want/need a background service you can just run:
  zkServer start
==> Summary
🍺  /usr/local/Cellar/zookeeper/3.4.12: 242 files, 32.9MB
Where is installation directory of zookeeper : /usr/local/Cellar/zookeeper

Install Kafka Using brew(hombrew):
➜  brew install kafka
Updating Homebrew...
==> Downloading https://homebrew.bintray.com/bottles/kafka-2.0.0.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring kafka-2.0.0.high_sierra.bottle.tar.gz
==> Caveats
To have launchd start kafka now and restart at login:
  brew services start kafka
Or, if you don't want/need a background service you can just run:
  zookeeper-server-start /usr/local/etc/kafka/zookeeper.properties & kafka-server-start /usr/local/etc/kafka/server.properties
==> Summary
🍺  /usr/local/Cellar/kafka/2.0.0: 160 files, 46.8MB
Where is installation directory of Kafka : /usr/local/Cellar/kafka


Kafka Producer and Consumer(Command line tool)

Create Kafka topic: Create topic "topic-devinline-1" with replication factor 1 and partition 1
➜  bin pwd
/usr/local/Cellar/kafka/2.0.0/bin
➜  bin sh kafka-topics --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic topic-devinline-1 
Created topic "topic-devinline-1".

Start producer:
➜  bin kafka-console-producer --broker-list localhost:9092 --topic topic-devinline-1                       
>Hello, Fist message
>Bye, Message
>
Start consumer:
➜  bin kafka-console-consumer --bootstrap-server localhost:9092 --topic  topic-devinline-1 --from-beginning
Hello, Fist message
Bye, Message

Kafka UI tool(Kafka Tool)

An UI tool to analyse and post/consume messages in topic. Download Kafka tool
As we have setup Zookeeper and Kafka locally, we can use following configuration to setup Kafka tool.

Analyse Kafka Topic through UI:
Open Topic "topic-devinline-1" and partition-0. Click green play button and find both message posted earlier.

Post Message from UI tool in Kafka topic:
1. Select Partition-0, Select Data tab and Click + 
2. Post message in text-box and click Add.
3. Click on green-play button and message posted is available in topic.


Note: If you find text box for Key also, provide a key along with message. It can be configured in preferences.
Kafka tool -> Preferences -> topics -> Default content type (Key = No Key)

Oct 7, 2018

Textual description of firstImageUrl

Tableau : Extract Data and Filter - How to create filter and Visualise stats in Tableau

Extracts are saved subsets of data that we can use to improve performance - we can reduce the total amount of data by using filters and configuring other limits.

How to create Extract in Tableau(Desktop version) :-
1.  Right click on Data source listed under Data tab and select Extract Data
2.  Select default or modify config for selecting specific  set of records and click Extract.

How to use a filter for all Worksheet?
Right click on Filter -> "Apply to Worksheets" ->  Select "All using this datasource"
Now this filter will be available for all worksheet throughout if data source is used on the working area.

Filter data source and visualise in Tableau 
1. Download data source - Unemployment Statistics
2. Open Tableau and Import excel as data source. Create extract as suggested above. On creating extract by default it will be used.
3. Drag Unemployed field from Measures section to rows shelf and drag Period from Dimensions to Columns shelf. By default, Line chart will be created in Working area.Change line chart to Area chart.
4. Drag Age from Dimensions to Filter area and select at least one age range. Right click on filter created and select Show Filter. Drag Age filter below Marks area.

5. Drag Age in Label and Color pallet and select different age range from filter and observe Area chart. Below area chart created with three age range.

Oct 6, 2018

Textual description of firstImageUrl

Tableau : Bar Chart displaying Representative and TotalSell along with their yearly bonus.

In previous post we discussed about Data visualisation with CSV data source and Tableau : Export a Image chart with report generated from CSV data - here we visualised Representative and their TotalSells. In this post we will reuse same worksheet and enhance to solve Try Yourself question posted at end of above post.

QuestionCreate a bar chart displaying Representative and TotalSell along with there yearly bonus. Display yearly bonus at top of each bar.  

Prerequisite:
Data visualisation:  Representative and TotalSell along with there yearly bonus
1. Right click in Measures section and click on "Create Calculated field".
2. Provide a validation name for this new fields as "TotalBonus" and it is 5% of total sell.
[TotalSales(In $)]*(0.05)

3. Drag TotalBonus from Measures section on Label.
4. Right click on dragged field from Marks section(below tooltip) and format it with standard English(US) to display in $.
Representative Bonus Summary along with TotalSells 


Textual description of firstImageUrl

Data visualisation with CSV data source and Tableau : Generate report with CSV data source and export as Image

Tableau is an interactive data visualisation products focused on business intelligence. It provides support for integrating various data source like CSV, databases(local and cloud), various big data storage like Apache drill, Hive, etc. It query datasources and then generates a number of graph types and store and retrieve data from its in-memory data engine.

In previous posts we saw how to integrate tableau with Hive and visualise & Integrate Tableau and Apache drill(JSON data source). Here we will use CSV data source to visualise using Tableau.

1. Download CSV datasource.
2. Click Text file form connect section and import CSV file & visualise CSV data in tabular form.

Click on Sheet 1 and open dashboard. Under data tab we have two sections (Dimension and Measures) which contains columns from data source.
Dimension : Independent variable (Order Date, Region, Item and Rep)
Measures:Dependent variable (Unit price and Units)

Visualisation-1: Total Number of Units Sold by representative in each region 
Drag and drop Region & Rep from dimension to working area, which acts columns data. Similarly drag and drop Units from Measures in working area.
Number of units per region and representative (In decreasing order per region)

Alex sold maximum units in Central, Richard in East and James in west region. Does any company interested in number of units sold by their representative or total amount in $.

Visualisation-2: Total amount(In $) Sold by representative in each region
Lets create new field Total from dependent fields (Units and Unit price). Do right click in Measures section and select "Create Calculated field". Using Units and unit price compute TotalSales which listed in Measures section.
Custom field TotalSales computed from Units and Unit Price
Delete Sun(Units) from Rows. Drag & drop TotalSales instead. Now we have a chart with Rep with TotalSales(In $).
Representative VS TotalSales(In $)
Above chart shows Matthew is best Rep in Central, Susan in East and James in West region. TotalSales(In $) gives right insights about sells and representative.

Colourful chart: Drag and drop Region & Rep in Color pallet. It modifies chart and each bar is coloured. If Rep is dragged- each rep is f different color, when Region is dragged - each region is represented with different color.
Colourful grouped representation: By Rep and By Region

Format Labels: Drag TotoalSales in Label pallet (beside Color). It brings total sales value on each bar of chart. Format of currency representation can be changed.
Export worksheet as Image : Go to Worksheet -> Export -> Image...

Try Yourself: Modify existing worksheet and compute bonus for each Rep as 5% of individual's TotalSell and display at top of each Rep.

Next: Create a bar chart Representative and TotalSell along with there yearly bonus. (Yes, Solution of above question)
Textual description of firstImageUrl

Elasticsearch and Kibana : Kibana DevConsole with ElasticSearch