Web Fundamentals
Cross-cutting web knowledge for front-end engineers — image formats, network protocols, accessibility, component testing, and headless UI kits.
5 questions
MiddleTheoryOccasionalHow do HTTP, WebSocket, and TCP versus UDP differ?
How do HTTP, WebSocket, and TCP versus UDP differ?
HTTP is a request/response protocol over TCP. WebSocket is full-duplex persistent connection over TCP, opened via HTTP upgrade, for real-time push. TCP is connection-oriented, reliable, ordered, with handshake and retransmission. UDP is connectionless with no delivery guarantees but low overhead — used for video, games, and DNS.
Common mistakes
- ✗Thinking HTTP runs over UDP rather than TCP
- ✗Swapping the reliability roles of TCP and UDP
- ✗Calling WebSocket request/response instead of full-duplex
Follow-up questions
- →What does the WebSocket HTTP upgrade handshake actually exchange?
- →Why does HTTP/3 move from TCP to QUIC over UDP?
JuniorTheoryRareWhen should you use JPG versus PNG for a web image?
When should you use JPG versus PNG for a web image?
JPEG is lossy with no transparency — ideal for photographs with small files and acceptable quality. PNG is lossless with alpha transparency — better for logos, icons, sharp edges, and text. Choose JPEG for photos, PNG for crisp edges or transparency. WebP and AVIF often beat both on size.
Common mistakes
- ✗Thinking JPEG supports transparency (it does not)
- ✗Using PNG for large photographs and shipping huge files
- ✗Believing PNG is lossy or capped at 256 colors (that is GIF)
Follow-up questions
- →What do WebP and AVIF offer over JPEG and PNG?
- →When is SVG a better choice than any raster format?
MiddleTheoryRareWhat makes a UI component accessible, and how do you verify it?
What makes a UI component accessible, and how do you verify it?
Accessibility means the component is operable by keyboard with visible focus, uses semantic HTML plus ARIA roles/labels for assistive tech, manages focus correctly, meets color-contrast minimums, and respects reduced-motion. Verify with keyboard testing, a screen reader, automated audits like axe, and contrast checks — automation alone is insufficient.
Common mistakes
- ✗Removing focus outlines with
outline: noneand leaving no alternative - ✗Sprinkling ARIA instead of using semantic HTML first
- ✗Assuming an automated audit alone proves accessibility
Follow-up questions
- →When should you use an ARIA role instead of a native HTML element?
- →How do you trap and restore focus when opening and closing a modal?
MiddleTheoryRareFor UI components, how do snapshot and screenshot tests differ?
For UI components, how do snapshot and screenshot tests differ?
Snapshot tests serialize DOM to text and diff against stored snapshots — cheap and fast but blind to CSS/layout regressions. Screenshot (visual-regression) tests render pixels and diff images, catching visual breakage but slower and flakier, needing baseline service. Best practice: unit tests for logic, visual-regression for appearance, snapshots sparingly.
Common mistakes
- ✗Expecting snapshot tests to catch CSS/visual regressions
- ✗Committing huge brittle snapshots that get blindly updated
- ✗Treating screenshot tests as deterministic despite font/AA flakiness
Follow-up questions
- →Why do screenshot tests need a baseline image service or review step?
- →When is an interaction test better than either snapshot or screenshot?
MiddleTheoryRareWhat are headless UI libraries like Radix UI or Headless UI?
What are headless UI libraries like Radix UI or Headless UI?
Headless component libraries provide behavior, state, and accessibility without imposing styles or markup. They give keyboard navigation, ARIA, and focus management; you bring your own styling. This lets design systems stay visually unique while inheriting robust, tested interaction logic.
Common mistakes
- ✗Thinking headless kits ship styles you cannot change
- ✗Assuming they omit accessibility rather than providing it
- ✗Confusing them with utility-CSS frameworks like Tailwind
Follow-up questions
- →Why is reusing a headless library's a11y logic safer than rebuilding it?
- →How does a headless library expose state without rendering markup for you?
