DEV Community: K.V.Harish

what are the things to consider while building a banking application?

K.V.Harish — Fri, 04 Sep 2020 06:32:00 +0000

Bored of console.log?

K.V.Harish — Tue, 23 Jun 2020 11:34:06 +0000

A useful and fun thing about console.log is that you can add CSS styles to it. You can do it with the help of %c variable which gets replaced with the respective styles passed in as a parameter.

You can revert the style previously applied using another %c with an empty parameter passed in order.

You can be as creative as you like

You can also reuse styles using variables

This feature can really come in handy when you want to differentiate the console logs added at different parts of the code.

Chrome debugger breakpoints not working with create-react-app

K.V.Harish — Sun, 21 Jun 2020 11:19:51 +0000

A few days ago I came across a weird issue with my Chrome debugger when I was working on my ReactJS application created using create-react-app(3.4.1) and I did some logical error so as always I kept a breakpoint at the line of suspicion to check the issue and kept updating the code as the server was running. For some reason, the debugger was not pausing at the breakpoint. I went around searching the internet to find if any other person has faced a similar issue or it was just me.

I found an open issue in create-react-app with the Chrome debugger breakpoints https://github.com/facebook/create-react-app/issues/6074. A fix was released but later reverted due to an issue with Webpack.

One suggested workaround is to add --no-cache in your package.json which worked for me

From

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

"scripts": {
  "start": "react-scripts start --no-cache",
  "build": "react-scripts build",
  "test": "react-scripts test --no-cache",
  "eject": "react-scripts eject"
}

If this does not work for you, you can try other suggestions under the issue in the GitHub.

From the ongoing discussion it seems like we will have to wait for a while for the issue to be fixed.

What branching strategy do you use in your company or in your product? What are its pros and cons?

K.V.Harish — Wed, 30 Oct 2019 15:32:35 +0000

Play videos inline in HTML5 video player on iOS

K.V.Harish — Tue, 02 Oct 2018 04:23:06 +0000

To give a background. We were using an older version of VideoJS (5.4.4) which does not prevent videos from playing in the native iOS video player like in the below image. So we did not have any control over the playing video.

Image courtesy - http://www.iphonehacks.com

With iOS 12 release, our mobile app which was developed in Cordova crashed every time the user exit from fullscreen.

We analysed the issue and were able to find a solution to force videos to play inline inside the application instead of letting iOS take control over the video.

Add playsinline or webkit-playsinline to your HTML5 video tag. And go to your Cordova config.xml file and add the following preference for iOS platform.

<preference name="AllowInlineMediaPlayback" value="true"/>
~~~~~~~~

Now when we built our application we were successful in preventing the video from playing in native player but we could see the native controls on the video player and on clicking it the user could still switch to iOS native video player. We tried adding all possible css styles suggested on different forums and stackoverflow but those did not help. We finally had to upgrade to latest VideoJS version in which the native controls were hidden. 


Hope this article is helpful.

JavaScript: Reduce the number of conditional operators used in the expression

K.V.Harish — Wed, 23 May 2018 16:15:27 +0000

We would have all come across a situation where the number of conditional operators to be used in an expression is more like in the below example.

const firstCondition = true,
      secondCondition = true,
      thirdCondition = true,
      fourthCondition = false,
      fifthCondition = true;

if(firstCondition && secondCondition && thirdCondition && fourthCondition && fifthCondition) {
    console.log("All the conditions met expectation");  
}
else {
    console.log("All the conditions did not meet expectation");
}

if(firstCondition || secondCondition || thirdCondition || fourthCondition || fifthCondition) {
    console.log("Atleast one of the conditions met expectation");  
}
else {
    console.log("None of the conditions met the expectation");
}

//Output:
//All the conditions did not meet the expectation
//At least one of the conditions met expectation

Code quality tools like ESLint, SonarQube, etc will actually suggest us to optimize this code to have fewer conditional operators. So how do we do that?

There are many ways to solve this. I am going to give a simpler way (Updated). If you have an easier or better solution please feel free to leave it in the comment section.

const firstCondition = true,
      secondCondition = true,
      thirdCondition = true,
      fourthCondition = false,
      fifthCondition = true;

const conditionsToCheck = [firstCondition, secondCondition, thirdCondition, fourthCondition, fifthCondition]

if(conditionsToCheck.every(condition => condition)) {
    console.log("All the conditions met expectation");
}
else {
    console.log("All the conditions did not meet expectation");
}

if(conditionsToCheck.some(condition => condition)) {
    console.log("Atleast one of the conditions met expectation");
}
else {
    console.log("None of the conditions met the expectation");
}

//Output:
//All the conditions did not meet the expectation
//At least one of the conditions met expectation

We can also mix in conditions like below and it would work without any problem.

const conditionsToCheck = [firstCondition, secondCondition || sixthCondition, thirdCondition, fourthCondition, fifthCondition && seventhCondition];

Unless you are supporting IE8 and below you should fine using Array some and every methods.

I hope this article is helpful.