Gouranga Das Samrat

I’ve been wrestling with CSS cascades for years, and let me tell you, it’s like trying to untangle Christmas lights in the dark. Messy specificity battles and unexpected overrides have cost me hours. Then I stumbled across the CSS revert-layer keyword. CSS revert-layer is your escape hatch from cascade chaos. It’s part of the CSS cascade layers family, alongside tools like @layer , specificity rules, and the  :where() function. It’s been around but underused, now it’s ready to clean up your style sheets with precision. Pro tip: Don’t confuse revert-layer with revert ; the former resets styles to the previous cascade layer, not the browser’s defaults. How Layers Works With @layer , you group your styles into named or anonymous layers, setting their priority in the cascade. How Layers Works Declare layers with @layer , and earlier layers override later ones, giving you predictable control. You can define layers upfront or append rules later, keeping your style sheet modular...

I was debugging a regex mess at 2 a.m., cursing special characters, when I stumbled on ECMAScript 2025’s new tricks. Suddenly, my code felt less like a chore and more like a playground. Let’s dive into these updates, they’re built to make your dev life smoother. What’s New in ECMAScript 2025? Let’s have a look at what’s new there in ECMAScript 2025. Import Attributes Ever wanted to import JSON without jumping through hoops? Now you can, cleanly and consistently across environments. // Static import import configData1 from './config-data.json' with { type : 'json' }; // Dynamic import const configData2 = await import( './config-data.json', { with: { type: 'json' } } ); Loads JSON as a module, no extra parsing needed. This syntax is a game-saver for cleaner imports. No more messy workarounds uhm, dynamically?! 😅 Import attributes kick off with the with keyword, followed by an object literal. Here’s what works so far: You can use unquoted or quoted...

I’ve stared at my React app’s bundle size ballooning, cursing every SVG icon I lovingly crafted for that polished UI. Heavy icons frustrate users and tank performance. Slow page loads and bloated bundles are a developer’s nightmare, nobody wants their app to feel like it’s an amateur’s work. There’s a better way to load SVG icons that keeps your app snappy and your users happy, without ditching those crisp visuals. The Naive Approach I used to inline every SVG directly in my components or import them as React components. It’s straightforward but bloats the bundle, each icon’s XML adds kilobytes, and duplicated icons across views compound the pain. Network requests pile up, and users wait longer for the app to render. The Smarter Approach Enter the SVG tag, a lightweight way to reference icons from a single sprite. It’s like a Progressive JPEG for icons: load once, reuse everywhere. The catch? You need a sprite file, but it’s a small price for slashing bundle size. The first st...

My async code used to feel like a tangle of errors I couldn’t unravel quickly. Each failed promise would spit out its own error, leaving me to stitch together a solution. Then I discovered AggregateError , and it changed how I debug. It’s a JavaScript feature that bundles multiple errors into one object, perfect for complex async tasks. Imagine validating a form where multiple fields are checked asynchronously. Without AggregateError , you’re stuck catching each error separately, which bloats your code and confuses users. It’s a slog to debug and deliver clear feedback. The Old, Clunky Way Without AggregateError , you’d handle each validation error individually. It’s tedious and error-prone. const fetchFromApi1 = ( ) => Promise . reject ( new Error ( 'API 1 failed' )); const fetchFromApi2 = ( ) => Promise . reject ( new Error ( 'API 2 failed' )); const fetchFromApi3 = ( ) => Promise . reject ( new Error ( 'API 3 failed' )); async function fetch...

How Signals Beat useEffect in Clean Code and Performance? Hey there! If you’ve spent hours debugging useEffect dependency arrays, chasing infinite loops, or wondering why your component re-renders , you’re not alone. Enter Signals , a reactive approach that’s redefining how we manage state and side effects with surgical precision and blazing speed. Signals are lean, predictable, and fast. In this post, we’ll explore why Signals are the future of React development, leaving useEffect in the dust for cleaner code, blazing performance, and a simpler mental model. We’ll compare them head-to-head with practical examples, showing how Signals lead to cleaner code and faster apps. With practical examples, we’ll explore why Signals are a game-changer for managing state and side effects. Hooks: The React Workhorse React Hooks revolutionized functional components by enabling state management ( useState ), side effects ( useEffect ), and optimized computations ( useMemo ) without class-based c...

Image from google As React developers, we have used useMemo and useCallback for years to keep our applications efficient and avoid uncalled re-renders. It is a constant battle between knowing when to optimize and when to let React do its thing. But with React 19 , the whole scenario changes. The new React Compiler is a groundbreaking innovation. It takes optimization to the next level because the compiler will handle performance boosters all by itself and will free us from micromanaging whether we should do memoization or not. In this blog, we’ll explore how memoization worked before React 19, what the React Compiler does, and whether you still need useMemo and useCallback . The Problem with Manual Memoization What is Memoization in React? Memoization is an optimization technique that stores the result of expensive function calls and returns the cached result when the same inputs occur again. In React, it prevents unnecessary re-renders of components and functions. Why D...

  “A slow website is a dead website.” Let’s be honest — no one likes waiting. Not you, not your users. Especially not your client staring at bounce rates. In 2025, front-end performance isn’t a nice-to-have; it’s survival. Page speed affects everything: SEO rankings, conversion rates, and user satisfaction. But fixing performance isn’t always about rewriting everything. Sometimes, small tweaks can lead to huge gains. In this article, I’ll walk you through 13 powerful front-end performance optimizations that you can (and should) apply today. Each one comes with a clear example so you can start improving immediately. 1. Compress and Optimize Images Problem: Large images are the number one reason websites feel sluggish. Solution: Use modern image formats like WebP or AVIF , compress images before uploading, and lazy load them where possible. Example: Instead of: < img src = "hero.jpg" /> Use: < img src = "hero.webp" loading = "lazy" width =...