Enhance User Experience with Adaptive Tour Features

𝐄𝐧𝐡𝐚𝐧𝐜𝐢𝐧𝐠 𝐔𝐬𝐞𝐫 𝐅𝐨𝐜𝐮𝐬 𝐰𝐢𝐭𝐡 𝐁𝐚𝐜𝐤𝐝𝐫𝐨𝐩 𝐁𝐥𝐮𝐫 𝐢𝐧 𝐒𝐡𝐞𝐩𝐡𝐞𝐫𝐝.𝐣𝐬 𝐓𝐨𝐮𝐫𝐬 Guiding users effectively through new features is key for adoption. We found that adding a backdrop blur to our Shepherd.js tours dramatically improved focus. By inserting a full-screen blurred div behind the tour overlay, we dimmed distractions and spotlighted the target element. This simple change made a noticeable difference in user engagement and comprehension. Implementing this involved creating a div with CSS for background color and blur, then toggling its visibility with the tour's start and end events. The key was ensuring the highlighted element remained crisp with a high z-index. What small tweaks have significantly enhanced the user experience in your projects? https://lnkd.in/dDDVMxFi #JavaScript

🚀 Building a Random Password Generator using useState, useEffect, useRef & useCallback I recently built a Random Password Generator project and gained some valuable hands-on experience with React hooks. Here are my key learnings: 🔹 useCallback – Optimizing Performance I learned that when you don’t want a function to be recreated on every render, you can use useCallback. By specifying dependencies, React only recreates the function when needed, improving overall efficiency. 🔹 useEffect – Controlling Side Effects If you want React to re-run a function after a state change, useEffect is the way to go. In my project, whenever the password length or character options changed, I needed to regenerate the password. So I used: useEffect(() => { generate(); }, [length, numbers]) This ensured the password updates automatically whenever dependencies change. 🔹 useRef – Direct DOM Access For better UX, I used useRef to directly access the HTML element when needed, avoiding unnecessary re-renders. 🔹 Clipboard Feature – Improving UX I implemented a copy-to-clipboard feature using: window.navigator.clipboard.writeText(password) This makes it super easy for users to copy the generated password instantly. 💡 Key Takeaway: Understanding when and how to use these hooks can significantly improve both performance and user experience in React applications. #React #WebDevelopment #JavaScript #FrontendDevelopment #LearningInPublic #Projects

Stop using onclick on div tags. You are calling it a button, but is it? 🛑 We’ve all seen it: <div onclick={handleClick}>Click Me</div>. It’s easy, it’s quick, and it works... right? Wrong. By doing this, you are unintentionally locking out millions of users from your website. When you use a div as a button, you are killing Accessibility (A11y). Here is why a real <button> tag (or proper ARIA roles) is a non-negotiable in 2026: 1️⃣ Keyboard Navigation: A real button is focusable by default. A div is not. Try navigating your site using only the Tab key—your "div-buttons" will be invisible to keyboard users. 2️⃣ Screen Reader Support: Screen readers tell users "Button" when they encounter a <button>. For a div, it just says "Text," leaving visually impaired users confused about what’s interactive. 3️⃣ Built-in Behavior: Buttons support the Enter and Space keys automatically. With a div, you have to manually write extra code to handle those keypresses. The "Professional" Fix: If you must use something other than a button tag, don't forget the A11y essentials: ✅ role="button": Tells the browser what the element does. ✅ tabindex="0": Makes it reachable via keyboard. ✅ aria-label: Provides a clear description for screen readers. My Take: In a world where we focus so much on performance and SEO, let’s not forget Inclusion. A truly Great Developer builds for everyone, not just for people who use a mouse. Are you still using div for buttons, or have you made the switch to Semantic HTML? Let's discuss below! 👇 #WebAccessibility #A11y #HTML5 #FrontendDevelopment #SoftwareEngineering #InclusiveDesign #WebStandard #ReactJS #NextJS #CleanCode #CodingTips #UXDesign #WebDev2026

🚀 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

𝐓𝐚𝐦𝐢𝐧𝐠 𝐭𝐡𝐞 𝐌𝐨𝐝𝐚𝐥 𝐌𝐞𝐧𝐚𝐜𝐞: 𝐅𝐨𝐜𝐮𝐬 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭 𝐚𝐧𝐝 𝐄𝐬𝐜𝐚𝐩𝐞 𝐇𝐚𝐭𝐜𝐡𝐞𝐬 Ever clicked a website's background only to find yourself trapped in a modal? It's a frustrating user experience. Making modals accessible requires careful attention to event handling and keyboard support. One common issue is when the modal's wrapper intercepts clicks on the backdrop, preventing it from closing. The fix involves ensuring the click event is correctly targeted to close the modal. Adding keyboard support, specifically the Escape key, provides an alternative and crucial method for users to dismiss the modal. These seemingly small tweaks drastically improve usability and accessibility. By addressing these points, developers can create more intuitive and user-friendly modal interactions. What are your go-to techniques for building accessible and user-friendly modals? https://lnkd.in/gqttQ3Qk #JavaScript #HTML #CSS

🚀 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗠𝗶𝗻𝗶𝗺𝗮𝗹 𝗬𝗲𝘁 𝗣𝗼𝘄𝗲𝗿𝗳𝘂𝗹 𝗧𝗼-𝗗𝗼 𝗔𝗽𝗽 (𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦 𝗢𝗻𝗹𝘆) Just shipped a clean, dark-themed To-Do List Web App — built without any frameworks, bundlers, or dependencies. Only pure 𝗛𝗧𝗠𝗟, 𝗖𝗦𝗦, 𝗮𝗻𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 💻 🔗 𝗟𝗶𝘃𝗲 𝗗𝗲𝗺𝗼: https://lnkd.in/gYN48NJV 💡 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 • Add tasks instantly (Enter or + button) • Mark tasks complete with smooth animations • Expand/collapse long task text • Clear all completed tasks in one click • Live progress bar tracking completion • Displays today’s date on load • Persistent storage using localStorage • Fully responsive design (mobile + desktop) • Custom SVG favicon (no extra assets) ⚙️ 𝗧𝗲𝗰𝗵 𝗛𝗶𝗴𝗵𝗹𝗶𝗴𝗵𝘁𝘀 • Vanilla JavaScript (ES6 classes, event delegation) • Clean state management using a single array • Efficient DOM updates via a single render flow • Smart use of 𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲 (no accidental overwrites) • DocumentFragment for better rendering performance • CSS animations + modern layout (Flexbox) 🧠 𝗪𝗵𝗮𝘁 𝗜 𝗙𝗼𝗰𝘂𝘀𝗲𝗱 𝗢𝗻 Instead of relying on frameworks, I focused on: ✔ Writing clean, maintainable logic ✔ Optimizing rendering performance ✔ Keeping memory usage efficient ✔ Building a real-world usable UI 🚀 Deployed on Vercel with Analytics & Speed Insights enabled. This project really helped me strengthen my JavaScript fundamentals and UI architecture without abstraction layers. Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #100DaysOfCode #BuildInPublic #Vercel #UIUX

🚀 SSR vs CSR: Why Your App Feels Fast (or Slow) Many developers assume rendering strategy is just an architectural choice. It’s not. It directly impacts user experience and performance. Here’s the reality 👇 ⚡ Server-Side Rendering (SSR) • First Contentful Paint: ~200–400ms on 4G • Browser receives ready-to-render HTML • Content appears almost instantly But there’s a catch: The page still needs hydration before users can interact. Meaning: 👀 Content is visible 🖱️ But not clickable yet ⸻ 🖥️ Client-Side Rendering (CSR) The browser must first: 1️⃣ Download JavaScript 2️⃣ Parse it 3️⃣ Execute it 4️⃣ Fetch data 5️⃣ Render UI Result? ⏳ FCP often 2–4 seconds on average networks But once rendering finishes: ⚡ The page becomes interactive immediately ⸻ 💡 The real bottleneck isn’t rendering. It’s: 📡 Network latency 📦 JavaScript bundle size ⚙️ Execution cost in the browser For example: A 500KB gzipped bundle can take ~1.4 seconds just to download on slow networks. ⸻ 🏗️ Modern Production Strategy The best systems rarely choose only one. They combine both: ✅ SSR for landing pages & SEO ✅ CSR for dashboards & authenticated apps Frameworks like Next.js, Nuxt, and Remix are built around this hybrid model. ⸻ 🔥 Key takeaway: Performance is not just about code. It’s about what you ship to the browser and when. Architect your rendering strategy like you design your backend — with latency in mind. ⸻ 💬 Curious to hear from other engineers: Do you prefer SSR, CSR, or Hybrid rendering in production systems? ⸻ #WebPerformance #SystemDesign #FrontendArchitecture #SSR #CSR #NextJS #SoftwareEngineering #WebDevelopment

Just launched my new personal site (roshanj.online) and managed to hit a 4x 100 Lighthouse score. 💯 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 and 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 were my main focus areas for this redesign. Here's a quick look at the stack and the tech approaches I used to keep things fast and clean: • 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟱 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿: Heavily relied on React Server Components to statically pre-render the pages and MDX blog posts, keeping the client-side JavaScript minimal. • 𝗡𝗮𝘁𝗶𝘃𝗲 𝗔𝗣𝗜𝘀 𝗼𝘃𝗲𝗿 𝗛𝗲𝗮𝘃𝘆 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀: Skipped the bloated animation packages. Styled it natively with Tailwind CSS and used the browser's raw 𝗩𝗶𝗲𝘄 𝗧𝗿𝗮𝗻𝘀𝗶𝘁𝗶𝗼𝗻𝘀 𝗔𝗣𝗜 for the light/dark mode switch. • 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆 (𝗔𝟭𝟭𝘆): Kept it simple but strict, semantic HTML tags, exact ARIA labels for icon buttons, and proper keyboard focus rings. • 𝗦𝗘𝗢 & 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀: Added JSON-LD structured data in the root layout and optimized the hero assets using next/image (with eager loading above the fold) to prevent layout shifts. 🤖 𝗔𝗜-𝗔𝘀𝘀𝗶𝘀𝘁𝗲𝗱 𝗪𝗼𝗿𝗸𝗳𝗹𝗼𝘄: This build was also a great experiment in modern AI pair programming. I used Claude Code (with underlying models 𝗚𝗟𝗠 𝟰.𝟳 and 𝗚𝗟𝗠 𝟱.𝟭) to lay out the heavy foundations and initial architecture, and then switched to Antigravity (models used 𝗖𝗹𝗮𝘂𝗱𝗲 𝗦𝗼𝗻𝗻𝗲𝘁-𝟰.𝟲 and 𝗚𝗲𝗺𝗶𝗻𝗶 𝟯.𝟭 𝗣𝗿𝗼) for all the granular UI touch-ups and final polish. It was an awesome exercise in getting back to web fundamentals while utilizing cutting-edge tools. Feel free to check it out and tell me what you think: https://roshanj.online/ It still needs some improvement, but I'm happy with the results it generated to release the first version of it. #𝗡𝗲𝘅𝘁𝗷𝘀 #𝗔𝗜 #𝗪𝗲𝗯𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 #𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 #𝗥𝗲𝗮𝗰𝘁 #𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱𝗖𝗦𝗦

🎮 Built a Tic-Tac-Toe Game Using HTML, CSS & JavaScript Just completed another fun project — a fully functional Tic-Tac-Toe web game! This project helped me practice JavaScript logic, DOM manipulation, and grid layouts while keeping the UI clean and interactive. 🔹 Features: 🟢 Two-player functionality (X & O) 🎨 Styled game board using CSS Grid ✨ Hover effects for better UX 🧠 Win condition detection logic 🔄 Game reset functionality (if implemented / upcoming) 💡 What I Focused On: Writing clear game logic Managing state between turns Detecting winning combinations Structuring layout using CSS Grid Keeping the design minimal and user-friendly Small games like this are powerful for strengthening: ✔ Problem-solving skills ✔ Logical thinking ✔ JavaScript fundamentals ✔ Clean UI structuring Next Improvements: Add score tracking Add AI (Play vs Computer mode) Add animations for winning combinations Make it fully responsive for mobile Every small project adds one more layer of confidence. 🚀 Would you play against the AI if I add it next? 😄 #WebDevelopment #JavaScript #FrontendDeveloper #CSS #HTML #CodingJourney #BuildInPublic

🚀 Just leveled up my frontend fundamentals! I created a quick Cheat Sheet on Hyperlinks, Navigation & Portfolio Integration—covering everything from anchor tags to building clean, user-friendly navigation menus. 💡 Key highlights: • How to use <a> tags effectively (href, target, download) • Linking within pages using section IDs • Structuring navigation menus with <ul> and <li> • Making images clickable • Best practices for accessibility and clean UX 📌 Also included practical tips for integrating these into a portfolio—like adding resume downloads and external profile links. Simple concepts, but powerful when applied right. This is a solid step toward building cleaner, more professional web projects. #WebDevelopment #HTML #Frontend #LearningJourney #PortfolioBuilding #CodingTips