Gouranga Das Samrat

  How I Made My Site Look Modern Without Breaking Older Browsers with This CSS Trick How I Made My Site Look Modern Without Breaking Older Browsers with This CSS Trick My site used to break in older browsers, and I’d spend hours tweaking CSS to patch the holes. It’s exhausting. You want your site to shine, but older browsers keep throwing issues. Users deserve a website that shines on modern browsers but never breaks on older ones. The CSS @supports rule changed everything for me. Here’s It in Action Here is a simple example for CSS @supports rule: /* Fallback for all browsers */ .card { display : block; margin : 1rem ; } /* Only applied if grid is supported */ @supports (display: grid) { .card { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } } How It Works The @supports rule checks if a browser understands a CSS property or value. If it does, it applies your shiny modern styles. If not, it sticks to ...

  How to Slice Out Bad Commits and Keep Your Git Tree Clean How to Slice Out Bad Commits and Keep Your Git Tree Clean I was working on a large scale project. I messed up my git history again. It’s a tangle of messy commits I need gone. Rewriting history manually feels like untangling headphones. It’s slow, error-prone, and I’m terrified of breaking my branch. Here’s how to do it in simple steps Here’s a cleaner way to slice out those unwanted commits: I found a small but magical command: git rebase --onto to surgically remove a range of commits. Suppose you got a git tree that has commit that looks like below: A --- B --- C --- D --- E --- F Now you want to delete commits B, C, D, E. You can do this easily using below: git rebase --onto B ^ E This command rewrites history by replanting your branch’s good commits onto a new base, skipping the bad ones. Important point to remember If the branch you are working on is a shared branch (e.g., main ), and you want to u...

  How This Simple Method Turned My Array Code from Messy to Neat How This Simple Method Turned My Array Code from Messy to Neat Recently when I was going through an article when I stumbled on a cleaner way to grab array elements, and it’s changed how I code. It’s simple. It’s elegant. Introduced in 2022, at() lets me grab array or string elements with intuitive indexing. Array indexing the new way Introduced in ECMAScript 2022, Array.prototype.at() simplifies indexing with a single method that handles both positive and negative indices. Think of it as a shortcut that keeps your code concise and readable. const fruits = [ "apple" , "banana" , "cherry" ]; console.log(fruits.at(0)); // "apple" console.log(fruits.at(-1)); // "cherry" Let’s compare it with the old way of accessing array elements in JavaScript: console. log (fruits[fruits.length - 1 ]); // "cherry" With at() , my code looks intentional, not desperate. Why use Ar...

  How to Handle Pasted Images in React Without Losing Your Mind How to Handle Pasted Images in React Without Losing Your Mind Recently I was working on a freature that required pasting images into the React app input. That’s when I got to know browsers handle clipboard data inconsistently. I started playing around with the Clipboard API, trying to make image pasting smooth and reliable. You know the struggle: users expect to Ctrl+V an image and see it appear instantly, like magic. I needed a reliable way to capture and display those images without breaking the user experience. What’s Going On When You Paste? When you hit Ctrl+V, the browser fires a ClipboardEvent . This event carries a clipboardData object, packed with whatever the user copied: text, images, or even files. The clipboardData object is your key. It’s got: • types : Lists what’s in the clipboard (like “image/png”). • files : Holds actual file objects, including images. • getData() : Grabs raw data for specific ...

  The React Suspense Composable Streaming Trick For Improved User Experience The React Suspense Composable Streaming Trick For Improved User Experience I was building a React app some time ago, and I noticed I had to stare at a blank screen while data loads. That’s not just annoying, it’s a dealbreaker for keeping users engaged. Today we are going to discuss how to use React’s Suspense to stream data and render UI components smoothly, keeping your app responsive and delightful.Let’s start with a simple example Here’s a quick code snippet showing Suspense in action for a data-dependent component. import { Suspense } from "react" ; let cache = new Map(); export function fetchData(id) { if (!cache.has(id)) { const delay = Math.floor(Math.random() * 2500) + 1000; const promise = new Promise((resolve) => setTimeout(resolve, delay)); cache.set(id, promise); } return cache.get(id); } function Page() { return ( <div style={{ border: ...

  I Missed document.currentScript for Years: Here’s Why You Shouldn’t I Missed document.currentScript for Years: Here’s Why You Shouldn’t I found an interesting DOM API document.currentScript while going through a newsletter issue last week. I thought it was just another browser API I’d never use. Then I found it’s just quietly powerful, ready to solve those “where did this script even come from?” moments. Let’s have a deep dive into it. What’s it do? This API returns the <script> element currently executing. Think of it as a mirror for your script to check itself out mid-execution. It’s a lifesaver for tracking script origins or tweaking behavior on the fly. < script > console . log ( "tag name:" , document . currentScript . tagName ); console . log ( "script element?" , document . currentScript instanceof HTMLScriptElement ); // Log the src of the current script console.log("source:", document.currentScript.src); // Ad...

  The Easiest Way to Test Node.js Apps with MongoDB: Without Breaking Your Production Database The Easiest Way to Test Node.js Apps with MongoDB: Without Breaking Your Production Database I’ve been there, staring at my Node.js app, praying my tests don’t mess up the production MongoDB database. One wrong move, and poof, real user data could vanish. I was in search of a way to test safely, without risking the live database. Today we are going to see how to use mongodb-memory-server to create isolated, in-memory MongoDB instances for testing. It’s fast, reliable, and keeps your production environment untouched. Let’s get started. What Makes mongodb-memory-server Special? Going through an article, I found a tool that allowed me to spin up a temporary MongoDB instance in memory. No external database, no cleanup headaches. It’s perfect for writing tests that don’t bleed into the live data. Setting Up the Project Today we are going to build a simple Node.js app. The stack includes ...