JavaScript, Web Development & Engineering Articles

"How do you build a consistent, reusable UI library for your product?" It's a collection of UI components, design tokens, and guidelines that teams use to build consistent user interfaces across products.

A comprehensive guide covering famous interview questions and in-depth explanations of all core system design topics for mid and senior frontend engineers.

"How do we build software where the business logic is completely independent of databases, frameworks, UIs, and external APIs — so we can swap any of them without touching the business code?"

Domain-Driven Design (DDD) is a way of building software where the business problem drives every design decision. The code should mirror the real world so closely that a business person — someone who has never written code — can read it and understand what it does.

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.