An array in JavaScript is a data structure that can be used to store fixed or variable number of elements. JavaScript has multple built-in methods that can be used for unique functionalities.

We have learned about Mutation observer API in our last blog, you can refer for basics and details. In this blog we'll learn how we can implement it in ReactJS using TypeScript. Mutation observer is an built-in JavaScript API that watch for changes made to the DOM tree and fires a callback function when it detects a change. tags: JavaScript, ReactJS, TypeScript

Mutation observer is an built-in JavaScript API that watch for changes made to the DOM tree and fires a callback function when it detects a change. Syntax is very similar to other JavaScript observer APIs - Intersection observer API and Resize observer API. Changes are passed using callback function as first arguments as a list of MutationRecord objects.

Resize Observer is the most preferred way to detect element size changes and makes changing content/styles or any custom action on a page based on resizing. The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.

CSS container queries allow us to style an element with regard to its parent or container size (width and height), not the viewport size like with media query. It allow us to organize our style elements at one place and plan our layout better.

We have learned about Intersection observer API in our last blog, you can refer for basics and details. In this blog we'll learn how we can implement it in ReactJS using TypeScript Intersection observer API helps detect the visibility of an element, i.e. if it’s in the current viewport, and also the relative visibility of two elements in relationship to each other - triggering a callback function.

JavaScript has 3 observer based APIs, one being Intersection and other two being Resize Observer and Mutation Observer. Intersection Observer in my opinion is the most useful because of how easy it makes things like infinite scrolling, lazing loading images, and scroll based animations. In JavaScript, attaching an event listener on 'scroll' to constantly trigger callback function on scroll can be performance-intensive, and if may end up having a sluggish user experience. Intersection Observer API helps build a better and well performant UI.

By default self refers to window object. Actually self is window.self which is different to this. If we are using a function that is executed in the global scope and is not in strict mode, this defaults to window.

Let's assume we have a scenario where we want to logout our opened application in another tab/window in the same browser in a React application or we have similar scenarios mentioned below

Let's assume, we have a requirement for the same where we want to broadcast to the same page, for example, if from profile page we have triggered logout and want this to reflect to the other tab and i have receiving event listener on the same page. We can achieve this using 2 BroadcastChannel, following steps can help achieve the same.

JavaScript offer many APIs for communication across different sections of an web application or with other web applications. 1. Broadcast channel 2. MessageChannel API 3. Window.postMessage() 4. Shared workers.

Proxies enable us to intercept and customize operations performed on objects (such as like reading/writing properties). They are a metaprogramming feature.

Big O notation is a mathematical notation used to describe the upper bound or worst-case scenario of the runtime complexity of an algorithm in terms of the input size. In simple terms Big O notation helps us determine, "How code slows as data grows."

A queue is a linear data structure that stores the elements sequentially. It uses FIFO, First and First Out approach. Where as, Stack follows LIFO, Last in First Out approach that is allows insertion and deletion operations from one end of the stack, that is top.

Deep copy is a technique where we recursively copy values of proprties without retaining its parent/original object reference. Unfortunately, JavaScript doesn't have any in-build method yet for deep copy.

Method chaining is a pattern of calling a method on another method of the same object. JavaScript this keyword refers to the current object in which it is called so if we return this from chained functions, we are actually passing entire object's context as input to next function.

Generators are function definition that lazly, on demand returns synchronous iteratables. Lazy means here, it (generator function) doesn't execute immediately when invoked, we can fetch data explicitly whenever you need.

Deno supports es6 module system that means each module will have separate file and JavaScript's import and export statement would work here. Unlike NodeJS, we'll have to explicitly mention file name extension while import.

useMemo returns a memorized value, primary purpose of this hook is to optimize performance. It remembers the results of output for a given set of inputs. React re-renders the component and entire child component hierarchy when an update is made and when this re-rendering involves some heavy computation, it may degrade the performance and poor user experience.

useCallback hook helps create memorized callback. useCallback memoizes our callback functions, so they not recreated on every re-render. Using useCallback correctly can improve the performance of our app significantly.

Understanding for-in and for-of loop

Git is the free and open source distributed version control system that's responsible for everything GitHub related that happens locally on your computer. This cheat sheet features the most important and commonly used Git commands for easy reference.

Angular manages creation, initialization, rendering, data-binding and removal of component and its child components. Angular offers life cycle hooks that provide more control over these key life moments and the ability to act when they occur.