DOCSEARCHbyAlgolia
Submit Docs

Aria's Web Development Documentation

website·Indexed 30 days ago

https://ariadocusauruswed.netlify.app/

A collection of web development guides and exercises covering JavaScript loops and arrays, React internals such as the Scheduler and Batch Updates, Next.js App Router (Server and Client Components), and CSS styling topics including Tailwind CSS, styled-components, and layout properties like position and white-space.

Tokens
384.3K
Snippets
1.4K
Records
2.3K
Agent score
74%

What's inside Aria Documentation

  1. Overview of Tailwind CSS, PostCSS, and Autoprefixer

    Tailwind CSS is a utility-first CSS framework that allows rapid styling using predefined classes (e.g., bg-blue-500 for background color, p-4 for padding). To transform Tailwind's source code into final CSS, it relies on two key tools:

    1. PostCSS: A JavaScript-based tool that acts as a processor for CSS. It uses plugins to transform, optimize, and enhance CSS files. Tailwind CSS uses PostCSS to compile its styles.
    2. Autoprefixer: A PostCSS plugin that automatically adds vendor prefixes (e.g., -webkit-, -moz-) to CSS properties to ensure cross-browser compatibility.

  2. Introduction to Unit testing with Vitest

    Vitest is a unit testing framework developed by the Vite team, optimized for modern frontend frameworks like Vue and React. Unlike E2E tests, Vitest tests individual 'parts' or functions of the code in isolation without needing a browser, making it extremely fast. It features seamless integration with Vite, native TypeScript support, a syntax similar to Jest, and a visual UI for test results.
    // Example: Testing a discount calculation function
import { describe, it, expect } from 'vitest';
import { calculateDiscount } from './discount';

describe('calculateDiscount', () => {
  it('should apply 10% discount for purchases over 1000', () => {
    const result = calculateDiscount(1200);
    expect(result).toBe(1080); // 1200 * 0.9 = 1080
  });

  it('should not discount for purchases under 1000', () => {
    const result = calculateDiscount(800);
    expect(result).toBe(800);
  });

  it('should return 0 when purchase is 0', () => {
    const result = calculateDiscount(0);
    expect(result).toBe(0);
  });
});

  3. Introduction to the Lane Model for Task Prioritization

    To manage task priorities efficiently, React uses the Lane Model instead of simple numeric expiration times. The Lane Model addresses three core technical challenges: representing priorities, performing high-speed priority comparisons within the render loop, and preventing 'starvation' (where a low-priority task is perpetually delayed by higher-priority ones). The Lane Model is implemented using 32-bit integers and Bitmask (bitwise operations) to categorize, merge, and schedule tasks with maximum performance.

  4. Overview of Sass and SCSS

    Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that allows developers to write structured and maintainable styles using features like variables, nested rules, and mixins. The code is compiled into standard CSS for browser use. There are two primary syntaxes:

    1. SCSS: Similar to CSS syntax, using curly braces {} and semicolons ;. It is highly compatible with CSS and easier for most developers to adopt.
    2. Sass: An indented syntax that omits curly braces and semicolons for a more concise format.

  5. Introduction to End-to-End (E2E) testing with Playwright

    Playwright is a framework developed by Microsoft for End-to-End (E2E) testing. It simulates real user behavior by automating a browser to perform actions like clicking buttons, filling forms, and navigating pages to ensure the entire application flow works as expected. It supports multiple browsers (Chrome, Firefox, Safari/WebKit), cross-platform execution (Windows, Mac, Linux), and multiple languages (JS, TS, Python, Java, C#). It also provides debugging features like automatic screenshots and video recording on failure.
    // Example: Testing a login flow
import { test, expect } from '@playwright/test';

test('user can login successfully', async ({ page }) => {
  // Navigate to login page
  await page.goto('https://mywebsite.com/login');

  // Fill in credentials
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'mypassword');

  // Click submit
  await page.click('button[type="submit"]');

  // Verify redirection and welcome text
  await expect(page).toHaveURL('https://mywebsite.com/home');
  await expect(page.locator('h1')).toContainText('歡迎回來');
});

  6. Overview of CSS selector types

    CSS selectors are used to target HTML elements for styling. They are categorized into several types:

    • Basic Selectors: Element, Class (.), and ID (#).
    • Combinators: Descendant, Child (>), and Sibling selectors.
    • Attribute Selectors: Target elements based on the presence or value of a specific attribute.
    • Pseudo-classes: Target elements in a specific state (e.g., :hover).
    • Pseudo-elements: Target specific parts of an element (e.g., ::before).

  7. Overview of HTTP methods for API interaction

    When interacting with backend APIs, different HTTP methods are used depending on the desired action:

    • GET: Retrieve resources (e.g., fetching a single record, a list, or a file). Most common for queries.
    • POST: Send data to the server to create a new resource.
    • PUT: Update an existing resource by replacing its entire content.
    • PATCH: Partially update a resource by modifying only specific fields.
    • DELETE: Remove a resource from the server.
    • OPTIONS: Query which HTTP methods the server supports (commonly used for CORS preflight requests).
    • HEAD: Similar to GET but returns only headers without the response body; used to check resource existence or metadata.

  8. Overview of IndexedDB for client-side storage

    IndexedDB is a built-in NoSQL database in the browser designed for storing large amounts of structured data on the client-side. Unlike localStorage or sessionStorage, it offers:

    • Large Capacity: Supports MB to GB levels of data (depending on the browser).
    • Structured Storage: Supports storing Objects directly, not limited to strings.
    • Indexing: Ability to create indexes for fast data retrieval.
    • Asynchronous API: Prevents UI blocking.
    • Transaction Mechanism: Ensures atomicity of operations.

    It is ideal for Progressive Web Apps (PWAs), caching API responses, and projects requiring significant local data storage.

  9. Introduction to styled-components for React

    styled-components is a library that allows developers to define styled React components using JavaScript. It utilizes Tagged Template Literals to embed CSS styles directly within JavaScript code, binding styles to specific components. This approach ensures a tight coupling between styles and components, avoiding the common pitfalls of traditional CSS (such as global namespace collisions).

  10. Overview of CSS measurement and time units

    CSS units are categorized based on their behavior and application:

    • Absolute Units (px, cm, mm, in, pt, pc, Q): Best for fixed dimensions or print layouts.
    • Relative Units (%, vw, vh, vmin, vmax, rem, em, ch, ex): Best for responsive design.
    • Time Units (s, ms): Used for animations and transitions.
    • Other Units (fr, deg, rad, turn): Used for CSS Grid layouts or rotations.
    • Global Keywords (inherit, initial, unset, revert, auto): Used to control how property values are applied.

  11. Overview of SWR (Stale-While-Revalidate)

    SWR is a React Hooks library developed by Vercel for data fetching. It implements the 'Stale-While-Revalidate' strategy: it immediately displays cached (stale) data while fetching updated data in the background to ensure the UI feels fast and stays current. It simplifies data fetching by automating caching, background updates, global cache sharing, and loading/error state management.