reading-notes

Video and Audio Content

1. Evolution of Web Media

Since the early 2000s, the ability to use video and audio on the web has moved from proprietary plugin-based technologies to native HTML solutions. Initially, media playback was only possible through plugins like Flash and Silverlight, which suffered from security and accessibility issues and are now obsolete. Today, the native <video> and <audio> elements, supported by JavaScript APIs, allow for built-in media handling directly within the browser.

2. The src and controls Attributes

src (source): This attribute functions similarly to the src attribute in an <img> tag; it contains the path to the video or audio file you wish to embed.
controls: This attribute is essential for accessibility, particularly for users with conditions like epilepsy. It provides the browser’s native interface, allowing users to start, stop, and adjust the volume of the media.

3. Importance of Fallback Content

Fallback content is the text or markup placed inside the <video> or <audio> tags. It is crucial because it is displayed only if the browser does not support the element. By including a paragraph with a direct link to the media file, developers ensure that users on older browsers can still access the content.

4. A Very Short Story: The Media Duo

Once, in a quiet <div> on a bustling webpage, lived <audio> and <video>. <audio> was humble, taking up very little space because he had no visual component to show off. <video>, however, was a bit of a show-off, often demanding a specific width and height and occasionally wearing a fancy poster image to impress visitors before he even started speaking. One day, a visitor arrived using a very old browser. <video> and <audio> both froze, unable to appear. Luckily, they had left a Fallback Paragraph behind, who stepped forward and handed the visitor a direct link, ensuring the story could still be heard and seen.

A Complete Guide To Grid

1. Grid vs. Flexbox

While both are powerful layout tools, CSS Flexbox is one-dimensional, focusing on either a row or a column. In contrast, CSS Grid is a two-dimensional system, allowing developers to control both rows and columns simultaneously. Grid was the first CSS module specifically created to solve layout problems that developers previously bypassed with “hacks” like floats or tables.

2. Key Grid Terms

Grid Container: This is the element where display: grid is applied. It serves as the direct parent for all grid items.
Grid Item: These are the direct children (descendants) of the grid container.
Grid Line: These are the dividing lines (horizontal or vertical) that create the structure of the grid, residing on either side of a row or column.

Responsive Images

1. Reasons for Responsive Images Beyond visual appeal, making images responsive is vital for performance and bandwidth conservation. Large images intended for desktops waste a mobile user’s data, while small images can look grainy if scaled up. Responsive images also solve the “art direction problem,” where a developer might want to show a cropped, zoomed-in version of an image on small screens to keep important details visible.

2. Defining srcset and sizes

srcset: Defines a list of available image files and their intrinsic widths (using the w unit).
sizes: Provides media conditions (like screen width) and hints to the browser about which slot size the image will fill when those conditions are met.

Example Usage:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

In this example, if the viewport is 600px or less, the browser chooses the 480px slot and loads the 480w image.

3. Advantage over CSS or JavaScript

The srcset attribute is more effective because browsers “preload” images before they even begin to parse CSS or JavaScript. If a developer used JavaScript to change an image source based on screen width, the browser would have already started downloading the original large image by the time the script ran, resulting in wasted bandwidth.