Webdock.io’s Post

Do you know what happens when we add an 𝗮𝘀𝘆𝗻𝗰 keyword to a function? When we add an 𝗮𝘀𝘆𝗻𝗰 keyword to the function, the function always returns a promise fulfilled with the returned value. So the below code: const sayHello = async function () { return 'Hello'; }; is the same as: const sayHello = function () { return new Promise(function (resolve, reject) { resolve('Hello'); }); }; which is the same as: const sayHello = function () { return Promise.resolve('Hello'); }; So to get the actual string 𝗛𝗲𝗹𝗹𝗼, we need to add .𝘁𝗵𝗲𝗻 handler like this: sayHello() .then(function (result) { console.log(result); // Hello }); 𝗣𝗦: 𝗮𝘀𝘆𝗻𝗰 is used along with 𝗮𝘄𝗮𝗶𝘁 keyword to perform some async operation like this: const getData = async function () { try { const {data} = await axios.get('url'); return data; } catch(error) { } }; getData() .then(result => console.log(result)) .catch(error => console.log(error)); 𝗧𝗶𝗽: Always add .𝗰𝗮𝘁𝗰𝗵 handler after .𝘁𝗵𝗲𝗻 to avoid breaking the application If there is some issue while executing the API call. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

Tired of spinning up a whole fetch() request just to check if your API endpoint even breathes? Time to appreciate the unsung hero: curl. If you write JavaScript, you’re basically in a long-term relationship with APIs. curl is the tiny command-line powerhouse that lets you poke, prod, and interrogate your endpoints before you write a single line of JS. Think of it like Postman, stripped down and caffeinated, living inside your terminal. It’s my go-to “is this thing actually alive?” tool. Before pointing fingers at axios configs or async chaos, curl helps you confirm whether the endpoint itself is behaving or if you’ve just angered the JavaScript gods again. Why devs love curl: • Instant API checks: curl http://localhost:3000/api/users • See raw headers (perfect for CORS meltdowns): curl -i https://lnkd.in/dMX8-Vsd • Fire off POST requests without building UI or JS: curl -X POST -H "Content-Type: application/json" -d '{"username":"dev","build":"lego_millennium_falcon"}' http://localhost:3000/api/submit curl won’t replace fetch() or axios — it’s what you use to prove the problem isn’t your code. It saves time, isolates issues, and honestly makes you feel like a backend wizard. Curious: what’s your quick-test weapon of choice? curl? Postman? Thunder Client? Something more chaotic? #JavaScript #API #WebDevelopment #NodeJS #curl #DeveloperTools #Programming #Tech

🚀 Mastering HTTP Methods and the HTTP Headers with Simple JavaScript Examples If you’re diving into API development or front-end integration, mastering HTTP methods and the HTTP header is a must. Here’s a clean and visual breakdown of how to use GET, POST, PUT, PATCH, DELETE, and TRACE with the native fetch() API — no external libraries, just pure JavaScript. Each method has its own purpose in how your app communicates with a server: 🔹 GET → Retrieve data 🔹 POST → Create new data 🔹 PUT → Replace existing data 🔹 PATCH → Update part of data 🔹 DELETE → Remove data 🔹 TRACE → Debug the request path #JavaScript #WebDevelopment #Frontend #Backend #API #Developer #FetchAPI #WebDev #ReactJS #NodeJS #SoftwareEngineering #lifeatsmartx

Just had a major "Aha!" moment with JavaScript, and I had to share it. I thought I knew the fetch API. It's simple, right? You call a URL, you get data. I was wrong. I just went down a deep dive, and what I found is crucial for any JS developer. Here are a few things that blew my mind :- 🤯 A 404 error will NOT trigger your .catch() block! fetch only rejects its promise on a network failure (like being offline). A 404 (Not Found) or 500 (Server Error) is still a "successful" response from the server, so it goes to your .then() block. You have to check the response.ok or response.status manually. 🚀 fetch uses the "Microtask Queue". This is why fetch callbacks often run before setTimeout(..., 0). Promises get a "VIP line" (the Microtask Queue) which the Event Loop always empties before processing the regular "Task Queue" (where setTimeout lives). This completely changes how I think about asynchronous execution order. 🧠 fetch internally works in two parts :- The moment you call fetch, it does two things at once: Memory Reservation: It immediately reserves space in memory for the future response. Network Request: It sends the actual request to the server. This explains how it's so efficient and can be asynchronous from the very start. Understanding these internals isn't just trivia—it's the difference between writing code that works and writing code that is robust, predictable, and bug-free. Big thanks to the "Chai aur Code" Hitesh Choudhary sir's channel for the incredibly deep explanation. What's a JavaScript "gotcha" that changed the way you write code? #javascript #webdevelopment #fetch #api #async #eventloop #promises #nodejs #coding #techtips

⚡ Mastering Node.js Streams for High Performance When working with large files or data sources, reading everything into memory is a performance killer. That’s where Node.js streams come in — they process data chunk by chunk, saving memory and speeding up execution. 💡 Types of Streams in Node.js: Readable: source of data (e.g., file, HTTP request) Writable: destination for data (e.g., file, response) Duplex: both readable and writable (e.g., TCP sockets) Transform: modifies data as it passes through (e.g., compression) Instead of loading the entire file into memory, this code streams it directly to the client — efficient, elegant, and scalable. #NodeJS #JavaScript #Backend #WebPerformance #Streaming #CodingTips #WebDevelopment

I just published checkmyenv — a tiny Node.js CLI that keeps your environment variables in sync. What it does: Scans your codebase for process.env.* usages Compares against your .env and highlights missing/unused keys Generates/updates .env with interactive prompts Syncs with .env.example Works via npx or global install Get started: npx @eminemah/checkmyenv DB_URL API_KEY PORT SECRET_KEY checkmyenv check checkmyenv generate checkmyenv sync Repo: https://lnkd.in/dexahCGs NPM: https://lnkd.in/d6uMqXxv If you try it, I’d love your feedback and PRs! #nodejs #javascript #developerexperience #dotenv #cli #opensource

Normalize your API or input data by treating it as an array and avoiding unexpected runtime errors. *Use 𝒄𝒐𝒏𝒄𝒂𝒕() for simple flattening or normalization.  𝒄𝒐𝒏𝒔𝒕 𝒂𝒓𝒓 = [].𝒄𝒐𝒏𝒄𝒂𝒕(𝒗𝒂𝒍𝒖𝒆 || []) *Use 𝑨𝒓𝒓𝒂𝒚.𝒇𝒓𝒐𝒎() when working with iterables or applying transformations. 𝒄𝒐𝒏𝒔𝒕 𝒂𝒓𝒓 = 𝑨𝒓𝒓𝒂𝒚.𝒇𝒓𝒐𝒎(𝒗𝒂𝒍𝒖𝒆 ?? []) It keeps your loops safe when your data isn’t. #JavaScript #WebDevelopment #Nodejs

JavaScript doesn’t wait for anything… yet somehow, everything still gets done 😎 Ever wondered how? Master behind the screens — Promises 🔥 In JavaScript, a Promise is like saying — “I don’t have the answer yet, but I’ll get back to you once I do.” It helps JS handle async operations like fetching data, API calls, timers, and more — without blocking the main thread. let's check the below code 👇 const getData = new Promise((resolve, reject) => { const success = true; success ? resolve("✅ Data fetched") : reject("❌ Failed"); }); getData .then(res => console.log(res)) .catch(err => console.log(err)) .finally(() => console.log("Operation complete")); When you run this: First, the promise is pending ⏳ Then it becomes fulfilled ✅ or rejected ❌ But there’s more — Promises can work together too 👇 Promise.all() → Waits for all to finish (fails if one fails) Promise.allSettled() → Waits for all, even if some fail Promise.race() → Returns the fastest one to settle 🏁 Promise.any() → Returns the first successful one 🎯 In short Promises don’t make JavaScript faster. They make it smarter — letting your code do more while waiting for results 💪 #JavaScript #WebDevelopment #Frontend #MERNStack #AsyncProgramming #NodeJS #ReactJS #CodingTips #SoftwareEngineering

🚀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 When a function remembers the variables outside its scope that’s a closure. Here’s all you need 👇 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘮𝘢𝘬𝘦𝘊𝘰𝘶𝘯𝘵𝘦𝘳() {  𝘭𝘦𝘵 𝘤𝘰𝘶𝘯𝘵 = 0;  𝘳𝘦𝘵𝘶𝘳𝘯 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯() {   𝘤𝘰𝘶𝘯𝘵++;   𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘭𝘰𝘨(𝘤𝘰𝘶𝘯𝘵);  }; } 𝘤𝘰𝘯𝘴𝘵 𝘤𝘰𝘶𝘯𝘵𝘦𝘳 = 𝘮𝘢𝘬𝘦𝘊𝘰𝘶𝘯𝘵𝘦𝘳(); 𝘤𝘰𝘶𝘯𝘵𝘦𝘳(); // 1 𝘤𝘰𝘶𝘯𝘵𝘦𝘳(); // 2 Even after 𝗺𝗮𝗸𝗲𝗖𝗼𝘂𝗻𝘁𝗲𝗿() is done 𝗰𝗼𝘂𝗻𝘁 is still remembered 🔥 That’s closure one of JS’s smartest tricks. 💡 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀: Closures let you keep data private, avoid global variables, and build stateful logic like counters, event handlers, and API wrappers. #CareerGrowth #JavaScript #WebDevelopment #100DaysOfCode #CodingTips #Frontend #NodeJS #ReactJS #DevCommunity #WebDev #PakistanTech #technology #FreelancingPakistan #StartupPK

Developer Tips & Insights 🔥 1. Stop Overusing useEffect in React! If you’re fetching data on mount, try React Query or custom hooks. Overusing useEffect = messy code and side effects. Think declaratively, not procedurally. 2. 🧪 Testing Tip: Don’t Test Implementation, Test Behavior Focus on what the user sees, not how your code is wired. Good: “Does the button show a loading spinner?” Bad: “Does it call setLoading(true)?” Build smarter, not harder! 🚀 Try more tools at [toolsonfire.com](https://toolsonfire.com) #React #WebDevelopment #DeveloperTips #Testing #Productivity #ToolsOnFire #JavaScript #Coding #Frontend #CleanCode #DevLife #LearnToCode #TechTips #CodeQuality #foryoupage #foryouシpage