Chetan Gawai
I am a Javascript and React enthusiast, and I absolutely love writing technical blogs. There's just something about the process of breaking down complex concepts and sharing my knowledge with others that really excites me. In my free time, I enjoy exploring my other passions, such as painting, gardening, cooking, and managing my food blog.
Lexxy - Modern Rich Text Editor for Rails
Lexxy is a modern rich text editor built on top of Lexical that offers lot of features for modern editing experience.Rails Decouples Trix Into action_text-trix
Get faster Trix updates, cleaner installs, and simplified editor setup with the new action_text-trix gem.Rails Deprecated Associations with Reporting
Rails introduces a deprecated option for associations to log warnings, raise errors, or send notifications.New features in ECMAScript 2025
In this blog, we’ll explore the new features which are now a part of ECMAScript 2025.Explore new hooks coming up in React 19
React 19 introduces useActionState, useFormStatus, useOptimistic, and use hooks for better form handling.Next.js vs. Remix - A Developer's Dilemma
A detailed comparison of Next.js and Remix covering routing, data fetching, mutations, deployment, and pricing to help you choose.Demystifying Closures in React
Closures are React's secret superpower - hidden helpers that make hooks and event handlers work smoothly.An In-Depth Look at React Server Components!
This blog post will thoroughly explore the necessity, advantages, architecture, implementation, and constraints associated with React Server components.React scrollIntoView with Fixed Header
Fixed headers are a popular design choice for websites. However, scrolling to an element that includes a fixed header can present several challenges.Writing re-usable code with React Composition
React Composition helps make our code more efficient, and easier to maintain and update in the long run.useState vs useReducer in React
Confused about when to use useState vs useReducer for state management? This blog explains key points to help you choose the right hookCSS Cascading Layers for Style Control
Cascading layers is a new feature in CSS to maintain and order the stylesheet in which we can cascade and organize the CSS more efficiently.Evaluating Media queries in a Range Context
Media Queries Level 4 specification has introduced a new syntax for writing media queries that have a range type.Meet the most awaited CSS container queries
CSS container queries are similar to media queries, but related to a container element size rather than the viewport size.React useEffect vs useLayoutEffect
useEffect runs asynchronously after DOM paint, while useLayoutEffect runs synchronously before browser repaint.Ecma International approves ECMAScript 2022
ECMAScript 2022 is officially a standard now! Let's see what's new in ECMAScript 2022.Copy to Clipboard in JavaScript
The Clipboard API helps to copy text and images to the clipboard asynchronously without affecting the performance of the application.React 18 useInsertionEffect Hook
The useInsertionEffect hook in React 18 is mostly for CSS-in-JS libraries for inserting global DOM nodes like 'style' or SVG 'defs' in the document.React 18 Allows Rendering undefined
Before React 18, if we did not want to render anything, we had to return 'null' or an empty fragment. React now allows undefined to be rendered.Step-by-step guide to GSAP Library
With GSAP library, we can create beautiful animations using Tweens, ScrollTrigger, and TimelinesES2022 Private Field Brand Check
ECMAScript 2022 provides a simpler way to check if an object has a given private field using the 'in' operator.Saeloun Team Remote Workstation Tour
Saeloun has been remote since it started. We asked our team to share a photograph of their workstation.Virtualization for Large Dropdowns
Super large lists can slow down the site's performance significantly, at times even freeze the application.ES2022 Adds at() Method for Arrays
The at() method takes an integer value and returns the element at that index. It allows both positive and negative integers.Google Analytics in React Apps
Step-by-step guide on setting up and adding Google Analytics to React application.Making React Apps Accessible: Best Tips
Making web applications accessible to all the users is an important aspect to be considered while developing.React 18 Suspense SSR Architecture
React 18's new SSR combines streaming server-side rendering with Selective Hydration for better performance.React 18 useDeferredValue Hook
The useDeferredValue hook allows us to mark some tasks as less important, making the app feel more responsive, thereby improving the user experience.React 18 useSyncExternalStore Hook
React 18's useSyncExternalStore hook safely subscribes to external stores, preventing tearing issues caused by concurrent rendering.Understanding React SSR Hydration
Hydration is used only with server-side rendering (SSR). It is a process of rendering our components and attaching event handlers.React 18 useId API for Unique IDs
React 18 introduces a new hook API - useId, that generates stable ids during server rendering and hydration to avoid mismatches.ECMAScript Adds Top-level await Support
We can only use await operator within an async method. In ECMAScript 2022 we will be able to use it outside of the context of an async method in our modules.ES2022 Introduces Static Class Features
Private and public static fields along with private static methods would be officially included in ECMAScript 2022.JavaScript ES2022 Class Fields: Public and Private
Learn how ES2022 public and private class fields simplify JavaScript class definitions with cleaner syntax.React 18 startTransition API for Better UX
Learn React 18 startTransition API to prioritize urgent vs non-urgent updates. Improve UI responsiveness with concurrent rendering.React 18 Suspense Improvements
React 18 delays committing everything inside the Suspense boundary (the suspended component and all its siblings) until the suspended data resolves.React 18 Introduces New Root API
React 18 adds the new root API that comes up with the new out-of-the-box improvements.React 17 Async useEffect Cleanup
React 17 executes useEffect cleanup functions asynchronously, improving the performance of large applications.Redux 4.1.0 Error Code Indexes
Redux 4.1.0 extracts error messages from production build, converts them into error code indexes, thereby shrinking the bundle size.React 17 Removes Event Pooling
React 17 removes event pooling in modern browsers as it does not improve the performance and causes confusion.React 17 stops event bubbling in scroll event
In React 17 the scroll event no longer bubbles to align with browser's behavior.