Mastering React's useImperativeHandle for Direct Control

Interactive Valentine-themed webpages are popular these days , so I built one myself. The page asks a simple question. If the user clicks “No,” the “Yes” button grows larger and new prompts appear… because in frontend development (and life), persistence and good design can change outcomes. What this project helped me practice: • JavaScript event handling • DOM manipulation • Dynamic UI behavior • Designing engaging user interactions A fun experiment in frontend development, user psychology, and strategic button sizing 😄. Live website :- https://lnkd.in/d7MHRxsm github :- https://lnkd.in/dgRCppnR #WebDevelopment #Frontend #JavaScript #LearningByBuilding

🚀 Built a Custom OTP Input Field using React.js Excited to share my latest mini project — an interactive OTP (One-Time Password) input component built using React Hooks. 🔧 Features: ✔️ Auto focus to next input ✔️ Backspace moves to previous field ✔️ Arrow key navigation (Left & Right) ✔️ Only numeric input allowed ✔️ Clean and reusable component structure 🛠 Tech Used: React.js useState useRef useEffect JavaScript (Event Handling) This project helped me strengthen my understanding of: 👉 Controlled components 👉 DOM manipulation using useRef 👉 Keyboard event handling 👉 Better UX design practices Always learning and improving 🚀 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Learning #100DaysOfCode

🚀 useEffect vs useLayoutEffect in React — Understanding the Right Tool for the Right Situation While building modern UI with React, developers often rely on hooks like "useEffect" to handle side effects. However, there are scenarios where "useLayoutEffect" becomes the better choice. The key difference lies in when they execute during the rendering lifecycle. 🔹 useEffect runs after the browser paints the UI, making it ideal for tasks such as API calls, subscriptions, logging, and other asynchronous operations. Because it doesn’t block rendering, it helps keep applications performant and responsive. 🔹 useLayoutEffect, on the other hand, runs synchronously after the DOM updates but before the browser paints the screen. This makes it especially useful when working with DOM measurements, layout calculations, or visual adjustments that must occur before the user sees the UI. Using "useLayoutEffect" in these situations helps prevent UI flickering, layout shifts, or incorrect measurements, resulting in a smoother and more predictable user experience. 📌 Rule of thumb • Use "useEffect" for most side effects • Use "useLayoutEffect" when your logic depends on DOM layout or visual synchronization before paint Understanding this subtle difference can help developers build more stable, performant, and visually consistent React applications. Reference from 👉 Sheryians Coding School #React #FrontendDevelopment #WebDevelopment #JavaScript #SoftwareEngineering

Synchronous vs Asynchronous JavaScript — explained simply 👨💻🎨 JavaScript is single-threaded, yet it powers highly responsive apps. 🔹 Synchronous code = blocking Each task waits for the previous one to finish. Simple to understand, but bad for performance and UX. 🔹 Asynchronous code = non-blocking Long tasks (API calls, timers, I/O) run in the background while the main thread stays responsive — thanks to the event loop. 💡 If your UI freezes, it’s probably not “JavaScript being slow”… it’s sync code blocking the main thread. #JavaScript #WebDevelopment #Coding #Frontend #AsyncProgramming #DeveloperTips #Tech #Programming #EventLoop #UX

Have you ever tried to show a full-screen modal from inside a 300×600 iframe? I had to. The setup: a JS snippet embedded on a publisher's page. It reads attributes from its own <script> tag, creates an iframe, injects a full React app into it, and renders an ad. When a user clicks, a large modal needs to open. But the React app lives inside an iframe. Which lives inside a Google ad iframe. Two levels deep. Each has its own sandbox restrictions. Render the modal inside the widget, and 90% of it is invisible. Clipped to 300×600. Completely broken UX. The only way out? Break through both iframe boundaries and inject the modal directly into the publisher's root document. With inline styles. No access to their CSS. No control over their layout. Cross-origin limitations. Not the most glamorous problem - but one of those real-world engineering puzzles that teach you how browsers actually work. It shipped. It scaled. It handled 50M+ monthly interactions across major news portals. Frontend engineering isn’t just about components and design systems. Sometimes it’s about finding the door when the browser gives you walls. #Frontend #JavaScript #React #WebDevelopment #Engineering

You’ve spent weeks coding. The UI is pixel-perfect. The API works. You're ready to hit "Deploy." Wait! 🛑 Before you push that code to production, there is a massive difference between a project that "works" and a product that is "production-ready." If you are building with modern frameworks like Next.js, missing these small details can kill your Lighthouse score and ruin your user experience. Here is my 5-step pre-launch checklist to ensure your web app is actually ready for the real world: 🖼️ 1. Swap every <img> for the Next.js <Image /> component Don't let massive image files ruin your load times. The built-in component automatically handles lazy loading, proper sizing, and modern WebP conversion. It’s an instant performance boost. 🔤 2. Lock down your fonts with next/font Have you ever visited a site where the text suddenly jumps around as it loads? That’s called a Layout Shift. Using the built-in font optimization handles this at build time, meaning zero layout jumping for your users. 📦 3. Shrink the bundle with Dynamic Imports Got a heavy interactive chart or a complex modal? Don't force the browser to load it immediately. Use next/dynamic so it only loads when the user actually clicks on it. Keep that initial load lightning-fast. 🔍 4. Double-check your OpenGraph (OG) Metadata How will your app look when a user shares the link in a LinkedIn message or on Twitter? If you haven't set up your dynamic metadata and social images, your link will look like spam. Good previews equal higher click rates. 🚧 5. Design a custom 404 Error Page Users will click broken links or type the wrong URL. Don't leave them staring at a cold, generic server error. Build a friendly, branded "Oops!" page with a clear button to guide them back to the homepage. This 5-minute checklist is the difference between an amateur side-project and a premium digital experience. 📌 Bookmark this for your next launch! #Nextjs #WebDevelopment #Frontend #SoftwareEngineering #TechTips #WebPerformance #Coding

Component libraries are a trap. Don't get me wrong, they let you move fast initially. But 6 months down the line, when you need a highly specific custom component, you end up fighting the library's internal CSS overrides and bloating your bundle size. For our frontend, we took a different approach. We used shadcn/ui alongside Tailwind CSS. It’s not a library you install; it’s a collection of reusable components you copy and paste into your apps. ✅ We own the code. ✅ Fully accessible out of the box. ✅ Zero bloat. We built a premium, glassmorphism-inspired UI tailored exactly to our design needs, without hacking through third-party source code. Own your UI layer. Your future self will thank you. #Frontend #UIUX #WebDesign #Reactjs #TailwindCSS #ShadcnUI

Idempotency Keys: A small concept that prevent production problem I recently explore something that seems simple but it is fascinating and extremely important in real world applications: Idempotency Keys. The problem is: A user clicks "submit" or "start" a email or sms campaign the network is slow user click again, now backend received two identical POST requests. Which will be a problem in real world systems. An Idempotency Key is a unique identifier sent with a request header: Idempotency-Key: 123e4567-e89b-12d3-a456-426614174000 The backend stores the key and execute the logic based on the request. If the same key comes again - backend prevents the executing same logic and returns the same response as before. What I learned: i. Disabling a button in react is not good enough. ii. Frontend prevention is good UX. iii. This is critical for order creation, financial operation, start campaigns. iv. It helps server avoid doing same operation twice. #ReactJS #SpringBoot #TypeScript #FrontendDevelopment

🚀 Built a Drum Kit Web App using HTML, CSS & JavaScript In this project, I focused on building a fun, interactive experience while strengthening my core frontend skills. 💡 Key features & learnings: • DOM Manipulation for dynamic interactions • Keyboard event handling (keydown listeners) • Audio integration for real-time sound playback • Smooth CSS transitions & animations • Responsive layout using Grid & Media Queries For UI enhancement and design improvements, I leveraged AI tools like ChatGPT and Gemini to refine layout, contrast, and visual hierarchy. This project really helped me deepen my JavaScript fundamentals and understand real-time user interaction. I’d love to hear your feedback and suggestions! 🙌 #HTML #CSS #JavaScript #WebDevelopment #Frontend #ResponsiveDesign #LearningInPublic

Day 18: Beyond Buttons – Why Shadcn/UI is a Game Changer 🎨 Stop Building UI from Scratch. Start Building Systems. In the earlier days of my MERN journey, I spent hours—sometimes days—hand-coding complex components like Modals, Calendars, or Navbars. Then I discovered Shadcn/UI. If you are using Next.js and Tailwind CSS, Shadcn isn't just a library; it’s a toolkit that gives you professional-grade components that you actually own. Why I’ve integrated it into my workflow: ✅ You Own the Code: Unlike traditional UI libraries (where the code is hidden inside an NPM package), Shadcn copies the source code directly into your project. You can change every single pixel to fit your Creativity. ✅ Accessibility First: It’s built on top of Radix UI, meaning things like keyboard navigation and screen readers work out of the box. This is what separates "amateur" sites from "enterprise" applications. ✅ Perfect for Next.js: It’s designed to work seamlessly with the Next.js App Router and Server Components, keeping your app lightning-fast. The Creativity Angle: When I was refining Cine Nagar, I didn't want it to look like every other generic template. Shadcn allowed me to take high-qualitycomponents and style them with my own Tailwind logic to create a unique "Filmmaker" vibe. My Advice: Don't reinvent the wheel for standard components. Use Shadcn for the "infrastructure" of your UI, so you can spend your brainpower on the Unique Features of your app. What’s your go-to UI library, or are you a "CSS from scratch" purist? Let’s talk about the best workflow in the comments! 👇 #ShadcnUI #NextJS #TailwindCSS #FrontendDevelopment #WebDesign #MERNStack #DeveloperTools #ReactJS #CleanCode #UIUX