Mastering JavaScript Sleep Function with Promises and setTimeout

Day 19 - Svelte compiles your UI into plain JavaScript. No virtual DOM. No runtime framework. Just code. 🚀TechFromZero Series - SvelteFromZero 🌐 Try it live: https://lnkd.in/dtRZxHZk This isn't a Hello World. It's a real live-data app: 📐 Browser → +page.ts load → Typed API Lib → CoinGecko → Svelte UI 🔗 The full code (with step-by-step commits you can follow): https://lnkd.in/dBBDpxkY 🧱 What I built (step by step): 1️⃣ SvelteKit + TypeScript + Vite scaffold (no CLI wizards, just the files that matter) 2️⃣ Dark theme + sticky header + shared layout in one CSS file - no Tailwind build needed 3️⃣ One typed module wrapping every CoinGecko call - getTopCoins, getCoin, getCoinChart 4️⃣ Home page renders top 50 coins pre-fetched on the server (first paint already has data) 5️⃣ Client-side search that matches name OR ticker - zero extra API calls per keystroke 6️⃣ Dynamic /coin/[id] route with price, rank, 24h/7d/30d change, supply, ATH, ATL 7️⃣ A 7-day price sparkline built as pure SVG in about 30 lines - no chart library 8️⃣ Global error page + @sveltejs/adapter-vercel pinned to Node 20 for a clean deploy 💡 Every file has detailed comments explaining WHY, not just what. Written for any beginner who wants to learn Svelte by reading real code - with full clarity on each step. 👉 If you're a beginner learning Svelte, clone it and read the commits one by one. Each commit = one concept. Each file = one lesson. Built from scratch, so nothing is hidden. 🔥 This is Day 19 of a 50-day series. A new technology every day. Follow along! 🌐 See all days: https://lnkd.in/dhDN6Z3F #TechFromZero #Day19 #Svelte #SvelteKit #LearnByDoing #OpenSource #BeginnerGuide #100DaysOfCode #CodingFromScratch

🚀 Day 9/100 — #100DaysOfCode Diving deeper into JavaScript and understanding how it really works behind the scenes 💻 Today was all about moving from basics to advanced concepts that power real-world applications. 📚 What I learned: 🧠 Core Concepts • Scope — understanding where variables are accessible • Execution Context — how JavaScript runs code step-by-step • Closures — functions remembering their outer scope ⚡ Advanced Concepts • this keyword — context of execution • Object-Oriented JavaScript — structuring code using objects 🔄 Asynchronous JavaScript • Callbacks — handling async tasks • Promises — better async handling • Async/Await — clean and readable async code 🌐 API Handling • Fetch API — getting data from servers • HTTP Basics — request & response understanding 💡 Key Insight: JavaScript is not just a language — it’s an ecosystem for building dynamic, real-world applications. 🔥 Day 9 complete. Learning how real apps communicate and function. #JavaScript #AsyncJS #WebDevelopment #100DaysOfCode #CodingJourney #BuildInPublic

𝐓𝐡𝐞 𝐜𝐚𝐥𝐥 𝐬𝐭𝐚𝐜𝐤 𝐡𝐚𝐬 𝐧𝐨 𝐩𝐚𝐭𝐢𝐞𝐧𝐜𝐞. 𝐈𝐭 𝐞𝐱𝐞𝐜𝐮𝐭𝐞𝐬 𝐞𝐯𝐞𝐫𝐲𝐭𝐡𝐢𝐧𝐠 — 𝐢𝐧𝐬𝐭𝐚𝐧𝐭𝐥𝐲, 𝐫𝐮𝐭𝐡𝐥𝐞𝐬𝐬𝐥𝐲, 𝐢𝐧 𝐨𝐫𝐝𝐞𝐫. So what happens when you need a 𝐝𝐞𝐥𝐚𝐲? That's where I hit a wall. If JavaScript is single-threaded and the call stack never pauses — how does '𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭' even work? Turns out, it doesn't live in JavaScript at all. 𝐖𝐞𝐛 𝐀𝐏𝐈𝐬 — 𝐬𝐞𝐭𝐓𝐢𝐦𝐞𝐨𝐮𝐭, 𝐟𝐞𝐭𝐜𝐡( ), 𝐃𝐎𝐌 𝐞𝐯𝐞𝐧𝐭𝐬, 𝐥𝐨𝐜𝐚𝐥𝐒𝐭𝐨𝐫𝐚𝐠𝐞 — are gifts from the browser, not the language. The browser quietly hands them off, runs them in the background, then places the result into a 𝐂𝐚𝐥𝐥𝐛𝐚𝐜𝐤 𝐐𝐮𝐞𝐮𝐞 . And here's the elegant part: The 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 sits there, watching. The moment the call stack is empty, it picks up the waiting callback functions and pushes it in. That's it. No magic. Just a disciplined handoff between three moving parts. JavaScript doesn't wait — but the browser builds the patience "around" it. 𝐓𝐚𝐤𝐞𝐚𝐰𝐚𝐲𝐬 : → 𝐓𝐡𝐞 𝐜𝐚𝐥𝐥 𝐬𝐭𝐚𝐜𝐤 𝐞𝐱𝐞𝐜𝐮𝐭𝐞𝐬 𝐟𝐚𝐬𝐭. 𝐍𝐞𝐯𝐞𝐫 𝐚𝐬𝐬𝐮𝐦𝐞 𝐢𝐭 𝐰𝐚𝐢𝐭𝐬. → 𝐖𝐞𝐛 𝐀𝐏𝐈𝐬 𝐚𝐫𝐞 𝐛𝐫𝐨𝐰𝐬𝐞𝐫-𝐩𝐨𝐰𝐞𝐫𝐞𝐝, 𝐚𝐜𝐜𝐞𝐬𝐬𝐞𝐝 𝐯𝐢𝐚 𝐭𝐡𝐞 𝐠𝐥𝐨𝐛𝐚𝐥 "𝐰𝐢𝐧𝐝𝐨𝐰" 𝐨𝐛𝐣𝐞𝐜𝐭. → 𝐓𝐡𝐞 𝐞𝐯𝐞𝐧𝐭 𝐥𝐨𝐨𝐩 𝐨𝐧𝐥𝐲 𝐚𝐜𝐭𝐬 𝐰𝐡𝐞𝐧 𝐭𝐡𝐞 𝐜𝐚𝐥𝐥 𝐬𝐭𝐚𝐜𝐤 𝐢𝐬 𝐜𝐥𝐞𝐚𝐫. #JavaScript #SoftwareEngineering #DeveloperJourney #LearningInPublic #Programming #TechCommunity #WebDevelopment

🚀 Dynamic Currying in JavaScript — Why it actually matters At first, currying feels like a trick: sum(1)(2)(3) But the real power isn’t syntax — it’s reusability. 💡 The idea 👉 Fix some arguments now 👉 Reuse the function later 🔧 Example const filter = fn => arr => arr.filter(fn); const filterEven = filter(x => x % 2 === 0); filterEven([1,2,3,4]); // [2,4] Instead of repeating logic everywhere, you create reusable building blocks. ⚡ Real-world uses API helpers → request(baseUrl)(endpoint) Logging → logger("ERROR")(msg) Event handlers → handleClick(id)(event) Validation → minLength(8)(value) 🧠 Key takeaway Currying isn’t about fancy functions. It’s about writing code that is: ✔ Reusable ✔ Composable ✔ Cleaner Libraries like Lodash and Ramda use this pattern heavily. Once this clicks, your approach to writing functions changes completely. #JavaScript #WebDevelopment #FunctionalProgramming #Currying #CleanCode #Frontend #Coding #100DaysOfCode #DeveloperJourney #TechCommunity

The Execution Context 🚀 Ever wondered how JavaScript actually "thinks" before it even runs a single line of code? The image above breaks down the Memory Creation Phase of the Global Execution Context. Before the code is executed, the JS engine scans the script and allocates memory for variables (var) and functions. At this stage, variables like a, b, and sum are stored as undefined—a process famously known as Hoisting. Understanding these foundational concepts is what separates a coder from a true Engineer. It’s not just about writing syntax; it’s about understanding the environment where your code lives. #JavaScript #WebDevelopment #CodingLife #SoftwareEngineering #Frontend

🧠 Day 5 of 21days challenge JavaScript Higher Order Functions (HOF) 🔥 function greet(name) { ... } Why return a function? A higher-order function is a function that takes another function as an argument or returns a function. It helps write more reusable and flexible code. For easy understanding : HOF = function using another function Can take function as input Or return function as output 👉 That’s how powerful abstractions are built This changed how I write functions 🚀 #JavaScript #HOF #Frontend

Day 4 — Making Tech Simple. JavaScript looks simple… But here’s something most beginners don’t understand How does JavaScript handle multiple tasks at once if it’s single-threaded? The answer = Event Loop Here’s what actually happens: • Call Stack → Executes code one by one • Web APIs → Handle async tasks (setTimeout, fetch, events) • Callback Queue → Stores completed tasks • Event Loop → Pushes tasks back to stack when it’s free That’s how JavaScript handles async behavior without breaking. If you don’t understand this… 👉 Async code will always confuse you 👉 Debugging will feel hard But once you get it… Everything starts making sense 💡 📌 Day 4 of breaking down complex tech into simple visuals. Follow me if you want to actually understand JavaScript deeply. Comment “DAY 5” if you’re ready — Syed Shaaz Akhtar #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering

🤔 Ever wondered… Why this works: console.log(a) // undefined var a = 10; But this crashes: console.log(b) // ReferenceError let b = 20; Even though both are declared later? 👉 This is where most developers think they understand JavaScript… but they don’t. 🚀 Let’s break it down: Hoisting & Temporal Dead Zone (TDZ) 🧠 Hoisting (What actually happens behind the scenes) JavaScript doesn’t execute your code line by line directly. Before execution, it runs a Memory Creation Phase where: • Variables & functions are registered in memory • Declarations are processed first 👉 This is what we call hoisting 📦 Variable Hoisting With var: • Declaration is hoisted • Initialized with undefined So: • You can access it before declaration • But you won’t get the actual value , since Initialized with undefined in memory creation phase 💡 Key insight: Hoisting ≠ moving code It’s about how memory is allocated internally. ⚠️ let & const → Temporal Dead Zone (TDZ) Yes — let and const are also hoisted. But… They stay in a Temporal Dead Zone from: 👉 start of scope → until declaration line Accessing them early = 💥 ReferenceError 💡 Takeaway: TDZ exists to prevent unpredictable bugs caused by premature access. 👑 Function Hoisting (VIP behavior) Function Declarations are fully hoisted: ✔ You can call them before declaration But Function Expressions behave differently: • var → undefined • let/const → ReferenceError ⚡ Why this actually matters (not just theory) Understanding hoisting + TDZ helps you: • Avoid silent bugs (undefined issues) • Write predictable, cleaner code • Debug scope-related issues faster • Truly understand how JS engine works 💡 Final Thought: Most developers memorize hoisting. Good developers understand execution context. Great developers write code that doesn’t depend on hoisting at all. 📌 I’ll be sharing more deep dives like this as I learn & build in public. Follow along if you’re into JavaScript internals 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #Hoisting #TDZ #LearnJavaScript #CodingTips #BuildInPublic #100DaysOfCode

How JavaScript really works behind the scenes ⚙️🚀 1️⃣ User Interaction User clicks a button → event gets triggered 2️⃣ Call Stack Functions are pushed into the call stack and executed one by one (LIFO) 3️⃣ Web APIs Async tasks like setTimeout, fetch run outside the call stack 4️⃣ Callback Queue After completion, async tasks move into the queue 5️⃣ Event Loop It checks if the call stack is empty and pushes tasks back to it 6️⃣ DOM Update Finally, the browser updates the UI 🎯 Understanding this flow changed the way I write JavaScript 💻 What JavaScript concept confused you the most? 👇 #javascript #webdevelopment #frontenddeveloper #coding #learning

Recently, taught Redux, a powerful JavaScript library used for global state management in modern applications. 💡 Key Concepts Covered: 1. Understanding what Redux is and why it is used 2. Core building blocks: Reducer, Action, and Initial State 3. How reducers process actions and update the state 4. How the store maintains and manages the global state 5. How the UI interacts using useSelector and useDispatch 🧠 Deep Dive Learnings: 1. Explained in detail what a reducer function is and how it works internally Introduced Redux Toolkit (@reduxjs/toolkit), where creating and configuring a slice automatically generates reducer logic 2. Understood how react-redux bindings provide hooks like useDispatch to dispatch actions and useSelector to access state Below is the diagram from the session conducted #Redux #ReactJS #JavaScript #StateManagement #WebDevelopment #Learning #CodingJourney #TechEducation