Ashwini Handore’s Post

𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘃𝘀 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗛𝗼𝗼𝗸 𝗮𝘁 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗧𝗶𝗺𝗲 React gives developers powerful hooks to manage side effects, but understanding when each hook runs can make a significant difference in UI performance and user experience. Two commonly misunderstood hooks are: 🔹 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁() useEffect runs after the browser has painted the UI. This makes it the right choice for:  • API requests  • Event listeners  • Subscriptions  • Logging  • Updating external systems Because it runs after paint, it does not block rendering, helping keep your application fast and responsive. 🔹 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁() useLayoutEffect runs immediately after the DOM updates but before the browser paints the screen. This makes it useful for:  • Reading element dimensions  • Measuring layout  • Scroll position adjustments  • Preventing visual flicker  • Synchronizing DOM changes before display Since it runs before paint, users never see intermediate layout changes. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 Using the wrong hook can lead to: ❌ Layout shifts ❌ Flickering UI ❌ Incorrect measurements ❌ Less predictable rendering behavior Choosing the correct hook leads to: ✅ Smoother interfaces ✅ Better visual stability ✅ More predictable components 𝗦𝗶𝗺𝗽𝗹𝗲 𝗿𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯 Use useEffect → for most side effects Use useLayoutEffect → when layout or visual updates must happen before paint Small React details like this often separate working code from polished frontend engineering. #React #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering

🚀 React Render vs Commit Phase — How React Actually Updates UI Most developers know: 👉 React re-renders components But what really happens behind the scenes? 👉 React works in two phases 💡 1. Render Phase (Calculation Phase) 👉 React prepares what needs to change ✔ Creates new Virtual DOM ✔ Compares with previous tree (Reconciliation) ✔ Decides what to update ❗ No DOM updates happen here 💡 2. Commit Phase (Execution Phase) 👉 React applies the changes to the real DOM ✔ Updates DOM ✔ Runs useEffect ✔ Updates refs 👉 This is where UI actually changes ⚙️ Flow (Step-by-step) 1️⃣ State/props change 2️⃣ Render Phase runs (diffing) 3️⃣ React calculates changes 4️⃣ Commit Phase updates DOM 🧠 Why this matters 👉 React separates thinking from doing: Render Phase → “What to update?” Commit Phase → “Apply updates” 🔥 Important Behavior ✔ Render phase can run multiple times ✔ Commit phase runs once per update 👉 This enables features like: Concurrent rendering Interruptible updates ⚠️ Common Mistake // ❌ Side effects in render const data = fetchData(); 👉 Causes bugs → should be inside useEffect 🔥 Best Practices ✅ Keep render phase pure ✅ Avoid side effects in render ✅ Use useEffect for side effects ❌ Don’t trigger DOM changes in render 💬 Pro Insight (Senior-Level Thinking) 👉 Render phase can be paused, restarted, or discarded 👉 Commit phase is always final 📌 Save this post & follow for more deep frontend insights! 📅 Day 23/100 #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #PerformanceOptimization #SoftwareEngineering #100DaysOfCode 🚀

I built a fully responsive Image Slider with smooth interactions and premium UI experience 🔥 🚀 Day 4 / 21 — Frontend Challenge Today I built: 👉 Responsive Image Slider 🧠 Flow I designed before coding: Created image array to store slider data Maintained index to track current image Displayed image dynamically using JavaScript Added next & previous button functionality Implemented auto-slide using setInterval Enhanced UX with dots navigation, counter & keyboard control 🛠 Tech Used: HTML | CSS | JavaScript | Bootstrap ✨ Features: • Fully responsive slider • Next / Previous navigation • Auto slide with pause on hover ⏸ • Dots indicator for quick navigation • Image counter (current / total) • Keyboard arrow control (← →) • Smooth fade + hover zoom effect • Clean glassmorphism UI ⚡ Challenges Faced: Handling multiple features together (auto-slide + manual controls) was tricky. Interval conflict issue aaya tha, but solved it using proper start/stop logic. 💡 Key Learning: A good UI is not just about design — it’s about smooth interaction and user control. Combining multiple small features creates a premium user experience. 👉 Feedback welcome! What should I build on Day 5? 🙏 Guidance by: Keyur Gohil 📚 Learning at: Red & White Skill Education Official 📌 GitHub Repo: https://lnkd.in/da4MSHDY #21DaysChallenge #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment #100DaysOfCode #ResponsiveDesign #ImageSlider #WebDev #FrontendDev #CodingJourney #LearnInPublic #UIDesign #UXDesign #Bootstrap #JavaScriptProjects

I just put Cursor’s new Design Mode to the test on my latest project, Nexus Strategy, and the results are honestly incredible. I managed to build out a Figma-style UI design and have it fully implemented in just 2 minutes. What used to take an hour of tweaking CSS and adjusting layouts is now handled through a visual-first workflow. It’s a complete game-changer for moving fast without sacrificing UI quality. Check out the repository here to see the implementation: https://lnkd.in/g35MWHtp If you’re a developer looking to bridge the gap between design and code, this update is a must-try. #CursorAI #WebDevelopment #SoftwareEngineering #NextJS #OpenSource #Productivity

Can we actually build a <Popover /> component just like shadcn/ui from scratch? Yes — and it's easier than you might think. A few weeks ago, I was struggling with the usual popover headaches: - Z-index conflicts - Positioning issues inside deeply nested containers - Content getting clipped by parent elements with overflow: hidden Then I discovered (and truly understood) ReactDOM.createPortal. Here's the game-changer: By using a portal, we can render the PopoverContent outside the normal DOM tree — directly into the <body> (or a dedicated portal container). This instantly solves: - Z-index battles - Clipping and overflow problems - Complex positioning issues But I didn't stop there. I also added smart positioning logic (inspired by how shadcn + Radix UI works): → When the PopoverContent doesn't have enough space at the bottom, it automatically flips and appears on top of the trigger. → Same for left/right sides. The result? A clean, smooth UX that feels premium — exactly like shadcn/ui's popover. This small deep dive into frontend system design taught me something important: The real skill upgrade doesn't come from just copying components. It comes from understanding why they work the way they do — and then building them yourself. Portals + floating UI logic = powerful mental model for any overlay (tooltips, dropdowns, modals, etc.). Have you built your own popover or tooltip from scratch? Or are you still fighting z-index wars in your projects? 😅 Drop a comment — I'd love to hear your experience (and any tips you have!). #React #Frontend #WebDevelopment #JavaScript #SystemDesign #shadcn

🚀 Strengthening my Frontend Foundations with CSS Over the past few sessions, I’ve focused on building a deeper understanding of CSS by combining concepts with practical implementation. 📚 Key Areas Covered: • CSS Transformations • Box Shadow • Flexbox & its Core Properties • CSS Grid (Grid Template) • CSS Animations • Media Queries for Responsive Design 💻 Practical Application: Developed a mini project by integrating all these concepts to simulate real-world UI development and improve design thinking. This hands-on approach is helping me move beyond theory and build production-ready skills step by step. Sharing my project video and screenshots below 👇 Open to feedback and suggestions! #WebDevelopment #FrontendDevelopment #CSS #UIUX #ResponsiveDesign #LearningJourney #BuildInPublic

Are you still using media queries based on the viewport for everything? 📱 Have you ever heard of 👉 Container Queries in #CSS? Instead of making components respond to the screen size… you make them respond to their own container size. That means a component adapts based on where it lives — not the device it’s viewed on. This unlocks: ♻️ Truly reusable components. 🧼 Cleaner responsive design. 🚫 Less dependency on global breakpoints. It’s a small shift in mindset, but a big improvement in how we build UI.

🚀 Day 3 / 21 — Frontend Challenge Today I built: 👉 Responsive Navbar (Hamburger Menu) 🧠 Flow I designed before coding: • Step 1: Identified core UI elements (logo, navigation links, hamburger menu) and planned a clean horizontal layout for desktop • Step 2: Structured HTML with semantic navbar and organized links using <ul> for better accessibility • Step 3: Styled navbar using Flexbox for proper alignment and spacing between logo and menu items • Step 4: Designed hover and active states for navigation links to improve user interaction • Step 5: Implemented responsive design using media queries to switch layout for mobile screens • Step 6: Created hamburger menu icon and planned toggle behavior for opening/closing menu • Step 7: Added JavaScript logic using classList.toggle() to control menu visibility • Step 8: Managed accessibility using aria-expanded attribute for better UX • Step 9: Added click events on nav links to close menu automatically and update active state 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: • 📱 Fully responsive navbar • 🍔 Hamburger menu for mobile view • 🎯 Active link highlighting • ⚡ Smooth toggle animation for menu icon • 🧭 Auto-close menu on link click • ♿ Basic accessibility with aria attributes 🚧 Challenges Faced: Handling responsive behavior smoothly was a bit tricky, especially switching between desktop and mobile layouts. Managing the hamburger animation and keeping the menu state in sync (open/close) required careful class handling. Also, ensuring the active link updates correctly on click needed proper DOM selection logic. 💡 Key Learning: Separating structure (HTML), styling (CSS), and behavior (JavaScript) makes building responsive components much easier and scalable 🙏 Guidance by: Keyur Gohil 🏫 Learning at: Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/d4f7MyNx #21DaysJSWithKeyur #JavaScript #FrontendDevelopment #ResponsiveDesign #BuildInPublic #WebDevelopment

🟨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗮𝘆 𝟲𝟮: 𝗪𝗵𝘆 𝗗𝗢𝗠 𝗨𝗽𝗱𝗮𝘁𝗲𝘀 𝗔𝗿𝗲 𝗮 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 (𝗔𝗻𝗱 𝗛𝗼𝘄 𝗥𝗲𝗮𝗰𝘁 𝗧𝗵𝗶𝗻𝗸𝘀 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁𝗹𝘆) Updating UI looks simple… until it isn’t. 🔹 𝗛𝗼𝘄 𝗨𝗜 𝗨𝗽𝗱𝗮𝘁𝗲𝘀 𝗪𝗼𝗿𝗸 (𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗥𝗲𝗮𝗰𝘁) • We directly update the DOM • We decide what to change and how Example: document.getElementById("title").innerText = "Hello" 🔹 𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 • DOM operations are relatively expensive • You must track what changed manually • Easy to make mistakes • Becomes complex as UI grows 🔹 𝗪𝗵𝗮𝘁 𝗺𝗮𝗸𝗲𝘀 𝗶𝘁 𝗵𝗮𝗿𝗱 • UI = multiple states + frequent updates • Small changes can affect many elements • Manual DOM handling doesn’t scale well 🔹 𝗪𝗵𝗮𝘁 𝗥𝗲𝗮𝗰𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝘀 • You don’t update DOM directly • You describe what UI should look like • React figures out the most efficient way to update 🔹 𝗞𝗲𝘆 𝗜𝗱𝗲𝗮 • Shift from “How to update UI” • To “What should UI look like” 🔹 𝗧𝗵𝗲 𝗠𝗶𝘀𝘀𝗶𝗻𝗴 𝗣𝗶𝗲𝗰𝗲 👉 But how does React know what actually changed? 👉 This is where Virtual DOM comes in 👉 React creates a representation of UI and compares it before updating the real DOM 🔹 𝗠𝗼𝘀𝘁 𝗜𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗜𝗻𝘀𝗶𝗴𝗵𝘁 • Problem is NOT creating UI • Problem is updating it efficiently 💬 GitHub link in comments. #JavaScript #React #Frontend #Day62 #100DaysOfCode

Container queries are the difference between a component that "kind of" works in your design system and one that actually adapts. They ask the size of the parent, not the viewport, which is the right unit for reusable UI. https://lnkd.in/eMMBmVQy #WebDev #CSS #WebPlatform