1
Q
What status codes means?
100s
A
100s - Informational
2
Q
What status codes means?
200s
A
200s - Success
3
Q
What status codes means?
300s
A
300s - Redirection
4
Q
What status codes means?
400s
A
400s - Client error
5
Q
What status codes means?
500s
A
500s - Server error
6
Q
What is the View Transition API?
A
A modern web API that enables smooth, animated transitions between different states or pages in web applications.
7
Q
What is the main benefit of using the View Transition API?
A
It creates visually engaging transitions that enhance user experience by reducing perceived load times and maintaining context during navigation.
8
Q
Where can you use the View Transition API?
A
You can use it in both single-page applications (SPAs) and multi-page applications (MPAs).
9
Q
What is a same-document view transition?
A
A transition that animates DOM changes within a single page, typically used in SPAs.
10
Q
What is a cross-document view transition?
A
A transition that animates navigation between different pages, typically used in MPAs.
11
Q
How does the View Transition API work at a high level?
A
It captures snapshots of the current and new page states, overlays them, and animates the transition using CSS.
12
Q
What function triggers a view transition in JavaScript?
A
document.startViewTransition()
13
Q
What happens when document.startViewTransition() is called?
A
The browser takes a screenshot of the current state, applies DOM changes, takes another screenshot, and animates between them.
14
Q
How is the default cross-fade animation achieved in the View Transition API?
A
The old view fades out (opacity 1 to 0) and the new view fades in (opacity 0 to 1) using CSS animations.
15
Q
How can you customize the animation of a view transition?
A
By styling the ::view-transition pseudo-elements with CSS.
16
Q
What is the purpose of view-transition-name in CSS?
A
It tags specific elements so they can be animated individually during a transition.
17
Q
What is the structure of the pseudo-elements used during a view transition?
A
::view-transition > ::view-transition-group(root) > ::view-transition-image-pair(root) > ::view-transition-old(root) and ::view-transition-new(root)
18
Q
What does the HTTP status code 200 indicate?
A
The request has succeeded.
19
Q
What does the HTTP status code 404 signify?
A
The requested resource was not found.
20
Q
True or False: The status code 500 indicates a server error.
A
True
21
Q
Fill in the blank: The HTTP status code ___ means ‘Unauthorized’.
A
401
22
Q
Which HTTP status code indicates that the request was successful but no content is returned?
A
204
23
Q
What does the status code 301 represent?
A
Moved Permanently.
24
Q
What is the meaning of the HTTP status code 403?
A
Forbidden - the server understands the request but refuses to authorize it.
25
Multiple choice: Which of the following codes indicates a temporary redirect? A) 302 B) 404 C) 500
A) 302
26
What does the HTTP status code 400 mean?
Bad Request - the server could not understand the request due to invalid syntax.
27
True or False: The status code 503 means the service is unavailable.
True
28
Fill in the blank: The HTTP status code ___ indicates 'Created'.
201
29
What does the status code 408 signify?
Request Timeout - the server timed out waiting for the request.
30
What does the HTTP status code 429 indicate?
Too Many Requests - the user has sent too many requests in a given amount of time.
31
Multiple choice: Which status code indicates that the server is currently unable to handle the request? A) 500 B) 200 C) 404
A) 500
32
What does the HTTP status code 301 mean?
Moved Permanently.
33
True or False: The status code 401 indicates that authentication is required and has failed.
True
34
Fill in the blank: The HTTP status code ___ indicates 'No Content'.
204
35
What does the status code 503 mean?
Service Unavailable - the server is currently unable to handle the request due to temporary overload or maintenance.
36
What does the HTTP status code 302 indicate?
Found - the resource has been temporarily moved to a different URI.
37
Multiple choice: Which status code means 'Not Acceptable'? A) 406 B) 404 C) 200
A) 406
38
What is the difference between 401 and 403 status code?
39
What is a cookie in web development?
A small piece of data stored on the user's computer by the web browser while browsing a website.
40
True or False: Cookies can only store text data.
True
41
Fill in the blank: Cookies are sent to the server with each __________ request.
HTTP
42
What is the maximum size of a cookie?
Typically 4KB (4096 bytes).
43
Which attribute of a cookie specifies the duration for which the cookie should be stored?
Expires or Max-Age
44
What is the purpose of the HttpOnly attribute in cookies?
It prevents client-side scripts from accessing the cookie, enhancing security.
45
True or False: Cookies can be used to track user sessions across multiple visits.
True
46
Multiple Choice: Which of the following is NOT a type of cookie? A) Session Cookie B) Persistent Cookie C) Temporary Cookie
C) Temporary Cookie
47
What does the SameSite attribute in cookies help prevent?
Cross-site request forgery (CSRF) attacks.
48
Short Answer: How can you delete a cookie in web development?
By setting its expiration date to a past date or using the 'max-age' attribute with a negative value.
49
What is Cookie Domain attribute?
Specifies which hosts can receive the cookie. Defaults to the domain that set it.
50
What is Cookie Path attribute?
Limits the cookie to a specific path within the domain.
51
What is Cookie Expires/Max-Age attribute?
Controls the cookie's lifetime (session vs. persistent).
52
What is Cookie Secure attribute?
Ensures the cookie is sent only over HTTPS.
53
What is Cookie HttpOnly attribute?
Prevents JavaScript access, mitigating XSS attacks.
54
What is Cookie SameSite attribute?
Controls cross-site sending of cookies (Lax, Strict, or None).
55
What are XSS attacks?
Type of web security vulnerability where attackers inject malicious scripts—most often JavaScript—into otherwise trusted websites or web applications. When unsuspecting users visit these compromised pages, their browsers execute the injected code as if it were part of the legitimate site, allowing attackers to hijack user sessions, steal sensitive data (like cookies or session tokens), impersonate users, or modify website content.
56
What are Session Cookies?
Temporary, deleted when the browser closes. Used for things like shopping carts.
57
What are Persistent Cookies?
Remain after the session, storing long-term preferences or login info.
58
What are Third-Party Cookies?
Set by domains other than the one in the address bar, mainly for advertising/tracking. Increasingly blocked by browsers for privacy reasons.
59
Provide Fullstack Session Management Example
User logs in:
Server generates a session ID, stores session data server-side, and sends the session ID as a cookie.
User navigates:
Browser sends the session cookie with each request.
Server validates session:
Server uses the session ID from the cookie to retrieve user data and maintain state.
Security:
Implement session expiration and consider token-based authentication for enhanced security.
60
Cookies vs session/local storage
session/local storage is not secure and can be edited by user. Cookies can have a flag HTTPOnly that can prevent user from editing this value.
61
What is oauth2?
OAuth2 is an open standard authorization framework that allows third-party applications to obtain limited access to user data from another service without sharing the user's credentials. fe. "Sign in with Google"
62
What is WebSocket?
WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection.
63
True or False: WebSocket is a one-way communication protocol.
False
64
Fill in the blank: WebSocket connections are established through an initial __________ request.
HTTP
65
What is the main advantage of using WebSocket over traditional HTTP requests?
WebSocket allows for real-time, bidirectional communication without the overhead of repeatedly opening and closing connections.
66
Which HTTP status code indicates a successful WebSocket handshake?
101 Switching Protocols
67
What are the two main phases of a WebSocket connection?
Handshake and Data Transfer
68
Multiple choice: Which of the following is a valid use case for WebSocket? A) Live chat applications B) Static web pages C) File uploads D) Image rendering
A) Live chat applications
69
What is the purpose of the WebSocket API in web browsers?
The WebSocket API allows developers to create and manage WebSocket connections in web applications.
70
True or False: WebSocket connections can only be made from a web browser.
False
71
What is the difference between WebSocket and HTTP?
WebSocket provides a persistent connection for real-time communication, while HTTP is stateless and typically used for request-response communication.
72
Definition of an Event Bus
A centralized infrastructure that enables components/services to publish/subscribe to events asynchronously, enabling decoupling and event-driven architecture.
73
Primary Purpose of an Event Bus
To act as a conduit for event-driven communication between microservices/microfrontends without direct dependencies.
74
What are csrf attacks?
Imagine you are logged into your bank website. If, while browsing elsewhere, you click a crafted link (possibly disguised as something innocent), your browser could send a request to your bank to transfer funds—without your intent.
75
What is a CDN?
A CDN is a globally distributed network of proxy servers that delivers content to users from locations closer to them, improving loading speed and reducing latency.
76
What types of content do CDNs typically serve?
CDNs usually serve static files such as HTML, CSS, JavaScript, images, and videos, but some CDNs can also handle dynamic content.
77
How does a CDN improve website performance?
By caching content at edge servers close to users, CDNs reduce the distance data travels, decreasing load times and reducing the load on the origin server.
78
What is the difference between Push CDN and Pull CDN?
Push CDNs require content to be uploaded manually to the CDN servers, while Pull CDNs fetch content from the origin server on the first user request and cache it.
79
What are some disadvantages or challenges of using a CDN?
CDN costs can be significant, content might be stale if updated before cache expiration, and using a CDN requires changing URLs to point to CDN servers.
80
What is a Progressive Web App (PWA)?
A PWA is an application built using web technologies but provides a user experience similar to native, platform-specific apps. It can be installed, run offline, and accessed from multiple devices through a single codebase.
81
Key Features of PWAs
PWAs work offline, support push notifications, can be installed on home screens, and are built with technologies like HTML, CSS, JavaScript, Service Workers, and a Web App Manifest.
82
Why Use a PWA?
PWAs combine the reach of web apps (accessible via browsers) with capabilities of native apps (offline use, device integration), resulting in lower development costs and broader accessibility.
83
What is the critical rendering path?
**HTML → DOM** + **CSS → CSSOM** → **Render tree** → **Layout** → **Paint** → **Composite**.
84
What triggers a reflow (layout)?
DOM structure changes, style changes affecting geometry, reading layout properties (`offsetWidth`, `getBoundingClientRect`), window resize.
85
What is the difference between reflow and repaint?
**Reflow**: recalculates geometry (positions/sizes). **Repaint**: redraws pixels (color, visibility). Reflow always causes repaint; repaint doesn't always cause reflow.
86
What is event bubbling vs. capturing? (DOM)
**Capturing**: event travels document → target. **Bubbling**: target → document. `addEventListener` defaults to bubbling; pass `{capture: true}` for capturing.
87
What is event delegation? (DOM)
Attach one listener to a **parent**; identify the actual target with `e.target`. Efficient for large or dynamically updated lists.
88
What is `requestAnimationFrame` used for?
Schedules a callback **before the next browser repaint** — use for smooth animations synchronized to the display refresh rate (~60fps).
89
What is a Web Worker?
Runs JS in a **background thread** separate from the main thread. No DOM access; communicates via `postMessage`/`onmessage`.
90
What is a Service Worker?
A script running in the **background** (separate thread); intercepts network requests; enables **offline caching**, push notifications, background sync. HTTPS only.
91
What is the difference between a Web Worker and a Service Worker?
Web Worker: per-page background thread for CPU work. Service Worker: **browser-level proxy** that persists beyond the page and intercepts network requests.
92
What are the three Core Web Vitals?
**LCP** (Largest Contentful Paint — loading), **INP** (Interaction to Next Paint — responsiveness), **CLS** (Cumulative Layout Shift — visual stability).
93
What is LCP and what is the "good" threshold?
**Largest Contentful Paint** — time until the largest visible content element loads. Good: **≤ 2.5s**.
94
What is CLS and what causes it?
**Cumulative Layout Shift** — measures unexpected layout shifts. Caused by images without dimensions, late-loading fonts, dynamically injected content.
95
What is INP (Interaction to Next Paint)?
Measures the **worst interaction latency** (from user input to next paint) throughout the page's lifetime. Replaced FID. Good: **≤ 200ms**.
96
What is code splitting? (performance)
Splitting a JS bundle into smaller chunks loaded **on demand** — reduces initial load. Done with dynamic `import()` or route-based splitting in bundlers.
97
What is tree shaking?
**Dead code elimination** — bundler removes unused exports. Requires **ESM** (static imports allow static analysis).
98
What is debounce?
Delays function execution until **after a pause** in events (e.g., fires 300ms after the user stops typing). Only fires once per burst.
99
What is throttle?
Limits a function to fire **at most once per interval** (e.g., every 100ms during scroll). Fires at a regular rate during continuous events.
100
What is the difference between debounce and throttle?
**Debounce**: fires **after inactivity**. **Throttle**: fires at a **fixed rate during activity**.
101
How do detached DOM nodes cause memory leaks?
A DOM node removed from the document but still referenced in JS (e.g., in a closure or event listener) — prevents GC and holds its subtree in memory.
102
What is CORS?
**Cross-Origin Resource Sharing** — browser security mechanism requiring servers to include `Access-Control-Allow-Origin` for cross-origin requests to succeed.
103
What is a CORS preflight request?
An **OPTIONS request** automatically sent before non-simple cross-origin requests; checks whether the server allows the HTTP method and headers.
104
What makes a request "simple" (no preflight) in CORS?
Method is GET, HEAD, or POST; headers are only Accept, Content-Type (with safe values), and a few others; no custom headers.
105
What is the key difference between HTTP/1.1 and HTTP/2?
HTTP/2 adds **multiplexing** (multiple requests over one TCP connection), **header compression** (HPACK), and **server push**.
106
What is JWT authentication?
JSON Web Token — **signed token** (header.payload.signature) containing claims; server validates the signature, no session store needed. **Stateless**.
107
What is the OAuth 2.0 authorization code flow?
User logs in → authorization server returns **auth code** → app exchanges code for **access token** + refresh token → uses token to call APIs.
108
What is XSS and how do you prevent it?
**Cross-Site Scripting**: injecting malicious scripts viewed by other users. Prevent with: **output encoding**, Content Security Policy (CSP), avoiding `innerHTML`.
109
What is CSRF and how do you prevent it?
**Cross-Site Request Forgery**: tricking a user's browser into making an authenticated request. Prevent with: **CSRF tokens**, `SameSite` cookies, checking Origin/Referer header.
110
What is the difference between WebSockets, SSE, and long polling?
**WebSockets**: full-duplex, bidirectional. **SSE**: server→client only, auto-reconnect, over HTTP. **Long polling**: client re-requests immediately after response.
111
What are ARIA roles?
Attributes (`role="button"`, `role="dialog"`) that convey **semantic meaning** to assistive technology when native HTML elements aren't used.
112
What is focus management and why does it matter? (accessibility)
Programmatically controlling keyboard focus (e.g., moving focus into a modal on open); essential for keyboard-only users and screen readers.
113
What WCAG contrast ratio is required for AA compliance (normal text)?
**4.5:1** for normal text; **3:1** for large text (18pt+ or 14pt+ bold).
114
What is the Intersection Observer API used for?
Efficiently detecting when elements **enter or leave the viewport** — used for lazy loading, infinite scroll, and animation triggers.
115
What is the difference between `localStorage` and `sessionStorage`?
`localStorage`: persists until explicitly cleared, shared across tabs of the same origin. `sessionStorage`: cleared when the **tab closes**, tab-specific.
Programming
flashcards
Decks in class (12)
# Cards
