Automate Development with Node.js and Chokidar

𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝗔𝗿𝗿𝗼𝘄 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 You use arrow functions in Angular almost instinctively. But have you ever wondered why you rarely see the function keyword inside a component class? It's not just about writing less code. It's about solving one of JavaScript's oldest puzzles: the execution context. - The value of `this` is dynamic in traditional JavaScript. - It depends on how a function is called, not where it was defined. - This often leads to confusing moments in your components. Let's look at an example: ``` is replaced with - You have a component with a status variable. - You update the status using `setTimeout`. - If you use a regular function, `this` is no longer the component instance. - If you use an arrow function, `this` correctly points to the component instance. The answer is lexical scoping. Regular functions create their own `this` binding every time they're executed. Arrow functions capture the `this` value from their enclosing scope. You might think this is only important for older browsers. But even in modern Angular, arrow functions are still essential for keeping `this` pointing to your component. So, the next time you write an arrow function, remember it's not just syntax sugar. It's what keeps your code working correctly. Source: https://lnkd.in/gcWYDCaK

💡React Tip💡 Whenever you want to store an object in a state, use null as the initial value like this: const [user, setUser] = useState(null); instead of an empty object like this: const [user, setUser] = useState({ }); So if you want to check if user exist or if there are any properties present inside it, you can just use simple if condition like this: if(user) { // user exists, do something } or use JSX expression like this: { user && <p>User found</p>} However, If you use an empty object as the initial value, then you need to check like this: if(Object.keys(user).length === 0) { // user exists, do something } or use JSX expression like this: { Object.keys(user).length === 0 && <p>User found</p>} So assigning an initial value of null will make your code simpler and easier to understand. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

🔥 Understanding callback functions in JavaScript! 🚀 Callback functions are functions passed as arguments to other functions to be executed later. They are commonly used in event handling, asynchronous actions, and more. ⚡️ Why it matters: Callback functions allow developers to write more flexible and reusable code. They are essential in handling tasks that need to be executed at a specific time. 🔹 Step by step breakdown: 1️⃣ Define the main function that will execute the callback. 2️⃣ Create the callback function to be passed as an argument. 3️⃣ Call the main function and pass the callback as an argument. 👨💻 Code example: ```javascript function mainFunction(callback) { // Do something callback(); } function callbackFunction() { console.log('Callback executed!'); } mainFunction(callbackFunction); ``` 💡 Pro tip: Keep callback functions simple and focused on a specific task for better code readability. ⚠️ Common mistake: Forgetting to invoke the callback within the main function, resulting in the function not executing as intended. ❓ Have you ever used callback functions in your projects? Share your experiences below! 💬 🌐 View my full portfolio and more dev resources at tharindunipun.lk #JavaScript #CallbackFunctions #AsyncProgramming #CodeNewbie #WebDevelopment #LearnToCode #DeveloperTips #FunctionCallbacks #EventHandling #AsynchronousJavaScript

"JavaScript is single-threaded… but still handles async tasks?" 🤯 This is where the Event Loop comes in 🔥 Let’s understand it simply 👇 🔹 JavaScript is single-threaded It can do one task at a time using the Call Stack. 🔹 So how does async work? Thanks to: - Web APIs 🌐 - Callback Queue 📥 - Event Loop 🔁 💻 Example: console.log("Start"); setTimeout(() => { console.log("Async Task"); }, 0); console.log("End"); 👉 Output: Start End Async Task 🔹 Why this happens? - "setTimeout" goes to Web APIs - Then moves to Callback Queue - Event Loop waits for Call Stack to be empty - Then executes it 🚀 Pro Tip: Even "setTimeout(..., 0)" is NOT immediate. 💬 Did this surprise you the first time you learned it? 😄 #javascript #webdevelopment #mern #coding #developers

🚀 𝗝𝘂𝘀𝘁 𝗹𝗲𝘃𝗲𝗹𝗲𝗱 𝘂𝗽 𝘁𝗵𝗲 𝗰𝗼𝗱𝗲 𝗾𝘂𝗮𝗹𝗶𝘁𝘆 𝗶𝗻 𝗺𝘆 𝗟𝗮𝗿𝗮𝘃𝗲𝗹 𝗽𝗿𝗼𝗷𝗲𝗰𝘁! I recently integrated two powerful tools into my dev workflow — and the difference is night and day. 🎨 𝗦𝘁𝘆𝗹𝗲𝗹𝗶𝗻𝘁 — enforces consistent CSS conventions and catches errors before they ever ship. 🖋️ 𝗽𝗿𝗲𝘁𝘁𝗶𝗲𝗿-𝗽𝗹𝘂𝗴𝗶𝗻-𝗯𝗹𝗮𝗱𝗲 — auto-formats Laravel Blade templates using Prettier, keeping every view clean and readable. Here's a peek at the scripts in my package.json: "𝗳𝗼𝗿𝗺𝗮𝘁": "𝗽𝗿𝗲𝘁𝘁𝗶𝗲𝗿 \"𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀/**/*.𝗷𝘀\" \"𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀/**/*.𝗰𝘀𝘀\" \"𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀/**/*.𝗯𝗹𝗮𝗱𝗲.𝗽𝗵𝗽\" --𝘄𝗿𝗶𝘁𝗲", "𝗹𝗶𝗻𝘁:𝗰𝘀𝘀": "𝘀𝘁𝘆𝗹𝗲𝗹𝗶𝗻𝘁 \"𝗿𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀/𝗰𝘀𝘀/**/*.𝗰𝘀𝘀\"" Result? ✅ Blade templates are consistently formatted on save ✅ CSS follows standard conventions automatically ✅ Zero formatting debates in code reviews ✅ More mental energy for actual features If you're building with Laravel and haven't set this up yet — it's worth the 30 minutes. #Laravel #PHP #Prettier #Stylelint #CleanCode #WebDevelopment #DeveloperExperience #BladeTemplates

🔍 JavaScript Quirk: == vs === (this will surprise you) Most devs say: 👉 “Always use ===” But do you know WHY? 👇 console.log(0 == false); console.log("" == false); console.log(null == undefined); 💥 Output: true true true Wait… WHAT? 😳 Why this happens? Because == does type coercion 👉 It converts values before comparing Step by step: ✔ false → 0 ✔ "" → 0 So internally: 0 == 0 // true 👉 Special case: null == undefined → true (but NOT equal to anything else) Now compare with === 👇 console.log(0 === false); console.log("" === false); 💥 Output: false false Because === checks: ✔ Value ✔ Type No conversion. No surprises. Now the WEIRDEST one 🤯 console.log([] == false); 💥 Output: true Why? [] → "" → 0 false → 0 👉 0 == 0 Yes… JavaScript really did that 😅 💡 Takeaway: ✔ == tries to be “smart” (and fails) ✔ === is strict and predictable ✔ Use === by default 👉 "Always use ===" is not a rule… It’s survival advice. 🔁 Save this (you’ll forget this later) 💬 Comment "===" if this clicked ❤️ Like for more JS quirks #javascript #frontend #codingtips #webdevelopment #js #developer

🚨 JavaScript Gotcha: When 0 Actually Matters One of the most subtle bugs in JavaScript comes from using the logical OR (||) for default values. const timeout = userTimeout || 3000; Looks fine… until userTimeout = 0. 👉 JavaScript treats 0 as falsy, so instead of respecting your value, it silently replaces it with 3000. 💥 Result? Unexpected behavior. ✅ The Fix: Use Nullish Coalescing (??) const timeout = userTimeout ?? 3000; This only falls back when the value is null or undefined — not when it’s 0. 💡 When does 0 actually matter? ⏱️ Timeouts & delays → 0 can mean run immediately 📊 Counters & stats → 0 is a valid value, not “missing” 💰 Pricing / discounts → Free (0) ≠ undefined 🎚️ Sliders / configs → Minimum values often start at 0 🧠 Rule of thumb: Use || when you want to catch all falsy values (0, "", false, etc.) Use ?? when you only want to catch missing values (null, undefined) ⚡ Small operator. Big difference. Cleaner logic. #reactjs,#nodejs #JavaScript #WebDevelopment #CleanCode #Frontend #ProgrammingTips #DevTips #CodeQuality #SoftwareEngineering

🔍 JavaScript Bug You Might Have Seen (typeof null === "object") You write this: console.log(typeof null); // ? What do you expect? 👉 "null" But you get: 👉 "object" 🤯 Wait… null is NOT an object… So why is JavaScript saying this? This happens because of a historical bug in JavaScript 📌 What’s going on? In the early days of JavaScript: 👉 Values were stored in a low-level format 👉 Objects were identified by a specific type tag Unfortunately… 👉 null was given the same tag as objects So: typeof null === "object" 📌 Important point: 👉 This is NOT correct behavior 👉 But it was never fixed (for backward compatibility) 📌 So how do you check for null? ❌ Don’t do this: typeof value === "null" ✔ Do this instead: value === null 💡 Takeaway: ✔ typeof null returns "object" (bug) ✔ It’s a legacy behavior in JavaScript ✔ Always check null using === null 👉 Not everything in JavaScript makes sense… some things just stayed for history 😄 🔁 Save this before it confuses you again 💬 Comment “null” if this surprised you ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🔍 JavaScript Bug You Might Have Seen (typeof null === "object") You write this: console.log(typeof null); // ? What do you expect? 👉 "null" But you get: 👉 "object" 🤯 Wait… null is NOT an object… So why is JavaScript saying this? This happens because of a historical bug in JavaScript 📌 What’s going on? In the early days of JavaScript: 👉 Values were stored in a low-level format 👉 Objects were identified by a specific type tag Unfortunately… 👉 null was given the same tag as objects So: typeof null === "object" 📌 Important point: 👉 This is NOT correct behavior 👉 But it was never fixed (for backward compatibility) 📌 So how do you check for null? ❌ Don’t do this: typeof value === "null" ✔ Do this instead: value === null 💡 Takeaway: ✔ typeof null returns "object" (bug) ✔ It’s a legacy behavior in JavaScript ✔ Always check null using === null 👉 Not everything in JavaScript makes sense… some things just stayed for history 😄 🔁 Save this before it confuses you again 💬 Comment “null” if this surprised you ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

💡 var, let, const in JavaScript — easy? Not really 😅 If you think you understand them… try predicting these 👇 for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 3 3 3 for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 0 1 2 🤯 Same code… different output. Why? ⸻ 🔍 The difference: 👉 var is function-scoped • One shared i • All callbacks reference same variable • Final value = 3 👉 let is block-scoped • New i created for each iteration • Each callback gets its own copy 💬 Lesson learned: JavaScript doesn’t just execute code… It follows rules that aren’t always obvious. ⸻ 🚀 Pro Tip: 👉 Prefer let and const over var 👉 Avoid var in modern JavaScript ⸻ #JavaScript #Frontend #WebDevelopment #CodingInterview #JSConcepts #Developers