Gouranga Das Samrat

Write Elegant Animations in CSS with Dynamic and Composable Keyframes I struggled with bloated CSS animations for years, repeating keyframe blocks until my code felt like a tangled mess. Here’s the usual way we write keyframe animations: @keyframes fadeOut { from { opacity : 1 ; } to { opacity : 0 ; } } What happens if you skip the keyframe block entirely and lean on inherited CSS properties? @keyframes fadeToTransparent { to { opacity : 0 ; } } It works just as smoothly, with half the code. Less clutter, more control. I thought it was just a neat shortcut. Then I realized it lets you dynamically tweak animations using CSS custom properties, and my mind was blown. Let’s dive into how this works, plus a bonus tip to make your animations pop. Core Concept Explained When you skip the from block in your keyframe animation, the starting values pull directly from the element’s existing context. Let’s make it clear with a quick demo. Take a look: @keyframes fade...

Text overflows ruin your clean design. Too much content spills out, cluttering your layout. It’s messy, unprofessional, and buries my design’s vibe. But there’s a way to tame it with clean CSS tricks. Quick Fix: Single-Line Truncation A single line of CSS can clip text cleanly. This is my go-to for tight headers or captions. Here’s the code to make it happen: .single-line-truncate { width : 300px ; /* Fixed width for the example */ white-space : nowrap; overflow : hidden; text-overflow : ellipsis; } <div class = "single-line-truncate" > Lorem Ipsum has been the industry 's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> It slices text neatly with dots. It keeps text from wrapping or overflowing. It only works for single lines, leaving multi-line text messy. Next Level: Line-Clamp for Multi-Line When I need multi-line control, this WebKit trick shines. WebKi...

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...