MDN Web Docs Content

Web developers use different elements to embed various types of content into a webpage:

• <iframe>: Used for embedding other web pages (e.g., YouTube videos, Google Maps).
• <embed>: Used to embed external resources, such as PDF files.
• <object>: Used to embed external resources, such as PDF files (historically also used for plugins like Flash or Java Applets).

The web platform provides several ways to handle graphics:

• SVG (Scalable Vector Graphics): A markup language for vector-based images that can be manipulated via CSS and JavaScript.
• Canvas API: An API for drawing on HTML <canvas> elements, primarily used for 2D animations, games, and data visualizations.
• WebGL: A standard for creating high-performance 3D graphics within the browser.

While SVG is excellent for vector graphics, the Canvas API is better suited for bitmap-based animations and complex real-time rendering.

Screen readers are assistive technology (AT) software that reads webpage content aloud, enabling users without sight to navigate the web. They rely on the accessibility tree—a representation of the page's content exposed by the browser that provides semantic information (e.g., element roles like 'button' or 'input', names, descriptions, and states).

To ensure compatibility, developers should use semantic HTML correctly; incorrect markup can confuse screen reader users by providing wrong information about an element's purpose or state.

The Window Management API provides robust, flexible window management by allowing applications to query detailed information about all connected displays. Unlike the standard Window.screen property, which only returns data for the primary screen, this API enables developers to:

• Detect if a device has multiple screens using Screen.isExtended.
• Access detailed information for every available screen via ScreenDetails and ScreenDetailed interfaces.
• Place windows on specific screens with precision.
• Respond to changes in available screens via the change event.
• Specify which screen an element should enter fullscreen mode on using the screen option in Element.requestFullscreen().

This API is particularly useful for multi-window applications like graphics editors, virtual trading desks, or slideshow apps that need to manage content across different displays.

The case study utilizes the following tools to build and deploy a mini-site:

• JSX: Syntax extensions for defining component structures within JavaScript.
• Modern JavaScript: Utilizing features like import statements.
• Prettier: A tool for code formatting.
• ESLint: A tool for code linting.
• PostCSS: Provides CSS nesting capabilities.
• Vite: A build tool used to build, minify code, and automate configuration file generation.
• GitHub: Used for source code control and deployment via GitHub Pages.

WebGL is a low-level API based on OpenGL that allows direct communication with the computer's GPU to render 3D graphics on a <canvas> element. Because raw WebGL is complex and similar to low-level languages like C++, it is common practice to use third-party JavaScript libraries to handle the heavy lifting.

Popular libraries include:

• Three.js: One of the most popular high-level libraries.
• PlayCanvas: A web-based game engine.
• Babylon.js: A powerful 3D engine for web browsers.

Express is an unopinionated, minimalist web framework for Node.js. It provides mechanisms to handle common web development tasks that are not natively supported by Node.js alone.

Key Features:

• Routing: Write handlers for requests using different HTTP verbs (e.g., GET, POST, DELETE) at specific URL paths.
• View Engines: Integrate with rendering engines to generate dynamic responses by inserting data into templates.
• Application Settings: Configure common settings such as the connection port and template locations.
• Middleware: Add request processing logic at any point within the request handling pipeline. Because Express is unopinionated, you can use a wide variety of compatible middleware for cookies, sessions, user logins, URL parameters, and more.

DOM events are notifications fired to inform code of "interesting changes" that may affect execution. These changes can stem from:

• User interactions: Such as mouse movements, clicks, or resizing a window.
• Environment state changes: Such as low battery notifications or media events from the operating system.
• Other causes: Programmatic triggers or system-level changes.

Every event is represented by an object based on the Event interface. Specific events may include additional custom fields or functions to provide context about the occurrence. To find specific event details, refer to the documentation for that event type, which includes a link to its associated event interface.

When building web applications, it is important to understand the relationship between these tools:

• JavaScript: The high-level scripting language used to implement functionality.
• Browser APIs: Constructs built into the browser that sit on top of the JavaScript language.
• Third-party APIs: Constructs from external platforms (like Disqus or Facebook) used to access their specific functionality.
• JavaScript libraries: Files containing custom functions (e.g., jQuery, React) that you call to enable common functionality. The developer is in control.
• JavaScript frameworks: Packages of HTML, CSS, and JavaScript (e.g., Angular, Ember) used to build entire applications. They use Inversion of Control, meaning the framework calls the developer's code.

A standard Vite-generated React project contains the following key files and directories:

• index.html: The main entry point. Vite injects your code into this file. You can modify the <title> element here for accessibility.
• public/: Contains static assets (like vite.svg) that are served directly without processing by Vite's build tooling.
• src/: The primary directory for application source code.
  • .jsx files: Files containing JSX syntax. The .jsx extension is required so Vite can transform JSX into standard JavaScript.
  • assets/: Directory for images and other assets used within your components.
• package.json & package-lock.json: Project metadata and dependency lockfiles managed by npm.
• vite.config.js: Configuration file for Vite.

React is a library for building user interfaces using self-contained, logical pieces of code called components. While React can be used for small parts of an interface, it is most effective when used to build entire applications.

React uses JSX (JavaScript XML), a syntax extension that allows HTML-like code to live alongside JavaScript. Because browsers cannot read JSX directly, it must be compiled into standard JavaScript (typically using tools like Babel or Parcel) into React.createElement() calls.

Example of a JSX expression:

const heading = <h1>Mozilla Developer Network</h1>;