focuses on folks who are coming from class components

Image for post
Image for post
Typical overview of what we are going to do in this post

In this article, I tried my best to make it easier for you to understand what are react hooks. I have written this for guys coming from traditional class component pattern who want to explore react hooks.

We’ll cover how to use useState , useEffect() and more techniques to simulate the experience you were having in class component era

🎣 Hooks and Class Components

Hooks don’t work inside classes and that gives us benefit of using them in functional component.

But what about lifecycles and state which we were leveraging in class components? …


Image for post
Image for post
https://charts-dashboard-vue.netlify.com

Are you looking for a quick boilerplate for your awesome SaaS dashboard project? You’ve come to the right place. We have created a Vue dashboard template that is integrated with an ElasticSearch backend, vue-material as a design system and vue-chartjs for rendering the charts UI widgets. You can change this easily to connect with your own dataset.

In addition to the pre-built template, we also explain how it works with a code example so that you can create a dashboard UI of your own from the ground up.

Not Just Another Dashboard Template

While there are many templates available for mock dashboards, they miss out…


Image for post
Image for post
Image: Check out the live demo over here

Are you looking for a reusable boilerplate for your next ▦ data grid project? You’ve come to the right place. We have created a React based data grid template that is powered by an ElasticSearch backend. It is searchable, filterable and can render thousands of rows on the frontend thanks to react-virtualized.

Why Yet Another Data Grid Template

We hear you! While there are plenty of data grid libraries and templates available that offer an amazing assortment of frontend functionalities, they often don’t consider the performance impact of rendering everything into the DOM and/or how to connect to a backend that doesn’t become limiting as data…


Image for post
Image for post
Try the template live over here — https://charts-dashboard.netlify.com/

Are you looking for a quick boilerplate for your awesome SaaS dashboard project? You’ve come to the right place. We have created a React dashboard template that is integrated with an ElasticSearch backend and uses recharts and apexcharts for rendering the charts UI widgets. You can change this easily to connect with your own dataset.

In addition to the pre-built template, we also explain how it works with a code example so that you can create a dashboard UI of your own from the ground up.

Not Just Another Dashboard Template

While there are many templates available for mock dashboards, they miss out on the…


Image for post
Image for post
Photo by Helloquence on Unsplash

Suppose you are doing some calculation using an appropriate series of input. There is some computation done at every instance to derive some result. You don’t know that you had encountered the same output when you had supplied the same input. So it’s like you are doing re-computation of a result that was previously achieved by specific input for its respective output.

But what’s the problem here? Thing is that your precious time is wasted. You can easily solve the problem here by keeping records that map previously computed results. Such as using the appropriate data structure. …


The vast majority of algorithms of interest operate on data. Therefore, there are particular ways of organizing data that play a critical role in the design and analysis of algorithms. From that, we can say that data structures are simply ways of organizing data.

They are either linear or non-linear. Arrays and linked lists are examples of linear data structures. On the other hand, graphs and trees are forms of non-linear data structures.

  • For example, one common data structure is the list or array, which is an ordered sequence of values. Here’s a list of numbers: 0, 1, 1, 2…


One of the seemingly most-overused words in tech is “algorithm”. From the apps on your phone to the sensors in your wearables and how posts appear in your Facebook News Feed, you’ll be pushed to find a service that isn’t powered by some form of algorithm. I am too fascinated how algorithms made an impact in our day-to-day lives

An algorithm is a finite sequence of precise instructions for performing a computation or for solving a problem.

For example, here is an algorithm for singing that annoying song “99 Bottles of Beer on the Wall”, for arbitrary values of 99:

Image for post
Image for post
© Copyright 2014 Jeff Erickson http://www.cs.uiuc.edu/~jeffe/teaching/algorithms/


Image for post
Image for post

In Information Technology, a boilerplate is a unit of writing that can be reused over and over without change. By extension, the idea is sometimes applied to reusable programming, as in “boilerplate code.”

Legal agreements, including software and hardware terms and conditions, make abundant use of boilerplates.

For instance, a lawyer may give you a five page contract to sign, but most of the contract is boilerplate — meaning it’s the same for everyone who gets that contract, with only a few lines changed here and there.

In computer programming, boilerplate code or boilerplate refers to sections of code that…


It was just a whole new experience throughout the 6 months of journey working in a startup which carried so much memories that will be long lasted. I was being given position as front-end developer at a healthy event-tech startup.

Image for post
Image for post
Work area at Office

Early Days

The initial days, I was doing R&D in Vue.js(A javascript Framework). The thing was that CTO had given this task from very first day and reason for this was the one of the product’s dashboard was built on this technology.

After some days through doing R&D, I was given the source code of whole project on which I had to…


As of most used keyword of javascript, “this” will make sense.

Explaining in simple way that “this” keyword written in any scope doesn’t mean that it refers to that function/block scope only.

Scenario A :

Image for post
Image for post

Here when foo() is called then it logs out output of 2 because this will search for its object context if it has variable “a” but here we do not have object context (we will learn more about object context in a latter part)as we do not call it via .call( ) or .apply() method. …

Meet Zaveri

Frontend Engineer with a keen interest in Computer Science. Passionate about Open Source, JavaScript and its ecosystem.

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