Here is how’s your DOM structured in the browser.


…newest version of react in oct’2020

React 17 is was advertised as a No New Feature release. However, you can find several high-impact improvements to React core. Out of these, the changes for JSX is quite noticeable.

Ideally when you upgrade from React 16 to 17, you must upgrade the whole project at once.

However, from React 17 onwards, there will be two upgrade options. Hereafter, you can decide to upgrade the entire project at once or in parts to the latest version.

Besides, there are many other changes in React 17 like New JSX Transform, Effect Cleanup Timing, Native…


Avoiding runtime errors using frontend monitoring tools

As developers, we always push our limits to test our applications before they go live. As we all know, no matter how far we test, runtime issues are inevitable. Therefore, monitoring every aspect of the application is a must.


Modules are the building blocks of an application. Modules are isolated pieces of code that when put together construct the larger functioning application. Node.js accomplishes this abstraction through the CommonJS standard or recently introduced ES module system.

The main idea of modules is to break down large pieces of code into smaller pieces. So by storing relevant code in individual files, code can be plugged into other portions of an application via importing. Importing a file means loading in code that is made available for use within the file.

A simple import statement with CommonJS would be something like the…


📄 Table of contents

➤ Misc

  • sum of numbers using ‘for’ loop vs ‘recursion’
  • increment the counter on each load
  • Chaining in JS (as in jQuery)
  • get all possible sub-strings of a given string
  • Find a value in an array of objects in JS
  • sum of no.s using Recursion vs traditional approach

The first approach utilizes a for-loop which again is not entirely functional so it is replaced with the recursive function addRecursively(). Like the for-loop which operates on an array, the recursive function takes in an array of numbers and begins adding the first to the subsequent one. …


When a web page is loaded, the browser creates a Document Object Model of the page. The DOM is a W3C (World Wide Web Consortium) standard.

The HTML DOM model is constructed as a tree of Objects:


Let us see mostly used new additions:

  • Dynamic Import
  • Optional Chaining Operator ?
  • Nullish Coalescing Operator ??
  • Private Class Variables
  • Promise.allSettled
  • Promise.Any

◉ Dynamic Imports

That means we do not have to import everything before, and we can import the dependencies only when we need them.

and we can import dependencies dynamically with async/await. As a result, the performance of the application improves by loading the modules at runtime.

How does it improve performance? With the conventional module system, we used to import the modules statically at the beginning of the program. Whether we need them now or later, we have to import…


📄 Table of Contents

<!DOCTYPE html><html><head><link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#wrapper{position:relative;}#parent{position: absolute;width: 310px;height: 100px;border: 2px solid black;overflow:hidden;}.child{width: 100px;height: 100px;border: 1px solid red;float:left;}#leftarrow{position: absolute;height: 25px;width: 25px;position:absolute;}#rightarrow{position: absolute;height: 25px;width: 25px;position:absolute;}</style></head><body><script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script><div  id="wrapper"><div id="parent"><div class="child"> 1 </div><div class="child"> 2 </div><div class="child"> 3 </div><div class="child"> 4 </div><div class="child"> 5 </div></div></div>…

Haml is a markup language predominantly used with Ruby that cleanly and simply describes the HTML of any web document without the use of inline code. It is a popular alternative to using Rails templating language (.erb) and allows you to embed Ruby code into your markup.

It aims to reduce repetition in your markup by closing tags for you based on the structure of the indents in your code. The result is markup that is well-structured, DRY, logical, and easier to read.

This article is going to introduce you to writing your HTML as Haml.

It can be used…


📄 Table of contents

◉ Why css ‘reset’ is important for the web developer?

As a web developer, you can have zero lines of code in your stylesheet and your HTML will look slightly different depending on which browser you view it in.

That’s why we reset it. On reset-ting, we override any styling that you would otherwise inherit.

To ensure that any website will look the same across different browsers, everyone must reset or start about every project with a few lines of code in their top-level CSS file that look something like this:

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

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