Bittu Kumar’s Post

🚀 Web APIs in JavaScript If JavaScript is single-threaded… 👉 How does it handle setTimeout, fetch, or click events without freezing? The answer is Web APIs. What are Web APIs? 👉They are built-in features provided by the browser that allow JavaScript to interact with the web page and the outside world. 1. DOM API (Document Object Model) This lets you interact with HTML elements. ✔️ Change content ✔️ Add/remove elements ✔️ Handle user actions Example: document.getElementById("title").innerText = "Hello World!"; 2. Fetch API Used to get data from servers (APIs). ✔️ Fetch data from backend ✔️ Work with JSON ✔️ Build dynamic apps Example: fetch("https://lnkd.in/dQeGAVaB") .then(res => res.json()) .then(data => console.log(data)); 3. Timer APIs Helps you control time-based execution. ✔️ setTimeout → run once after delay ✔️ setInterval → run repeatedly Example: setTimeout(() => console.log("Hello after 2 sec"), 2000); 4. Geolocation API Access user's location (with permission). ✔️ Latitude & Longitude ✔️ Location-based apps 5. Web Storage API Store data in the browser. ✔️ localStorage (permanent) ✔️ sessionStorage (temporary) Example: localStorage.setItem("user", "Kavi"); 6. Event Handling API Respond to user actions like clicks, typing, etc. Example: button.addEventListener("click", () => { console.log("Button clicked!"); }); >>JavaScript is single-threaded, but Browser APIs + Event Loop make it feel asynchronous! #JavaScript #WebDevelopment #Frontend #Programming #BrowserAPIs #100DaysOfCode

🚀 Day 14/30 – Forms in React (Deep Dive) Still confused why React forms feel different from HTML? 👀 Today I learned how React actually handles user input ⚡ 👉 Forms in React Today I learned: ✅ React controls form inputs using state ✅ Every input change triggers re-render ✅ Forms follow a “single source of truth” 💻 Example: import { useState } from "react"; function Form() { const [name, setName] = useState(""); return ( <> <input value={name} onChange={(e) => setName(e.target.value)} /> <h2>Hello {name}</h2> </> ); } 🔥 What actually happens behind the scenes: 1️⃣ User types → onChange fires 2️⃣ React updates state 3️⃣ Component re-renders 4️⃣ Input value stays in sync with state 👉 This is why React forms feel “controlled” 💡 Controlled vs Uncontrolled (Important): 👉 Controlled Component ✅ - Value comes from state - Fully controlled by React - Easy validation & debugging 👉 Uncontrolled Component ⚡ - Value stored in DOM (useRef) - Less React control - Used in rare cases 💻 Example (Uncontrolled): const inputRef = useRef(); <input ref={inputRef} />⚡ Real Use Cases: - Login / Signup forms - Form validation (required, regex, etc.) - Search inputs with live updates ⚡ Advanced Insight: React forms = continuous sync between UI & state (not like traditional HTML forms) 🔥 Key Takeaway: If state and input are not synced → your form is broken. Are you building controlled forms or still mixing both? 👇 #React #Forms #FrontendDevelopment #JavaScript #WebDevelopment

Yesterday I explained: Angular doesn’t really start from 𝗺𝗮𝗶𝗻.𝘁𝘀 But here’s the real confusion most developers still have: If 𝗶𝗻𝗱𝗲𝘅.𝗵𝘁𝗺𝗹 loads first… And 𝗺𝗮𝗶𝗻.𝘁𝘀 bootstraps Angular… Then how does <𝗮𝗽𝗽-𝗿𝗼𝗼𝘁> actually work? 𝗟𝗲𝘁’𝘀 𝗯𝗿𝗲𝗮𝗸 𝘁𝗵𝗲 𝗺𝗮𝗴𝗶𝗰: In your index.html, you already have: <𝙖𝙥𝙥-𝙧𝙤𝙤𝙩></𝙖𝙥𝙥-𝙧𝙤𝙤𝙩> But at this point... • It's just a normal HTML tag • Browser has NO idea what Angular is • Nothing is rendered yet 𝗦𝘁𝗲𝗽 𝟭: Browser loads main.js After building, Angular injects scripts: <𝙨𝙘𝙧𝙞𝙥𝙩 𝙨𝙧𝙘="𝙢𝙖𝙞𝙣.𝙟𝙨"></𝙨𝙘𝙧𝙞𝙥𝙩> Now the Angular runtime starts executing. (𝘳𝘶𝘯 𝘺𝘰𝘶𝘳 𝘱𝘳𝘰𝘫𝘦𝘤𝘵 𝘵𝘩𝘦𝘯 𝘖𝘱𝘦𝘯 𝘣𝘳𝘰𝘸𝘴𝘦𝘳 -> 𝘨𝘰 𝘵𝘰 𝘥𝘦𝘷𝘛𝘰𝘰𝘭 -> 𝘌𝘭𝘦𝘮𝘦𝘯𝘵𝘴: 𝘏𝘦𝘳𝘦 𝘺𝘰𝘶 𝘤𝘢𝘯 𝘴𝘦𝘦 𝘢𝘯𝘨𝘶𝘭𝘢𝘳 𝘪𝘯𝘫𝘦𝘤𝘵𝘴 <𝙨𝙘𝙧𝙞𝙥𝙩 𝙨𝙧𝙘="𝙢𝙖𝙞𝙣.𝙟𝙨"></𝙨𝙘𝙧𝙞𝙥𝙩>) 𝗦𝘁𝗲𝗽 𝟮: Bootstrap happens In main.ts: 𝙗𝙤𝙤𝙩𝙨𝙩𝙧𝙖𝙥𝘼𝙥𝙥𝙡𝙞𝙘𝙖𝙩𝙞𝙤𝙣(𝘼𝙥𝙥𝘾𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩) / 𝙥𝙡𝙖𝙩𝙛𝙤𝙧𝙢𝘽𝙧𝙤𝙬𝙨𝙚𝙧𝘿𝙮𝙣𝙖𝙢𝙞𝙘().𝙗𝙤𝙤𝙩𝙨𝙩𝙧𝙖𝙥𝙈𝙤𝙙𝙪𝙡𝙚(𝘼𝙥𝙥𝙈𝙤𝙙𝙪𝙡𝙚) Angular now initializes the app 𝗦𝘁𝗲𝗽 𝟯: Angular looks for a selector Your root component: @𝘾𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩({  𝙨𝙚𝙡𝙚𝙘𝙩𝙤𝙧: '𝙖𝙥𝙥-𝙧𝙤𝙤𝙩',  𝙩𝙚𝙢𝙥𝙡𝙖𝙩𝙚: `<𝙝1>𝙃𝙚𝙡𝙡𝙤 𝘼𝙣𝙜𝙪𝙡𝙖𝙧</𝙝1>` }) Angular searches the DOM for: <𝙖𝙥𝙥-𝙧𝙤𝙤𝙩></𝙖𝙥𝙥-𝙧𝙤𝙤𝙩> 𝗦𝘁𝗲𝗽 𝟰: DOM Replacement This is the REAL magic: Angular does NOT create <app-root>  • It finds it  • Then injects the component view inside it Result: <𝙖𝙥𝙥-𝙧𝙤𝙤𝙩>  <𝙝1>𝙃𝙚𝙡𝙡𝙤 𝘼𝙣𝙜𝙪𝙡𝙖𝙧</𝙝1> </𝙖𝙥𝙥-𝙧𝙤𝙤𝙩> Final Flow: 𝙞𝙣𝙙𝙚𝙭.𝙝𝙩𝙢𝙡 → 𝙥𝙡𝙖𝙘𝙚𝙝𝙤𝙡𝙙𝙚𝙧 (<𝙖𝙥𝙥-𝙧𝙤𝙤𝙩>)     ↓ 𝙢𝙖𝙞𝙣.𝙟𝙨 𝙚𝙭𝙚𝙘𝙪𝙩𝙚𝙨     ↓ 𝘼𝙣𝙜𝙪𝙡𝙖𝙧 𝙗𝙤𝙤𝙩𝙨𝙩𝙧𝙖𝙥𝙨     ↓ 𝙁𝙞𝙣𝙙 𝙨𝙚𝙡𝙚𝙘𝙩𝙤𝙧 (𝙖𝙥𝙥-𝙧𝙤𝙤𝙩)     ↓ 𝙍𝙚𝙣𝙙𝙚𝙧 𝙘𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩 𝙞𝙣𝙨𝙞𝙙𝙚 𝙞𝙩 #Angular #Frontend #WebDevelopment #JavaScript #TypeScript #AngularDeveloper #DevCommunity #LearningInPublic #Programming

One thing that becomes clear when moving from Vanilla JavaScript to React is how much more intentional the file structure becomes. In Vanilla JavaScript, many small projects can be built with just: index.html style.css script.js However, React applications benefit from a more structured approach. While converting one of my Vanilla JavaScript projects into React using Vite, I found a pattern that keeps the codebase organized and scalable. A typical structure separates responsibilities into different areas: • Components – reusable UI elements such as buttons, navigation bars, dropdowns, and carousels. These are usually written with props or children to maximize reusability. • Sections / Pages – these represent the major sections or routes of the application, such as HeroSection or ContactPage. • Services – responsible for interacting with external systems like APIs. These files usually contain pure JavaScript logic and return data to the rest of the application. • Hooks – act as the bridge between services and components, managing application logic such as loading states, error handling, and successful data responses. One small detail that stood out while using Vite is how environment variables are accessed: "import.meta.env" This differs from Create React App, which uses "process.env". Structuring applications this way helps keep UI components focused on rendering, while data logic and side effects are handled elsewhere. It's a simple approach, but one that makes React projects significantly easier to maintain as they grow.

If JavaScript was originally designed to run in browsers… how are we able to run it outside the browser using Node.js? Most people first encounter JavaScript inside the browser console. The browser downloads a JS file and executes it using a JavaScript engine (like V8 in Chrome). That engine reads the code and runs it line by line. But the browser is not the language itself. JavaScript is just a programming language. What actually runs the code is a JavaScript engine. Node.js simply takes the same JavaScript engine (V8) and runs it outside the browser. So instead of executing JavaScript inside Chrome, Node.js allows us to execute JavaScript directly on our computer. This means JavaScript is no longer limited to client-side work. With Node.js we can build servers, APIs, CLI tools, automation scripts, and backend applications. In simple words: • Browser = Environment to run JavaScript for web pages • Node.js = Environment to run JavaScript outside the browser But there is an important difference between running JavaScript in the browser console and running it in Node.js. Browser JavaScript environment provides APIs related to the web page such as: • window • document • DOM manipulation • alert() • localStorage These APIs exist because the browser is designed to manage web pages. Node.js, on the other hand, provides APIs related to the operating system and server environment such as: • file system (fs module) • path handling • process information Because of this, code that manipulates the DOM will work in the browser but not in Node.js. Example: document.getElementById("title") This works in the browser because the browser has a DOM. But in Node.js there is no DOM, so this code will not work. Instead Node.js gives access to things browsers do not allow, like reading files: const fs = require("fs") This difference is the key idea: Browser JavaScript focuses on interacting with the webpage. Node.js focuses on interacting with the system and building backend applications. Same language. Different environments. #javascript #nodejs Hitesh Choudhary Chai Aur Code #chaicode #chaiaurcode

🧠 JavaScript is a "Brain" with no "Body." Most developers think console.log, setTimeout, and fetch are part of JavaScript. They aren't. 🤯 Standard JS (ECMAScript) is just a logic engine. It handles variables and loops, but it has no "voice"—it can’t talk to a screen or a network alone. To do anything real, it needs a Host Environment: 🌐 Browsers provide the "limbs" (DOM, Web APIs). ⚙️ Node.js provides the "muscles" (File System, HTTP). I just broke down the "Great JavaScript Identity Crisis" on my blog. Understanding this is the secret to mastering the Event Loop and async performance. Read the full breakdown here: 👇 https://lnkd.in/dSwe-qUb Thanks to Hitesh Choudhary Sir, Piyush Garg, Jay Kadlag #JavaScript #NodeJS #Backend #SoftwareArchitecture #Browser #webapi

𝐈𝐬 𝐲𝐨𝐮𝐫 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐢𝐧𝐟𝐢𝐧𝐢𝐭𝐞𝐥𝐲 𝐨𝐫 𝐦𝐨𝐫𝐞 𝐭𝐡𝐚𝐧 𝐢𝐭 𝐬𝐡𝐨𝐮𝐥𝐝? 𝐓𝐡𝐞 𝐜𝐮𝐥𝐩𝐫𝐢𝐭 𝐢𝐬 𝐨𝐟𝐭𝐞𝐧 𝐬𝐢𝐦𝐩𝐥𝐞𝐫 𝐭𝐡𝐚𝐧 𝐲𝐨𝐮 𝐭𝐡𝐢𝐧𝐤. One of the most common pitfalls with `useEffect` in React is including non-primitive values (objects, arrays, functions) directly in its dependency array without proper handling. Every time your component re-renders, if you create a new object or array literal, or a new function instance, its reference changes. ```javascript useEffect(() => { /* fetch data using config */ }, [config]); ``` If `config` is an object created directly inside your component, even if its properties are identical, `useEffect` sees a new object reference on every render. This forces the effect to re-run, leading to unnecessary computation, API calls, or even infinite loops. **The Fix:** 1. **Destructure Primitives:** If you only need specific primitive properties from an object, destructure them out and add only those to the dependency array. ```javascript const { baseUrl, timeout } = apiConfig; ``` ```javascript useEffect(() => { // ... use baseUrl, timeout }, [baseUrl, timeout]); ``` 2. **Memoize Objects/Arrays:** If the entire object/array is a dependency and is derived from stable values, use `useMemo` to memoize its creation. This ensures its reference remains stable across renders unless its own dependencies change. ```javascript const stableConfig = useMemo(() => ({ baseUrl: '/api', timeout: 5000 }), []); ``` ```javascript useEffect(() => { // ... use stableConfig }, [stableConfig]); ``` 3. **Memoize Functions:** For functions, use `useCallback` to prevent new function instances on every render, ensuring a stable reference for your dependency array. Understanding how JavaScript handles reference equality is key to mastering `useEffect` and writing performant React applications. What's your go-to strategy for managing complex `useEffect` dependencies? #React #ReactJS #Frontend #JavaScript #WebDevelopment #Performance

React developers: Stop using useState for everything I see this pattern in almost every codebase I audit, and it's killing your app's performance. Here's the problem and 3 better alternatives: THE MISTAKE: javascript const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // Then managing all 3 states separately... This leads to: Race conditions (data updates before loading finishes) Impossible states (loading=true AND error=true) Scattered logic across multiple useEffects Re-renders you didn't ask for. SOLUTION 1: useReducer for related state javascript const [state, dispatch] = useReducer(reducer, { status: 'idle', // 'loading' | 'success' | 'error' data: null, error: null }); Benefits: One source of truth, impossible states become... impossible. SOLUTION 2: Custom hooks for reusable logic javascript function useFetch(url) { const [state, setState] = useState({ status: 'idle', data: null }); // ... fetch logic return state; } Benefits: Encapsulated, testable, reusable across components. SOLUTION 3: React Query for API calls javascript const { data, isLoading, error } = useQuery('key', fetchFn); Benefits: Caching, automatic refetching, optimistic updates built-in. When to use each? useReducer → Complex state with multiple transitions Custom hooks → Reusable stateful logic React Query → Any API/server state The result? Cleaner code, fewer bugs, better performance. What state management mistakes do you see most often? Drop them in the comments 👇 #React #JavaScript #WebDevelopment #TypeScript #Programming #FrontendDevelopment

🚀 Optimizing JavaScript Performance: Debounce vs Throttle In modern web applications, handling high-frequency events such as typing, scrolling, and resizing efficiently is critical for performance and user experience. Two widely used techniques to address this are Debounce and Throttle. 🔹 Debounce Definition: Debounce is a technique that delays the execution of a function until a specified period has elapsed since the last invocation. How it works: Each new event resets the timer, ensuring that the function executes only once after the event stream has stopped. Use Case: Ideal for scenarios like search inputs, where you want to trigger an API call only after the user has finished typing. function debounce(fn, delay){ let timer; return function(...args){ clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); } } const search = (query) => { console.log("Searching:", query); } const optimizedSearch = debounce(search, 500); 🔹 Throttle Definition: Throttle is a technique that limits the execution of a function to at most once within a specified time interval. How it works: The function executes immediately and then ignores subsequent calls until the defined interval has passed. Use Case: Best suited for continuous events like scrolling or resizing, where controlled execution is required. function throttle(fn, limit){ let lastCall = 0; return function(...args){ const now = Date.now(); if(now - lastCall >= limit){ lastCall = now; fn(...args); } } } const handleScroll = () => { console.log("Scroll event triggered"); } const optimizedScroll = throttle(handleScroll, 1000); ⚡ Key Difference Debounce ensures execution after the final event Throttle ensures execution at controlled intervals during events 🎯 Why it matters? ✔ Improves application performance ✔ Prevents unnecessary function executions ✔ Reduces server load (fewer API calls) ✔ Enhances overall user experience Efficient event handling is a small optimization that can make a significant impact on application scalability and responsiveness. 💬 How are you optimizing event handling in your applications? #JavaScript #WebDevelopment #Frontend #Performance #SoftwareEngineering #Developers

I've been building with React after a decade of Angular. A lot of it has been a pleasant surprise. But one thing has bothered me from day one: React has no opinion about CSS, and the ecosystem spent a decade filling that gap. Inline styles, CSS-in-JS, Tailwind, component libraries. Each one a genuinely good solution to a problem that shouldn't have existed. Each one comes with a rate you don't find out until you need something it didn't budget for. Wrote up the full argument. CSS didn't fail React. React just didn't show up for CSS. https://lnkd.in/g7Fv2Ujd