Tech Jargon - Decoded

What is Static Site Generation (SSG)? SSG is a web development method where your website pages are pre-built into static HTML files at "build time" before any user actually visits the site. How it works: - You write your code and content. - During the build process, the generator combines your data and templates. - It produces a finished HTML file for every single route/page. - These files are stored on a server or CDN. - When a user requests a page, the server instantly sends the pre-made file. Problems it solves: - Slow Performance: No waiting for a database to respond or a server to process code on every click. - Security: Since there is no live database connection or backend running, the attack surface is tiny. - SEO: Search engines get fully rendered content immediately. Use Case: For a documentation site, 50 pages are generated as 50 separate HTML files during deployment. When a developer clicks a link, the server just hands over the existing file.

What is Server-Side Rendering (SSR)? SSR is a technique where the server handles the logic of generating a fully-formed HTML page and sends it to the browser ready to be displayed. The Process: • Browser requests a specific page. • Server fetches data from the database. • Server converts the code and data into a complete HTML file. • Browser receives the finished file and renders it instantly. • JavaScript then loads to make the page interactive. Problems it solves: • SEO: Since the content is in the HTML, search engine bots can index the site easily. • Slow Devices: The user's device doesn't have to work hard to build the page, preventing "blank screen" delays. Simple Scenario: Necessary for high-traffic landing pages where immediate content visibility is required for search engine ranking.

What is Client Side Rendering (CSR)? CSR is a method where your browser (the client) creates the final webpage on your screen using JavaScript. How it works: • The server sends an almost empty HTML file and a script bundle. • The browser downloads the script and executes it. • This script fetches data and builds the UI directly in the browser. • The content appears only once the script finishes running. Problem it solves: It reduces server pressure and removes the need for full page refreshes when navigating between different sections of a site. Simple Scenario: In a data dashboard, clicking a "Filter" button updates the charts instantly via JS without the browser having to reload the whole page from the server.

What is Hydration in Web Development? It is the process where client-side JavaScript attaches event listeners and state to a static HTML page that was previously rendered on the server. How it works: • The server sends a pre-rendered HTML file to the browser. • The browser displays this HTML immediately (users see content fast). • The JavaScript bundle loads and "walks" through the existing DOM. • It matches the HTML elements with the component logic. • It binds event listeners (like clicks or scrolls) to those elements. Problem it solves: • Slow First Paint: Prevents users from staring at a blank screen while JS loads. • SEO: Ensures search engines can read the content without executing JavaScript. Use Case: A "Like" button is visible on page load from the server HTML. Hydration connects the onClick function to that button so it actually increments the count when clicked.

What is Reconciliation? It is the process of comparing two separate sets of records to ensure they are consistent, accurate, and in agreement. How it works: • You take data from two different sources (Source A and Source B). • Match entries line-by-line based on a common identifier. • Flag any "orphans" (entries that exist in one list but not the other). • Check if the specific values for matching entries are identical. • Resolve differences until the final balances match. Problem it solves: It prevents data "drift" where systems show conflicting information. It catches missing entries, duplicate records, and human or system errors that lead to incorrect totals. Use case: If System X logs 10 completed tasks but System Y only shows 8, reconciliation identifies the 2 missing logs so they can be added to keep both systems synced.

What is Virtual DOM? It is a lightweight, JavaScript representation of the actual DOM. It lives in the memory and acts as a middle layer between the code and the browser's UI. The Problem it Solves: Manipulating the Real DOM is slow and expensive. Whenever a small change occurs, the browser often re-calculates the layout and styles for the entire page, which kills performance. How it works: • Step 1: When data changes, a new Virtual DOM tree is created. • Step 2 (Diffing): This new tree is compared with the previous version to find exactly what changed. • Step 3 (Reconciliation): Only the specific changes are pushed to the Real DOM, instead of re-rendering everything. Scenario: Updating a single "Like" count on a post. Instead of refreshing the whole post and its comments, the Virtual DOM identifies only the number changed and updates just that specific node.

What is the DOM? The DOM (Document Object Model) is a structured representation of an HTML document. It treats the entire page as a collection of objects that a programming language can manipulate. How it works: • When a browser loads HTML, it parses the code and creates a tree of nodes. • Every tag (e.g., <div>), attribute, and piece of text becomes an object in this tree. • JavaScript uses this tree to find, add, or delete elements in real-time. Problem it solves: Without the DOM, HTML is just a static text file. The DOM provides a standard way for scripts to interact with the page after it has already loaded, allowing for dynamic updates. Simple Use Case: • Scenario: Updating a username on a profile page. • Action: JavaScript identifies the specific <p> node by its ID and replaces its text property without refreshing the browser.

What is Idempotency? It is a property where an operation results in the same system state regardless of how many times it is executed. After the first successful call, subsequent identical requests have no further effect. How it works: • The client attaches a unique Idempotency Key to the request header. • The server looks up this key in its storage. • If the key is already present, the server returns the cached result of the previous execution. • If the key is new, the server processes the request and saves the outcome for future matches. Problem Solved: It prevents duplicate records and data inconsistency caused by network retries, connection timeouts, or client-side errors. Use Case: When a client retries an API call to create a database entry because the response was lost, the server uses the key to ensure only one entry is actually created.

What is CORS (Cross-Origin Resource Sharing)? CORS is a browser-based security mechanism that allows or restricts web resources from being requested from a domain different from the one that served the original page. What problem does it solve? Browsers follow a "Same-Origin Policy" which blocks scripts on one site from accessing data on another. CORS provides a safe way for servers to tell the browser: "I trust this specific external domain, let it see my data." How it works: • Your browser adds an Origin header to your request. • For sensitive tasks, the browser first sends a "Preflight" (OPTIONS) request to check permissions. • The server responds with Access-Control-Allow-Origin. • If this header matches your domain, the browser allows the data through; otherwise, it blocks the response. Use case: Your frontend app at my-ui.com tries to fetch data from api-server.net. Since the domains don't match, the server must explicitly allow my-ui.com via CORS headers for the request to succeed.

What is a Cookie? A small text file containing data that a website sends to your browser to be stored on your device. How it works: • You visit a website. • The server sends a response with a "Set-Cookie" header. • Your browser saves this data locally. • For every future request to that same website, the browser automatically includes the cookie in the request header. Problem it solves: HTTP is a stateless protocol, meaning it forgets who you are the moment a request is finished. Cookies provide "state" so the server can recognize you across multiple pages or visits. Technical Use Case: After you enter your username and password, the server sends a unique Session ID via a cookie. As you move to different pages on the site, the browser sends that ID back, keeping you logged in without asking for your password again.

What is a Session? A session is a server-side storage method used to keep track of a user's state and data as they navigate through different pages of a website. How it works: • When a user connects, the server generates a unique Session ID. • This ID is sent to the user's browser and stored in a temporary cookie. • For every subsequent request, the browser sends that ID back to the server. • The server uses the ID to look up the stored data in its own memory or database to identify the user. Problem it solves: Web protocols are "stateless," meaning the server forgets who you are the moment a request is finished. Sessions fix this by providing a way to remember user information across multiple requests. Use Case: Maintaining a "Logged In" status. Once you verify your credentials, the server marks your session as authenticated. As you click different links, the server checks your Session ID to confirm you are still the same authorized user without asking for a password again.

What is OAuth? It is an open standard protocol for token-based authorization. It allows one application to access data from another service on behalf of a user without needing the user's password. Problem it solves: It prevents "Password Sharing." Users don't have to give their login credentials to third-party apps, which keeps the main account secure. How it works: • Request: The App asks the user for permission to access specific data. • Grant: The user authenticates with the Service Provider and approves the request. • Code: The Provider sends a short-lived authorization code to the App. • Exchange: The App trades this code for a secure Access Token. • Access: The App presents the token to the API to fetch the allowed data. Simple Scenario: A dashboard app wants to show your calendar events. Instead of giving the app your email password, you authorize it via OAuth. The app receives a Token that only lets it "read calendar" and nothing else.

What is a JSON Web Token (JWT)? It is a compact and secure way to transmit information between a client and a server as a JSON object. It is primarily used for authentication. Problem it solves: Traditional sessions require the server to store user data in its memory (stateful). JWT is stateless; the server doesn't need to store session data because the token itself carries all the necessary user identity. How it works: • Creation: After login, the server creates a token signed with a secret key. • Structure: It consists of three parts: Header, Payload (user info), and Signature. • Storage: The client stores the token in the browser. • Request: The client sends this token in the header for every future request. • Validation: The server verifies the signature using its secret key. If valid, the user is granted access. Simple Use Case: User logs in -> Server sends JWT -> Client sends JWT to access /profile -> Server verifies signature and returns data.

What is Authorization? It is the process of determining what actions a verified user is allowed to perform. It defines specific access levels for files, databases, and system features after the identity is confirmed. How it works: • The system identifies the user via a session or token. • It looks up the user's assigned Roles or Scopes. • The server compares these rights against the requested resource. • Access is granted only if the permission list matches the requirement. Problem it solves: It prevents data leaks and unauthorized changes by ensuring users cannot access information or perform actions (like deleting data) that do not belong to their role. Scenario: A user with a "Staff" role tries to access the /admin/delete-database route. The server checks the user's role, sees it lacks "Root" permissions, and blocks the request with a 403 error.

What is Authentication? It is the technical process of verifying that a user is who they claim to be. It confirms an identity before any data or access is shared. How it works: • The user submits credentials, such as a username and a password. • The system receives these inputs and compares them against a record in a secure database. • If the provided data matches the stored version, the system validates the identity. • Once verified, the server issues a digital token or a session ID to allow continued access. Problem it solves: It prevents unauthorized access and identity spoofing. Without it, anyone could access private data simply by claiming to be a specific user. Simple Scenario: A user enters a password into a login form. The server hashes the password and checks if it matches the hash stored in the database. If correct, the server sends back a "Success" response and a session cookie.

What is Topic Validation? It is a verification process that ensures any data sent to a message broker follows predefined rules and structure before it is stored or processed. How it works: • Naming Check: The system verifies if the topic name exists or follows the allowed naming pattern. • Schema Matching: It checks if the message fields (like strings, numbers, or dates) match the required data types. • Rejection: If the message format is wrong or the topic is unauthorized, the system sends an error back to the sender and discards the data. Problem it solves: • Prevents "Poison Pills" (bad data that crashes the systems reading it). • Stops the accidental creation of junk topics caused by typos in the code. Use Case: If a system expects a User_ID as a number, but a sender tries to transmit it as a word, the validation blocks it immediately to prevent a crash during processing.

What is a Data Transfer Object (DTO)? A DTO is a simple object used to bundle and transport data between different parts of a system. It serves as a data container and does not contain any business logic. How it works: 1. Data is fetched from a database or a service. 2. Only the required fields are mapped (copied) into a DTO class. 3. This DTO is then sent to the client or another layer. Problem it solves: - Data Exposure: Prevents sending sensitive fields (like passwords or internal IDs) over the network. - Over-fetching: Reduces payload size by sending only the data the receiver actually needs. - Decoupling: Keeps the API response stable even if the internal database structure changes. Simple Scenario: A database table has 20 columns, but a mobile app only needs 'Username'. The DTO filters out the 19 unnecessary columns and sends only 'Username' to the app.

What is Deserialization? It is the process of converting a static stream of bytes back into a live object in memory. It is the exact opposite of serialization. How it works: • Input: The system receives flat data (like a JSON string or binary file). • Mapping: The program identifies the structure or class the data belongs to. • Rebirth: It populates a new object with the saved values, making it active for the code to use. Problem it solves: It allows complex data structures to be reconstructed after being stored or transmitted. Without it, you couldn't "save" the state of a program and reload it later in its original form. Simple Scenario: An app receives a sequence of bytes from a server. Deserialization turns those bytes into a "User" object, allowing the code to access user.id or user.name directly.

What is Serialization? It is the process of converting an object from its memory-based state into a linear format (like a byte stream or a string) that can be easily stored or transmitted. How it works: • The system reads the current values and structure of an object in RAM. • It flattens this data into a sequence of bytes or text (JSON/XML). • This sequence can then be saved to a disk or sent across a network. • Deserialization is the reverse—turning that sequence back into a live object. Problem it solves: Objects in memory are temporary and tied to a specific program. Serialization allows data to survive after the program closes and lets different systems exchange complex data structures easily. Use Case: A database stores a "User Profile" object. The application serializes the object into a byte stream to save it to a file. Later, it deserializes that file to bring the object back into memory exactly where it left off.

What is Middleware? It is a software layer that sits between a request and a response, or between two different applications. It acts as a "middleman" that processes data as it moves through a system. How it works: • An incoming request is intercepted by the middleware before reaching the main logic. • It executes a specific task, such as checking credentials or formatting data. • It then either passes the data to the next function or stops the process if a condition fails. Problem it solves: It prevents code duplication. Instead of writing the same logic (like security or logging) inside every single part of your application, you write it once in a middleware layer. Simple Use Case: In a web server, a middleware can check for a valid "access token." If the token is missing, the middleware rejects the request immediately, protecting the main application from unauthorized access.