Using Array.splice() helper method:

Using Array.slice() helper method:

Using Array’s length property:

Using Array.filter helper method: (when we don’t know the index of item)

And finally here is the performance of each approach. out of which Array.splice method win the race and it more performant.

An Array is essential data structure we extensively use in our day to day programming. In JS specifically we have lot of options when we need to work on array of data. Based on what we want as a result of iteration, we need to choose the right iteration option for better readability and efficiency.


  1. for operator :-
    with for-operator we can iterate over array with index. we need to calculate the index ourself to get element of an array.
  2. for…of operator :-
    This operator lets us to directly get an element so we do not need to calculate the index…

Publishing React app to Firebase using Github Action

It is been while github action has publically available to everyone to try it out. I started learning it to apply it in my side project and here are my observations.

Action (with respective to github) is a independent unit of work, that we wish to perform it on our code-base. (eg: Performing lint analysis, Generating code coverage report, triggering external notification) when some event (code merged, review comments added, review request, issue opened etc) is happening on the codebase.

Action constructs :-

Action is simple unit of work (eg: perform lint…

When we think about improving the performance of our app, there are two major kind on which we should invest our time to give better experience to user.

  1. Fast load time
  2. Fast runtime

Fast load time

The speed in which user able to see our content when user type our url in browser address bar. There already blendy of talks around this area about what are all the best practices we should follow to deliver content faster.

Fast runtime

The speed in which user able to interact with our page. Example when the user click on checkout button (if your…

Haven’t heard about that, don’t worry I was also felt weird at first time and i sat down read through all the materials that clarifies what it is why it is and what not.

I thought to share it with you all the material gone through. All this story started by facebook’s optimization strategy of loading every widgets (eg:- Feeds, Chat, Contacts) independently and parallely to deliver better experience to user.

Micro Frontend beginning story:

After that it has evolved much and people started to speak about it

and starting to adopt it depending on theirs needs

and some hate about it because of various reason

And some generic libraries came up to build micro-frontend easily with it’s own trade offs

The Javascript Promise is a crucial concept that every Javascript developer should know. Promises are crucial to asynchronous work in Js, and without a proper understanding of Promises, it is easy to get lost while reading about them. So I thought I’d explain it in a much simpler way by telling the story of an Ancient King’s life which exactly mimics how a Promise in Javascript behaves. I’ll also explain how to use Promise in various scenarios of the King’s life.

We all building a web app which is more Frontend heavy, We want show the content to user as quickly as possible even if data has to be fetched from server / after the heavy computation. In both case we don’t want to show spinner to user when ever we fetch / compute data for user; here we talk more specifically about when the data has to come from server.

Let’s take the problem of fetching data from server : -

when ever we navigate to the different page of our app, typically browser will wait for server to serve both assert files (image, js, css, fonts) and api json data…

I know you are super excited with new react hooks and building cool applications. Here I am going to show you how I validated a form built with hooks using hooks in a cleaner (opinionated) way.

I am not using any library, I wrote two tiny generic validation components using hooks that do the all major heavy lifting for form validation and simplifies life. Here is the demo. Here is the source of the validation components.

If you have faced the problem of validating a form and you ended up using a library, these two simple components will give…

This is the lesson i have learned over the week at work, i thought to document it for myself and also i thought, it may give some insights to you as well.

Don’t take what has been given to you as it is, ask why until you know what it is and what it will do and what is the benefit / impact of it.

When you take/initiate the change, take a minute to connect the all dots of where and all it will leads to change, and then take the action. if you are unclear about it go and…

Lazy loading made simple in react after the React.16.6.0 is released.

When we think to implement lazy loading in react, we go to npm, search for a package and we will use the most downloaded and stared library ( react-loadable ). It is awesome one i was using until react 16.6.0 is released.

After React 16.6.0 released, we may not need to use library, lazy loading support is build into react by providing a Suspense component (only for lazy loading right now. ;( )and lazy method.

All you need to do is that , just import as following and use…

Saravanan Ramupillai

Software Engineer @KiSSFLOW

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store