Ravi Shankar Pratihast’s Post

Day 8 of #100DaysOfCode Built a Stopwatch using JavaScript. Features: ⏱️ Start / Stop functionality. 🔄 Reset timer 📊 Real-time time tracking Continuing to improve my JavaScript fundamentals through small projects. Git-Hub Repo Link: https://lnkd.in/geZqCnQ9 #JavaScript #WebDevelopment #Frontend

“JavaScript is easy.” Until this happens… 🤐 console.log(1 + "11") 👉 111 😵 Wait… what? Here’s what’s happening 👇 In JavaScript, the `+` operator does TWO jobs: ➕ Math addition ➕ String concatenation If one operand is a string, JavaScript silently converts the other one into a string too. So: 1 + "11" becomes "1" + "11" = "111" This is called **Type Coercion** (implicit conversion). 🔄 And that’s just the beginning… JavaScript also has something called - Truthy & Falsy values 👇 Falsy values (remember: FUNN0""): ❌ false ❌ undefined ❌ null ❌ NaN ❌ 0 ❌ "" (empty string) Everything else? ✅ Truthy. That’s why: if ("0") { console.log("Runs") } 👉 It runs 😅 Because "0" is a string — and it's truthy. JavaScript isn’t hard. But it’s full of silent behavior that can trick you. Have you ever been stuck because of type coercion? 👇 Comment your weirdest JS bug. #JavaScript #WebDev #Frontend #CodingTips #JSLearning

JavaScript Challenge (Don’t run it 😄) Most developers say they understand the Event Loop… Let’s test that 👇 What will be the exact output of this code? console.log("start"); setTimeout(() => console.log("timeout"), 0); Promise.resolve()  .then(() => console.log("promise1"))  .then(() => console.log("promise2")); console.log("end"); 👉 In what order will it print? 👉 Explain using Microtasks vs Macrotasks Drop your answer before running it 👇 #JavaScript #Frontend #WebDevelopment #CodingChallenge #InterviewPrep #SoftwareEngineering

🚨 React Hooks Tip: Always Call Hooks at the Top Level! 🚨 If you're working with React hooks, here’s a golden rule you must follow: 👉 Only call hooks at the top level of your functional component or custom hook. Avoid calling hooks inside loops, conditions, or nested functions. But why is this so important? React relies on the order of hook calls to keep track of state and effects between renders. When hooks are conditionally called, the order changes and React gets confused — causing bugs, unexpected behavior, or warnings like: 🔴 "React Hook 'useEffect' is called conditionally." For example, calling useState inside an if block means sometimes it runs — sometimes it doesn’t. React can't reliably associate state with the correct hook call anymore. How to fix it? ✔️ Always call your hooks unconditionally at the top level. ✔️ Move your conditional logic inside the hook (e.g., inside useEffect). ✔️ When you need conditional hooks, consider creating custom hooks that handle those conditions internally. By following this simple rule, your React components will stay predictable and bug-free — making your codebase easier to maintain and scale. Happy coding! 💡⚛️ #ReactJS #JavaScript #WebDevelopment #Frontend #ProgrammingTips #SoftwareEngineering

Ever noticed this in JavaScript? 👀 -------- console.log("start"); setTimeout(() => console.log("timeout")); Promise.resolve().then(() => console.log("promise")); console.log("end"); -------- Most developers expect setTimeout to run first. But the output is: -------- start end promise timeout -------- Why? Because Promises go into the Microtask Queue, while setTimeout goes into the Macrotask Queue. The JavaScript event loop always processes all microtasks before the next macrotask once the call stack is empty. Execution order becomes: 1️⃣ Synchronous code 2️⃣ Microtasks (Promise, queueMicrotask) 3️⃣ Macrotasks (setTimeout, setInterval, DOM events) So even setTimeout(fn, 0) will run after Promise callbacks. Understanding this small detail helps explain many tricky async bugs in real applications. #javascript #webdevelopment #frontend #async #eventloop

JavaScript question 🧠 What will this log? Think before running it. const values = [ 0, -0, +0 ]; const set = new Set( values ); console.log( set.size ); A) 1 B) 2 C) 3 Are 0, -0, and +0 treated as different values? Or does Set see them as the same? #JavaScript #CodingChallenge #Frontend

Starting a new backend project often means repeating the same setup again and again. Creating folders, configuring the structure, setting up the basics before you can actually start building. So I built Bend. If you don’t want to create the same backend folder structure every time, just leave that part to Bend. Bend generates a clean backend project structure instantly and works with most package managers. Try it: https://www.bendhq.org/ Start building features instead of setting up folders. #NodeJS #BackendDevelopment #JavaScript #WebDevelopment #DeveloperTools #chaicode

Quick JavaScript Quiz 👇 You run a heavy synchronous loop for 5 seconds that blocks the main thread. During that time, you click a button 10 times. What happens? A) Clicks are ignored B) Only the last click runs C) All clicks execute after the loop finishes D) The browser crashes Drop your answer before scrolling. (Explanation in comments.) #JavaScript #WebDevelopment #Frontend #Learning

🚀 Day 6 of #100DaysOfCode Built a Pomodoro Timer using JavaScript to improve focus and productivity. Features: ⏱️ 25-minute focus timer ▶️ Start / Stop / Reset functionality Learning more about JavaScript timers and DOM manipulation. Repo:-https://lnkd.in/geZqCnQ9 #JavaScript #WebDevelopment #Frontend

React Tip: Structure your component files Many React components become difficult to maintain because everything is written in random order inside one file. A simple structure improves readability a lot. Recommended order inside a component: 1. Imports 2. Props / Types 3. Helper or utility functions 4. State and Effects (useState, useEffect, etc.) 5. Guard clauses (loading / error handling) 6. JSX return Why this helps: • Faster understanding of the code • Easier debugging • Cleaner code reviews • Better collaboration in teams In React, performance matters — but readability matters just as much. Well-structured components make large applications easier to scale and maintain. #ReactJS #FrontendDevelopment #JavaScript #CleanCode