Mastering JavaScript Event Handling and DOM Mechanics

😵💫 “Why is my setTimeout running AFTER my Promise?” This question confused me for a long time while working with JavaScript. I thought: 👉 setTimeout(0) = runs immediately 👉 Promise = async → should run later But I was WRONG. I tested this 👇 console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 👉 Output shocked me: Start → End → Promise → Timeout Then I saw this diagram 👇 …and everything clicked. 💡 The truth: JavaScript doesn’t just run “async code” randomly. It follows a strict priority system: ⚡ Microtasks (Promises) → HIGH priority ⏳ Macrotasks (setTimeout) → LOW priority 🔄 What actually happens: Run all sync code → Start, End Clear Microtask Queue → Promise Then Macrotask Queue → Timeout 🔥 The moment I understood this: Debugging async code became 10x easier No more guessing execution order My React apps felt more predictable 📌 One line to remember: 👉 “Promises beat setTimeout. Always.” If you’re learning frontend, this is one concept you can’t ignore. What was your “wait… what?!” moment in JavaScript? 👇 #JavaScript #FrontendDevelopment #Coding #WebDevelopment #LearnInPublic

🚀 Day 6 of My MERN Stack Journey — Hands-On DOM: How I Built a Task Manager in Plain JS Today I moved beyond basics and built a dynamic Task Manager using JavaScript and DOM. What I learned: ✅ Arrays and objects for managing data ✅ .push(), .pop(), .map(), .filter() in real use ✅ DOM manipulation to display tasks ✅ Event handling using addEventListener ✅ Building a functional UI from scratch 💡 Biggest takeaway: Connecting JavaScript logic with the DOM made everything feel real. This is where frontend development actually starts making sense. Next step: Improving the project with better UI and local storage. 🔗 GitHub: https://lnkd.in/dSw73q63 Read More: https://lnkd.in/ddfkuhWa #MERNStack #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment

🧠 Building My Own Mini React (from scratch) 🚀 Today I went beyond just using React — I tried to understand how it actually works under the hood. So I built a custom version of React’s rendering system using plain JavaScript. Instead of relying on the library, I recreated the core idea behind it: ✨ A virtual “React element” object ✨ A custom render function ✨ DOM manipulation using createElement, setAttribute, and appendChild 💡 What I built: A simple React-like object: { type: "a", props: { href: "https://google.com", target: "_blank" }, children: "Click me to visit Google" } And a custom renderer that converts it into real DOM elements. 🔥 Key Takeaways: ✔ React is basically an abstraction over DOM manipulation ✔ JSX ultimately becomes React.createElement() ✔ Virtual DOM starts from simple JavaScript objects ✔ Frameworks are just layers over core fundamentals 🧩 What I realized: When you strip React down, it’s just: 👉 JavaScript objects + functions + DOM APIs This made React feel far less “magical” and much more logical. 🚀 What’s next: I’m planning to take this further by adding: Component support Re-rendering logic 🔗 GitHub Repo: https://lnkd.in/ggFVNmuC 💬 Would love your feedback! Have you ever tried building something like this from scratch? Or do you think this is the best way to truly learn frameworks? #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode #GitHub

I used to "know" React. Until I actually understood it. For the longest time, I was shipping components, writing hooks, managing state — and genuinely convinced I knew React well. Then I visited react.gg/visualized. And I realized I had been flying blind. This isn't a tutorial. It's not another YouTube video or a Udemy course. It's a collection of interactive visuals that let you see React working in real time — how rendering actually happens, what's going on inside useState and useEffect, why re-renders trigger the way they do, and what the reconciler is doing behind the scenes while you write your JSX. The moment it clicked for me? Watching the component tree update live as state changed. I've read about virtual DOM a hundred times. But seeing it? Different experience entirely. Here's what I took away: → Hooks aren't magic — they follow very predictable, visualizable rules → Re-renders have a clear cause and effect you can literally watch happen → Half of my "React intuition" was actually just guessing If you're a developer working with React — whether you're 3 months in or 3 years in — I genuinely think 20 minutes on this site will change how you think about the code you write every day. It's free. It's interactive. And it'll make you a better React developer. 👉 react.gg/visualized #React #WebDevelopment #Frontend #JavaScript #LearnToCode #ReactJS #SoftwareDevelopment #Programming #DeveloperTools

𝗜 𝗷𝘂𝘀𝘁 𝗳𝗶𝗻𝗶𝘀𝗵𝗲𝗱 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 You Don’t Know JS: Async & Performance by Kyle Simpson and it completely changed how I think about JavaScript under the hood As a frontend engineer, it’s easy to rely on frameworks like React or Next.js and forget what’s really happening behind the scenes. This book forced me to slow down and really understand how JavaScript handles asynchronous operations and performance. 𝗛𝗲𝗿𝗲 𝗮𝗿𝗲 𝗮 𝗳𝗲𝘄 𝗸𝗲𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 that stood out to me: 1. 𝗧𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗶𝘀 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴 JavaScript isn’t “async” by magic. The event loop, call stack, and callback queue are constantly working together to decide what runs and when. Understanding this helped me debug weird UI delays and race conditions more confidently. 2. 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 > 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀 (𝗯𝘂𝘁 𝗻𝗼𝘁 𝗮 𝘀𝗶𝗹𝘃𝗲𝗿 𝗯𝘂𝗹𝗹𝗲𝘁) Promises improve readability and error handling, but they still rely on the same underlying async model. It’s not about replacing callbacks it’s about structuring async flows better. 3. 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 = 𝗖𝗹𝗲𝗮𝗻𝗲𝗿 𝗺𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗲𝗹 Async/await makes code look synchronous, but it’s still non blocking underneath. Knowing this helps avoid mistakes like thinking code runs sequentially when it doesn’t. 4. 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 = 𝗗𝗲𝘀𝗶𝗴𝗻, 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗼𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻 Things like debouncing, throttling, and avoiding unnecessary re-renders aren’t “nice-to-haves” they directly impact user experience, especially in real time apps. As someone currently building systems with real time updates this book made me rethink how I structure state updates and async logic. 𝗡𝗼𝘄 𝗜’𝗺 𝗰𝘂𝗿𝗶𝗼𝘂𝘀 - How do you currently handle async logic in your frontend apps? - Have you ever debugged something that turned out to be an event loop issue? Let’s share experiences I’m Amina Ismaila and I share my tech journey and experience

🚀 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗗𝗲𝘀𝗶𝗴𝗻𝗲𝗿 𝗟𝗮𝗻𝗱𝗶𝗻𝗴 𝗣𝗮𝗴𝗲... 𝗕𝘂𝘁 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗝𝗦𝗫 😮 Today I completed a banner (hero) section + navbar using React via CDN, and honestly, this approach changed how I see React completely. While most beginners jump straight into JSX and frameworks, I took a step back and built everything using React.createElement(). No build tools. No JSX. Just pure JavaScript and React fundamentals. 💡Why this approach? I wanted to understand what’s really happening under the hood instead of relying on abstractions. 🧠 What I learned deeply: 🔹 How React elements are actually created and structured 🔹 How children and props are passed manually 🔹 How component composition works without syntactic sugar 🔹 How ReactDOM renders and updates the UI 🔹 The mental model behind the Virtual DOM 🎯 What I built: ✨ A clean and modern Designer Landing Page banner ✨ A structured Navbar with CTA (Book a Call) ✨ A Hero section with:  • Left vertical designer label   • Center content (headline + stats counters)   • Right-side image composition   • Scroll indicator 🛠️ Tech Stack: React (CDN) | Vanilla JS | CSS | SCSS ⚡ Challenges I faced: ❌ Managing nested elements without JSX readability ❌ Handling multiple children arrays inside "createElement" ❌ Keeping the structure clean and scalable ❌ Debugging UI hierarchy manually ❌ Reusing components without modern tooling But overcoming these made everything click 💡 Live: https://lnkd.in/gP3d8U4a Repo: https://lnkd.in/ge5rSn83 Profile: https://lnkd.in/dZNGV9UM 🔥 Big takeaway: JSX is convenient… but understanding React without it is powerful. This exercise helped me see React as JavaScript first, framework second. 💬 Next step: Moving into JSX, Hooks, and modern tooling with a much stronger foundation. #webdevelopment #webdev #frontenddeveloper #learninpublic #buildinpublic #creativecoding #programming #javascript #function #import #export #react #virtualDOM #components #project #assignment

🚀 JavaScript Practical Project Series – Project 8: Quiz App Excited to share my latest project in this JavaScript series! 💻 I built a fully functional Quiz Application that allows users to answer questions and get their score at the end. This project simulates real-world application logic and user interaction. 🔹 Features: • Multiple-choice questions ❓ • Interactive question navigation • Real-time answer selection • Final score calculation and result display 🔹 Tech Stack: HTML | CSS | JavaScript 🔗 Live Project: https://lnkd.in/gxVT-THp 📁 GitHub Repository: https://lnkd.in/gXYEPby7 Through this project, I learned how to manage application state, user interaction, and dynamic content rendering using JavaScript. This project pushed me to think more like a developer building real applications 🚀 #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #Projects #QuizApp #BuildInPublic #DeveloperLife #100DaysOfCode #TechGrowth

🚀 #Day14 of #100DaysOfCoding — MERN Stack @ Skill Shikshya The DOM just got a whole lot deeper today. Here's what I explored: 🔹 IntersectionObserver — Finally understand how websites detect when elements hit the viewport. Lazy loading and scroll animations? This is the magic behind them. 🔹 Modal Components — Built interactive popups from scratch. Small UI pattern, huge real-world impact. 🔹 Web Storage (LocalStorage) — Learned how to persist data in the browser so users don't lose their progress on refresh. 🔹 Form Handling with the DOM — Capturing, validating, and responding to user input the right way. 🔹 Event Delegation — Instead of attaching listeners to every child element, let the parent handle it. Cleaner, faster, smarter. 🔹 Event Bubbling & Capturing — Understanding how events travel through the DOM tree changed how I think about UI interactions entirely. Every day I'm realising that JavaScript has far more depth than I initially thought. The fundamentals aren't just theory — they show up everywhere in real-world code. 14 days in. 86 to go. Let's keep building. 💪 #MERN #JavaScript #WebDevelopment #SkillShikshya #100DaysOfCode #Frontend #CodingJourney #DOM #LearningInPublic

🎓 Day 12: Mastering the DOM Like a Pro 🚀 | JavaScript Deep Dive 👉Just completed an amazing lecture on DOM (Document Object Model) — the backbone of every interactive website! 💻✨ Here’s what I learned 👇 🔹 Part 1: Understanding & Selecting 🌐 DOM is the “Living Object” version of HTML 🧠 Difference between "window" & "document" 🎯 Selecting elements using: - "getElementById", "getElementsByClassName" - Modern methods: "querySelector", "querySelectorAll" 🌳 DOM Traversal like navigating a family tree: - "parentElement", "children", "nextElementSibling" 🔹 Part 2: Reading & Manipulating Elements ✏️ Changing content smartly: - ".innerHTML" vs ".textContent" vs ".innerText" 🔐 Learned about XSS attacks & how ".textContent" keeps data safe ⚙️ Handling attributes: - "getAttribute", "setAttribute" 🎨 Styling the modern way using "classList": - ".add()", ".remove()", ".toggle()" 💅 Inline styling using ".style" 🔹 Part 3: Changing DOM Structure 🧱 Creating elements using "document.createElement()" ➕ Adding elements with: - "append", "prepend", "before", "after" ❌ Removing elements with ".remove()" ⚡ Performance tip: Use DocumentFragment for faster rendering 🔥 Learned about Reflow & Repaint (why performance matters!) 👨💻 Who should learn this? ✔️ JavaScript Beginners ✔️ Frontend Developers ✔️ Students preparing for interviews ✔️ Anyone who wants to build dynamic & secure web apps 💡 This lecture made me realize: 👉 DOM is not just about selecting elements 👉 It’s about writing efficient, 🔐 & optimized code 🚀 Day 12 complete — consistency is the key! #javascript #webdevelopment #frontend #coding #mernstack #learning #developer #100DaysOfCode #day12

AI-Powered Full Stack Development Journey. Today I stopped just writing HTML and started controlling it with JavaScript. That's what the DOM is — the bridge between your code and the live page. Here's what I covered today: 🔍 Selecting Elements ▸ getElementById() — grab one element by its id ▸ getElementsByClassName() — get all elements with a class ▸ getElementsByTagName() — get all elements by tag name ▸ querySelector() — find the first match using CSS selector ▸ querySelectorAll() — find all matches using CSS selector 💻 Projects I built today: ▸ Random background color changer on button click ▸ Show / Hide password toggle — a real feature used in every login form 💡 Key insight: Before DOM, JavaScript was just logic sitting in a file. After DOM, JavaScript can READ, CHANGE, and REACT to anything on the page. That shift in thinking is what makes frontend development exciting. One concept at a time. One project at a time. 💪 #JavaScript #DOM #DreamTusk #WebDevelopment #FrontendDevelopment #LearningInPublic #CodingJourney #DreamTuskTechnologies