Gouranga Das Samrat

  Creating User-Friendly Hints in HTML with Popover=Hint Magic How to Creating User-Friendly Hints in HTML with Popover Magic Recently I was going through an article on how to build a web interface that feels effortless is your goal, but layered UI elements like tooltips can be a coding nightmare. I love that clean, intuitive experience, but layering popovers without breaking the flow is a nightmare. The popover=hint attribute in HTML is my new best friend for this. It allows you to open a UI like: tooltip or preview without closing other popovers. It’s a lightweight way to show context without hijacking the user’s focus. Let’s See it in Action Let’s have a look at a simple example to understand how it works under the hood. HTML popover=hint example in action <!DOCTYPE html > < html lang = "en" > < head > < style > [popover= "auto" ] { inset: unset; position : absolute; top : 100px ; justify-self...

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