Debouncing vs Throttling in JavaScript

Day 17/100 of JavaScript Today’s topic: DOM Events (deeper understanding) Events allow JavaScript to respond to user interactions and system actions 🔹Adding events btn.addEventListener("click", handleClick); function handleClick() { console.log("Clicked"); } 🔹Event flow Events follow two phases: - Capturing (top → down) - Bubbling (bottom → up) btn.addEventListener("click", handler, true); // capturing btn.addEventListener("click", handler); // bubbling 🔹Event object btn.addEventListener("click", (e) => { console.log(e.target); // actual clicked element console.log(e.currentTarget); // element with listener }); 🔹Event delegation Handling events at parent instead of multiple children parent.addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); 🔹Prevent default behavior form.addEventListener("submit", (e) => { e.preventDefault(); }); #Day17 #JavaScript #100DaysOfCode

#Day49 of #100DaysOfCode Today I built a Profile Card Generator using HTML, CSS, and JavaScript Features I implemented: * Form to add user details (name, email, description) * Upload and preview profile image * Dynamic creation of profile cards * Default image if no file is selected * Clean and structured UI layout What I learned: * Handling form submission using JavaScript * Working with file inputs and image preview using URL.createObjectURL() * Dynamically updating HTML using template literals * Managing user input and resetting forms This project helped me understand how real-world profile systems work where users can add and display their information dynamically Building projects daily and improving consistency step by step Code Of School - Avinash Gour Ritendra Gour #Day49 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #100DaysOfCode

Day 16/100 of JavaScript Today’s topic : DOM Events After understanding DOM structure, the next step is handling user interactions using events JavaScript can listen to events and respond to user actions like clicks, typing, or scrolling 🔹Adding event listener const btn = document.getElementById("btn"); btn.addEventListener("click", () => { console.log("Button clicked"); }); 🔹Common events - click - input - submit - keydown 🔹Event object btn.addEventListener("click", (event) => { console.log(event.target); }); 🔹Event bubbling (basic idea) Events propagate from child → parent unless stopped event.stopPropagation(); DOM events allow JavaScript to make web pages interactive by responding to user actions #Day16 #JavaScript #100DaysOfCode

Day 5 of My JavaScript Journey 🚀 Today, I learned about if/else statements and type conversion in JavaScript. The if/else statement is used to control the flow of a program based on conditions. Example: if (age > 18) { console.log("Adult"); } else { console.log("Not an adult"); } I also learned about type conversion and coercion. • Type conversion is when we manually change a value from one type to another. • Type coercion is when JavaScript automatically converts types behind the scenes. For example: "5" + 2 = "52" (coercion happens) One thing that stood out to me: JavaScript can behave unexpectedly if you don’t understand type coercion. Key takeaway: Always be mindful of data types when writing conditions and operations. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 𝐃𝐚𝐲 𝟒 𝐨𝐟 𝐌𝐲 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐒𝐞𝐫𝐢𝐞𝐬 Today I learned about if-else (Conditions) in JavaScript 💡 👉 Conditions are used to make decisions in code. 📌 Syntax: if (condition) { // code runs if condition is true } else { // code runs if condition is false } 📌 Example: let age = 18; if (age >= 18) { console.log("You can vote"); } else { console.log("You cannot vote"); } 👉 Also learned about: else if → check multiple conditions 📌 Example: let marks = 75; if (marks > 90) { console.log("Grade A"); } else if (marks > 60) { console.log("Grade B"); } else { console.log("Grade C"); } 👉 Conditions help in building real-world logic 💻✨ 💬 Question: Have you used if-else in any project yet? Let’s learn together 🚀 #JavaScript #WebDevelopment #LearningInPublic #Day4 #FrontendDevelopment

Day 23/100 of JavaScript Today’s topic : "this" keyword "this" refers to the object that is currently executing the function But its value depends on how the function is called, not where it is written 🔹In object method const user = { name: "Apsar", greet() { console.log(this.name); } }; user.greet(); // Apsar 🔹In regular function function show() { console.log(this); } show(); // global object (or undefined in strict mode) 🔹Arrow function const obj = { name: "Apsar", greet: () => { console.log(this.name); } }; obj.greet(); // undefined 👉 Arrow functions don’t have their own "this", they inherit it 🔹call, apply, bind function greet() { console.log(this.name); } const user = { name: "Apsar" }; greet.call(user); #Day23 #JavaScript #100DaysOfCode

A common misconception in JavaScript: “Objects are copied.” Let’s test that: let obj1 = { name: "John" }; let obj2 = obj1; obj2.name = "Doe"; console.log(obj1.name); // "Doe" At first, this feels unexpected. But here’s what’s really happening: JavaScript doesn’t copy the object. It copies the reference to that object. So both obj1 and obj2 point to the same memory location. That’s why changing one reflects in the other. This is one of the most common concepts tested in interviews — often with tricky variations. Understanding this clearly means you won’t rely on guesses anymore. 👉 I’ve broken this and similar concepts step-by-step in the full video (link in comments)

Day 19/100 of JavaScript 🚀 Today’s topic : Deep dive into DOM Going beyond basic manipulation — focusing on performance, rendering, and efficient updates 🔹Reflow & Repaint - Reflow → layout recalculation (expensive) - Repaint → visual update without layout change Frequent DOM changes can trigger multiple reflows and slow down performance 🔹Minimizing reflows const fragment = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const el = document.createElement("p"); el.textContent = i; fragment.appendChild(el); } document.body.appendChild(fragment); 🔹Caching DOM queries const list = document.getElementById("list"); // reuse instead of querying again list.appendChild(newItem); 🔹Layout thrashing❌ Reading and writing layout repeatedly can hurt performance el.style.width = "100px"; console.log(el.offsetWidth); // forces reflow 🔹Efficient updates - Batch DOM changes - Use class changes instead of multiple style updates - Avoid unnecessary re-rendering DOM manipulation is not just about changing elements, but doing it efficiently to maintain performance #Day19 #JavaScript #100DaysOfCode

JavaScript gets a lot more interesting when callbacks stop feeling like definitions and start feeling like real tools. In this video, I continue the callbacks discussion by showing where these ideas actually appear in day-to-day JavaScript code. This session covers: • how forEach() works • how map() helps transform data • how filter() helps us select data based on conditions • how all of these use callback functions internally • how JavaScript normally behaves in a synchronous flow • and a first glimpse of asynchronous behavior using setTimeout() I also tried to explain when synchronous flow makes sense and when asynchronous behavior becomes useful, using practical examples and simple coding demonstrations. The goal was not just to teach the syntax of forEach(), map(), and filter(), but to help connect them with the bigger idea of callbacks in real JavaScript. Watch here: https://lnkd.in/gGKVSE45 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #Programming #LearnJavaScript #CallbackFunctions #HigherOrderFunctions #forEach #map #filter #setTimeout #SoftwareDevelopment #Developers #TechEducation

I used to believe that JavaScript operated with some hidden “thread algorithm” behind the scenes. However, I learned that it doesn't function that way. JavaScript is single-threaded, yet it effectively manages multiple tasks simultaneously through the event loop, not threads. Here's a simplified breakdown: - There’s one main worker (the call stack). - There’s a waiting area (task queues). - There’s a loop that continuously checks what to run next. The core flow looks like this: while (true) { run sync code first if nothing is running: run all microtasks (Promises) then pick one macrotask (timers, I/O) } What surprised me the most is the priority system: Promises always execute before timers. Even a setTimeout(..., 0) has to wait its turn. As for the “threading” aspect? It exists, but not in the way you might expect. The engine (like V8) runs your code in a single thread, while the environment (browser or Node.js) utilizes multiple threads for tasks like network calls and timers. In essence, JavaScript doesn’t schedule threads; it schedules tasks. This shift in perspective can significantly change your understanding of asynchronous code. #javascript #learning #webdevelopment #programming #codewithishwar