Recently after a hiatus to competitive programming, I went back to it again but faced tremendous difficulties, during my graduation days I used to code in java/c/c++ and those wore quite the preference for most of top or above average coders on multiple coding platforms for competitive programming which mostly focuses on time complexity of your algorithm,I also personally used java back then, but then the thing happened and I fell in love with javascript.

Long story short I went back to CodeChef ( competitive programming platform) but found it quite difficult to get started, along with some difficulties to…


Data types are used to classify one particular type of data in programming languages. For instance, a number and a string of characters are different types of data that will be treated differently by JavaScript.

This is important because the specific data type you use will determine what values you can assign to it and what you can do to it. This is to say, to be able to do operations with variables in JavaScript, it is important to understand the data type of any given variable.

In this tutorial, we will go over how data types work in JavaScript…

So If you want to do code-splitting in a server-rendered app you may want to go with Loadable-Components which is also react’s suggested way since the React.lazy and Suspense is not yet available for server-side rendering.

Loadable-Components is a library to solve the React code-splitting client-side and server-side.

Why we want to use loadable components:

React router 2 & 3 provides syntax to supply component in component attribute ,so internally it uses getComponent function which on server essentially waits for your component to resolve and which gets loaded and then rendered from your server out of box also it passes…

Photo by Pankaj Patel on Unsplash

It is the process of improving the ranking( or visibility) of a website in search engines.
SEO helps search engines to understand your site better which means when someone searches some keyword, you are more likely to appear in their results.
Check out the points which you can apply to your site so that your content will be shown to a lot more potential users.

Below are the points that you can look out for which will ensure you that your page is optimized for search engines.

  • Create a robots.txt file. …

Photo by Jakob Owens on Unsplash

In this post, we will discuss how to implement a micro frontend with React.

Micro frontends are a concept that being borrowed from the micro service world where the big monolith services are being broken into smaller independent services. Currently when we developed Front end projects all of our code sits at a commonplace and we end up creating a big monolith project.

To overcome this drawback we can think of our application as different independent applications and then integrating all different pieces to get the final app.

To keep this post specific to micro frontends, in the following setup…

Photo by Kaung Myat Min on Unsplash

Adding multilingual support (i18n) for a site or a web application is a real stake, as it often raises important questions such as the data structure, the routing … Of course there are solutions, but too often these are too rigid and/or complex to set up, particularly in a static site context.

However, this complexity is very often superfluous: thanks to React Context and the dynamic routes from Next.js, adding multilingual support can be much easier than it seems!

Based on a Next.js …

In this article, we will be implementing the lazy loading of images using Intersection observers. Well, this is not an entirely new thing but we will be adding few handful tricks like first a low-quality placeholder image is loaded, and then the actual image is loaded.

This makes sure that even if you are running the application on low data throughput, your user’s interest is not lost.

First, we will be loading the low-quality image thumbnail, which will act as a placeholder and parallelly make the request for the high-resolution image. …

Funnel Chart with Metric Labels & %age Drop

So you must have heard how hard 👷🏼‍♂ and mathematical D3 is, but on the other side, you would also have seen these tool D3 visualization 📈 (using it you you can create DOM elements using your data to make complex visualization and since it uses HTML, CSS which means web means those can run on any modern browser) like that on Covid-19 sites 🦠 😷. And wonders hey this is cool, can I ever understand them in-dept and math involved under this…also you might have been intrigued by them to try once but then those examples at bl.ocks

To visit my demo 😅

To visit source code 😈 goto my github

Step 0:

Create an index.html which would serve as your document

Step 1:

First thing first include p5.js using CDN inside your document

<script src=”"></script >

Step 2:

Add a script file say script.js to document.

<script src="./script.js"></script>

This is where you put your logic.

Step 3.

Add a css file to document say style.css

<link rel="stylesheet" href="./style.css" />

This is where you put your styling.

This is how your index.html shall look like

<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<title>Color Matching Game </title>

<h2>Color Matching…

Photo by Josh Hild on Unsplash

First Bad Version

@param {integer} n Total versions
@return {integer} The first bad version
var solution = function(isBadVersion) {

return function(n) {
let left = 1;
let right = n;
while(left <= right){
let middle = left + Math.floor((right - left) / 2);
if ((middle-1 > 0 && !isBadVersion(middle-1)) || (middle === 1)){
return middle;
right = middle - 1;
left = middle + 1;
return -1;

Jewels and Stones

* @param {string} J
* @param {string} S
* @return {number}
var numJewelsInStones = function(J, S) {…

Shobhit Singh

{js}{react.js}{node.js} developer😎 author @

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