Unit 6 - Practice Quiz

Web development is broadly divided into frontend (client-side, what the user sees) and backend (server-side, the logic and data management).

HTML (HyperText Markup Language) is the standard markup language for creating web pages and defining their structure.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML.

The backend (server-side) is responsible for logic, data processing, and database interactions that the user doesn't see directly.

Databases are used to store, retrieve, update, and manage application data, such as user accounts, posts, and product information.

CRUD stands for the four basic functions of persistent storage: Create, Read, Update, and Delete.

UI design focuses on the visual aspects and interactive elements of a digital product to ensure it is attractive and simple to use.

Responsive web design aims to provide an optimal viewing and interaction experience across a wide range of devices, from mobile phones to desktop computers.

Mobile-first is a design and development strategy that starts with the smallest screen as a baseline and progressively enhances the design for larger screens.

SPAs provide a more fluid, app-like user experience by loading a single HTML page and updating its content dynamically using JavaScript.

JavaScript is a scripting language that runs in the user's browser to make web pages interactive and dynamic.

A Full Stack Developer has a broad skillset and is capable of handling all aspects of web development, from the user interface to the server and database.

AR stands for Augmented Reality, which is a technology that overlays computer-generated images on a user's view of the real world.

Virtual Reality (VR) immerses the user in a completely artificial digital environment, blocking out the real world.

VR headsets are worn over the eyes to provide the visual and auditory experience of the virtual world, creating a sense of immersion.

AR technology enhances the real world with digital information, making it ideal for interactive games, navigation apps, and virtual furniture placement.

A User Experience (UX) Designer focuses on the entire journey a user takes with a product, ensuring it is logical, efficient, and enjoyable.

PHP is a recursive acronym that stands for 'PHP: Hypertext Preprocessor'. It is a widely-used open source general-purpose scripting language.

Visual Studio Code is a free, lightweight, and powerful source-code editor developed by Microsoft that is widely used for web development.

The 'client' refers to the user's computer or web browser that requests and displays web pages from a server. Frontend code (HTML, CSS, JS) runs on the client.

This is an example of a mobile-first approach. The base style (display: none;) applies to all screen sizes, starting with mobile. The media query then overrides this style for screens with a minimum width of 768px, making the sidebar appear on tablets and desktops.

Storing passwords in plain text or with simple reversible encryption is highly insecure. The industry standard is to use a strong, one-way hashing algorithm with a unique salt for each user. This makes it computationally infeasible to reverse the hash back to the original password, even if the database is compromised.

The 'U' in CRUD stands for Update. In a RESTful API, the PUT or PATCH methods are used to update an existing resource. PUT typically replaces the entire resource, while PATCH applies a partial modification. Both correspond to the UPDATE database operation.

SPAs load a large JavaScript bundle upfront. This can lead to a longer initial load time. Also, because content is rendered client-side, search engine crawlers may not see the final content, making SEO more challenging without techniques like Server-Side Rendering (SSR) or Static Site Generation (SSG).

In a Flexbox layout (display: flex;), the justify-content property aligns items along the main axis (which is horizontal by default). Setting it to center will center the flex items horizontally. align-items centers items on the cross-axis (vertical), text-align is for inline content, and margin: 0 auto; works on block elements but is not a flexbox property.

Accessibility guidelines (like WCAG) emphasize the need for high color contrast for readability. Furthermore, information should never be conveyed by color alone, as color-blind users may not be able to perceive it. Combining color with text labels or icons ensures the message is accessible to everyone.

A UI/UX Designer focuses on the user's experience and the application's look and feel. Their core tasks involve research (personas, user flows), planning the layout (wireframes), and creating visual, often interactive, mockups (prototypes). The other options describe backend, and frontend development roles.

While GPS is used to find where Pokémon appear on the map, the technology that actually 'anchors' the virtual object to a real-world surface (like the sidewalk) is SLAM. It allows the device to build a map of its surroundings and track its own position within that map, making the augmentation appear stable and realistic.

Network requests are asynchronous, meaning the code doesn't wait for them to finish. A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. The .then() method or the await keyword provides a way to handle the successful response once it is received from the server, without blocking the rest of the application.

In a mobile-first approach, the base CSS is simple and targeted at small screens. Styles for larger screens are wrapped in media queries. A mobile browser will download and parse all the CSS, but it only has to apply the simpler base styles. This progressive enhancement ensures a faster rendering experience for the most constrained devices.

A many-to-many relationship in a relational database is correctly modeled using a third table, often called a join or junction table (in this case, friendships). This table contains foreign keys that reference the primary keys of the two tables it connects (users in this case). This avoids data duplication and allows for efficient querying.

The browser parses the HTML file and creates the DOM, which is an in-memory, object-based representation of the document's structure. CSS is used for styling, and JavaScript is used to interact with and dynamically modify this DOM to create interactive web pages.

The main distinction is the source of computation. A standalone headset is an all-in-one device with its own processor, GPU, and storage. A PC-tethered headset offloads all rendering and processing to a powerful external PC, which allows for higher-fidelity graphics but restricts movement due to the physical cable.

VR's strength lies in creating complete immersion in a purely digital environment, replacing the user's real-world surroundings. This is ideal for simulations and training where the real-world context is not needed or is dangerous. The other scenarios describe enhancing the real world with digital information, which is the primary use case for AR.

This demonstrates JavaScript's type coercion. When the + operator is used and one of the operands is a string, JavaScript converts the other operand (the number 20) to a string ('20') and concatenates them, resulting in the string '1020'.

Wireframing is an early step in the design process. It deliberately omits visual details like colors and fonts to focus solely on the 'bones' of the interface. This allows designers and stakeholders to agree on the structure and user flow before investing time in high-fidelity visual design and development.

After a successful DELETE request, the server should respond with a success status code. 200 OK is acceptable if a confirmation message is returned in the body. 204 No Content is often preferred as it indicates success but signifies that there is no response body to return, which is efficient for a deletion action.

Backend frameworks provide an abstraction layer over the raw programming language. They handle boilerplate code for tasks like parsing incoming HTTP requests, routing them to the correct controller functions, and simplifying database operations, allowing developers to focus on the application's specific business logic.

Component-based architecture is a core principle of modern frontend frameworks. It involves building complex UIs by composing simple, self-contained components (like a button, a search bar, or a user profile card). This approach promotes reusability, easier maintenance, and better organization of the codebase.

The DOMContentLoaded event fires once the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The load event, however, fires only after the whole page and all of its dependent resources (like images and CSS) have completely loaded. For a function that might depend on the dimensions of an image, load is the appropriate choice.

SSR sends a fully rendered HTML page from the server, which is great for fast initial load (First Contentful Paint) and SEO crawlers. Hydration then attaches the JavaScript event listeners on the client-side, turning the static page into a fully interactive SPA. CSR with code-splitting helps with load time but doesn't solve the core SEO issue as well as SSR. SSG is excellent for SEO/speed but is unsuitable for highly dynamic content. Web Workers improve runtime performance but don't affect initial load or SEO.

The grid algorithm evaluates if the container can fit at least one more item of the minimum size. The available space is 550px. The minimum size for the first item is 250px. Remaining space: 550 - 250 = 300px. The space needed for the next item and its preceding gap is 20px + 250px = 270px. Since 300px >= 270px, a second column is created. The premise of the question describes an unexpected behavior, but the most plausible misunderstanding leading to this diagnostic question is how the total space is calculated. However, the most technically accurate analysis points to the interplay of auto-fit and minmax. The correct logic is: can another 250px track fit? Yes. Total min space is 250px + 20px + 250px = 520px, which is less than 550px. The error is likely due to a subtle interaction, perhaps with box-sizing on the items if they have padding, which would push the total required width over 550px, causing only one column to be rendered. Option D is the most analytical breakdown, though the provided scenario points to a bug or a missing piece of information like box-sizing.

'Read-your-writes' is a consistency model designed specifically for this scenario. It ensures that once a user has written data, any subsequent reads from that same user are guaranteed to see that write. Pinning their session to the primary DB is a common implementation. Caching can still serve stale data, eventual consistency accepts the problem rather than solving it, and changing isolation levels is irrelevant to replication lag.

Asynchronous Timewarp (ATW) is a critical technique in VR rendering. It operates independently of the main rendering loop. If a new frame isn't ready in time, ATW takes the last rendered frame, and based on the most recent head-tracking data, it warps or shifts the image to match the user's new orientation. This dramatically reduces perceived latency, even if the application drops frames. Foveated rendering and SPS optimize rendering performance, but ATW specifically targets motion-to-photon latency.

This question tests a deep understanding of the JavaScript Event Loop. The execution order is: 1. All synchronous code in the call stack (console.log('A'), console.log('D')). 2. All tasks in the Microtask Queue (callbacks from Promise.then/catch/finally). 3. One task from the Macrotask (or Callback) Queue (setTimeout, setInterval callbacks). setTimeout(..., 0) doesn't execute immediately but places its callback in the Macrotask Queue. Promise.resolve().then() places its callback in the Microtask Queue. The Microtask Queue always has priority and is fully cleared before the next Macrotask is processed.

While all other candidates have valuable skills, Candidate B demonstrates a holistic, data-driven, and business-oriented approach which is the hallmark of a senior UI/UX professional. Senior-level work is not just about creating beautiful interfaces (A), coding them (C), or systematizing them (D), but about a repeatable, evidence-based process that demonstrably solves user problems and achieves business goals. This synthesis of research, design, testing, and business impact is the most critical skillset.

Soft delete is generally the most robust and safest strategy for complex systems. It preserves data integrity and history, prevents accidental permanent data loss, and avoids the performance issues and potential for deadlocks that can arise from cascading deletes in a high-concurrency environment. ON DELETE CASCADE is powerful but can lead to unintentional mass deletions. Deleting in application logic is prone to errors if new dependencies are added and the logic isn't updated. Forcing the client to handle it (Option D) creates a poor user experience and complex client-side logic.

The mobile-first methodology involves writing default CSS for the smallest screens and then using min-width media queries to add or override styles as the viewport width increases. This approach avoids having to undo mobile styles on larger screens, leading to cleaner and more efficient CSS. Using max-width is characteristic of the desktop-first (graceful degradation) approach. The other options are either syntactically incorrect or not suitable for defining standard breakpoints.

This is the most robust implementation. It correctly uses async/await within a try/catch block. Critically, when an error occurs during the async operation, it calls next(err). This passes the error to Express's dedicated error-handling middleware, which is the standard and most maintainable pattern. Option A doesn't handle failures. Option B works but mixes .then/.catch with middleware logic and doesn't use the standard error-handling next(err). Option D will crash the server because throwing an error in non-async middleware is not caught by Express's error handlers.

This is a classic performance issue in React. When a parent re-renders, it re-evaluates its render function. If an object is defined inline as a prop (<Child data={{...}} />), a new object with a new memory address is created each time. Even if React.memo or PureComponent is used on the child, its shallow prop comparison will see a different object reference and trigger a re-render. The useMemo hook in the parent component ensures that the same object reference is returned as long as its dependencies haven't changed, thus preventing the unnecessary re-render of the child.

Fitts's Law implies that to decrease the time () to hit a target, you should decrease the distance () or increase the target's width (). Placing the CTA at the screen edge (like the corners or top/bottom edges) makes the effective width () infinitely large in one dimension, because the user cannot 'overshoot' it. This makes it extremely fast to acquire. Increasing the button's size and placing it in a conventional corner are direct applications of the law. While placing it in the center minimizes average distance, corners are often faster to hit due to the 'infinite edge' effect. A following button would be highly distracting.

SLAM is the core technology that allows a device to build a map of an unknown environment while simultaneously keeping track of its own location within that map. For AR, the phone's camera and motion sensors (IMU) work together. The SLAM algorithm identifies stable feature points (like corners on a floor pattern), tracks their movement between frames to understand the phone's motion (ego-motion), and builds a 3D point cloud of the environment. From this point cloud, it can infer geometric planes, such as floors and tabletops, enabling the stable placement of virtual objects.

Let's break down the correct selector: .container > p correctly selects a <p> tag that is an immediate child of .container. The space after p (p a) is a descendant selector, selecting any <a> tag inside that <p>. Finally, :nth-of-type(2) selects the second element of its type (the second <a>) within its parent (<p>). Option B is incorrect because :nth-child(2) would fail if the second child of <p> was not an <a> tag (e.g., <p><span>text</span><a>link</a></p>). Option C is too strict; p > a would require <a> to be an immediate child, which might not be the case (e.g., <p><b><a>link</a></b></p>). Option A is the most robust choice that meets all requirements.

This describes the Domain Name System (DNS) resolution process. The browser (or the OS on its behalf) acts as a DNS client. If the IP address is not cached locally, it will contact a recursive resolver (often provided by the ISP). This resolver then performs the queries: first to a root server to find the .com Top-Level Domain (TLD) server, then to the TLD server to find the authoritative name server for example.com, and finally querying that authoritative server to get the actual IP address. The other options happen after the IP address is known.

The combination of cookie attributes provides robust, built-in browser security. HttpOnly prevents JavaScript from accessing the cookie, mitigating XSS attacks. Secure ensures the cookie is only sent over HTTPS. SameSite=Strict is the key for CSRF protection; it prevents the browser from sending the cookie with any cross-site requests, which is the very definition of a CSRF attack. JWT in localStorage is vulnerable to XSS and requires manual attachment to headers. Basic Auth is insecure. Session ID in localStorage is also vulnerable to XSS.

This is the fundamental distinction. Virtual Reality (VR) immerses the user in a fully artificial digital environment, occluding the real world. Augmented Reality (AR) enhances or 'augments' the user's view of their actual physical surroundings with computer-generated information. Therefore, a VR metaverse involves creating entire virtual worlds, while an AR metaverse (or 'magicverse') would involve creating a persistent digital layer over our physical world. The other options are generalizations that are not universally true; both can require powerful hardware, have diverse applications, and use various tracking methods.

This approach, known as denormalization with a counter cache, offers the best of both worlds for scalability. The separate likes table (Option C) is fully normalized and essential for tracking who liked what. However, calculating the like count for a post with millions of likes via COUNT(*) on this table for every view is extremely inefficient. By adding a denormalized likes_count column to the posts table, read operations (the most common operation) become trivial and fast. The count is kept in sync via a trigger or application logic upon insert/delete in the likes table. This balances write overhead with massive read performance gains.

The core performance benefit of the virtual DOM comes from minimizing direct manipulation of the actual browser DOM, which is a slow and expensive operation. By creating a lightweight copy in memory (a JavaScript object), frameworks can compute changes very quickly. The 'diffing' (reconciliation) algorithm efficiently finds the differences between the old and new virtual DOMs. The framework then batches these changes and applies only the necessary updates to the real DOM, avoiding unnecessary rendering work and improving the application's performance and responsiveness.

This represents the most mature and collaborative workflow. The user interface is the visual representation of the application's state. The API is the contract that defines how that state is fetched and manipulated. When the designer understands what data is available, what states are possible (loading, error, empty, ideal), and the developer understands the user's journey and what data is needed at each step, they can co-create an efficient, robust, and user-friendly product. This collaboration prevents scenarios where the design is impossible to build or the backend doesn't support the required user experience.

The primary advantage of AR in this context is its ability to deliver information at the point of need, directly within the user's field of view. A technician doesn't have to constantly look away from the equipment to consult a manual or a separate screen (context-switching). This reduces the mental effort (cognitive load) required to map 2D instructions to a 3D object, leading to faster completion times, lower error rates, and improved safety. The other options are incorrect: AR assists technicians, not replaces them; it reduces but cannot guarantee elimination of errors; and industrial AR hardware is often expensive.