Cooking and coding: the async vs sync difference

🚀 𝗪𝗵𝘆 𝗱𝗼𝗲𝘀𝗻’𝘁 𝗺𝘆 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹 𝘄𝗮𝗶𝘁? That’s a question every JavaScript learner faces at some point. You try this 👇 const data = fetch("https://lnkd.in/gGpgs-MU"); console.log(data); and get: Promise { <pending> } 😕 No data. No city name. Just… pending. Here’s why — JavaScript doesn’t stop and wait. It’s 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 — meaning it moves on while your API call is still in progress. That’s where 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 and 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 come in. They help your app “wait politely” for the data — without freezing everything else. 💡 In my latest beginner-friendly blog, I explain: - What Promises really are - How Async/Await makes async code readable - How to handle errors properly - And a mini project: Weather App with fetch() 📖 Read it here: 👉 https://lnkd.in/gBvD9DWD 🔗 Connect with me: 🌐 GitHub: https://lnkd.in/gE2g7ryy 💼 LinkedIn: https://lnkd.in/gx4HvWxF 💻 Dev.to: https://lnkd.in/g2ptGRBW 💬 What’s one JavaScript concept that confused you the most when you started learning? Let’s help each other out 👇 📢 Follow me for more beginner-friendly blogs, interview tips, and JavaScript explainers that actually make sense. #javascript #async #promises #react #frontend #webdevelopment #coding #programming #100daysofcode #learning #softwareengineering #beginners #devtips #developer #techcommunity

Most of the time, when someone asks how the JS Engine executes code, we simply say: “JavaScript is interpreted line by line.” Then we start explaining Call Stack, Execution Context, and Memory Heap — and that’s true… But do you know what’s really happening behind the scenes? 👀 Modern JS engines like V8 (Chrome), SpiderMonkey (Firefox), Chakra (Edge), and JavaScriptCore (Safari) are doing insane hidden optimizations to make JS run almost as fast as compiled C++! ⚡ 🧩 1️⃣ Modern Function Execution Structure (Activation Record / Call Frame) 🚀 2️⃣ Hidden Optimizations You (Probably) Didn’t Know About: 🔥 Inline Caching (IC) 🧱 Hidden Classes ⚡ Function Inlining (Very Advanced) 🕶️ Lazy Parsing 💨 Escape Analysis 🔁 Deoptimization 🏗️ JIT Compilation Pipeline (V8) All happening while your app is running! 🚀 ⚡ In Short: JavaScript isn’t just “interpreted.” It’s interpreted + optimized + compiled + deoptimized — all dynamically, in milliseconds. Next time someone asks “How does the JS engine execute code?”, don’t stop at “Call Stack” and “Execution Context.” Say this 👇 “Modern JS engines like V8 use JIT compilation, inline caching, hidden classes, escape analysis, and deoptimization to execute JavaScript at near-native speed 💪.” #JavaScript #V8Engine #WebPerformance #Frontend #NodeJS #Coding #HappyCoding #WebDevelopment

Hook: Want to code faster and debug in half the time? 🚀 Your VS Code setup can be your biggest bottleneck or your greatest productivity hack. I've been optimizing my workflow and found these 5 extensions to be absolute game changers: ⚡ ES7+ React/Redux/React-Native snippets: Stop typing boilerplate. This gives you instant code skeletons for components and hooks with simple prefixes (rfce, usememo). A non-negotiable for React devs. 🔄 Auto Rename Tag: A simple time-saver that prevents broken markup. Rename an opening HTML/XML tag, and the closing one updates automatically. 🥷 Console Ninja: My personal favorite for debugging. It displays console.log output and errors directly in your editor, right next to the code. No more flipping to the browser's dev tools. 🎨 Material Icon Theme: Don't underestimate a clean UI. This makes your file explorer instantly scannable with clear, distinct icons for every file and folder. Find what you need, faster. 📸 CodeSnap: The perfect tool for sharing. Create beautiful, presentation-ready screenshots of your code snippets for documentation, blogs, or just asking for help. My philosophy is simple: less time on boilerplate, more time solving problems. What's your "can't-live-without" VS Code extension? I'm always looking for new ones. Drop your favorites below! 👇 💬 Connect & Comment “Extension” below I’ll share the exact extensions I use. 👥 Follow Mohamed Irfaan for early access to the full guide on Front End Development and hands-on tutorials! #VSCode #DeveloperTools #Productivity #WebDevelopment #Coding #ReactJS #JavaScript #VSCodeExtensions #Tech #AI #Software

When I first heard experienced developers talk about 𝗔𝗣𝗜𝘀, I used to think it was one of those complicated parts of programming that I’d struggle to understand. But once I started learning, I realized it’s not as scary as it sounds. An 𝗔𝗣𝗜 simply helps different applications talk to each other. For example, when you 𝗳𝗲𝘁𝗰𝗵 𝗱𝗮𝘁𝗮 from a website, that’s your browser using an API to get information from another source. This week, I’ve been learning how to use 𝗳𝗲𝘁𝗰𝗵() together with async and await in JavaScript. These tools make it easier to get data from an API without freezing the whole page. It’s like telling JavaScript, “Go get the data, and I’ll keep things running until you’re back.” Understanding this opened my eyes to how websites load 𝗹𝗶𝘃𝗲 𝗱𝗮𝘁𝗮 like weather updates or user profiles without needing to refresh. #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #FrontendDeveloper #AsyncJavaScript #API #DeveloperLife #TechJourney

Lately building a Full‑Stack online Code editor from scratch — no external APIs, no third‑party runners, no plugins. Everything executes on my own backend in real time. ⚡️ Introducing QUICK CODE: 🧠 Pure backend execution: Python, C, C++, Java, and Web (HTML/CSS/JS) 🔌 Zero external execution services (self‑hosted, server‑controlled) 🖥️ True terminal I/O: PTY‑based streaming with interactive input (Scanner/input works) 🌐 Live HTML/CSS/JS preview with refresh + fullscreen 📂 Open local files into the editor and download code with one click 🎨 Minimal, professional UI: split view, clean divider, dark/light themes Tech stack (end‑to‑end): Backend: Django 5 (ASGI), Channels (WebSockets), Daphne Execution: subprocess + PTY for real TTY semantics, streaming stdout/stderr Java runner: main‑class detection + memory‑safe flags (-Xms/-Xmx) for reliable runs Frontend: CodeMirror 5, vanilla JavaScript, semantic HTML, polished CSS Architecture: stateless WebSocket protocol, safe temp workspaces, extensible language adapters Why it matters: Realistic developer experience inside the browser (not a fake console) Tight integration of concurrency, streaming, and refined UX Built to extend—more languages, sandboxing, and classroom workflows next Additional Features: Live Web preview (Html/CSS/Js)✅ Changeable Font Size✅ File open/download✅ Theme toggle and editor utilities (copy/format)✅ #Technology #SoftwareEngineering #WebDevelopment #DevTools #IDE #CodeEditor #Django #Channels #ASGI #WebSockets #Python #Java #CProgramming #CPP #CodeMirror #Frontend #Backend #FullStack #UIUX #LiveDemo #Portfolio #Projects #QuickCodeIDE

🚀 STOP GUESSING! 🛑 Ever wondered why changing one JavaScript variable sometimes changes another? You've stumbled into the most crucial concept for any JS developer: Stack vs. Heap Memory! 🤯 I just dropped a new video that tackles Chapter 2 of our DSA series: How JavaScript Handles Data. In this deep dive, you'll master: ✨ Primitive vs. Reference Data Types (The ultimate differentiator!) 🧠 The Stack (Why simple values are fast!) 📦 The Heap (Where your objects and arrays actually live!) 🔑 The critical concept of Copy by Value vs. Copy by Reference that breaks code. If you're preparing for interviews 💼 or just want to write less buggy code, this is mandatory viewing. Stop letting the memory model be a mystery! 📺 Watch the full video here: [Link in comment] Join TechCraft Club: https://lnkd.in/gHU3iqnX Let me know in the comments: What's the one memory concept that confused you the most when you started coding? 👇 #JavaScript #DSA #Coding #TechCareers #SoftwareDevelopment #StackVsHeap #ProgrammingTips #WebDevelopment

‎Frameworks come and go. ‎But fundamentals? ‎ ‎ ‎They never expire. ‎ ‎⇝ React replaced jQuery. ‎⇝ Next.js replaced React Router. ‎ ‎And something new will sooner ‎replace them too. ‎ ‎But here’s the truth no one ‎wants to say out loud: ‎ ‎✘ It’s not your framework that ‎makes you valuable ‎✔ It’s your foundations. ‎ ‎Most devs panic when a new tool trends. ‎Great devs? ‎They smile  ツ ‎ because they understand why it exists. ‎ ‎Once you master: ‎→ How the DOM actually works ‎→ How APIs truly communicate ‎→ What “state” really means ‎→ Why async logic matters ‎ ‎Then every framework becomes just another dialect ‎in a language, ‎you already speak fluently. ‎ ‎ ‎• Because frameworks evolve. ‎But logic endures. ‎ ‎& ‎ ‎• Dev who thinks in systems will always outlast the one who codes in syntax. ‎ ‎That’s how you stop playing catch-up ‎and start building with clarity. ‎ ‎ ‎ ‎Ps. ‎Don’t just learn tools learn ‎how they think. ‎ ‎That’s how you future-proof ‎your craft. ‎ ‎See y'all next time stay blessed :) ‎Love ♥︎ ‎Muhammad ‎

I had an argument today on a topic which can be skipped very easily (You don't want to miss reading it) The issue was with understanding the following: ↳ setState() ↳ Mutable & Immutable ↳ Deep and Shallow Copy This looks like an easy concept, but if missed, you will keep scratching your head, or just do vibe coding (which is not recommended) const myInitialState = [ { name: 'name', age: 10 }, { name: 'name1', age: 20 }]; ❌ setState(prevState => prevState.sort((a, b) => a.age - b.age)); ✅ setStatet(prevState => { const sorted = [...prevState]; sorted.sort((a, b) => a.age - b.age)); return sorted; }); Q1. Why does updating the older value doesn't work, and the later works? Q2. Creating a copy via [...prevState] is still a shallow copy, then how does React knows something has changed? Answer 1. The reference matters here. When you change something to the older value, the reference doesn't change, and React thinks, it is still unchanged, hence, no re-render trigger, and no UI updates. Answer 2. Even when you create shallow copy, you are creating a new reference. Creating a new array via "[ ]" → Then shallow copy the items using Spread operator. So the reference of sorted and prevState changes. As soon as React sees that in the return, it triggers re-render, as per "Diffing Algorithm". If you have learnt something new, let your friend learn it too via Repost ♻️ P.S. I have bonus questions in the comment section. Let's check how good do you know React #reactjs #react #javascript #coding #programming #softwareengineering #frontend

💻 Day 3 of My 30-Day Backend Development & Coding Journey 🚀 Today was all about making my backend come alive visually — I learned how to connect server-side logic with dynamic HTML pages using EJS (Embedded JavaScript Templates) ⚙️💡 It’s amazing how templating helps render data dynamically — instead of sending plain text responses, I can now serve pages that update with real data 🤩 🧠 Topics I Covered Today: 🔹 What is Templating? — A way to generate dynamic HTML using logic and variables 🧩 🔹 Using EJS — The most popular templating engine for Express.js 💻 🔹 Views Directory — Where all .ejs templates are stored 📂 🔹 Interpolation Syntax — <%= %> to embed variables directly into HTML 🧠 🔹 Passing Data to EJS — Sending data from the backend to the frontend using res.render() Each day I’m realizing — backend development isn’t just about servers and APIs, it’s also about how data flows beautifully to the frontend 🖥️ Tomorrow I’ll explore partials, layouts, and reusability in EJS to write cleaner code 💪 #Day3 #30DaysOfCode #BackendDevelopment #NodeJS #EJS #ExpressJS #LearningInPublic #CodingJourney #Developers #WebDevelopment

🚀 Writing code is easy, Writing scalable code takes Object-Oriented thinking. 🌟 In JavaScript, Object-Oriented Programming (OOP) brings structure, modularity, and reusability to your codebase — helping teams scale efficiently and maintain cleaner architecture. 🎖️ Here are the core OOP principles every JavaScript developer should master 👇 🔹 Encapsulation: Bundle related data and methods into objects to control access and improve maintainability. 🔹 Abstraction: Expose only the essential features while hiding implementation details — simplifying complex systems. 🔹 Inheritance: Leverage parent-child relationships using class and extends to promote code reusability. 🔹 Polymorphism: Design methods that adapt based on the object that calls them — making your code flexible and extendable. 💡Why it matters: JavaScript encourages cleaner design patterns, reduces redundancy, and builds a strong foundation for scalable web applications. 🔁 Repost and share it with your connections. 📢 Follow Abhishek Shukla for more such content. #Javascript #Oopsconcept #Webdevelopment