Forem: Pranava S Balugari

TDD approach

Pranava S Balugari — Thu, 10 Sep 2020 02:16:58 +0000

Thanks to my wife, this blog post is because of our morning tea discussion. She asked me to convert the discussion into a blog :)

You start with a test for a smallest unit of code you want to deliver (At this point in time it doesn’t exist yet)


describe 'Arithmetic::Sum' do
  describe '#add' do
   it 'is expected to take 2 and 3 and return 5' do
     expect(subject.add(2,3)).to eq(5)
   end
  end
end

Ensure test fails with an error that Unit of code you are testing doesn’t exist yet.

 Arithmetic::Sum not found error

Coding time...., write just minimum code necessary to make the test fail for the reason you expect.
- Create Arithmetic module
- Add class inside that module
- Add method add (for now its empty)

   Code errors out saying nil and 5 are not equal.

Coding time..., Now write the minimum code necessary to make the test pass.

  def add(a, b)
    return 5
  end

Test should turn green at this point.
Add few more test expectations to deliberately make the test fail, and ensure that the failure messages are meaningful.

 describe 'Arithmetic::Sum' do
  describe '#add' do
   it 'is expected to take 2 and 3 and return 5' do
     expect(subject.add(2,3)).to eq(5)
   end

   it 'is expected to take 4 and 6 and return 10' do
     expect(subject.add(4,6)).to eq(10)
   end

   it 'is expected to take 100 and 100 and return 200' do
     expect(subject.add(100,100)).to eq(200)
   end
  end
 end

As Uncle bob says, As the Tests get more Specific, the Code gets more Generic. Enhance add method to be more generic which could handle all the test cases mentioned above.

 module Arithmetic
   class Sum
     def add(a, b)
      return a + b
     end
   end 
 end

Run the tests again and see all of them turn green.
Commit the code :)

Example given in this blog follows TDD approach i generally follow when writing ruby programs. Just curious how Java or Go community approach TDD as there is a compilation phase before running a program. I will research and if possible add another blog in continuation to this based on how their dev community approaches TDD.

Thanks to Uncle Bob and his clean coder videos :)

interactively build a docker image

Pranava S Balugari — Wed, 02 Sep 2020 01:56:31 +0000

Let's take a close look at how to interactively build a docker image from base ubuntu image. We will use docker commands to create our custom image.

Interactively launch BASH shell under Ubuntu Base image, Update apt-get, install figlet and its dependencies using apt-get, and then save the image.

e.g.

Figlet software + Ubuntu base image -> New Image named figlet

Prerequisites:

Ensure the Docker engine is installed on your machine

Fetch the base image and connect to the container.

docker run -it ubuntu

Next, Update apt-get update and its dependencies (with in the docker container)

apt-get update

Install figlet software and its dependencies.

apt-get install figlet

Verify if the software is installed correctly on the container.

figlet DEV.TO

If your output matches the above image, exit the container (Ensure you copy the container id)

Now run docker commit command with the container id saved in the previous step.

// Works even if you mention initial chars of container id
docker commit cbe1bc

Now look at all the images

docker images

undefined              undefined              cbe1bc519023        39 hours ago        98MB
ubuntu              latest              4e2eef94cd6b        13 days ago         73.9MB

Rename the image created with a readable name

docker tag cbe1bc519023 figlet

Now look at all the images again

docker images

figlet              latest              cbe1bc519023        39 hours ago        98MB
ubuntu              latest              4e2eef94cd6b        13 days ago         73.9MB

That is all :) Our custom image is ready to be pushed to docker hub and used by the community.

Note: Didn't cover the docker push and pull commands for the custom image created. That's for another day :)

...

Clumsy Factorial

Pranava S Balugari — Thu, 16 Jul 2020 05:44:33 +0000

One of the interesting Leet code problems i solved in recent times.

Normally, the factorial of a positive integer n is the product of all positive integers less than or equal to n. For example, factorial(10) = 10 * 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1.

We instead make a clumsy factorial: using the integers in decreasing order, we swap out the multiply operations for a fixed rotation of operations: multiply (*), divide (/), add (+) and subtract (-) in this order.

For example, clumsy(10) = 10 * 9 / 8 + 7 - 6 * 5 / 4 + 3 - 2 * 1. However, these operations are still applied using the usual order of operations of arithmetic: we do all multiplication and division steps before any addition or subtraction steps, and multiplication and division steps are processed left to right.

Additionally, the division that we use is floor division such that 10 * 9 / 8 equals 11. This guarantees the result is an integer.

Implement the clumsy function as defined above: given an integer N, it returns the clumsy factorial of N.


/**
 * @param {number} N
 * @return {number}
 */
var clumsy = function(N) {
    let operators = ['*', '/', '+', '-']
    let index = 0
    let stack = []

    // Add an element to the top of the stack.
    // Initially i created a result variable and 
    // was performing the operations in the case: block
    // But the problem with that is that it was not following
    // BODMOS mathematical principle. 
    // Goal is to ensure Multiplications and Divisions happen
    // Before additions and subtractions in the order.
    // After formulating an array, just add all those elements
    // to get the total Sum :)
    stack.push(N)

    for(let i = N - 1 ; i >=1; i--){
        /*
            Our goal is to push the evaluated values ontop
            Multiplication and division: Evaluate
            Addition and Subtraction: append
        */
        switch(operators[index]){
            case '*':
                len = stack.length - 1
                if(stack[len] >= 0){
                     stack[len] = stack[len] * i
                }else{
                    stack[len] = stack[len] * i
                }
                break;
            case '/':
                len = stack.length - 1
                 if(stack[len] >= 0){
                     stack[len] = Math.floor(stack[len] / i)
                }else{
                    stack[len] = -1 * Math.floor(Math.abs(stack[len]) / i)
                }
                break;
            case '+':
                stack.push(i)
                break;
            case '-':
                stack.push(-1 * i)
                break;
        }

        index = (index + 1) % operators.length
    }

    // Sum all the elements in the stack
    return stack.reduce((acc,element) => {
        acc = acc + element
        return acc
    })
};

GoLang for loop variations

Pranava S Balugari — Fri, 19 Jun 2020 07:12:26 +0000

Go has only one looping construct, the for loop. It comes with 2 variations from a usability point of view. Understanding the differences will definitely help in implementing the right one at the right time :).

Pointer semantic form
Value semantic form

Pointer semantic form

In this one the loop happens on the original continents array.

// Using the Pointer semantic form of for: <- range

package main

import "fmt"

func main() {
 continents := [3]string{'Asia', 'Africa','Australia'}
 fmt.Printf("Before -> [%s] : ", continents[1])

 for i := range continents {
    continents[1] = 'Europe'

    if i == 1 {   
       fmt.Printf("After -> [%s] : ", continents[1])
    }

 }

}

Output:
Before -> [Africa] : After -> [Europe]

Value semantic form

In this one the looping happens on the copy of the original array.

// Using the value semantic form of for: <- range

package main

import "fmt"

func main() {
 continents := [3]string{'Asia', 'Africa','Australia'}
 fmt.Printf("Before -> [%s] : ", continents[1])

 for i, c := range continents {
    continents[1] = 'Europe'

    if i == 1 {   
       fmt.Printf("After -> [%s] : ", c)
    }

 }

}

Output:
Before -> [Africa] : After -> [Africa]

There is one more value semantic form of the for range but with pointer semantic access. DON'T DO THIS.


package main

import "fmt"

func main() {
 continents := [3]string{'Asia', 'Africa','Australia'}
 fmt.Printf("Before -> [%s] : ", continents[1])

 for i, c := range &continents {
    continents[1] = 'Europe'

    if i == 1 {   
       fmt.Printf("After -> [%s] : ", c)
    }

 }

}

Output:
Before -> [Africa] : After -> [Europe]

Go - debug using runtime & log

Pranava S Balugari — Wed, 03 Jun 2020 09:56:45 +0000

When debugging programs with lots of interconnected functions in different files calling one another, it will be useful to know which file is executing at certain points in the program and the may be line number its emanating from. This can be done by using special functions from the packages runtime or log in go.

package main
import "fmt"
import "runtime"
import "log"

func main() {
    // Below where is our debug function
    where := func() {  
        _, file, line, _ := runtime.Caller(1) // Provides debug info
        log.Printf("%s:%d \n", file, line)
    }

    where() // Call your debug function

    name := "Pranava"
    salary := 1 * 10 // in cents :P
    fmt.Printf("%s 's salary : %d \n",name, salary)

    where() // Call your debug function

    // some more code
    costOfLiving := salary * 1000000
    fmt.Printf("Cost of living : %d \n", costOfLiving)

    where() // Call your debug function
}

Output will look something similar to below...

2020/06/03 19:48:14 /Users/pranavaswaroop/learning/gophercises/main.go:13 
Pranava 's salary : 10 
2020/06/03 19:48:14 /Users/pranavaswaroop/learning/gophercises/main.go:19 
Cost of living : 10000000 
2020/06/03 19:48:14 /Users/pranavaswaroop/learning/gophercises/main.go:25

The same can be achieved using log package:

package main
import "fmt"
import "log"

func main() {
    // Below where is our debug function
    where :=  log.Print

    where() // Call your debug function

    name := "Pranava"
    salary := 1 * 10 // in cents :P
    fmt.Printf("%s 's salary : %d \n",name, salary)

    where() // Call your debug function

    // some more code
    costOfLiving := salary * 1000000
    fmt.Printf("Cost of living : %d \n", costOfLiving)

    where() // Call your debug function
}


Output:

2020/06/03 19:53:08 
Pranava 's salary : 10 
2020/06/03 19:53:08 
Cost of living : 10000000 
2020/06/03 19:53:08

Conclusion:

I will appreciate the constructive feedback about the article. Please share ways to debug go code from your experience.

Thank you :)

Hacker-rank SQL Median calculation

Pranava S Balugari — Tue, 12 May 2020 10:59:13 +0000

It was really interesting to calculate Median of entries in the SQL database.

What is Median ?

Refer the link about [Median|https://en.wikipedia.org/wiki/Median]

Hackerrank SQL problem

A median is defined as a number separating the higher half of a data set from the lower half. Query the median of the Northern Latitudes (LAT_N) from STATION and round your answer to 4 decimal places.

SET @index := -1;

SELECT
   ROUND(AVG(s.LAT_N), 4)
FROM
   (SELECT @index:=@index + 1 AS index, LAT_N
    FROM STATION
    ORDER BY LAT_N) AS s
WHERE
s.index IN (FLOOR(@index / 2) , CEIL(@index / 2));

Javascript [Array] methods

Pranava S Balugari — Wed, 15 Apr 2020 23:09:20 +0000

The Array.prototype property represents the prototype for the Array constructor.Array instances inherit from Array.prototype. As with all constructors, you can change the constructor's prototype object to make changes to all Array instances.

Array.prototype.concat:


var array_1 = [1, 2, 3];
var array_2 = ['apple','orange','pear'];
var a1 = array_1.concat(array_2)

console.log("combined array :",a1);
>[1, 2, 3, 'apple', 'orange', 'pear']

Array.prototype.join:

var array = ['Pranava', 'Swaroop', 'Balugari'];
var a1 = array.join(' ');
var a2 = array.join('-');
var a3 = array.join();

console.log("joined array with a space :",a1);
console.log("joined array with a hyphen :",a2);
console.log("joined array without delimiter:",a3);
>'Pranava Swaroop Balugari'
>'Pranava-Swaroop-Balugari'
>'Pranava,Swaroop,Balugari'

Array.prototype.IndexOf:

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

// Check for any occurrence of "gorilla" in an array.
var arr = ['apple', 'gorilla','orange','banana'];

console.log("Orange found:", arr.indexOf("gorilla") != -1);  # true
console.log("Orange found:", arr.indexOf("mango") != -1);    # false

Array.prototype.lastIndexOf:

Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.

// Check for any occurrence of "gorilla" in an array.
var arr = ['apple', 'gorilla','gorilla','banana'];

console.log("Gorilla found at:", arr.lastIndexOf("gorilla"));  # 2
console.log("Mango found:", arr.indexOf("mango") != -1);    # -1

Array.prototype.every

The every() method tests whether all elements in the array pass the test implemented by the provided function.

function isNumGreaterThanTen(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isNumGreaterThanTen);   // false
[12, 54, 18, 130, 44].every(isNumGreaterThanTen); // true

Array.prototype.some:

Returns true if at least one element in this array satisfies the provided testing function.

function isNumEven(element, array) {
  return (element % 2) === 0;
}
[199, 5, 9, 13, 45].every(isNumEven);   // false
[12, 54, 18, 130, 44].every(isNumEven); // true

Array.prototype.forEach

Calls a function for each element in the array.

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

[2, 5, 9].forEach(logArrayElements);
// logs:
> a[0] = 2
> a[1] = 5
> a[2] = 9

Array.prototype.map

Creates a new array with the results of calling a provided function on every element in this array.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
> roots is now [1, 2, 3], numbers is still [1, 4, 9]

Array.prototype.filter

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

function isNumEven(value) {
  return value % 2 === 0;
}
var filtered = [12, 5, 8, 130, 44].filter(isNumEven);
> filtered is [12,8, 130, 44]

Array.prototype.reduce

The reduce() method applies a function against an accumulator and each value of the array

# Accumulator
var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6
# Flatten arrays
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
> flattened is [0, 1, 2, 3, 4, 5]

Array.prototype.slice

The slice() method returns a shallow copy of a portion of an array into a new array object.

// Using slice, create newCar from myCar.
var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
var newCar = myCar.slice(0, 2);


// Display the values of myCar, newCar, and the color of myHonda
//  referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

// Change the color of myHonda.
myHonda.color = 'purple';
console.log('The new color of my Honda is ' + myHonda.color);

// Display the color of myHonda referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

Conclusion:

That's not it. There are more to Mutator , Accessor and iterator methods on the array instances than the ones mentioned above. I am sure developers will not use sea of methods available on Array object on a daily basis. Its always good to learn and understand how they work, with examples. Mozialla developer JS documentation will help you achieve that.

I will appreciate the constructive feedback about the article. Please share interesting and important JS utility methods and reference examples from your experience.

Thank you :)

charting with d3.js

Pranava S Balugari — Mon, 06 Apr 2020 02:31:12 +0000

I’ve been thinking quite a bit about how developers go about choosing and learning charting libraries. I feel d3.js is arguably the most influential tool among developer community for creating interactive data visualisations. My interest in d3 started when i visited the state of javascript website earlier this year (Jan 2020). I fell in love with the way charts were developed on the site as they explained things that are really hard to explain with words or just looking at the raw data.

I have gone through sample chapter from Fullstack d3 book by Amelia Wattenberger and built my first chart :)

I am a big fan of cricket and Sachin. I wanted to visualise how he performed from his debut to retirement every year. You can find the data i used to create a chart here. Sachin data by year - github gist.

Final output looks like below

Let's see the steps to get there.

Step - 1

Download latest d3 library file and place it in a folder where index.html is created.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Timeline</title>
    </head>
    <body>
        <div id="wrapper"></div>

        <script src="./d3.v5.js"></script>
        <script src="./chart.js"></script>
    </body>
</html>

Step - 2

Use node live-server or python SimpleHTTPServer to start a dev server in current folder.

 live-server // starts the webserver on port 8080

 python -m SimpleHTTPServer // start the webserver on port 8000

Step - 3

Let's make use of d3 internal functions to generate a line chart. I will explain the meaning of each line with in the js file.

async function drawLineChart() {

    // 1. Read the data from json
    const dataset = await d3.json("./sachin-by-year.json")

    // 2. Verify if your data is retrieved correctly.
    console.log("what is dataset ", dataset)

    /* 3. Define x and y axis accessor methods 
       (x-axis -> Year, y-axis -> runs). Accessor methods 
       helps to fetch the to be plotted info from the datapoint.
       Say the datapoint represent an object e.g dataset[0] 
       from dataset.
    */
    const yAccessor = d => parseInt(d.runs)
    const dateParser = d3.timeParse("%Y")
    const xAccessor = d => dateParser(parseInt(d.year))

    /*
      4. Define chart dimensions (external border, #wrapper) 
         and bounds (internal border, covers axes labels or info 
         on the chart). In general the dimensions depend on the
         amount of space we get on the page for the chart.
    */
    let dimensions = {
        width: window.innerWidth * 0.6,
        height: 400,
        margin: {
            top: 15,
            right: 15,
            bottom: 40,
            left: 60,
        },
    }
    dimensions.boundedWidth = dimensions.width -
        dimensions.margin.left -
        dimensions.margin.right
    dimensions.boundedHeight = dimensions.height -
        dimensions.margin.top -
        dimensions.margin.bottom


    /*
       5. Select an external wrapper (for the chart).
       d3's d3-selection module helps in querying 
       and manipulating the DOM. (If you are familiar with
       JQuery module methods, this module doco is easy
       to understand). 
    */
    const wrapper = d3.select("#wrapper")
        .append("svg")
        .attr("width", dimensions.width)
        .attr("height", dimensions.height)

    /* 
      Note: This explanation is copied from book. FYI

      The <g> SVG element is not visible on its own, but 
      is used to group other elements. Think of it as the 
      <div> of SVG — a wrapper for other elements. We can 
      draw our chart inside of a <g> element and shift it 
      all at once using the CSS transform property.
    */
    const bounds = wrapper.append("g")
        .style("transform", `translate(${
        dimensions.margin.left
      }px, ${
        dimensions.margin.top
      }px)`)

    // 6. Define scales (x and y scales)
    const yScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yAccessor))
        .range([dimensions.boundedHeight, 0])

    /*
       I want to understand the years when sachin
       Scored just 500 runs in a year. (Area with light
       blue colour in the graph depicts that)
    */
    const runsLessThan500InAYear = yScale(500)
    const runsLessThan500 = bounds.append("rect")
        .attr("x", 0)
        .attr("width", dimensions.boundedWidth)
        .attr("y", runsLessThan500InAYear)
        .attr("height", dimensions.boundedHeight
            - runsLessThan500InAYear)
        .attr("fill", "#e0f3f3")

    // x axis defines years from 1989 to 2012
    /*
      Note: I thought of using x axis labels as scaleLinear()
      but the problem with that was labels were treated as numbers
      and the display was like 1,998, 1,999 etc which is wrong.
      Hence i used date parser to show the labels like years.May be
      there is a better way to do this.
    */
    const xScale = d3.scaleTime()
        .domain(d3.extent(dataset, xAccessor))
        .range([0, dimensions.boundedWidth])

    // 7. Map data points now
    const lineGenerator = d3.line()
        .x(d => xScale(xAccessor(d)))
        .y(d => yScale(yAccessor(d)))

    /* 
       Use 'attr' or 'style' methods to add css

       Note: As this is a simple example, CSS and JS are 
       mixed.
    */
    const line = bounds.append("path")
        .attr("d", lineGenerator(dataset))
        .attr("fill", "none")
        .attr("stroke", "#af9358")
        .attr("stroke-width", 2)

    // 8. Draw bounds (x and y both axes)
    const yAxisGenerator = d3.axisLeft()
        .scale(yScale)

    const yAxis = bounds.append("g")
        .call(yAxisGenerator)

    const xAxisGenerator = d3.axisBottom()
        .scale(xScale)

    /*
     d3 don't know where to place the axis 
     line and hence the transform property required to 
     place it where we want. In this case we displace it 
     along y axis by boundedHeight.
    */
    const xAxis = bounds.append("g")
        .call(xAxisGenerator)
        .style("transform", `translateY(${
        dimensions.boundedHeight
      }px)`)

}
drawLineChart()

Conclusion

I don't have enough dev experience with d3 to compare it with charting libraries out there and provide merits. My next step is to get my hands dirty with d3 library by reading Amelia Wattenberger's book :P. I will share the code snippets as and when i learn a concept in the book through dev.to articles :).

I will appreciate the constructive feedback about the article. Please share your experience with d3 and any good books to learn the subject.

Thank you :)

Javascript pure function & Jesting

Pranava S Balugari — Mon, 30 Mar 2020 06:42:41 +0000

Of all things you can test, the easiest thing is a pure function because they require no setup or teardown. In this exercise, i want to pen down my take on testing a pure function using one of the functions we use in my project isPasswordEnteredValid? 😃.

isPasswordEnteredValid? is a function which takes a string and returns a boolean.


// For simplicity sake RegEx's are edited.

const checkLengthRegex = /(^.{8,}$)/
const checkNonAlphaNumeric = /\W/
const checkUpCaseRegex = /[A-Z]/
const checkLowerCaseRegex = /[a-z]/
const checkIntRegex = /(?=.*[0-9])/
const checkLength = (pwd: string) => checkLengthRegex.test(pwd)
const checkUpCase = (pwd: string) => checkUpCaseRegex.test(pwd)
const checkLowerCase = (pwd: string) =>  checkLowerCaseRegex.test(pwd)
const checkNonAlphaNumericCase = (pwd: string) => checkNonAlphaNumeric.test(pwd)
const checkInt = (pwd: string) => checkIntRegex.test(pwd)

function isPasswordEnteredValid(password) {
  return (
    checkLength(password) &&
    checkNonAlphaNumeric(password) &&
    checkIntRegex(password) &&
    checkUpCase(password) &&
    checkLowerCase(password)
  )
}

For most of the util functions like above general approach is to add a 'test' block for each of the use case.


describe('isPasswordEnteredValid', () => {

    test('returns false if password length is < 8', () => {
        expect(isPasswordEnteredValid('pra4!')).toBeFalsy()
    })

    test('returns false if password has no alphabets', () => {
        expect(isPasswordEnteredValid('20034059!')).toBeFalsy()
    })

    test('returns false if password has no numbers ', () => {
        expect(isPasswordEnteredValid('Pranava')).toBeFalsy()
    })

    test('returns false if password has no uppercase letters', () => {
        expect(isPasswordEnteredValid('pranava!')).toBeFalsy()
    })

    test('returns false if password has no lower case letters', () => {
        expect(isPasswordEnteredValid('PRANAVA1!')).toBeFalsy()
    })

    test('returns false if password has no non-alphanumeric characters', () => {
        expect(isPasswordEnteredValid('Pranava')).toBeFalsy()
    })

    test('returns true if the password is strong', () => {
        expect(isPasswordEnteredValid('Balugari034059!')).toBeTruthy()
    })
})

Another approach is to group the happy path and unhappy path test cases using an array or object.


describe('isPasswordEnteredValid', () => {
  const validPasswords = ['Balugari034059!']
  const inValidPasswords = [
    'pra4!',
    '20034059!',
    'Pranava',
    'pranava!',
    'PRANAVA1!',
    'Pranava',
  ]

  validPasswords.forEach(password => {
    test(`allows ${password} >>`, () => {
      expect(isPasswordEnteredValid(password)).toBeTruthy()
    })
  })

  inValidPasswords.forEach(password => {
    test(`disallows ${password} >>`, () => {
      expect(isPasswordEnteredValid(password)).toBeFalsy()
    })
  })
})

I tend to use above mentioned conventions to test a javascript functions at my work. Recently, i came across jest-in-case library which provides another convention to test javascript functions.


import cases from 'jest-in-case'

const validPasswordUseCases = {
   'valid password': {
      password: 'Balugari034059!',
    },
}

const invalidPasswordUseCases = {
    '< 8 characters': {
      password: 'pra4!',
    },
    'no alphabets': {
      password: '20034059!',
    },
    'no numbers': {
      password: 'Pranava!',
    },
    'no upcase characters': {
      password: 'pranava!',
    },
    'no lowercase characters': {
      password: 'PRANAVA1!',
    },
    'no non-alphanumeric characters': {
      password: 'Pranava',
    },
}

// cases here provide abstraction to the function
// to be tested.
cases(
  'isPasswordEnteredValid: valid passwords',
  ({pwd}) => {
    expect(isPasswordEnteredValid(pwd)).toBeTruthy()
  },
  validPasswordUseCases,
)

cases(
  'isPasswordEnteredValid?: invalid passwords',
  ({password}) => {
    expect(isPasswordEnteredValid(password)).toBe(false)
  },
  invalidPasswordUseCases,
)

Wrapping up

I hope this article becomes a reference for developers who are looking to write tests for javascript util functions.

I will appreciate the constructive feedback about the article. Please share approaches you have come across in your experience when testing util functions in javascript.

Thanks to Kent C Dodds and Frontendmasters courses :)

React state management

Pranava S Balugari — Fri, 27 Mar 2020 10:57:36 +0000

React class based state
React hook based state

I have been working with React for over 12 months now. When i was thinking to pen down the usage of state in react, only approach available was class based state. React landscape evolved so quickly to provide another approach to handle state using hooks. Before another approach enters react world 😉 i intend to provide the usage with a simple counter example (Classic 😃)

Do you really need your component to implement a state?. I think fair answer would be 'It depends'. Dan Abramov's tweet kind of summarises it.

React class based state

Let's start by implementing simple counter in a traditional state model. So one of the classic ways that we can hold on to state is in the constructor, pass the props up to the actual component and then use this.state. There are two versions to React.setState. First one is React.setState Object version and another one is React.setState function and callback version.


// Not including imports for simplicity sake

// React.setState Object version
class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }

    this.handleDecrement = this.handleDecrement.bind(this)
    this.handleIncrement = this.handleIncrement.bind(this)
    this.handleReset = this.handleReset(this)
  }


  handleIncrement() {
    this.setState({
      count: this.state.count + 1
    })
  }

  handleDecrement() {
   this.setState({
      count: this.state.count - 1
    })
  }

  handleReset() {
    this.setState({
      counter: 0
    })
  }

  render() {
    const { counter } = this.state

    return (
      <div className="Counter">
        <p className="count">{counter}</p>
        <section className="controls">
          <button onClick={this.handleIncrement}>Increment</button>
          <button onClick={this.handleDecrement}>Decrement</button>
          <button onClick={this.handleReset}>Reset</button>
        </section>
      </div>
    );
  }
} 

somewhere in index.html we will use the component :).

<Counter />

A nicer version to the above implementation would be using this.setState with function and callback.


// Not including imports for simplicity sake

// React.setState function and callback version
class Counter extends Component {
  state = {
    counter: 0
  }

  handleIncrement = () => {
    // Added max and steps props to show 
    // the usage of the setState functions with arguments
    // (state and props)
    this.setState((state, props) => {
      const {
        max,
        step
      } = props
      if (state.counter >= max) return;
      return {
        counter: state.counter + step
      }
    }, 
    () => { // This call back runs after state is set
      console.log("state counter ", this.state.counter)
    })
  }

  handleDecrement = () => {
   this.setState((state) => {
     return {
       counter: state.counter - 1}
    })
  }

  handleReset = () => {
    this.setState({
      counter: 0
    })
  }

  render() {
    const { counter } = this.state

    return (
      <div className="Counter">
        <p className="count">{counter}</p>
        <section className="controls">
          <button onClick={this.handleIncrement}>Increment</button>
          <button onClick={this.handleDecrement}>Decrement</button>
          <button onClick={this.handleReset}>Reset</button>
        </section>
      </div>
    );
  }
}

Somewhere in index.html we will use the Counter component.

<Counter max={15} step={3} />

React hook based state

If we closely observe, in the class based component 'state' is a property on the class, and this .setState is a method. We never define those ourselves, but when we extend the class with React.Component class counter extends component, then we inherit all those helpful methods and that allows us to update the value and trigger the render, so on and so forth. These are called 'stateful components' in react. There is another way to create a component which is to define a regular javascript function and pass it few props and it did some stuff and whatever comes out on the other side was rendered to the page. These are called 'stateless components' or 'functional components'. When i started working with react was i used stateful components because it's easier to use refactor them for state if required. React16+ introduced another way to use state with functional components known as 'React hooksssssssssss!!!'

The more i use functional components more i realise that FC's are cleaner and easier to refactor over the period of time. we'll actually see that class based Counter component becomes a much simpler component as we refactor. Let's see the implementation now

import React, { useState } from 'react';

const Counter = ({ max, step}) => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => setCount((c) => c + 1);
  const handleDecrement = () => setCount((c) => c - 1);
  // Another way to write above methods
  // const handleIncrement = () => setCount(count + 1);
  // const handleDecrement = () => setCount(count - 1);
  const handleReset = () => setCount(0)

  return(
    <div className="Counter">
        <h5> {message }</h5>
        <p className="count">{count}</p>
        <section className="controls">
          <button onClick={handleIncrement}>Increment</button>
          <button onClick={handleDecrement}>Decrement</button>
          <button onClick={handleReset}>Reset</button>
        </section>
    </div>
  )
}

Somewhere in index.html we will use the Counter component.

<Counter max={15} step={3} />

Let's see the usage of useEffect() by adding a simple functionality to the component. Requirement is to change the title whenever the count value changes in the component.

import React, { useState } from 'react';

const Counter = ({ max, step}) => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => setCount((c) => c + 1);
  const handleDecrement = () => setCount((c) => c - 1);
  // Another way to write above methods
  // const handleIncrement = () => setCount(count + 1);
  // const handleDecrement = () => setCount(count - 1);
  const handleReset = () => setCount(0)

  // Below code will be interpreted as
  // When ever the value of the count change,
  // Change the page title to reflect the updated count.
  useEffect(() => {
    document.title = `Count: ${count}`
  }, [count])

  return(
    <div className="Counter">
        <h5> {message }</h5>
        <p className="count">{count}</p>
        <section className="controls">
          <button onClick={handleIncrement}>Increment</button>
          <button onClick={handleDecrement}>Decrement</button>
          <button onClick={handleReset}>Reset</button>
        </section>
    </div>
  )
}

Let's spice up the above example by adding one more requirement. This time we save the changes to localstorage.


import React, { useState, useEffect } from 'react';

const getStateFromLocalStorage = () => {
  const storage = localStorage.getItem('counter');
  if (storage) { return JSON.parse(storage).count; }
  return 0;
};

const storeStateInLocalStorage = count => {
  localStorage.setItem('counter', JSON.stringify({ count }));
};

// Added max and step props to show usage of FC with props.
const Counter = ({ max, step }) => {
  // Instead of defaulting to 0 this time 
  // we fetch the value from the localStorage.
  const [count, setCount] = useState(getStateFromLocalStorage());

  const handleIncrement = () => {
    setCount(cnt => {
      if (cnt >= max) return cnt;
      return cnt + step;
    });
  };

  const handleDecrement = () => setCount((c) => c - 1);
  const handleReset = () => setCount(0);

  useEffect(() => {
    document.title = `Counter: ${count}`;
  }, [count]);

  // Whenever the count is changed the value is 
  // pushed to localStorage
  useEffect(() => {
    storeStateInLocalStorage(count);
  }, [count]);

  return (
    <div className="Counter">
      <p className="count">{count}</p>
      <section className="controls">
        <button onClick={handleIncrement}>Increment</button>
        <button onClick={handleDecrement}>Decrement</button>
        <button onClick={handleReset}>Reset</button>
      </section>
    </div>
  );
};

export default Counter;

I will wind up the article by refactoring the above implementation with a custom hook which transacts with LocalStorage.


import React, { useState, useEffect } from 'react';

// Custom hook to save to LS and fetch from LS
const useLocalStorage = (initialState, key) => {
  const get = () => {
    const storage = localStorage.getItem(key);
    if (storage) return JSON.parse(storage).value;
    return initialState;
  };

  const [value, setValue] = useState(get());

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify({ value }));
  }, [value]);

  return [value, setValue];
};

const Counter = ({ max, step }) => {
  const [count, setCount] = useLocalStorage(0, 'count');

  const handleIncrement = () => {
    setCount(cnt => {
      if (cnt >= max) return cnt;
      return cnt + step;
    });
  };

  const handleDecrement = () => setCount((c) => c - 1);
  const handleReset = () => setCount(0);

  useEffect(() => {
    document.title = `Counter: ${count}`;
  }, [count]);


  return (
    <div className="Counter">
      <p className="count">{count}</p>
      <section className="controls">
        <button onClick={handleIncrement}>Increment</button>
        <button onClick={handleDecrement}>Decrement</button>
        <button onClick={handleReset}>Reset</button>
      </section>
    </div>
  );
};

export default Counter;

Wrapping up

I hope the article helps in understanding the usage of state management in pure react.

I will appreciate the constructive feedback about the article. Please share patterns and anti-patterns you have come across in your experience with management of react state in the comments section below.

Additional documentation to read about hooks is available here https://reactjs.org/docs/hooks-intro.html. Recommend the frontend masters course by Brian Holt https://frontendmasters.com/courses/intermediate-react-v2/

Forem: Pranava S Balugari

TDD approach

interactively build a docker image

Prerequisites:

Clumsy Factorial

GoLang for loop variations

Table Of Contents

Pointer semantic form

Value semantic form

Go - debug using runtime & log

Conclusion:

Hacker-rank SQL Median calculation

What is Median ?

Hackerrank SQL problem

Javascript [Array] methods

Array.prototype.concat:

Array.prototype.join:

Array.prototype.IndexOf:

Array.prototype.lastIndexOf:

Array.prototype.every

Array.prototype.some:

Array.prototype.forEach

Array.prototype.map

Array.prototype.filter

Array.prototype.reduce

Array.prototype.slice

Conclusion:

charting with d3.js

Step - 1

Step - 2

Step - 3

Conclusion

Javascript pure function & Jesting

Wrapping up

React state management

Table of contents

React class based state

React hook based state

Wrapping up