DEV Community: grusingh

Influence: The Psychology of Persuasion

grusingh — Sat, 31 Jul 2021 10:33:09 +0000

I came to know about this book while surfing twitter and reading an article about Shopify CEO Tobias two books that made me billionaire. The first book Influence: The Psychology of Persuasion by Robert B. Cialdini deals with science of persuasion. At first I thought of it as another self help book but it turned out be more of a science book describing various persuasion elements by providing references to various research studies that have been conducted around the world.

Highly recommend reading this book. In case time is an issue this article by Alan Trapulionis does a good job of summarizing the core learnings of the book.

There is an updated May 2021 version with a new principle Unity. I read the older version, can't wait to get my hands on the new one.

Working with legacy React apps

grusingh — Tue, 20 Jul 2021 12:20:52 +0000

Working with legacy code can be challenging especially when code is lacking in test coverage. In his must read book Working Effectively with Legacy Code author Michael Feathers talks about a refactoring technique Extract Method for tackling large methods.

I have successfully used this technique many times to enhance or add features to complex React components and adding test coverage.

Example

We are given a task to fix bug in a LoanCalculator component. It's a huge file with complex logic and no test coverage. We have identified the cause of bug and ready to make changes.

function LoanCalculator(props) {
  ...
  lots of lines of code
  ...

  if (someCondition) {
    // bug is here 
    // fix: props.x + props.y
    return props.x - props.y;
  }

  ...
  more code
  ...
}

The recommended way is to create tests for LoanCalculator when possible before making any code changes. In our case we don't understand the logic enough to create tests for whole file.

Step 1: Start by extracting the lines for bug fix into a separate method. Notice that we are doing a named export for someCalculation function. This refactoring enables us to start creating tests for our newly extracted method.

// bug is here 
// fix: props.x + props.y
export function someCalculation(x, y) {
  return x - y;
}

function LoanCalculator(props) {
  ...
  lots of lines of code
  ...

  if (someCondition) {
    return someCalculation(props.x, props.y);
  }

  ...
  more code
  ...
}

Step 2: Add tests to cover and set expectations for someCalculation function.

/* file: LoanCalculator.spec.js */
import {someCalculation} from './LoanComponent';

describe('LoanCalculator', () => {
  it('someCalculation should return sum of x and y', () => {
    const result = someCalculation(2,3);
    expect(result).toEqual(5);
  });
});

Step 3: Now that we have a failing test we can apply the bug fix.

export function someCalculation(x, y) {
  return x + y;
}

Step 4: The test we created should we passing now.

By using the Extract Method refactoring technique we were able to reduce complexity in LoanComponent component and add test to go along with our bug fix.

Hope you find this article useful. Please share your feedback.

Testing navigation in react

grusingh — Sun, 18 Jul 2021 21:02:37 +0000

When testing navigation in a React component we can either check the final url or we can verify the updated DOM.

Test scenario 1: Test that clicking the about link will redirect to About Us path. This could be useful in scenarios where you are computing query params and want to assert on their values.

To make assertion on url possible we will have to use Router component (react-router-dom) with our own history object. Note that when using this approach the rendered markup won't get updated to reflect navigational changes.

Test scenario 2: Test that clicking the about link will render About Us path. This is preferred approach and useful in scenarios where DOM content changes after navigation.

To make assertions on updated DOM we will use BrowserRouter component (react-router-dom). Note that when this approach history won't be available to the test.

/* file: index.js */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root')
);

/* App.js */
import {Link, Route} from 'react-router-dom';

function App() {
    return <div>
        <h1>MyApp</h1>
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
        </nav>
        <div>
            <Route path="/" exact>
                <h2>Home page</h2>
            </Route>
            <Route path="/about">
                <h2>About Us</h2>
            </Route>
        </div>
    </div>
}

export default App;

/* App.spec.js */
import { render, screen} from '@testing-library/react';
import {BrowserRouter, Router} from 'react-router-dom';
import userEvent from "@testing-library/user-event";
import {createMemoryHistory} from 'history';
import App from './App';

test('should redirect and update history', () => {
    const history = createMemoryHistory();

    render(<Router history={history}><App/></Router>);

    userEvent.click(screen.getByText(/About/));

    expect(history.location.pathname).toEqual('/about');
});

test('should redirect and update dom', () => {
    render(<BrowserRouter><App/></BrowserRouter>);

    userEvent.click(screen.getByText(/About/));

    expect(screen.getByText(/About Us/i)).toBeInTheDocument();
});

Is Team Lead role a fit for you?

grusingh — Tue, 26 Feb 2019 00:23:53 +0000

Are you a developer transitioning into or considering a Team Lead role?

Being a Team Lead is not an easy job. Although it might come with a job description, but responsibilities, opportunities and challenges are a lot more.

Here are some points to ponder upon:

Team Lead is not the only career path for developers. Give consideration to specialising in a technical domain, architecture, test automation, devops and other possibilities.
Team Lead is a supervisory role and not a managerial role. You will likely be expected to provide technical leadership and also write code yourself. You won’t likely have any budget or any authority.
Do you enjoy working with people? This includes handling difficult situations, giving constructive feedback, holding people accountable, performance reviews, hiring employees and in worst cases participating/leading employee termination process.
Is your manager and organisation committed in supporting you in your new role? This might include one to one coaching, on going training and learning. Compare possibly increased compensation vs additional responsibilities and commitments. If there is no salary increase then think again. *Are you okay to step out of your comfort zone and acquire people skills? Not limited to communication, leadership, delegation and motivation skills.
Number of people reporting to you? 1 to 4 is ideal.
Understand that you won’t be able to code much. Longevity of this role is questionable. You need to be hands-on to stay up to speed with current trends but you will lose your technical skills over time due to lack of time available to code yourself.

A good Team Lead will show:

Leadership: Be hands-on technically. Won’t preach. Will lead by example. Will walk the talk.
Empathy: Have empathy for direct reports and for oneself. People can and will make mistakes. Its a lead’s responsibility to ensure that employees have proper training, clear directions and safe work environment.
Integrity: Have integrity and win trust. Likewise has trust in direct reports. Gives them autonomy and motivates them to step up and do their best. No one likes to be micro-managed.
Fairness: Is fair to all direct reports and offers them fair chance to appreciation, opportunities, resources and his/her time.
Professional Relationship: Is not friends with selective individuals as that might give perception of favoritism. Keeps relationship strictly professional with all direct reports.
Hiring: Hires capable people and let them do their best. Lead is not be the smartest person on the team.

Team Lead is an important role. It demands a distinct skill set. Hope this article will help you in some way making into a good team lead.

Thanks to Philip Chan for reviewing this article.