Assess Developer C

It gives meaning to structure for screen readers, search engines and other developers: <header>, <nav>, <main>, <article>, <button>, <label>. A clickable <div> has no keyboard support or role; a <button> does.

Every element is content + padding + border + margin. box-sizing: border-box makes width include padding and border, which is easier to reason about.

Flexbox lays items out in one dimension (a row or a column), good for toolbars and aligning items. Grid handles two dimensions (rows and columns together), good for page layouts and card grids.

let and const are block-scoped; const cannot be reassigned (the object it points to can still change). var is function-scoped and hoisted, which causes bugs — avoid it.

JavaScript runs one call stack. When it is empty, the event loop runs all microtasks (Promise callbacks) first, then the next macrotask (timers, events). So the Promise .then runs before the setTimeout(…, 0) callback.

async functions always return a Promise; await pauses until a Promise settles. Handle errors with try/catch (or .catch on the returned Promise). Use Promise.all to run independent requests in parallel instead of awaiting them one by one.

Props are inputs passed from a parent and are read-only in the child. State is data a component owns and changes over time; changing it re-renders the component.

Lift state to the nearest common parent when siblings need the same data. Use context or a store only for truly app-wide data (current user, theme) or when prop drilling gets deep. Keep server data in a data-fetching cache rather than global state, and derive values instead of duplicating them.

Loading, success, empty, and error (with a way to retry). Also cancel or ignore stale responses when the input changes, and avoid double-submits on mutations.

The key lets the framework match items between renders. With the index, inserting or reordering items attaches state and DOM to the wrong item. Use a stable id from the data.

CSR renders in the browser: simple hosting, slow first paint, weaker SEO. SSR renders per request: fast first content and SEO, needs a server. Static generation renders at build time: fastest and cheapest, but data can be stale (revalidation helps). Choose by how dynamic and personalised the data is and SEO needs.

Every input has a <label>; errors are announced and linked to the field; everything works by keyboard with a visible focus; enough colour contrast; do not rely on colour alone; use native elements before ARIA.

LCP (loading of the largest element), INP (responsiveness to input), CLS (layout shift). Improve LCP by optimising and preloading the hero image, reducing render-blocking CSS/JS, server-rendering the content, using a CDN and caching.

Cross-site scripting: attacker-controlled input is rendered as script in another user’s page. Prevent it by escaping output (frameworks do this by default — avoid dangerouslySetInnerHTML/innerHTML with user data), sanitising any HTML you must render, a Content Security Policy, and HttpOnly cookies.

The same-origin policy stops a page reading responses from another origin. CORS lets a server opt in with headers such as Access-Control-Allow-Origin; non-simple requests are preceded by a preflight OPTIONS. It protects users’ data in the browser — it is not server-side security.

Profile with the browser Performance tab / framework profiler to see what re-renders and how long it takes. Typical fixes: debounce the input, memoise expensive children, virtualise long lists, move heavy work off the main thread, and avoid state updates that re-render the whole page.