GitHub : https://lnkd.in/gvjUhzmC 🔥 Day 1 of 20 JavaScript Micro-Projects 👨💻 Today we’re building a fully responsive navbar using only HTML, CSS & Vanilla JS — no frameworks, no shortcuts, just raw frontend grind. Modern UI, glass effect, smooth animations, mobile hamburger toggle — this is how real devs learn UI fundamentals. Because before React, before frameworks, before hype… there were skills. We build foundations. We sharpen fundamentals. We rise. 💡 Project #1: Responsive Navbar 🧠 Concepts: DOM manipulation, class toggling, mobile-first layout 🔗 GitHub repo in bio ⚡ Follow for 19 more fire projects Let’s craft greatness — one line of code at a time. 🚀💙 #javascript #frontend #webdevelopment #htmlcssjavascript  #javascriptprojects #frontendprojects #vanillajs #webdev  #cssdesign #responsivewebdesign #coderlife #uiuxdesign  #codingreels #learnjavascript #frontenddeveloper  #programminglife #javascriptreels #100daysofcode  #webdevcommunity #codetutorial #buildinpublic  #softwareengineering #techcontent #devcommunity  #codeweaver

🚀 Back to Basics – Day 19: Debugging React Performance Like a Pro 🔥 In the last post, we explored rendering bottlenecks — understanding why components re-render and how to control them. Today, let’s move from theory to practice: how to find and fix these slowdowns in real React projects. 🧩 ✨ Why This Matters You can’t optimize what you can’t measure. Profiling reveals where time and memory are really going — because sometimes, the “slow” part isn’t where you think. 👀 ⚙️ 1️⃣ React DevTools Profiler – Your First Stop React’s built-in Profiler shows which components re-render, how long they took, and why. ✅ Open DevTools → “Profiler” tab ✅ Record interactions like scrolls or clicks ✅ Identify components with long render times 💡 Tip: Highlight frequent re-renders — they often signal missing React.memo() or unnecessary state updates. ⚙️ 2️⃣ Flame Graphs – Visualizing the Problem Flame graphs (in Chrome or React Profiler) help you see performance hotspots. Each bar = function or component; width = time taken. ✅ Look for wide or repeating bars — those are your bottlenecks. ✅ Combine with “why did this render?” tools to pinpoint causes. ⚙️ 3️⃣ Real-World Fixes 🔹 Split heavy components using dynamic imports (React.lazy) 🔹 Cache computed data with useMemo() 🔹 Limit re-renders with keys, pure components, and controlled props Bonus: Audit with Lighthouse and Performance Tab in Chrome DevTools for end-to-end metrics (TTI, FID, CLS). 💡 Takeaway Optimizing React isn’t about guessing — it’s about measuring. Once you can profile, visualize, and tune your components, you’re not just building — you’re engineering performance. ⚙️ 👉 Tomorrow – Day 20: We’ll wrap up our performance chapter with Rendering Optimization Strategies for Modern Frameworks — from React to Next.js, and how hydration and server rendering affect speed. 🚀 #BackToBasics #React #JavaScript #Frontend #WebPerformance #Optimization #Rendering #Profiling #LearningInPublic #CodingJourney #AdvancedJavaScript

GitHub: https://lnkd.in/gemJEbhB 🔥 Project 3/20 — Modal Popup Magic! Today we’re crafting a modern, responsive modal popup using pure HTML, CSS & JavaScript. Click a button — boom, modal appears. Click outside — boom, it disappears. Smooth animations, overlay interaction, and event bubbling mastery included. Front-end fundamentals done right. Clean DOM manipulation, class toggling, UX-first thinking. 💡 Concepts: ✅ Event bubbling ✅ DOM manipulation ✅ Overlay click-to-close ✅ Modal animations 🔗 GitHub repo in bio Keep coding. Keep building. One project closer to mastery. ⚡ #javascript #frontend #webdevelopment #htmlcssjavascript  #vanillajs #modalpopup #eventbubbling #uxdesign #cssanimations  #frontendprojects #codetutorial #codingreels #webdevcommunity  #responsiveui #githubproject #100daysofcode #softwareengineering  #learntocode #webdevjourney #codewithme #frontenddeveloper  #programminglife #buildinpublic #webdesign #codeweaver #uiux

Ever felt like you’re untangling a giant spaghetti ball of dependencies in your JavaScript projects? Components calling components, passing props down endless trees, and then having to lift state just to get siblings to talk? I certainly have. It’s a frustrating cycle that can slow down development and make debugging a nightmare. That's where the 𝗘𝘃𝗲𝗻𝘁 𝗕𝘂𝘀 𝗣𝗮𝘁𝘁𝗲𝗿𝗻 has often been my lifeline. I first truly appreciated it on a complex dashboard project where various widgets needed to react to actions elsewhere on the page without direct knowledge of each other. Instead of coupling them tightly, they simply published events and subscribed to events. The beauty is in the 𝗱𝗲𝗰𝗼𝘂𝗽𝗹𝗶𝗻𝗴. Your components become blissfully unaware of who's sending or receiving, only that a specific event has occurred. This makes your codebase much cleaner and easier to reason about, especially as it scales. But here's a word of caution: don't overuse it. An "event soup" where everything fires everything can be just as bad as tight coupling. Use it strategically for cross-cutting concerns or communication between distant, unrelated components. Think of it as a central dispatch system, not a free-for-all. For those curious, I’ve included a simple JavaScript code example to illustrate how you can build one yourself. How do you manage complex component communication in your JavaScript applications? Have you used an Event Bus, or do you prefer other patterns? I'd love to hear your experiences and approaches! 👇 #JavaScript #FrontendDevelopment #SoftwareArchitecture #EventBus #WebDev

Completed Episode 5: Let’s Get Hooked! of #NamasteReact by Akshay Saini 🚀 where I explored the world of React Hooks, Reconciliation and more... 🙌🏻 🚀 React Hooks & How React Works Behind the Scenes! ⚛️ React is known for being fast and efficient — all thanks to Hooks, the Virtual DOM, and the Reconciliation process powered by React Fiber. 🪝 React Hooks Hooks are JavaScript functions that let you use state and other React features without classes.They make components simpler and reusable. Popular Hooks: useState → Manage local state useEffect → Handle side effects like API calls useContext → Access shared data useCallback / useMemo → Improve performance useRef → Access DOM elements ⚡ Why React is Fast React doesn’t update the Real DOM directly Instead, it uses a Virtual DOM — a lightweight copy of the Real DOM stored in memory. 🔄 Reconciliation & React Fiber Reconciliation is the process React uses to compare the old and new Virtual DOMs and update the UI efficiently. React Fiber made this process even better — allowing React to split rendering into smaller tasks, pause work, and prioritize updates for smoother performance. 🌳 Real DOM vs Virtual DOM The Real DOM is the actual webpage the browser displays.Updating it directly can be slow. The Virtual DOM is like a blueprint of the page — React updates this first, figures out what changed, and then touches only those parts of the Real DOM. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #CodingTips #ReactHooks #VirtualDOM #ES6 #WebDevelopment #ReactJS #Frontend #JavaScript #Coding #Programming #cleancode #softwareEngineer #Devlife #LearningJourney #CareerGrowth #CodeSmarter #NamasteReact #letsgethooked #react #AkshaySaini #fullstackdeveloper

𝟭𝟱 𝗛𝗼𝘂𝗿𝘀 𝗜𝗻: Part 2 Complete! Mastering the DOM and Browser Interactivity 🚀 I'm thrilled to announce I've just completed the 7-hour "JavaScript Learn Everything Part 2" video from the Sheryians Coding School YouTube channel! A huge thank you to Harsh Vandana Sharma for another incredibly detailed marathon session. This part was all about bridging the gap between JavaScript logic and the live web page. We've officially moved from the console to creating dynamic, interactive user experiences. Here's a summary of the critical topics we mastered: 𝗧𝗵𝗲 𝗗𝗢𝗠 (𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗢𝗯𝗷𝗲𝗰𝘁 𝗠𝗼𝗱𝗲𝗹): Finally, we learned how to "talk" to the website! We covered selecting elements, traversing the DOM tree, and dynamically adding, removing, or changing any HTML/CSS on the page. 𝗘𝘃𝗲𝗻𝘁𝘀 & 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴: This is where the magic happens. We learned how to listen and react to user actions like clicks, scrolls, keypresses, and form submissions using event listeners. 𝗙𝗼𝗿𝗺𝘀 & 𝗙𝗼𝗿𝗺 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: We put our DOM and event skills to practical use by learning to capture user input from forms and validate it in real-time, ensuring data is clean before it's ever submitted. 𝗪𝗲𝗯 𝗦𝘁𝗼𝗿𝗮𝗴𝗲 (𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲, 𝘀𝗲𝘀𝘀𝗶𝗼𝗻𝗦𝘁𝗼𝗿𝗮𝗴𝗲, & 𝗖𝗼𝗼𝗸𝗶𝗲𝘀): A crucial deep dive into how browsers "remember" data. We learned the differences between these methods and when to use them to save user preferences, tokens, or session info. 𝗧𝗶𝗺𝗲𝗿𝘀 & 𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹𝘀: A deeper look at asynchronous JavaScript with setTimeout and setInterval for timing-based events. 𝗕𝗼𝗻𝘂𝘀 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀: The session wrapped with a ton of practical questions that helped solidify all these new concepts. Completing this section feels like a huge level-up. I'm no longer just writing logic; I'm building interactive applications. Can't wait for Part 3! #JavaScript #DOM #WebDevelopment #Frontend #CodingJourney #AIpoweredCohort #SheryiansCodingSchool #HarshVandanSharma #LocalStorage #EventHandling #WebDev

⚛️ useEffect — A Simple Breakdown That Finally Made Sense for Me Today I revised useEffect, and I focused on understanding when and why it runs. Once you look at it step-by-step, it feels much more predictable. 🔹 Here’s the simple flow: 1️⃣ It runs after the component renders 2️⃣ It runs again when the values in the dependency array change 3️⃣ If there’s a cleanup function, that runs when the component unmounts 🔹 Dependency Array Cheat Sheet: [] → run only on mount [count] → run when count updates no array → run on every render (not common) 🔹 Cleanup Example: Useful for timers, subscriptions, or event listeners. useEffect(() => { const id = setInterval(() => { console.log("Boring (: ..."); }, 1000); return () => clearInterval(id); // cleanup }, []); Understanding this flow makes React feel smoother to work with. Learning the “why” behind hooks really helps in writing predictable and clean components. #ReactJS #useEffect #Hooks #FrontendDevelopment #WebDevelopment #JavaScript #BuildingInPublic #100DaysOfCode

🌟 Day 2 of DOM (Document Object Model) in JavaScript 🌟 Today marks the second day of my DOM learning journey, and it was filled with some really fun and interactive tasks that helped me understand how JavaScript can dynamically change the behavior of web pages 🎯 💡 Here’s what I practiced today: 🔹 Changing Background Color: I created multiple boxes and added functionality so that whenever I click on a specific box, its background color changes instantly. It helped me understand how to use event listeners and manipulate styles through JavaScript. 🔹 Counter Project: I built a simple counter app that increases, decreases, and resets numbers on button clicks. Through this, I got a clear idea of how to handle DOM events, update values, and reflect real-time changes on the screen. 🔹 Image Switch Task: Another interesting task I completed was creating a feature where one image changes to another when an event (like hover or click) occurs. This was a great way to explore image manipulation and conditional logic in the DOM. Each small project strengthened my confidence in handling the DOM and made me realize how powerful JavaScript can be when it comes to making webpages interactive ✨ I’ve uploaded all these tasks and practice files on my GitHub for reference 👇 🔗 GitHub Repository: https://lnkd.in/devrWxM3 #JavaScript #DOM #WebDevelopment #Frontend #CodingJourney #LearningInPublic #GitHub #DeveloperJourney 🚀

🚀 How to Write a Dynamic Table Using DominatorJS! We’re excited to share a ready-to-run source code example showing how to create a dynamic table listing all DRC presidents from independence to now entirely with DominatorJS. 🎥 Watch the tutorial video 💻 Download the source code: ⬇️ Get it here https://lnkd.in/dg5V3PZr In this example, you’ll learn how to: ✅ Build tables dynamically from a JavaScript array ✅ Include images, dates, and text with object-based DOM creation ✅ Style tables directly using DominatorJS objects 💡 Why this matters: DominatorJS makes DOM manipulation fast, simple, and beginner-friendly. Perfect for experimenting with real projects, building interactive UIs, and leveling up your JavaScript skills. 🔥 Get hands-on now: Run the code immediately Modify it to create your own dynamic tables Share your results in the comments we’d love to see your creations! #DominatorJS #JavaScript #DynamicTable #congodevelopers #LearnToCode #OpenSource #WebDev 

console.log("Start"); setTimeout(() => console.log("...Middle..."), 0); console.log("End"); The output is "Start", "End", "...Middle...". If JavaScript is single-threaded and can only do ONE thing at a time, how is this possible? This paradox used to drive me crazy. JavaScript isn't "magic"—it's a system. The "magic" is a brilliant trio of components working behind the scenes: Web APIs, the Event Loop, and the Task Queues. I've just published a deep-dive article that breaks this down, piece by piece, with simple analogies to finally make it click. If you're a designer learning to code, a new developer, or anyone who wants to truly understand how JavaScript works "under the hood," this is for you. You can read the full article on Medium here: https://lnkd.in/gc9wEdDw #JavaScript #WebDevelopment #FrontendDeveloper #Async #EventLoop #Programming #Developer #Coding #NodeJS #Tech #BuildInPublic #SoftwareDevelopment #Promises #AsyncAwait #WebDev #Engineering #SoftwareEngineering #ComputerScience #FullStackDeveloper #ReactJS #CodeNewbie #DeveloperLife #JavascriptDeveloper #TechnicalWriting #TechCommunity #UIUX #DesignerWhoCodes #Collaboration #Frontend