Event Delegation in JavaScript Improves Performance

Simulating Friend Request Delay using JavaScript (SetTimeout & DOM): I’m excited to share another small project I built while practicing JavaScript DOM manipulation and asynchronous behavior. In this project, when the “Add Friend” button is clicked, the request is not accepted instantly. Instead, it waits for 5 seconds (5000ms) before updating the status from “Stranger” to “Friend.” Similarly, when “Remove Friend” is clicked, it again takes 5 seconds before updating the status back from “Friend” to “Stranger.” This small interaction simulates how real-world applications process requests with delays, such as sending friend requests or processing server responses. Key concepts I practiced in this project: 1.) DOM Manipulation – Dynamically updating text, button labels, and styles 2.) Event Handling – Triggering UI changes using button click events 3.) SetTimeout() – Introducing a delay before executing an action 4.) UI State Management – Maintaining consistent UI changes during interactions Through this project, I clearly understood how SetTimeout() works in JavaScript and also strengthened my knowledge of DOM manipulation and interactive UI behavior. Building small projects like this helps me improve my problem-solving skills and JavaScript fundamentals step by step. Feedbacks and suggestions are always welocme! #JavaScript #DOMManipulation #SetTimeout #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #WebInteraction

Day 16 of my JavaScript journey 🚀 Built a Drag and Drop Interface using HTML, CSS, and JavaScript. Users can drag items and drop them into different containers with smooth interaction. This project helped me practice: • Drag and Drop API • Event handling • DOM manipulation • Building interactive UI 🔗 Live Demo: https://lnkd.in/gvWBT7tJ 💻 GitHub Repo: https://lnkd.in/gJDK4_AP Learning how to create more interactive and user-friendly web experiences. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Day 13 of my JavaScript journey 🚀 Built a Sticky Navbar using HTML, CSS, and JavaScript. The navigation bar stays fixed at the top while scrolling, improving user experience and accessibility. This project helped me practice: • Scroll events • DOM manipulation • Dynamic class toggling • Enhancing UI/UX 🔗 Live Demo: https://lnkd.in/gU_UCJh2 💻 GitHub Repo: https://lnkd.in/gU_UCJh2 https://lnkd.in/gaZvF3Qb Learning how small UI improvements can make a big difference in real-world websites. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

I recently built a nested commenting system (like LinkedIn/Reddit)… and it was more interesting than I expected 👇 At first, it looked simple: “Just allow replies inside comments.” But once I started building it, a few real challenges came up: → Managing deeply nested state without making it messy → Updating a specific reply without re-rendering the entire tree → Keeping the UI performant as the comment depth grows → Handling add/edit/delete operations cleanly What worked for me: ✔ Using recursion for rendering comments ✔ Updating state immutably to avoid unexpected bugs ✔ Memoizing components to prevent unnecessary re-renders One key realization: Building UI is easy. Managing state and updates at scale is where real engineering begins! #React #Frontend #JavaScript #SystemDesign #WebDevelopment #WebArchitecture #SoftwareEngineering

𝗧𝗼𝗽𝗶𝗰 𝟬𝟮: 𝗣𝗮𝗿𝘁𝗶𝗮𝗹 & 𝗟𝗮𝘇𝘆 𝗛𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻 The Summary: In my last post, we discussed the "Hydration Tax" of full SSR, where the entire application must re-render to become interactive. Partial Hydration and Lazy Hydration are tactical evolutions that move away from this all-or-nothing approach. Partial Hydration only activates specific interactive components (the islands), while Lazy Hydration delays activation until a trigger event occurs, such as a component entering the viewport.  • The Crux:  It's about precision. Why send JavaScript to rehydrate a static footer or a text heavy blog post? Full hydration treats the entire UI as one massive monolith. Partial Hydration breaks the monolith, rehydrating only the few dynamic interactive elements (the islands) that actually require client-side logic. Lazy Hydration optimizes the timeline further, only executing the JS for those islands right when they are needed.  • The Deep Insight (Architect's Perspective): This is a conceptual shift from Monolithic SPAs to Component-First Architecture. When we shift to a Partial and Lazy model, we aren't just minimizing JS. We are fundamentally changing when and if reconciliation happens. In traditional SSR, the framework must deep-reconcile the entire Virtual DOM tree (the "Big Bang" approach) to match the HTML. In Partial Hydration, the framework acknowledges the existence of static HTML and leaves it completely alone. The result is a direct, substantial decrease in TBT (Total Blocking Time). Instead of one long, main-thread-locking rehydration block, the required JS execution is fragmented into tiny, non-blocking units (the individual "island activations"). The user moves from a "fully loaded" picture to a "progressively interactive" interface, without experiencing the Uncanny Valley.  • Tip:  When implementing modern SSG/SSR, always ask: Does this component need JS to be useful? If not, mark it as static. The fastest JavaScript is the JavaScript that never has to run. #WebArchitecture #FrontendPerformance #React #Javascript #SoftwareEngineering #SSR #WebPerf #ObaidAshiqSeries

🔴 Connect Four: From Logic to Layout🟡 I just finished building a fully functional Connect Four game using HTML, CSS, and JavaScript. 🕹️ The most exciting part of this project wasn't just the UI—it was tackling the "Gravity Logic" and designing an efficient algorithm to check for wins across horizontal, vertical, and diagonal axes. 🧮 Key Features: ✅ Responsive Grid System ✅ Dynamic Turn Management ✅ 4-way Win Detection Algorithm #WebDevelopment #JavaScript #CodingProject #Frontend #ConnectFour #Systemstron #ProgrammingLife

Hey everyone! 🚀 Day 28 of #30DaysCodeChallenge – Weather Application using HTML, CSS & JavaScript Today I built a Weather Application that fetches real-time weather data using an API and displays important weather details for any city searched by the user. This project helped me practice API integration, asynchronous JavaScript, and dynamic DOM manipulation. 🔹 Key Features: ✔️ Search weather by city name ✔️ Real-time weather data using API ✔️ Displays temperature, humidity, and wind speed ✔️ Dynamic weather icons based on weather conditions ✔️ Clean and modern UI with blur background effect ✔️ Responsive layout using Flexbox 🔹 Technologies Used: • HTML – Structure of the application • CSS – Styling, glassmorphism effect, responsive layout • JavaScript – API calls, event handling, and DOM updates • Weather API – Fetching live weather data 🔹 What I Learned: • How to use fetch() to call APIs • Handling JSON data from external services • Updating UI dynamically based on API response • Writing cleaner and modular JavaScript code This project was a great exercise in combining frontend UI design with real-time data integration. Looking forward to building more interactive projects in the coming days! #30DaysCodeChallenge #Day28 #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #APIs #CodingJourney

🚀 JavaScript Concept: Event Delegation (Real Example) Instead of adding multiple event listeners, we can handle everything from a parent element. 💡 Why use Event Delegation? ✔ Improves performance ✔ Works for dynamically added elements ✔ Keeps code clean and scalable 🧠 Example: const list = document.querySelector(".menu"); list.addEventListener("click", (e) => { if (e.target.tagName === "LI") { e.target.classList.add("active"); console.log("Clicked:", e.target.textContent); } }); 🔥 Real Power: Even if new <li> items are added later, this still works without adding new event listeners! 📌 Key Takeaway: "Don’t attach events everywhere — handle them smartly from the parent." 📈 Learning step by step towards becoming a Frontend Developer. #JavaScript #FrontendDeveloper #WebDevelopment #DOM #LearningInPublic #100DaysOfCode

🚀 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝗶𝗻𝗴 𝗥𝗲𝗰𝘁𝗶𝗳𝘆 — 𝗮 𝗹𝗶𝗴𝗵𝘁𝘄𝗲𝗶𝗴𝗵𝘁 𝗥𝗲𝗮𝗰𝘁-𝗹𝗶𝗸𝗲 𝗨𝗜 𝗹𝗶𝗯𝗿𝗮𝗿𝘆 𝗯𝘂𝗶𝗹𝘁 𝗳𝗿𝗼𝗺 𝘀𝗰𝗿𝗮𝘁𝗰𝗵 After diving deep into how modern UI frameworks work under the hood, I set out to build one myself. The result is Rectify — a lightweight, React-inspired library with zero React dependencies. 🧠 𝗪𝗵𝗮𝘁’𝘀 𝗶𝗻𝘀𝗶𝗱𝗲  • ⚙️ Fiber reconciler & concurrent rendering — implemented from the ground up  • 🎣 Complete Hooks API — useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer, useId, and more  • 🧩 Class components with full lifecycle support  • 🚀 Advanced features — memo(), lazy(), and <Suspense>  • 🌐 Context API  • 🧭 Built-in router — BrowserRouter, HashRouter, nested routing support  • 🛠️ Tooling integration — Vite plugin + Babel transform  • ⚡ CLI scaffold — spin up a project in seconds All of this comes in at ~𝟭𝟬 𝗞𝗕 𝗴𝘇𝗶𝗽𝗽𝗲𝗱. 🎯 𝗪𝗵𝘆 𝗥𝗲𝗰𝘁𝗶𝗳𝘆? Rectify isn’t trying to replace React Instead, it’s a deep exploration into the mechanics behind modern UI frameworks:  • How does a fiber reconciler actually work?  • How do hooks persist state across renders?  • What does concurrent rendering really mean in practice? If you’ve ever been curious about these internals, the source code is fully open and designed to be read. ⚡ 𝗚𝗲𝘁 𝘀𝘁𝗮𝗿𝘁𝗲𝗱 pnpm create @rectify-dev/rectify-app my-app 📦 Explore  • npm: @rectify-dev/core  • npm: @rectify-dev/router  • Docs: https://lnkd.in/g9j5qDYV Would love to hear your feedback if you give it a try 🙌 #OpenSource #JavaScript #TypeScript #WebDevelopment #Frontend #React #UIFramework