#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day09 🚀 Project: Speech to Text Converter 📌 What I built Today, I built a Speech to Text Converter web application using HTML, CSS, and JavaScript. The app converts real-time voice input into text using the browser’s Speech Recognition API, with start and stop controls for better usability. 🛠 Technologies Used HTML5 CSS3 (Flexbox, Animations, Gradients) JavaScript (Web Speech API) ⚠ Challenge I faced Handling continuous speech recognition while updating real-time and final transcripts smoothly inside the UI. ✅ How I solved it I implemented a fixed-height text container with vertical scrolling (overflow-y: auto) so long speech content remains readable without breaking the design. 💬 I’m open to feedback and suggestions 🚀 🔗 Project link in the comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #HTML #CSS #WebAPIs #SpeechRecognition #100DaysOfCode #CodingLife #DeveloperIndia #PortfolioProject

🧪 Week 15 – Build in Public This week was about removing complexity I had built myself. No new features. No user-facing changes. Just replacing a pattern that worked, with one that works better. In my project I allow the user to navigate inside nested folders. The focus of the week: folder navigation state. Previously, I was managing which folder the user had selected using localStorage and a chain of useEffect hooks, a restoring flag, a read on mount, writes at six different call sites, and a separate effect to catch stale state after data updates. It worked. But it was fighting against the browser instead of working with it. The insight was simple: if something behaves like navigation, treat it like navigation. I replaced the whole system with Next.js's useRouter and useSearchParams. The selected folder now lives in the URL. What I replaced: ✅ Removed the isRestoringFolder state flag ✅ Removed the restore-from-localStorage useEffect (~40 lines) ✅ Removed the stale folder check useEffect (~30 lines) ✅ Removed all manual localStorage writes for folder state (6 call sites) What I got for free: 🎯 Browser back/forward navigates through folder history 🎯 Page refresh restores the exact folder, no custom logic needed 🎯 router.push() vs router.replace() makes intent explicit: user action vs internal fallback 🎯 One effect instead of three to rule the same behaviour The real lesson: accumulated workarounds are invisible until you find the right abstraction. #buildinpublic #frontenddevelopment #productengineering #webengineering #softwaredevelopment #webdevelopment #javascript #nextjs #uxengineering #shipping --- I post about web engineering, front-end and soft skills in development. Follow me here: Irene Tomaini

Rendering strategies are one of the most important foundations to understand before building a web application. Especially now when AI can generate most of the code, we need to make the right architectural decisions. So I spent weeks putting together a tutorial on this and honestly, I think it's the best one I've made yet. "React Rendering Strategies" is an interactive deep dive from server-rendered pages and jQuery all the way to React Server Components. Every rendering strategy has diagrams and animated loading sequences we can play through. We see exactly what happens between "click" and "content appears". It's part of the "Modern Front-End Development with React" series I'm building on Upskills, a place for developers who want to understand their tools deeply, not just use them. 👇 Read full tutorial here: https://lnkd.in/gBNVw62h 👇 For Vietnamese readers: https://lnkd.in/gDYkTtKi

So here's one of the things I was building during my break. WeChat — a full-stack real-time chat application, built from scratch. 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 → Glassmorphism UI — frosted glass panels, animated gradients, floating orbs → Custom CSS keyframe animations for message send/receive, online status pulse, and page transitions → Syne + DM Mono typography for a sharp, modern feel → Full design token system via CSS variables for consistency at scale 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 → REST API built with Node.js + Express → MongoDB with Mongoose for data modelling → Real-time messaging via Socket.io → JWT-based authentication with secure HTTP-only cookies → Password hashing with bcryptjs → Image uploads handled through Cloudinary The biggest thing I learned? Clean architecture isn't just theory. Keeping UI and state completely decoupled meant I could overhaul every visual component without breaking a single store call, socket subscription, or API integration. That clicked differently when I actually lived it. 𝗟𝗶𝘃𝗲 𝗮𝘁: https://lnkd.in/gMXghZ3G This is just the first of a few things I'll be sharing. More coming soon. 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: React 18 · Vite · Tailwind CSS · DaisyUI · Zustand · React Router · Axios · Node.js · Express · MongoDB · Socket.io · Cloudinary · JWT #ReactJS #NodeJS #FullStackDevelopment #WebDesign #JavaScript

🚀 𝐓𝐡𝐞 𝐌𝐨𝐦𝐞𝐧𝐭 𝐑𝐞𝐚𝐜𝐭 𝐂𝐨𝐧𝐭𝐞𝐱𝐭 𝐅𝐢𝐧𝐚𝐥𝐥𝐲 “𝐂𝐥𝐢𝐜𝐤𝐞𝐝” 𝐟𝐨𝐫 𝐌𝐞 I was building a simple dark/light theme feature. Sounds easy, right? Until my component tree started looking like this: App → Layout → Header → Toolbar → Button And I was passing theme through every single level. Even components that didn’t care about the theme had to accept it… just to pass it down. That’s when I realized — this isn’t scalable. This is prop drilling. 🧠 The Turning Point: React Context Instead of threading props manually through the tree, I used the Context API. Conceptually, Context works like a broadcast system: 1️⃣ createContext() → creates a shared container 2️⃣ <Provider> → supplies the value at a higher level 3️⃣ useContext() → consumes it anywhere below No more unnecessary prop forwarding. 🔬 𝐓𝐞𝐜𝐡𝐧𝐢𝐜𝐚𝐥 𝐃𝐞𝐭𝐚𝐢𝐥 𝐓𝐡𝐚𝐭 𝐌𝐨𝐬𝐭 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫𝐬 𝐌𝐢𝐬𝐬 React compares Provider values using Object.is. If you pass a new object literal like: <𝑃𝑟𝑜𝑣𝑖𝑑𝑒𝑟 𝑣𝑎𝑙𝑢𝑒={{ 𝑡ℎ𝑒𝑚𝑒: "𝑑𝑎𝑟𝑘" }} /> Every render creates a new reference → all consumers re-render. The better approach? Store the value in state Or memoize it This small detail makes a big difference in performance. 🎯 When Context Makes Sense ✔ Theme ✔ Auth state ✔ Language ✔ Global UI configuration But Context isn’t a replacement for props. It’s a tool for shared, cross-cutting state. The real lesson? Good React architecture isn’t about avoiding props. It’s about knowing when to elevate state and when to broadcast it. #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #SoftwareArchitecture #WebDevelopment

Have you seen the new <geolocation> element in action? 📍 Get user location (Without JavaScript) It's a fascinating shift in how browsers handle permissions. Instead of writing custom JS wrappers for every location request, we're moving toward a declarative, native approach. How it works: The element provides a built-in button that manages the permission flow automatically: 1️⃣ First-time access: Triggers the native browser permission prompt. 2️⃣ Denied status: Provides an easy path for the user to revoke or grant access later. 3️⃣ Granted status: Acts as a "refresh" button, fetching the current location immediately without redundant prompts. Customizing with attributes: What makes this powerful are the controls built directly into the markup: 🔹 accuracymode: Need high precision? Toggle it on. Just keep in mind the tradeoff: slower response times and higher power consumption. Default (approximate) 🔹 autolocate: If the user has already granted permission, the element triggers the onlocation event on page load. No click required. 🔹 watch: Want to track movement? This fires events continuously. It's surprisingly smooth. This feels like a major step toward simplifying common web patterns. Have you had a chance to play with this yet? I'd love to hear your thoughts on whether this could replace your current geolocation implementation. Read more: Article by Manuel Matuzović https://lnkd.in/gZx5KHXj #HTML #Frontend #WebDevelopment #CodingTips #UIUX #JavaScript #WebDev #DeveloperCommunity #itsmacr8

Why building a "simple" Accordion is actually a Masterclass in React State 🚀 I recently spent some time building a custom Accordion component from scratch. On the surface, it’s just showing and hiding text. But under the hood, it was a great challenge in managing complex UI logic. The Challenges I Faced: Single vs. Multi-Selection: Moving from a single state (one item open) to an array-based state (multiple items open) required a total shift in how I thought about data flow. The "Double Arrow" Trap: I ran into a classic bug where my onClick was returning a function instead of executing it. A great reminder that how we call handlers in JSX matters! State Latency: Learning that console.log right after setState shows the old value, not the new one, was a lightbulb moment for me regarding React’s asynchronous nature. Why not just use the HTML <details> tag? While <details> is great for simple use cases, I chose React state because: Exclusive Selection: <details> doesn't natively support "close others when one opens." State Control: I needed the app to "know" which items were open to perform other logic. Animations: React state allows for much smoother transitions and custom styling that matches the brand perfectly. Check out the snippet below! It’s not about finding the easiest way; it’s about finding the way that gives you the most control. #ReactJS #WebDevelopment #CodingJourney #Frontend #Javascript #LearningInPublic

🚀 Chai Aur Code Web Development Cohort Hitesh Choudhary Piyush Garg Progress Update (Day 8 to Day 10) The last few days have been packed with learning that bridges fundamentals with real-world frontend development. 🔹Day 8 – Layouts & Design Thinking 1. Grid implementation using Tailwind CSS 2. Understanding Mobile-First Design 3. Designing for smaller screens first 4. Scaling layouts efficiently for larger devices 🔹Day 9 – Real-World Frontend Practices 1. Importance of early deployment 2. Built a landing page clone of ngrok as a hands-on exercise 3. Core concepts of responsive design 4. Learning the importance of observation while cloning designs 5. Understanding the role of JavaScript in dynamic UIs 🔹Day 10 – JavaScript Begins 1. JavaScript internal working / architecture 2. Using the JavaScript debugger 3. Understanding hoisting and how it affects code execution #Chaicode #WebDevelopment #FrontendDevelopment #JavaScript #CSSGrid #TailwindCSS #LearningJourney

🚀 Built a Dictionary Website using HTML, CSS & JavaScript Excited to share my latest mini project – a fully functional Dictionary Web App that fetches real-time word meanings using an API. 🔎 Features: • Search any English word • Get real-time meanings using Dictionary API • Displays definitions clearly and dynamically • Clean and responsive UI • Error handling for invalid or empty inputs 💡 This project helped me improve: • API integration using fetch() • Async/Await in JavaScript • DOM manipulation • Error handling and user validation • Clean UI structuring Building small projects like this strengthens core JavaScript concepts and improves real-world problem-solving skills. More projects coming soon 🚀 #WebDevelopment #JavaScript #FrontendDevelopment #HTML #CSS #APIs #LearningByBuilding #AnshGupta

🚀 Why Your React Component Re-Renders Unnecessarily (And How to Fix It) Have you ever noticed that a child component re-renders even when its props haven’t changed? That’s where React.memo comes in. 🔥 🧠 What is React.memo? React.memo is a Higher Order Component that prevents unnecessary re-renders by performing a shallow comparison of props. If props don’t change → React skips the re-render. Example: const Child = React.memo(({ count }) => {  console.log("Child Rendered");  return <h1>{count}</h1>; }); Now the Child component will re-render only when count changes. Common Mistake: <Child data={{ name: "React" }} /> Even if the data looks same, React will re-render ❌ Because a new object reference is created on every render. 👉 Fix using useMemo or useCallback to stabilize references. 🎯 When Should You Use React.memo? ✅ Large components ✅ Expensive UI rendering ✅ Frequently updating parent ❌ Not needed for small/simple components Performance optimization is not about adding tools everywhere. It’s about using the right tool at the right place. Are you using React.memo in your projects? 👇 #ReactJS #FrontendDeveloper #JavaScript #WebPerformance #WebDevelopment #SoftwareEngineering