/* Bad: removes focus visibility for everyone */
button:focus { outline: none; }
/* Good: keep it visible, just restyle it */
button:focus-visible { outline: 2px solid #4966a8; outline-offset: 2px; }

localStorage.setItem('theme','dark');
sessionStorage.setItem('draftId','42');
document.cookie = 'sessionId=abc; Secure; SameSite=Lax';

class RatingStars extends HTMLElement {
  connectedCallback(){ this.innerHTML = '★★★★☆'; }
}
customElements.define('rating-stars', RatingStars);

.modal-backdrop { position:fixed; z-index:100; } /* new stacking context */
.modal-content  { position:relative; z-index:1; } /* only compared within .modal-backdrop */

img, video { width:100%; height:auto; aspect-ratio:16/9; }
/* Browser now reserves the correct box before the file loads */

.wrapper { container-type: inline-size; }
@container (min-width: 500px) {
  .card { display:grid; grid-template-columns:1fr 2fr; }
}

.page {
  display:grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.sidebar{grid-area:sidebar} .header{grid-area:header} .main{grid-area:main}

.gallery {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

@layer reset, base, components, utilities;
@layer components { .btn { color: blue; } }
@layer utilities { .text-red { color: red; } } /* wins even with equal specificity */

.grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* explicit */
  grid-auto-rows: 120px; /* controls the *implicit* rows the browser adds */
}

console.log('A');
setTimeout(() => console.log('setTimeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('B');
// Output: A, B, promise, setTimeout

const animal = { speak(){ return 'a generic sound'; } };
const dog = Object.create(animal); // dog's prototype is 'animal'
console.log(dog.speak()); // found via the prototype chain

class Animal { speak(){ return 'sound'; } }
class Dog extends Animal {} // same mechanism under the hood

function debounce(fn, ms){
  let id;
  return (...args) => { clearTimeout(id); id = setTimeout(()=>fn(...args), ms); };
}
function throttle(fn, ms){
  let ready = true;
  return (...args) => { if(!ready) return; fn(...args); ready=false; setTimeout(()=>ready=true, ms); };
}

const original = { profile: { age: 30 } };
const shallow = { ...original };
shallow.profile.age = 99;
console.log(original.profile.age); // 99 — the nested object was shared!

const deep = structuredClone(original); // truly independent copy

class Timer {
  seconds = 0;
  start(){
    setInterval(function(){ this.seconds++; }, 1000); // BUG: 'this' is not the Timer here
    setInterval(() => { this.seconds++; }, 1000);      // correct: arrow keeps outer 'this'
  }
}

function* idGenerator(){
  let id = 1;
  while(true){ yield id++; }
}
const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

function memoize(fn){
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if(cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}
const slowSquare = n => { for(let i=0;i<1e8;i++){} return n*n; };
const fastSquare = memoize(slowSquare);

const curriedAdd = a => b => c => a+b+c;
curriedAdd(1)(2)(3); // 6

const multiply = (a,b) => a*b;
const double = multiply.bind(null, 2); // partial application
double(5); // 10

type Shape = { kind:'circle'; r:number } | { kind:'square'; s:number };
function area(shape: Shape): number {
  switch(shape.kind){
    case 'circle': return Math.PI * shape.r ** 2;
    case 'square': return shape.s ** 2;
    default:
      const _exhaustive: never = shape; // compile error if a new Shape variant is added and unhandled
      return _exhaustive;
  }
}

type User = { id:string; name:string; email:string; };
type UserPreview = Pick<User,'id'|'name'>;      // { id, name }
type UserUpdate  = Partial<User>;                // all fields optional
type PublicUser  = Omit<User,'email'>;           // everything except email
type RolePermissions = Record<'admin'|'editor', string[]>;

type RequestState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: string[] }
  | { status: 'error'; message: string };

function render(state: RequestState){
  if (state.status === 'success') return state.data; // data only exists here — safely narrowed
}

const config = { mode: 'dark' } satisfies { mode: 'dark' | 'light' };
// config.mode is inferred as the literal 'dark', not the wider 'dark'|'light'

type Scores = { [studentName: string]: number };
const scores: Scores = { alice: 95, bob: 88 };

type Nullable<T> = { [K in keyof T]: T[K] | null }; // custom mapped type
type NullableUser = Nullable<{name:string; age:number}>; // { name: string|null; age: number|null }

// enum — creates real runtime code
enum Status { Idle, Loading, Done }

// string literal union — zero runtime cost, preferred by many teams
type StatusLiteral = 'idle' | 'loading' | 'done';

// extending Express's Request type via declaration merging
declare global {
  namespace Express {
    interface Request { user?: { id: string } }
  }
}
// now req.user is typed everywhere without editing Express's own types

interface UserCardProps { name: string; onSelect?: (id: string) => void; }
function UserCard({ name, onSelect }: UserCardProps){
  const [user, setUser] = useState<User | null>(null); // explicit generic, since null doesn't reveal shape
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => console.log(e.target.value);
  return <input onChange={handleChange} />;
}

const sortedItems = useMemo(() => expensiveSort(items), [items]); // only resorts when 'items' changes
const handleSave = useCallback(() => saveItem(id), [id]); // stable reference for a memoized child

// switching element type at the same position resets any internal state:
return isEditing ? <Editor key="edit"/> : <Viewer key="view"/>;
// same type, different key = React treats it as a totally different instance:
<Profile key={userId} />

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError(){ return { hasError: true }; }
  componentDidCatch(error, info){ console.error(error, info); }
  render(){ return this.state.hasError ? <FallbackUI/> : this.props.children; }
}

const ExpensiveList = React.memo(function ExpensiveList({ items }){
  return items.map(i => <Row key={i.id} {...i} />);
});
// this defeats memo — a new array reference every render:
<ExpensiveList items={data.filter(x => x.active)} />
// fix: memoize the filtered array itself
const activeItems = useMemo(() => data.filter(x => x.active), [data]);

function reducer(state, action){
  switch(action.type){
    case 'increment': return { count: state.count + 1 };
    case 'reset': return { count: 0 };
    default: throw new Error('Unknown action');
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

const Editor = React.lazy(() => import('./Editor'));
function Page(){
  return (
    <Suspense fallback={<Spinner/>}>
      <Editor/>
    </Suspense>
  );
}

useLayoutEffect(() => {
  const height = tooltipRef.current.getBoundingClientRect().height;
  setPosition(calculatePosition(height)); // applied before the browser paints — no flicker
}, []);

readableStream.pipe(writableStream); // automatically pauses the source if the destination can't keep up

POST /payments
Idempotency-Key: 8d8f6b2e-...  // same key on retry -> server returns the original result, doesn't double-charge

import { z } from 'zod';
const createUserSchema = z.object({ email: z.string().email(), age: z.number().min(13) });
app.post('/users', (req, res) => {
  const result = createUserSchema.safeParse(req.body);
  if (!result.success) return res.status(400).json({ error: result.error.flatten() });
  // result.data is now validated AND correctly typed
});

GET /posts?cursor=lastSeenPostId&limit=20

GET /api/v2/users              // URL versioning
GET /api/users
Accept: application/vnd.myapi.v2+json   // header/media-type versioning

import { Worker } from 'node:worker_threads';
const worker = new Worker('./cpu-heavy-task.js');
worker.on('message', result => console.log('done:', result));

process.on('SIGTERM', async () => {
  console.log('Shutting down gracefully...');
  server.close(() => console.log('HTTP server closed'));
  await db.end(); // close DB pool cleanly
  process.exit(0);
});

CREATE INDEX idx_orders_user_created ON orders(user_id, created_at DESC);
-- speeds up: SELECT * FROM orders WHERE user_id=42 ORDER BY created_at DESC;

-- normalized: total is always calculated from line items (always correct, slower to read)
SELECT SUM(price*qty) FROM order_items WHERE order_id=42;
-- denormalized: total is pre-stored on the order (fast to read, must be kept in sync on write)
SELECT total FROM orders WHERE id=42;

SELECT user_id, total,
  ROW_NUMBER() OVER (PARTITION BY user_id ORDER BY total DESC) AS rank_within_user
FROM orders;
-- every order row survives, each gets its rank among that user's own orders

db.orders.aggregate([
  { $match: { status: 'paid' } },
  { $group: { _id: '$userId', total: { $sum: '$amount' } } },
  { $sort: { total: -1 } }
]);

const session = await mongoose.startSession();
await session.withTransaction(async () => {
  await Account.updateOne({_id:a}, {$inc:{balance:-100}}, {session});
  await Account.updateOne({_id:b}, {$inc:{balance: 100}}, {session});
});

Set-Cookie: session=opaque_random_id; HttpOnly; Secure; SameSite=Lax

Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Lax

// dangerous: renders raw HTML, including any injected <script> tags
element.innerHTML = userComment;
// safe: always renders as plain text, never executes
element.textContent = userComment;

<form action="/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="server-generated-random-value">
  ...
</form>
<!-- server rejects the submission if the token doesn't match what it issued -->

// vulnerable: attacker input can change query structure
const q = `SELECT * FROM users WHERE email = '${email}'`;
// safe: email is always treated as a plain value, never as SQL syntax
db.query('SELECT * FROM users WHERE email = $1', [email]);

import argon2 from 'argon2';
const hash = await argon2.hash(plainPassword); // slow by design, includes a random salt automatically
const valid = await argon2.verify(hash, submittedPassword);

// simplified fixed-window rate limit using Redis
const key = `rate:${userId}`;
const count = await redis.incr(key);
if (count === 1) await redis.expire(key, 60); // window resets after 60s
if (count > 100) return res.status(429).json({ error: 'Too many requests' });

// simplified OAuth 2.0 Authorization Code flow:
// 1. redirect user to provider's login/consent screen
// 2. provider redirects back with a one-time authorization code
// 3. your server exchanges that code (+ client secret) for an access token

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com

// app/page.tsx — Server Component (default, no directive needed)
import Counter from './Counter';
export default async function Page(){
  const posts = await db.post.findMany(); // safe: runs only on the server
  return <><h1>Posts</h1><Counter/></>;
}

// app/Counter.tsx — Client Component
'use client';
import { useState } from 'react';
export default function Counter(){
  const [n, setN] = useState(0);
  return <button onClick={()=>setN(n+1)}>{n}</button>;
}

// app/actions.ts
'use server';
export async function createPost(formData: FormData){
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/posts'); // refresh cached data after the write
}
// used directly in a form: <form action={createPost}>

// time-based revalidation: refresh this fetch's cached result at most every 60s
fetch('https://api.example.com/products', { next: { revalidate: 60 } });
// on-demand: trigger a refresh immediately after a specific write, e.g. inside a Server Action
revalidatePath('/products');

// causes a mismatch: server renders one timestamp, client hydrates with a different one
function Clock(){ return <span>{new Date().toLocaleTimeString()}</span>; }
// fix: only render the real value after mounting on the client
function Clock(){
  const [time, setTime] = useState<string|null>(null);
  useEffect(()=> setTime(new Date().toLocaleTimeString()), []);
  return <span>{time ?? '--:--'}</span>;
}

export default function Page(){
  return (
    <>
      <Header /> {/* fast, sent immediately */}
      <Suspense fallback={<Skeleton/>}>
        <SlowRecommendations /> {/* streamed in once ready */}
      </Suspense>
    </>
  );
}

// middleware.ts
export function middleware(req){
  const hasSession = req.cookies.has('session');
  if (!hasSession && req.nextUrl.pathname.startsWith('/dashboard')){
    return NextResponse.redirect(new URL('/login', req.url));
  }
}
export const config = { matcher: '/dashboard/:path*' };

git log feature-branch     # find the commit hash of the fix, e.g. abc1234
git checkout hotfix-branch
git cherry-pick abc1234    # applies just that one commit here

git bisect start
git bisect bad                 # current commit has the bug
git bisect good v1.0.0          # this old tag was known-good
# Git checks out the midpoint; you test it, then:
git bisect good   # or: git bisect bad
# repeat until Git reports the exact culprit commit

git revert abc1234              # safe: adds a new commit undoing abc1234, keeps history intact
git reset --hard HEAD~1         # dangerous on shared branches: actually erases the last local commit

# Stage 1: build
FROM node:22 AS build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

# Stage 2: final, minimal runtime image
FROM node:22-alpine
WORKDIR /app
COPY --from=build /app/dist ./dist
COPY --from=build /app/node_modules ./node_modules
CMD ["node", "dist/server.js"]

# simplified Nginx reverse proxy config
server {
  listen 443 ssl;
  location / {
    proxy_pass http://app_servers; # forwards to one of several app instances
  }
}

# horizontal scaling requires shared state, not in-memory per-instance state:
// BAD: session stored in this specific server's memory
// GOOD: session stored in Redis, reachable by every instance

deploy new version instances -> wait for health check to pass ->
shift load balancer traffic to new instances -> drain + stop old instances

# Dockerfile — never do this:
# ENV DATABASE_PASSWORD=hardcoded_secret_here

# Instead, injected at deploy time by the platform:
# docker run -e DATABASE_URL=$SECRET_FROM_VAULT myapp

const userLoader = new DataLoader(async (ids) => {
  const users = await db.user.findMany({ where: { id: { in: ids } } }); // one batched query
  return ids.map(id => users.find(u => u.id === id));
});
// resolver:
author: (post) => userLoader.load(post.authorId) // batched automatically across the whole request

// each app instance subscribes to the same Redis channel
redisSub.subscribe('chat-events');
redisSub.on('message', (channel, message) => {
  io.emit('chat message', JSON.parse(message)); // forward to THIS instance's local clients
});
// publishing from any instance reaches every instance:
redisPub.publish('chat-events', JSON.stringify(newMessage));

// server
res.setHeader('Content-Type', 'text/event-stream');
res.write(`data: ${JSON.stringify({ progress: 50 })}\n\n`);
// client
const events = new EventSource('/api/progress');
events.onmessage = (e) => console.log(JSON.parse(e.data));

async function updateUser(id, data){
  await db.user.update(id, data);
  await redis.del(`user:${id}`); // explicitly invalidate so the next read gets fresh data
}

// simplified lock-based coalescing: only one request refreshes, others reuse its result
async function getWithLock(key, fetchFn){
  const cached = await redis.get(key);
  if (cached) return JSON.parse(cached);
  const gotLock = await redis.set(`lock:${key}`, '1', 'NX', 'EX', 5);
  if (!gotLock) { await sleep(50); return getWithLock(key, fetchFn); } // wait and retry
  const fresh = await fetchFn();
  await redis.set(key, JSON.stringify(fresh), 'EX', 300);
  return fresh;
}

PUBLISH chat-room-1 "Hello everyone"
# any client NOT actively subscribed at this exact moment misses this message permanently

// modular monolith: separate modules, one deployable, one database
browser -> API layer -> [orders module | users module | billing module] -> one database

client -> load balancer -> [instance A | instance B | instance C]
// least-connections example: sends to whichever instance is currently least busy

// Measure with real user data (field data) via tools like Chrome UX Report,
// combined with lab tools like Lighthouse for controlled, repeatable diagnostics.

const Editor = React.lazy(() => import('./RichTextEditor')); // only downloaded when actually rendered
// Then measure the real impact:
// npx vite-bundle-visualizer  (or webpack-bundle-analyzer)

request arrives -> traceId generated -> [API span] -> [auth span] -> [DB query span] -> [external API span]
// a trace ties all these spans together, showing exactly where the request spent its time

let shuttingDown = false;
app.get('/health', (req,res)=> res.status(shuttingDown ? 503 : 200).end());
process.on('SIGTERM', async () => {
  shuttingDown = true; // load balancer stops sending new traffic almost immediately
  server.close(() => process.exit(0)); // finishes in-flight requests, then exits
});

POST /login
  -> validate input shape
  -> find user by email
  -> argon2.verify(storedHash, submittedPassword)
  -> on success: create session, Set-Cookie: session=...; HttpOnly; Secure; SameSite=Lax
  -> on failure: generic 401, log the attempt for rate limiting

1. POST /uploads/sign  (auth + validate type/size) -> returns a signed upload URL
2. Client uploads the file directly to object storage using that URL
3. POST /uploads/complete -> server stores metadata in DB
4. Background worker: generate thumbnail, run malware scan, etc.

GET /api/posts?cursor=lastSeenPostId&limit=20
// frontend:
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting && !isLoading && hasMore) loadNextPage();
});
observer.observe(sentinelRef.current);

UPDATE stock SET qty = qty - 1 WHERE product_id = $1 AND qty > 0 RETURNING qty;
// if this query affects 0 rows, someone else already got the last unit — reject this purchase

event (e.g. 'order shipped') -> save notification row (unread) -> push over WebSocket if user online
                              -> queue background job -> send email/push (with retry on failure)

POST /orders
Idempotency-Key: 8d8f6b2e-4a91-...
// server: if this key was already processed, return the stored original result instead of creating a new order

const permissions = {
  viewer: ['post:read'],
  editor: ['post:read','post:create','post:edit'],
  admin:  ['post:read','post:create','post:edit','post:delete','user:manage'],
};
function requirePermission(user, perm){
  if (!permissions[user.role]?.includes(perm)) throw new ForbiddenError();
}

users -> CDN (static + cacheable) -> load balancer -> autoscaled app instances -> Redis cache -> database
// measure first: is the DB, the app CPU, or an external API call actually the bottleneck?

1. expand: ALTER TABLE users ADD COLUMN full_name TEXT;         -- purely additive
2. deploy code that writes to BOTH first_name/last_name AND full_name
3. backfill: UPDATE users SET full_name = first_name || ' ' || last_name WHERE full_name IS NULL;
4. switch reads to full_name once backfill is verified complete
5. contract (later deploy): ALTER TABLE users DROP COLUMN first_name, DROP COLUMN last_name;

tests -> validation -> auth/authz -> secrets management -> migrations + verified backups
-> observability + alerting -> health checks -> rate limits -> rollback plan -> on-call ownership

/* smoother: compositor-only, no layout recalculation */
.card:hover { transform: translateY(-4px); }
/* more expensive: triggers layout recalculation on every frame */
.card:hover { top: -4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

// risky: compiles to an overly specific, brittle selector
.page { .sidebar { .card { .title { span { color: red; } } } } }
// better: flatter, more reusable
.card-title-highlight { color: red; }

// N+1: one extra query per post inside the loop
const posts = await prisma.post.findMany();
for (const post of posts) { const author = await prisma.user.findUnique({ where:{id:post.authorId} }); }

// fixed: one single query fetches everything upfront
const posts2 = await prisma.post.findMany({ include: { author: true } });

npx prisma migrate dev --name add_user_bio
# generates a timestamped SQL migration file, checked into git, applied consistently everywhere

-- regardless of which ORM generated it, this is how you actually diagnose a slow query:
EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'a@b.com';

<!-- blocks parsing until downloaded and executed -->
<script src="heavy.js"></script>
<!-- doesn't block parsing -->
<script src="heavy.js" defer></script>

UPDATE documents
SET content = $1, version = version + 1
WHERE id = $2 AND version = $3; -- fails to match if someone else updated it first
-- application checks rows-affected: 0 means a conflict occurred

// conceptually: measure with real field data (from actual visitors) AND lab tools (Lighthouse) together
// LCP target: under 2.5s | INP target: under 200ms | CLS target: under 0.1

const Editor = React.lazy(() => import('./Editor')); // separate chunk, downloaded only when rendered
function App(){
  return <Suspense fallback={<Spinner/>}><Editor/></Suspense>;
}

// A well-structured monolith still has clear internal boundaries, without the network overhead:
src/modules/users/
src/modules/orders/
src/modules/payments/