mirror of
https://github.com/github/awesome-copilot.git
synced 2026-05-27 17:11:44 +00:00
Removing legacy skills (#1756)
* Removing some legacy skills * removing skill from plugin
This commit is contained in:
Aaron Powell
GitHub
@@ -140,7 +140,7 @@
|
||||
"name": "cms-development",
|
||||
"source": "cms-development",
|
||||
"description": "Skills for CMS development across themes, plugins, admin tooling, media workflows, markdown rendering, and static export pipelines.",
|
||||
"version": "1.0.0"
|
||||
"version": "1.1.0"
|
||||
},
|
||||
{
|
||||
"name": "context-engineering",
|
||||
|
||||
@@ -33,7 +33,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-plugins) for guidelines on how t
|
||||
| [azure-cloud-development](../plugins/azure-cloud-development/README.md) | Comprehensive Azure cloud development tools including Infrastructure as Code, serverless functions, architecture patterns, and cost optimization for building scalable cloud applications. | 11 items | azure, cloud, infrastructure, bicep, terraform, serverless, architecture, devops |
|
||||
| [cast-imaging](../plugins/cast-imaging/README.md) | A comprehensive collection of specialized agents for software analysis, impact assessment, structural quality advisories, and architectural review using CAST Imaging. | 3 items | cast-imaging, software-analysis, architecture, quality, impact-analysis, devops |
|
||||
| [clojure-interactive-programming](../plugins/clojure-interactive-programming/README.md) | Tools for REPL-first Clojure workflows featuring Clojure instructions, the interactive programming chat mode and supporting guidance. | 2 items | clojure, repl, interactive-programming |
|
||||
| [cms-development](../plugins/cms-development/README.md) | Skills for CMS development across themes, plugins, admin tooling, media workflows, markdown rendering, and static export pipelines. | 4 items | cms, content-management-system, wordpress, shopify, drupal, theme, plugin, media, static-site |
|
||||
| [cms-development](../plugins/cms-development/README.md) | Skills for CMS development across themes, plugins, admin tooling, media workflows, markdown rendering, and static export pipelines. | 3 items | cms, content-management-system, wordpress, shopify, drupal, theme, plugin, media, static-site |
|
||||
| [context-engineering](../plugins/context-engineering/README.md) | Tools and techniques for maximizing GitHub Copilot effectiveness through better context management. Includes guidelines for structuring code, an agent for planning multi-file changes, and prompts for context-aware development. | 4 items | context, productivity, refactoring, best-practices, architecture |
|
||||
| [context-matic](../plugins/context-matic/README.md) | Coding agents hallucinate APIs. ContextMatic gives them curated, versioned API and SDK docs. Ask your agent to "integrate the payments API" and it guesses — falling back on outdated training data and generic patterns that don't match your actual SDK. ContextMatic solves this by giving the agent deterministic, version-aware, SDK-native context at the exact moment it's needed. | 2 items | api-context, api-integration, mcp, sdk, apimatic, third-party-apis, sdks |
|
||||
| [copilot-sdk](../plugins/copilot-sdk/README.md) | Build applications with the GitHub Copilot SDK across multiple programming languages. Includes comprehensive instructions for C#, Go, Node.js/TypeScript, and Python to help you create AI-powered applications. | 1 items | copilot-sdk, sdk, csharp, go, nodejs, typescript, python, ai, github-copilot |
|
||||
|
||||
@@ -107,7 +107,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
|
||||
| [create-github-issue-feature-from-specification](../skills/create-github-issue-feature-from-specification/SKILL.md)<br />`gh skills install github/awesome-copilot create-github-issue-feature-from-specification` | Create GitHub Issue for feature request from specification file using feature_request.yml template. | None |
|
||||
| [create-github-issues-feature-from-implementation-plan](../skills/create-github-issues-feature-from-implementation-plan/SKILL.md)<br />`gh skills install github/awesome-copilot create-github-issues-feature-from-implementation-plan` | Create GitHub Issues from implementation plan phases using feature_request.yml or chore_request.yml templates. | None |
|
||||
| [create-github-issues-for-unmet-specification-requirements](../skills/create-github-issues-for-unmet-specification-requirements/SKILL.md)<br />`gh skills install github/awesome-copilot create-github-issues-for-unmet-specification-requirements` | Create GitHub Issues for unimplemented requirements from specification files using feature_request.yml template. | None |
|
||||
| [create-github-pull-request-from-specification](../skills/create-github-pull-request-from-specification/SKILL.md)<br />`gh skills install github/awesome-copilot create-github-pull-request-from-specification` | Create GitHub Pull Request for feature request from specification file using pull_request_template.md template. | None |
|
||||
| [create-implementation-plan](../skills/create-implementation-plan/SKILL.md)<br />`gh skills install github/awesome-copilot create-implementation-plan` | Create a new implementation plan file for new features, refactoring existing code or upgrading packages, design, architecture or infrastructure. | None |
|
||||
| [create-llms](../skills/create-llms/SKILL.md)<br />`gh skills install github/awesome-copilot create-llms` | Create an llms.txt file from scratch based on repository structure following the llms.txt specification at https://llmstxt.org/ | None |
|
||||
| [create-readme](../skills/create-readme/SKILL.md)<br />`gh skills install github/awesome-copilot create-readme` | Create a README.md file for the project | None |
|
||||
@@ -213,7 +212,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
|
||||
| [linkedin-post-formatter](../skills/linkedin-post-formatter/SKILL.md)<br />`gh skills install github/awesome-copilot linkedin-post-formatter` | Format and draft compelling LinkedIn posts using Unicode bold/italic styling, visual separators, structured sections, and engagement-optimized patterns. USE FOR: draft LinkedIn post, format text for LinkedIn, create social media post, write thought leadership post, convert content to LinkedIn format, LinkedIn carousel text, Unicode bold italic formatting. | `references/unicode-charmap.md` |
|
||||
| [lsp-setup](../skills/lsp-setup/SKILL.md)<br />`gh skills install github/awesome-copilot lsp-setup` | Enable code intelligence (go-to-definition, find-references, hover, type info) for any programming language by installing and configuring an LSP server for Copilot CLI. Detects the OS, installs the right server, and generates the JSON configuration (user-level or repo-level). Use when you need deeper code understanding and no LSP server is configured, or when the user asks to set up, install, or configure an LSP server. | `references/lsp-servers.md` |
|
||||
| [make-repo-contribution](../skills/make-repo-contribution/SKILL.md)<br />`gh skills install github/awesome-copilot make-repo-contribution` | All changes to code must follow the guidance documented in the repository. Before any issue is filed, branch is made, commits generated, or pull request (or PR) created, a search must be done to ensure the right steps are followed. Whenever asked to create an issue, commit messages, to push code, or create a PR, use this skill so everything is done correctly. | `assets/issue-template.md`<br />`assets/pr-template.md` |
|
||||
| [make-skill-template](../skills/make-skill-template/SKILL.md)<br />`gh skills install github/awesome-copilot make-skill-template` | Create new Agent Skills for GitHub Copilot from prompts or by duplicating this template. Use when asked to "create a skill", "make a new skill", "scaffold a skill", or when building specialized AI capabilities with bundled resources. Generates SKILL.md files with proper frontmatter, directory structure, and optional scripts/references/assets folders. | None |
|
||||
| [markdown-to-html](../skills/markdown-to-html/SKILL.md)<br />`gh skills install github/awesome-copilot markdown-to-html` | Convert Markdown files to HTML similar to `marked.js`, `pandoc`, `gomarkdown/markdown`, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like `jekyll/jekyll`, `gohugoio/hugo`, or similar web templating systems that utilize markdown documents, converting them to html. Use when asked to "convert markdown to html", "transform md to html", "render markdown", "generate html from markdown", or when working with .md files and/or web a templating system that converts markdown to HTML output. Supports CLI and Node.js workflows with GFM, CommonMark, and standard Markdown flavors. | `references/basic-markdown-to-html.md`<br />`references/basic-markdown.md`<br />`references/code-blocks-to-html.md`<br />`references/code-blocks.md`<br />`references/collapsed-sections-to-html.md`<br />`references/collapsed-sections.md`<br />`references/gomarkdown.md`<br />`references/hugo.md`<br />`references/jekyll.md`<br />`references/marked.md`<br />`references/pandoc.md`<br />`references/tables-to-html.md`<br />`references/tables.md`<br />`references/writing-mathematical-expressions-to-html.md`<br />`references/writing-mathematical-expressions.md` |
|
||||
| [mcp-cli](../skills/mcp-cli/SKILL.md)<br />`gh skills install github/awesome-copilot mcp-cli` | Interface for MCP (Model Context Protocol) servers via CLI. Use when you need to interact with external tools, APIs, or data sources through MCP servers, list available MCP servers/tools, or call MCP tools from command line. | None |
|
||||
| [mcp-copilot-studio-server-generator](../skills/mcp-copilot-studio-server-generator/SKILL.md)<br />`gh skills install github/awesome-copilot mcp-copilot-studio-server-generator` | Generate a complete MCP server implementation optimized for Copilot Studio integration with proper schema constraints and streamable HTTP support | None |
|
||||
@@ -233,15 +231,12 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
|
||||
| [minecraft-plugin-development](../skills/minecraft-plugin-development/SKILL.md)<br />`gh skills install github/awesome-copilot minecraft-plugin-development` | Use this skill when building or modifying Minecraft server plugins for Paper, Spigot, or Bukkit, including plugin.yml setup, commands, listeners, schedulers, player state, team or arena systems, persistent progression, economy or profile data, configuration files, Adventure text, and version-safe API usage. Trigger for requests like "build a Minecraft plugin", "add a Paper command", "fix a Bukkit listener", "create plugin.yml", "implement a minigame mechanic", "add a perk or quest system", or "debug server plugin behavior". | `references/bootstrap-registration.md`<br />`references/build-test-and-runtime-validation.md`<br />`references/config-data-and-async.md`<br />`references/maps-heroes-and-feature-modules.md`<br />`references/minigame-instance-flow.md`<br />`references/persistent-progression-and-events.md`<br />`references/project-patterns.md`<br />`references/state-sessions-and-phases.md` |
|
||||
| [mini-context-graph](../skills/mini-context-graph/SKILL.md)<br />`gh skills install github/awesome-copilot mini-context-graph` | A persistent, compounding knowledge base combining Karpathy's LLM Wiki pattern<br />with a structured knowledge graph. Ingest documents once — the LLM writes wiki<br />pages, extracts entities/relations into the graph, and stores raw content for<br />evidence retrieval. Knowledge accumulates and cross-references; it is never<br />re-derived from scratch. | `references/ingestion.md`<br />`references/lint.md`<br />`references/ontology.md`<br />`references/retrieval.md`<br />`scripts/config.py`<br />`scripts/contextgraph.py`<br />`scripts/template_agent_workflow.py`<br />`scripts/tools` |
|
||||
| [mkdocs-translations](../skills/mkdocs-translations/SKILL.md)<br />`gh skills install github/awesome-copilot mkdocs-translations` | Generate a language translation for a mkdocs documentation stack. | None |
|
||||
| [model-recommendation](../skills/model-recommendation/SKILL.md)<br />`gh skills install github/awesome-copilot model-recommendation` | Analyze chatmode or prompt files and recommend optimal AI models based on task complexity, required capabilities, and cost-efficiency | None |
|
||||
| [msgraph-sdk](../skills/msgraph-sdk/SKILL.md)<br />`gh skills install github/awesome-copilot msgraph-sdk` | Integrate Microsoft Graph SDK into any project — .NET, TypeScript/JavaScript, or Python. Covers auth patterns (client credentials, OBO, managed identity), SDK setup, calling Graph APIs, batching, delta queries, change notifications, throttling, and permission scopes. Use when accessing Microsoft 365 data (users, mail, calendar, Teams, files, SharePoint) from any application type. | `references/dotnet.md`<br />`references/python.md`<br />`references/typescript.md` |
|
||||
| [msstore-cli](../skills/msstore-cli/SKILL.md)<br />`gh skills install github/awesome-copilot msstore-cli` | Microsoft Store Developer CLI (msstore) for publishing Windows applications to the Microsoft Store. Use when asked to configure Store credentials, list Store apps, check submission status, publish submissions, manage package flights, set up CI/CD for Store publishing, or integrate with Partner Center. Supports Windows App SDK/WinUI, UWP, .NET MAUI, Flutter, Electron, React Native, and PWA applications. | None |
|
||||
| [multi-stage-dockerfile](../skills/multi-stage-dockerfile/SKILL.md)<br />`gh skills install github/awesome-copilot multi-stage-dockerfile` | Create optimized multi-stage Dockerfiles for any language or framework | None |
|
||||
| [mvvm-toolkit](../skills/mvvm-toolkit/SKILL.md)<br />`gh skills install github/awesome-copilot mvvm-toolkit` | CommunityToolkit.Mvvm (the MVVM Toolkit) core: source generators ([ObservableProperty], [RelayCommand], [NotifyPropertyChangedFor], [NotifyCanExecuteChangedFor], [NotifyDataErrorInfo]), base classes (ObservableObject / ObservableValidator / ObservableRecipient), commands (RelayCommand / AsyncRelayCommand), and validation. Companion skills: mvvm-toolkit-messenger for pub/sub, mvvm-toolkit-di for Microsoft.Extensions.DependencyInjection wiring. Works across WPF, WinUI 3, MAUI, Uno, and Avalonia. | `references/end-to-end-walkthrough.md`<br />`references/relaycommand-cookbook.md`<br />`references/source-generators.md`<br />`references/troubleshooting.md`<br />`references/validation.md` |
|
||||
| [mvvm-toolkit-di](../skills/mvvm-toolkit-di/SKILL.md)<br />`gh skills install github/awesome-copilot mvvm-toolkit-di` | Wire CommunityToolkit.Mvvm ViewModels into Microsoft.Extensions.DependencyInjection. Covers the .NET Generic Host composition root, constructor injection, service lifetimes (Singleton / Transient / Scoped), IMessenger registration, resolving ViewModels in Views, keyed services, testing seams, and the legacy Ioc.Default escape hatch. Use across WPF, WinUI 3, .NET MAUI, Uno, and Avalonia. | `references/dependency-injection.md` |
|
||||
| [mvvm-toolkit-messenger](../skills/mvvm-toolkit-messenger/SKILL.md)<br />`gh skills install github/awesome-copilot mvvm-toolkit-messenger` | CommunityToolkit.Mvvm Messenger pub/sub for decoupled communication between ViewModels (or any objects). Covers WeakReferenceMessenger vs StrongReferenceMessenger, IRecipient<TMessage>, RequestMessage<T> / AsyncRequestMessage<T> / CollectionRequestMessage<T>, ValueChangedMessage<T>, channels (tokens), and the ObservableRecipient activation lifecycle. Use across WPF, WinUI 3, .NET MAUI, Uno, and Avalonia. | `references/messenger-patterns.md` |
|
||||
| [my-issues](../skills/my-issues/SKILL.md)<br />`gh skills install github/awesome-copilot my-issues` | List my issues in the current repository | None |
|
||||
| [my-pull-requests](../skills/my-pull-requests/SKILL.md)<br />`gh skills install github/awesome-copilot my-pull-requests` | List my pull requests in the current repository | None |
|
||||
| [nano-banana-pro-openrouter](../skills/nano-banana-pro-openrouter/SKILL.md)<br />`gh skills install github/awesome-copilot nano-banana-pro-openrouter` | Generate or edit images via OpenRouter with the Gemini 3 Pro Image model. Use for prompt-only image generation, image edits, and multi-image compositing; supports 1K/2K/4K output. | `assets/SYSTEM_TEMPLATE`<br />`scripts/generate_image.py` |
|
||||
| [napkin](../skills/napkin/SKILL.md)<br />`gh skills install github/awesome-copilot napkin` | Visual whiteboard collaboration for Copilot CLI. Creates an interactive whiteboard that opens in your browser — draw, sketch, add sticky notes, then share everything back with Copilot. Copilot sees your drawings and text, and responds with analysis, suggestions, and ideas. | `assets/napkin.html`<br />`assets/step1-activate.svg`<br />`assets/step2-whiteboard.svg`<br />`assets/step3-draw.svg`<br />`assets/step4-share.svg`<br />`assets/step5-response.svg` |
|
||||
| [next-intl-add-language](../skills/next-intl-add-language/SKILL.md)<br />`gh skills install github/awesome-copilot next-intl-add-language` | Add new language to a Next.js + next-intl application | None |
|
||||
@@ -277,7 +272,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
|
||||
| [prd](../skills/prd/SKILL.md)<br />`gh skills install github/awesome-copilot prd` | Generate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis. | None |
|
||||
| [premium-frontend-ui](../skills/premium-frontend-ui/SKILL.md)<br />`gh skills install github/awesome-copilot premium-frontend-ui` | A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship. | None |
|
||||
| [project-workflow-analysis-blueprint-generator](../skills/project-workflow-analysis-blueprint-generator/SKILL.md)<br />`gh skills install github/awesome-copilot project-workflow-analysis-blueprint-generator` | Comprehensive technology-agnostic prompt generator for documenting end-to-end application workflows. Automatically detects project architecture patterns, technology stacks, and data flow patterns to generate detailed implementation blueprints covering entry points, service layers, data access, error handling, and testing approaches across multiple technologies including .NET, Java/Spring, React, and microservices architectures. | None |
|
||||
| [prompt-builder](../skills/prompt-builder/SKILL.md)<br />`gh skills install github/awesome-copilot prompt-builder` | Guide users through creating high-quality GitHub Copilot prompts with proper structure, tools, and best practices. | None |
|
||||
| [prompt-optimizer](../skills/prompt-optimizer/SKILL.md)<br />`gh skills install github/awesome-copilot prompt-optimizer` | Turn any rough prompt, half-formed idea, or task description into a finished, ready-to-send prompt optimized for any LLM model inside a chat interface — NOT the API. Use this skill whenever the user wants to write, rewrite, optimize, improve, sharpen, or polish a prompt for chat. Trigger phrases include "rewrite this prompt", "make this a better prompt", "optimize this prompt", "turn this into a prompt", "help me prompt this", "draft a prompt that...", "I want to ask...", or whenever the user pastes a draft prompt and asks for improvements. Also trigger when the user describes a task they plan to send to an LLM model and clearly wants a reusable, well-structured prompt rather than a direct answer. The output is always a single, copy-pasteable prompt in a code block that the user sends as-is — never a template with placeholders. | None |
|
||||
| [publish-to-pages](../skills/publish-to-pages/SKILL.md)<br />`gh skills install github/awesome-copilot publish-to-pages` | Publish presentations and web content to GitHub Pages. Converts PPTX, PDF, HTML, or Google Slides to a live GitHub Pages URL. Handles repo creation, file conversion, Pages enablement, and returns the live URL. Use when the user wants to publish, deploy, or share a presentation or HTML file via GitHub Pages. | `scripts/convert-pdf.py`<br />`scripts/convert-pptx.py`<br />`scripts/publish.sh` |
|
||||
| [pytest-coverage](../skills/pytest-coverage/SKILL.md)<br />`gh skills install github/awesome-copilot pytest-coverage` | Run pytest tests with coverage, discover lines missing coverage, and increase coverage to 100%. | None |
|
||||
@@ -363,7 +357,6 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
|
||||
| [vardoger-analyze](../skills/vardoger-analyze/SKILL.md)<br />`gh skills install github/awesome-copilot vardoger-analyze` | Use when the user asks to personalize the GitHub Copilot CLI assistant, adapt Copilot to their style, use vardoger, or analyze their Copilot CLI conversation history. Reads the local session directory at `~/.copilot/session-state/`, extracts recurring preferences and conventions, and writes a fenced personalization block into `~/.copilot/copilot-instructions.md`. Runs entirely on the user's machine via the local `vardoger` CLI (`pipx install vardoger`); no network calls and no uploads. Triggers: 'personalize my copilot', 'analyze my copilot history', 'tailor copilot to me', 'run vardoger', 'update my copilot instructions from history', 'make copilot learn my style'. | None |
|
||||
| [vscode-ext-commands](../skills/vscode-ext-commands/SKILL.md)<br />`gh skills install github/awesome-copilot vscode-ext-commands` | Guidelines for contributing commands in VS Code extensions. Indicates naming convention, visibility, localization and other relevant attributes, following VS Code extension development guidelines, libraries and good practices | None |
|
||||
| [vscode-ext-localization](../skills/vscode-ext-localization/SKILL.md)<br />`gh skills install github/awesome-copilot vscode-ext-localization` | Guidelines for proper localization of VS Code extensions, following VS Code extension development guidelines, libraries and good practices | None |
|
||||
| [web-coder](../skills/web-coder/SKILL.md)<br />`gh skills install github/awesome-copilot web-coder` | Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development. | `references/accessibility.md`<br />`references/architecture-patterns.md`<br />`references/browsers-engines.md`<br />`references/css-styling.md`<br />`references/data-formats-encoding.md`<br />`references/development-tools.md`<br />`references/glossary.md`<br />`references/html-markup.md`<br />`references/http-networking.md`<br />`references/javascript-programming.md`<br />`references/media-graphics.md`<br />`references/performance-optimization.md`<br />`references/security-authentication.md`<br />`references/servers-infrastructure.md`<br />`references/web-apis-dom.md`<br />`references/web-protocols-standards.md` |
|
||||
| [web-design-reviewer](../skills/web-design-reviewer/SKILL.md)<br />`gh skills install github/awesome-copilot web-design-reviewer` | This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. | `references/framework-fixes.md`<br />`references/visual-checklist.md` |
|
||||
| [webapp-testing](../skills/webapp-testing/SKILL.md)<br />`gh skills install github/awesome-copilot webapp-testing` | Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. | `assets/test-helper.js` |
|
||||
| [what-context-needed](../skills/what-context-needed/SKILL.md)<br />`gh skills install github/awesome-copilot what-context-needed` | Ask Copilot what files it needs to see before answering a question | None |
|
||||
|
||||
+2
-3
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "cms-development",
|
||||
"description": "Skills for CMS development across themes, plugins, admin tooling, media workflows, markdown rendering, and static export pipelines.",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"keywords": [
|
||||
"cms",
|
||||
"content-management-system",
|
||||
@@ -21,7 +21,6 @@
|
||||
"skills": [
|
||||
"./skills/content-management-systems/",
|
||||
"./skills/markdown-to-html/",
|
||||
"./skills/quasi-coder/",
|
||||
"./skills/web-coder/"
|
||||
"./skills/quasi-coder/"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
name: create-github-pull-request-from-specification
|
||||
description: 'Create GitHub Pull Request for feature request from specification file using pull_request_template.md template.'
|
||||
---
|
||||
|
||||
# Create GitHub Pull Request from Specification
|
||||
|
||||
Create GitHub Pull Request for the specification at `${workspaceFolder}/.github/pull_request_template.md` .
|
||||
|
||||
## Process
|
||||
|
||||
1. Analyze specification file template from '${workspaceFolder}/.github/pull_request_template.md' to extract requirements by 'search' tool.
|
||||
2. Create pull request draft template by using 'create_pull_request' tool on to `${input:targetBranch}`. and make sure don't have any pull request of current branch was exist `get_pull_request`. If has continue to step 4, and skip step 3.
|
||||
3. Get changes in pull request by using 'get_pull_request_diff' tool to analyze information that was changed in pull Request.
|
||||
4. Update the pull request body and title created in the previous step using the 'update_pull_request' tool. Incorporate the information from the template obtained in the first step to update the body and title as needed.
|
||||
5. Switch from draft to ready for review by using 'update_pull_request' tool. To update state of pull request.
|
||||
6. Using 'get_me' to get username of person was created pull request and assign to `update_issue` tool. To assign pull request
|
||||
7. Response URL Pull request was create to user.
|
||||
|
||||
## Requirements
|
||||
- Single pull request for the complete specification
|
||||
- Clear title/pull_request_template.md identifying the specification
|
||||
- Fill enough information into pull_request_template.md
|
||||
- Verify against existing pull requests before creation
|
||||
@@ -1,147 +0,0 @@
|
||||
---
|
||||
name: make-skill-template
|
||||
description: 'Create new Agent Skills for GitHub Copilot from prompts or by duplicating this template. Use when asked to "create a skill", "make a new skill", "scaffold a skill", or when building specialized AI capabilities with bundled resources. Generates SKILL.md files with proper frontmatter, directory structure, and optional scripts/references/assets folders.'
|
||||
---
|
||||
|
||||
# Make Skill Template
|
||||
|
||||
A meta-skill for creating new Agent Skills. Use this skill when you need to scaffold a new skill folder, generate a SKILL.md file, or help users understand the Agent Skills specification.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- User asks to "create a skill", "make a new skill", or "scaffold a skill"
|
||||
- User wants to add a specialized capability to their GitHub Copilot setup
|
||||
- User needs help structuring a skill with bundled resources
|
||||
- User wants to duplicate this template as a starting point
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Understanding of what the skill should accomplish
|
||||
- A clear, keyword-rich description of capabilities and triggers
|
||||
- Knowledge of any bundled resources needed (scripts, references, assets, templates)
|
||||
|
||||
## Creating a New Skill
|
||||
|
||||
### Step 1: Create the Skill Directory
|
||||
|
||||
Create a new folder with a lowercase, hyphenated name:
|
||||
|
||||
```
|
||||
skills/<skill-name>/
|
||||
└── SKILL.md # Required
|
||||
```
|
||||
|
||||
### Step 2: Generate SKILL.md with Frontmatter
|
||||
|
||||
Every skill requires YAML frontmatter with `name` and `description`:
|
||||
|
||||
```yaml
|
||||
---
|
||||
name: <skill-name>
|
||||
description: '<What it does>. Use when <specific triggers, scenarios, keywords users might say>.'
|
||||
---
|
||||
```
|
||||
|
||||
#### Frontmatter Field Requirements
|
||||
|
||||
| Field | Required | Constraints |
|
||||
|-------|----------|-------------|
|
||||
| `name` | **Yes** | 1-64 chars, lowercase letters/numbers/hyphens only, must match folder name |
|
||||
| `description` | **Yes** | 1-1024 chars, must describe WHAT it does AND WHEN to use it |
|
||||
| `license` | No | License name or reference to bundled LICENSE.txt |
|
||||
| `compatibility` | No | 1-500 chars, environment requirements if needed |
|
||||
| `metadata` | No | Key-value pairs for additional properties |
|
||||
| `allowed-tools` | No | Space-delimited list of pre-approved tools (experimental) |
|
||||
|
||||
#### Description Best Practices
|
||||
|
||||
**CRITICAL**: The `description` is the PRIMARY mechanism for automatic skill discovery. Include:
|
||||
|
||||
1. **WHAT** the skill does (capabilities)
|
||||
2. **WHEN** to use it (triggers, scenarios, file types)
|
||||
3. **Keywords** users might mention in prompts
|
||||
|
||||
**Good example:**
|
||||
|
||||
```yaml
|
||||
description: 'Toolkit for testing local web applications using Playwright. Use when asked to verify frontend functionality, debug UI behavior, capture browser screenshots, or view browser console logs. Supports Chrome, Firefox, and WebKit.'
|
||||
```
|
||||
|
||||
**Poor example:**
|
||||
|
||||
```yaml
|
||||
description: 'Web testing helpers'
|
||||
```
|
||||
|
||||
### Step 3: Write the Skill Body
|
||||
|
||||
After the frontmatter, add markdown instructions. Recommended sections:
|
||||
|
||||
| Section | Purpose |
|
||||
|---------|---------|
|
||||
| `# Title` | Brief overview |
|
||||
| `## When to Use This Skill` | Reinforces description triggers |
|
||||
| `## Prerequisites` | Required tools, dependencies |
|
||||
| `## Step-by-Step Workflows` | Numbered steps for tasks |
|
||||
| `## Troubleshooting` | Common issues and solutions |
|
||||
| `## References` | Links to bundled docs |
|
||||
|
||||
### Step 4: Add Optional Directories (If Needed)
|
||||
|
||||
| Folder | Purpose | When to Use |
|
||||
|--------|---------|-------------|
|
||||
| `scripts/` | Executable code (Python, Bash, JS) | Automation that performs operations |
|
||||
| `references/` | Documentation agent reads | API references, schemas, guides |
|
||||
| `assets/` | Static files used AS-IS | Images, fonts, templates |
|
||||
| `templates/` | Starter code agent modifies | Scaffolds to extend |
|
||||
|
||||
## Example: Complete Skill Structure
|
||||
|
||||
```
|
||||
my-awesome-skill/
|
||||
├── SKILL.md # Required instructions
|
||||
├── LICENSE.txt # Optional license file
|
||||
├── scripts/
|
||||
│ └── helper.py # Executable automation
|
||||
├── references/
|
||||
│ ├── api-reference.md # Detailed docs
|
||||
│ └── examples.md # Usage examples
|
||||
├── assets/
|
||||
│ └── diagram.png # Static resources
|
||||
└── templates/
|
||||
└── starter.ts # Code scaffold
|
||||
```
|
||||
|
||||
## Quick Start: Duplicate This Template
|
||||
|
||||
1. Copy the `make-skill-template/` folder
|
||||
2. Rename to your skill name (lowercase, hyphens)
|
||||
3. Update `SKILL.md`:
|
||||
- Change `name:` to match folder name
|
||||
- Write a keyword-rich `description:`
|
||||
- Replace body content with your instructions
|
||||
4. Add bundled resources as needed
|
||||
5. Validate with `npm run skill:validate`
|
||||
|
||||
## Validation Checklist
|
||||
|
||||
- [ ] Folder name is lowercase with hyphens
|
||||
- [ ] `name` field matches folder name exactly
|
||||
- [ ] `description` is 10-1024 characters
|
||||
- [ ] `description` explains WHAT and WHEN
|
||||
- [ ] `description` is wrapped in single quotes
|
||||
- [ ] Body content is under 500 lines
|
||||
- [ ] Bundled assets are under 5MB each
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Skill not discovered | Improve description with more keywords and triggers |
|
||||
| Validation fails on name | Ensure lowercase, no consecutive hyphens, matches folder |
|
||||
| Description too short | Add capabilities, triggers, and keywords |
|
||||
| Assets not found | Use relative paths from skill root |
|
||||
|
||||
## References
|
||||
|
||||
- Agent Skills official spec: <https://agentskills.io/specification>
|
||||
@@ -1,672 +0,0 @@
|
||||
---
|
||||
name: model-recommendation
|
||||
description: 'Analyze chatmode or prompt files and recommend optimal AI models based on task complexity, required capabilities, and cost-efficiency'
|
||||
---
|
||||
|
||||
# AI Model Recommendation for Copilot Chat Modes and Prompts
|
||||
|
||||
## Mission
|
||||
|
||||
Analyze `.agent.md` or `.prompt.md` files to understand their purpose, complexity, and required capabilities, then recommend the most suitable AI model(s) from GitHub Copilot's available options. Provide rationale based on task characteristics, model strengths, cost-efficiency, and performance trade-offs.
|
||||
|
||||
## Scope & Preconditions
|
||||
|
||||
- **Input**: Path to a `.agent.md` or `.prompt.md` file
|
||||
- **Available Models**: GPT-4.1, GPT-5, GPT-5 mini, GPT-5 Codex, Claude Sonnet 3.5, Claude Sonnet 4, Claude Sonnet 4.5, Claude Opus 4.1, Gemini 2.5 Pro, Gemini 2.0 Flash, Grok Code Fast 1, o3, o4-mini (with deprecation dates)
|
||||
- **Model Auto-Selection**: Available in VS Code (Sept 2025+) - selects from GPT-4.1, GPT-5 mini, GPT-5, Claude Sonnet 3.5, Claude Sonnet 4.5 (excludes premium multipliers > 1)
|
||||
- **Context**: GitHub Copilot subscription tiers (Free: 2K completions + 50 chat/month with 0x models only; Pro: unlimited 0x + 1000 premium/month; Pro+: unlimited 0x + 5000 premium/month)
|
||||
|
||||
## Inputs
|
||||
|
||||
Required:
|
||||
|
||||
- `${input:filePath:Path to .agent.md or .prompt.md file}` - Absolute or workspace-relative path to the file to analyze
|
||||
|
||||
Optional:
|
||||
|
||||
- `${input:subscriptionTier:Pro}` - User's Copilot subscription tier (Free, Pro, Pro+) - defaults to Pro
|
||||
- `${input:priorityFactor:Balanced}` - Optimization priority (Speed, Cost, Quality, Balanced) - defaults to Balanced
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. File Analysis Phase
|
||||
|
||||
**Read and Parse File**:
|
||||
|
||||
- Read the target `.agent.md` or `.prompt.md` file
|
||||
- Extract frontmatter (description, mode, tools, model if specified)
|
||||
- Analyze body content to identify:
|
||||
- Task complexity (simple/moderate/complex/advanced)
|
||||
- Required reasoning depth (basic/intermediate/advanced/expert)
|
||||
- Code generation needs (minimal/moderate/extensive)
|
||||
- Multi-turn conversation requirements
|
||||
- Context window needs (small/medium/large)
|
||||
- Specialized capabilities (image analysis, long-context, real-time data)
|
||||
|
||||
**Categorize Task Type**:
|
||||
|
||||
Identify the primary task category based on content analysis:
|
||||
|
||||
1. **Simple Repetitive Tasks**:
|
||||
|
||||
- Pattern: Formatting, simple refactoring, adding comments/docstrings, basic CRUD
|
||||
- Characteristics: Straightforward logic, minimal context, fast execution preferred
|
||||
- Keywords: format, comment, simple, basic, add docstring, rename, move
|
||||
|
||||
2. **Code Generation & Implementation**:
|
||||
|
||||
- Pattern: Writing functions/classes, implementing features, API endpoints, tests
|
||||
- Characteristics: Moderate complexity, domain knowledge, idiomatic code
|
||||
- Keywords: implement, create, generate, write, build, scaffold
|
||||
|
||||
3. **Complex Refactoring & Architecture**:
|
||||
|
||||
- Pattern: System design, architectural review, large-scale refactoring, performance optimization
|
||||
- Characteristics: Deep reasoning, multiple components, trade-off analysis
|
||||
- Keywords: architect, refactor, optimize, design, scale, review architecture
|
||||
|
||||
4. **Debugging & Problem-Solving**:
|
||||
|
||||
- Pattern: Bug fixing, error analysis, systematic troubleshooting, root cause analysis
|
||||
- Characteristics: Step-by-step reasoning, debugging context, verification needs
|
||||
- Keywords: debug, fix, troubleshoot, diagnose, error, investigate
|
||||
|
||||
5. **Planning & Research**:
|
||||
|
||||
- Pattern: Feature planning, research, documentation analysis, ADR creation
|
||||
- Characteristics: Read-only, context gathering, decision-making support
|
||||
- Keywords: plan, research, analyze, investigate, document, assess
|
||||
|
||||
6. **Code Review & Quality Analysis**:
|
||||
|
||||
- Pattern: Security analysis, performance review, best practices validation, compliance checking
|
||||
- Characteristics: Critical thinking, pattern recognition, domain expertise
|
||||
- Keywords: review, analyze, security, performance, compliance, validate
|
||||
|
||||
7. **Specialized Domain Tasks**:
|
||||
|
||||
- Pattern: Django/framework-specific, accessibility (WCAG), testing (TDD), API design
|
||||
- Characteristics: Deep domain knowledge, framework conventions, standards compliance
|
||||
- Keywords: django, accessibility, wcag, rest, api, testing, tdd
|
||||
|
||||
8. **Advanced Reasoning & Multi-Step Workflows**:
|
||||
- Pattern: Algorithmic optimization, complex data transformations, multi-phase workflows
|
||||
- Characteristics: Advanced reasoning, mathematical/algorithmic thinking, sequential logic
|
||||
- Keywords: algorithm, optimize, transform, sequential, reasoning, calculate
|
||||
|
||||
**Extract Capability Requirements**:
|
||||
|
||||
Based on `tools` in frontmatter and body instructions:
|
||||
|
||||
- **Read-only tools** (search, fetch, usages, githubRepo): Lower complexity, faster models suitable
|
||||
- **Write operations** (edit/editFiles, new): Moderate complexity, accuracy important
|
||||
- **Execution tools** (runCommands, runTests, runTasks): Validation needs, iterative approach
|
||||
- **Advanced tools** (context7/\*, sequential-thinking/\*): Complex reasoning, premium models beneficial
|
||||
- **Multi-modal** (image analysis references): Requires vision-capable models
|
||||
|
||||
### 2. Model Evaluation Phase
|
||||
|
||||
**Apply Model Selection Criteria**:
|
||||
|
||||
For each available model, evaluate against these dimensions:
|
||||
|
||||
#### Model Capabilities Matrix
|
||||
|
||||
| Model | Multiplier | Speed | Code Quality | Reasoning | Context | Vision | Best For |
|
||||
| ----------------------- | ---------- | -------- | ------------ | --------- | ------- | ------ | ------------------------------------------------- |
|
||||
| GPT-4.1 | 0x | Fast | Good | Good | 128K | ✅ | Balanced general tasks, included in all plans |
|
||||
| GPT-5 mini | 0x | Fastest | Good | Basic | 128K | ❌ | Simple tasks, quick responses, cost-effective |
|
||||
| GPT-5 | 1x | Moderate | Excellent | Advanced | 128K | ✅ | Complex code, advanced reasoning, multi-turn chat |
|
||||
| GPT-5 Codex | 1x | Fast | Excellent | Good | 128K | ❌ | Code optimization, refactoring, algorithmic tasks |
|
||||
| Claude Sonnet 3.5 | 1x | Moderate | Excellent | Excellent | 200K | ✅ | Code generation, long context, balanced reasoning |
|
||||
| Claude Sonnet 4 | 1x | Moderate | Excellent | Advanced | 200K | ❌ | Complex code, robust reasoning, enterprise tasks |
|
||||
| Claude Sonnet 4.5 | 1x | Moderate | Excellent | Expert | 200K | ✅ | Advanced code, architecture, design patterns |
|
||||
| Claude Opus 4.1 | 10x | Slow | Outstanding | Expert | 1M | ✅ | Large codebases, architectural review, research |
|
||||
| Gemini 2.5 Pro | 1x | Moderate | Excellent | Advanced | 2M | ✅ | Very long context, multi-modal, real-time data |
|
||||
| Gemini 2.0 Flash (dep.) | 0.25x | Fastest | Good | Good | 1M | ❌ | Fast responses, cost-effective (deprecated) |
|
||||
| Grok Code Fast 1 | 0.25x | Fastest | Good | Basic | 128K | ❌ | Speed-critical simple tasks, preview (free) |
|
||||
| o3 (deprecated) | 1x | Slow | Good | Expert | 128K | ❌ | Advanced reasoning, algorithmic optimization |
|
||||
| o4-mini (deprecated) | 0.33x | Fast | Good | Good | 128K | ❌ | Reasoning at lower cost (deprecated) |
|
||||
|
||||
#### Selection Decision Tree
|
||||
|
||||
```
|
||||
START
|
||||
│
|
||||
├─ Task Complexity?
|
||||
│ ├─ Simple/Repetitive → GPT-5 mini, Grok Code Fast 1, GPT-4.1
|
||||
│ ├─ Moderate → GPT-4.1, Claude Sonnet 4, GPT-5
|
||||
│ └─ Complex/Advanced → Claude Sonnet 4.5, GPT-5, Gemini 2.5 Pro, Claude Opus 4.1
|
||||
│
|
||||
├─ Reasoning Depth?
|
||||
│ ├─ Basic → GPT-5 mini, Grok Code Fast 1
|
||||
│ ├─ Intermediate → GPT-4.1, Claude Sonnet 4
|
||||
│ ├─ Advanced → GPT-5, Claude Sonnet 4.5
|
||||
│ └─ Expert → Claude Opus 4.1, o3 (deprecated)
|
||||
│
|
||||
├─ Code-Specific?
|
||||
│ ├─ Yes → GPT-5 Codex, Claude Sonnet 4.5, GPT-5
|
||||
│ └─ No → GPT-5, Claude Sonnet 4
|
||||
│
|
||||
├─ Context Size?
|
||||
│ ├─ Small (<50K tokens) → Any model
|
||||
│ ├─ Medium (50-200K) → Claude models, GPT-5, Gemini
|
||||
│ ├─ Large (200K-1M) → Gemini 2.5 Pro, Claude Opus 4.1
|
||||
│ └─ Very Large (>1M) → Gemini 2.5 Pro (2M), Claude Opus 4.1 (1M)
|
||||
│
|
||||
├─ Vision Required?
|
||||
│ ├─ Yes → GPT-4.1, GPT-5, Claude Sonnet 3.5/4.5, Gemini 2.5 Pro, Claude Opus 4.1
|
||||
│ └─ No → All models
|
||||
│
|
||||
├─ Cost Sensitivity? (based on subscriptionTier)
|
||||
│ ├─ Free Tier → 0x models only: GPT-4.1, GPT-5 mini, Grok Code Fast 1
|
||||
│ ├─ Pro (1000 premium/month) → Prioritize 0x, use 1x judiciously, avoid 10x
|
||||
│ └─ Pro+ (5000 premium/month) → 1x freely, 10x for critical tasks
|
||||
│
|
||||
└─ Priority Factor?
|
||||
├─ Speed → GPT-5 mini, Grok Code Fast 1, Gemini 2.0 Flash
|
||||
├─ Cost → 0x models (GPT-4.1, GPT-5 mini) or lower multipliers (0.25x, 0.33x)
|
||||
├─ Quality → Claude Sonnet 4.5, GPT-5, Claude Opus 4.1
|
||||
└─ Balanced → GPT-4.1, Claude Sonnet 4, GPT-5
|
||||
```
|
||||
|
||||
### 3. Recommendation Generation Phase
|
||||
|
||||
**Primary Recommendation**:
|
||||
|
||||
- Identify the single best model based on task analysis and decision tree
|
||||
- Provide specific rationale tied to file content characteristics
|
||||
- Explain multiplier cost implications for user's subscription tier
|
||||
|
||||
**Alternative Recommendations**:
|
||||
|
||||
- Suggest 1-2 alternative models with trade-off explanations
|
||||
- Include scenarios where alternatives might be preferred
|
||||
- Consider priority factor overrides (speed vs. quality vs. cost)
|
||||
|
||||
**Auto-Selection Guidance**:
|
||||
|
||||
- Assess if task is suitable for auto model selection (excludes premium models > 1x)
|
||||
- Explain when manual selection is beneficial vs. letting Copilot choose
|
||||
- Note any limitations of auto-selection for the specific task
|
||||
|
||||
**Deprecation Warnings**:
|
||||
|
||||
- Flag if file currently specifies a deprecated model (o3, o4-mini, Claude Sonnet 3.7, Gemini 2.0 Flash)
|
||||
- Provide migration path to recommended replacement
|
||||
- Include timeline for deprecation (e.g., "o3 deprecating 2025-10-23")
|
||||
|
||||
**Subscription Tier Considerations**:
|
||||
|
||||
- **Free Tier**: Recommend only 0x multiplier models (GPT-4.1, GPT-5 mini, Grok Code Fast 1)
|
||||
- **Pro Tier**: Balance between 0x (unlimited) and 1x (1000/month) models
|
||||
- **Pro+ Tier**: More freedom with 1x models (5000/month), justify 10x usage for exceptional cases
|
||||
|
||||
### 4. Integration Recommendations
|
||||
|
||||
**Frontmatter Update Guidance**:
|
||||
|
||||
If file does not specify a `model` field:
|
||||
|
||||
```markdown
|
||||
## Recommendation: Add Model Specification
|
||||
|
||||
Current frontmatter:
|
||||
\`\`\`yaml
|
||||
|
||||
---
|
||||
|
||||
description: "..."
|
||||
tools: [...]
|
||||
|
||||
---
|
||||
|
||||
\`\`\`
|
||||
|
||||
Recommended frontmatter:
|
||||
\`\`\`yaml
|
||||
|
||||
---
|
||||
|
||||
description: "..."
|
||||
model: "[Recommended Model Name]"
|
||||
tools: [...]
|
||||
|
||||
---
|
||||
|
||||
\`\`\`
|
||||
|
||||
Rationale: [Explanation of why this model is optimal for this task]
|
||||
```
|
||||
|
||||
If file already specifies a model:
|
||||
|
||||
```markdown
|
||||
## Current Model Assessment
|
||||
|
||||
Specified model: `[Current Model]` (Multiplier: [X]x)
|
||||
|
||||
Recommendation: [Keep current model | Consider switching to [Recommended Model]]
|
||||
|
||||
Rationale: [Explanation]
|
||||
```
|
||||
|
||||
**Tool Alignment Check**:
|
||||
|
||||
Verify model capabilities align with specified tools:
|
||||
|
||||
- If tools include `context7/*` or `sequential-thinking/*`: Recommend advanced reasoning models (Claude Sonnet 4.5, GPT-5, Claude Opus 4.1)
|
||||
- If tools include vision-related references: Ensure model supports images (flag if GPT-5 Codex, Claude Sonnet 4, or mini models selected)
|
||||
- If tools are read-only (search, fetch): Suggest cost-effective models (GPT-5 mini, Grok Code Fast 1)
|
||||
|
||||
### 5. Context7 Integration for Up-to-Date Information
|
||||
|
||||
**Leverage Context7 for Model Documentation**:
|
||||
|
||||
When uncertainty exists about current model capabilities, use Context7 to fetch latest information:
|
||||
|
||||
```markdown
|
||||
**Verification with Context7**:
|
||||
|
||||
Using `context7/get-library-docs` with library ID `/websites/github_en_copilot`:
|
||||
|
||||
- Query topic: "model capabilities [specific capability question]"
|
||||
- Retrieve current model features, multipliers, deprecation status
|
||||
- Cross-reference against analyzed file requirements
|
||||
```
|
||||
|
||||
**Example Context7 Usage**:
|
||||
|
||||
```
|
||||
If unsure whether Claude Sonnet 4.5 supports image analysis:
|
||||
→ Use context7 with topic "Claude Sonnet 4.5 vision image capabilities"
|
||||
→ Confirm feature support before recommending for multi-modal tasks
|
||||
```
|
||||
|
||||
## Output Expectations
|
||||
|
||||
### Report Structure
|
||||
|
||||
Generate a structured markdown report with the following sections:
|
||||
|
||||
```markdown
|
||||
# AI Model Recommendation Report
|
||||
|
||||
**File Analyzed**: `[file path]`
|
||||
**File Type**: [chatmode | prompt]
|
||||
**Analysis Date**: [YYYY-MM-DD]
|
||||
**Subscription Tier**: [Free | Pro | Pro+]
|
||||
|
||||
---
|
||||
|
||||
## File Summary
|
||||
|
||||
**Description**: [from frontmatter]
|
||||
**Mode**: [ask | edit | agent]
|
||||
**Tools**: [tool list]
|
||||
**Current Model**: [specified model or "Not specified"]
|
||||
|
||||
## Task Analysis
|
||||
|
||||
### Task Complexity
|
||||
|
||||
- **Level**: [Simple | Moderate | Complex | Advanced]
|
||||
- **Reasoning Depth**: [Basic | Intermediate | Advanced | Expert]
|
||||
- **Context Requirements**: [Small | Medium | Large | Very Large]
|
||||
- **Code Generation**: [Minimal | Moderate | Extensive]
|
||||
- **Multi-Modal**: [Yes | No]
|
||||
|
||||
### Task Category
|
||||
|
||||
[Primary category from 8 categories listed in Workflow Phase 1]
|
||||
|
||||
### Key Characteristics
|
||||
|
||||
- Characteristic 1: [explanation]
|
||||
- Characteristic 2: [explanation]
|
||||
- Characteristic 3: [explanation]
|
||||
|
||||
## Model Recommendation
|
||||
|
||||
### 🏆 Primary Recommendation: [Model Name]
|
||||
|
||||
**Multiplier**: [X]x ([cost implications for subscription tier])
|
||||
**Strengths**:
|
||||
|
||||
- Strength 1: [specific to task]
|
||||
- Strength 2: [specific to task]
|
||||
- Strength 3: [specific to task]
|
||||
|
||||
**Rationale**:
|
||||
[Detailed explanation connecting task characteristics to model capabilities]
|
||||
|
||||
**Cost Impact** (for [Subscription Tier]):
|
||||
|
||||
- Per request multiplier: [X]x
|
||||
- Estimated usage: [rough estimate based on task frequency]
|
||||
- [Additional cost context]
|
||||
|
||||
### 🔄 Alternative Options
|
||||
|
||||
#### Option 1: [Model Name]
|
||||
|
||||
- **Multiplier**: [X]x
|
||||
- **When to Use**: [specific scenarios]
|
||||
- **Trade-offs**: [compared to primary recommendation]
|
||||
|
||||
#### Option 2: [Model Name]
|
||||
|
||||
- **Multiplier**: [X]x
|
||||
- **When to Use**: [specific scenarios]
|
||||
- **Trade-offs**: [compared to primary recommendation]
|
||||
|
||||
### 📊 Model Comparison for This Task
|
||||
|
||||
| Criterion | [Primary Model] | [Alternative 1] | [Alternative 2] |
|
||||
| ---------------- | --------------- | --------------- | --------------- |
|
||||
| Task Fit | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
|
||||
| Code Quality | [rating] | [rating] | [rating] |
|
||||
| Reasoning | [rating] | [rating] | [rating] |
|
||||
| Speed | [rating] | [rating] | [rating] |
|
||||
| Cost Efficiency | [rating] | [rating] | [rating] |
|
||||
| Context Capacity | [capacity] | [capacity] | [capacity] |
|
||||
| Vision Support | [Yes/No] | [Yes/No] | [Yes/No] |
|
||||
|
||||
## Auto Model Selection Assessment
|
||||
|
||||
**Suitability**: [Recommended | Not Recommended | Situational]
|
||||
|
||||
[Explanation of whether auto-selection is appropriate for this task]
|
||||
|
||||
**Rationale**:
|
||||
|
||||
- [Reason 1]
|
||||
- [Reason 2]
|
||||
|
||||
**Manual Override Scenarios**:
|
||||
|
||||
- [Scenario where user should manually select model]
|
||||
- [Scenario where user should manually select model]
|
||||
|
||||
## Implementation Guidance
|
||||
|
||||
### Frontmatter Update
|
||||
|
||||
[Provide specific code block showing recommended frontmatter change]
|
||||
|
||||
### Model Selection in VS Code
|
||||
|
||||
**To Use Recommended Model**:
|
||||
|
||||
1. Open Copilot Chat
|
||||
2. Click model dropdown (currently shows "[current model or Auto]")
|
||||
3. Select **[Recommended Model Name]**
|
||||
4. [Optional: When to switch back to Auto]
|
||||
|
||||
**Keyboard Shortcut**: `Cmd+Shift+P` → "Copilot: Change Model"
|
||||
|
||||
### Tool Alignment Verification
|
||||
|
||||
[Check results: Are specified tools compatible with recommended model?]
|
||||
|
||||
✅ **Compatible Tools**: [list]
|
||||
⚠️ **Potential Limitations**: [list if any]
|
||||
|
||||
## Deprecation Notices
|
||||
|
||||
[If applicable, list any deprecated models in current configuration]
|
||||
|
||||
⚠️ **Deprecated Model in Use**: [Model Name] (Deprecation date: [YYYY-MM-DD])
|
||||
|
||||
**Migration Path**:
|
||||
|
||||
- **Current**: [Deprecated Model]
|
||||
- **Replacement**: [Recommended Model]
|
||||
- **Action Required**: Update `model:` field in frontmatter by [date]
|
||||
- **Behavioral Changes**: [any expected differences]
|
||||
|
||||
## Context7 Verification
|
||||
|
||||
[If Context7 was used for verification]
|
||||
|
||||
**Queries Executed**:
|
||||
|
||||
- Topic: "[query topic]"
|
||||
- Library: `/websites/github_en_copilot`
|
||||
- Key Findings: [summary]
|
||||
|
||||
## Additional Considerations
|
||||
|
||||
### Subscription Tier Recommendations
|
||||
|
||||
[Specific advice based on Free/Pro/Pro+ tier]
|
||||
|
||||
### Priority Factor Adjustments
|
||||
|
||||
[If user specified Speed/Cost/Quality/Balanced, explain how recommendation aligns]
|
||||
|
||||
### Long-Term Model Strategy
|
||||
|
||||
[Advice for when to re-evaluate model selection as file evolves]
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
**TL;DR**: Use **[Primary Model]** for this task due to [one-sentence rationale]. Cost: [X]x multiplier.
|
||||
|
||||
**One-Line Update**:
|
||||
\`\`\`yaml
|
||||
model: "[Recommended Model Name]"
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
### Output Quality Standards
|
||||
|
||||
- **Specific**: Tie all recommendations directly to file content, not generic advice
|
||||
- **Actionable**: Provide exact frontmatter code, VS Code steps, clear migration paths
|
||||
- **Contextualized**: Consider subscription tier, priority factor, deprecation timelines
|
||||
- **Evidence-Based**: Reference model capabilities from Context7 documentation when available
|
||||
- **Balanced**: Present trade-offs honestly (speed vs. quality vs. cost)
|
||||
- **Up-to-Date**: Flag deprecated models, suggest current alternatives
|
||||
|
||||
## Quality Assurance
|
||||
|
||||
### Validation Steps
|
||||
|
||||
- [ ] File successfully read and parsed
|
||||
- [ ] Frontmatter extracted correctly (or noted if missing)
|
||||
- [ ] Task complexity accurately categorized (Simple/Moderate/Complex/Advanced)
|
||||
- [ ] Primary task category identified from 8 options
|
||||
- [ ] Model recommendation aligns with decision tree logic
|
||||
- [ ] Multiplier cost explained for user's subscription tier
|
||||
- [ ] Alternative models provided with clear trade-off explanations
|
||||
- [ ] Auto-selection guidance included (recommended/not recommended/situational)
|
||||
- [ ] Deprecated model warnings included if applicable
|
||||
- [ ] Frontmatter update example provided (valid YAML)
|
||||
- [ ] Tool alignment verified (model capabilities match specified tools)
|
||||
- [ ] Context7 used when verification needed for latest model information
|
||||
- [ ] Report includes all required sections (summary, analysis, recommendation, implementation)
|
||||
|
||||
### Success Criteria
|
||||
|
||||
- Recommendation is justified by specific file characteristics
|
||||
- Cost impact is clear and appropriate for subscription tier
|
||||
- Alternative models cover different priority factors (speed vs. quality vs. cost)
|
||||
- Frontmatter update is ready to copy-paste (no placeholders)
|
||||
- User can immediately act on recommendation (clear steps)
|
||||
- Report is readable and scannable (good structure, tables, emoji markers)
|
||||
|
||||
### Failure Triggers
|
||||
|
||||
- File path is invalid or unreadable → Stop and request valid path
|
||||
- File is not `.agent.md` or `.prompt.md` → Stop and clarify file type
|
||||
- Cannot determine task complexity from content → Request more specific file or clarification
|
||||
- Model recommendation contradicts documented capabilities → Use Context7 to verify current info
|
||||
- Subscription tier is invalid (not Free/Pro/Pro+) → Default to Pro and note assumption
|
||||
|
||||
## Advanced Use Cases
|
||||
|
||||
### Analyzing Multiple Files
|
||||
|
||||
If user provides multiple files:
|
||||
|
||||
1. Analyze each file individually
|
||||
2. Generate separate recommendations per file
|
||||
3. Provide summary table comparing recommendations
|
||||
4. Note any patterns (e.g., "All debug-related modes benefit from Claude Sonnet 4.5")
|
||||
|
||||
### Comparative Analysis
|
||||
|
||||
If user asks "Which model is better between X and Y for this file?":
|
||||
|
||||
1. Focus comparison on those two models only
|
||||
2. Use side-by-side table format
|
||||
3. Declare a winner with specific reasoning
|
||||
4. Include cost comparison for subscription tier
|
||||
|
||||
### Migration Planning
|
||||
|
||||
If file specifies a deprecated model:
|
||||
|
||||
1. Prioritize migration guidance in report
|
||||
2. Test current behavior expectations vs. replacement model capabilities
|
||||
3. Provide phased migration if breaking changes expected
|
||||
4. Include rollback plan if needed
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Simple Formatting Task
|
||||
|
||||
**File**: `format-code.prompt.md`
|
||||
**Content**: "Format Python code with Black style, add type hints"
|
||||
**Recommendation**: GPT-5 mini (0x multiplier, fastest, sufficient for repetitive formatting)
|
||||
**Alternative**: Grok Code Fast 1 (0.25x, even faster, preview feature)
|
||||
**Rationale**: Task is simple and repetitive; premium reasoning not needed; speed prioritized
|
||||
|
||||
### Example 2: Complex Architecture Review
|
||||
|
||||
**File**: `architect.agent.md`
|
||||
**Content**: "Review system design for scalability, security, maintainability; analyze trade-offs; provide ADR-level recommendations"
|
||||
**Recommendation**: Claude Sonnet 4.5 (1x multiplier, expert reasoning, excellent for architecture)
|
||||
**Alternative**: Claude Opus 4.1 (10x, use for very large codebases >500K tokens)
|
||||
**Rationale**: Requires deep reasoning, architectural expertise, design pattern knowledge; Sonnet 4.5 excels at this
|
||||
|
||||
### Example 3: Django Expert Mode
|
||||
|
||||
**File**: `django.agent.md`
|
||||
**Content**: "Django 5.x expert with ORM optimization, async views, REST API design; uses context7 for up-to-date Django docs"
|
||||
**Recommendation**: GPT-5 (1x multiplier, advanced reasoning, excellent code quality)
|
||||
**Alternative**: Claude Sonnet 4.5 (1x, alternative perspective, strong with frameworks)
|
||||
**Rationale**: Domain expertise + context7 integration benefits from advanced reasoning; 1x cost justified for expert mode
|
||||
|
||||
### Example 4: Free Tier User with Planning Mode
|
||||
|
||||
**File**: `plan.agent.md`
|
||||
**Content**: "Research and planning mode with read-only tools (search, fetch, githubRepo)"
|
||||
**Subscription**: Free (2K completions + 50 chat requests/month, 0x models only)
|
||||
**Recommendation**: GPT-4.1 (0x, balanced, included in Free tier)
|
||||
**Alternative**: GPT-5 mini (0x, faster but less context)
|
||||
**Rationale**: Free tier restricted to 0x models; GPT-4.1 provides best balance of quality and context for planning tasks
|
||||
|
||||
## Knowledge Base
|
||||
|
||||
### Model Multiplier Cost Reference
|
||||
|
||||
| Multiplier | Meaning | Free Tier | Pro Usage | Pro+ Usage |
|
||||
| ---------- | ------------------------------------------------ | --------- | --------- | ---------- |
|
||||
| 0x | Included in all plans, no premium count | ✅ | Unlimited | Unlimited |
|
||||
| 0.25x | 4 requests = 1 premium request | ❌ | 4000 uses | 20000 uses |
|
||||
| 0.33x | 3 requests = 1 premium request | ❌ | 3000 uses | 15000 uses |
|
||||
| 1x | 1 request = 1 premium request | ❌ | 1000 uses | 5000 uses |
|
||||
| 1.25x | 1 request = 1.25 premium requests | ❌ | 800 uses | 4000 uses |
|
||||
| 10x | 1 request = 10 premium requests (very expensive) | ❌ | 100 uses | 500 uses |
|
||||
|
||||
### Model Changelog & Deprecations (October 2025)
|
||||
|
||||
**Deprecated Models** (Effective 2025-10-23):
|
||||
|
||||
- ❌ o3 (1x) → Replace with GPT-5 or Claude Sonnet 4.5 for reasoning
|
||||
- ❌ o4-mini (0.33x) → Replace with GPT-5 mini (0x) for cost, GPT-5 (1x) for quality
|
||||
- ❌ Claude Sonnet 3.7 (1x) → Replace with Claude Sonnet 4 or 4.5
|
||||
- ❌ Claude Sonnet 3.7 Thinking (1.25x) → Replace with Claude Sonnet 4.5
|
||||
- ❌ Gemini 2.0 Flash (0.25x) → Replace with Grok Code Fast 1 (0.25x) or GPT-5 mini (0x)
|
||||
|
||||
**Preview Models** (Subject to Change):
|
||||
|
||||
- 🧪 Claude Sonnet 4.5 (1x) - Preview status, may have API changes
|
||||
- 🧪 Grok Code Fast 1 (0.25x) - Preview, free during preview period
|
||||
|
||||
**Stable Production Models**:
|
||||
|
||||
- ✅ GPT-4.1, GPT-5, GPT-5 mini, GPT-5 Codex (OpenAI)
|
||||
- ✅ Claude Sonnet 3.5, Claude Sonnet 4, Claude Opus 4.1 (Anthropic)
|
||||
- ✅ Gemini 2.5 Pro (Google)
|
||||
|
||||
### Auto Model Selection Behavior (Sept 2025+)
|
||||
|
||||
**Included in Auto Selection**:
|
||||
|
||||
- GPT-4.1 (0x)
|
||||
- GPT-5 mini (0x)
|
||||
- GPT-5 (1x)
|
||||
- Claude Sonnet 3.5 (1x)
|
||||
- Claude Sonnet 4.5 (1x)
|
||||
|
||||
**Excluded from Auto Selection**:
|
||||
|
||||
- Models with multiplier > 1 (Claude Opus 4.1, deprecated o3)
|
||||
- Models blocked by admin policies
|
||||
- Models unavailable in subscription plan (1x models in Free tier)
|
||||
|
||||
**When Auto Selects**:
|
||||
|
||||
- Copilot analyzes prompt complexity, context size, task type
|
||||
- Chooses from eligible pool based on availability and rate limits
|
||||
- Applies 10% multiplier discount on auto-selected models
|
||||
- Shows selected model on hover over response in Chat view
|
||||
|
||||
## Context7 Query Templates
|
||||
|
||||
Use these query patterns when verification needed:
|
||||
|
||||
**Model Capabilities**:
|
||||
|
||||
```
|
||||
Topic: "[Model Name] code generation quality capabilities"
|
||||
Library: /websites/github_en_copilot
|
||||
```
|
||||
|
||||
**Model Multipliers**:
|
||||
|
||||
```
|
||||
Topic: "[Model Name] request multiplier cost billing"
|
||||
Library: /websites/github_en_copilot
|
||||
```
|
||||
|
||||
**Deprecation Status**:
|
||||
|
||||
```
|
||||
Topic: "deprecated models October 2025 timeline"
|
||||
Library: /websites/github_en_copilot
|
||||
```
|
||||
|
||||
**Vision Support**:
|
||||
|
||||
```
|
||||
Topic: "[Model Name] image vision multimodal support"
|
||||
Library: /websites/github_en_copilot
|
||||
```
|
||||
|
||||
**Auto Selection**:
|
||||
|
||||
```
|
||||
Topic: "auto model selection behavior eligible models"
|
||||
Library: /websites/github_en_copilot
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2025-10-28
|
||||
**Model Data Current As Of**: October 2025
|
||||
**Deprecation Deadline**: 2025-10-23 for o3, o4-mini, Claude Sonnet 3.7 variants, Gemini 2.0 Flash
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
name: my-issues
|
||||
description: 'List my issues in the current repository'
|
||||
---
|
||||
|
||||
Search the current repo (using #githubRepo for the repo info) and list any issues you find (using #list_issues) that are assigned to me.
|
||||
|
||||
Suggest issues that I might want to focus on based on their age, the amount of comments, and their status (open/closed).
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
name: my-pull-requests
|
||||
description: 'List my pull requests in the current repository'
|
||||
---
|
||||
|
||||
Search the current repo (using #githubRepo for the repo info) and list any pull requests you find (using #list_pull_requests) that are assigned to me.
|
||||
|
||||
Describe the purpose and details of each pull request.
|
||||
|
||||
If a PR is waiting for someone to review, highlight that in the response.
|
||||
|
||||
If there were any check failures on the PR, describe them and suggest possible fixes.
|
||||
|
||||
If there was no review done by Copilot, offer to request one using #request_copilot_review.
|
||||
@@ -1,141 +0,0 @@
|
||||
---
|
||||
name: prompt-builder
|
||||
description: 'Guide users through creating high-quality GitHub Copilot prompts with proper structure, tools, and best practices.'
|
||||
---
|
||||
|
||||
# Professional Prompt Builder
|
||||
|
||||
You are an expert prompt engineer specializing in GitHub Copilot prompt development with deep knowledge of:
|
||||
- Prompt engineering best practices and patterns
|
||||
- VS Code Copilot customization capabilities
|
||||
- Effective persona design and task specification
|
||||
- Tool integration and front matter configuration
|
||||
- Output format optimization for AI consumption
|
||||
|
||||
Your task is to guide me through creating a new `.prompt.md` file by systematically gathering requirements and generating a complete, production-ready prompt file.
|
||||
|
||||
## Discovery Process
|
||||
|
||||
I will ask you targeted questions to gather all necessary information. After collecting your responses, I will generate the complete prompt file content following established patterns from this repository.
|
||||
|
||||
### 1. **Prompt Identity & Purpose**
|
||||
- What is the intended filename for your prompt (e.g., `generate-react-component.prompt.md`)?
|
||||
- Provide a clear, one-sentence description of what this prompt accomplishes
|
||||
- What category does this prompt fall into? (code generation, analysis, documentation, testing, refactoring, architecture, etc.)
|
||||
|
||||
### 2. **Persona Definition**
|
||||
- What role/expertise should Copilot embody? Be specific about:
|
||||
- Technical expertise level (junior, senior, expert, specialist)
|
||||
- Domain knowledge (languages, frameworks, tools)
|
||||
- Years of experience or specific qualifications
|
||||
- Example: "You are a senior .NET architect with 10+ years of experience in enterprise applications and extensive knowledge of C# 12, ASP.NET Core, and clean architecture patterns"
|
||||
|
||||
### 3. **Task Specification**
|
||||
- What is the primary task this prompt performs? Be explicit and measurable
|
||||
- Are there secondary or optional tasks?
|
||||
- What should the user provide as input? (selection, file, parameters, etc.)
|
||||
- What constraints or requirements must be followed?
|
||||
|
||||
### 4. **Context & Variable Requirements**
|
||||
- Will it use `${selection}` (user's selected code)?
|
||||
- Will it use `${file}` (current file) or other file references?
|
||||
- Does it need input variables like `${input:variableName}` or `${input:variableName:placeholder}`?
|
||||
- Will it reference workspace variables (`${workspaceFolder}`, etc.)?
|
||||
- Does it need to access other files or prompt files as dependencies?
|
||||
|
||||
### 5. **Detailed Instructions & Standards**
|
||||
- What step-by-step process should Copilot follow?
|
||||
- Are there specific coding standards, frameworks, or libraries to use?
|
||||
- What patterns or best practices should be enforced?
|
||||
- Are there things to avoid or constraints to respect?
|
||||
- Should it follow any existing instruction files (`.instructions.md`)?
|
||||
|
||||
### 6. **Output Requirements**
|
||||
- What format should the output be? (code, markdown, JSON, structured data, etc.)
|
||||
- Should it create new files? If so, where and with what naming convention?
|
||||
- Should it modify existing files?
|
||||
- Do you have examples of ideal output that can be used for few-shot learning?
|
||||
- Are there specific formatting or structure requirements?
|
||||
|
||||
### 7. **Tool & Capability Requirements**
|
||||
Which tools does this prompt need? Common options include:
|
||||
- **File Operations**: `codebase`, `editFiles`, `search`, `problems`
|
||||
- **Execution**: `runCommands`, `runTasks`, `runTests`, `terminalLastCommand`
|
||||
- **External**: `fetch`, `githubRepo`, `openSimpleBrowser`
|
||||
- **Specialized**: `playwright`, `usages`, `vscodeAPI`, `extensions`
|
||||
- **Analysis**: `changes`, `findTestFiles`, `testFailure`, `searchResults`
|
||||
|
||||
### 8. **Technical Configuration**
|
||||
- Should this run in a specific mode? (`agent`, `ask`, `edit`)
|
||||
- Does it require a specific model? (usually auto-detected)
|
||||
- Are there any special requirements or constraints?
|
||||
|
||||
### 9. **Quality & Validation Criteria**
|
||||
- How should success be measured?
|
||||
- What validation steps should be included?
|
||||
- Are there common failure modes to address?
|
||||
- Should it include error handling or recovery steps?
|
||||
|
||||
## Best Practices Integration
|
||||
|
||||
Based on analysis of existing prompts, I will ensure your prompt includes:
|
||||
|
||||
✅ **Clear Structure**: Well-organized sections with logical flow
|
||||
✅ **Specific Instructions**: Actionable, unambiguous directions
|
||||
✅ **Proper Context**: All necessary information for task completion
|
||||
✅ **Tool Integration**: Appropriate tool selection for the task
|
||||
✅ **Error Handling**: Guidance for edge cases and failures
|
||||
✅ **Output Standards**: Clear formatting and structure requirements
|
||||
✅ **Validation**: Criteria for measuring success
|
||||
✅ **Maintainability**: Easy to update and extend
|
||||
|
||||
## Next Steps
|
||||
|
||||
Please start by answering the questions in section 1 (Prompt Identity & Purpose). I'll guide you through each section systematically, then generate your complete prompt file.
|
||||
|
||||
## Template Generation
|
||||
|
||||
After gathering all requirements, I will generate a complete `.prompt.md` file following this structure:
|
||||
|
||||
```markdown
|
||||
---
|
||||
description: "[Clear, concise description from requirements]"
|
||||
agent: "[agent|ask|edit based on task type]"
|
||||
tools: ["[appropriate tools based on functionality]"]
|
||||
model: "[only if specific model required]"
|
||||
---
|
||||
|
||||
# [Prompt Title]
|
||||
|
||||
[Persona definition - specific role and expertise]
|
||||
|
||||
## [Task Section]
|
||||
[Clear task description with specific requirements]
|
||||
|
||||
## [Instructions Section]
|
||||
[Step-by-step instructions following established patterns]
|
||||
|
||||
## [Context/Input Section]
|
||||
[Variable usage and context requirements]
|
||||
|
||||
## [Output Section]
|
||||
[Expected output format and structure]
|
||||
|
||||
## [Quality/Validation Section]
|
||||
[Success criteria and validation steps]
|
||||
```
|
||||
|
||||
The generated prompt will follow patterns observed in high-quality prompts like:
|
||||
- **Comprehensive blueprints** (architecture-blueprint-generator)
|
||||
- **Structured specifications** (create-github-action-workflow-specification)
|
||||
- **Best practice guides** (dotnet-best-practices, csharp-xunit)
|
||||
- **Implementation plans** (create-implementation-plan)
|
||||
- **Code generation** (playwright-generate-test)
|
||||
|
||||
Each prompt will be optimized for:
|
||||
- **AI Consumption**: Token-efficient, structured content
|
||||
- **Maintainability**: Clear sections, consistent formatting
|
||||
- **Extensibility**: Easy to modify and enhance
|
||||
- **Reliability**: Comprehensive instructions and error handling
|
||||
|
||||
Please start by telling me the name and description for the new prompt you want to build.
|
||||
@@ -1,563 +0,0 @@
|
||||
---
|
||||
name: web-coder
|
||||
description: 'Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.'
|
||||
---
|
||||
|
||||
# Web Coder Skill
|
||||
|
||||
Transform into an expert 10x web development engineer with deep knowledge of web technologies, internet protocols, and industry standards. This skill enables you to communicate effectively about web concepts, implement best practices, and navigate the complex landscape of modern web development with precision and expertise.
|
||||
|
||||
Like a seasoned web architect who speaks fluently across all layers of the web stack—from HTML semantics to TCP handshakes—you can translate requirements into standards-compliant, performant, and accessible web solutions.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
- Working with HTML, CSS, JavaScript, or any web markup/styling/scripting
|
||||
- Implementing web APIs (DOM, Fetch, WebRTC, WebSockets, etc.)
|
||||
- Discussing or implementing HTTP/HTTPS protocols and networking concepts
|
||||
- Building accessible web applications (ARIA, WCAG compliance)
|
||||
- Optimizing web performance (caching, lazy loading, code splitting)
|
||||
- Implementing web security measures (CORS, CSP, authentication)
|
||||
- Working with web standards and specifications (W3C, WHATWG)
|
||||
- Debugging browser-specific issues or cross-browser compatibility
|
||||
- Setting up web servers, CDNs, or infrastructure
|
||||
- Discussing web development terminology with collaborators
|
||||
- Converting web-related requirements or descriptions into code
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Basic understanding of at least one area of web development
|
||||
- Access to web development tools (browser, editor, terminal)
|
||||
- Understanding that web development spans multiple disciplines
|
||||
|
||||
## Core Competencies
|
||||
|
||||
As a web coder, you possess expert knowledge across 15 key domains:
|
||||
|
||||
### 1. HTML & Markup
|
||||
Semantic HTML5, document structure, elements, attributes, accessibility tree, void elements, metadata, and proper markup patterns.
|
||||
|
||||
**Key Concepts**: Semantic elements, document structure, forms, metadata
|
||||
**Reference**: [HTML & Markup Reference](references/html-markup.md)
|
||||
|
||||
### 2. CSS & Styling
|
||||
Cascading stylesheets, selectors, properties, layout systems (Flexbox, Grid), responsive design, preprocessors, and modern CSS features.
|
||||
|
||||
**Key Concepts**: Selectors, box model, layouts, responsiveness, animations
|
||||
**Reference**: [CSS & Styling Reference](references/css-styling.md)
|
||||
|
||||
### 3. JavaScript & Programming
|
||||
ES6+, TypeScript, data types, functions, classes, async/await, closures, prototypes, and modern JavaScript patterns.
|
||||
|
||||
**Key Concepts**: Types, control flow, functions, async patterns, modules
|
||||
**Reference**: [JavaScript & Programming Reference](references/javascript-programming.md)
|
||||
|
||||
### 4. Web APIs & DOM
|
||||
Document Object Model, Browser APIs, Web Storage, Service Workers, WebRTC, WebGL, and modern web platform features.
|
||||
|
||||
**Key Concepts**: DOM manipulation, event handling, storage, communication
|
||||
**Reference**: [Web APIs & DOM Reference](references/web-apis-dom.md)
|
||||
|
||||
### 5. HTTP & Networking
|
||||
HTTP/1.1, HTTP/2, HTTP/3, request/response cycle, headers, status codes, REST, caching, and network fundamentals.
|
||||
|
||||
**Key Concepts**: Request methods, headers, status codes, caching strategies
|
||||
**Reference**: [HTTP & Networking Reference](references/http-networking.md)
|
||||
|
||||
### 6. Security & Authentication
|
||||
HTTPS, TLS, authentication, authorization, CORS, CSP, XSS prevention, CSRF protection, and secure coding practices.
|
||||
|
||||
**Key Concepts**: Encryption, certificates, same-origin policy, secure headers
|
||||
**Reference**: [Security & Authentication Reference](references/security-authentication.md)
|
||||
|
||||
### 7. Performance & Optimization
|
||||
Load times, rendering performance, Core Web Vitals, lazy loading, code splitting, minification, and performance budgets.
|
||||
|
||||
**Key Concepts**: LCP, FID, CLS, caching, compression, optimization techniques
|
||||
**Reference**: [Performance & Optimization Reference](references/performance-optimization.md)
|
||||
|
||||
### 8. Accessibility
|
||||
WCAG guidelines, ARIA roles and attributes, semantic HTML, screen reader compatibility, keyboard navigation, and inclusive design.
|
||||
|
||||
**Key Concepts**: ARIA, semantic markup, keyboard access, screen readers
|
||||
**Reference**: [Accessibility Reference](references/accessibility.md)
|
||||
|
||||
### 9. Web Protocols & Standards
|
||||
W3C specifications, WHATWG standards, ECMAScript versions, browser APIs, and web platform features.
|
||||
|
||||
**Key Concepts**: Standards organizations, specifications, compatibility
|
||||
**Reference**: [Web Protocols & Standards Reference](references/web-protocols-standards.md)
|
||||
|
||||
### 10. Browsers & Engines
|
||||
Chrome (Blink), Firefox (Gecko), Safari (WebKit), Edge, rendering engines, browser dev tools, and cross-browser compatibility.
|
||||
|
||||
**Key Concepts**: Rendering engines, browser differences, dev tools
|
||||
**Reference**: [Browsers & Engines Reference](references/browsers-engines.md)
|
||||
|
||||
### 11. Development Tools
|
||||
Version control (Git), IDEs, build tools, package managers, testing frameworks, CI/CD, and development workflows.
|
||||
|
||||
**Key Concepts**: Git, npm, webpack, testing, debugging, automation
|
||||
**Reference**: [Development Tools Reference](references/development-tools.md)
|
||||
|
||||
### 12. Data Formats & Encoding
|
||||
JSON, XML, Base64, character encodings (UTF-8, UTF-16), MIME types, and data serialization.
|
||||
|
||||
**Key Concepts**: JSON, character encoding, data formats, serialization
|
||||
**Reference**: [Data Formats & Encoding Reference](references/data-formats-encoding.md)
|
||||
|
||||
### 13. Media & Graphics
|
||||
Canvas, SVG, WebGL, image formats (JPEG, PNG, WebP), video/audio elements, and multimedia handling.
|
||||
|
||||
**Key Concepts**: Canvas API, SVG, image optimization, video/audio
|
||||
**Reference**: [Media & Graphics Reference](references/media-graphics.md)
|
||||
|
||||
### 14. Architecture & Patterns
|
||||
MVC, SPA, SSR, CSR, PWA, JAMstack, microservices, and web application architecture patterns.
|
||||
|
||||
**Key Concepts**: Design patterns, architecture styles, rendering strategies
|
||||
**Reference**: [Architecture & Patterns Reference](references/architecture-patterns.md)
|
||||
|
||||
### 15. Servers & Infrastructure
|
||||
Web servers, CDN, DNS, proxies, load balancing, SSL/TLS certificates, and deployment strategies.
|
||||
|
||||
**Key Concepts**: Server configuration, DNS, CDN, hosting, deployment
|
||||
**Reference**: [Servers & Infrastructure Reference](references/servers-infrastructure.md)
|
||||
|
||||
## Working with Web Terminology
|
||||
|
||||
### Accurate Translation
|
||||
|
||||
When collaborators use web terminology, ensure accurate interpretation:
|
||||
|
||||
#### Assess Terminology Accuracy
|
||||
1. **High confidence terms**: Standard terms like "API", "DOM", "HTTP" - use as stated
|
||||
2. **Ambiguous terms**: Terms with multiple meanings (e.g., "Block" - CSS box model vs code block)
|
||||
3. **Incorrect terms**: Misused terminology - translate to correct equivalent
|
||||
4. **Outdated terms**: Legacy terms - update to modern equivalents
|
||||
|
||||
#### Common Terminology Issues
|
||||
|
||||
| Collaborator Says | Likely Means | Correct Implementation |
|
||||
|-------------------|--------------|------------------------|
|
||||
| "AJAX call" | Asynchronous HTTP request | Use Fetch API or XMLHttpRequest |
|
||||
| "Make it responsive" | Mobile-friendly layout | Use media queries and responsive units |
|
||||
| "Add SSL" | Enable HTTPS | Configure TLS certificate |
|
||||
| "Fix the cache" | Update cache strategy | Adjust Cache-Control headers |
|
||||
| "Speed up the site" | Improve performance | Optimize assets, lazy load, minify |
|
||||
|
||||
### Context-Aware Responses
|
||||
|
||||
Different contexts require different interpretations:
|
||||
|
||||
**Frontend Context**:
|
||||
- "Performance" → Client-side metrics (FCP, LCP, CLS)
|
||||
- "State" → Application state management (React, Vue, etc.)
|
||||
- "Routing" → Client-side routing (SPA navigation)
|
||||
|
||||
**Backend Context**:
|
||||
- "Performance" → Server response time, throughput
|
||||
- "State" → Session management, database state
|
||||
- "Routing" → Server-side route handling
|
||||
|
||||
**DevOps Context**:
|
||||
- "Performance" → Infrastructure scaling, load times
|
||||
- "Cache" → CDN caching, server-side caching
|
||||
- "Security" → SSL/TLS, firewalls, authentication
|
||||
|
||||
## Step-by-Step Workflows
|
||||
|
||||
### Workflow 1: Implement Web Feature from Requirements
|
||||
|
||||
When given web-related requirements:
|
||||
|
||||
1. **Identify the domain** - Which of the 15 competency areas does this fall under?
|
||||
2. **Consult relevant reference** - Read the appropriate reference file for terminology and best practices
|
||||
3. **Translate terminology** - Convert colloquial terms to technical equivalents
|
||||
4. **Apply web standards** - Use W3C/WHATWG specifications as guidance
|
||||
5. **Implement with best practices** - Follow modern patterns and conventions
|
||||
6. **Validate against standards** - Check accessibility, performance, security
|
||||
|
||||
#### Example: "Make the form accessible"
|
||||
|
||||
1. **Domain**: Accessibility (Competency #8)
|
||||
2. **Reference**: [Accessibility Reference](references/accessibility.md)
|
||||
3. **Translate**: "Accessible" = WCAG compliant, screen reader friendly, keyboard navigable
|
||||
4. **Standards**: WCAG 2.1 Level AA
|
||||
5. **Implement**:
|
||||
- Add proper `<label>` elements
|
||||
- Include ARIA attributes where needed
|
||||
- Ensure keyboard navigation
|
||||
- Provide error messaging
|
||||
- Test with screen readers
|
||||
6. **Validate**: Run accessibility audit tools
|
||||
|
||||
### Workflow 2: Debug Web Issues
|
||||
|
||||
When encountering web-related problems:
|
||||
|
||||
1. **Categorize the issue** - Which layer (HTML, CSS, JS, Network, etc.)?
|
||||
2. **Use browser dev tools** - Inspect Elements, Network, Console, Performance tabs
|
||||
3. **Check browser compatibility** - Is this a cross-browser issue?
|
||||
4. **Review relevant standards** - What does the spec say should happen?
|
||||
5. **Test hypothesis** - Does fixing the root cause resolve the issue?
|
||||
6. **Implement solution** - Apply standards-compliant fix
|
||||
|
||||
### Workflow 3: Optimize Web Performance
|
||||
|
||||
When asked to improve performance:
|
||||
|
||||
1. **Measure baseline** - Use Lighthouse, WebPageTest, or performance APIs
|
||||
2. **Identify bottlenecks** - Network, rendering, JavaScript execution?
|
||||
3. **Apply targeted optimizations**:
|
||||
- **Network**: Compression, CDN, caching headers
|
||||
- **Rendering**: Critical CSS, lazy loading, image optimization
|
||||
- **JavaScript**: Code splitting, tree shaking, minification
|
||||
4. **Measure improvement** - Compare metrics to baseline
|
||||
5. **Iterate** - Continue optimizing until performance budgets are met
|
||||
|
||||
### Workflow 4: Implement Web Security
|
||||
|
||||
When implementing security features:
|
||||
|
||||
1. **Identify threats** - XSS, CSRF, injection, MitM, etc.
|
||||
2. **Apply defense in depth**:
|
||||
- **Transport**: Use HTTPS with TLS 1.3
|
||||
- **Headers**: Set CSP, HSTS, X-Frame-Options
|
||||
- **Input**: Validate and sanitize all user input
|
||||
- **Authentication**: Use secure session management
|
||||
- **Authorization**: Implement proper access controls
|
||||
3. **Test security** - Use security scanning tools
|
||||
4. **Monitor** - Set up logging and alerting
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
|
||||
- ✅ Use semantic HTML elements (`<article>`, `<nav>`, `<main>`)
|
||||
- ✅ Follow W3C and WHATWG specifications
|
||||
- ✅ Implement progressive enhancement
|
||||
- ✅ Test across multiple browsers and devices
|
||||
- ✅ Optimize for Core Web Vitals (LCP, FID, CLS)
|
||||
- ✅ Make accessibility a priority from the start
|
||||
- ✅ Use modern JavaScript features (ES6+)
|
||||
- ✅ Implement proper error handling
|
||||
- ✅ Minify and compress production assets
|
||||
- ✅ Use HTTPS everywhere
|
||||
- ✅ Follow REST principles for APIs
|
||||
- ✅ Implement proper caching strategies
|
||||
|
||||
### Don'ts
|
||||
|
||||
- ❌ Use tables for layout (use CSS Grid/Flexbox)
|
||||
- ❌ Ignore accessibility requirements
|
||||
- ❌ Skip cross-browser testing
|
||||
- ❌ Serve unoptimized images
|
||||
- ❌ Mix HTTP and HTTPS content
|
||||
- ❌ Store sensitive data in localStorage
|
||||
- ❌ Ignore performance budgets
|
||||
- ❌ Use inline styles extensively
|
||||
- ❌ Forget to validate user input
|
||||
- ❌ Implement authentication without security review
|
||||
- ❌ Use deprecated APIs or features
|
||||
- ❌ Ignore browser console warnings
|
||||
|
||||
## Common Web Development Patterns
|
||||
|
||||
### Pattern 1: Progressive Enhancement
|
||||
|
||||
Start with basic HTML, enhance with CSS, add JavaScript functionality:
|
||||
|
||||
```html
|
||||
<!-- Base HTML (works without CSS/JS) -->
|
||||
<form action="/submit" method="POST">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
```css
|
||||
/* Enhanced styling */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Enhanced interactivity
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
await fetch('/api/submit', { /* ... */ });
|
||||
});
|
||||
```
|
||||
|
||||
### Pattern 2: Responsive Design
|
||||
|
||||
Mobile-first approach with progressive enhancement:
|
||||
|
||||
```css
|
||||
/* Mobile-first base styles */
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Tablet and up */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 3: Accessible Component
|
||||
|
||||
Keyboard navigation, ARIA, semantic HTML:
|
||||
|
||||
```html
|
||||
<nav aria-label="Main navigation">
|
||||
<ul role="menubar">
|
||||
<li role="none">
|
||||
<a href="/" role="menuitem">Home</a>
|
||||
</li>
|
||||
<li role="none">
|
||||
<button
|
||||
role="menuitem"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
Products
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
### Pattern 4: Performance Optimization
|
||||
|
||||
Lazy loading, code splitting, and efficient loading:
|
||||
|
||||
```html
|
||||
<!-- Lazy load images -->
|
||||
<img
|
||||
src="placeholder.jpg"
|
||||
data-src="high-res.jpg"
|
||||
loading="lazy"
|
||||
alt="Description"
|
||||
>
|
||||
|
||||
<!-- Preload critical resources -->
|
||||
<link rel="preload" href="critical.css" as="style">
|
||||
<link rel="preconnect" href="https://api.example.com">
|
||||
|
||||
<!-- Async/defer non-critical scripts -->
|
||||
<script src="analytics.js" async></script>
|
||||
<script src="app.js" defer></script>
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Issue | Likely Cause | Solution |
|
||||
|-------|-------------|----------|
|
||||
| **CORS error** | Cross-origin request blocked | Configure CORS headers on server |
|
||||
| **Layout shift** | Images without dimensions | Add width/height attributes |
|
||||
| **Slow load time** | Unoptimized assets | Minify, compress, lazy load |
|
||||
| **Accessibility audit fails** | Missing ARIA or semantic HTML | Add labels, roles, and semantic elements |
|
||||
| **Mixed content warning** | HTTP resources on HTTPS page | Update all resources to HTTPS |
|
||||
| **JavaScript not working** | Browser compatibility issue | Use polyfills or transpile with Babel |
|
||||
| **CSS not applying** | Specificity or cascade issue | Check selector specificity and order |
|
||||
| **Form not submitting** | Validation or event handling issue | Check validation rules and event listeners |
|
||||
| **API request failing** | Network, CORS, or auth issue | Check Network tab, CORS config, auth headers |
|
||||
| **Cache not updating** | Aggressive caching | Implement cache-busting or adjust headers |
|
||||
|
||||
## Advanced Techniques
|
||||
|
||||
### 1. Performance Monitoring
|
||||
|
||||
Implement Real User Monitoring (RUM):
|
||||
|
||||
```javascript
|
||||
// Measure Core Web Vitals
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log('Performance metric:', {
|
||||
name: entry.name,
|
||||
value: entry.value,
|
||||
rating: entry.rating
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
|
||||
```
|
||||
|
||||
### 2. Advanced Accessibility
|
||||
|
||||
Create custom accessible components:
|
||||
|
||||
```javascript
|
||||
class AccessibleTabs {
|
||||
constructor(element) {
|
||||
this.tablist = element.querySelector('[role="tablist"]');
|
||||
this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
|
||||
this.panels = Array.from(element.querySelectorAll('[role="tabpanel"]'));
|
||||
|
||||
this.tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', () => this.selectTab(index));
|
||||
tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
|
||||
});
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
// Deselect all tabs
|
||||
this.tabs.forEach(tab => {
|
||||
tab.setAttribute('aria-selected', 'false');
|
||||
tab.setAttribute('tabindex', '-1');
|
||||
});
|
||||
this.panels.forEach(panel => panel.hidden = true);
|
||||
|
||||
// Select target tab
|
||||
this.tabs[index].setAttribute('aria-selected', 'true');
|
||||
this.tabs[index].setAttribute('tabindex', '0');
|
||||
this.tabs[index].focus();
|
||||
this.panels[index].hidden = false;
|
||||
}
|
||||
|
||||
handleKeydown(event, index) {
|
||||
const { key } = event;
|
||||
let newIndex = index;
|
||||
|
||||
if (key === 'ArrowRight') newIndex = (index + 1) % this.tabs.length;
|
||||
if (key === 'ArrowLeft') newIndex = (index - 1 + this.tabs.length) % this.tabs.length;
|
||||
if (key === 'Home') newIndex = 0;
|
||||
if (key === 'End') newIndex = this.tabs.length - 1;
|
||||
|
||||
if (newIndex !== index) {
|
||||
event.preventDefault();
|
||||
this.selectTab(newIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Modern CSS Techniques
|
||||
|
||||
Use modern CSS features for layouts:
|
||||
|
||||
```css
|
||||
/* Container queries (modern browsers) */
|
||||
@container (min-width: 400px) {
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS Grid with subgrid */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
/* CSS custom properties with fallbacks */
|
||||
:root {
|
||||
--primary-color: #007bff;
|
||||
--spacing: 1rem;
|
||||
}
|
||||
|
||||
.element {
|
||||
color: var(--primary-color, blue);
|
||||
padding: var(--spacing, 16px);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Security Headers
|
||||
|
||||
Implement comprehensive security headers:
|
||||
|
||||
```javascript
|
||||
// Express.js example
|
||||
app.use((req, res, next) => {
|
||||
// Content Security Policy
|
||||
res.setHeader('Content-Security-Policy',
|
||||
"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'");
|
||||
|
||||
// Strict Transport Security
|
||||
res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
|
||||
|
||||
// XSS Protection
|
||||
res.setHeader('X-Content-Type-Options', 'nosniff');
|
||||
res.setHeader('X-Frame-Options', 'DENY');
|
||||
res.setHeader('X-XSS-Protection', '1; mode=block');
|
||||
|
||||
// Referrer Policy
|
||||
res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
|
||||
|
||||
next();
|
||||
});
|
||||
```
|
||||
|
||||
## Reference Files
|
||||
|
||||
This skill includes 15 comprehensive reference files covering all aspects of web development:
|
||||
|
||||
1. [HTML & Markup](references/html-markup.md) - Semantic HTML, elements, attributes
|
||||
2. [CSS & Styling](references/css-styling.md) - Selectors, layouts, responsive design
|
||||
3. [JavaScript & Programming](references/javascript-programming.md) - ES6+, types, patterns
|
||||
4. [Web APIs & DOM](references/web-apis-dom.md) - Browser APIs, DOM manipulation
|
||||
5. [HTTP & Networking](references/http-networking.md) - Protocols, headers, REST
|
||||
6. [Security & Authentication](references/security-authentication.md) - HTTPS, auth, security
|
||||
7. [Performance & Optimization](references/performance-optimization.md) - Core Web Vitals, optimization
|
||||
8. [Accessibility](references/accessibility.md) - WCAG, ARIA, inclusive design
|
||||
9. [Web Protocols & Standards](references/web-protocols-standards.md) - W3C, WHATWG, specs
|
||||
10. [Browsers & Engines](references/browsers-engines.md) - Rendering engines, compatibility
|
||||
11. [Development Tools](references/development-tools.md) - Git, build tools, testing
|
||||
12. [Data Formats & Encoding](references/data-formats-encoding.md) - JSON, encodings, formats
|
||||
13. [Media & Graphics](references/media-graphics.md) - Canvas, SVG, images, video
|
||||
14. [Architecture & Patterns](references/architecture-patterns.md) - MVC, SPA, SSR, patterns
|
||||
15. [Servers & Infrastructure](references/servers-infrastructure.md) - Servers, CDN, deployment
|
||||
|
||||
## Validation Checklist
|
||||
|
||||
Before considering web development complete:
|
||||
|
||||
- [ ] HTML validates without errors (W3C validator)
|
||||
- [ ] CSS follows best practices and validates
|
||||
- [ ] JavaScript has no console errors
|
||||
- [ ] Accessibility audit passes (Lighthouse, axe)
|
||||
- [ ] Performance meets Core Web Vitals targets
|
||||
- [ ] Security headers are properly configured
|
||||
- [ ] Cross-browser testing completed
|
||||
- [ ] Responsive design works on all breakpoints
|
||||
- [ ] SEO meta tags are present and correct
|
||||
- [ ] Forms have proper validation and error handling
|
||||
- [ ] Images are optimized and have alt text
|
||||
- [ ] HTTPS is enforced
|
||||
- [ ] Caching strategy is implemented
|
||||
- [ ] Error handling covers edge cases
|
||||
- [ ] Code is minified and compressed for production
|
||||
|
||||
## Summary
|
||||
|
||||
The Web Coder skill transforms you into an expert 10x engineer with comprehensive knowledge across all aspects of web development. By leveraging deep understanding of web standards, protocols, and best practices—organized into 15 core competencies—you can accurately translate requirements, implement modern web solutions, and communicate effectively about web concepts with collaborators of any expertise level.
|
||||
|
||||
**Remember**: Web development is multidisciplinary. Master the fundamentals, follow standards, prioritize accessibility and performance, and always test across browsers and devices.
|
||||
@@ -1,346 +0,0 @@
|
||||
# Accessibility Reference
|
||||
|
||||
Web accessibility ensures content is usable by everyone, including people with disabilities.
|
||||
|
||||
## WCAG (Web Content Accessibility Guidelines)
|
||||
|
||||
### Levels
|
||||
- **A**: Minimum level
|
||||
- **AA**: Standard target (legal requirement in many jurisdictions)
|
||||
- **AAA**: Enhanced accessibility
|
||||
|
||||
### Four Principles (POUR)
|
||||
|
||||
1. **Perceivable**: Information presented in ways users can perceive
|
||||
2. **Operable**: UI components and navigation are operable
|
||||
3. **Understandable**: Information and UI operation is understandable
|
||||
4. **Robust**: Content works with current and future technologies
|
||||
|
||||
## ARIA (Accessible Rich Internet Applications)
|
||||
|
||||
### ARIA Roles
|
||||
|
||||
```html
|
||||
<!-- Landmark roles -->
|
||||
<nav role="navigation">
|
||||
<main role="main">
|
||||
<aside role="complementary">
|
||||
<footer role="contentinfo">
|
||||
|
||||
<!-- Widget roles -->
|
||||
<div role="button" tabindex="0">Click me</div>
|
||||
<div role="tab" aria-selected="true">Tab 1</div>
|
||||
<div role="dialog" aria-labelledby="dialogTitle">
|
||||
|
||||
<!-- Document structure -->
|
||||
<div role="list">
|
||||
<div role="listitem">Item 1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### ARIA Attributes
|
||||
|
||||
```html
|
||||
<!-- States -->
|
||||
<button aria-pressed="true">Toggle</button>
|
||||
<input aria-invalid="true" aria-errormessage="error1">
|
||||
<div aria-expanded="false" aria-controls="menu">Menu</div>
|
||||
|
||||
<!-- Properties -->
|
||||
<img alt="" aria-hidden="true">
|
||||
<input aria-label="Search" type="search">
|
||||
<dialog aria-labelledby="title" aria-describedby="desc">
|
||||
<h2 id="title">Dialog Title</h2>
|
||||
<p id="desc">Description</p>
|
||||
</dialog>
|
||||
|
||||
<!-- Relationships -->
|
||||
<label id="label1" for="input1">Name:</label>
|
||||
<input id="input1" aria-labelledby="label1">
|
||||
|
||||
<!-- Live regions -->
|
||||
<div aria-live="polite" aria-atomic="true">
|
||||
Status updated
|
||||
</div>
|
||||
```
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
### Tab Order
|
||||
|
||||
```html
|
||||
<!-- Natural tab order -->
|
||||
<button>First</button>
|
||||
<button>Second</button>
|
||||
|
||||
<!-- Custom tab order (avoid if possible) -->
|
||||
<button tabindex="1">First</button>
|
||||
<button tabindex="2">Second</button>
|
||||
|
||||
<!-- Programmatically focusable (not in tab order) -->
|
||||
<div tabindex="-1">Not in tab order</div>
|
||||
|
||||
<!-- In tab order -->
|
||||
<div tabindex="0" role="button">Custom button</div>
|
||||
```
|
||||
|
||||
### Keyboard Events
|
||||
|
||||
```javascript
|
||||
element.addEventListener('keydown', (e) => {
|
||||
switch(e.key) {
|
||||
case 'Enter':
|
||||
case ' ': // Space
|
||||
// Activate
|
||||
break;
|
||||
case 'Escape':
|
||||
// Close/cancel
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
case 'ArrowDown':
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowRight':
|
||||
// Navigate
|
||||
break;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Semantic HTML
|
||||
|
||||
```html
|
||||
<!-- ✅ Good: semantic elements -->
|
||||
<nav aria-label="Main navigation">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ❌ Bad: non-semantic -->
|
||||
<div class="nav">
|
||||
<div><a href="/">Home</a></div>
|
||||
</div>
|
||||
|
||||
<!-- ✅ Good: proper headings hierarchy -->
|
||||
<h1>Page Title</h1>
|
||||
<h2>Section</h2>
|
||||
<h3>Subsection</h3>
|
||||
|
||||
<!-- ❌ Bad: skipping levels -->
|
||||
<h1>Page Title</h1>
|
||||
<h3>Skipped h2</h3>
|
||||
```
|
||||
|
||||
## Forms Accessibility
|
||||
|
||||
```html
|
||||
<form>
|
||||
<!-- Labels -->
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required aria-required="true">
|
||||
|
||||
<!-- Error messages -->
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
aria-invalid="true"
|
||||
aria-describedby="email-error">
|
||||
<span id="email-error" role="alert">
|
||||
Please enter a valid email
|
||||
</span>
|
||||
|
||||
<!-- Fieldset for groups -->
|
||||
<fieldset>
|
||||
<legend>Choose an option</legend>
|
||||
<label>
|
||||
<input type="radio" name="option" value="a">
|
||||
Option A
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="option" value="b">
|
||||
Option B
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Help text -->
|
||||
<label for="password">Password:</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
aria-describedby="password-help">
|
||||
<span id="password-help">
|
||||
Must be at least 8 characters
|
||||
</span>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Images and Media
|
||||
|
||||
```html
|
||||
<!-- Informative image -->
|
||||
<img src="chart.png" alt="Sales increased 50% in Q1">
|
||||
|
||||
<!-- Decorative image -->
|
||||
<img src="decorative.png" alt="" role="presentation">
|
||||
|
||||
<!-- Complex image -->
|
||||
<figure>
|
||||
<img src="data-viz.png" alt="Sales data visualization">
|
||||
<figcaption>
|
||||
Detailed description of the data...
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Video with captions -->
|
||||
<video controls>
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
<track kind="captions" src="captions.vtt" srclang="en" label="English">
|
||||
</video>
|
||||
```
|
||||
|
||||
## Color and Contrast
|
||||
|
||||
### WCAG Requirements
|
||||
|
||||
- **Level AA**: 4.5:1 for normal text, 3:1 for large text
|
||||
- **Level AAA**: 7:1 for normal text, 4.5:1 for large text
|
||||
|
||||
```css
|
||||
/* ✅ Good contrast */
|
||||
.text {
|
||||
color: #000; /* Black */
|
||||
background: #fff; /* White */
|
||||
/* Contrast: 21:1 */
|
||||
}
|
||||
|
||||
/* Don't rely on color alone */
|
||||
.error {
|
||||
color: red;
|
||||
/* ✅ Also use icon or text */
|
||||
&::before {
|
||||
content: '⚠ ';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Screen Readers
|
||||
|
||||
### Best Practices
|
||||
|
||||
```html
|
||||
<!-- Skip links for navigation -->
|
||||
<a href="#main-content" class="skip-link">
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
<!-- Accessible headings -->
|
||||
<h1>Main heading (only one)</h1>
|
||||
|
||||
<!-- Descriptive links -->
|
||||
<!-- ❌ Bad -->
|
||||
<a href="/article">Read more</a>
|
||||
|
||||
<!-- ✅ Good -->
|
||||
<a href="/article">Read more about accessibility</a>
|
||||
|
||||
<!-- Hidden content (screen reader only) -->
|
||||
<span class="sr-only">
|
||||
Additional context for screen readers
|
||||
</span>
|
||||
```
|
||||
|
||||
```css
|
||||
/* Screen reader only class */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## Focus Management
|
||||
|
||||
```css
|
||||
/* Visible focus indicator */
|
||||
:focus {
|
||||
outline: 2px solid #005fcc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Don't remove focus entirely */
|
||||
/* ❌ Bad */
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ✅ Good: custom focus style */
|
||||
:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Focus management in modal
|
||||
function openModal() {
|
||||
modal.showModal();
|
||||
modal.querySelector('button').focus();
|
||||
|
||||
// Trap focus
|
||||
modal.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Tab') {
|
||||
trapFocus(e, modal);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Testing Tools
|
||||
|
||||
- **axe DevTools**: Browser extension
|
||||
- **WAVE**: Web accessibility evaluation tool
|
||||
- **NVDA**: Screen reader (Windows)
|
||||
- **JAWS**: Screen reader (Windows)
|
||||
- **VoiceOver**: Screen reader (macOS/iOS)
|
||||
- **Lighthouse**: Automated audits
|
||||
|
||||
## Checklist
|
||||
|
||||
- [ ] Semantic HTML used
|
||||
- [ ] All images have alt text
|
||||
- [ ] Color contrast meets WCAG AA
|
||||
- [ ] Keyboard navigation works
|
||||
- [ ] Focus indicators visible
|
||||
- [ ] Forms have labels
|
||||
- [ ] Heading hierarchy correct
|
||||
- [ ] ARIA used appropriately
|
||||
- [ ] Screen reader tested
|
||||
- [ ] No keyboard traps
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Accessibility
|
||||
- Accessibility tree
|
||||
- Accessible description
|
||||
- Accessible name
|
||||
- ARIA
|
||||
- ATAG
|
||||
- Boolean attribute (ARIA)
|
||||
- Screen reader
|
||||
- UAAG
|
||||
- WAI
|
||||
- WCAG
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
|
||||
- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
|
||||
- [WebAIM](https://webaim.org/)
|
||||
- [A11y Project](https://www.a11yproject.com/)
|
||||
@@ -1,625 +0,0 @@
|
||||
# Architecture & Patterns Reference
|
||||
|
||||
Web application architectures, design patterns, and architectural concepts.
|
||||
|
||||
## Application Architectures
|
||||
|
||||
### Single Page Application (SPA)
|
||||
|
||||
Web app that loads single HTML page and dynamically updates content.
|
||||
|
||||
**Characteristics**:
|
||||
- Client-side routing
|
||||
- Heavy JavaScript usage
|
||||
- Fast navigation after initial load
|
||||
- Complex state management
|
||||
|
||||
**Pros**:
|
||||
- Smooth user experience
|
||||
- Reduced server load
|
||||
- Mobile app-like feel
|
||||
|
||||
**Cons**:
|
||||
- Larger initial download
|
||||
- SEO challenges (mitigated with SSR)
|
||||
- Complex state management
|
||||
|
||||
**Examples**: React, Vue, Angular apps
|
||||
|
||||
```javascript
|
||||
// React Router example
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/products/:id" element={<Product />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Multi-Page Application (MPA)
|
||||
|
||||
Traditional web app with multiple HTML pages.
|
||||
|
||||
**Characteristics**:
|
||||
- Server renders each page
|
||||
- Full page reload on navigation
|
||||
- Simpler architecture
|
||||
|
||||
**Pros**:
|
||||
- Better SEO out of the box
|
||||
- Simpler to build
|
||||
- Good for content-heavy sites
|
||||
|
||||
**Cons**:
|
||||
- Slower navigation
|
||||
- More server requests
|
||||
|
||||
### Progressive Web App (PWA)
|
||||
|
||||
Web app with native app capabilities.
|
||||
|
||||
**Features**:
|
||||
- Installable
|
||||
- Offline support (Service Workers)
|
||||
- Push notifications
|
||||
- App-like experience
|
||||
|
||||
```javascript
|
||||
// Service Worker registration
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then(reg => console.log('SW registered', reg))
|
||||
.catch(err => console.error('SW error', err));
|
||||
}
|
||||
```
|
||||
|
||||
**manifest.json**:
|
||||
```json
|
||||
{
|
||||
"name": "My PWA",
|
||||
"short_name": "PWA",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#000000",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Server-Side Rendering (SSR)
|
||||
|
||||
Render pages on server, send HTML to client.
|
||||
|
||||
**Pros**:
|
||||
- Better SEO
|
||||
- Faster first contentful paint
|
||||
- Works without JavaScript
|
||||
|
||||
**Cons**:
|
||||
- Higher server load
|
||||
- More complex setup
|
||||
|
||||
**Frameworks**: Next.js, Nuxt.js, SvelteKit
|
||||
|
||||
```javascript
|
||||
// Next.js SSR
|
||||
export async function getServerSideProps() {
|
||||
const data = await fetchData();
|
||||
return { props: { data } };
|
||||
}
|
||||
|
||||
function Page({ data }) {
|
||||
return <div>{data.title}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### Static Site Generation (SSG)
|
||||
|
||||
Pre-render pages at build time.
|
||||
|
||||
**Pros**:
|
||||
- Extremely fast
|
||||
- Low server cost
|
||||
- Great SEO
|
||||
|
||||
**Best for**: Blogs, documentation, marketing sites
|
||||
|
||||
**Tools**: Next.js, Gatsby, Hugo, Jekyll, Eleventy
|
||||
|
||||
```javascript
|
||||
// Next.js SSG
|
||||
export async function getStaticProps() {
|
||||
const data = await fetchData();
|
||||
return { props: { data } };
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const paths = await fetchPaths();
|
||||
return { paths, fallback: false };
|
||||
}
|
||||
```
|
||||
|
||||
### Incremental Static Regeneration (ISR)
|
||||
|
||||
Update static content after build.
|
||||
|
||||
```javascript
|
||||
// Next.js ISR
|
||||
export async function getStaticProps() {
|
||||
const data = await fetchData();
|
||||
return {
|
||||
props: { data },
|
||||
revalidate: 60 // Revalidate every 60 seconds
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### JAMstack
|
||||
|
||||
JavaScript, APIs, Markup architecture.
|
||||
|
||||
**Principles**:
|
||||
- Pre-rendered static files
|
||||
- APIs for dynamic functionality
|
||||
- Git-based workflows
|
||||
- CDN deployment
|
||||
|
||||
**Benefits**:
|
||||
- Fast performance
|
||||
- High security
|
||||
- Scalability
|
||||
- Developer experience
|
||||
|
||||
## Rendering Patterns
|
||||
|
||||
### Client-Side Rendering (CSR)
|
||||
|
||||
JavaScript renders content in browser.
|
||||
|
||||
```html
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
// React renders app here
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
</script>
|
||||
```
|
||||
|
||||
### Hydration
|
||||
|
||||
Attach JavaScript to server-rendered HTML.
|
||||
|
||||
```javascript
|
||||
// React hydration
|
||||
ReactDOM.hydrate(<App />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
### Partial Hydration
|
||||
|
||||
Hydrate only interactive components.
|
||||
|
||||
**Tools**: Astro, Qwik
|
||||
|
||||
### Islands Architecture
|
||||
|
||||
Independent interactive components in static HTML.
|
||||
|
||||
**Concept**: Ship minimal JavaScript, hydrate only "islands" of interactivity
|
||||
|
||||
**Frameworks**: Astro, Eleventy with Islands
|
||||
|
||||
## Design Patterns
|
||||
|
||||
### MVC (Model-View-Controller)
|
||||
|
||||
Separate data, presentation, and logic.
|
||||
|
||||
- **Model**: Data and business logic
|
||||
- **View**: UI presentation
|
||||
- **Controller**: Handle input, update model/view
|
||||
|
||||
### MVVM (Model-View-ViewModel)
|
||||
|
||||
Similar to MVC with data binding.
|
||||
|
||||
- **Model**: Data
|
||||
- **View**: UI
|
||||
- **ViewModel**: View logic and state
|
||||
|
||||
**Used in**: Vue.js, Angular, Knockout
|
||||
|
||||
### Component-Based Architecture
|
||||
|
||||
Build UI from reusable components.
|
||||
|
||||
```javascript
|
||||
// React component
|
||||
function Button({ onClick, children }) {
|
||||
return (
|
||||
<button onClick={onClick} className="btn">
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Usage
|
||||
<Button onClick={handleClick}>Click me</Button>
|
||||
```
|
||||
|
||||
### Micro Frontends
|
||||
|
||||
Split frontend into smaller, independent apps.
|
||||
|
||||
**Approaches**:
|
||||
- Build-time integration
|
||||
- Run-time integration (iframes, Web Components)
|
||||
- Edge-side includes
|
||||
|
||||
## State Management
|
||||
|
||||
### Local State
|
||||
|
||||
Component-level state.
|
||||
|
||||
```javascript
|
||||
// React useState
|
||||
function Counter() {
|
||||
const [count, setCount] = useState(0);
|
||||
return <button onClick={() => setCount(count + 1)}>{count}</button>;
|
||||
}
|
||||
```
|
||||
|
||||
### Global State
|
||||
|
||||
Application-wide state.
|
||||
|
||||
**Solutions**:
|
||||
- **Redux**: Predictable state container
|
||||
- **MobX**: Observable state
|
||||
- **Zustand**: Minimal state management
|
||||
- **Recoil**: Atomic state management
|
||||
|
||||
```javascript
|
||||
// Redux example
|
||||
import { createSlice, configureStore } from '@reduxjs/toolkit';
|
||||
|
||||
const counterSlice = createSlice({
|
||||
name: 'counter',
|
||||
initialState: { value: 0 },
|
||||
reducers: {
|
||||
increment: state => { state.value += 1; }
|
||||
}
|
||||
});
|
||||
|
||||
const store = configureStore({
|
||||
reducer: { counter: counterSlice.reducer }
|
||||
});
|
||||
```
|
||||
|
||||
### Context API
|
||||
|
||||
Share state without prop drilling.
|
||||
|
||||
```javascript
|
||||
// React Context
|
||||
const ThemeContext = React.createContext('light');
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeContext.Provider value="dark">
|
||||
<Toolbar />
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function Toolbar() {
|
||||
const theme = useContext(ThemeContext);
|
||||
return <div className={theme}>...</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## API Architecture Patterns
|
||||
|
||||
### REST (Representational State Transfer)
|
||||
|
||||
Resource-based API design.
|
||||
|
||||
```javascript
|
||||
// RESTful API
|
||||
GET /api/users // List users
|
||||
GET /api/users/1 // Get user
|
||||
POST /api/users // Create user
|
||||
PUT /api/users/1 // Update user
|
||||
DELETE /api/users/1 // Delete user
|
||||
```
|
||||
|
||||
### GraphQL
|
||||
|
||||
Query language for APIs.
|
||||
|
||||
```graphql
|
||||
# Query
|
||||
query {
|
||||
user(id: "1") {
|
||||
name
|
||||
email
|
||||
posts {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# Mutation
|
||||
mutation {
|
||||
createUser(name: "John", email: "john@example.com") {
|
||||
id
|
||||
name
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Apollo Client
|
||||
import { useQuery, gql } from '@apollo/client';
|
||||
|
||||
const GET_USER = gql`
|
||||
query GetUser($id: ID!) {
|
||||
user(id: $id) {
|
||||
name
|
||||
email
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function User({ id }) {
|
||||
const { loading, error, data } = useQuery(GET_USER, {
|
||||
variables: { id }
|
||||
});
|
||||
|
||||
if (loading) return <p>Loading...</p>;
|
||||
return <p>{data.user.name}</p>;
|
||||
}
|
||||
```
|
||||
|
||||
### tRPC
|
||||
|
||||
End-to-end typesafe APIs.
|
||||
|
||||
```typescript
|
||||
// Server
|
||||
const appRouter = router({
|
||||
getUser: publicProcedure
|
||||
.input(z.string())
|
||||
.query(async ({ input }) => {
|
||||
return await db.user.findUnique({ where: { id: input } });
|
||||
})
|
||||
});
|
||||
|
||||
// Client (fully typed!)
|
||||
const user = await trpc.getUser.query('1');
|
||||
```
|
||||
|
||||
## Microservices Architecture
|
||||
|
||||
Split application into small, independent services.
|
||||
|
||||
**Characteristics**:
|
||||
- Independent deployment
|
||||
- Service-specific databases
|
||||
- API communication
|
||||
- Decentralized governance
|
||||
|
||||
**Benefits**:
|
||||
- Scalability
|
||||
- Technology flexibility
|
||||
- Fault isolation
|
||||
|
||||
**Challenges**:
|
||||
- Complexity
|
||||
- Network latency
|
||||
- Data consistency
|
||||
|
||||
## Monolithic Architecture
|
||||
|
||||
Single, unified application.
|
||||
|
||||
**Pros**:
|
||||
- Simpler development
|
||||
- Easier debugging
|
||||
- Single deployment
|
||||
|
||||
**Cons**:
|
||||
- Scaling challenges
|
||||
- Technology lock-in
|
||||
- Tight coupling
|
||||
|
||||
## Serverless Architecture
|
||||
|
||||
Run code without managing servers.
|
||||
|
||||
**Platforms**: AWS Lambda, Vercel Functions, Netlify Functions, Cloudflare Workers
|
||||
|
||||
```javascript
|
||||
// Vercel serverless function
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ message: 'Hello from serverless!' });
|
||||
}
|
||||
```
|
||||
|
||||
**Benefits**:
|
||||
- Auto-scaling
|
||||
- Pay per use
|
||||
- No server management
|
||||
|
||||
**Use Cases**:
|
||||
- APIs
|
||||
- Background jobs
|
||||
- Webhooks
|
||||
- Image processing
|
||||
|
||||
## Architectural Best Practices
|
||||
|
||||
### Separation of Concerns
|
||||
|
||||
Keep different aspects separate:
|
||||
- Presentation layer
|
||||
- Business logic layer
|
||||
- Data access layer
|
||||
|
||||
### DRY (Don't Repeat Yourself)
|
||||
|
||||
Avoid code duplication.
|
||||
|
||||
### SOLID Principles
|
||||
|
||||
- **S**ingle Responsibility
|
||||
- **O**pen/Closed
|
||||
- **L**iskov Substitution
|
||||
- **I**nterface Segregation
|
||||
- **D**ependency Inversion
|
||||
|
||||
### Composition over Inheritance
|
||||
|
||||
Prefer composing objects over class hierarchies.
|
||||
|
||||
```javascript
|
||||
// Composition
|
||||
function withLogging(Component) {
|
||||
return function LoggedComponent(props) {
|
||||
console.log('Rendering', Component.name);
|
||||
return <Component {...props} />;
|
||||
};
|
||||
}
|
||||
|
||||
const LoggedButton = withLogging(Button);
|
||||
```
|
||||
|
||||
## Module Systems
|
||||
|
||||
### ES Modules (ESM)
|
||||
|
||||
Modern JavaScript modules.
|
||||
|
||||
```javascript
|
||||
// export
|
||||
export const name = 'John';
|
||||
export function greet() {}
|
||||
export default App;
|
||||
|
||||
// import
|
||||
import App from './App.js';
|
||||
import { name, greet } from './utils.js';
|
||||
import * as utils from './utils.js';
|
||||
```
|
||||
|
||||
### CommonJS
|
||||
|
||||
Node.js module system.
|
||||
|
||||
```javascript
|
||||
// export
|
||||
module.exports = { name: 'John' };
|
||||
exports.greet = function() {};
|
||||
|
||||
// import
|
||||
const { name } = require('./utils');
|
||||
```
|
||||
|
||||
## Build Optimization
|
||||
|
||||
### Code Splitting
|
||||
|
||||
Split code into smaller chunks.
|
||||
|
||||
```javascript
|
||||
// React lazy loading
|
||||
const OtherComponent = React.lazy(() => import('./OtherComponent'));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<OtherComponent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Tree Shaking
|
||||
|
||||
Remove unused code.
|
||||
|
||||
```javascript
|
||||
// Only imports 'map', not entire lodash
|
||||
import { map } from 'lodash-es';
|
||||
```
|
||||
|
||||
### Bundle Splitting
|
||||
|
||||
- **Vendor bundle**: Third-party dependencies
|
||||
- **App bundle**: Application code
|
||||
- **Route bundles**: Per-route code
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Abstraction
|
||||
- API
|
||||
- Application
|
||||
- Architecture
|
||||
- Asynchronous
|
||||
- Binding
|
||||
- Block (CSS, JS)
|
||||
- Call stack
|
||||
- Class
|
||||
- Client-side
|
||||
- Control flow
|
||||
- Delta
|
||||
- Design pattern
|
||||
- Event
|
||||
- Fetch
|
||||
- First-class Function
|
||||
- Function
|
||||
- Garbage collection
|
||||
- Grid
|
||||
- Hoisting
|
||||
- Hydration
|
||||
- Idempotent
|
||||
- Instance
|
||||
- Lazy load
|
||||
- Main thread
|
||||
- MVC
|
||||
|
||||
- Polyfill
|
||||
- Progressive Enhancement
|
||||
- Progressive web apps
|
||||
- Property
|
||||
- Prototype
|
||||
- Prototype-based programming
|
||||
- REST
|
||||
- Reflow
|
||||
- Round Trip Time (RTT)
|
||||
- SPA
|
||||
- Semantics
|
||||
- Server
|
||||
- Synthetic monitoring
|
||||
- Thread
|
||||
- Type
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Patterns.dev](https://www.patterns.dev/)
|
||||
- [React Patterns](https://reactpatterns.com/)
|
||||
- [JAMstack](https://jamstack.org/)
|
||||
- [Micro Frontends](https://micro-frontends.org/)
|
||||
@@ -1,358 +0,0 @@
|
||||
# Browsers & Engines Reference
|
||||
|
||||
Web browsers, rendering engines, and browser-specific information.
|
||||
|
||||
## Major Browsers
|
||||
|
||||
### Google Chrome
|
||||
|
||||
**Engine**: Blink (rendering), V8 (JavaScript)
|
||||
**Released**: 2008
|
||||
**Market Share**: ~65% (desktop)
|
||||
|
||||
**Developer Tools**:
|
||||
- Elements panel
|
||||
- Console
|
||||
- Network tab
|
||||
- Performance profiler
|
||||
- Lighthouse audits
|
||||
|
||||
### Mozilla Firefox
|
||||
|
||||
**Engine**: Gecko (rendering), SpiderMonkey (JavaScript)
|
||||
**Released**: 2004
|
||||
**Market Share**: ~3% (desktop)
|
||||
|
||||
**Features**:
|
||||
- Strong privacy focus
|
||||
- Container tabs
|
||||
- Enhanced tracking protection
|
||||
- Developer Edition
|
||||
|
||||
### Apple Safari
|
||||
|
||||
**Engine**: WebKit (rendering), JavaScriptCore (JavaScript)
|
||||
**Released**: 2003
|
||||
**Market Share**: ~20% (desktop), dominant on iOS
|
||||
|
||||
**Features**:
|
||||
- Energy efficient
|
||||
- Privacy-focused
|
||||
- Intelligent Tracking Prevention
|
||||
- Only browser allowed on iOS
|
||||
|
||||
### Microsoft Edge
|
||||
|
||||
**Engine**: Blink (Chromium-based since 2020)
|
||||
**Released**: 2015 (EdgeHTML), 2020 (Chromium)
|
||||
|
||||
**Features**:
|
||||
- Windows integration
|
||||
- Collections
|
||||
- Vertical tabs
|
||||
- IE Mode (compatibility)
|
||||
|
||||
### Opera
|
||||
|
||||
**Engine**: Blink
|
||||
**Based on**: Chromium
|
||||
|
||||
**Features**:
|
||||
- Built-in VPN
|
||||
- Ad blocker
|
||||
- Sidebar
|
||||
|
||||
## Rendering Engines
|
||||
|
||||
### Blink
|
||||
|
||||
**Used by**: Chrome, Edge, Opera, Vivaldi
|
||||
**Forked from**: WebKit (2013)
|
||||
**Language**: C++
|
||||
|
||||
### WebKit
|
||||
|
||||
**Used by**: Safari
|
||||
**Origin**: KHTML (KDE)
|
||||
**Language**: C++
|
||||
|
||||
### Gecko
|
||||
|
||||
**Used by**: Firefox
|
||||
**Developed by**: Mozilla
|
||||
**Language**: C++, Rust
|
||||
|
||||
### Legacy Engines
|
||||
|
||||
- **Trident**: Internet Explorer (deprecated)
|
||||
- **EdgeHTML**: Original Edge (deprecated)
|
||||
- **Presto**: Old Opera (deprecated)
|
||||
|
||||
## JavaScript Engines
|
||||
|
||||
| Engine | Browser | Language |
|
||||
|--------|---------|----------|
|
||||
| V8 | Chrome, Edge | C++ |
|
||||
| SpiderMonkey | Firefox | C++, Rust |
|
||||
| JavaScriptCore | Safari | C++ |
|
||||
| Chakra | IE/Edge (legacy) | C++ |
|
||||
|
||||
### V8 Features
|
||||
|
||||
- JIT compilation
|
||||
- Inline caching
|
||||
- Hidden classes
|
||||
- Garbage collection
|
||||
- WASM support
|
||||
|
||||
## Browser DevTools
|
||||
|
||||
### Chrome DevTools
|
||||
|
||||
```javascript
|
||||
// Console API
|
||||
console.log('message');
|
||||
console.table(array);
|
||||
console.time('label');
|
||||
console.timeEnd('label');
|
||||
|
||||
// Command Line API
|
||||
$() // document.querySelector()
|
||||
$$() // document.querySelectorAll()
|
||||
$x() // XPath query
|
||||
copy(object) // Copy to clipboard
|
||||
monitor(function) // Log function calls
|
||||
```
|
||||
|
||||
**Panels**:
|
||||
- Elements: DOM inspection
|
||||
- Console: JavaScript console
|
||||
- Sources: Debugger
|
||||
- Network: HTTP requests
|
||||
- Performance: Profiling
|
||||
- Memory: Heap snapshots
|
||||
- Application: Storage, service workers
|
||||
- Security: Certificate info
|
||||
- Lighthouse: Audits
|
||||
|
||||
### Firefox DevTools
|
||||
|
||||
**Unique Features**:
|
||||
- CSS Grid Inspector
|
||||
- Font Editor
|
||||
- Accessibility Inspector
|
||||
- Network throttling
|
||||
|
||||
## Cross-Browser Compatibility
|
||||
|
||||
### Browser Prefixes (Vendor Prefixes)
|
||||
|
||||
```css
|
||||
/* Legacy - use autoprefixer instead */
|
||||
.element {
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari */
|
||||
-moz-transform: rotate(45deg); /* Firefox */
|
||||
-ms-transform: rotate(45deg); /* IE */
|
||||
-o-transform: rotate(45deg); /* Opera */
|
||||
transform: rotate(45deg); /* Standard */
|
||||
}
|
||||
```
|
||||
|
||||
**Modern approach**: Use build tools (Autoprefixer)
|
||||
|
||||
### User Agent String
|
||||
|
||||
```javascript
|
||||
// Check browser
|
||||
const userAgent = navigator.userAgent;
|
||||
|
||||
if (userAgent.includes('Firefox')) {
|
||||
// Firefox-specific code
|
||||
} else if (userAgent.includes('Chrome')) {
|
||||
// Chrome-specific code
|
||||
}
|
||||
|
||||
// Better: Feature detection
|
||||
if ('serviceWorker' in navigator) {
|
||||
// Modern browser
|
||||
}
|
||||
```
|
||||
|
||||
### Graceful Degradation vs Progressive Enhancement
|
||||
|
||||
**Graceful Degradation**: Build for modern, degrade for old
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: grid; /* Modern browsers */
|
||||
display: block; /* Fallback */
|
||||
}
|
||||
```
|
||||
|
||||
**Progressive Enhancement**: Build base, enhance for modern
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: block; /* Base */
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
.container {
|
||||
display: grid; /* Enhancement */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Browser Features
|
||||
|
||||
### Service Workers
|
||||
|
||||
Background scripts for offline functionality
|
||||
|
||||
**Supported**: All modern browsers
|
||||
|
||||
### WebAssembly
|
||||
|
||||
Binary instruction format for web
|
||||
|
||||
**Supported**: All modern browsers
|
||||
|
||||
### Web Components
|
||||
|
||||
Custom HTML elements
|
||||
|
||||
**Supported**: All modern browsers (with polyfills)
|
||||
|
||||
### WebRTC
|
||||
|
||||
Real-time communication
|
||||
|
||||
**Supported**: All modern browsers
|
||||
|
||||
## Browser Storage
|
||||
|
||||
| Storage | Size | Expiration | Scope |
|
||||
|---------|------|------------|-------|
|
||||
| Cookies | 4KB | Configurable | Domain |
|
||||
| LocalStorage | 5-10MB | Never | Origin |
|
||||
| SessionStorage | 5-10MB | Tab close | Origin |
|
||||
| IndexedDB | 50MB+ | Never | Origin |
|
||||
|
||||
## Mobile Browsers
|
||||
|
||||
### iOS Safari
|
||||
|
||||
- Only browser allowed on iOS
|
||||
- All iOS browsers use WebKit
|
||||
- Different from desktop Safari
|
||||
|
||||
### Chrome Mobile (Android)
|
||||
|
||||
- Blink engine
|
||||
- Similar to desktop Chrome
|
||||
|
||||
### Samsung Internet
|
||||
|
||||
- Based on Chromium
|
||||
- Popular on Samsung devices
|
||||
|
||||
## Browser Market Share (2026)
|
||||
|
||||
**Desktop**:
|
||||
- Chrome: ~65%
|
||||
- Safari: ~20%
|
||||
- Edge: ~5%
|
||||
- Firefox: ~3%
|
||||
- Other: ~7%
|
||||
|
||||
**Mobile**:
|
||||
- Chrome: ~65%
|
||||
- Safari: ~25%
|
||||
- Samsung Internet: ~5%
|
||||
- Other: ~5%
|
||||
|
||||
## Testing Browsers
|
||||
|
||||
### Tools
|
||||
|
||||
- **BrowserStack**: Cloud browser testing
|
||||
- **Sauce Labs**: Automated testing
|
||||
- **CrossBrowserTesting**: Live testing
|
||||
- **LambdaTest**: Cross-browser testing
|
||||
|
||||
### Virtual Machines
|
||||
|
||||
- **VirtualBox**: Free virtualization
|
||||
- **Parallels**: Mac virtualization
|
||||
- **Windows Dev VMs**: Free Windows VMs
|
||||
|
||||
## Developer Features
|
||||
|
||||
### Chromium-based Developer Features
|
||||
|
||||
- **Remote Debugging**: Debug mobile devices
|
||||
- **Workspaces**: Edit files directly
|
||||
- **Snippets**: Reusable code snippets
|
||||
- **Coverage**: Unused code detection
|
||||
|
||||
### Firefox Developer Edition
|
||||
|
||||
- **CSS Grid Inspector**
|
||||
- **Flexbox Inspector**
|
||||
- **Font Panel**
|
||||
- **Accessibility Audits**
|
||||
|
||||
## Browser Extensions
|
||||
|
||||
### Manifest V3 (Modern)
|
||||
|
||||
```json
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "My Extension",
|
||||
"version": "1.0",
|
||||
"permissions": ["storage", "activeTab"],
|
||||
"action": {
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"content_scripts": [{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["content.js"]
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Apple Safari
|
||||
- Blink
|
||||
- blink element
|
||||
- Browser
|
||||
- Browsing context
|
||||
- Chrome
|
||||
- Developer tools
|
||||
- Engine
|
||||
- Firefox OS
|
||||
- Gecko
|
||||
- Google Chrome
|
||||
- JavaScript engine
|
||||
- Microsoft Edge
|
||||
- Microsoft Internet Explorer
|
||||
- Mozilla Firefox
|
||||
- Netscape Navigator
|
||||
- Opera browser
|
||||
- Presto
|
||||
- Rendering engine
|
||||
- Trident
|
||||
- User agent
|
||||
- Vendor prefix
|
||||
- WebKit
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
|
||||
- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/)
|
||||
- [Safari Web Inspector](https://developer.apple.com/safari/tools/)
|
||||
- [Can I Use](https://caniuse.com/)
|
||||
- [Browser Market Share](https://gs.statcounter.com/)
|
||||
@@ -1,696 +0,0 @@
|
||||
# CSS & Styling Reference
|
||||
|
||||
Comprehensive reference for Cascading Style Sheets, layout systems, and modern styling techniques.
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### CSS (Cascading Style Sheets)
|
||||
|
||||
Style sheet language used for describing the presentation of HTML documents.
|
||||
|
||||
**Three Ways to Apply CSS**:
|
||||
|
||||
1. **Inline**: `<div style="color: blue;">`
|
||||
2. **Internal**: `<style>` tag in HTML
|
||||
3. **External**: Separate `.css` file (recommended)
|
||||
|
||||
### The Cascade
|
||||
|
||||
The algorithm that determines which CSS rules apply when multiple rules target the same element.
|
||||
|
||||
**Priority Order** (highest to lowest):
|
||||
|
||||
1. Inline styles
|
||||
2. ID selectors (`#id`)
|
||||
3. Class selectors (`.class`), attribute selectors, pseudo-classes
|
||||
4. Element selectors (`div`, `p`)
|
||||
5. Inherited properties
|
||||
|
||||
**Important**: `!important` declaration overrides normal specificity (use sparingly)
|
||||
|
||||
### CSS Selectors
|
||||
|
||||
| Selector | Example | Description |
|
||||
|----------|---------|-------------|
|
||||
| Element | `p` | Selects all `<p>` elements |
|
||||
| Class | `.button` | Selects elements with `class="button"` |
|
||||
| ID | `#header` | Selects element with `id="header"` |
|
||||
| Universal | `*` | Selects all elements |
|
||||
| Descendant | `div p` | `<p>` inside `<div>` (any level) |
|
||||
| Child | `div > p` | Direct child `<p>` of `<div>` |
|
||||
| Adjacent Sibling | `h1 + p` | `<p>` immediately after `<h1>` |
|
||||
| General Sibling | `h1 ~ p` | All `<p>` siblings after `<h1>` |
|
||||
| Attribute | `[type="text"]` | Elements with specific attribute |
|
||||
| Attribute Contains | `[href*="example"]` | Contains substring |
|
||||
| Attribute Starts | `[href^="https"]` | Starts with string |
|
||||
| Attribute Ends | `[href$=".pdf"]` | Ends with string |
|
||||
|
||||
### Pseudo-Classes
|
||||
|
||||
Target elements based on state or position:
|
||||
|
||||
```css
|
||||
/* Link states */
|
||||
a:link { color: blue; }
|
||||
a:visited { color: purple; }
|
||||
a:hover { color: red; }
|
||||
a:active { color: orange; }
|
||||
a:focus { outline: 2px solid blue; }
|
||||
|
||||
/* Structural */
|
||||
li:first-child { font-weight: bold; }
|
||||
li:last-child { border-bottom: none; }
|
||||
li:nth-child(odd) { background: #f0f0f0; }
|
||||
li:nth-child(3n) { color: red; }
|
||||
p:not(.special) { color: gray; }
|
||||
|
||||
/* Form states */
|
||||
input:required { border-color: red; }
|
||||
input:valid { border-color: green; }
|
||||
input:invalid { border-color: red; }
|
||||
input:disabled { opacity: 0.5; }
|
||||
input:checked + label { font-weight: bold; }
|
||||
```
|
||||
|
||||
### Pseudo-Elements
|
||||
|
||||
Style specific parts of elements:
|
||||
|
||||
```css
|
||||
/* First line/letter */
|
||||
p::first-line { font-weight: bold; }
|
||||
p::first-letter { font-size: 2em; }
|
||||
|
||||
/* Generated content */
|
||||
.quote::before { content: '"'; }
|
||||
.quote::after { content: '"'; }
|
||||
|
||||
/* Selection */
|
||||
::selection { background: yellow; color: black; }
|
||||
|
||||
/* Placeholder */
|
||||
input::placeholder { color: #999; }
|
||||
```
|
||||
|
||||
## Box Model
|
||||
|
||||
Every element is a rectangular box with:
|
||||
|
||||
1. **Content**: The actual content (text, images)
|
||||
2. **Padding**: Space around content, inside border
|
||||
3. **Border**: Line around padding
|
||||
4. **Margin**: Space outside border
|
||||
|
||||
```css
|
||||
.box {
|
||||
/* Content size */
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
|
||||
/* Padding */
|
||||
padding: 20px; /* All sides */
|
||||
padding: 10px 20px; /* Vertical | Horizontal */
|
||||
padding: 10px 20px 15px 25px; /* Top | Right | Bottom | Left */
|
||||
|
||||
/* Border */
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
|
||||
/* Margin */
|
||||
margin: 20px auto; /* Vertical | Horizontal (auto centers) */
|
||||
|
||||
/* Box-sizing changes how width/height work */
|
||||
box-sizing: border-box; /* Include padding/border in width/height */
|
||||
}
|
||||
```
|
||||
|
||||
## Layout Systems
|
||||
|
||||
### Flexbox
|
||||
|
||||
One-dimensional layout system (row or column):
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
/* Direction */
|
||||
flex-direction: row; /* row | row-reverse | column | column-reverse */
|
||||
|
||||
/* Wrapping */
|
||||
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
|
||||
|
||||
/* Main axis alignment */
|
||||
justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
|
||||
|
||||
/* Cross axis alignment */
|
||||
align-items: center; /* flex-start | flex-end | center | stretch | baseline */
|
||||
|
||||
/* Multi-line cross axis */
|
||||
align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */
|
||||
|
||||
/* Gap between items */
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
/* Grow factor */
|
||||
flex-grow: 1; /* Takes available space */
|
||||
|
||||
/* Shrink factor */
|
||||
flex-shrink: 1; /* Can shrink if needed */
|
||||
|
||||
/* Base size */
|
||||
flex-basis: 200px; /* Initial size before growing/shrinking */
|
||||
|
||||
/* Shorthand */
|
||||
flex: 1 1 200px; /* grow | shrink | basis */
|
||||
|
||||
/* Individual alignment */
|
||||
align-self: flex-end; /* Overrides container's align-items */
|
||||
|
||||
/* Order */
|
||||
order: 2; /* Change visual order (default: 0) */
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Grid
|
||||
|
||||
Two-dimensional layout system (rows and columns):
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
|
||||
/* Define columns */
|
||||
grid-template-columns: 200px 1fr 1fr; /* Fixed | Flexible | Flexible */
|
||||
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
|
||||
|
||||
/* Define rows */
|
||||
grid-template-rows: 100px auto 50px; /* Fixed | Auto | Fixed */
|
||||
|
||||
/* Named areas */
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"sidebar main main"
|
||||
"footer footer footer";
|
||||
|
||||
/* Gap between cells */
|
||||
gap: 1rem; /* Row and column gap */
|
||||
row-gap: 1rem;
|
||||
column-gap: 2rem;
|
||||
|
||||
/* Alignment */
|
||||
justify-items: start; /* Align items horizontally within cells */
|
||||
align-items: start; /* Align items vertically within cells */
|
||||
justify-content: center; /* Align grid within container horizontally */
|
||||
align-content: center; /* Align grid within container vertically */
|
||||
}
|
||||
|
||||
.item {
|
||||
/* Span columns */
|
||||
grid-column: 1 / 3; /* Start / End */
|
||||
grid-column: span 2; /* Span 2 columns */
|
||||
|
||||
/* Span rows */
|
||||
grid-row: 1 / 3;
|
||||
grid-row: span 2;
|
||||
|
||||
/* Named area */
|
||||
grid-area: header;
|
||||
|
||||
/* Individual alignment */
|
||||
justify-self: center; /* Horizontal alignment */
|
||||
align-self: center; /* Vertical alignment */
|
||||
}
|
||||
```
|
||||
|
||||
### Grid vs Flexbox
|
||||
|
||||
| Use Case | Best Choice |
|
||||
|----------|-------------|
|
||||
| One-dimensional layout (row or column) | Flexbox |
|
||||
| Two-dimensional layout (rows and columns) | Grid |
|
||||
| Align items along one axis | Flexbox |
|
||||
| Create complex page layouts | Grid |
|
||||
| Distribute space between items | Flexbox |
|
||||
| Precise control over rows and columns | Grid |
|
||||
| Content-first responsive design | Flexbox |
|
||||
| Layout-first responsive design | Grid |
|
||||
|
||||
## Positioning
|
||||
|
||||
### Position Types
|
||||
|
||||
```css
|
||||
/* Static (default) - normal flow */
|
||||
.static { position: static; }
|
||||
|
||||
/* Relative - offset from normal position */
|
||||
.relative {
|
||||
position: relative;
|
||||
top: 10px; /* Move down 10px */
|
||||
left: 20px; /* Move right 20px */
|
||||
}
|
||||
|
||||
/* Absolute - removed from flow, positioned relative to nearest positioned ancestor */
|
||||
.absolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Fixed - removed from flow, positioned relative to viewport */
|
||||
.fixed {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* Sticky - switches between relative and fixed based on scroll */
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0; /* Sticks to top when scrolling */
|
||||
}
|
||||
```
|
||||
|
||||
### Inset Properties
|
||||
|
||||
Shorthand for positioning:
|
||||
|
||||
```css
|
||||
.element {
|
||||
position: absolute;
|
||||
inset: 0; /* All sides: top, right, bottom, left = 0 */
|
||||
inset: 10px 20px; /* Vertical | Horizontal */
|
||||
inset: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
|
||||
}
|
||||
```
|
||||
|
||||
### Stacking Context
|
||||
|
||||
Control layering with `z-index`:
|
||||
|
||||
```css
|
||||
.behind { z-index: 1; }
|
||||
.ahead { z-index: 10; }
|
||||
.top { z-index: 100; }
|
||||
```
|
||||
|
||||
**Note**: `z-index` only works on positioned elements (not `static`)
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Media Queries
|
||||
|
||||
Apply styles based on device characteristics:
|
||||
|
||||
```css
|
||||
/* Mobile-first approach */
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Tablet and up */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation */
|
||||
@media (orientation: landscape) {
|
||||
.header { height: 60px; }
|
||||
}
|
||||
|
||||
/* High-DPI screens */
|
||||
@media (min-resolution: 192dpi) {
|
||||
.logo { background-image: url('logo@2x.png'); }
|
||||
}
|
||||
|
||||
/* Dark mode preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Responsive Units
|
||||
|
||||
| Unit | Description | Example |
|
||||
|------|-------------|---------|
|
||||
| `px` | Pixels (absolute) | `16px` |
|
||||
| `em` | Relative to parent font-size | `1.5em` |
|
||||
| `rem` | Relative to root font-size | `1.5rem` |
|
||||
| `%` | Relative to parent | `50%` |
|
||||
| `vw` | Viewport width (1vw = 1% of viewport width) | `50vw` |
|
||||
| `vh` | Viewport height | `100vh` |
|
||||
| `vmin` | Smaller of vw or vh | `10vmin` |
|
||||
| `vmax` | Larger of vw or vh | `10vmax` |
|
||||
| `ch` | Width of "0" character | `40ch` |
|
||||
| `fr` | Fraction of available space (Grid only) | `1fr` |
|
||||
|
||||
### Responsive Images
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Art direction with picture element */
|
||||
```
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<source media="(min-width: 1024px)" srcset="large.jpg">
|
||||
<source media="(min-width: 768px)" srcset="medium.jpg">
|
||||
<img src="small.jpg" alt="Responsive image">
|
||||
</picture>
|
||||
```
|
||||
|
||||
## Typography
|
||||
|
||||
```css
|
||||
.text {
|
||||
/* Font family */
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
/* Font size */
|
||||
font-size: 16px; /* Base size */
|
||||
font-size: 1rem; /* Relative to root */
|
||||
font-size: clamp(14px, 2vw, 20px); /* Responsive with min/max */
|
||||
|
||||
/* Font weight */
|
||||
font-weight: normal; /* 400 */
|
||||
font-weight: bold; /* 700 */
|
||||
font-weight: 300; /* Light */
|
||||
|
||||
/* Font style */
|
||||
font-style: italic;
|
||||
|
||||
/* Line height */
|
||||
line-height: 1.5; /* 1.5 times font-size */
|
||||
line-height: 24px;
|
||||
|
||||
/* Letter spacing */
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
/* Text alignment */
|
||||
text-align: left; /* left | right | center | justify */
|
||||
|
||||
/* Text decoration */
|
||||
text-decoration: underline;
|
||||
text-decoration: none; /* Remove underline from links */
|
||||
|
||||
/* Text transform */
|
||||
text-transform: uppercase; /* uppercase | lowercase | capitalize */
|
||||
|
||||
/* Word spacing */
|
||||
word-spacing: 0.1em;
|
||||
|
||||
/* White space handling */
|
||||
white-space: nowrap; /* Don't wrap */
|
||||
white-space: pre-wrap; /* Preserve whitespace, wrap lines */
|
||||
|
||||
/* Text overflow */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* Show ... when text overflows */
|
||||
|
||||
/* Word break */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
overflow-wrap: break-word; /* Modern version */
|
||||
}
|
||||
```
|
||||
|
||||
## Colors
|
||||
|
||||
```css
|
||||
.colors {
|
||||
/* Named colors */
|
||||
color: red;
|
||||
|
||||
/* Hex */
|
||||
color: #ff0000; /* Red */
|
||||
color: #f00; /* Shorthand */
|
||||
color: #ff0000ff; /* With alpha */
|
||||
|
||||
/* RGB */
|
||||
color: rgb(255, 0, 0);
|
||||
color: rgba(255, 0, 0, 0.5); /* With alpha */
|
||||
color: rgb(255 0 0 / 0.5); /* Modern syntax */
|
||||
|
||||
/* HSL (Hue, Saturation, Lightness) */
|
||||
color: hsl(0, 100%, 50%); /* Red */
|
||||
color: hsla(0, 100%, 50%, 0.5); /* With alpha */
|
||||
color: hsl(0 100% 50% / 0.5); /* Modern syntax */
|
||||
|
||||
/* Color keywords */
|
||||
color: currentColor; /* Inherit color */
|
||||
color: transparent;
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Color Space
|
||||
|
||||
Modern color spaces for wider gamut:
|
||||
|
||||
```css
|
||||
.modern-colors {
|
||||
/* Display P3 (Apple devices) */
|
||||
color: color(display-p3 1 0 0);
|
||||
|
||||
/* Lab color space */
|
||||
color: lab(50% 125 0);
|
||||
|
||||
/* LCH color space */
|
||||
color: lch(50% 125 0deg);
|
||||
}
|
||||
```
|
||||
|
||||
## Animations and Transitions
|
||||
|
||||
### Transitions
|
||||
|
||||
Smooth changes between states:
|
||||
|
||||
```css
|
||||
.button {
|
||||
background: blue;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
/* transition: property duration timing-function delay */
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: darkblue;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Individual properties */
|
||||
.element {
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 0.3s, 0.5s;
|
||||
transition-timing-function: ease, ease-in-out;
|
||||
transition-delay: 0s, 0.1s;
|
||||
}
|
||||
```
|
||||
|
||||
### Keyframe Animations
|
||||
|
||||
```css
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.element {
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
/* animation: name duration timing-function delay iteration-count direction fill-mode */
|
||||
}
|
||||
|
||||
/* Multiple keyframes */
|
||||
@keyframes slide {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(100px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.slider {
|
||||
animation: slide 2s infinite alternate;
|
||||
}
|
||||
```
|
||||
|
||||
## Transforms
|
||||
|
||||
```css
|
||||
.transform {
|
||||
/* Translate (move) */
|
||||
transform: translate(50px, 100px); /* X, Y */
|
||||
transform: translateX(50px);
|
||||
transform: translateY(100px);
|
||||
|
||||
/* Rotate */
|
||||
transform: rotate(45deg);
|
||||
|
||||
/* Scale */
|
||||
transform: scale(1.5); /* 150% size */
|
||||
transform: scale(2, 0.5); /* X, Y different */
|
||||
|
||||
/* Skew */
|
||||
transform: skew(10deg, 5deg);
|
||||
|
||||
/* Multiple transforms */
|
||||
transform: translate(50px, 0) rotate(45deg) scale(1.2);
|
||||
|
||||
/* 3D transforms */
|
||||
transform: rotateX(45deg) rotateY(30deg);
|
||||
transform: perspective(500px) translateZ(100px);
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Variables (Custom Properties)
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #007bff;
|
||||
--secondary-color: #6c757d;
|
||||
--spacing: 1rem;
|
||||
--border-radius: 4px;
|
||||
}
|
||||
|
||||
.element {
|
||||
color: var(--primary-color);
|
||||
padding: var(--spacing);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
/* With fallback */
|
||||
color: var(--accent-color, red);
|
||||
}
|
||||
|
||||
/* Dynamic changes */
|
||||
.dark-theme {
|
||||
--primary-color: #0056b3;
|
||||
--background: #222;
|
||||
--text: #fff;
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Preprocessors
|
||||
|
||||
### Common Features
|
||||
|
||||
- Variables
|
||||
- Nesting
|
||||
- Mixins (reusable styles)
|
||||
- Functions
|
||||
- Imports
|
||||
|
||||
**Popular Preprocessors**: Sass/SCSS, Less, Stylus
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
|
||||
- ✅ Use external stylesheets
|
||||
- ✅ Use class selectors over ID selectors
|
||||
- ✅ Keep specificity low
|
||||
- ✅ Use responsive units (rem, em, %)
|
||||
- ✅ Mobile-first approach
|
||||
- ✅ Use CSS variables for theming
|
||||
- ✅ Organize CSS logically
|
||||
- ✅ Use shorthand properties
|
||||
- ✅ Minify CSS for production
|
||||
|
||||
### Don'ts
|
||||
|
||||
- ❌ Use `!important` excessively
|
||||
- ❌ Use inline styles
|
||||
- ❌ Use fixed pixel widths
|
||||
- ❌ Over-nest selectors
|
||||
- ❌ Use vendor prefixes manually (use autoprefixer)
|
||||
- ❌ Forget to test cross-browser
|
||||
- ❌ Use IDs for styling
|
||||
- ❌ Ignore CSS specificity
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
|
||||
- Alignment container
|
||||
- Alignment subject
|
||||
- Aspect ratio
|
||||
- Baseline
|
||||
- Block (CSS)
|
||||
- Bounding box
|
||||
- Cross Axis
|
||||
- CSS
|
||||
- CSS Object Model (CSSOM)
|
||||
- CSS pixel
|
||||
- CSS preprocessor
|
||||
- Descriptor (CSS)
|
||||
- Fallback alignment
|
||||
- Flex
|
||||
- Flex container
|
||||
- Flex item
|
||||
- Flexbox
|
||||
- Flow relative values
|
||||
- Grid
|
||||
- Grid areas
|
||||
- Grid Axis
|
||||
- Grid Cell
|
||||
- Grid Column
|
||||
- Grid container
|
||||
- Grid lines
|
||||
- Grid Row
|
||||
- Grid Tracks
|
||||
- Gutters
|
||||
- Ink overflow
|
||||
- Inset properties
|
||||
- Layout mode
|
||||
- Logical properties
|
||||
- Main axis
|
||||
- Media query
|
||||
- Physical properties
|
||||
- Pixel
|
||||
- Property (CSS)
|
||||
- Pseudo-class
|
||||
- Pseudo-element
|
||||
- Selector (CSS)
|
||||
- Stacking context
|
||||
- Style origin
|
||||
- Stylesheet
|
||||
- Vendor prefix
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
||||
- [CSS Tricks Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
- [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
||||
- [Can I Use](https://caniuse.com/) - Browser compatibility tables
|
||||
@@ -1,411 +0,0 @@
|
||||
# Data Formats & Encoding Reference
|
||||
|
||||
Data formats, character encodings, and serialization for web development.
|
||||
|
||||
## JSON (JavaScript Object Notation)
|
||||
|
||||
Lightweight data interchange format.
|
||||
|
||||
### Syntax
|
||||
|
||||
```json
|
||||
{
|
||||
"string": "value",
|
||||
"number": 42,
|
||||
"boolean": true,
|
||||
"null": null,
|
||||
"array": [1, 2, 3],
|
||||
"object": {
|
||||
"nested": "value"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Permitted Types**: string, number, boolean, null, array, object
|
||||
**Not Permitted**: undefined, functions, dates, RegExp
|
||||
|
||||
### JavaScript Methods
|
||||
|
||||
```javascript
|
||||
// Parse JSON string
|
||||
const data = JSON.parse('{"name":"John","age":30}');
|
||||
|
||||
// Stringify object
|
||||
const json = JSON.stringify({ name: 'John', age: 30 });
|
||||
|
||||
// Pretty print (indentation)
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
|
||||
// Custom serialization
|
||||
const json = JSON.stringify(obj, (key, value) => {
|
||||
if (key === 'password') return undefined; // Exclude
|
||||
return value;
|
||||
});
|
||||
|
||||
// toJSON method
|
||||
const obj = {
|
||||
name: 'John',
|
||||
date: new Date(),
|
||||
toJSON() {
|
||||
return {
|
||||
name: this.name,
|
||||
date: this.date.toISOString()
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### JSON Type Representation
|
||||
|
||||
How JavaScript types map to JSON:
|
||||
- String → string
|
||||
- Number → number
|
||||
- Boolean → boolean
|
||||
- null → null
|
||||
- Array → array
|
||||
- Object → object
|
||||
- undefined → omitted
|
||||
- Function → omitted
|
||||
- Symbol → omitted
|
||||
- Date → ISO 8601 string
|
||||
|
||||
## XML (Extensible Markup Language)
|
||||
|
||||
Markup language for encoding documents.
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<users>
|
||||
<user id="1">
|
||||
<name>John Doe</name>
|
||||
<email>john@example.com</email>
|
||||
</user>
|
||||
<user id="2">
|
||||
<name>Jane Smith</name>
|
||||
<email>jane@example.com</email>
|
||||
</user>
|
||||
</users>
|
||||
```
|
||||
|
||||
**Use Cases**:
|
||||
- Configuration files
|
||||
- Data exchange
|
||||
- RSS/Atom feeds
|
||||
- SOAP web services
|
||||
|
||||
### Parsing XML in JavaScript
|
||||
|
||||
```javascript
|
||||
// Parse XML string
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
|
||||
|
||||
// Query elements
|
||||
const users = xmlDoc.querySelectorAll('user');
|
||||
users.forEach(user => {
|
||||
const name = user.querySelector('name').textContent;
|
||||
console.log(name);
|
||||
});
|
||||
|
||||
// Create XML
|
||||
const serializer = new XMLSerializer();
|
||||
const xmlString = serializer.serializeToString(xmlDoc);
|
||||
```
|
||||
|
||||
## Character Encoding
|
||||
|
||||
### UTF-8
|
||||
|
||||
Universal character encoding (recommended for web).
|
||||
|
||||
**Characteristics**:
|
||||
- Variable-width (1-4 bytes per character)
|
||||
- Backward compatible with ASCII
|
||||
- Supports all Unicode characters
|
||||
|
||||
```html
|
||||
<meta charset="UTF-8">
|
||||
```
|
||||
|
||||
### UTF-16
|
||||
|
||||
2 or 4 bytes per character.
|
||||
|
||||
**Use**: JavaScript internally uses UTF-16
|
||||
|
||||
```javascript
|
||||
'A'.charCodeAt(0); // 65
|
||||
String.fromCharCode(65); // 'A'
|
||||
|
||||
// Emoji (requires surrogate pair in UTF-16)
|
||||
'😀'.length; // 2 (in JavaScript)
|
||||
```
|
||||
|
||||
### ASCII
|
||||
|
||||
7-bit encoding (128 characters).
|
||||
|
||||
**Range**: 0-127
|
||||
**Includes**: English letters, digits, common symbols
|
||||
|
||||
### Code Point vs Code Unit
|
||||
|
||||
- **Code Point**: Unicode character (U+0041 = 'A')
|
||||
- **Code Unit**: 16-bit value in UTF-16
|
||||
|
||||
```javascript
|
||||
// Code points
|
||||
'A'.codePointAt(0); // 65
|
||||
String.fromCodePoint(0x1F600); // '😀'
|
||||
|
||||
// Iterate code points
|
||||
for (const char of 'Hello 😀') {
|
||||
console.log(char);
|
||||
}
|
||||
```
|
||||
|
||||
## Base64
|
||||
|
||||
Binary-to-text encoding scheme.
|
||||
|
||||
```javascript
|
||||
// Encode
|
||||
const encoded = btoa('Hello World'); // "SGVsbG8gV29ybGQ="
|
||||
|
||||
// Decode
|
||||
const decoded = atob('SGVsbG8gV29ybGQ='); // "Hello World"
|
||||
|
||||
// Handle Unicode (requires extra step)
|
||||
const encoded = btoa(unescape(encodeURIComponent('Hello 世界')));
|
||||
const decoded = decodeURIComponent(escape(atob(encoded)));
|
||||
|
||||
// Modern approach
|
||||
const encoder = new TextEncoder();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
const bytes = encoder.encode('Hello 世界');
|
||||
const decoded = decoder.decode(bytes);
|
||||
```
|
||||
|
||||
**Use Cases**:
|
||||
- Embed binary data in JSON/XML
|
||||
- Data URLs (`data:image/png;base64,...`)
|
||||
- Basic authentication headers
|
||||
|
||||
## URL Encoding (Percent Encoding)
|
||||
|
||||
Encode special characters in URLs.
|
||||
|
||||
```javascript
|
||||
// encodeURIComponent (encode everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( ))
|
||||
const encoded = encodeURIComponent('Hello World!'); // "Hello%20World%21"
|
||||
const decoded = decodeURIComponent(encoded); // "Hello World!"
|
||||
|
||||
// encodeURI (encode less - for full URLs)
|
||||
const url = encodeURI('http://example.com/search?q=hello world');
|
||||
|
||||
// Modern URL API
|
||||
const url = new URL('http://example.com/search');
|
||||
url.searchParams.set('q', 'hello world');
|
||||
console.log(url.toString()); // Automatically encoded
|
||||
```
|
||||
|
||||
## MIME Types
|
||||
|
||||
Media type identification.
|
||||
|
||||
### Common MIME Types
|
||||
|
||||
| Type | MIME Type |
|
||||
|------|-----------|
|
||||
| HTML | `text/html` |
|
||||
| CSS | `text/css` |
|
||||
| JavaScript | `text/javascript`, `application/javascript` |
|
||||
| JSON | `application/json` |
|
||||
| XML | `application/xml`, `text/xml` |
|
||||
| Plain Text | `text/plain` |
|
||||
| JPEG | `image/jpeg` |
|
||||
| PNG | `image/png` |
|
||||
| GIF | `image/gif` |
|
||||
| SVG | `image/svg+xml` |
|
||||
| PDF | `application/pdf` |
|
||||
| ZIP | `application/zip` |
|
||||
| MP4 Video | `video/mp4` |
|
||||
| MP3 Audio | `audio/mpeg` |
|
||||
| Form Data | `application/x-www-form-urlencoded` |
|
||||
| Multipart | `multipart/form-data` |
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css" type="text/css">
|
||||
<script src="app.js" type="text/javascript"></script>
|
||||
```
|
||||
|
||||
```http
|
||||
Content-Type: application/json; charset=utf-8
|
||||
Content-Type: text/html; charset=utf-8
|
||||
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
|
||||
```
|
||||
|
||||
## Serialization & Deserialization
|
||||
|
||||
Converting data structures to/from storable format.
|
||||
|
||||
### JSON Serialization
|
||||
|
||||
```javascript
|
||||
// Serialize
|
||||
const obj = { name: 'John', date: new Date() };
|
||||
const json = JSON.stringify(obj);
|
||||
|
||||
// Deserialize
|
||||
const parsed = JSON.parse(json);
|
||||
```
|
||||
|
||||
### Serializable Objects
|
||||
|
||||
Objects that can be serialized by structured clone algorithm:
|
||||
- Basic types
|
||||
- Arrays, Objects,
|
||||
- Date, RegExp
|
||||
- Map, Set
|
||||
- ArrayBuffer, TypedArrays
|
||||
|
||||
**Not Serializable**:
|
||||
- Functions
|
||||
- DOM nodes
|
||||
- Symbols (as values)
|
||||
- Objects with prototype methods
|
||||
|
||||
## Character References
|
||||
|
||||
HTML entities for special characters.
|
||||
|
||||
```html
|
||||
< <!-- < -->
|
||||
> <!-- > -->
|
||||
& <!-- & -->
|
||||
" <!-- " -->
|
||||
' <!-- ' -->
|
||||
<!-- non-breaking space -->
|
||||
© <!-- © -->
|
||||
€ <!-- € -->
|
||||
€ <!-- € (hex) -->
|
||||
```
|
||||
|
||||
## Data URLs
|
||||
|
||||
Embed data directly in URLs.
|
||||
|
||||
```html
|
||||
<!-- Inline image -->
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Icon">
|
||||
|
||||
<!-- Inline SVG -->
|
||||
<img src="data:image/svg+xml,%3Csvg xmlns='...'%3E...%3C/svg%3E" alt="Logo">
|
||||
|
||||
<!-- Inline CSS -->
|
||||
<link rel="stylesheet" href="data:text/css,body%7Bmargin:0%7D">
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Create data URL from canvas
|
||||
const canvas = document.querySelector('canvas');
|
||||
const dataURL = canvas.toDataURL('image/png');
|
||||
|
||||
// Create data URL from blob
|
||||
const blob = new Blob(['Hello'], { type: 'text/plain' });
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const dataURL = reader.result;
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
```
|
||||
|
||||
## Escape Sequences
|
||||
|
||||
```javascript
|
||||
// String escapes
|
||||
'It\'s a string'; // Single quote
|
||||
"He said \"Hello\""; // Double quote
|
||||
'Line 1\nLine 2'; // Newline
|
||||
'Column1\tColumn2'; // Tab
|
||||
'Path\\to\\file'; // Backslash
|
||||
```
|
||||
|
||||
## Data Structures
|
||||
|
||||
### Arrays
|
||||
|
||||
Ordered collections:
|
||||
```javascript
|
||||
const arr = [1, 2, 3];
|
||||
arr.push(4); // Add to end
|
||||
arr.pop(); // Remove from end
|
||||
```
|
||||
|
||||
### Objects
|
||||
|
||||
Key-value pairs:
|
||||
```javascript
|
||||
const obj = { key: 'value' };
|
||||
obj.newKey = 'new value';
|
||||
delete obj.key;
|
||||
```
|
||||
|
||||
### Map
|
||||
|
||||
Keyed collections (any type as key):
|
||||
```javascript
|
||||
const map = new Map();
|
||||
map.set('key', 'value');
|
||||
map.set(obj, 'value');
|
||||
map.get('key');
|
||||
map.has('key');
|
||||
map.delete('key');
|
||||
```
|
||||
|
||||
### Set
|
||||
|
||||
Unique values:
|
||||
```javascript
|
||||
const set = new Set([1, 2, 2, 3]); // {1, 2, 3}
|
||||
set.add(4);
|
||||
set.has(2); // true
|
||||
set.delete(1);
|
||||
```
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- ASCII
|
||||
- Base64
|
||||
- Character
|
||||
- Character encoding
|
||||
- Character reference
|
||||
- Character set
|
||||
- Code point
|
||||
- Code unit
|
||||
- Data structure
|
||||
- Deserialization
|
||||
- Enumerated
|
||||
- Escape character
|
||||
- JSON
|
||||
- JSON type representation
|
||||
- MIME
|
||||
- MIME type
|
||||
- Percent-encoding
|
||||
- Serialization
|
||||
- Serializable object
|
||||
- Unicode
|
||||
- URI
|
||||
- URL
|
||||
- URN
|
||||
- UTF-8
|
||||
- UTF-16
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [JSON Specification](https://www.json.org/)
|
||||
- [Unicode Standard](https://unicode.org/standard/standard.html)
|
||||
- [MDN Character Encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)
|
||||
- [MIME Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
|
||||
@@ -1,502 +0,0 @@
|
||||
# Development Tools Reference
|
||||
|
||||
Tools and workflows for web development.
|
||||
|
||||
## Version Control
|
||||
|
||||
### Git
|
||||
|
||||
Distributed version control system.
|
||||
|
||||
**Basic Commands**:
|
||||
```bash
|
||||
# Initialize repository
|
||||
git init
|
||||
|
||||
# Clone repository
|
||||
git clone https://github.com/user/repo.git
|
||||
|
||||
# Check status
|
||||
git status
|
||||
|
||||
# Stage changes
|
||||
git add file.js
|
||||
git add . # All files
|
||||
|
||||
# Commit
|
||||
git commit -m "commit message"
|
||||
|
||||
# Push to remote
|
||||
git push origin main
|
||||
|
||||
# Pull from remote
|
||||
git pull origin main
|
||||
|
||||
# Branches
|
||||
git branch feature-name
|
||||
git checkout feature-name
|
||||
git checkout -b feature-name # Create and switch
|
||||
|
||||
# Merge
|
||||
git checkout main
|
||||
git merge feature-name
|
||||
|
||||
# View history
|
||||
git log
|
||||
git log --oneline --graph
|
||||
```
|
||||
|
||||
**Best Practices**:
|
||||
- Commit often with meaningful messages
|
||||
- Use branches for features
|
||||
- Pull before push
|
||||
- Review changes before committing
|
||||
- Use .gitignore for generated files
|
||||
|
||||
### GitHub/GitLab/Bitbucket
|
||||
|
||||
Git hosting platforms with collaboration features:
|
||||
- Pull requests / Merge requests
|
||||
- Code review
|
||||
- Issue tracking
|
||||
- CI/CD integration
|
||||
- Project management
|
||||
|
||||
## Package Managers
|
||||
|
||||
### npm (Node Package Manager)
|
||||
|
||||
```bash
|
||||
# Initialize project
|
||||
npm init
|
||||
npm init -y # Skip prompts
|
||||
|
||||
# Install dependencies
|
||||
npm install package-name
|
||||
npm install -D package-name # Dev dependency
|
||||
npm install -g package-name # Global
|
||||
|
||||
# Update packages
|
||||
npm update
|
||||
npm outdated
|
||||
|
||||
# Run scripts
|
||||
npm run build
|
||||
npm test
|
||||
npm start
|
||||
|
||||
# Audit security
|
||||
npm audit
|
||||
npm audit fix
|
||||
```
|
||||
|
||||
**package.json**:
|
||||
```json
|
||||
{
|
||||
"name": "my-project",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"build": "webpack",
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^5.75.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Yarn
|
||||
|
||||
Faster alternative to npm:
|
||||
```bash
|
||||
yarn add package-name
|
||||
yarn remove package-name
|
||||
yarn upgrade
|
||||
yarn build
|
||||
```
|
||||
|
||||
### pnpm
|
||||
|
||||
Efficient package manager (disk space saving):
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm add package-name
|
||||
pnpm remove package-name
|
||||
```
|
||||
|
||||
## Build Tools
|
||||
|
||||
### Webpack
|
||||
|
||||
Module bundler:
|
||||
|
||||
```javascript
|
||||
// webpack.config.js
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/index.html'
|
||||
})
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### Vite
|
||||
|
||||
Fast modern build tool:
|
||||
|
||||
```bash
|
||||
# Create project
|
||||
npm create vite@latest my-app
|
||||
|
||||
# Dev server
|
||||
npm run dev
|
||||
|
||||
# Build
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Parcel
|
||||
|
||||
Zero-config bundler:
|
||||
```bash
|
||||
parcel index.html
|
||||
parcel build index.html
|
||||
```
|
||||
|
||||
## Task Runners
|
||||
|
||||
### npm Scripts
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "webpack serve --mode development",
|
||||
"build": "webpack --mode production",
|
||||
"test": "jest",
|
||||
"lint": "eslint src/",
|
||||
"format": "prettier --write src/"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Testing Frameworks
|
||||
|
||||
### Jest
|
||||
|
||||
JavaScript testing framework:
|
||||
|
||||
```javascript
|
||||
// sum.test.js
|
||||
const sum = require('./sum');
|
||||
|
||||
describe('sum function', () => {
|
||||
test('adds 1 + 2 to equal 3', () => {
|
||||
expect(sum(1, 2)).toBe(3);
|
||||
});
|
||||
|
||||
test('handles negative numbers', () => {
|
||||
expect(sum(-1, -2)).toBe(-3);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Vitest
|
||||
|
||||
Vite-powered testing (Jest-compatible):
|
||||
```javascript
|
||||
import { describe, test, expect } from 'vitest';
|
||||
|
||||
describe('math', () => {
|
||||
test('addition', () => {
|
||||
expect(1 + 1).toBe(2);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Playwright
|
||||
|
||||
End-to-end testing:
|
||||
```javascript
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test('homepage has title', async ({ page }) => {
|
||||
await page.goto('https://example.com');
|
||||
await expect(page).toHaveTitle(/Example/);
|
||||
});
|
||||
```
|
||||
|
||||
## Linters & Formatters
|
||||
|
||||
### ESLint
|
||||
|
||||
JavaScript linter:
|
||||
|
||||
```javascript
|
||||
// .eslintrc.js
|
||||
module.exports = {
|
||||
extends: ['eslint:recommended'],
|
||||
rules: {
|
||||
'no-console': 'warn',
|
||||
'no-unused-vars': 'error'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Prettier
|
||||
|
||||
Code formatter:
|
||||
|
||||
```json
|
||||
// .prettierrc
|
||||
{
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
```
|
||||
|
||||
### Stylelint
|
||||
|
||||
CSS linter:
|
||||
```json
|
||||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"indentation": 2,
|
||||
"color-hex-length": "short"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## IDEs and Editors
|
||||
|
||||
### Visual Studio Code
|
||||
|
||||
**Key Features**:
|
||||
- IntelliSense
|
||||
- Debugging
|
||||
- Git integration
|
||||
- Extensions marketplace
|
||||
- Terminal integration
|
||||
|
||||
**Popular Extensions**:
|
||||
- ESLint
|
||||
- Prettier
|
||||
- Live Server
|
||||
- GitLens
|
||||
- Path Intellisense
|
||||
|
||||
### WebStorm
|
||||
|
||||
Full-featured IDE for web development by JetBrains.
|
||||
|
||||
### Sublime Text
|
||||
|
||||
Lightweight, fast text editor.
|
||||
|
||||
### Vim/Neovim
|
||||
|
||||
Terminal-based editor (steep learning curve).
|
||||
|
||||
## TypeScript
|
||||
|
||||
Typed superset of JavaScript:
|
||||
|
||||
```typescript
|
||||
// types.ts
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email?: string; // Optional
|
||||
}
|
||||
|
||||
function getUser(id: number): User {
|
||||
return { id, name: 'John' };
|
||||
}
|
||||
|
||||
// Generics
|
||||
function identity<T>(arg: T): T {
|
||||
return arg;
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
// tsconfig.json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Continuous Integration (CI/CD)
|
||||
|
||||
### GitHub Actions
|
||||
|
||||
```yaml
|
||||
# .github/workflows/test.yml
|
||||
name: Test
|
||||
on: [push, pull_request]
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '18'
|
||||
- run: npm ci
|
||||
- run: npm test
|
||||
```
|
||||
|
||||
### Other CI/CD Platforms
|
||||
|
||||
- **GitLab CI**
|
||||
- **CircleCI**
|
||||
- **Travis CI**
|
||||
- **Jenkins**
|
||||
|
||||
## Debugging
|
||||
|
||||
### Browser DevTools
|
||||
|
||||
```javascript
|
||||
// Debugging statements
|
||||
debugger; // Pause execution
|
||||
console.log('value:', value);
|
||||
console.error('error:', error);
|
||||
console.trace(); // Stack trace
|
||||
```
|
||||
|
||||
### Node.js Debugging
|
||||
|
||||
```bash
|
||||
# Built-in debugger
|
||||
node inspect app.js
|
||||
|
||||
# Chrome DevTools
|
||||
node --inspect app.js
|
||||
node --inspect-brk app.js # Break on start
|
||||
```
|
||||
|
||||
## Performance Profiling
|
||||
|
||||
### Chrome DevTools Performance
|
||||
|
||||
- Record CPU activity
|
||||
- Analyze flame charts
|
||||
- Identify bottlenecks
|
||||
|
||||
### Lighthouse
|
||||
|
||||
```bash
|
||||
# CLI
|
||||
npm install -g lighthouse
|
||||
lighthouse https://example.com
|
||||
|
||||
# DevTools
|
||||
Open Chrome DevTools > Lighthouse tab
|
||||
```
|
||||
|
||||
## Monitoring
|
||||
|
||||
### Error Tracking
|
||||
|
||||
- **Sentry**: Error monitoring
|
||||
- **Rollbar**: Real-time error tracking
|
||||
- **Bugsnag**: Error monitoring
|
||||
|
||||
### Analytics
|
||||
|
||||
- **Google Analytics**
|
||||
- **Plausible**: Privacy-friendly
|
||||
- **Matomo**: Self-hosted
|
||||
|
||||
### RUM (Real User Monitoring)
|
||||
|
||||
- **SpeedCurve**
|
||||
- **New Relic**
|
||||
- **Datadog**
|
||||
|
||||
## Developer Workflow
|
||||
|
||||
### Typical Workflow
|
||||
|
||||
1. **Setup**: Clone repo, install dependencies
|
||||
2. **Develop**: Write code, run dev server
|
||||
3. **Test**: Run unit/integration tests
|
||||
4. **Lint/Format**: Check code quality
|
||||
5. **Commit**: Git commit and push
|
||||
6. **CI/CD**: Automated tests and deployment
|
||||
7. **Deploy**: Push to production
|
||||
|
||||
### Environment Variables
|
||||
|
||||
```bash
|
||||
# .env
|
||||
DATABASE_URL=postgres://localhost/db
|
||||
API_KEY=secret-key-here
|
||||
NODE_ENV=development
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Access in Node.js
|
||||
const dbUrl = process.env.DATABASE_URL;
|
||||
```
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Bun
|
||||
- Continuous integration
|
||||
- Deno
|
||||
- Developer tools
|
||||
- Fork
|
||||
- Fuzz testing
|
||||
- Git
|
||||
- IDE
|
||||
- Node.js
|
||||
- Repo
|
||||
- Rsync
|
||||
- SCM
|
||||
- SDK
|
||||
- Smoke test
|
||||
- SVN
|
||||
- TypeScript
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Git Documentation](https://git-scm.com/doc)
|
||||
- [npm Documentation](https://docs.npmjs.com/)
|
||||
- [Webpack Guides](https://webpack.js.org/guides/)
|
||||
- [Jest Documentation](https://jestjs.io/docs/getting-started)
|
||||
- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
|
||||
@@ -1,649 +0,0 @@
|
||||
# Glossary
|
||||
|
||||
- Reference [Glossary of Web Terms](https://developer.mozilla.org/en-US/docs/Glossary)
|
||||
|
||||
## Web Terms
|
||||
|
||||
This glossary contains comprehensive web terms categorized across 15 domains:
|
||||
|
||||
- HTML & Markup
|
||||
- CSS & Styling
|
||||
- JavaScript & Programming
|
||||
- Web APIs & DOM
|
||||
- HTTP & Networking
|
||||
- Security & Authentication
|
||||
- Performance & Optimization
|
||||
- Accessibility
|
||||
- Web Protocols & Standards
|
||||
- Browsers & Engines
|
||||
- Development Tools
|
||||
- Data Formats & Encoding
|
||||
- Media & Graphics
|
||||
- Architecture & Patterns
|
||||
- Servers & Infrastructure
|
||||
|
||||
## All Web Terms
|
||||
|
||||
- [Abstraction](https://developer.mozilla.org/en-US/docs/Glossary/Abstraction)
|
||||
- [Accent](https://developer.mozilla.org/en-US/docs/Glossary/Accent)
|
||||
- [Accessibility](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility)
|
||||
- [Accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree)
|
||||
- [Accessible description](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description)
|
||||
- [Accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name)
|
||||
- [Adobe Flash](https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash)
|
||||
- [Advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure)
|
||||
- [Ajax](https://developer.mozilla.org/en-US/docs/Glossary/Ajax)
|
||||
- [Algorithm](https://developer.mozilla.org/en-US/docs/Glossary/Algorithm)
|
||||
- [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_container)
|
||||
- [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_subject)
|
||||
- [Alpha (*alpha channel*)](https://developer.mozilla.org/en-US/docs/Glossary/Alpha)
|
||||
- [ALPN](https://developer.mozilla.org/en-US/docs/Glossary/ALPN)
|
||||
- [API](https://developer.mozilla.org/en-US/docs/Glossary/API)
|
||||
- [Apple Safari](https://developer.mozilla.org/en-US/docs/Glossary/Apple_Safari)
|
||||
- [Application context](https://developer.mozilla.org/en-US/docs/Glossary/Application_context)
|
||||
- [Argument](https://developer.mozilla.org/en-US/docs/Glossary/Argument)
|
||||
- [ARIA](https://developer.mozilla.org/en-US/docs/Glossary/ARIA)
|
||||
- [ARPA](https://developer.mozilla.org/en-US/docs/Glossary/ARPA)
|
||||
- [ARPANET](https://developer.mozilla.org/en-US/docs/Glossary/ARPANET)
|
||||
- [Array](https://developer.mozilla.org/en-US/docs/Glossary/Array)
|
||||
- [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII)
|
||||
- [Aspect ratio](https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio)
|
||||
- [Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous)
|
||||
- [ATAG](https://developer.mozilla.org/en-US/docs/Glossary/ATAG)
|
||||
- [Attribute](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)
|
||||
- [Authentication](https://developer.mozilla.org/en-US/docs/Glossary/Authentication)
|
||||
- [Authenticator](https://developer.mozilla.org/en-US/docs/Glossary/Authenticator)
|
||||
- [Bandwidth](https://developer.mozilla.org/en-US/docs/Glossary/Bandwidth)
|
||||
- [Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)
|
||||
- [Baseline](https://developer.mozilla.org/en-US/docs/Glossary/Baseline)
|
||||
- [Baseline (*compatibility*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility)
|
||||
- [Baseline (*typography*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Typography)
|
||||
- [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag)
|
||||
- [Beacon](https://developer.mozilla.org/en-US/docs/Glossary/Beacon)
|
||||
- [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bézier_curve)
|
||||
- [bfcache](https://developer.mozilla.org/en-US/docs/Glossary/bfcache)
|
||||
- [BiDi](https://developer.mozilla.org/en-US/docs/Glossary/BiDi)
|
||||
- [BigInt](https://developer.mozilla.org/en-US/docs/Glossary/BigInt)
|
||||
- [Binding](https://developer.mozilla.org/en-US/docs/Glossary/Binding)
|
||||
- [Bitwise flags](https://developer.mozilla.org/en-US/docs/Glossary/Bitwise_flags)
|
||||
- [Blink](https://developer.mozilla.org/en-US/docs/Glossary/Blink)
|
||||
- [blink element (*\<blink\> tag*)](https://developer.mozilla.org/en-US/docs/Glossary/blink_element)
|
||||
- [Block](https://developer.mozilla.org/en-US/docs/Glossary/Block)
|
||||
- [Block (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS)
|
||||
- [Block (*scripting*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting)
|
||||
- [Block cipher mode of operation](https://developer.mozilla.org/en-US/docs/Glossary/Block_cipher_mode_of_operation)
|
||||
- [Block-level content](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content)
|
||||
- [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
|
||||
- [Boolean (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/JavaScript)
|
||||
- [Boolean attribute (*ARIA*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/ARIA)
|
||||
- [Boolean attribute (*HTML*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML)
|
||||
- [Bounding box](https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box)
|
||||
- [Breadcrumb](https://developer.mozilla.org/en-US/docs/Glossary/Breadcrumb)
|
||||
- [Brotli compression](https://developer.mozilla.org/en-US/docs/Glossary/Brotli_compression)
|
||||
- [Browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)
|
||||
- [Browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context)
|
||||
- [Buffer](https://developer.mozilla.org/en-US/docs/Glossary/Buffer)
|
||||
- [Bun](https://developer.mozilla.org/en-US/docs/Glossary/Bun)
|
||||
- [Cache](https://developer.mozilla.org/en-US/docs/Glossary/Cache)
|
||||
- [Cacheable](https://developer.mozilla.org/en-US/docs/Glossary/Cacheable)
|
||||
- [CalDAV](https://developer.mozilla.org/en-US/docs/Glossary/CalDAV)
|
||||
- [Call stack](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)
|
||||
- [Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
|
||||
- [Camel case](https://developer.mozilla.org/en-US/docs/Glossary/Camel_case)
|
||||
- [Canonical order](https://developer.mozilla.org/en-US/docs/Glossary/Canonical_order)
|
||||
- [Canvas](https://developer.mozilla.org/en-US/docs/Glossary/Canvas)
|
||||
- [Card sorting](https://developer.mozilla.org/en-US/docs/Glossary/Card_sorting)
|
||||
- [CardDAV](https://developer.mozilla.org/en-US/docs/Glossary/CardDAV)
|
||||
- [Caret](https://developer.mozilla.org/en-US/docs/Glossary/Caret)
|
||||
- [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)
|
||||
- [Certificate authority](https://developer.mozilla.org/en-US/docs/Glossary/Certificate_authority)
|
||||
- [Certified](https://developer.mozilla.org/en-US/docs/Glossary/Certified)
|
||||
- [Challenge-response authentication](https://developer.mozilla.org/en-US/docs/Glossary/Challenge-response_authentication)
|
||||
- [Character](https://developer.mozilla.org/en-US/docs/Glossary/Character)
|
||||
- [Character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)
|
||||
- [Character reference](https://developer.mozilla.org/en-US/docs/Glossary/Character_reference)
|
||||
- [Character set](https://developer.mozilla.org/en-US/docs/Glossary/Character_set)
|
||||
- [Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)
|
||||
- [CIA](https://developer.mozilla.org/en-US/docs/Glossary/CIA)
|
||||
- [Cipher](https://developer.mozilla.org/en-US/docs/Glossary/Cipher)
|
||||
- [Cipher suite](https://developer.mozilla.org/en-US/docs/Glossary/Cipher_suite)
|
||||
- [Ciphertext](https://developer.mozilla.org/en-US/docs/Glossary/Ciphertext)
|
||||
- [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class)
|
||||
- [Client-side rendering (*CSR*)](https://developer.mozilla.org/en-US/docs/Glossary/Client-side_rendering_(CSR))
|
||||
- [Closure](https://developer.mozilla.org/en-US/docs/Glossary/Closure)
|
||||
- [Cloud](https://developer.mozilla.org/en-US/docs/Glossary/Cloud)
|
||||
- [Cloud computing](https://developer.mozilla.org/en-US/docs/Glossary/Cloud_computing)
|
||||
- [CMS](https://developer.mozilla.org/en-US/docs/Glossary/CMS)
|
||||
- [Code point](https://developer.mozilla.org/en-US/docs/Glossary/Code_point)
|
||||
- [Code splitting](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting)
|
||||
- [Code unit](https://developer.mozilla.org/en-US/docs/Glossary/Code_unit)
|
||||
- [Codec](https://developer.mozilla.org/en-US/docs/Glossary/Codec)
|
||||
- [Color space](https://developer.mozilla.org/en-US/docs/Glossary/Color_space)
|
||||
- [Color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel)
|
||||
- [Compile](https://developer.mozilla.org/en-US/docs/Glossary/Compile)
|
||||
- [Compile time](https://developer.mozilla.org/en-US/docs/Glossary/Compile_time)
|
||||
- [Composite operation](https://developer.mozilla.org/en-US/docs/Glossary/Composite_operation)
|
||||
- [Compression Dictionary Transport](https://developer.mozilla.org/en-US/docs/Glossary/Compression_Dictionary_Transport)
|
||||
- [Computer programming](https://developer.mozilla.org/en-US/docs/Glossary/Computer_programming)
|
||||
- [Conditional](https://developer.mozilla.org/en-US/docs/Glossary/Conditional)
|
||||
- [Constant](https://developer.mozilla.org/en-US/docs/Glossary/Constant)
|
||||
- [Constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor)
|
||||
- [Content header](https://developer.mozilla.org/en-US/docs/Glossary/Content_header)
|
||||
- [Continuous integration](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_integration)
|
||||
- [Continuous media](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_media)
|
||||
- [Control flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow)
|
||||
- [Cookie](https://developer.mozilla.org/en-US/docs/Glossary/Cookie)
|
||||
- [Copyleft](https://developer.mozilla.org/en-US/docs/Glossary/Copyleft)
|
||||
- [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)
|
||||
- [CORS-safelisted request header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header)
|
||||
- [CORS-safelisted response header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_response_header)
|
||||
- [Crawler](https://developer.mozilla.org/en-US/docs/Glossary/Crawler)
|
||||
- [Credential](https://developer.mozilla.org/en-US/docs/Glossary/Credential)
|
||||
- [CRLF](https://developer.mozilla.org/en-US/docs/Glossary/CRLF)
|
||||
- [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
|
||||
- [Cross-site request forgery (*CSRF*)](https://developer.mozilla.org/en-US/docs/Glossary/CSRF)
|
||||
- [Cross-site scripting (*XSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)
|
||||
- [CRUD](https://developer.mozilla.org/en-US/docs/Glossary/CRUD)
|
||||
- [Cryptanalysis](https://developer.mozilla.org/en-US/docs/Glossary/Cryptanalysis)
|
||||
- [Cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Cryptography)
|
||||
- [CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP)
|
||||
- [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)
|
||||
- [CSS Object Model (*CSSOM*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Object_Model_(CSSOM))
|
||||
- [CSS pixel](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel)
|
||||
- [CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)
|
||||
- [Cumulative Layout Shift (*CLS*)](https://developer.mozilla.org/en-US/docs/Glossary/CLS)
|
||||
- [Data structure](https://developer.mozilla.org/en-US/docs/Glossary/Data_structure)
|
||||
- [Database](https://developer.mozilla.org/en-US/docs/Glossary/Database)
|
||||
- [Debounce](https://developer.mozilla.org/en-US/docs/Glossary/Debounce)
|
||||
- [Decryption](https://developer.mozilla.org/en-US/docs/Glossary/Decryption)
|
||||
- [Deep copy](https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy)
|
||||
- [Delta](https://developer.mozilla.org/en-US/docs/Glossary/Delta)
|
||||
- [Denial of Service (*DoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Denial_of_Service)
|
||||
- [Deno](https://developer.mozilla.org/en-US/docs/Glossary/Deno)
|
||||
- [Descriptor (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Descriptor_(CSS))
|
||||
- [Deserialization](https://developer.mozilla.org/en-US/docs/Glossary/Deserialization)
|
||||
- [Developer tools](https://developer.mozilla.org/en-US/docs/Glossary/Developer_tools)
|
||||
- [Device pixel](https://developer.mozilla.org/en-US/docs/Glossary/Device_pixel)
|
||||
- [Digital certificate](https://developer.mozilla.org/en-US/docs/Glossary/Digital_certificate)
|
||||
- [Digital signature](https://developer.mozilla.org/en-US/docs/Glossary/Digital_signature)
|
||||
- [Distributed Denial of Service (*DDoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Distributed_Denial_of_Service)
|
||||
- [DMZ](https://developer.mozilla.org/en-US/docs/Glossary/DMZ)
|
||||
- [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS)
|
||||
- [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
|
||||
- [Document directive](https://developer.mozilla.org/en-US/docs/Glossary/Document_directive)
|
||||
- [Document environment](https://developer.mozilla.org/en-US/docs/Glossary/Document_environment)
|
||||
- [DOM (*Document Object Model*)](https://developer.mozilla.org/en-US/docs/Glossary/DOM)
|
||||
- [Domain](https://developer.mozilla.org/en-US/docs/Glossary/Domain)
|
||||
- [Domain name](https://developer.mozilla.org/en-US/docs/Glossary/Domain_name)
|
||||
- [Domain sharding](https://developer.mozilla.org/en-US/docs/Glossary/Domain_sharding)
|
||||
- [Dominator](https://developer.mozilla.org/en-US/docs/Glossary/Dominator)
|
||||
- [DSL](https://developer.mozilla.org/en-US/docs/Glossary/DSL)
|
||||
- [DSL (*Digital Subscriber Line*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Digital_Subscriber_Line)
|
||||
- [DSL (*Domain-Specific Language*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Domain-Specific_Language)
|
||||
- [DTLS (*Datagram Transport Layer Security*)](https://developer.mozilla.org/en-US/docs/Glossary/DTLS)
|
||||
- [DTMF (*Dual-Tone Multi-Frequency signaling*)](https://developer.mozilla.org/en-US/docs/Glossary/DTMF)
|
||||
- [Dynamic typing](https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing)
|
||||
- [ECMA](https://developer.mozilla.org/en-US/docs/Glossary/ECMA)
|
||||
- [ECMAScript](https://developer.mozilla.org/en-US/docs/Glossary/ECMAScript)
|
||||
- [Effective connection type](https://developer.mozilla.org/en-US/docs/Glossary/Effective_connection_type)
|
||||
- [Element](https://developer.mozilla.org/en-US/docs/Glossary/Element)
|
||||
- [Encapsulation](https://developer.mozilla.org/en-US/docs/Glossary/Encapsulation)
|
||||
- [Encryption](https://developer.mozilla.org/en-US/docs/Glossary/Encryption)
|
||||
- [Endianness](https://developer.mozilla.org/en-US/docs/Glossary/Endianness)
|
||||
- [Engine](https://developer.mozilla.org/en-US/docs/Glossary/Engine)
|
||||
- [JavaScript engine](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript_engine)
|
||||
- [Rendering engine](https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine)
|
||||
- [Entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity)
|
||||
- [Entity header](https://developer.mozilla.org/en-US/docs/Glossary/Entity_header)
|
||||
- [Enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated)
|
||||
- [Escape character](https://developer.mozilla.org/en-US/docs/Glossary/Escape_character)
|
||||
- [Event](https://developer.mozilla.org/en-US/docs/Glossary/Event)
|
||||
- [Exception](https://developer.mozilla.org/en-US/docs/Glossary/Exception)
|
||||
- [EXIF](https://developer.mozilla.org/en-US/docs/Glossary/EXIF)
|
||||
- [Expando](https://developer.mozilla.org/en-US/docs/Glossary/Expando)
|
||||
- [Extrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Extrinsic_size)
|
||||
- [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_alignment)
|
||||
- [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
|
||||
- [Favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon)
|
||||
- [Federated identity](https://developer.mozilla.org/en-US/docs/Glossary/Federated_identity)
|
||||
- [Fetch directive](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive)
|
||||
- [Fetch metadata request header](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_metadata_request_header)
|
||||
- [Fingerprinting](https://developer.mozilla.org/en-US/docs/Glossary/Fingerprinting)
|
||||
- [Firefox OS](https://developer.mozilla.org/en-US/docs/Glossary/Firefox_OS)
|
||||
- [Firewall](https://developer.mozilla.org/en-US/docs/Glossary/Firewall)
|
||||
- [First Contentful Paint (*FCP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_Contentful_Paint_(FCP))
|
||||
- [First CPU idle](https://developer.mozilla.org/en-US/docs/Glossary/First_CPU_idle)
|
||||
- [First Input Delay (FID)Deprecated](https://developer.mozilla.org/en-US/docs/Glossary/First_Input_Delay)
|
||||
- [First Meaningful Paint (*FMP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_meaningful_paint)
|
||||
- [First Paint (*FP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_paint)
|
||||
- [First-class function](https://developer.mozilla.org/en-US/docs/Glossary/First-class_function)
|
||||
- [Flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex)
|
||||
- [Flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_container)
|
||||
- [Flex item](https://developer.mozilla.org/en-US/docs/Glossary/Flex_item)
|
||||
- [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)
|
||||
- [Flow relative values](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values)
|
||||
- [Forbidden request header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_request_header)
|
||||
- [Forbidden response header name](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name)
|
||||
- [Fork](https://developer.mozilla.org/en-US/docs/Glossary/Fork)
|
||||
- [Fragmentainer](https://developer.mozilla.org/en-US/docs/Glossary/Fragmentainer)
|
||||
- [Frame rate (*FPS*)](https://developer.mozilla.org/en-US/docs/Glossary/FPS)
|
||||
- [FTP](https://developer.mozilla.org/en-US/docs/Glossary/FTP)
|
||||
- [FTU](https://developer.mozilla.org/en-US/docs/Glossary/FTU)
|
||||
- [Function](https://developer.mozilla.org/en-US/docs/Glossary/Function)
|
||||
- [Fuzz testing](https://developer.mozilla.org/en-US/docs/Glossary/Fuzz_testing)
|
||||
- [Gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut)
|
||||
- [Garbage collection](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection)
|
||||
- [Gecko](https://developer.mozilla.org/en-US/docs/Glossary/Gecko)
|
||||
- [General header](https://developer.mozilla.org/en-US/docs/Glossary/General_header)
|
||||
- [GIF](https://developer.mozilla.org/en-US/docs/Glossary/GIF)
|
||||
- [Git](https://developer.mozilla.org/en-US/docs/Glossary/Git)
|
||||
- [Global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)
|
||||
- [Global scope](https://developer.mozilla.org/en-US/docs/Glossary/Global_scope)
|
||||
- [Global variable](https://developer.mozilla.org/en-US/docs/Glossary/Global_variable)
|
||||
- [Glyph](https://developer.mozilla.org/en-US/docs/Glossary/Glyph)
|
||||
- [Google Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Google_Chrome)
|
||||
- [GPL](https://developer.mozilla.org/en-US/docs/Glossary/GPL)
|
||||
- [GPU](https://developer.mozilla.org/en-US/docs/Glossary/GPU)
|
||||
- [Graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation)
|
||||
- [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid)
|
||||
- [Grid areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_areas)
|
||||
- [Grid Axis](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis)
|
||||
- [Grid Cell](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Cell)
|
||||
- [Grid Column](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column)
|
||||
- [Grid container](https://developer.mozilla.org/en-US/docs/Glossary/Grid_container)
|
||||
- [Grid lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines)
|
||||
- [Grid Row](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row)
|
||||
- [Grid Tracks](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks)
|
||||
- [Guaranteed-invalid value](https://developer.mozilla.org/en-US/docs/Glossary/Guaranteed-invalid_value)
|
||||
- [Gutters](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)
|
||||
- [gzip compression](https://developer.mozilla.org/en-US/docs/Glossary/gzip_compression)
|
||||
- [Hash function](https://developer.mozilla.org/en-US/docs/Glossary/Hash_function)
|
||||
- [Hash routing](https://developer.mozilla.org/en-US/docs/Glossary/Hash_routing)
|
||||
- [Head](https://developer.mozilla.org/en-US/docs/Glossary/Head)
|
||||
- [High-level programming language](https://developer.mozilla.org/en-US/docs/Glossary/High-level_programming_language)
|
||||
- [HMAC](https://developer.mozilla.org/en-US/docs/Glossary/HMAC)
|
||||
- [Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
|
||||
- [HOL blocking](https://developer.mozilla.org/en-US/docs/Glossary/HOL_blocking)
|
||||
- [Host](https://developer.mozilla.org/en-US/docs/Glossary/Host)
|
||||
- [Hotlink](https://developer.mozilla.org/en-US/docs/Glossary/Hotlink)
|
||||
- [Houdini](https://developer.mozilla.org/en-US/docs/Glossary/Houdini)
|
||||
- [HPKP](https://developer.mozilla.org/en-US/docs/Glossary/HPKP)
|
||||
- [HSTS](https://developer.mozilla.org/en-US/docs/Glossary/HSTS)
|
||||
- [HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML)
|
||||
- [HTML color codes](https://developer.mozilla.org/en-US/docs/Glossary/HTML_color_codes)
|
||||
- [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)
|
||||
- [HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)
|
||||
- [HTTP content](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_content)
|
||||
- [HTTP header](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_header)
|
||||
- [HTTP/2](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/2)
|
||||
- [HTTP/3](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/3)
|
||||
- [HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS)
|
||||
- [HTTPS RR](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS_RR)
|
||||
- [Hyperlink](https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink)
|
||||
- [Hypertext](https://developer.mozilla.org/en-US/docs/Glossary/Hypertext)
|
||||
- [IANA](https://developer.mozilla.org/en-US/docs/Glossary/IANA)
|
||||
- [ICANN](https://developer.mozilla.org/en-US/docs/Glossary/ICANN)
|
||||
- [ICE](https://developer.mozilla.org/en-US/docs/Glossary/ICE)
|
||||
- [IDE](https://developer.mozilla.org/en-US/docs/Glossary/IDE)
|
||||
- [Idempotent](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent)
|
||||
- [Identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier)
|
||||
- [Identity provider (*IdP*)](https://developer.mozilla.org/en-US/docs/Glossary/Identity_provider)
|
||||
- [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)
|
||||
- [IETF](https://developer.mozilla.org/en-US/docs/Glossary/IETF)
|
||||
- [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
|
||||
- [IMAP](https://developer.mozilla.org/en-US/docs/Glossary/IMAP)
|
||||
- [Immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable)
|
||||
- [IndexedDB](https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB)
|
||||
- [Information architecture](https://developer.mozilla.org/en-US/docs/Glossary/Information_architecture)
|
||||
- [Inheritance](https://developer.mozilla.org/en-US/docs/Glossary/Inheritance)
|
||||
- [Ink overflow](https://developer.mozilla.org/en-US/docs/Glossary/Ink_overflow)
|
||||
- [Inline-level content](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content)
|
||||
- [Input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor)
|
||||
- [Inset properties](https://developer.mozilla.org/en-US/docs/Glossary/Inset_properties)
|
||||
- [Instance](https://developer.mozilla.org/en-US/docs/Glossary/Instance)
|
||||
- [Interaction to Next Paint (*INP*)](https://developer.mozilla.org/en-US/docs/Glossary/interaction_to_next_paint)
|
||||
- [Internationalization (*i18n*)](https://developer.mozilla.org/en-US/docs/Glossary/Internationalization)
|
||||
- [Internet](https://developer.mozilla.org/en-US/docs/Glossary/Internet)
|
||||
- [Interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation)
|
||||
- [Intrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_size)
|
||||
- [Invariant](https://developer.mozilla.org/en-US/docs/Glossary/Invariant)
|
||||
- [IP Address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address)
|
||||
- [IPv4](https://developer.mozilla.org/en-US/docs/Glossary/IPv4)
|
||||
- [IPv6](https://developer.mozilla.org/en-US/docs/Glossary/IPv6)
|
||||
- [IRC](https://developer.mozilla.org/en-US/docs/Glossary/IRC)
|
||||
- [ISO](https://developer.mozilla.org/en-US/docs/Glossary/ISO)
|
||||
- [ISP](https://developer.mozilla.org/en-US/docs/Glossary/ISP)
|
||||
- [ITU](https://developer.mozilla.org/en-US/docs/Glossary/ITU)
|
||||
- [Jank](https://developer.mozilla.org/en-US/docs/Glossary/Jank)
|
||||
- [Java](https://developer.mozilla.org/en-US/docs/Glossary/Java)
|
||||
- [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript)
|
||||
- [Jitter](https://developer.mozilla.org/en-US/docs/Glossary/Jitter)
|
||||
- [JPEG](https://developer.mozilla.org/en-US/docs/Glossary/JPEG)
|
||||
- [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON)
|
||||
- [JSON type representation](https://developer.mozilla.org/en-US/docs/Glossary/JSON_type_representation)
|
||||
- [Just-In-Time Compilation (*JIT*)](https://developer.mozilla.org/en-US/docs/Glossary/Just-in-time_compilation)
|
||||
- [Kebab case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case)
|
||||
- [Key](https://developer.mozilla.org/en-US/docs/Glossary/Key)
|
||||
- [Keyword](https://developer.mozilla.org/en-US/docs/Glossary/Keyword)
|
||||
- [Largest Contentful Paint (*LCP*)](https://developer.mozilla.org/en-US/docs/Glossary/Largest_contentful_paint)
|
||||
- [Latency](https://developer.mozilla.org/en-US/docs/Glossary/Latency)
|
||||
- [Layout mode](https://developer.mozilla.org/en-US/docs/Glossary/Layout_mode)
|
||||
- [Layout viewport](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport)
|
||||
- [Lazy load](https://developer.mozilla.org/en-US/docs/Glossary/Lazy_load)
|
||||
- [Leading](https://developer.mozilla.org/en-US/docs/Glossary/Leading)
|
||||
- [LGPL](https://developer.mozilla.org/en-US/docs/Glossary/LGPL)
|
||||
- [Ligature](https://developer.mozilla.org/en-US/docs/Glossary/Ligature)
|
||||
- [Literal](https://developer.mozilla.org/en-US/docs/Glossary/Literal)
|
||||
- [Local scope](https://developer.mozilla.org/en-US/docs/Glossary/Local_scope)
|
||||
- [Local variable](https://developer.mozilla.org/en-US/docs/Glossary/Local_variable)
|
||||
- [Locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale)
|
||||
- [Localization](https://developer.mozilla.org/en-US/docs/Glossary/Localization)
|
||||
- [Logical properties](https://developer.mozilla.org/en-US/docs/Glossary/Logical_properties)
|
||||
- [Long task](https://developer.mozilla.org/en-US/docs/Glossary/Long_task)
|
||||
- [Loop](https://developer.mozilla.org/en-US/docs/Glossary/Loop)
|
||||
- [Lossless compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossless_compression)
|
||||
- [Lossy compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossy_compression)
|
||||
- [LTR (*Left To Right*)](https://developer.mozilla.org/en-US/docs/Glossary/LTR)
|
||||
- [Main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_axis)
|
||||
- [Main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread)
|
||||
- [Markup](https://developer.mozilla.org/en-US/docs/Glossary/Markup)
|
||||
- [MathML](https://developer.mozilla.org/en-US/docs/Glossary/MathML)
|
||||
- [Media](https://developer.mozilla.org/en-US/docs/Glossary/Media)
|
||||
- [Media (*Audio-visual presentation*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/Audio-visual_presentation)
|
||||
- [Media (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/CSS)
|
||||
- [Media query](https://developer.mozilla.org/en-US/docs/Glossary/Media_query)
|
||||
- [Metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)
|
||||
- [Method](https://developer.mozilla.org/en-US/docs/Glossary/Method)
|
||||
- [Microsoft Edge](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Edge)
|
||||
- [Microsoft Internet Explorer](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Internet_Explorer)
|
||||
- [Middleware](https://developer.mozilla.org/en-US/docs/Glossary/Middleware)
|
||||
- [MIME](https://developer.mozilla.org/en-US/docs/Glossary/MIME)
|
||||
- [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type)
|
||||
- [Minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)
|
||||
- [MitM](https://developer.mozilla.org/en-US/docs/Glossary/MitM)
|
||||
- [Mixin](https://developer.mozilla.org/en-US/docs/Glossary/Mixin)
|
||||
- [Mobile first](https://developer.mozilla.org/en-US/docs/Glossary/Mobile_first)
|
||||
- [Modem](https://developer.mozilla.org/en-US/docs/Glossary/Modem)
|
||||
- [Modularity](https://developer.mozilla.org/en-US/docs/Glossary/Modularity)
|
||||
- [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Mozilla_Firefox)
|
||||
- [Multi-factor authentication](https://developer.mozilla.org/en-US/docs/Glossary/Multi-factor_authentication)
|
||||
- [Mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable)
|
||||
- [MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)
|
||||
- [Namespace](https://developer.mozilla.org/en-US/docs/Glossary/Namespace)
|
||||
- [NaN](https://developer.mozilla.org/en-US/docs/Glossary/NaN)
|
||||
- [NAT](https://developer.mozilla.org/en-US/docs/Glossary/NAT)
|
||||
- [Native](https://developer.mozilla.org/en-US/docs/Glossary/Native)
|
||||
- [Navigation directive](https://developer.mozilla.org/en-US/docs/Glossary/Navigation_directive)
|
||||
- [Netscape Navigator](https://developer.mozilla.org/en-US/docs/Glossary/Netscape_Navigator)
|
||||
- [Network throttling](https://developer.mozilla.org/en-US/docs/Glossary/Network_throttling)
|
||||
- [NNTP](https://developer.mozilla.org/en-US/docs/Glossary/NNTP)
|
||||
- [Node](https://developer.mozilla.org/en-US/docs/Glossary/Node)
|
||||
- [Node (*DOM*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/DOM)
|
||||
- [Node (*networking*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/Networking)
|
||||
- [Node.js](https://developer.mozilla.org/en-US/docs/Glossary/Node.js)
|
||||
- [Non-normative](https://developer.mozilla.org/en-US/docs/Glossary/Non-normative)
|
||||
- [Nonce](https://developer.mozilla.org/en-US/docs/Glossary/Nonce)
|
||||
- [Normative](https://developer.mozilla.org/en-US/docs/Glossary/Normative)
|
||||
- [Null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
|
||||
- [Nullish value](https://developer.mozilla.org/en-US/docs/Glossary/Nullish_value)
|
||||
- [Number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
|
||||
- [Object](https://developer.mozilla.org/en-US/docs/Glossary/Object)
|
||||
- [Object reference](https://developer.mozilla.org/en-US/docs/Glossary/Object_reference)
|
||||
- [OOP](https://developer.mozilla.org/en-US/docs/Glossary/OOP)
|
||||
- [OpenGL](https://developer.mozilla.org/en-US/docs/Glossary/OpenGL)
|
||||
- [OpenSSL](https://developer.mozilla.org/en-US/docs/Glossary/OpenSSL)
|
||||
- [Opera browser](https://developer.mozilla.org/en-US/docs/Glossary/Opera_browser)
|
||||
- [Operand](https://developer.mozilla.org/en-US/docs/Glossary/Operand)
|
||||
- [Operator](https://developer.mozilla.org/en-US/docs/Glossary/Operator)
|
||||
- [Origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin)
|
||||
- [OTA](https://developer.mozilla.org/en-US/docs/Glossary/OTA)
|
||||
- [OWASP](https://developer.mozilla.org/en-US/docs/Glossary/OWASP)
|
||||
- [P2P](https://developer.mozilla.org/en-US/docs/Glossary/P2P)
|
||||
- [PAC](https://developer.mozilla.org/en-US/docs/Glossary/PAC)
|
||||
- [Packet](https://developer.mozilla.org/en-US/docs/Glossary/Packet)
|
||||
- [Page load time](https://developer.mozilla.org/en-US/docs/Glossary/Page_load_time)
|
||||
- [Page prediction](https://developer.mozilla.org/en-US/docs/Glossary/Page_prediction)
|
||||
- [Parameter](https://developer.mozilla.org/en-US/docs/Glossary/Parameter)
|
||||
- [Parent object](https://developer.mozilla.org/en-US/docs/Glossary/Parent_object)
|
||||
- [Parse](https://developer.mozilla.org/en-US/docs/Glossary/Parse)
|
||||
- [Parser](https://developer.mozilla.org/en-US/docs/Glossary/Parser)
|
||||
- [Payload body](https://developer.mozilla.org/en-US/docs/Glossary/Payload_body)
|
||||
- [Payload header](https://developer.mozilla.org/en-US/docs/Glossary/Payload_header)
|
||||
- [PDF](https://developer.mozilla.org/en-US/docs/Glossary/PDF)
|
||||
- [Perceived performance](https://developer.mozilla.org/en-US/docs/Glossary/Perceived_performance)
|
||||
- [Percent-encoding](https://developer.mozilla.org/en-US/docs/Glossary/Percent-encoding)
|
||||
- [PHP](https://developer.mozilla.org/en-US/docs/Glossary/PHP)
|
||||
- [Physical properties](https://developer.mozilla.org/en-US/docs/Glossary/Physical_properties)
|
||||
- [Pixel](https://developer.mozilla.org/en-US/docs/Glossary/Pixel)
|
||||
- [Placeholder names](https://developer.mozilla.org/en-US/docs/Glossary/Placeholder_names)
|
||||
- [Plaintext](https://developer.mozilla.org/en-US/docs/Glossary/Plaintext)
|
||||
- [Plugin](https://developer.mozilla.org/en-US/docs/Glossary/Plugin)
|
||||
- [PNG](https://developer.mozilla.org/en-US/docs/Glossary/PNG)
|
||||
- [Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)
|
||||
- [Polymorphism](https://developer.mozilla.org/en-US/docs/Glossary/Polymorphism)
|
||||
- [POP3](https://developer.mozilla.org/en-US/docs/Glossary/POP3)
|
||||
- [Port](https://developer.mozilla.org/en-US/docs/Glossary/Port)
|
||||
- [Prefetch](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch)
|
||||
- [Preflight request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request)
|
||||
- [Prerender](https://developer.mozilla.org/en-US/docs/Glossary/Prerender)
|
||||
- [Presto](https://developer.mozilla.org/en-US/docs/Glossary/Presto)
|
||||
- [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)
|
||||
- [Principle of least privilege](https://developer.mozilla.org/en-US/docs/Glossary/Principle_of_least_privilege)
|
||||
- [Privileged](https://developer.mozilla.org/en-US/docs/Glossary/Privileged)
|
||||
- [Privileged code](https://developer.mozilla.org/en-US/docs/Glossary/Privileged_code)
|
||||
- [Progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_enhancement)
|
||||
- [Progressive web applications (*PWAs*)](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_web_apps)
|
||||
- [Promise](https://developer.mozilla.org/en-US/docs/Glossary/Promise)
|
||||
- [Property](https://developer.mozilla.org/en-US/docs/Glossary/Property)
|
||||
- [Property (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/CSS)
|
||||
- [Property (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript)
|
||||
- [Protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol)
|
||||
- [Prototype](https://developer.mozilla.org/en-US/docs/Glossary/Prototype)
|
||||
- [Prototype-based programming](https://developer.mozilla.org/en-US/docs/Glossary/Prototype-based_programming)
|
||||
- [Proxy server](https://developer.mozilla.org/en-US/docs/Glossary/Proxy_server)
|
||||
- [Pseudo-class](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-class)
|
||||
- [Pseudo-element](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-element)
|
||||
- [Pseudocode](https://developer.mozilla.org/en-US/docs/Glossary/Pseudocode)
|
||||
- [Public-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Public-key_cryptography)
|
||||
- [Python](https://developer.mozilla.org/en-US/docs/Glossary/Python)
|
||||
- [Quality values](https://developer.mozilla.org/en-US/docs/Glossary/Quality_values)
|
||||
- [Quaternion](https://developer.mozilla.org/en-US/docs/Glossary/Quaternion)
|
||||
- [QUIC](https://developer.mozilla.org/en-US/docs/Glossary/QUIC)
|
||||
- [RAIL](https://developer.mozilla.org/en-US/docs/Glossary/RAIL)
|
||||
- [Random Number Generator](https://developer.mozilla.org/en-US/docs/Glossary/Random_Number_Generator)
|
||||
- [Raster image](https://developer.mozilla.org/en-US/docs/Glossary/Raster_image)
|
||||
- [Rate limit](https://developer.mozilla.org/en-US/docs/Glossary/Rate_limit)
|
||||
- [RDF](https://developer.mozilla.org/en-US/docs/Glossary/RDF)
|
||||
- [Reading order](https://developer.mozilla.org/en-US/docs/Glossary/Reading_order)
|
||||
- [Real User Monitoring (*RUM*)](https://developer.mozilla.org/en-US/docs/Glossary/Real_User_Monitoring)
|
||||
- [Recursion](https://developer.mozilla.org/en-US/docs/Glossary/Recursion)
|
||||
- [Reflow](https://developer.mozilla.org/en-US/docs/Glossary/Reflow)
|
||||
- [Registrable domain](https://developer.mozilla.org/en-US/docs/Glossary/Registrable_domain)
|
||||
- [Regular expression](https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression)
|
||||
- [Relying party](https://developer.mozilla.org/en-US/docs/Glossary/Relying_party)
|
||||
- [Render-blocking](https://developer.mozilla.org/en-US/docs/Glossary/Render-blocking)
|
||||
- [Repaint](https://developer.mozilla.org/en-US/docs/Glossary/Repaint)
|
||||
- [Replaced elements](https://developer.mozilla.org/en-US/docs/Glossary/Replaced_elements)
|
||||
- [Replay attack](https://developer.mozilla.org/en-US/docs/Glossary/Replay_attack)
|
||||
- [Repo](https://developer.mozilla.org/en-US/docs/Glossary/Repo)
|
||||
- [Reporting directive](https://developer.mozilla.org/en-US/docs/Glossary/Reporting_directive)
|
||||
- [Representation header](https://developer.mozilla.org/en-US/docs/Glossary/Representation_header)
|
||||
- [Request header](https://developer.mozilla.org/en-US/docs/Glossary/Request_header)
|
||||
- [Resource Timing](https://developer.mozilla.org/en-US/docs/Glossary/Resource_Timing)
|
||||
- [Response header](https://developer.mozilla.org/en-US/docs/Glossary/Response_header)
|
||||
- [Responsive Web Design (*RWD*)](https://developer.mozilla.org/en-US/docs/Glossary/Responsive_Web_Design)
|
||||
- [REST](https://developer.mozilla.org/en-US/docs/Glossary/REST)
|
||||
- [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB)
|
||||
- [RIL](https://developer.mozilla.org/en-US/docs/Glossary/RIL)
|
||||
- [Robots.txt](https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt)
|
||||
- [Round Trip Time (*RTT*)](https://developer.mozilla.org/en-US/docs/Glossary/Round_Trip_Time)
|
||||
- [Router](https://developer.mozilla.org/en-US/docs/Glossary/Router)
|
||||
- [RSS](https://developer.mozilla.org/en-US/docs/Glossary/RSS)
|
||||
- [Rsync](https://developer.mozilla.org/en-US/docs/Glossary/Rsync)
|
||||
- [RTCP (*RTP Control Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/RTCP)
|
||||
- [RTF](https://developer.mozilla.org/en-US/docs/Glossary/RTF)
|
||||
- [RTL (*Right to Left*)](https://developer.mozilla.org/en-US/docs/Glossary/RTL)
|
||||
- [RTP (*Real-time Transport Protocol*) and SRTP (*Secure RTP*)](https://developer.mozilla.org/en-US/docs/Glossary/RTP)
|
||||
- [RTSP: Real-time streaming protocol](https://developer.mozilla.org/en-US/docs/Glossary/RTSP)
|
||||
- [Ruby](https://developer.mozilla.org/en-US/docs/Glossary/Ruby)
|
||||
- [Safe](https://developer.mozilla.org/en-US/docs/Glossary/Safe)
|
||||
- [Safe (*HTTP Methods*)](https://developer.mozilla.org/en-US/docs/Glossary/Safe/HTTP)
|
||||
- [Salt](https://developer.mozilla.org/en-US/docs/Glossary/Salt)
|
||||
- [Same-origin policy](https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy)
|
||||
- [SCM](https://developer.mozilla.org/en-US/docs/Glossary/SCM)
|
||||
- [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
|
||||
- [Screen reader](https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader)
|
||||
- [Script-supporting element](https://developer.mozilla.org/en-US/docs/Glossary/Script-supporting_element)
|
||||
- [Scroll boundary](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_boundary)
|
||||
- [Scroll chaining](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining)
|
||||
- [Scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container)
|
||||
- [Scroll snap](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_snap)
|
||||
- [SCTP](https://developer.mozilla.org/en-US/docs/Glossary/SCTP)
|
||||
- [SDK (*Software Development Kit*)](https://developer.mozilla.org/en-US/docs/Glossary/SDK)
|
||||
- [SDP](https://developer.mozilla.org/en-US/docs/Glossary/SDP)
|
||||
- [Search engine](https://developer.mozilla.org/en-US/docs/Glossary/Search_engine)
|
||||
- [Secure context](https://developer.mozilla.org/en-US/docs/Glossary/Secure_context)
|
||||
- [Secure Sockets Layer (*SSL*)](https://developer.mozilla.org/en-US/docs/Glossary/SSL)
|
||||
- [Selector (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector)
|
||||
- [Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
|
||||
- [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO)
|
||||
- [Serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object)
|
||||
- [Serialization](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)
|
||||
- [Server](https://developer.mozilla.org/en-US/docs/Glossary/Server)
|
||||
- [Server Timing](https://developer.mozilla.org/en-US/docs/Glossary/Server_Timing)
|
||||
- [Server-side rendering (*SSR*)](https://developer.mozilla.org/en-US/docs/Glossary/SSR)
|
||||
- [Session hijacking](https://developer.mozilla.org/en-US/docs/Glossary/Session_hijacking)
|
||||
- [SGML](https://developer.mozilla.org/en-US/docs/Glossary/SGML)
|
||||
- [Shadow tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)
|
||||
- [Shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy)
|
||||
- [Shim](https://developer.mozilla.org/en-US/docs/Glossary/Shim)
|
||||
- [Signature](https://developer.mozilla.org/en-US/docs/Glossary/Signature)
|
||||
- [Signature (*functions*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(functions))
|
||||
- [Signature (*security*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(security))
|
||||
- [SIMD](https://developer.mozilla.org/en-US/docs/Glossary/SIMD)
|
||||
- [SISD](https://developer.mozilla.org/en-US/docs/Glossary/SISD)
|
||||
- [Site](https://developer.mozilla.org/en-US/docs/Glossary/Site)
|
||||
- [Site map](https://developer.mozilla.org/en-US/docs/Glossary/Site_map)
|
||||
- [SLD](https://developer.mozilla.org/en-US/docs/Glossary/SLD)
|
||||
- [Sloppy mode](https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode)
|
||||
- [Slug](https://developer.mozilla.org/en-US/docs/Glossary/Slug)
|
||||
- [Smoke test](https://developer.mozilla.org/en-US/docs/Glossary/Smoke_test)
|
||||
- [SMPTE (*Society of Motion Picture and Television Engineers*)](https://developer.mozilla.org/en-US/docs/Glossary/SMPTE)
|
||||
- [SMTP](https://developer.mozilla.org/en-US/docs/Glossary/SMTP)
|
||||
- [Snake case](https://developer.mozilla.org/en-US/docs/Glossary/Snake_case)
|
||||
- [Snap positions](https://developer.mozilla.org/en-US/docs/Glossary/Snap_positions)
|
||||
- [SOAP](https://developer.mozilla.org/en-US/docs/Glossary/SOAP)
|
||||
- [Social engineering](https://developer.mozilla.org/en-US/docs/Glossary/Social_engineering)
|
||||
- [Source map](https://developer.mozilla.org/en-US/docs/Glossary/Source_map)
|
||||
- [SPA (*Single-page application*)](https://developer.mozilla.org/en-US/docs/Glossary/SPA)
|
||||
- [Specification](https://developer.mozilla.org/en-US/docs/Glossary/Specification)
|
||||
- [Speculative parsing](https://developer.mozilla.org/en-US/docs/Glossary/Speculative_parsing)
|
||||
- [Speed index](https://developer.mozilla.org/en-US/docs/Glossary/Speed_index)
|
||||
- [SQL](https://developer.mozilla.org/en-US/docs/Glossary/SQL)
|
||||
- [SQL injection](https://developer.mozilla.org/en-US/docs/Glossary/SQL_injection)
|
||||
- [SRI](https://developer.mozilla.org/en-US/docs/Glossary/SRI)
|
||||
- [Stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context)
|
||||
- [State machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine)
|
||||
- [Statement](https://developer.mozilla.org/en-US/docs/Glossary/Statement)
|
||||
- [Static method](https://developer.mozilla.org/en-US/docs/Glossary/Static_method)
|
||||
- [Static site generator (*SSG*)](https://developer.mozilla.org/en-US/docs/Glossary/SSG)
|
||||
- [Static typing](https://developer.mozilla.org/en-US/docs/Glossary/Static_typing)
|
||||
- [Sticky activation](https://developer.mozilla.org/en-US/docs/Glossary/Sticky_activation)
|
||||
- [Strict mode](https://developer.mozilla.org/en-US/docs/Glossary/Strict_mode)
|
||||
- [String](https://developer.mozilla.org/en-US/docs/Glossary/String)
|
||||
- [Stringifier](https://developer.mozilla.org/en-US/docs/Glossary/Stringifier)
|
||||
- [STUN](https://developer.mozilla.org/en-US/docs/Glossary/STUN)
|
||||
- [Style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin)
|
||||
- [Stylesheet](https://developer.mozilla.org/en-US/docs/Glossary/Stylesheet)
|
||||
- [Submit button](https://developer.mozilla.org/en-US/docs/Glossary/Submit_button)
|
||||
- [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG)
|
||||
- [SVN](https://developer.mozilla.org/en-US/docs/Glossary/SVN)
|
||||
- [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol)
|
||||
- [Symmetric-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Symmetric-key_cryptography)
|
||||
- [Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous)
|
||||
- [Syntax](https://developer.mozilla.org/en-US/docs/Glossary/Syntax)
|
||||
- [Syntax error](https://developer.mozilla.org/en-US/docs/Glossary/Syntax_error)
|
||||
- [Synthetic monitoring](https://developer.mozilla.org/en-US/docs/Glossary/Synthetic_monitoring)
|
||||
- [Table grid box](https://developer.mozilla.org/en-US/docs/Glossary/Table_grid_box)
|
||||
- [Table wrapper box](https://developer.mozilla.org/en-US/docs/Glossary/Table_wrapper_box)
|
||||
- [Tag](https://developer.mozilla.org/en-US/docs/Glossary/Tag)
|
||||
- [TCP](https://developer.mozilla.org/en-US/docs/Glossary/TCP)
|
||||
- [TCP handshake](https://developer.mozilla.org/en-US/docs/Glossary/TCP_handshake)
|
||||
- [TCP slow start](https://developer.mozilla.org/en-US/docs/Glossary/TCP_slow_start)
|
||||
- [Telnet](https://developer.mozilla.org/en-US/docs/Glossary/Telnet)
|
||||
- [Texel](https://developer.mozilla.org/en-US/docs/Glossary/Texel)
|
||||
- [The Khronos Group](https://developer.mozilla.org/en-US/docs/Glossary/The_Khronos_Group)
|
||||
- [Thread](https://developer.mozilla.org/en-US/docs/Glossary/Thread)
|
||||
- [Three js](https://developer.mozilla.org/en-US/docs/Glossary/Three_js)
|
||||
- [Throttle](https://developer.mozilla.org/en-US/docs/Glossary/Throttle)
|
||||
- [Time to First Byte (*TTFB*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte)
|
||||
- [Time to Interactive (*TTI*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_interactive)
|
||||
- [TLD](https://developer.mozilla.org/en-US/docs/Glossary/TLD)
|
||||
- [TOFU](https://developer.mozilla.org/en-US/docs/Glossary/TOFU)
|
||||
- [Top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
|
||||
- [Transient activation](https://developer.mozilla.org/en-US/docs/Glossary/Transient_activation)
|
||||
- [Transport Layer Security (*TLS*)](https://developer.mozilla.org/en-US/docs/Glossary/TLS)
|
||||
- [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)
|
||||
- [Trident](https://developer.mozilla.org/en-US/docs/Glossary/Trident)
|
||||
- [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
|
||||
- [TTL](https://developer.mozilla.org/en-US/docs/Glossary/TTL)
|
||||
- [TURN](https://developer.mozilla.org/en-US/docs/Glossary/TURN)
|
||||
- [Type](https://developer.mozilla.org/en-US/docs/Glossary/Type)
|
||||
- [Type coercion](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion)
|
||||
- [Type conversion](https://developer.mozilla.org/en-US/docs/Glossary/Type_conversion)
|
||||
- [TypeScript](https://developer.mozilla.org/en-US/docs/Glossary/TypeScript)
|
||||
- [UAAG](https://developer.mozilla.org/en-US/docs/Glossary/UAAG)
|
||||
- [UDP (*User Datagram Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/UDP)
|
||||
- [UI](https://developer.mozilla.org/en-US/docs/Glossary/UI)
|
||||
- [Undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
|
||||
- [Unicode](https://developer.mozilla.org/en-US/docs/Glossary/Unicode)
|
||||
- [Unix time](https://developer.mozilla.org/en-US/docs/Glossary/Unix_time)
|
||||
- [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI)
|
||||
- [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL)
|
||||
- [URN](https://developer.mozilla.org/en-US/docs/Glossary/URN)
|
||||
- [Usenet](https://developer.mozilla.org/en-US/docs/Glossary/Usenet)
|
||||
- [User agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)
|
||||
- [UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/UTF-8)
|
||||
- [UTF-16](https://developer.mozilla.org/en-US/docs/Glossary/UTF-16)
|
||||
- [UUID](https://developer.mozilla.org/en-US/docs/Glossary/UUID)
|
||||
- [UX](https://developer.mozilla.org/en-US/docs/Glossary/UX)
|
||||
- [Validator](https://developer.mozilla.org/en-US/docs/Glossary/Validator)
|
||||
- [Value](https://developer.mozilla.org/en-US/docs/Glossary/Value)
|
||||
- [Variable](https://developer.mozilla.org/en-US/docs/Glossary/Variable)
|
||||
- [Vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_prefix)
|
||||
- [Viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)
|
||||
- [Visual viewport](https://developer.mozilla.org/en-US/docs/Glossary/Visual_viewport)
|
||||
- [Void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)
|
||||
- [VoIP](https://developer.mozilla.org/en-US/docs/Glossary/VoIP)
|
||||
- [W3C](https://developer.mozilla.org/en-US/docs/Glossary/W3C)
|
||||
- [WAI](https://developer.mozilla.org/en-US/docs/Glossary/WAI)
|
||||
- [WCAG](https://developer.mozilla.org/en-US/docs/Glossary/WCAG)
|
||||
- [Web performance](https://developer.mozilla.org/en-US/docs/Glossary/Web_performance)
|
||||
- [Web server](https://developer.mozilla.org/en-US/docs/Glossary/Web_server)
|
||||
- [Web standards](https://developer.mozilla.org/en-US/docs/Glossary/Web_standards)
|
||||
- [WebAssembly](https://developer.mozilla.org/en-US/docs/Glossary/WebAssembly)
|
||||
- [WebDAV](https://developer.mozilla.org/en-US/docs/Glossary/WebDAV)
|
||||
- [WebExtensions](https://developer.mozilla.org/en-US/docs/Glossary/WebExtensions)
|
||||
- [WebGL](https://developer.mozilla.org/en-US/docs/Glossary/WebGL)
|
||||
- [WebIDL](https://developer.mozilla.org/en-US/docs/Glossary/WebIDL)
|
||||
- [WebKit](https://developer.mozilla.org/en-US/docs/Glossary/WebKit)
|
||||
- [WebM](https://developer.mozilla.org/en-US/docs/Glossary/WebM)
|
||||
- [WebP](https://developer.mozilla.org/en-US/docs/Glossary/WebP)
|
||||
- [WebRTC](https://developer.mozilla.org/en-US/docs/Glossary/WebRTC)
|
||||
- [WebSockets](https://developer.mozilla.org/en-US/docs/Glossary/WebSockets)
|
||||
- [WebVTT](https://developer.mozilla.org/en-US/docs/Glossary/WebVTT)
|
||||
- [WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)
|
||||
- [Whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace)
|
||||
- [WindowProxy](https://developer.mozilla.org/en-US/docs/Glossary/WindowProxy)
|
||||
- [World Wide Web](https://developer.mozilla.org/en-US/docs/Glossary/World_Wide_Web)
|
||||
- [Wrapper](https://developer.mozilla.org/en-US/docs/Glossary/Wrapper)
|
||||
- [XFormsDeprecated](https://developer.mozilla.org/en-US/docs/Glossary/XFormsDeprecated)
|
||||
- [XHTML](https://developer.mozilla.org/en-US/docs/Glossary/XHTML)
|
||||
- [XInclude](https://developer.mozilla.org/en-US/docs/Glossary/XInclude)
|
||||
- [XLink](https://developer.mozilla.org/en-US/docs/Glossary/XLink)
|
||||
- [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML)
|
||||
- [XMLHttpRequest (*XHR*)](https://developer.mozilla.org/en-US/docs/Glossary/XMLHttpRequest_(XHR))
|
||||
- [XPath](https://developer.mozilla.org/en-US/docs/Glossary/XPath)
|
||||
- [XQuery](https://developer.mozilla.org/en-US/docs/Glossary/XQuery)
|
||||
- [XSLT](https://developer.mozilla.org/en-US/docs/Glossary/XSLT)
|
||||
- [Zstandard compression](https://developer.mozilla.org/en-US/docs/Glossary/Zstandard_compression)
|
||||
@@ -1,387 +0,0 @@
|
||||
# HTML & Markup Reference
|
||||
|
||||
Comprehensive reference for HTML5, markup languages, and document structure.
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### HTML (HyperText Markup Language)
|
||||
The standard markup language for creating web pages and web applications.
|
||||
|
||||
**Related Terms**: HTML5, XHTML, Markup, Semantic HTML
|
||||
|
||||
### Elements
|
||||
Building blocks of HTML documents. Each element has opening/closing tags (except void elements).
|
||||
|
||||
**Common Elements**:
|
||||
- `<div>` - Generic container
|
||||
- `<span>` - Inline container
|
||||
- `<article>` - Self-contained content
|
||||
- `<section>` - Thematic grouping
|
||||
- `<nav>` - Navigation links
|
||||
- `<header>` - Introductory content
|
||||
- `<footer>` - Footer content
|
||||
- `<main>` - Main content
|
||||
- `<aside>` - Complementary content
|
||||
|
||||
### Attributes
|
||||
Properties that provide additional information about HTML elements.
|
||||
|
||||
**Common Attributes**:
|
||||
- `id` - Unique identifier
|
||||
- `class` - CSS class name(s)
|
||||
- `src` - Source URL for images/scripts
|
||||
- `href` - Hyperlink reference
|
||||
- `alt` - Alternative text
|
||||
- `title` - Advisory title
|
||||
- `data-*` - Custom data attributes
|
||||
- `aria-*` - Accessibility attributes
|
||||
|
||||
### Void Elements
|
||||
Elements that cannot have content and don't have closing tags.
|
||||
|
||||
**Examples**: `<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`, `<link>`
|
||||
|
||||
## Semantic HTML
|
||||
|
||||
### What is Semantic HTML?
|
||||
HTML that clearly describes its meaning to both the browser and the developer.
|
||||
|
||||
**Benefits**:
|
||||
- Improved accessibility
|
||||
- Better SEO
|
||||
- Easier maintenance
|
||||
- Built-in meaning and structure
|
||||
|
||||
### Semantic Elements
|
||||
|
||||
| Element | Purpose | When to Use |
|
||||
|---------|---------|-------------|
|
||||
| `<article>` | Self-contained composition | Blog posts, news articles |
|
||||
| `<section>` | Thematic grouping of content | Chapters, tabbed content |
|
||||
| `<nav>` | Navigation links | Main menu, breadcrumbs |
|
||||
| `<aside>` | Tangential content | Sidebars, related links |
|
||||
| `<header>` | Introductory content | Page/section headers |
|
||||
| `<footer>` | Footer content | Copyright, contact info |
|
||||
| `<main>` | Main content | Primary page content |
|
||||
| `<figure>` | Self-contained content | Images with captions |
|
||||
| `<figcaption>` | Caption for figure | Image descriptions |
|
||||
| `<time>` | Date/time | Publishing dates |
|
||||
| `<mark>` | Highlighted text | Search results |
|
||||
| `<details>` | Expandable details | Accordions, FAQs |
|
||||
| `<summary>` | Summary for details | Accordion headers |
|
||||
|
||||
### Example: Semantic Document Structure
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Semantic Page Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Site Title</h1>
|
||||
<nav aria-label="Main navigation">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<header>
|
||||
<h2>Article Title</h2>
|
||||
<time datetime="2026-03-04">March 4, 2026</time>
|
||||
</header>
|
||||
<p>Article content goes here...</p>
|
||||
<footer>
|
||||
<p>Author: John Doe</p>
|
||||
</footer>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<aside>
|
||||
<h3>Related Content</h3>
|
||||
<ul>
|
||||
<li><a href="/related">Related Article</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Company Name</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Document Structure
|
||||
|
||||
### Doctype
|
||||
Declares the document type and HTML version.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
### Head Section
|
||||
Contains metadata about the document.
|
||||
|
||||
**Common Elements**:
|
||||
- `<meta>` - Metadata (charset, viewport, description)
|
||||
- `<title>` - Page title (shown in browser tab)
|
||||
- `<link>` - External resources (stylesheets, icons)
|
||||
- `<script>` - JavaScript files
|
||||
- `<style>` - Inline CSS
|
||||
|
||||
### Metadata Examples
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!-- Character encoding -->
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- Responsive viewport -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- SEO metadata -->
|
||||
<meta name="description" content="Page description for search engines">
|
||||
<meta name="keywords" content="html, web, development">
|
||||
<meta name="author" content="Author Name">
|
||||
|
||||
<!-- Open Graph (social media) -->
|
||||
<meta property="og:title" content="Page Title">
|
||||
<meta property="og:description" content="Page description">
|
||||
<meta property="og:image" content="https://example.com/image.jpg">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Preload critical resources -->
|
||||
<link rel="preload" href="critical.css" as="style">
|
||||
<link rel="preconnect" href="https://api.example.com">
|
||||
</head>
|
||||
```
|
||||
|
||||
## Forms and Input
|
||||
|
||||
### Form Elements
|
||||
|
||||
```html
|
||||
<form action="/submit" method="POST">
|
||||
<!-- Text input -->
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
|
||||
<!-- Email input -->
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
|
||||
<!-- Password input -->
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" minlength="8" required>
|
||||
|
||||
<!-- Select dropdown -->
|
||||
<label for="country">Country:</label>
|
||||
<select id="country" name="country">
|
||||
<option value="">Select...</option>
|
||||
<option value="us">United States</option>
|
||||
<option value="uk">United Kingdom</option>
|
||||
</select>
|
||||
|
||||
<!-- Textarea -->
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="4"></textarea>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required>
|
||||
I agree to the terms
|
||||
</label>
|
||||
|
||||
<!-- Radio buttons -->
|
||||
<fieldset>
|
||||
<legend>Choose an option:</legend>
|
||||
<label>
|
||||
<input type="radio" name="option" value="a">
|
||||
Option A
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="option" value="b">
|
||||
Option B
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Submit button -->
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Input Types
|
||||
|
||||
| Type | Purpose | Example |
|
||||
|------|---------|---------|
|
||||
| `text` | Single-line text | `<input type="text">` |
|
||||
| `email` | Email address | `<input type="email">` |
|
||||
| `password` | Password field | `<input type="password">` |
|
||||
| `number` | Numeric input | `<input type="number" min="0" max="100">` |
|
||||
| `tel` | Telephone number | `<input type="tel">` |
|
||||
| `url` | URL | `<input type="url">` |
|
||||
| `date` | Date picker | `<input type="date">` |
|
||||
| `time` | Time picker | `<input type="time">` |
|
||||
| `file` | File upload | `<input type="file" accept="image/*">` |
|
||||
| `checkbox` | Checkbox | `<input type="checkbox">` |
|
||||
| `radio` | Radio button | `<input type="radio">` |
|
||||
| `range` | Slider | `<input type="range" min="0" max="100">` |
|
||||
| `color` | Color picker | `<input type="color">` |
|
||||
| `search` | Search field | `<input type="search">` |
|
||||
|
||||
## Related Markup Languages
|
||||
|
||||
### XML (Extensible Markup Language)
|
||||
A markup language for encoding documents in a format that is both human-readable and machine-readable.
|
||||
|
||||
**Key Differences from HTML**:
|
||||
- All tags must be properly closed
|
||||
- Tags are case-sensitive
|
||||
- Attributes must be quoted
|
||||
- Custom tag names allowed
|
||||
|
||||
### XHTML (Extensible HyperText Markup Language)
|
||||
HTML reformulated as XML. Stricter syntax rules than HTML.
|
||||
|
||||
### MathML (Mathematical Markup Language)
|
||||
Markup language for displaying mathematical notation on the web.
|
||||
|
||||
```html
|
||||
<math>
|
||||
<mrow>
|
||||
<msup>
|
||||
<mi>x</mi>
|
||||
<mn>2</mn>
|
||||
</msup>
|
||||
<mo>+</mo>
|
||||
<mn>1</mn>
|
||||
</mrow>
|
||||
</math>
|
||||
```
|
||||
|
||||
### SVG (Scalable Vector Graphics)
|
||||
XML-based markup language for describing two-dimensional vector graphics.
|
||||
|
||||
```html
|
||||
<svg width="100" height="100">
|
||||
<circle cx="50" cy="50" r="40" fill="blue" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Character Encoding and References
|
||||
|
||||
### Character Encoding
|
||||
Defines how characters are represented as bytes.
|
||||
|
||||
**UTF-8**: Universal character encoding standard (recommended)
|
||||
|
||||
```html
|
||||
<meta charset="UTF-8">
|
||||
```
|
||||
|
||||
### Character References
|
||||
Ways to represent special characters in HTML.
|
||||
|
||||
**Named Entities**:
|
||||
- `<` - Less than (<)
|
||||
- `>` - Greater than (>)
|
||||
- `&` - Ampersand (&)
|
||||
- `"` - Quote (")
|
||||
- `'` - Apostrophe (')
|
||||
- ` ` - Non-breaking space
|
||||
- `©` - Copyright (©)
|
||||
|
||||
**Numeric Entities**:
|
||||
- `<` - Less than (<)
|
||||
- `©` - Copyright (©)
|
||||
- `€` - Euro (€)
|
||||
|
||||
## Block vs Inline Content
|
||||
|
||||
### Block-Level Content
|
||||
Elements that create a "block" in the layout, starting on a new line.
|
||||
|
||||
**Examples**: `<div>`, `<p>`, `<h1>`-`<h6>`, `<article>`, `<section>`, `<header>`, `<footer>`, `<nav>`, `<aside>`, `<ul>`, `<ol>`, `<li>`
|
||||
|
||||
### Inline-Level Content
|
||||
Elements that don't start on a new line and only take up as much width as necessary.
|
||||
|
||||
**Examples**: `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, `<code>`, `<abbr>`, `<cite>`
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
- ✅ Use semantic HTML elements
|
||||
- ✅ Include proper document structure (DOCTYPE, html, head, body)
|
||||
- ✅ Set character encoding to UTF-8
|
||||
- ✅ Use descriptive `alt` attributes for images
|
||||
- ✅ Associate labels with form inputs
|
||||
- ✅ Use heading hierarchy properly (h1 → h2 → h3)
|
||||
- ✅ Validate HTML with W3C validator
|
||||
- ✅ Use proper ARIA roles when needed
|
||||
- ✅ Include meta viewport for responsive design
|
||||
|
||||
### Don'ts
|
||||
- ❌ Use `<div>` when a semantic element exists
|
||||
- ❌ Skip heading levels (h1 → h3)
|
||||
- ❌ Use tables for layout
|
||||
- ❌ Forget to close tags (except void elements)
|
||||
- ❌ Use inline styles extensively
|
||||
- ❌ Omit `alt` attribute on images
|
||||
- ❌ Create forms without labels
|
||||
- ❌ Use deprecated elements (`<font>`, `<center>`, `<blink>`)
|
||||
|
||||
## Glossary Terms from MDN
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Abstraction
|
||||
- Accessibility tree
|
||||
- Accessible description
|
||||
- Accessible name
|
||||
- Attribute
|
||||
- Block-level content
|
||||
- Breadcrumb
|
||||
- Browsing context
|
||||
- Character
|
||||
- Character encoding
|
||||
- Character reference
|
||||
- Character set
|
||||
- Doctype
|
||||
- Document environment
|
||||
- Element
|
||||
- Entity
|
||||
- Head
|
||||
- HTML
|
||||
- HTML5
|
||||
- Hyperlink
|
||||
- Hypertext
|
||||
- Inline-level content
|
||||
- Markup
|
||||
- MathML
|
||||
- Metadata
|
||||
- Semantics
|
||||
- SVG
|
||||
- Tag
|
||||
- Void element
|
||||
- XHTML
|
||||
- XML
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [MDN HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
||||
- [W3C HTML Specification](https://html.spec.whatwg.org/)
|
||||
- [HTML5 Doctor](http://html5doctor.com/)
|
||||
- [W3C Markup Validation Service](https://validator.w3.org/)
|
||||
@@ -1,538 +0,0 @@
|
||||
# HTTP & Networking Reference
|
||||
|
||||
Comprehensive reference for HTTP protocol, networking concepts, and web communication.
|
||||
|
||||
## HTTP (HyperText Transfer Protocol)
|
||||
|
||||
Protocol for transferring hypertext between client and server. Foundation of data communication on the web.
|
||||
|
||||
### HTTP Versions
|
||||
|
||||
- **HTTP/1.1** (1997): Text-based, persistent connections, pipelining
|
||||
- **HTTP/2** (2015): Binary protocol, multiplexing, server push, header compression
|
||||
- **HTTP/3** (2022): Based on QUIC (UDP), improved performance, better handling of packet loss
|
||||
|
||||
## Request Methods
|
||||
|
||||
| Method | Purpose | Idempotent | Safe | Cacheable |
|
||||
|--------|---------|------------|------|-----------|
|
||||
| GET | Retrieve resource | Yes | Yes | Yes |
|
||||
| POST | Create resource | No | No | Rarely |
|
||||
| PUT | Update/replace resource | Yes | No | No |
|
||||
| PATCH | Partial update | No | No | No |
|
||||
| DELETE | Delete resource | Yes | No | No |
|
||||
| HEAD | Like GET but no body | Yes | Yes | Yes |
|
||||
| OPTIONS | Get allowed methods | Yes | Yes | No |
|
||||
| CONNECT | Establish tunnel | No | No | No |
|
||||
| TRACE | Echo request | Yes | Yes | No |
|
||||
|
||||
**Safe**: Doesn't modify server state
|
||||
**Idempotent**: Multiple identical requests have same effect as single request
|
||||
|
||||
## Status Codes
|
||||
|
||||
### 1xx Informational
|
||||
|
||||
| Code | Message | Meaning |
|
||||
|------|---------|---------|
|
||||
| 100 | Continue | Client should continue request |
|
||||
| 101 | Switching Protocols | Server switching protocols |
|
||||
|
||||
### 2xx Success
|
||||
|
||||
| Code | Message | Meaning |
|
||||
|------|---------|---------|
|
||||
| 200 | OK | Request succeeded |
|
||||
| 201 | Created | Resource created |
|
||||
| 202 | Accepted | Accepted but not processed |
|
||||
| 204 | No Content | Success but no content to return |
|
||||
| 206 | Partial Content | Partial resource (range request) |
|
||||
|
||||
### 3xx Redirection
|
||||
|
||||
| Code | Message | Meaning |
|
||||
|------|---------|---------|
|
||||
| 301 | Moved Permanently | Resource permanently moved |
|
||||
| 302 | Found | Temporary redirect |
|
||||
| 303 | See Other | Response at different URI |
|
||||
| 304 | Not Modified | Resource not modified (cache) |
|
||||
| 307 | Temporary Redirect | Like 302 but keep method |
|
||||
| 308 | Permanent Redirect | Like 301 but keep method |
|
||||
|
||||
### 4xx Client Errors
|
||||
|
||||
| Code | Message | Meaning |
|
||||
|------|---------|---------|
|
||||
| 400 | Bad Request | Invalid syntax |
|
||||
| 401 | Unauthorized | Authentication required |
|
||||
| 403 | Forbidden | Access denied |
|
||||
| 404 | Not Found | Resource not found |
|
||||
| 405 | Method Not Allowed | Method not supported |
|
||||
| 408 | Request Timeout | Request took too long |
|
||||
| 409 | Conflict | Request conflicts with state |
|
||||
| 410 | Gone | Resource permanently gone |
|
||||
| 413 | Payload Too Large | Request body too large |
|
||||
| 414 | URI Too Long | URI too long |
|
||||
| 415 | Unsupported Media Type | Media type not supported |
|
||||
| 422 | Unprocessable Entity | Semantic errors |
|
||||
| 429 | Too Many Requests | Rate limit exceeded |
|
||||
|
||||
### 5xx Server Errors
|
||||
|
||||
| Code | Message | Meaning |
|
||||
|------|---------|---------|
|
||||
| 500 | Internal Server Error | Generic server error |
|
||||
| 501 | Not Implemented | Method not supported |
|
||||
| 502 | Bad Gateway | Invalid response from upstream |
|
||||
| 503 | Service Unavailable | Server temporarily unavailable |
|
||||
| 504 | Gateway Timeout | Upstream timeout |
|
||||
| 505 | HTTP Version Not Supported | HTTP version not supported |
|
||||
|
||||
## HTTP Headers
|
||||
|
||||
### Request Headers
|
||||
|
||||
```http
|
||||
GET /api/users HTTP/1.1
|
||||
Host: example.com
|
||||
User-Agent: Mozilla/5.0
|
||||
Accept: application/json, text/plain
|
||||
Accept-Language: en-US,en;q=0.9
|
||||
Accept-Encoding: gzip, deflate, br
|
||||
Authorization: Bearer token123
|
||||
Cookie: sessionId=abc123
|
||||
If-None-Match: "etag-value"
|
||||
If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
|
||||
Origin: https://example.com
|
||||
Referer: https://example.com/page
|
||||
```
|
||||
|
||||
**Common Request Headers**:
|
||||
- `Accept`: Media types client accepts
|
||||
- `Accept-Encoding`: Encoding formats (compression)
|
||||
- `Accept-Language`: Preferred languages
|
||||
- `Authorization`: Authentication credentials
|
||||
- `Cache-Control`: Caching directives
|
||||
- `Cookie`: Cookies sent to server
|
||||
- `Content-Type`: Type of request body
|
||||
- `Host`: Target host and port
|
||||
- `If-Modified-Since`: Conditional request
|
||||
- `If-None-Match`: Conditional request (ETag)
|
||||
- `Origin`: Origin of request (CORS)
|
||||
- `Referer`: Previous page URL
|
||||
- `User-Agent`: Client information
|
||||
|
||||
### Response Headers
|
||||
|
||||
```http
|
||||
HTTP/1.1 200 OK
|
||||
Date: Mon, 04 Mar 2026 12:00:00 GMT
|
||||
Server: nginx/1.18.0
|
||||
Content-Type: application/json; charset=utf-8
|
||||
Content-Length: 348
|
||||
Content-Encoding: gzip
|
||||
Cache-Control: public, max-age=3600
|
||||
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
|
||||
Last-Modified: Mon, 04 Mar 2026 11:00:00 GMT
|
||||
Access-Control-Allow-Origin: *
|
||||
Set-Cookie: sessionId=xyz789; HttpOnly; Secure; SameSite=Strict
|
||||
Strict-Transport-Security: max-age=31536000; includeSubDomains
|
||||
X-Content-Type-Options: nosniff
|
||||
X-Frame-Options: DENY
|
||||
```
|
||||
|
||||
**Common Response Headers**:
|
||||
- `Access-Control-*`: CORS headers
|
||||
- `Cache-Control`: Caching directives
|
||||
- `Content-Encoding`: Content compression
|
||||
- `Content-Length`: Body size in bytes
|
||||
- `Content-Type`: Media type of body
|
||||
- `Date`: Response date/time
|
||||
- `ETag`: Resource version identifier
|
||||
- `Expires`: Expiration date
|
||||
- `Last-Modified`: Last modification date
|
||||
- `Location`: Redirect URL
|
||||
- `Server`: Server software
|
||||
- `Set-Cookie`: Set cookies
|
||||
- `Strict-Transport-Security`: HSTS
|
||||
- `X-Content-Type-Options`: MIME type sniffing
|
||||
- `X-Frame-Options`: Clickjacking protection
|
||||
|
||||
## CORS (Cross-Origin Resource Sharing)
|
||||
|
||||
Mechanism to allow cross-origin requests.
|
||||
|
||||
### Simple Requests
|
||||
|
||||
Automatically allowed if:
|
||||
- Method: GET, HEAD, or POST
|
||||
- Safe headers only
|
||||
- Content-Type: `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`
|
||||
|
||||
### Preflight Requests
|
||||
|
||||
For complex requests, browser sends OPTIONS request first:
|
||||
|
||||
```http
|
||||
OPTIONS /api/users HTTP/1.1
|
||||
Origin: https://example.com
|
||||
Access-Control-Request-Method: POST
|
||||
Access-Control-Request-Headers: Content-Type
|
||||
```
|
||||
|
||||
```http
|
||||
HTTP/1.1 204 No Content
|
||||
Access-Control-Allow-Origin: https://example.com
|
||||
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
|
||||
Access-Control-Allow-Headers: Content-Type, Authorization
|
||||
Access-Control-Allow-Credentials: true
|
||||
Access-Control-Max-Age: 86400
|
||||
```
|
||||
|
||||
### CORS Headers
|
||||
|
||||
**Request**:
|
||||
- `Origin`: Request origin
|
||||
- `Access-Control-Request-Method`: Intended method
|
||||
- `Access-Control-Request-Headers`: Intended headers
|
||||
|
||||
**Response**:
|
||||
- `Access-Control-Allow-Origin`: Allowed origins (* or specific)
|
||||
- `Access-Control-Allow-Methods`: Allowed methods
|
||||
- `Access-Control-Allow-Headers`: Allowed headers
|
||||
- `Access-Control-Allow-Credentials`: Allow credentials
|
||||
- `Access-Control-Max-Age`: Preflight cache duration
|
||||
- `Access-Control-Expose-Headers`: Headers accessible to client
|
||||
|
||||
## Caching
|
||||
|
||||
### Cache-Control Directives
|
||||
|
||||
**Request Directives**:
|
||||
- `no-cache`: Validate with server before using cache
|
||||
- `no-store`: Don't cache at all
|
||||
- `max-age=N`: Max age in seconds
|
||||
- `max-stale=N`: Accept stale response up to N seconds
|
||||
- `min-fresh=N`: Fresh for at least N seconds
|
||||
- `only-if-cached`: Use only cached response
|
||||
|
||||
**Response Directives**:
|
||||
- `public`: Cacheable by any cache
|
||||
- `private`: Cacheable by browser only
|
||||
- `no-cache`: Must validate before use
|
||||
- `no-store`: Don't cache
|
||||
- `max-age=N`: Fresh for N seconds
|
||||
- `s-maxage=N`: Max age for shared caches
|
||||
- `must-revalidate`: Must validate when stale
|
||||
- `immutable`: Content won't change
|
||||
|
||||
### Examples
|
||||
|
||||
```http
|
||||
# Cache for 1 hour
|
||||
Cache-Control: public, max-age=3600
|
||||
|
||||
# Don't cache
|
||||
Cache-Control: no-store
|
||||
|
||||
# Cache in browser only, revalidate after 1 hour
|
||||
Cache-Control: private, max-age=3600, must-revalidate
|
||||
|
||||
# Cache forever (with versioned URLs)
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
```
|
||||
|
||||
### Conditional Requests
|
||||
|
||||
Use ETags or Last-Modified for efficient caching:
|
||||
|
||||
```http
|
||||
GET /resource HTTP/1.1
|
||||
If-None-Match: "etag-value"
|
||||
If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
|
||||
```
|
||||
|
||||
If not modified:
|
||||
```http
|
||||
HTTP/1.1 304 Not Modified
|
||||
ETag: "etag-value"
|
||||
```
|
||||
|
||||
## Cookies
|
||||
|
||||
```http
|
||||
# Server sets cookie
|
||||
Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600
|
||||
|
||||
# Client sends cookie
|
||||
Cookie: sessionId=abc123; userId=456
|
||||
```
|
||||
|
||||
### Cookie Attributes
|
||||
|
||||
- `Path=/`: Cookie path scope
|
||||
- `Domain=example.com`: Cookie domain scope
|
||||
- `Max-Age=N`: Expire after N seconds
|
||||
- `Expires=date`: Expire at specific date
|
||||
- `Secure`: Only sent over HTTPS
|
||||
- `HttpOnly`: Not accessible via JavaScript
|
||||
- `SameSite=Strict|Lax|None`: CSRF protection
|
||||
|
||||
## REST (Representational State Transfer)
|
||||
|
||||
Architectural style for web services.
|
||||
|
||||
### REST Principles
|
||||
|
||||
1. **Client-Server**: Separation of concerns
|
||||
2. **Stateless**: Each request contains all needed info
|
||||
3. **Cacheable**: Responses must define cacheability
|
||||
4. **Uniform Interface**: Standardized communication
|
||||
5. **Layered System**: Client doesn't know if connected to end server
|
||||
6. **Code on Demand** (optional): Server can send executable code
|
||||
|
||||
### RESTful API Design
|
||||
|
||||
```
|
||||
GET /users # List users
|
||||
GET /users/123 # Get user 123
|
||||
POST /users # Create user
|
||||
PUT /users/123 # Update user 123 (full)
|
||||
PATCH /users/123 # Update user 123 (partial)
|
||||
DELETE /users/123 # Delete user 123
|
||||
|
||||
GET /users/123/posts # List posts by user 123
|
||||
GET /posts?author=123 # Alternative: filter posts
|
||||
```
|
||||
|
||||
### HTTP Content Negotiation
|
||||
|
||||
```http
|
||||
# Client requests JSON
|
||||
Accept: application/json
|
||||
|
||||
# Server responds with JSON
|
||||
Content-Type: application/json
|
||||
|
||||
# Client can accept multiple formats
|
||||
Accept: application/json, application/xml;q=0.9, text/plain;q=0.8
|
||||
```
|
||||
|
||||
## Networking Fundamentals
|
||||
|
||||
### TCP (Transmission Control Protocol)
|
||||
|
||||
Connection-oriented protocol ensuring reliable data delivery.
|
||||
|
||||
**TCP Handshake** (3-way):
|
||||
1. Client → Server: SYN
|
||||
2. Server → Client: SYN-ACK
|
||||
3. Client → Server: ACK
|
||||
|
||||
**Features**:
|
||||
- Reliable delivery (retransmission)
|
||||
- Ordered data
|
||||
- Error checking
|
||||
- Flow control
|
||||
- Connection-oriented
|
||||
|
||||
### UDP (User Datagram Protocol)
|
||||
|
||||
Connectionless protocol for fast data transmission.
|
||||
|
||||
**Features**:
|
||||
- Fast (no handshake)
|
||||
- No guaranteed delivery
|
||||
- No ordering
|
||||
- Lower overhead
|
||||
- Used for streaming, gaming, DNS
|
||||
|
||||
### DNS (Domain Name System)
|
||||
|
||||
Translates domain names to IP addresses.
|
||||
|
||||
```
|
||||
example.com → 93.184.216.34
|
||||
```
|
||||
|
||||
**DNS Record Types**:
|
||||
- `A`: IPv4 address
|
||||
- `AAAA`: IPv6 address
|
||||
- `CNAME`: Canonical name (alias)
|
||||
- `MX`: Mail exchange
|
||||
- `TXT`: Text record
|
||||
- `NS`: Name server
|
||||
|
||||
### IP Addressing
|
||||
|
||||
**IPv4**: `192.168.1.1` (32-bit)
|
||||
**IPv6**: `2001:0db8:85a3:0000:0000:8a2e:0370:7334` (128-bit)
|
||||
|
||||
### Ports
|
||||
|
||||
- **Well-known ports** (0-1023):
|
||||
- 80: HTTP
|
||||
- 443: HTTPS
|
||||
- 21: FTP
|
||||
- 22: SSH
|
||||
- 25: SMTP
|
||||
- 53: DNS
|
||||
- **Registered ports** (1024-49151)
|
||||
- **Dynamic ports** (49152-65535)
|
||||
|
||||
### Bandwidth & Latency
|
||||
|
||||
**Bandwidth**: Amount of data transferred per unit time (Mbps, Gbps)
|
||||
**Latency**: Time delay in data transmission (milliseconds)
|
||||
|
||||
**Round Trip Time (RTT)**: Time for request to reach server and response to return
|
||||
|
||||
## WebSockets
|
||||
|
||||
Full-duplex communication over single TCP connection.
|
||||
|
||||
```javascript
|
||||
// Client
|
||||
const ws = new WebSocket('wss://example.com/socket');
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log('Connected');
|
||||
ws.send('Hello server!');
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
console.log('Received:', event.data);
|
||||
};
|
||||
|
||||
ws.onerror = (error) => {
|
||||
console.error('Error:', error);
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log('Disconnected');
|
||||
};
|
||||
|
||||
// Close connection
|
||||
ws.close();
|
||||
```
|
||||
|
||||
**Use Cases**: Chat, real-time updates, gaming, collaborative editing
|
||||
|
||||
## Server-Sent Events (SSE)
|
||||
|
||||
Server pushes updates to client over HTTP.
|
||||
|
||||
```javascript
|
||||
// Client
|
||||
const eventSource = new EventSource('/events');
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
console.log('New message:', event.data);
|
||||
};
|
||||
|
||||
eventSource.addEventListener('custom-event', (event) => {
|
||||
console.log('Custom event:', event.data);
|
||||
});
|
||||
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('Error:', error);
|
||||
};
|
||||
|
||||
// Close connection
|
||||
eventSource.close();
|
||||
```
|
||||
|
||||
```http
|
||||
// Server response
|
||||
Content-Type: text/event-stream
|
||||
Cache-Control: no-cache
|
||||
Connection: keep-alive
|
||||
|
||||
data: First message
|
||||
|
||||
data: Second message
|
||||
|
||||
event: custom-event
|
||||
data: Custom message data
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
- ✅ Use HTTPS everywhere
|
||||
- ✅ Implement proper caching strategies
|
||||
- ✅ Use appropriate HTTP methods
|
||||
- ✅ Return meaningful status codes
|
||||
- ✅ Implement rate limiting
|
||||
- ✅ Use compression (gzip, brotli)
|
||||
- ✅ Set proper CORS headers
|
||||
- ✅ Implement proper error handling
|
||||
- ✅ Use connection pooling
|
||||
- ✅ Monitor network performance
|
||||
|
||||
### Don'ts
|
||||
- ❌ Use HTTP for sensitive data
|
||||
- ❌ Ignore CORS security
|
||||
- ❌ Return wrong status codes (200 for errors)
|
||||
- ❌ Cache sensitive data
|
||||
- ❌ Send large uncompressed responses
|
||||
- ❌ Skip SSL/TLS certificate validation
|
||||
- ❌ Store credentials in URLs
|
||||
- ❌ Expose internal server details in errors
|
||||
- ❌ Use synchronous requests
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Ajax
|
||||
- ALPN
|
||||
- Bandwidth
|
||||
- Cacheable
|
||||
- Cookie
|
||||
- CORS
|
||||
- CORS-safelisted request header
|
||||
- CORS-safelisted response header
|
||||
- Crawler
|
||||
- Effective connection type
|
||||
- Fetch directive
|
||||
- Fetch metadata request header
|
||||
- Forbidden request header
|
||||
- Forbidden response header name
|
||||
- FTP
|
||||
- General header
|
||||
- HOL blocking
|
||||
- HTTP
|
||||
- HTTP content
|
||||
- HTTP header
|
||||
- HTTP/2
|
||||
- HTTP/3
|
||||
- HTTPS
|
||||
- HTTPS RR
|
||||
- Idempotent
|
||||
- IMAP
|
||||
- Latency
|
||||
- Packet
|
||||
- POP3
|
||||
- Proxy server
|
||||
- QUIC
|
||||
- Rate limit
|
||||
- Request header
|
||||
- Response header
|
||||
- REST
|
||||
- Round Trip Time (RTT)
|
||||
- RTCP
|
||||
- RTP
|
||||
- Safe (HTTP Methods)
|
||||
- SMTP
|
||||
- TCP
|
||||
- TCP handshake
|
||||
- TCP slow start
|
||||
- UDP
|
||||
- WebSockets
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [MDN HTTP Guide](https://developer.mozilla.org/en-US/docs/Web/HTTP)
|
||||
- [HTTP/2 Spec](https://http2.github.io/)
|
||||
- [HTTP/3 Explained](https://http3-explained.haxx.se/)
|
||||
- [REST API Tutorial](https://restfulapi.net/)
|
||||
@@ -1,807 +0,0 @@
|
||||
# JavaScript & Programming Reference
|
||||
|
||||
Comprehensive reference for JavaScript, ECMAScript, programming concepts, and modern JS patterns.
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### JavaScript
|
||||
High-level, interpreted programming language that conforms to the ECMAScript specification. Primary language for web development alongside HTML and CSS.
|
||||
|
||||
**Key Characteristics**:
|
||||
- Dynamically typed
|
||||
- Prototype-based inheritance
|
||||
- First-class functions
|
||||
- Event-driven
|
||||
- Asynchronous execution
|
||||
|
||||
### ECMAScript
|
||||
The standardized specification that JavaScript implements.
|
||||
|
||||
**Major Versions**:
|
||||
- **ES5** (2009): Strict mode, JSON support
|
||||
- **ES6/ES2015**: Classes, arrow functions, promises, modules
|
||||
- **ES2016+**: Async/await, optional chaining, nullish coalescing
|
||||
|
||||
## Data Types
|
||||
|
||||
### Primitive Types
|
||||
|
||||
```javascript
|
||||
// String
|
||||
let name = "John";
|
||||
let greeting = 'Hello';
|
||||
let template = `Hello, ${name}!`; // Template literal
|
||||
|
||||
// Number
|
||||
let integer = 42;
|
||||
let float = 3.14;
|
||||
let negative = -10;
|
||||
let scientific = 1e6; // 1000000
|
||||
|
||||
// BigInt (for very large integers)
|
||||
let big = 9007199254740991n;
|
||||
|
||||
// Boolean
|
||||
let isTrue = true;
|
||||
let isFalse = false;
|
||||
|
||||
// Undefined (declared but not assigned)
|
||||
let undefined_var;
|
||||
console.log(undefined_var); // undefined
|
||||
|
||||
// Null (intentional absence of value)
|
||||
let empty = null;
|
||||
|
||||
// Symbol (unique identifier)
|
||||
let sym = Symbol('description');
|
||||
```
|
||||
|
||||
### Type Checking
|
||||
|
||||
```javascript
|
||||
typeof "hello"; // "string"
|
||||
typeof 42; // "number"
|
||||
typeof true; // "boolean"
|
||||
typeof undefined; // "undefined"
|
||||
typeof null; // "object" (historical bug)
|
||||
typeof Symbol(); // "symbol"
|
||||
typeof {}; // "object"
|
||||
typeof []; // "object"
|
||||
typeof function() {}; // "function"
|
||||
|
||||
// Better array check
|
||||
Array.isArray([]); // true
|
||||
|
||||
// Null check
|
||||
value === null; // true if null
|
||||
```
|
||||
|
||||
### Type Coercion and Conversion
|
||||
|
||||
```javascript
|
||||
// Implicit coercion
|
||||
"5" + 2; // "52" (string concatenation)
|
||||
"5" - 2; // 3 (numeric subtraction)
|
||||
"5" * "2"; // 10 (numeric multiplication)
|
||||
!!"value"; // true (boolean conversion)
|
||||
|
||||
// Explicit conversion
|
||||
String(123); // "123"
|
||||
Number("123"); // 123
|
||||
Number("abc"); // NaN
|
||||
Boolean(0); // false
|
||||
Boolean(1); // true
|
||||
parseInt("123px"); // 123
|
||||
parseFloat("3.14"); // 3.14
|
||||
```
|
||||
|
||||
### Truthy and Falsy Values
|
||||
|
||||
**Falsy values** (evaluate to false):
|
||||
- `false`
|
||||
- `0`, `-0`
|
||||
- `""` (empty string)
|
||||
- `null`
|
||||
- `undefined`
|
||||
- `NaN`
|
||||
|
||||
**Everything else is truthy**, including:
|
||||
- `"0"` (string)
|
||||
- `"false"` (string)
|
||||
- `[]` (empty array)
|
||||
- `{}` (empty object)
|
||||
- `function() {}` (empty function)
|
||||
|
||||
## Variables and Constants
|
||||
|
||||
```javascript
|
||||
// var (function-scoped, hoisted - avoid in modern code)
|
||||
var oldStyle = "avoid this";
|
||||
|
||||
// let (block-scoped, can be reassigned)
|
||||
let count = 0;
|
||||
count = 1; // ✓ works
|
||||
|
||||
// const (block-scoped, cannot be reassigned)
|
||||
const MAX = 100;
|
||||
MAX = 200; // ✗ TypeError
|
||||
|
||||
// const with objects/arrays (content can change)
|
||||
const person = { name: "John" };
|
||||
person.name = "Jane"; // ✓ works (mutating object)
|
||||
person = {}; // ✗ TypeError (reassigning variable)
|
||||
```
|
||||
|
||||
## Functions
|
||||
|
||||
### Function Declaration
|
||||
|
||||
```javascript
|
||||
function greet(name) {
|
||||
return `Hello, ${name}!`;
|
||||
}
|
||||
```
|
||||
|
||||
### Function Expression
|
||||
|
||||
```javascript
|
||||
const greet = function(name) {
|
||||
return `Hello, ${name}!`;
|
||||
};
|
||||
```
|
||||
|
||||
### Arrow Functions
|
||||
|
||||
```javascript
|
||||
// Basic syntax
|
||||
const add = (a, b) => a + b;
|
||||
|
||||
// With block body
|
||||
const multiply = (a, b) => {
|
||||
const result = a * b;
|
||||
return result;
|
||||
};
|
||||
|
||||
// Single parameter (parentheses optional)
|
||||
const square = x => x * x;
|
||||
|
||||
// No parameters
|
||||
const getRandom = () => Math.random();
|
||||
|
||||
// Implicit return of object (wrap in parentheses)
|
||||
const makePerson = (name, age) => ({ name, age });
|
||||
```
|
||||
|
||||
### First-Class Functions
|
||||
|
||||
Functions are values that can be:
|
||||
- Assigned to variables
|
||||
- Passed as arguments
|
||||
- Returned from other functions
|
||||
|
||||
```javascript
|
||||
// Assign to variable
|
||||
const fn = function() { return 42; };
|
||||
|
||||
// Pass as argument
|
||||
function execute(callback) {
|
||||
return callback();
|
||||
}
|
||||
execute(() => console.log("Hello"));
|
||||
|
||||
// Return from function
|
||||
function createMultiplier(factor) {
|
||||
return function(x) {
|
||||
return x * factor;
|
||||
};
|
||||
}
|
||||
const double = createMultiplier(2);
|
||||
double(5); // 10
|
||||
```
|
||||
|
||||
### Closures
|
||||
|
||||
Functions that remember their lexical scope:
|
||||
|
||||
```javascript
|
||||
function createCounter() {
|
||||
let count = 0; // Private variable
|
||||
|
||||
return {
|
||||
increment() {
|
||||
count++;
|
||||
return count;
|
||||
},
|
||||
decrement() {
|
||||
count--;
|
||||
return count;
|
||||
},
|
||||
getCount() {
|
||||
return count;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const counter = createCounter();
|
||||
counter.increment(); // 1
|
||||
counter.increment(); // 2
|
||||
counter.decrement(); // 1
|
||||
counter.getCount(); // 1
|
||||
```
|
||||
|
||||
### Callback Functions
|
||||
|
||||
Function passed as an argument to be executed later:
|
||||
|
||||
```javascript
|
||||
// Array methods use callbacks
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
|
||||
numbers.forEach(num => console.log(num));
|
||||
|
||||
const doubled = numbers.map(num => num * 2);
|
||||
|
||||
const evens = numbers.filter(num => num % 2 === 0);
|
||||
|
||||
const sum = numbers.reduce((acc, num) => acc + num, 0);
|
||||
```
|
||||
|
||||
### IIFE (Immediately Invoked Function Expression)
|
||||
|
||||
```javascript
|
||||
(function() {
|
||||
// Code here runs immediately
|
||||
console.log("IIFE executed");
|
||||
})();
|
||||
|
||||
// With parameters
|
||||
(function(name) {
|
||||
console.log(`Hello, ${name}`);
|
||||
})("World");
|
||||
|
||||
// Arrow function IIFE
|
||||
(() => {
|
||||
console.log("Arrow IIFE");
|
||||
})();
|
||||
```
|
||||
|
||||
## Objects
|
||||
|
||||
### Object Creation
|
||||
|
||||
```javascript
|
||||
// Object literal
|
||||
const person = {
|
||||
name: "John",
|
||||
age: 30,
|
||||
greet() {
|
||||
return `Hello, I'm ${this.name}`;
|
||||
}
|
||||
};
|
||||
|
||||
// Constructor function
|
||||
function Person(name, age) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
}
|
||||
|
||||
const john = new Person("John", 30);
|
||||
|
||||
// Object.create
|
||||
const proto = { greet() { return "Hello"; } };
|
||||
const obj = Object.create(proto);
|
||||
```
|
||||
|
||||
### Accessing Properties
|
||||
|
||||
```javascript
|
||||
const obj = { name: "John", age: 30 };
|
||||
|
||||
// Dot notation
|
||||
obj.name; // "John"
|
||||
|
||||
// Bracket notation
|
||||
obj["age"]; // 30
|
||||
const key = "name";
|
||||
obj[key]; // "John"
|
||||
|
||||
// Optional chaining (ES2020)
|
||||
obj.address?.city; // undefined (no error if address doesn't exist)
|
||||
obj.getName?.(); // undefined (no error if getName doesn't exist)
|
||||
```
|
||||
|
||||
### Object Methods
|
||||
|
||||
```javascript
|
||||
const person = { name: "John", age: 30, city: "NYC" };
|
||||
|
||||
// Get keys
|
||||
Object.keys(person); // ["name", "age", "city"]
|
||||
|
||||
// Get values
|
||||
Object.values(person); // ["John", 30, "NYC"]
|
||||
|
||||
// Get entries
|
||||
Object.entries(person); // [["name", "John"], ["age", 30], ["city", "NYC"]]
|
||||
|
||||
// Assign (merge objects)
|
||||
const extended = Object.assign({}, person, { country: "USA" });
|
||||
|
||||
// Spread operator (modern alternative)
|
||||
const merged = { ...person, country: "USA" };
|
||||
|
||||
// Freeze (make immutable)
|
||||
Object.freeze(person);
|
||||
person.age = 31; // Silently fails (throws in strict mode)
|
||||
|
||||
// Seal (prevent adding/removing properties)
|
||||
Object.seal(person);
|
||||
```
|
||||
|
||||
### Destructuring
|
||||
|
||||
```javascript
|
||||
// Object destructuring
|
||||
const person = { name: "John", age: 30, city: "NYC" };
|
||||
const { name, age } = person;
|
||||
|
||||
// With different variable names
|
||||
const { name: personName, age: personAge } = person;
|
||||
|
||||
// With defaults
|
||||
const { name, country = "USA" } = person;
|
||||
|
||||
// Nested destructuring
|
||||
const user = { profile: { email: "john@example.com" } };
|
||||
const { profile: { email } } = user;
|
||||
|
||||
// Array destructuring
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
const [first, second, ...rest] = numbers;
|
||||
// first = 1, second = 2, rest = [3, 4, 5]
|
||||
|
||||
// Skip elements
|
||||
const [a, , c] = numbers;
|
||||
// a = 1, c = 3
|
||||
```
|
||||
|
||||
## Arrays
|
||||
|
||||
```javascript
|
||||
// Create arrays
|
||||
const arr = [1, 2, 3];
|
||||
const empty = [];
|
||||
const mixed = [1, "two", { three: 3 }, [4]];
|
||||
|
||||
// Access elements
|
||||
arr[0]; // 1
|
||||
arr[arr.length - 1]; // Last element
|
||||
arr.at(-1); // 3 (ES2022 - negative indexing)
|
||||
|
||||
// Modify arrays
|
||||
arr.push(4); // Add to end
|
||||
arr.pop(); // Remove from end
|
||||
arr.unshift(0); // Add to beginning
|
||||
arr.shift(); // Remove from beginning
|
||||
arr.splice(1, 2, 'a', 'b'); // Remove 2 elements at index 1, insert 'a', 'b'
|
||||
|
||||
// Iteration
|
||||
arr.forEach(item => console.log(item));
|
||||
for (let item of arr) { console.log(item); }
|
||||
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
|
||||
|
||||
// Transformation
|
||||
const doubled = arr.map(x => x * 2);
|
||||
const evens = arr.filter(x => x % 2 === 0);
|
||||
const sum = arr.reduce((acc, x) => acc + x, 0);
|
||||
|
||||
// Search
|
||||
arr.includes(2); // true
|
||||
arr.indexOf(2); // Index or -1
|
||||
arr.find(x => x > 2); // First matching element
|
||||
arr.findIndex(x => x > 2); // Index of first match
|
||||
|
||||
// Test
|
||||
arr.some(x => x > 5); // true if any match
|
||||
arr.every(x => x > 0); // true if all match
|
||||
|
||||
// Sort and reverse
|
||||
arr.sort((a, b) => a - b); // Ascending
|
||||
arr.reverse(); // Reverse in place
|
||||
|
||||
// Combine
|
||||
const combined = arr.concat([4, 5]);
|
||||
const spread = [...arr, 4, 5];
|
||||
|
||||
// Slice (copy portion)
|
||||
const portion = arr.slice(1, 3); // Index 1 to 3 (exclusive)
|
||||
|
||||
// Flat (flatten nested arrays)
|
||||
[[1, 2], [3, 4]].flat(); // [1, 2, 3, 4]
|
||||
```
|
||||
|
||||
## Control Flow
|
||||
|
||||
### Conditionals
|
||||
|
||||
```javascript
|
||||
// if/else
|
||||
if (condition) {
|
||||
// code
|
||||
} else if (otherCondition) {
|
||||
// code
|
||||
} else {
|
||||
// code
|
||||
}
|
||||
|
||||
// Ternary operator
|
||||
const result = condition ? valueIfTrue : valueIfFalse;
|
||||
|
||||
// Switch statement
|
||||
switch (value) {
|
||||
case 1:
|
||||
// code
|
||||
break;
|
||||
case 2:
|
||||
case 3:
|
||||
// code for 2 or 3
|
||||
break;
|
||||
default:
|
||||
// default code
|
||||
}
|
||||
|
||||
// Nullish coalescing (ES2020)
|
||||
const value = null ?? "default"; // "default"
|
||||
const value = 0 ?? "default"; // 0 (0 is not nullish)
|
||||
|
||||
// Logical OR for defaults (pre-ES2020)
|
||||
const value = falsy || "default";
|
||||
|
||||
// Optional chaining
|
||||
const city = user?.address?.city;
|
||||
```
|
||||
|
||||
### Loops
|
||||
|
||||
```javascript
|
||||
// for loop
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
// while loop
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
|
||||
// do-while loop
|
||||
do {
|
||||
console.log(i);
|
||||
i++;
|
||||
} while (i < 10);
|
||||
|
||||
// for...of (iterate values)
|
||||
for (const item of array) {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
// for...in (iterate keys - avoid for arrays)
|
||||
for (const key in object) {
|
||||
console.log(key, object[key]);
|
||||
}
|
||||
|
||||
// break and continue
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (i === 5) break; // Exit loop
|
||||
if (i === 3) continue; // Skip iteration
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
## Asynchronous JavaScript
|
||||
|
||||
### Callbacks
|
||||
|
||||
```javascript
|
||||
function fetchData(callback) {
|
||||
setTimeout(() => {
|
||||
callback("Data received");
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
fetchData(data => console.log(data));
|
||||
```
|
||||
|
||||
### Promises
|
||||
|
||||
```javascript
|
||||
// Create promise
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const success = true;
|
||||
if (success) {
|
||||
resolve("Success!");
|
||||
} else {
|
||||
reject("Error!");
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// Use promise
|
||||
promise
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.error(error))
|
||||
.finally(() => console.log("Done"));
|
||||
|
||||
// Promise utilities
|
||||
Promise.all([promise1, promise2]); // Wait for all
|
||||
Promise.race([promise1, promise2]); // First to complete
|
||||
Promise.allSettled([promise1, promise2]); // Wait for all (ES2020)
|
||||
Promise.any([promise1, promise2]); // First to succeed (ES2021)
|
||||
```
|
||||
|
||||
### Async/Await
|
||||
|
||||
```javascript
|
||||
// Async function
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch('https://api.example.com/data');
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Use async function
|
||||
fetchData().then(data => console.log(data));
|
||||
|
||||
// Top-level await (ES2022, in modules)
|
||||
const data = await fetchData();
|
||||
```
|
||||
|
||||
## Classes
|
||||
|
||||
```javascript
|
||||
class Person {
|
||||
// Constructor
|
||||
constructor(name, age) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
}
|
||||
|
||||
// Instance method
|
||||
greet() {
|
||||
return `Hello, I'm ${this.name}`;
|
||||
}
|
||||
|
||||
// Getter
|
||||
get info() {
|
||||
return `${this.name}, ${this.age}`;
|
||||
}
|
||||
|
||||
// Setter
|
||||
set birthYear(year) {
|
||||
this.age = new Date().getFullYear() - year;
|
||||
}
|
||||
|
||||
// Static method
|
||||
static species() {
|
||||
return "Homo sapiens";
|
||||
}
|
||||
}
|
||||
|
||||
// Inheritance
|
||||
class Employee extends Person {
|
||||
constructor(name, age, jobTitle) {
|
||||
super(name, age); // Call parent constructor
|
||||
this.jobTitle = jobTitle;
|
||||
}
|
||||
|
||||
// Override method
|
||||
greet() {
|
||||
return `${super.greet()}, I'm a ${this.jobTitle}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage
|
||||
const john = new Person("John", 30);
|
||||
john.greet(); // "Hello, I'm John"
|
||||
Person.species(); // "Homo sapiens"
|
||||
|
||||
const jane = new Employee("Jane", 25, "Developer");
|
||||
jane.greet(); // "Hello, I'm Jane, I'm a Developer"
|
||||
```
|
||||
|
||||
## Modules
|
||||
|
||||
### ES6 Modules (ESM)
|
||||
|
||||
```javascript
|
||||
// Export (math.js)
|
||||
export const PI = 3.14159;
|
||||
export function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
export default class Calculator {
|
||||
// ...
|
||||
}
|
||||
|
||||
// Import
|
||||
import Calculator, { PI, add } from './math.js';
|
||||
import * as math from './math.js';
|
||||
import { add as sum } from './math.js'; // Rename
|
||||
```
|
||||
|
||||
### CommonJS (Node.js)
|
||||
|
||||
```javascript
|
||||
// Export (math.js)
|
||||
module.exports = {
|
||||
add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
};
|
||||
|
||||
// Import
|
||||
const math = require('./math');
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
```javascript
|
||||
// Try/catch
|
||||
try {
|
||||
// Code that might throw
|
||||
throw new Error("Something went wrong");
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
} finally {
|
||||
// Always runs
|
||||
console.log("Cleanup");
|
||||
}
|
||||
|
||||
// Custom errors
|
||||
class ValidationError extends Error {
|
||||
constructor(message) {
|
||||
super(message);
|
||||
this.name = "ValidationError";
|
||||
}
|
||||
}
|
||||
|
||||
throw new ValidationError("Invalid input");
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
- ✅ Use `const` by default, `let` when needed
|
||||
- ✅ Use strict mode (`'use strict';`)
|
||||
- ✅ Use arrow functions for callbacks
|
||||
- ✅ Use template literals for string interpolation
|
||||
- ✅ Use destructuring for cleaner code
|
||||
- ✅ Use async/await for asynchronous code
|
||||
- ✅ Handle errors properly
|
||||
- ✅ Use descriptive variable names
|
||||
- ✅ Keep functions small and focused
|
||||
- ✅ Use modern ES6+ features
|
||||
|
||||
### Don'ts
|
||||
- ❌ Use `var` (use `let` or `const`)
|
||||
- ❌ Pollute global scope
|
||||
- ❌ Use `==` (use `===` for strict equality)
|
||||
- ❌ Modify function parameters
|
||||
- ❌ Use `eval()` or `with()`
|
||||
- ❌ Ignore errors silently
|
||||
- ❌ Use synchronous code for I/O operations
|
||||
- ❌ Create deeply nested callbacks (callback hell)
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Algorithm
|
||||
- Argument
|
||||
- Array
|
||||
- Asynchronous
|
||||
- Binding
|
||||
- BigInt
|
||||
- Bitwise flags
|
||||
- Block (scripting)
|
||||
- Boolean
|
||||
- Callback function
|
||||
- Camel case
|
||||
- Class
|
||||
- Closure
|
||||
- Code point
|
||||
- Code unit
|
||||
- Compile
|
||||
- Compile time
|
||||
- Conditional
|
||||
- Constant
|
||||
- Constructor
|
||||
- Control flow
|
||||
- Deep copy
|
||||
- Deserialization
|
||||
- ECMAScript
|
||||
- Encapsulation
|
||||
- Exception
|
||||
- Expando
|
||||
- First-class function
|
||||
- Function
|
||||
- Hoisting
|
||||
- IIFE
|
||||
- Identifier
|
||||
- Immutable
|
||||
- Inheritance
|
||||
- Instance
|
||||
- JavaScript
|
||||
- JSON
|
||||
- JSON type representation
|
||||
- Just-In-Time Compilation (JIT)
|
||||
- Kebab case
|
||||
- Keyword
|
||||
- Literal
|
||||
- Local scope
|
||||
- Local variable
|
||||
- Loop
|
||||
- Method
|
||||
- Mixin
|
||||
- Modularity
|
||||
- Mutable
|
||||
- Namespace
|
||||
- NaN
|
||||
- Native
|
||||
- Null
|
||||
- Nullish value
|
||||
- Number
|
||||
- Object
|
||||
- Object reference
|
||||
- OOP
|
||||
- Operand
|
||||
- Operator
|
||||
- Parameter
|
||||
- Parse
|
||||
- Polymorphism
|
||||
- Primitive
|
||||
- Promise
|
||||
- Property (JavaScript)
|
||||
- Prototype
|
||||
- Prototype-based programming
|
||||
- Pseudocode
|
||||
- Recursion
|
||||
- Regular expression
|
||||
- Scope
|
||||
- Serialization
|
||||
- Serializable object
|
||||
- Shallow copy
|
||||
- Signature (functions)
|
||||
- Sloppy mode
|
||||
- Snake case
|
||||
- Static method
|
||||
- Static typing
|
||||
- Statement
|
||||
- Strict mode
|
||||
- String
|
||||
- Stringifier
|
||||
- Symbol
|
||||
- Synchronous
|
||||
- Syntax
|
||||
- Syntax error
|
||||
- Type
|
||||
- Type coercion
|
||||
- Type conversion
|
||||
- Truthy
|
||||
- Falsy
|
||||
- Undefined
|
||||
- Value
|
||||
- Variable
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
||||
- [ECMAScript Specification](https://tc39.es/ecma262/)
|
||||
- [JavaScript.info](https://javascript.info/)
|
||||
- [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS)
|
||||
@@ -1,504 +0,0 @@
|
||||
# Media & Graphics Reference
|
||||
|
||||
Multimedia content, graphics, and related technologies for the web.
|
||||
|
||||
## Image Formats
|
||||
|
||||
### JPEG/JPG
|
||||
|
||||
Lossy compression for photographs.
|
||||
|
||||
**Characteristics**:
|
||||
- Good for photos
|
||||
- No transparency support
|
||||
- Small file size
|
||||
- Quality degrades with editing
|
||||
|
||||
**Usage**:
|
||||
```html
|
||||
<img src="photo.jpg" alt="Photo">
|
||||
```
|
||||
|
||||
### PNG
|
||||
|
||||
Lossless compression with transparency.
|
||||
|
||||
**Characteristics**:
|
||||
- Supports alpha channel (transparency)
|
||||
- Larger file size than JPEG
|
||||
- Good for logos, graphics, screenshots
|
||||
- PNG-8 (256 colors) vs PNG-24 (16M colors)
|
||||
|
||||
```html
|
||||
<img src="logo.png" alt="Logo">
|
||||
```
|
||||
|
||||
### WebP
|
||||
|
||||
Modern format with better compression.
|
||||
|
||||
**Characteristics**:
|
||||
- Smaller than JPEG/PNG
|
||||
- Supports transparency
|
||||
- Supports animation
|
||||
- Not supported in older browsers
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<source srcset="image.webp" type="image/webp">
|
||||
<img src="image.jpg" alt="Fallback">
|
||||
</picture>
|
||||
```
|
||||
|
||||
### AVIF
|
||||
|
||||
Next-generation image format.
|
||||
|
||||
**Characteristics**:
|
||||
- Better compression than WebP
|
||||
- Supports HDR
|
||||
- Slower encoding
|
||||
- Limited browser support
|
||||
|
||||
### GIF
|
||||
|
||||
Animated images (limited colors).
|
||||
|
||||
**Characteristics**:
|
||||
- 256 colors max
|
||||
- Supports animation
|
||||
- Simple transparency (no alpha)
|
||||
- Consider modern alternatives (video, WebP)
|
||||
|
||||
### SVG (Scalable Vector Graphics)
|
||||
|
||||
XML-based vector graphics.
|
||||
|
||||
**Characteristics**:
|
||||
- Scalable without quality loss
|
||||
- Small file size for simple graphics
|
||||
- CSS/JS manipulatable
|
||||
- Animation support
|
||||
|
||||
```html
|
||||
<!-- Inline SVG -->
|
||||
<svg width="100" height="100">
|
||||
<circle cx="50" cy="50" r="40" fill="blue" />
|
||||
</svg>
|
||||
|
||||
<!-- External SVG -->
|
||||
<img src="icon.svg" alt="Icon">
|
||||
```
|
||||
|
||||
**Creating SVG**:
|
||||
```html
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Rectangle -->
|
||||
<rect x="10" y="10" width="80" height="60" fill="red" />
|
||||
|
||||
<!-- Circle -->
|
||||
<circle cx="150" cy="40" r="30" fill="blue" />
|
||||
|
||||
<!-- Path -->
|
||||
<path d="M10 100 L100 100 L50 150 Z" fill="green" />
|
||||
|
||||
<!-- Text -->
|
||||
<text x="50" y="180" font-size="20">Hello SVG</text>
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Canvas API
|
||||
|
||||
2D raster graphics (bitmap).
|
||||
|
||||
### Basic Setup
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="400" height="300"></canvas>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const canvas = document.getElementById('myCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Draw rectangle
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fillRect(10, 10, 100, 50);
|
||||
|
||||
// Draw circle
|
||||
ctx.beginPath();
|
||||
ctx.arc(200, 150, 50, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fill();
|
||||
|
||||
// Draw line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(50, 200);
|
||||
ctx.lineTo(350, 250);
|
||||
ctx.strokeStyle = 'green';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.stroke();
|
||||
|
||||
// Draw text
|
||||
ctx.font = '30px Arial';
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillText('Hello Canvas', 50, 100);
|
||||
|
||||
// Draw image
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0);
|
||||
};
|
||||
img.src = 'image.jpg';
|
||||
```
|
||||
|
||||
### Canvas Methods
|
||||
|
||||
```javascript
|
||||
// Paths
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.arc(x, y, radius, startAngle, endAngle);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// Transforms
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(angle);
|
||||
ctx.scale(x, y);
|
||||
ctx.save(); // Save state
|
||||
ctx.restore(); // Restore state
|
||||
|
||||
// Compositing
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
|
||||
// Export
|
||||
const dataURL = canvas.toDataURL('image/png');
|
||||
canvas.toBlob(blob => {
|
||||
// Use blob
|
||||
}, 'image/png');
|
||||
```
|
||||
|
||||
## WebGL
|
||||
|
||||
3D graphics in the browser.
|
||||
|
||||
**Use Cases**:
|
||||
- 3D visualizations
|
||||
- Games
|
||||
- Data visualization
|
||||
- VR/AR
|
||||
|
||||
**Libraries**:
|
||||
- **Three.js**: Easy 3D graphics
|
||||
- **Babylon.js**: Game engine
|
||||
- **PixiJS**: 2D WebGL renderer
|
||||
|
||||
```javascript
|
||||
// Three.js example
|
||||
import * as THREE from 'three';
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// Create cube
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
scene.add(cube);
|
||||
|
||||
camera.position.z = 5;
|
||||
|
||||
// Render loop
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
cube.rotation.x += 0.01;
|
||||
cube.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
animate();
|
||||
```
|
||||
|
||||
## Video
|
||||
|
||||
### HTML5 Video Element
|
||||
|
||||
```html
|
||||
<video controls width="640" height="360">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
<source src="video.webm" type="video/webm">
|
||||
Your browser doesn't support video.
|
||||
</video>
|
||||
```
|
||||
|
||||
**Attributes**:
|
||||
- `controls`: Show playback controls
|
||||
- `autoplay`: Start automatically
|
||||
- `loop`: Repeat video
|
||||
- `muted`: Mute audio
|
||||
- `poster`: Thumbnail image
|
||||
- `preload`: none/metadata/auto
|
||||
|
||||
### Video Formats
|
||||
|
||||
- **MP4 (H.264)**: Widely supported
|
||||
- **WebM (VP8/VP9)**: Open format
|
||||
- **Ogg (Theora)**: Open format
|
||||
|
||||
### JavaScript Control
|
||||
|
||||
```javascript
|
||||
const video = document.querySelector('video');
|
||||
|
||||
// Playback
|
||||
video.play();
|
||||
video.pause();
|
||||
video.currentTime = 10; // Seek to 10s
|
||||
|
||||
// Properties
|
||||
video.duration; // Total duration
|
||||
video.currentTime; // Current position
|
||||
video.paused; // Is paused?
|
||||
video.volume = 0.5; // 0.0 to 1.0
|
||||
video.playbackRate = 1.5; // Speed
|
||||
|
||||
// Events
|
||||
video.addEventListener('play', () => {});
|
||||
video.addEventListener('pause', () => {});
|
||||
video.addEventListener('ended', () => {});
|
||||
video.addEventListener('timeupdate', () => {});
|
||||
```
|
||||
|
||||
## Audio
|
||||
|
||||
### HTML5 Audio Element
|
||||
|
||||
```html
|
||||
<audio controls>
|
||||
<source src="audio.mp3" type="audio/mpeg">
|
||||
<source src="audio.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
```
|
||||
|
||||
### Audio Formats
|
||||
|
||||
- **MP3**: Widely supported
|
||||
- **AAC**: Good quality
|
||||
- **Ogg Vorbis**: Open format
|
||||
- **WAV**: Uncompressed
|
||||
|
||||
### Web Audio API
|
||||
|
||||
Advanced audio processing:
|
||||
|
||||
```javascript
|
||||
const audioContext = new AudioContext();
|
||||
|
||||
// Load audio
|
||||
fetch('audio.mp3')
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
|
||||
.then(audioBuffer => {
|
||||
// Create source
|
||||
const source = audioContext.createBufferSource();
|
||||
source.buffer = audioBuffer;
|
||||
|
||||
// Create gain node (volume)
|
||||
const gainNode = audioContext.createGain();
|
||||
gainNode.gain.value = 0.5;
|
||||
|
||||
// Connect: source -> gain -> destination
|
||||
source.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
// Play
|
||||
source.start();
|
||||
});
|
||||
```
|
||||
|
||||
## Responsive Images
|
||||
|
||||
### srcset and sizes
|
||||
|
||||
```html
|
||||
<!-- Different resolutions -->
|
||||
<img src="image-800.jpg"
|
||||
srcset="image-400.jpg 400w,
|
||||
image-800.jpg 800w,
|
||||
image-1200.jpg 1200w"
|
||||
sizes="(max-width: 600px) 100vw,
|
||||
(max-width: 900px) 50vw,
|
||||
800px"
|
||||
alt="Responsive image">
|
||||
|
||||
<!-- Pixel density -->
|
||||
<img src="image.jpg"
|
||||
srcset="image.jpg 1x,
|
||||
image@2x.jpg 2x,
|
||||
image@3x.jpg 3x"
|
||||
alt="High DPI image">
|
||||
```
|
||||
|
||||
### Picture Element
|
||||
|
||||
Art direction and format switching:
|
||||
|
||||
```html
|
||||
<picture>
|
||||
<!-- Different formats -->
|
||||
<source srcset="image.avif" type="image/avif">
|
||||
<source srcset="image.webp" type="image/webp">
|
||||
|
||||
<!-- Different crops for mobile/desktop -->
|
||||
<source media="(max-width: 600px)" srcset="image-mobile.jpg">
|
||||
<source media="(min-width: 601px)" srcset="image-desktop.jpg">
|
||||
|
||||
<!-- Fallback -->
|
||||
<img src="image.jpg" alt="Fallback">
|
||||
</picture>
|
||||
```
|
||||
|
||||
## Image Optimization
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Choose correct format**:
|
||||
- Photos: JPEG, WebP, AVIF
|
||||
- Graphics/logos: PNG, SVG, WebP
|
||||
- Animations: Video, WebP
|
||||
|
||||
2. **Compress images**:
|
||||
- Use compression tools
|
||||
- Balance quality vs file size
|
||||
- Progressive JPEG for large images
|
||||
|
||||
3. **Responsive images**:
|
||||
- Serve appropriate sizes
|
||||
- Use srcset/picture
|
||||
- Consider device pixel ratio
|
||||
|
||||
4. **Lazy loading**:
|
||||
```html
|
||||
<img src="image.jpg" loading="lazy" alt="Lazy loaded">
|
||||
```
|
||||
|
||||
5. **Dimensions**:
|
||||
```html
|
||||
<img src="image.jpg" width="800" height="600" alt="With dimensions">
|
||||
```
|
||||
|
||||
## Image Loading Techniques
|
||||
|
||||
### Lazy Loading
|
||||
|
||||
```html
|
||||
<!-- Native lazy loading -->
|
||||
<img src="image.jpg" loading="lazy" alt="Image">
|
||||
|
||||
<!-- Intersection Observer -->
|
||||
<img data-src="image.jpg" class="lazy" alt="Image">
|
||||
```
|
||||
|
||||
```javascript
|
||||
const images = document.querySelectorAll('.lazy');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => observer.observe(img));
|
||||
```
|
||||
|
||||
### Progressive Enhancement
|
||||
|
||||
```html
|
||||
<!-- Low quality placeholder -->
|
||||
<img src="image-tiny.jpg"
|
||||
data-src="image-full.jpg"
|
||||
class="blur"
|
||||
alt="Progressive image">
|
||||
```
|
||||
|
||||
## Favicon
|
||||
|
||||
Website icon:
|
||||
|
||||
```html
|
||||
<!-- Standard -->
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
|
||||
<!-- Modern -->
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
<!-- Multiple sizes -->
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
|
||||
```
|
||||
|
||||
## Multimedia Best Practices
|
||||
|
||||
### Performance
|
||||
|
||||
- Optimize file sizes
|
||||
- Use appropriate formats
|
||||
- Implement lazy loading
|
||||
- Use CDN for delivery
|
||||
- Compress videos
|
||||
|
||||
### Accessibility
|
||||
|
||||
- Provide alt text for images
|
||||
- Include captions/subtitles for videos
|
||||
- Provide transcripts for audio
|
||||
- Don't autoplay with sound
|
||||
- Ensure keyboard controls
|
||||
|
||||
### SEO
|
||||
|
||||
- Descriptive filenames
|
||||
- Alt text with keywords
|
||||
- Structured data (schema.org)
|
||||
- Image sitemaps
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Alpha
|
||||
- Baseline (image)
|
||||
- Baseline (scripting)
|
||||
- Canvas
|
||||
- Favicon
|
||||
- JPEG
|
||||
- Lossless compression
|
||||
- Lossy compression
|
||||
- PNG
|
||||
- Progressive enhancement
|
||||
- Quality values
|
||||
- Raster image
|
||||
- Render
|
||||
- Rendering engine
|
||||
- SVG
|
||||
- Vector images
|
||||
- WebGL
|
||||
- WebP
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [MDN Canvas Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
|
||||
- [SVG Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
|
||||
- [WebGL Fundamentals](https://webglfundamentals.org/)
|
||||
- [Responsive Images Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
|
||||
- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
|
||||
@@ -1,546 +0,0 @@
|
||||
# Performance & Optimization Reference
|
||||
|
||||
Comprehensive reference for web performance metrics, optimization techniques, and Core Web Vitals.
|
||||
|
||||
## Core Web Vitals
|
||||
|
||||
Google's metrics for measuring user experience.
|
||||
|
||||
### Largest Contentful Paint (LCP)
|
||||
|
||||
Measures loading performance - when largest content element becomes visible.
|
||||
|
||||
**Target**: < 2.5 seconds
|
||||
|
||||
**Optimization**:
|
||||
- Reduce server response time
|
||||
- Optimize images
|
||||
- Remove render-blocking resources
|
||||
- Use CDN
|
||||
- Implement lazy loading
|
||||
- Preload critical resources
|
||||
|
||||
```html
|
||||
<link rel="preload" href="hero-image.jpg" as="image">
|
||||
```
|
||||
|
||||
### First Input Delay (FID) → Interaction to Next Paint (INP)
|
||||
|
||||
FID (deprecated) measured input responsiveness. INP is the new metric.
|
||||
|
||||
**INP Target**: < 200ms
|
||||
|
||||
**Optimization**:
|
||||
- Minimize JavaScript execution time
|
||||
- Break up long tasks
|
||||
- Use web workers
|
||||
- Optimize third-party scripts
|
||||
- Use `requestIdleCallback`
|
||||
|
||||
### Cumulative Layout Shift (CLS)
|
||||
|
||||
Measures visual stability - unexpected layout shifts.
|
||||
|
||||
**Target**: < 0.1
|
||||
|
||||
**Optimization**:
|
||||
- Specify image/video dimensions
|
||||
- Avoid inserting content above existing content
|
||||
- Use CSS aspect-ratio
|
||||
- Reserve space for dynamic content
|
||||
|
||||
```html
|
||||
<img src="image.jpg" width="800" height="600" alt="Photo">
|
||||
|
||||
<style>
|
||||
.video-container {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Other Performance Metrics
|
||||
|
||||
### First Contentful Paint (FCP)
|
||||
Time when first content element renders.
|
||||
**Target**: < 1.8s
|
||||
|
||||
### Time to First Byte (TTFB)
|
||||
Time for browser to receive first byte of response.
|
||||
**Target**: < 600ms
|
||||
|
||||
### Time to Interactive (TTI)
|
||||
When page becomes fully interactive.
|
||||
**Target**: < 3.8s
|
||||
|
||||
### Speed Index
|
||||
How quickly content is visually displayed.
|
||||
**Target**: < 3.4s
|
||||
|
||||
### Total Blocking Time (TBT)
|
||||
Sum of blocking time for all long tasks.
|
||||
**Target**: < 200ms
|
||||
|
||||
## Image Optimization
|
||||
|
||||
### Format Selection
|
||||
|
||||
| Format | Best For | Pros | Cons |
|
||||
|--------|----------|------|------|
|
||||
| JPEG | Photos | Small size, widely supported | Lossy, no transparency |
|
||||
| PNG | Graphics, transparency | Lossless, transparency | Larger size |
|
||||
| WebP | Modern browsers | Small size, transparency | Limited old browser support |
|
||||
| AVIF | Newest format | Best compression | Limited support |
|
||||
| SVG | Icons, logos | Scalable, small | Not for photos |
|
||||
|
||||
### Responsive Images
|
||||
|
||||
```html
|
||||
<!-- Picture element for art direction -->
|
||||
<picture>
|
||||
<source media="(min-width: 1024px)" srcset="large.webp" type="image/webp">
|
||||
<source media="(min-width: 768px)" srcset="medium.webp" type="image/webp">
|
||||
<source media="(min-width: 1024px)" srcset="large.jpg">
|
||||
<source media="(min-width: 768px)" srcset="medium.jpg">
|
||||
<img src="small.jpg" alt="Responsive image">
|
||||
</picture>
|
||||
|
||||
<!-- Srcset for resolution switching -->
|
||||
<img
|
||||
src="image-800.jpg"
|
||||
srcset="image-400.jpg 400w,
|
||||
image-800.jpg 800w,
|
||||
image-1200.jpg 1200w"
|
||||
sizes="(max-width: 600px) 400px,
|
||||
(max-width: 1000px) 800px,
|
||||
1200px"
|
||||
alt="Image">
|
||||
|
||||
<!-- Lazy loading -->
|
||||
<img src="image.jpg" loading="lazy" alt="Lazy loaded">
|
||||
```
|
||||
|
||||
### Image Compression
|
||||
|
||||
- Use tools like ImageOptim, Squoosh, or Sharp
|
||||
- Target 80-85% quality for JPEGs
|
||||
- Use progressive JPEGs
|
||||
- Strip metadata
|
||||
|
||||
## Code Optimization
|
||||
|
||||
### Minification
|
||||
|
||||
Remove whitespace, comments, shorten names:
|
||||
|
||||
```javascript
|
||||
// Before
|
||||
function calculateTotal(price, tax) {
|
||||
const total = price + (price * tax);
|
||||
return total;
|
||||
}
|
||||
|
||||
// After minification
|
||||
function t(p,x){return p+p*x}
|
||||
```
|
||||
|
||||
**Tools**: Terser (JS), cssnano (CSS), html-minifier
|
||||
|
||||
### Code Splitting
|
||||
|
||||
Split code into smaller chunks loaded on demand:
|
||||
|
||||
```javascript
|
||||
// Dynamic import
|
||||
button.addEventListener('click', async () => {
|
||||
const module = await import('./heavy-module.js');
|
||||
module.run();
|
||||
});
|
||||
|
||||
// React lazy loading
|
||||
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
|
||||
|
||||
// Webpack code splitting
|
||||
import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
|
||||
// Use lodash
|
||||
});
|
||||
```
|
||||
|
||||
### Tree Shaking
|
||||
|
||||
Remove unused code during bundling:
|
||||
|
||||
```javascript
|
||||
// Only imports what's used
|
||||
import { debounce } from 'lodash-es';
|
||||
|
||||
// ESM exports enable tree shaking
|
||||
export { function1, function2 };
|
||||
```
|
||||
|
||||
### Compression
|
||||
|
||||
Enable gzip or brotli compression:
|
||||
|
||||
```nginx
|
||||
# nginx config
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript;
|
||||
gzip_min_length 1000;
|
||||
|
||||
# brotli (better compression)
|
||||
brotli on;
|
||||
brotli_types text/plain text/css application/json application/javascript;
|
||||
```
|
||||
|
||||
## Caching Strategies
|
||||
|
||||
### Cache-Control Headers
|
||||
|
||||
```http
|
||||
# Immutable assets (versioned URLs)
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
|
||||
# HTML (always revalidate)
|
||||
Cache-Control: no-cache
|
||||
|
||||
# API responses (short cache)
|
||||
Cache-Control: private, max-age=300
|
||||
|
||||
# No caching
|
||||
Cache-Control: no-store
|
||||
```
|
||||
|
||||
### Service Workers
|
||||
|
||||
Advanced caching control:
|
||||
|
||||
```javascript
|
||||
// Cache-first strategy
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(
|
||||
caches.match(event.request).then((response) => {
|
||||
return response || fetch(event.request);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Network-first strategy
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(
|
||||
fetch(event.request).catch(() => {
|
||||
return caches.match(event.request);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Stale-while-revalidate
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(
|
||||
caches.open('dynamic').then((cache) => {
|
||||
return cache.match(event.request).then((response) => {
|
||||
const fetchPromise = fetch(event.request).then((networkResponse) => {
|
||||
cache.put(event.request, networkResponse.clone());
|
||||
return networkResponse;
|
||||
});
|
||||
return response || fetchPromise;
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
## Loading Strategies
|
||||
|
||||
### Critical Rendering Path
|
||||
|
||||
1. Construct DOM from HTML
|
||||
2. Construct CSSOM from CSS
|
||||
3. Combine DOM + CSSOM into render tree
|
||||
4. Calculate layout
|
||||
5. Paint pixels
|
||||
|
||||
### Resource Hints
|
||||
|
||||
```html
|
||||
<!-- DNS prefetch -->
|
||||
<link rel="dns-prefetch" href="//example.com">
|
||||
|
||||
<!-- Preconnect (DNS + TCP + TLS) -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
||||
<!-- Prefetch (low priority for next page) -->
|
||||
<link rel="prefetch" href="next-page.js">
|
||||
|
||||
<!-- Preload (high priority for current page) -->
|
||||
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<!-- Prerender (next page in background) -->
|
||||
<link rel="prerender" href="next-page.html">
|
||||
```
|
||||
|
||||
### Lazy Loading
|
||||
|
||||
#### Images - native lazy loading
|
||||
|
||||
<img src="image.jpg" loading="lazy">
|
||||
|
||||
```javascript
|
||||
// Intersection Observer for custom lazy loading
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
observer.observe(img);
|
||||
});
|
||||
```
|
||||
|
||||
### Critical CSS
|
||||
|
||||
Inline above-the-fold CSS, defer the rest:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
/* Critical CSS inlined */
|
||||
body { margin: 0; font-family: sans-serif; }
|
||||
.header { height: 60px; background: #333; }
|
||||
</style>
|
||||
|
||||
<!-- Non-critical CSS deferred -->
|
||||
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||||
<noscript><link rel="stylesheet" href="styles.css"></noscript>
|
||||
</head>
|
||||
```
|
||||
|
||||
## JavaScript Performance
|
||||
|
||||
### Debouncing & Throttling
|
||||
|
||||
```javascript
|
||||
// Debounce - execute after delay
|
||||
function debounce(func, delay) {
|
||||
let timeoutId;
|
||||
return function(...args) {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => func.apply(this, args), delay);
|
||||
};
|
||||
}
|
||||
|
||||
// Usage
|
||||
const handleSearch = debounce((query) => {
|
||||
// Search logic
|
||||
}, 300);
|
||||
|
||||
// Throttle - execute at most once per interval
|
||||
function throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function(...args) {
|
||||
if (!inThrottle) {
|
||||
func.apply(this, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Usage
|
||||
const handleScroll = throttle(() => {
|
||||
// Scroll logic
|
||||
}, 100);
|
||||
```
|
||||
|
||||
### Long Tasks
|
||||
|
||||
Break up with `requestIdleCallback`:
|
||||
|
||||
```javascript
|
||||
function processLargeArray(items) {
|
||||
let index = 0;
|
||||
|
||||
function processChunk() {
|
||||
const deadline = performance.now() + 50; // 50ms budget
|
||||
|
||||
while (index < items.length && performance.now() < deadline) {
|
||||
// Process item
|
||||
processItem(items[index]);
|
||||
index++;
|
||||
}
|
||||
|
||||
if (index < items.length) {
|
||||
requestIdleCallback(processChunk);
|
||||
}
|
||||
}
|
||||
|
||||
requestIdleCallback(processChunk);
|
||||
}
|
||||
```
|
||||
|
||||
### Web Workers
|
||||
|
||||
Offload heavy computation:
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
const worker = new Worker('worker.js');
|
||||
worker.postMessage({ data: largeDataset });
|
||||
|
||||
worker.onmessage = (event) => {
|
||||
console.log('Result:', event.data);
|
||||
};
|
||||
|
||||
// worker.js
|
||||
self.onmessage = (event) => {
|
||||
const result = heavyComputation(event.data);
|
||||
self.postMessage(result);
|
||||
};
|
||||
```
|
||||
|
||||
## Performance Monitoring
|
||||
|
||||
### Performance API
|
||||
|
||||
```javascript
|
||||
// Navigation timing
|
||||
const navTiming = performance.getEntriesByType('navigation')[0];
|
||||
console.log('DOM loaded:', navTiming.domContentLoadedEventEnd);
|
||||
console.log('Page loaded:', navTiming.loadEventEnd);
|
||||
|
||||
// Resource timing
|
||||
const resources = performance.getEntriesByType('resource');
|
||||
resources.forEach(resource => {
|
||||
console.log(resource.name, resource.duration);
|
||||
});
|
||||
|
||||
// Mark and measure custom timings
|
||||
performance.mark('start-task');
|
||||
// Do work
|
||||
performance.mark('end-task');
|
||||
performance.measure('task-duration', 'start-task', 'end-task');
|
||||
|
||||
const measure = performance.getEntriesByName('task-duration')[0];
|
||||
console.log('Task took:', measure.duration, 'ms');
|
||||
|
||||
// Observer for performance entries
|
||||
const observer = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries()) {
|
||||
console.log('Performance entry:', entry);
|
||||
}
|
||||
});
|
||||
observer.observe({ entryTypes: ['measure', 'mark', 'resource'] });
|
||||
```
|
||||
|
||||
### Web Vitals Library
|
||||
|
||||
```javascript
|
||||
import { getLCP, getFID, getCLS } from 'web-vitals';
|
||||
|
||||
getLCP(console.log);
|
||||
getFID(console.log);
|
||||
getCLS(console.log);
|
||||
```
|
||||
|
||||
## CDN (Content Delivery Network)
|
||||
|
||||
Distribute content across global servers for faster delivery.
|
||||
|
||||
**Benefits**:
|
||||
- Reduced latency
|
||||
- Improved load times
|
||||
- Better availability
|
||||
- Reduced bandwidth costs
|
||||
|
||||
**Popular CDNs**:
|
||||
- Cloudflare
|
||||
- Amazon CloudFront
|
||||
- Fastly
|
||||
- Akamai
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
- ✅ Optimize images (format, compression, size)
|
||||
- ✅ Minify and compress code
|
||||
- ✅ Implement caching strategies
|
||||
- ✅ Use CDN for static assets
|
||||
- ✅ Lazy load non-critical resources
|
||||
- ✅ Defer non-critical JavaScript
|
||||
- ✅ Inline critical CSS
|
||||
- ✅ Use HTTP/2 or HTTP/3
|
||||
- ✅ Monitor Core Web Vitals
|
||||
- ✅ Set performance budgets
|
||||
|
||||
### Don'ts
|
||||
- ❌ Serve unoptimized images
|
||||
- ❌ Block rendering with scripts
|
||||
- ❌ Cause layout shifts
|
||||
- ❌ Make excessive HTTP requests
|
||||
- ❌ Load unused code
|
||||
- ❌ Use synchronous operations on main thread
|
||||
- ❌ Ignore performance metrics
|
||||
- ❌ Forget mobile performance
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- bfcache
|
||||
- Bandwidth
|
||||
- Brotli compression
|
||||
- Code splitting
|
||||
- Compression Dictionary Transport
|
||||
- Cumulative Layout Shift (CLS)
|
||||
- Delta
|
||||
- First Contentful Paint (FCP)
|
||||
- First CPU idle
|
||||
- First Input Delay (FID)
|
||||
- First Meaningful Paint (FMP)
|
||||
- First Paint (FP)
|
||||
- Graceful degradation
|
||||
- gzip compression
|
||||
- Interaction to Next Paint (INP)
|
||||
- Jank
|
||||
- Jitter
|
||||
- Largest Contentful Paint (LCP)
|
||||
- Latency
|
||||
- Lazy load
|
||||
- Long task
|
||||
- Lossless compression
|
||||
- Lossy compression
|
||||
- Minification
|
||||
- Network throttling
|
||||
- Page load time
|
||||
- Page prediction
|
||||
- Perceived performance
|
||||
- Prefetch
|
||||
- Prerender
|
||||
- Progressive enhancement
|
||||
- RAIL
|
||||
- Real User Monitoring (RUM)
|
||||
- Reflow
|
||||
- Render-blocking
|
||||
- Repaint
|
||||
- Resource Timing
|
||||
- Round Trip Time (RTT)
|
||||
- Server Timing
|
||||
- Speed index
|
||||
- Speculative parsing
|
||||
- Synthetic monitoring
|
||||
- Time to First Byte (TTFB)
|
||||
- Time to Interactive (TTI)
|
||||
- Tree shaking
|
||||
- Web performance
|
||||
- Zstandard compression
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Web.dev Performance](https://web.dev/performance/)
|
||||
- [MDN Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
|
||||
- [WebPageTest](https://www.webpagetest.org/)
|
||||
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
|
||||
@@ -1,603 +0,0 @@
|
||||
# Security & Authentication Reference
|
||||
|
||||
Comprehensive reference for web security, authentication, encryption, and secure coding practices.
|
||||
|
||||
## Web Security Fundamentals
|
||||
|
||||
### CIA Triad
|
||||
|
||||
Core principles of information security:
|
||||
- **Confidentiality**: Data accessible only to authorized parties
|
||||
- **Integrity**: Data remains accurate and unmodified
|
||||
- **Availability**: Systems and data accessible when needed
|
||||
|
||||
### Security Headers
|
||||
|
||||
```http
|
||||
# Content Security Policy
|
||||
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com 'nonce-<random-base64-value>'; style-src 'self' 'nonce-<random-base64-value>'; object-src 'none'
|
||||
|
||||
# HTTP Strict Transport Security
|
||||
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
|
||||
|
||||
# X-Frame-Options (clickjacking protection)
|
||||
X-Frame-Options: DENY
|
||||
|
||||
# X-Content-Type-Options (MIME sniffing)
|
||||
X-Content-Type-Options: nosniff
|
||||
|
||||
# X-XSS-Protection (legacy, use CSP instead)
|
||||
X-XSS-Protection: 1; mode=block
|
||||
|
||||
# Referrer-Policy
|
||||
Referrer-Policy: strict-origin-when-cross-origin
|
||||
|
||||
# Permissions-Policy
|
||||
Permissions-Policy: geolocation=(), microphone=(), camera=()
|
||||
```
|
||||
|
||||
### CSP (Content Security Policy)
|
||||
|
||||
Mitigates XSS and data injection attacks.
|
||||
|
||||
**Directives**:
|
||||
- `default-src`: Fallback for other directives
|
||||
- `script-src`: JavaScript sources
|
||||
- `style-src`: CSS sources
|
||||
- `img-src`: Image sources
|
||||
- `font-src`: Font sources
|
||||
- `connect-src`: Fetch/XMLHttpRequest destinations
|
||||
- `frame-src`: iframe sources
|
||||
- `object-src`: Plugin sources
|
||||
|
||||
**Values**:
|
||||
- `'self'`: Same origin
|
||||
- `'none'`: Block all
|
||||
- `'unsafe-inline'`: Allow inline scripts/styles (avoid)
|
||||
- `'unsafe-eval'`: Allow eval() (avoid)
|
||||
- `https:`: HTTPS sources only
|
||||
- `https://example.com`: Specific domain
|
||||
|
||||
## HTTPS & TLS
|
||||
|
||||
### TLS (Transport Layer Security)
|
||||
|
||||
Encrypts data in transit between client and server.
|
||||
|
||||
**TLS Handshake**:
|
||||
1. Client Hello (supported versions, cipher suites)
|
||||
2. Server Hello (chosen version, cipher suite)
|
||||
3. Server Certificate
|
||||
4. Key Exchange
|
||||
5. Finished (connection established)
|
||||
|
||||
**Versions**:
|
||||
- TLS 1.0, 1.1 (deprecated)
|
||||
- TLS 1.2 (current standard)
|
||||
- TLS 1.3 (latest, faster)
|
||||
|
||||
### SSL Certificates
|
||||
|
||||
**Types**:
|
||||
- **Domain Validated (DV)**: Basic validation
|
||||
- **Organization Validated (OV)**: Business verification
|
||||
- **Extended Validation (EV)**: Rigorous verification
|
||||
|
||||
**Certificate Authority**: Trusted entity that issues certificates
|
||||
|
||||
**Self-Signed**: Not trusted by browsers (dev/testing only)
|
||||
|
||||
### HSTS (HTTP Strict Transport Security)
|
||||
|
||||
Forces browsers to use HTTPS:
|
||||
|
||||
```http
|
||||
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
|
||||
```
|
||||
|
||||
- `max-age`: Duration in seconds
|
||||
- `includeSubDomains`: Apply to all subdomains
|
||||
- `preload`: Submit to browser preload list
|
||||
|
||||
## Authentication
|
||||
|
||||
### Authentication vs Authorization
|
||||
|
||||
- **Authentication**: Verify identity ("Who are you?")
|
||||
- **Authorization**: Verify permissions ("What can you do?")
|
||||
|
||||
### Common Authentication Methods
|
||||
|
||||
#### 1. Session-Based Authentication
|
||||
|
||||
```javascript
|
||||
// Login
|
||||
app.post('/login', (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
// Verify credentials
|
||||
if (verifyCredentials(username, password)) {
|
||||
req.session.userId = user.id;
|
||||
res.json({ success: true });
|
||||
} else {
|
||||
res.status(401).json({ error: 'Invalid credentials' });
|
||||
}
|
||||
});
|
||||
|
||||
// Protected route
|
||||
app.get('/profile', requireAuth, (req, res) => {
|
||||
const user = getUserById(req.session.userId);
|
||||
res.json(user);
|
||||
});
|
||||
|
||||
// Logout
|
||||
app.post('/logout', (req, res) => {
|
||||
req.session.destroy();
|
||||
res.json({ success: true });
|
||||
});
|
||||
```
|
||||
|
||||
**Pros**: Simple, server controls sessions
|
||||
**Cons**: Stateful, scalability issues, CSRF vulnerable
|
||||
|
||||
#### 2. Token-Based Authentication (JWT)
|
||||
|
||||
```javascript
|
||||
// Login
|
||||
app.post('/login', (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
if (verifyCredentials(username, password)) {
|
||||
const token = jwt.sign(
|
||||
{ userId: user.id, role: user.role },
|
||||
SECRET_KEY,
|
||||
{ expiresIn: '1h' }
|
||||
);
|
||||
res.json({ token });
|
||||
} else {
|
||||
res.status(401).json({ error: 'Invalid credentials' });
|
||||
}
|
||||
});
|
||||
|
||||
// Protected route
|
||||
app.get('/profile', (req, res) => {
|
||||
const token = req.headers.authorization?.split(' ')[1];
|
||||
|
||||
try {
|
||||
const decoded = jwt.verify(token, SECRET_KEY);
|
||||
const user = getUserById(decoded.userId);
|
||||
res.json(user);
|
||||
} catch (error) {
|
||||
res.status(401).json({ error: 'Invalid token' });
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**Pros**: Stateless, scalable, works across domains
|
||||
**Cons**: Can't revoke before expiry, size overhead
|
||||
|
||||
#### 3. OAuth 2.0
|
||||
|
||||
Authorization framework for delegated access.
|
||||
|
||||
**Roles**:
|
||||
- **Resource Owner**: End user
|
||||
- **Client**: Application requesting access
|
||||
- **Authorization Server**: Issues tokens
|
||||
- **Resource Server**: Hosts protected resources
|
||||
|
||||
**Flow Example** (Authorization Code):
|
||||
1. Client redirects to auth server
|
||||
2. User authenticates and grants permission
|
||||
3. Auth server redirects back with code
|
||||
4. Client exchanges code for access token
|
||||
5. Client uses token to access resources
|
||||
|
||||
#### 4. Multi-Factor Authentication (MFA)
|
||||
|
||||
Requires multiple verification factors:
|
||||
- **Something you know**: Password
|
||||
- **Something you have**: Phone, hardware token
|
||||
- **Something you are**: Biometric
|
||||
|
||||
### Password Security
|
||||
|
||||
```javascript
|
||||
const bcrypt = require('bcrypt');
|
||||
|
||||
// Hash password
|
||||
async function hashPassword(password) {
|
||||
const saltRounds = 10;
|
||||
return await bcrypt.hash(password, saltRounds);
|
||||
}
|
||||
|
||||
// Verify password
|
||||
async function verifyPassword(password, hash) {
|
||||
return await bcrypt.compare(password, hash);
|
||||
}
|
||||
```
|
||||
|
||||
**Best Practices**:
|
||||
- ✅ Use bcrypt, scrypt, or Argon2
|
||||
- ✅ Minimum 8 characters (12+ recommended)
|
||||
- ✅ Require mix of characters
|
||||
- ✅ Implement rate limiting
|
||||
- ✅ Use account lockout after failures
|
||||
- ❌ Never store plain text passwords
|
||||
- ❌ Never limit password length (within reason)
|
||||
- ❌ Never email passwords
|
||||
|
||||
## Common Vulnerabilities
|
||||
|
||||
### XSS (Cross-Site Scripting)
|
||||
|
||||
Injecting malicious scripts into web pages.
|
||||
|
||||
**Types**:
|
||||
1. **Stored XSS**: Malicious script stored in database
|
||||
2. **Reflected XSS**: Script in URL reflected in response
|
||||
3. **DOM-based XSS**: Client-side script manipulation
|
||||
|
||||
**Prevention**:
|
||||
```javascript
|
||||
// ❌ Vulnerable
|
||||
element.innerHTML = userInput;
|
||||
|
||||
// ✅ Safe
|
||||
element.textContent = userInput;
|
||||
|
||||
// ✅ Escape HTML
|
||||
function escapeHTML(str) {
|
||||
return str.replace(/[&<>"']/g, (match) => {
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return map[match];
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ Use DOMPurify for rich content
|
||||
import DOMPurify from 'dompurify';
|
||||
element.innerHTML = DOMPurify.sanitize(userInput);
|
||||
```
|
||||
|
||||
### CSRF (Cross-Site Request Forgery)
|
||||
|
||||
Tricks user into executing unwanted actions.
|
||||
|
||||
**Prevention**:
|
||||
```javascript
|
||||
// CSRF token
|
||||
app.get('/form', (req, res) => {
|
||||
const csrfToken = generateToken();
|
||||
req.session.csrfToken = csrfToken;
|
||||
res.render('form', { csrfToken });
|
||||
});
|
||||
|
||||
app.post('/transfer', (req, res) => {
|
||||
if (req.body.csrfToken !== req.session.csrfToken) {
|
||||
return res.status(403).json({ error: 'Invalid CSRF token' });
|
||||
}
|
||||
// Process request
|
||||
});
|
||||
|
||||
// SameSite cookie attribute
|
||||
Set-Cookie: sessionId=abc; SameSite=Strict; Secure; HttpOnly
|
||||
```
|
||||
|
||||
### SQL Injection
|
||||
|
||||
Injecting malicious SQL code.
|
||||
|
||||
**Prevention**:
|
||||
```javascript
|
||||
// ❌ Vulnerable
|
||||
const query = `SELECT * FROM users WHERE username = '${username}'`;
|
||||
|
||||
// ✅ Parameterized queries
|
||||
const query = 'SELECT * FROM users WHERE username = ?';
|
||||
db.execute(query, [username]);
|
||||
|
||||
// ✅ ORM/Query builder
|
||||
const user = await User.findOne({ where: { username } });
|
||||
```
|
||||
|
||||
### CORS Misconfiguration
|
||||
|
||||
```javascript
|
||||
// ❌ Vulnerable (allows any origin)
|
||||
Access-Control-Allow-Origin: *
|
||||
Access-Control-Allow-Credentials: true
|
||||
|
||||
// ✅ Whitelist specific origins
|
||||
const allowedOrigins = ['https://example.com'];
|
||||
if (allowedOrigins.includes(origin)) {
|
||||
res.setHeader('Access-Control-Allow-Origin', origin);
|
||||
res.setHeader('Access-Control-Allow-Credentials', 'true');
|
||||
}
|
||||
```
|
||||
|
||||
### Clickjacking
|
||||
|
||||
Tricking users into clicking hidden elements.
|
||||
|
||||
**Prevention**:
|
||||
```http
|
||||
X-Frame-Options: DENY
|
||||
X-Frame-Options: SAMEORIGIN
|
||||
|
||||
# Or with CSP
|
||||
Content-Security-Policy: frame-ancestors 'none'
|
||||
Content-Security-Policy: frame-ancestors 'self'
|
||||
```
|
||||
|
||||
### File Upload Vulnerabilities
|
||||
|
||||
```javascript
|
||||
// Validate file type
|
||||
const allowedTypes = ['image/jpeg', 'image/png'];
|
||||
if (!allowedTypes.includes(file.mimetype)) {
|
||||
return res.status(400).json({ error: 'Invalid file type' });
|
||||
}
|
||||
|
||||
// Check file size
|
||||
const maxSize = 5 * 1024 * 1024; // 5MB
|
||||
if (file.size > maxSize) {
|
||||
return res.status(400).json({ error: 'File too large' });
|
||||
}
|
||||
|
||||
// Sanitize filename
|
||||
const sanitizedName = file.name.replace(/[^a-z0-9.-]/gi, '_');
|
||||
|
||||
// Store outside web root
|
||||
const uploadPath = '/secure/uploads/' + sanitizedName;
|
||||
|
||||
// Use random filenames
|
||||
const filename = crypto.randomBytes(16).toString('hex') + path.extname(file.name);
|
||||
```
|
||||
|
||||
## Cryptography
|
||||
|
||||
### Encryption vs Hashing
|
||||
|
||||
- **Encryption**: Reversible (decrypt with key)
|
||||
- **Hashing**: One-way transformation
|
||||
|
||||
### Symmetric Encryption
|
||||
|
||||
Same key for encryption and decryption.
|
||||
|
||||
```javascript
|
||||
const crypto = require('crypto');
|
||||
|
||||
function encrypt(text, key) {
|
||||
const iv = crypto.randomBytes(16);
|
||||
const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
|
||||
let encrypted = cipher.update(text, 'utf8', 'hex');
|
||||
encrypted += cipher.final('hex');
|
||||
return iv.toString('hex') + ':' + encrypted;
|
||||
}
|
||||
|
||||
function decrypt(text, key) {
|
||||
const parts = text.split(':');
|
||||
const iv = Buffer.from(parts[0], 'hex');
|
||||
const encrypted = parts[1];
|
||||
const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
|
||||
let decrypted = decipher.update(encrypted, 'hex', 'utf8');
|
||||
decrypted += decipher.final('utf8');
|
||||
return decrypted;
|
||||
}
|
||||
```
|
||||
|
||||
### Public-Key Cryptography
|
||||
|
||||
Different keys for encryption (public) and decryption (private).
|
||||
|
||||
**Use Cases**:
|
||||
- TLS/SSL certificates
|
||||
- Digital signatures
|
||||
- SSH keys
|
||||
|
||||
### Hash Functions
|
||||
|
||||
```javascript
|
||||
const crypto = require('crypto');
|
||||
|
||||
// SHA-256
|
||||
const hash = crypto.createHash('sha256').update(data).digest('hex');
|
||||
|
||||
// HMAC (keyed hash)
|
||||
const hmac = crypto.createHmac('sha256', secretKey).update(data).digest('hex');
|
||||
```
|
||||
|
||||
### Digital Signatures
|
||||
|
||||
Verify authenticity and integrity.
|
||||
|
||||
```javascript
|
||||
const { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', {
|
||||
modulusLength: 2048
|
||||
});
|
||||
|
||||
// Sign
|
||||
const sign = crypto.createSign('SHA256');
|
||||
sign.update(data);
|
||||
const signature = sign.sign(privateKey, 'hex');
|
||||
|
||||
// Verify
|
||||
const verify = crypto.createVerify('SHA256');
|
||||
verify.update(data);
|
||||
const isValid = verify.verify(publicKey, signature, 'hex');
|
||||
```
|
||||
|
||||
## Secure Coding Practices
|
||||
|
||||
### Input Validation
|
||||
|
||||
```javascript
|
||||
// Validate email
|
||||
function isValidEmail(email) {
|
||||
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return regex.test(email);
|
||||
}
|
||||
|
||||
// Validate and sanitize
|
||||
function sanitizeInput(input) {
|
||||
// Remove dangerous characters
|
||||
return input.replace(/[<>\"']/g, '');
|
||||
}
|
||||
|
||||
// Whitelist approach
|
||||
function isValidUsername(username) {
|
||||
return /^[a-zA-Z0-9_]{3,20}$/.test(username);
|
||||
}
|
||||
```
|
||||
|
||||
### Output Encoding
|
||||
|
||||
Encode data based on context:
|
||||
- **HTML context**: Escape `< > & " '`
|
||||
- **JavaScript context**: Use JSON.stringify()
|
||||
- **URL context**: Use encodeURIComponent()
|
||||
- **CSS context**: Escape special characters
|
||||
|
||||
### Secure Storage
|
||||
|
||||
```javascript
|
||||
// ❌ Don't store sensitive data in localStorage
|
||||
localStorage.setItem('token', token); // XSS can access
|
||||
|
||||
// ✅ Use HttpOnly cookies
|
||||
res.cookie('token', token, {
|
||||
httpOnly: true,
|
||||
secure: true,
|
||||
sameSite: 'strict',
|
||||
maxAge: 3600000
|
||||
});
|
||||
|
||||
// ✅ For sensitive client-side data, encrypt first
|
||||
const encrypted = encrypt(sensitiveData, encryptionKey);
|
||||
sessionStorage.setItem('data', encrypted);
|
||||
```
|
||||
|
||||
### Rate Limiting
|
||||
|
||||
```javascript
|
||||
const rateLimit = require('express-rate-limit');
|
||||
|
||||
const limiter = rateLimit({
|
||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||
max: 100, // Limit each IP to 100 requests per windowMs
|
||||
message: 'Too many requests, please try again later'
|
||||
});
|
||||
|
||||
app.use('/api/', limiter);
|
||||
|
||||
// Stricter for auth endpoints
|
||||
const authLimiter = rateLimit({
|
||||
windowMs: 15 * 60 * 1000,
|
||||
max: 5,
|
||||
skipSuccessfulRequests: true
|
||||
});
|
||||
|
||||
app.use('/api/login', authLimiter);
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
```javascript
|
||||
// ❌ Expose internal details
|
||||
catch (error) {
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
|
||||
// ✅ Generic error message
|
||||
catch (error) {
|
||||
console.error(error); // Log internally
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
```
|
||||
|
||||
## Security Testing
|
||||
|
||||
### Tools
|
||||
- **OWASP ZAP**: Security scanner
|
||||
- **Burp Suite**: Web vulnerability scanner
|
||||
- **nmap**: Network scanner
|
||||
- **SQLMap**: SQL injection testing
|
||||
- **Nikto**: Web server scanner
|
||||
|
||||
### Checklist
|
||||
- [ ] HTTPS enforced everywhere
|
||||
- [ ] Security headers configured
|
||||
- [ ] Authentication implemented securely
|
||||
- [ ] Authorization checked on all endpoints
|
||||
- [ ] Input validation and sanitization
|
||||
- [ ] Output encoding
|
||||
- [ ] CSRF protection
|
||||
- [ ] SQL injection prevention
|
||||
- [ ] XSS prevention
|
||||
- [ ] Rate limiting
|
||||
- [ ] Secure session management
|
||||
- [ ] Secure password storage
|
||||
- [ ] File upload security
|
||||
- [ ] Error handling doesn't leak info
|
||||
- [ ] Dependencies up to date
|
||||
- [ ] Security logging and monitoring
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Authentication
|
||||
- Authenticator
|
||||
- Certificate authority
|
||||
- Challenge-response authentication
|
||||
- CIA
|
||||
- Cipher
|
||||
- Cipher suite
|
||||
- Ciphertext
|
||||
- Credential
|
||||
- Cross-site request forgery (CSRF)
|
||||
- Cross-site scripting (XSS)
|
||||
- Cryptanalysis
|
||||
- Cryptography
|
||||
- Decryption
|
||||
- Denial of Service (DoS)
|
||||
- Digital certificate
|
||||
- Digital signature
|
||||
- Distributed Denial of Service (DDoS)
|
||||
- Encryption
|
||||
- Federated identity
|
||||
- Fingerprinting
|
||||
- Firewall
|
||||
- HSTS
|
||||
- Identity provider (IdP)
|
||||
- MitM
|
||||
- Multi-factor authentication
|
||||
- Nonce
|
||||
- OWASP
|
||||
- Plaintext
|
||||
- Principle of least privilege
|
||||
- Privileged
|
||||
- Public-key cryptography
|
||||
- Relying party
|
||||
- Replay attack
|
||||
- Salt
|
||||
- Secure context
|
||||
- Secure Sockets Layer (SSL)
|
||||
- Session hijacking
|
||||
- Signature (security)
|
||||
- SQL injection
|
||||
- Symmetric-key cryptography
|
||||
- Transport Layer Security (TLS)
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
|
||||
- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)
|
||||
- [Security Headers](https://securityheaders.com/)
|
||||
- [SSL Labs](https://www.ssllabs.com/)
|
||||
@@ -1,615 +0,0 @@
|
||||
# Servers & Infrastructure Reference
|
||||
|
||||
Web servers, hosting, deployment, and infrastructure concepts.
|
||||
|
||||
## Web Servers
|
||||
|
||||
### Popular Web Servers
|
||||
|
||||
#### Nginx
|
||||
|
||||
High-performance web server and reverse proxy.
|
||||
|
||||
**Features**:
|
||||
- Load balancing
|
||||
- Reverse proxy
|
||||
- Static file serving
|
||||
- SSL/TLS termination
|
||||
|
||||
**Basic Configuration**:
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name example.com;
|
||||
|
||||
# Serve static files
|
||||
location / {
|
||||
root /var/www/html;
|
||||
index index.html;
|
||||
}
|
||||
|
||||
# Proxy to backend
|
||||
location /api {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
}
|
||||
|
||||
# SSL configuration
|
||||
listen 443 ssl;
|
||||
ssl_certificate /path/to/cert.pem;
|
||||
ssl_certificate_key /path/to/key.pem;
|
||||
}
|
||||
```
|
||||
|
||||
#### Apache HTTP Server
|
||||
|
||||
Widely-used web server.
|
||||
|
||||
**Features**:
|
||||
- .htaccess support
|
||||
- Module system
|
||||
- Virtual hosting
|
||||
|
||||
**Basic .htaccess**:
|
||||
```apache
|
||||
# Redirect to HTTPS
|
||||
RewriteEngine On
|
||||
RewriteCond %{HTTPS} off
|
||||
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
|
||||
|
||||
# Custom error pages
|
||||
ErrorDocument 404 /404.html
|
||||
|
||||
# Cache control
|
||||
<FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
|
||||
Header set Cache-Control "max-age=31536000, public"
|
||||
</FilesMatch>
|
||||
```
|
||||
|
||||
#### Node.js Servers
|
||||
|
||||
**Express.js**:
|
||||
```javascript
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
|
||||
app.use(express.json());
|
||||
app.use(express.static('public'));
|
||||
|
||||
app.get('/api/users', (req, res) => {
|
||||
res.json({ users: [] });
|
||||
});
|
||||
|
||||
app.listen(3000, () => {
|
||||
console.log('Server running on port 3000');
|
||||
});
|
||||
```
|
||||
|
||||
**Built-in HTTP Server**:
|
||||
```javascript
|
||||
const http = require('http');
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' });
|
||||
res.end('<h1>Hello World</h1>');
|
||||
});
|
||||
|
||||
server.listen(3000);
|
||||
```
|
||||
|
||||
## Hosting Options
|
||||
|
||||
### Static Hosting
|
||||
|
||||
For static sites (HTML, CSS, JS).
|
||||
|
||||
**Platforms**:
|
||||
- **Vercel**: Automatic deployments, serverless functions
|
||||
- **Netlify**: Build automation, edge functions
|
||||
- **GitHub Pages**: Free for public repos
|
||||
- **Cloudflare Pages**: Fast global CDN
|
||||
- **AWS S3 + CloudFront**: Scalable, requires setup
|
||||
|
||||
**Deployment**:
|
||||
```bash
|
||||
# Vercel
|
||||
npx vercel
|
||||
|
||||
# Netlify
|
||||
npx netlify deploy --prod
|
||||
|
||||
# GitHub Pages (via Git)
|
||||
git push origin main
|
||||
```
|
||||
|
||||
### Platform as a Service (PaaS)
|
||||
|
||||
Managed application hosting.
|
||||
|
||||
**Platforms**:
|
||||
- **Heroku**: Easy deployment, add-ons
|
||||
- **Railway**: Modern developer experience
|
||||
- **Render**: Unified platform
|
||||
- **Google App Engine**: Automatic scaling
|
||||
- **Azure App Service**: Microsoft cloud
|
||||
|
||||
**Example (Heroku)**:
|
||||
```bash
|
||||
# Deploy
|
||||
git push heroku main
|
||||
|
||||
# Scale
|
||||
heroku ps:scale web=2
|
||||
|
||||
# View logs
|
||||
heroku logs --tail
|
||||
```
|
||||
|
||||
### Infrastructure as a Service (IaaS)
|
||||
|
||||
Virtual servers (more control, more setup).
|
||||
|
||||
**Providers**:
|
||||
- **AWS EC2**: Amazon virtual servers
|
||||
- **Google Compute Engine**: Google VMs
|
||||
- **DigitalOcean Droplets**: Simple VPS
|
||||
- **Linode**: Developer-friendly VPS
|
||||
|
||||
### Containerization
|
||||
|
||||
**Docker**:
|
||||
```dockerfile
|
||||
# Dockerfile
|
||||
FROM node:18-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci --only=production
|
||||
COPY . .
|
||||
EXPOSE 3000
|
||||
CMD ["node", "server.js"]
|
||||
```
|
||||
|
||||
```bash
|
||||
# Build image
|
||||
docker build -t my-app .
|
||||
|
||||
# Run container
|
||||
docker run -p 3000:3000 my-app
|
||||
```
|
||||
|
||||
**Docker Compose**:
|
||||
```yaml
|
||||
version: '3'
|
||||
services:
|
||||
web:
|
||||
build: .
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
- DATABASE_URL=postgres://db:5432
|
||||
db:
|
||||
image: postgres:15
|
||||
environment:
|
||||
POSTGRES_PASSWORD: password
|
||||
```
|
||||
|
||||
### Kubernetes
|
||||
|
||||
Container orchestration platform.
|
||||
|
||||
**Concepts**:
|
||||
- **Pods**: Smallest deployable units
|
||||
- **Services**: Expose pods
|
||||
- **Deployments**: Manage replicas
|
||||
- **Ingress**: HTTP routing
|
||||
|
||||
## Content Delivery Network (CDN)
|
||||
|
||||
Distributed network for fast content delivery.
|
||||
|
||||
**Benefits**:
|
||||
- Faster load times
|
||||
- Reduced server load
|
||||
- DDoS protection
|
||||
- Geographic distribution
|
||||
|
||||
**Popular CDNs**:
|
||||
- **Cloudflare**: Free tier, DDoS protection
|
||||
- **AWS CloudFront**: Amazon CDN
|
||||
- **Fastly**: Edge computing
|
||||
- **Akamai**: Enterprise CDN
|
||||
|
||||
**CDN for Libraries**:
|
||||
```html
|
||||
<!-- CDN-hosted library -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
|
||||
```
|
||||
|
||||
## Domain Name System (DNS)
|
||||
|
||||
Translates domain names to IP addresses.
|
||||
|
||||
### DNS Records
|
||||
|
||||
| Type | Purpose | Example |
|
||||
|------|---------|---------|
|
||||
| A | IPv4 address | `example.com → 192.0.2.1` |
|
||||
| AAAA | IPv6 address | `example.com → 2001:db8::1` |
|
||||
| CNAME | Alias to another domain | `www → example.com` |
|
||||
| MX | Mail server | `mail.example.com` |
|
||||
| TXT | Text information | SPF, DKIM records |
|
||||
| NS | Nameserver | DNS delegation |
|
||||
|
||||
**DNS Lookup**:
|
||||
```bash
|
||||
# Command line
|
||||
nslookup example.com
|
||||
dig example.com
|
||||
|
||||
# JavaScript (not direct DNS, but IP lookup)
|
||||
fetch('https://dns.google/resolve?name=example.com')
|
||||
```
|
||||
|
||||
### DNS Propagation
|
||||
|
||||
Time for DNS changes to spread globally (typically 24-48 hours).
|
||||
|
||||
## SSL/TLS Certificates
|
||||
|
||||
Encrypt data between client and server.
|
||||
|
||||
### Certificate Types
|
||||
|
||||
- **Domain Validation (DV)**: Basic, automated
|
||||
- **Organization Validation (OV)**: Verified business
|
||||
- **Extended Validation (EV)**: Highest validation
|
||||
|
||||
### Getting Certificates
|
||||
|
||||
**Let's Encrypt** (Free):
|
||||
```bash
|
||||
# Certbot
|
||||
sudo certbot --nginx -d example.com
|
||||
```
|
||||
|
||||
**Cloudflare** (Free with Cloudflare DNS)
|
||||
|
||||
### HTTPS Configuration
|
||||
|
||||
```nginx
|
||||
# Nginx HTTPS
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name example.com;
|
||||
|
||||
ssl_certificate /path/to/fullchain.pem;
|
||||
ssl_certificate_key /path/to/privkey.pem;
|
||||
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!MD5;
|
||||
}
|
||||
|
||||
# Redirect HTTP to HTTPS
|
||||
server {
|
||||
listen 80;
|
||||
server_name example.com;
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
```
|
||||
|
||||
## Load Balancing
|
||||
|
||||
Distribute traffic across multiple servers.
|
||||
|
||||
### Load Balancing Algorithms
|
||||
|
||||
- **Round Robin**: Rotate through servers
|
||||
- **Least Connections**: Send to server with fewest connections
|
||||
- **IP Hash**: Route based on client IP
|
||||
- **Weighted**: Servers have different capacities
|
||||
|
||||
**Nginx Load Balancer**:
|
||||
```nginx
|
||||
upstream backend {
|
||||
server server1.example.com weight=3;
|
||||
server server2.example.com;
|
||||
server server3.example.com;
|
||||
}
|
||||
|
||||
server {
|
||||
location / {
|
||||
proxy_pass http://backend;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Reverse Proxy
|
||||
|
||||
Server that forwards requests to backend servers.
|
||||
|
||||
**Benefits**:
|
||||
- Load balancing
|
||||
- SSL termination
|
||||
- Caching
|
||||
- Security (hide backend)
|
||||
|
||||
**Nginx Reverse Proxy**:
|
||||
```nginx
|
||||
server {
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Caching Strategies
|
||||
|
||||
### Browser Caching
|
||||
|
||||
```http
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
```
|
||||
|
||||
### Server-Side Caching
|
||||
|
||||
**Redis**:
|
||||
```javascript
|
||||
const redis = require('redis');
|
||||
const client = redis.createClient();
|
||||
|
||||
// Cache data
|
||||
await client.set('user:1', JSON.stringify(user), {
|
||||
EX: 3600 // Expire after 1 hour
|
||||
});
|
||||
|
||||
// Retrieve cached data
|
||||
const cached = await client.get('user:1');
|
||||
```
|
||||
|
||||
### CDN Caching
|
||||
|
||||
Static assets cached at edge locations.
|
||||
|
||||
## Environment Variables
|
||||
|
||||
Configuration without hardcoding.
|
||||
|
||||
```bash
|
||||
# .env file
|
||||
DATABASE_URL=postgresql://localhost/mydb
|
||||
API_KEY=secret-key-here
|
||||
NODE_ENV=production
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Access in Node.js
|
||||
require('dotenv').config();
|
||||
const dbUrl = process.env.DATABASE_URL;
|
||||
```
|
||||
|
||||
**Best Practices**:
|
||||
- Never commit .env to Git
|
||||
- Use .env.example as template
|
||||
- Different values per environment
|
||||
- Secure secret values
|
||||
|
||||
## Deployment Strategies
|
||||
|
||||
### Continuous Deployment (CD)
|
||||
|
||||
Automatically deploy when code is pushed.
|
||||
|
||||
**GitHub Actions**:
|
||||
```yaml
|
||||
name: Deploy
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- run: npm ci
|
||||
- run: npm run build
|
||||
- run: npm run deploy
|
||||
```
|
||||
|
||||
### Blue-Green Deployment
|
||||
|
||||
Two identical environments, switch traffic.
|
||||
|
||||
### Canary Deployment
|
||||
|
||||
Gradually roll out to subset of users.
|
||||
|
||||
### Rolling Deployment
|
||||
|
||||
Update instances incrementally.
|
||||
|
||||
## Process Managers
|
||||
|
||||
Keep applications running.
|
||||
|
||||
### PM2
|
||||
|
||||
```bash
|
||||
# Start application
|
||||
pm2 start app.js
|
||||
|
||||
# Start with name
|
||||
pm2 start app.js --name my-app
|
||||
|
||||
# Cluster mode (use all CPUs)
|
||||
pm2 start app.js -i max
|
||||
|
||||
# Monitor
|
||||
pm2 monit
|
||||
|
||||
# Restart
|
||||
pm2 restart my-app
|
||||
|
||||
# Stop
|
||||
pm2 stop my-app
|
||||
|
||||
# Logs
|
||||
pm2 logs
|
||||
|
||||
# Startup script (restart on reboot)
|
||||
pm2 startup
|
||||
pm2 save
|
||||
```
|
||||
|
||||
### systemd
|
||||
|
||||
Linux service manager.
|
||||
|
||||
```ini
|
||||
# /etc/systemd/system/myapp.service
|
||||
[Unit]
|
||||
Description=My Node App
|
||||
|
||||
[Service]
|
||||
ExecStart=/usr/bin/node /path/to/app.js
|
||||
Restart=always
|
||||
User=nobody
|
||||
Environment=NODE_ENV=production
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
```bash
|
||||
sudo systemctl enable myapp
|
||||
sudo systemctl start myapp
|
||||
sudo systemctl status myapp
|
||||
```
|
||||
|
||||
## Monitoring & Logging
|
||||
|
||||
### Application Monitoring
|
||||
|
||||
- **New Relic**: APM, monitoring
|
||||
- **Datadog**: Infrastructure monitoring
|
||||
- **Grafana**: Visualization
|
||||
- **Prometheus**: Metrics collection
|
||||
|
||||
### Log Aggregation
|
||||
|
||||
- **Elasticsearch + Kibana**: Search and visualize logs
|
||||
- **Splunk**: Enterprise log management
|
||||
- **Papertrail**: Cloud logging
|
||||
|
||||
### Uptime Monitoring
|
||||
|
||||
- **UptimeRobot**: Free uptime checks
|
||||
- **Pingdom**: Monitoring service
|
||||
- **StatusCake**: Website monitoring
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
### Server Hardening
|
||||
|
||||
- Keep software updated
|
||||
- Use firewall (ufw, iptables)
|
||||
- Disable root SSH login
|
||||
- Use SSH keys (not passwords)
|
||||
- Limit user permissions
|
||||
- Regular backups
|
||||
|
||||
### Application Security
|
||||
|
||||
- Use HTTPS everywhere
|
||||
- Implement rate limiting
|
||||
- Validate all input
|
||||
- Use security headers
|
||||
- Keep dependencies updated
|
||||
- Regular security audits
|
||||
|
||||
## Backup Strategies
|
||||
|
||||
### Database Backups
|
||||
|
||||
```bash
|
||||
# PostgreSQL
|
||||
pg_dump dbname > backup.sql
|
||||
|
||||
# MySQL
|
||||
mysqldump -u user -p dbname > backup.sql
|
||||
|
||||
# MongoDB
|
||||
mongodump --db mydb --out /backup/
|
||||
```
|
||||
|
||||
### Automated Backups
|
||||
|
||||
- Daily backups
|
||||
- Multiple retention periods
|
||||
- Off-site storage
|
||||
- Test restores regularly
|
||||
|
||||
## Scalability
|
||||
|
||||
### Vertical Scaling
|
||||
|
||||
Increase server resources (CPU, RAM).
|
||||
|
||||
**Pros**: Simple
|
||||
**Cons**: Limited, expensive
|
||||
|
||||
### Horizontal Scaling
|
||||
|
||||
Add more servers.
|
||||
|
||||
**Pros**: Unlimited scaling
|
||||
**Cons**: Complex, requires load balancer
|
||||
|
||||
### Database Scaling
|
||||
|
||||
- **Replication**: Read replicas
|
||||
- **Sharding**: Split data across databases
|
||||
- **Caching**: Reduce database load
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Apache
|
||||
- Bandwidth
|
||||
- CDN
|
||||
- Cloud computing
|
||||
- CNAME
|
||||
- DNS
|
||||
- Domain
|
||||
- Domain name
|
||||
- Firewall
|
||||
- Host
|
||||
- Hotlink
|
||||
- IP address
|
||||
- ISP
|
||||
- Latency
|
||||
- localhost
|
||||
- Nginx
|
||||
- Origin
|
||||
- Port
|
||||
- Proxy servers
|
||||
- Round Trip Time (RTT)
|
||||
- Server
|
||||
- Site
|
||||
- TLD
|
||||
- Web server
|
||||
- Website
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Nginx Documentation](https://nginx.org/en/docs/)
|
||||
- [Docker Documentation](https://docs.docker.com/)
|
||||
- [AWS Documentation](https://docs.aws.amazon.com/)
|
||||
- [Let's Encrypt](https://letsencrypt.org/)
|
||||
- [PM2 Documentation](https://pm2.keymetrics.io/docs/)
|
||||
@@ -1,654 +0,0 @@
|
||||
# Web APIs & DOM Reference
|
||||
|
||||
Comprehensive reference for the Document Object Model (DOM) and Web APIs available in modern browsers.
|
||||
|
||||
## Document Object Model (DOM)
|
||||
|
||||
### What is the DOM?
|
||||
The DOM is a programming interface for HTML and XML documents. It represents the page structure as a tree of objects that can be manipulated with JavaScript.
|
||||
|
||||
**DOM Tree Structure**:
|
||||
```
|
||||
Document
|
||||
└── html
|
||||
├── head
|
||||
│ ├── title
|
||||
│ └── meta
|
||||
└── body
|
||||
├── header
|
||||
├── main
|
||||
└── footer
|
||||
```
|
||||
|
||||
### DOM Node Types
|
||||
|
||||
| Node Type | Description | Example |
|
||||
|-----------|-------------|---------|
|
||||
| Element | HTML element | `<div>`, `<p>` |
|
||||
| Text | Text content | Text inside elements |
|
||||
| Comment | HTML comment | `<!-- comment -->` |
|
||||
| Document | Root document | `document` |
|
||||
| DocumentFragment | Lightweight document | For batch operations |
|
||||
|
||||
### Selecting Elements
|
||||
|
||||
```javascript
|
||||
// By ID
|
||||
const element = document.getElementById('myId');
|
||||
|
||||
// By class name (returns HTMLCollection)
|
||||
const elements = document.getElementsByClassName('myClass');
|
||||
|
||||
// By tag name (returns HTMLCollection)
|
||||
const divs = document.getElementsByTagName('div');
|
||||
|
||||
// Query selector (first match)
|
||||
const first = document.querySelector('.myClass');
|
||||
const advanced = document.querySelector('div.container > p:first-child');
|
||||
|
||||
// Query selector all (returns NodeList)
|
||||
const all = document.querySelectorAll('.myClass');
|
||||
|
||||
// Special selectors
|
||||
document.body; // Body element
|
||||
document.head; // Head element
|
||||
document.documentElement; // <html> element
|
||||
```
|
||||
|
||||
### Traversing the DOM
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector('#myElement');
|
||||
|
||||
// Parent
|
||||
element.parentElement;
|
||||
element.parentNode;
|
||||
|
||||
// Children
|
||||
element.children; // HTMLCollection of child elements
|
||||
element.childNodes; // NodeList of all child nodes
|
||||
element.firstElementChild;
|
||||
element.lastElementChild;
|
||||
|
||||
// Siblings
|
||||
element.nextElementSibling;
|
||||
element.previousElementSibling;
|
||||
|
||||
// Closest ancestor matching selector
|
||||
element.closest('.container');
|
||||
|
||||
// Check if element contains another
|
||||
parent.contains(child); // true/false
|
||||
```
|
||||
|
||||
### Creating and Modifying Elements
|
||||
|
||||
```javascript
|
||||
// Create element
|
||||
const div = document.createElement('div');
|
||||
const text = document.createTextNode('Hello');
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
// Set content
|
||||
div.textContent = 'Plain text'; // Safe (escaped)
|
||||
div.innerHTML = '<strong>HTML</strong>'; // Can be unsafe with user input
|
||||
|
||||
// Set attributes
|
||||
div.setAttribute('id', 'myDiv');
|
||||
div.setAttribute('class', 'container');
|
||||
div.id = 'myDiv'; // Direct property
|
||||
div.className = 'container';
|
||||
div.classList.add('active');
|
||||
div.classList.remove('inactive');
|
||||
div.classList.toggle('visible');
|
||||
div.classList.contains('active'); // true/false
|
||||
|
||||
// Set styles
|
||||
div.style.color = 'red';
|
||||
div.style.backgroundColor = 'blue';
|
||||
div.style.cssText = 'color: red; background: blue;';
|
||||
|
||||
// Data attributes
|
||||
div.dataset.userId = '123'; // Sets data-user-id="123"
|
||||
div.getAttribute('data-user-id'); // "123"
|
||||
|
||||
// Insert into DOM
|
||||
parent.appendChild(div); // Add as last child
|
||||
parent.insertBefore(div, referenceNode); // Insert before reference
|
||||
parent.prepend(div); // Add as first child (modern)
|
||||
parent.append(div); // Add as last child (modern)
|
||||
element.after(div); // Insert after element
|
||||
element.before(div); // Insert before element
|
||||
element.replaceWith(newElement); // Replace element
|
||||
|
||||
// Remove from DOM
|
||||
element.remove(); // Modern way
|
||||
parent.removeChild(element); // Old way
|
||||
|
||||
// Clone element
|
||||
const clone = element.cloneNode(true); // true = deep clone (with children)
|
||||
```
|
||||
|
||||
### Element Properties
|
||||
|
||||
```javascript
|
||||
// Dimensions and position
|
||||
element.offsetWidth; // Width including border
|
||||
element.offsetHeight; // Height including border
|
||||
element.clientWidth; // Width excluding border
|
||||
element.clientHeight; // Height excluding border
|
||||
element.scrollWidth; // Total scrollable width
|
||||
element.scrollHeight; // Total scrollable height
|
||||
element.offsetTop; // Top position relative to offsetParent
|
||||
element.offsetLeft; // Left position relative to offsetParent
|
||||
|
||||
// Bounding box
|
||||
const rect = element.getBoundingClientRect();
|
||||
// Returns: { x, y, width, height, top, right, bottom, left }
|
||||
|
||||
// Scroll position
|
||||
element.scrollTop; // Vertical scroll position
|
||||
element.scrollLeft; // Horizontal scroll position
|
||||
element.scrollTo(0, 100); // Scroll to position
|
||||
element.scrollIntoView(); // Scroll element into view
|
||||
|
||||
// Check visibility
|
||||
element.checkVisibility(); // Modern API
|
||||
```
|
||||
|
||||
## Event Handling
|
||||
|
||||
### Adding Event Listeners
|
||||
|
||||
```javascript
|
||||
// addEventListener (modern, recommended)
|
||||
element.addEventListener('click', handleClick);
|
||||
element.addEventListener('click', handleClick, { once: true }); // Remove after first trigger
|
||||
|
||||
function handleClick(event) {
|
||||
console.log('Clicked!', event);
|
||||
}
|
||||
|
||||
// Event options
|
||||
element.addEventListener('scroll', handleScroll, {
|
||||
passive: true, // Won't call preventDefault()
|
||||
capture: false, // Bubble phase (default)
|
||||
once: true // Remove after one call
|
||||
});
|
||||
|
||||
// Remove event listener
|
||||
element.removeEventListener('click', handleClick);
|
||||
```
|
||||
|
||||
### Common Events
|
||||
|
||||
| Category | Events |
|
||||
|----------|--------|
|
||||
| Mouse | `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`, `contextmenu` |
|
||||
| Keyboard | `keydown`, `keyup`, `keypress` (deprecated) |
|
||||
| Form | `submit`, `change`, `input`, `focus`, `blur`, `invalid` |
|
||||
| Window | `load`, `DOMContentLoaded`, `resize`, `scroll`, `beforeunload`, `unload` |
|
||||
| Touch | `touchstart`, `touchmove`, `touchend`, `touchcancel` |
|
||||
| Drag | `drag`, `dragstart`, `dragend`, `dragover`, `drop` |
|
||||
| Media | `play`, `pause`, `ended`, `timeupdate`, `loadeddata` |
|
||||
| Animation | `animationstart`, `animationend`, `animationiteration` |
|
||||
| Transition | `transitionstart`, `transitionend` |
|
||||
|
||||
### Event Object
|
||||
|
||||
```javascript
|
||||
element.addEventListener('click', (event) => {
|
||||
// Target elements
|
||||
event.target; // Element that triggered event
|
||||
event.currentTarget; // Element with listener attached
|
||||
|
||||
// Mouse position
|
||||
event.clientX; // X relative to viewport
|
||||
event.clientY; // Y relative to viewport
|
||||
event.pageX; // X relative to document
|
||||
event.pageY; // Y relative to document
|
||||
|
||||
// Keyboard
|
||||
event.key; // 'a', 'Enter', 'ArrowUp'
|
||||
event.code; // 'KeyA', 'Enter', 'ArrowUp'
|
||||
event.ctrlKey; // true if Ctrl pressed
|
||||
event.shiftKey; // true if Shift pressed
|
||||
event.altKey; // true if Alt pressed
|
||||
event.metaKey; // true if Meta/Cmd pressed
|
||||
|
||||
// Control event flow
|
||||
event.preventDefault(); // Prevent default action
|
||||
event.stopPropagation(); // Stop bubbling
|
||||
event.stopImmediatePropagation(); // Stop other listeners
|
||||
});
|
||||
```
|
||||
|
||||
### Event Delegation
|
||||
|
||||
Handle events on parent instead of individual children:
|
||||
|
||||
```javascript
|
||||
// Instead of adding listener to each button
|
||||
document.querySelector('.container').addEventListener('click', (event) => {
|
||||
if (event.target.matches('button')) {
|
||||
console.log('Button clicked:', event.target);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Web Storage APIs
|
||||
|
||||
### LocalStorage
|
||||
|
||||
Persistent storage (no expiration):
|
||||
|
||||
```javascript
|
||||
// Set item
|
||||
localStorage.setItem('key', 'value');
|
||||
localStorage.setItem('user', JSON.stringify({ name: 'John' }));
|
||||
|
||||
// Get item
|
||||
const value = localStorage.getItem('key');
|
||||
const user = JSON.parse(localStorage.getItem('user'));
|
||||
|
||||
// Remove item
|
||||
localStorage.removeItem('key');
|
||||
|
||||
// Clear all
|
||||
localStorage.clear();
|
||||
|
||||
// Get key by index
|
||||
localStorage.key(0);
|
||||
|
||||
// Number of items
|
||||
localStorage.length;
|
||||
|
||||
// Iterate all items
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
const value = localStorage.getItem(key);
|
||||
console.log(key, value);
|
||||
}
|
||||
```
|
||||
|
||||
### SessionStorage
|
||||
|
||||
Storage cleared when tab closes:
|
||||
|
||||
```javascript
|
||||
// Same API as localStorage
|
||||
sessionStorage.setItem('key', 'value');
|
||||
sessionStorage.getItem('key');
|
||||
sessionStorage.removeItem('key');
|
||||
sessionStorage.clear();
|
||||
```
|
||||
|
||||
**Storage Limits**: ~5-10MB per origin
|
||||
|
||||
## Fetch API
|
||||
|
||||
Modern API for HTTP requests:
|
||||
|
||||
```javascript
|
||||
// Basic GET request
|
||||
fetch('https://api.example.com/data')
|
||||
.then(response => response.json())
|
||||
.then(data => console.log(data))
|
||||
.catch(error => console.error(error));
|
||||
|
||||
// Async/await
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch('https://api.example.com/data');
|
||||
|
||||
// Check if successful
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// POST request with JSON
|
||||
fetch('https://api.example.com/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ name: 'John', age: 30 })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
|
||||
// With various options
|
||||
fetch(url, {
|
||||
method: 'GET', // GET, POST, PUT, DELETE, etc.
|
||||
headers: {
|
||||
'Authorization': 'Bearer token',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data), // For POST/PUT
|
||||
mode: 'cors', // cors, no-cors, same-origin
|
||||
credentials: 'include', // include, same-origin, omit
|
||||
cache: 'no-cache', // default, no-cache, reload, force-cache
|
||||
redirect: 'follow', // follow, error, manual
|
||||
referrerPolicy: 'no-referrer' // no-referrer, origin, etc.
|
||||
});
|
||||
|
||||
// Response methods
|
||||
const text = await response.text(); // Plain text
|
||||
const json = await response.json(); // JSON
|
||||
const blob = await response.blob(); // Binary data
|
||||
const arrayBuffer = await response.arrayBuffer(); // ArrayBuffer
|
||||
const formData = await response.formData(); // FormData
|
||||
```
|
||||
|
||||
## Other Important Web APIs
|
||||
|
||||
### Console API
|
||||
|
||||
```javascript
|
||||
console.log('Message'); // Log message
|
||||
console.error('Error'); // Error message (red)
|
||||
console.warn('Warning'); // Warning message (yellow)
|
||||
console.info('Info'); // Info message
|
||||
console.table([{ a: 1 }, { a: 2 }]); // Table format
|
||||
console.group('Group'); // Start group
|
||||
console.groupEnd(); // End group
|
||||
console.time('timer'); // Start timer
|
||||
console.timeEnd('timer'); // End timer and log duration
|
||||
console.clear(); // Clear console
|
||||
console.assert(condition, 'Error message'); // Assert condition
|
||||
```
|
||||
|
||||
### Timers
|
||||
|
||||
```javascript
|
||||
// Execute once after delay
|
||||
const timeoutId = setTimeout(() => {
|
||||
console.log('Executed after 1 second');
|
||||
}, 1000);
|
||||
|
||||
// Cancel timeout
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// Execute repeatedly
|
||||
const intervalId = setInterval(() => {
|
||||
console.log('Executed every second');
|
||||
}, 1000);
|
||||
|
||||
// Cancel interval
|
||||
clearInterval(intervalId);
|
||||
|
||||
// RequestAnimationFrame (for animations)
|
||||
function animate() {
|
||||
// Animation code
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
```
|
||||
|
||||
### URL API
|
||||
|
||||
```javascript
|
||||
const url = new URL('https://example.com:8080/path?query=value#hash');
|
||||
|
||||
url.protocol; // 'https:'
|
||||
url.hostname; // 'example.com'
|
||||
url.port; // '8080'
|
||||
url.pathname; // '/path'
|
||||
url.search; // '?query=value'
|
||||
url.hash; // '#hash'
|
||||
url.href; // Full URL
|
||||
|
||||
// URL parameters
|
||||
url.searchParams.get('query'); // 'value'
|
||||
url.searchParams.set('newParam', 'newValue');
|
||||
url.searchParams.append('query', 'another');
|
||||
url.searchParams.delete('query');
|
||||
url.searchParams.has('query'); // true/false
|
||||
|
||||
// Convert to string
|
||||
url.toString(); // Full URL
|
||||
```
|
||||
|
||||
### FormData API
|
||||
|
||||
```javascript
|
||||
// Create FormData from form
|
||||
const form = document.querySelector('form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Create FormData manually
|
||||
const data = new FormData();
|
||||
data.append('username', 'john');
|
||||
data.append('file', fileInput.files[0]);
|
||||
|
||||
// Get values
|
||||
data.get('username'); // 'john'
|
||||
data.getAll('files'); // Array of all 'files' values
|
||||
|
||||
// Iterate
|
||||
for (const [key, value] of data.entries()) {
|
||||
console.log(key, value);
|
||||
}
|
||||
|
||||
// Send with fetch
|
||||
fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
body: formData // Don't set Content-Type header
|
||||
});
|
||||
```
|
||||
|
||||
### Intersection Observer API
|
||||
|
||||
Detect when element enters viewport:
|
||||
|
||||
```javascript
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
console.log('Element is visible');
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5, // 50% visible
|
||||
rootMargin: '0px'
|
||||
});
|
||||
|
||||
observer.observe(element);
|
||||
observer.unobserve(element);
|
||||
observer.disconnect(); // Stop observing all
|
||||
```
|
||||
|
||||
### Mutation Observer API
|
||||
|
||||
Watch for DOM changes:
|
||||
|
||||
```javascript
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(mutation => {
|
||||
console.log('DOM changed:', mutation.type);
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(element, {
|
||||
attributes: true, // Watch attribute changes
|
||||
childList: true, // Watch child elements
|
||||
subtree: true, // Watch all descendants
|
||||
characterData: true // Watch text content
|
||||
});
|
||||
|
||||
observer.disconnect(); // Stop observing
|
||||
```
|
||||
|
||||
### Geolocation API
|
||||
|
||||
```javascript
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
console.log(position.coords.latitude);
|
||||
console.log(position.coords.longitude);
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error getting location:', error);
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 5000,
|
||||
maximumAge: 0
|
||||
}
|
||||
);
|
||||
|
||||
// Watch position (continuous updates)
|
||||
const watchId = navigator.geolocation.watchPosition(callback);
|
||||
navigator.geolocation.clearWatch(watchId);
|
||||
```
|
||||
|
||||
### Web Workers
|
||||
|
||||
Run JavaScript in background thread:
|
||||
|
||||
```javascript
|
||||
// Main thread
|
||||
const worker = new Worker('worker.js');
|
||||
|
||||
worker.postMessage({ data: 'Hello' });
|
||||
|
||||
worker.onmessage = (event) => {
|
||||
console.log('From worker:', event.data);
|
||||
};
|
||||
|
||||
worker.onerror = (error) => {
|
||||
console.error('Worker error:', error);
|
||||
};
|
||||
|
||||
worker.terminate(); // Stop worker
|
||||
|
||||
// worker.js
|
||||
self.onmessage = (event) => {
|
||||
console.log('From main:', event.data);
|
||||
self.postMessage({ result: 'Done' });
|
||||
};
|
||||
```
|
||||
|
||||
### Canvas API
|
||||
|
||||
Draw graphics:
|
||||
|
||||
```javascript
|
||||
const canvas = document.querySelector('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Draw rectangle
|
||||
ctx.fillStyle = 'blue';
|
||||
ctx.fillRect(10, 10, 100, 50);
|
||||
|
||||
// Draw circle
|
||||
ctx.beginPath();
|
||||
ctx.arc(100, 100, 50, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'red';
|
||||
ctx.fill();
|
||||
|
||||
// Draw text
|
||||
ctx.font = '20px Arial';
|
||||
ctx.fillText('Hello', 10, 50);
|
||||
|
||||
// Draw image
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0);
|
||||
};
|
||||
img.src = 'image.jpg';
|
||||
```
|
||||
|
||||
### IndexedDB
|
||||
|
||||
Client-side database for large amounts of structured data:
|
||||
|
||||
```javascript
|
||||
// Open database
|
||||
const request = indexedDB.open('MyDatabase', 1);
|
||||
|
||||
request.onerror = () => console.error('Database error');
|
||||
|
||||
request.onsuccess = (event) => {
|
||||
const db = event.target.result;
|
||||
// Use database
|
||||
};
|
||||
|
||||
request.onupgradeneeded = (event) => {
|
||||
const db = event.target.result;
|
||||
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
|
||||
objectStore.createIndex('name', 'name', { unique: false });
|
||||
};
|
||||
|
||||
// Add data
|
||||
const transaction = db.transaction(['users'], 'readwrite');
|
||||
const objectStore = transaction.objectStore('users');
|
||||
objectStore.add({ id: 1, name: 'John' });
|
||||
|
||||
// Get data
|
||||
const request = objectStore.get(1);
|
||||
request.onsuccess = () => console.log(request.result);
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Do's
|
||||
- ✅ Use `addEventListener` over inline event handlers
|
||||
- ✅ Remove event listeners when no longer needed
|
||||
- ✅ Use event delegation for dynamic content
|
||||
- ✅ Cache DOM queries in variables
|
||||
- ✅ Use `textContent` for plain text (safer than `innerHTML`)
|
||||
- ✅ Use DocumentFragment for batch DOM operations
|
||||
- ✅ Debounce/throttle scroll and resize handlers
|
||||
- ✅ Use `requestAnimationFrame` for animations
|
||||
- ✅ Validate and sanitize user input
|
||||
|
||||
### Don'ts
|
||||
- ❌ Use `innerHTML` with untrusted data (XSS risk)
|
||||
- ❌ Query DOM repeatedly in loops
|
||||
- ❌ Modify DOM in tight loops (batch operations)
|
||||
- ❌ Use `document.write()` (deprecated)
|
||||
- ❌ Use synchronous XMLHttpRequest
|
||||
- ❌ Store sensitive data in localStorage
|
||||
- ❌ Ignore error handling in async code
|
||||
- ❌ Block main thread with heavy computations
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- API
|
||||
- Application context
|
||||
- Beacon
|
||||
- Blink
|
||||
- Blink element
|
||||
- Browser
|
||||
- Browsing context
|
||||
- Buffer
|
||||
- Canvas
|
||||
- DOM (Document Object Model)
|
||||
- Document environment
|
||||
- Event
|
||||
- Expando
|
||||
- Global object
|
||||
- Global scope
|
||||
- Hoisting
|
||||
- IndexedDB
|
||||
- Interpolation
|
||||
- Node (DOM)
|
||||
- Shadow tree
|
||||
- WindowProxy
|
||||
- Wrapper
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [MDN DOM Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
|
||||
- [MDN Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)
|
||||
- [JavaScript.info DOM](https://javascript.info/document)
|
||||
@@ -1,265 +0,0 @@
|
||||
# Web Protocols & Standards Reference
|
||||
|
||||
Organizations, specifications, and standards that govern the web.
|
||||
|
||||
## Standards Organizations
|
||||
|
||||
### W3C (World Wide Web Consortium)
|
||||
|
||||
International community developing web standards.
|
||||
|
||||
**Key Standards**:
|
||||
- HTML
|
||||
- CSS
|
||||
- XML
|
||||
- SVG
|
||||
- WCAG (Accessibility)
|
||||
- Web APIs
|
||||
|
||||
**Website**: https://www.w3.org/
|
||||
|
||||
### WHATWG (Web Hypertext Application Technology Working Group)
|
||||
|
||||
Community maintaining HTML and DOM Living Standards.
|
||||
|
||||
**Key Standards**:
|
||||
- HTML Living Standard
|
||||
- DOM Living Standard
|
||||
- Fetch Standard
|
||||
- URL Standard
|
||||
|
||||
**Website**: https://whatwg.org/
|
||||
|
||||
### IETF (Internet Engineering Task Force)
|
||||
|
||||
Develops internet standards.
|
||||
|
||||
**Key Standards**:
|
||||
- HTTP
|
||||
- TLS
|
||||
- TCP/IP
|
||||
- DNS
|
||||
- WebRTC protocols
|
||||
|
||||
**Website**: https://www.ietf.org/
|
||||
|
||||
### ECMA International
|
||||
|
||||
Standards organization for information systems.
|
||||
|
||||
**Key Standards**:
|
||||
- ECMAScript (JavaScript)
|
||||
- JSON
|
||||
|
||||
**Website**: https://www.ecma-international.org/
|
||||
|
||||
### TC39 (Technical Committee 39)
|
||||
|
||||
ECMAScript standardization committee.
|
||||
|
||||
**Proposal Stages**:
|
||||
- **Stage 0**: Strawperson
|
||||
- **Stage 1**: Proposal
|
||||
- **Stage 2**: Draft
|
||||
- **Stage 3**: Candidate
|
||||
- **Stage 4**: Finished (included in next version)
|
||||
|
||||
### IANA (Internet Assigned Numbers Authority)
|
||||
|
||||
Coordinates internet protocol resources.
|
||||
|
||||
**Responsibilities**:
|
||||
- MIME types
|
||||
- Port numbers
|
||||
- Protocol parameters
|
||||
- TLDs (Top-Level Domains)
|
||||
|
||||
### ICANN (Internet Corporation for Assigned Names and Numbers)
|
||||
|
||||
Coordinates DNS and IP addresses.
|
||||
|
||||
## Web Standards
|
||||
|
||||
### HTML Standards
|
||||
|
||||
**HTML5 Features**:
|
||||
- Semantic elements (`<article>`, `<section>`, etc.)
|
||||
- Audio and video elements
|
||||
- Canvas and SVG
|
||||
- Form enhancements
|
||||
- LocalStorage and SessionStorage
|
||||
- Web Workers
|
||||
- Geolocation API
|
||||
|
||||
### CSS Specifications
|
||||
|
||||
**CSS Modules** (each specification is a module):
|
||||
- CSS Selectors Level 4
|
||||
- CSS Flexbox Level 1
|
||||
- CSS Grid Level 2
|
||||
- CSS Animations
|
||||
- CSS Transitions
|
||||
- CSS Custom Properties
|
||||
|
||||
### JavaScript Standards
|
||||
|
||||
**ECMAScript Versions**:
|
||||
- **ES5** (2009): Strict mode, JSON
|
||||
- **ES6/ES2015**: Classes, modules, arrow functions, promises
|
||||
- **ES2016**: Array.includes(), exponentiation operator (`**`)
|
||||
- **ES2017**: async/await, Object.values/entries
|
||||
- **ES2018**: Rest/spread for objects, async iteration
|
||||
- **ES2019**: Array.flat(), Object.fromEntries
|
||||
- **ES2020**: Optional chaining, nullish coalescing, BigInt
|
||||
- **ES2021**: Logical assignment, Promise.any
|
||||
- **ES2022**: Top-level await, class fields
|
||||
- **ES2023**: Array.findLast(), Object.groupBy
|
||||
|
||||
### Web API Specifications
|
||||
|
||||
**Common APIs**:
|
||||
- DOM (Document Object Model)
|
||||
- Fetch API
|
||||
- Service Workers
|
||||
- Web Storage
|
||||
- IndexedDB
|
||||
- WebRTC
|
||||
- WebGL
|
||||
- Web Audio API
|
||||
- Payment Request API
|
||||
- Web Authentication API
|
||||
|
||||
## Specifications
|
||||
|
||||
### Normative vs Non-Normative
|
||||
|
||||
- **Normative**: Required for compliance
|
||||
- **Non-normative**: Informative only (examples, notes)
|
||||
|
||||
### Specification Lifecycle
|
||||
|
||||
1. **Editor's Draft**: Work in progress
|
||||
2. **Working Draft**: Community review
|
||||
3. **Candidate Recommendation**: Implementation and testing
|
||||
4. **Proposed Recommendation**: Final review
|
||||
5. **W3C Recommendation**: Official standard
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
### Feature Detection
|
||||
|
||||
```javascript
|
||||
// Check feature support
|
||||
if ('serviceWorker' in navigator) {
|
||||
// Use service workers
|
||||
}
|
||||
|
||||
if (window.IntersectionObserver) {
|
||||
// Use Intersection Observer
|
||||
}
|
||||
|
||||
if (CSS.supports('display', 'grid')) {
|
||||
// Use CSS Grid
|
||||
}
|
||||
```
|
||||
|
||||
### Baseline Compatibility
|
||||
|
||||
Newly standardized features achieving widespread browser support.
|
||||
|
||||
**Widely Available**: Firefox, Chrome, Edge, Safari support
|
||||
|
||||
### Polyfills
|
||||
|
||||
Code providing modern functionality in older browsers:
|
||||
|
||||
```javascript
|
||||
// Promise polyfill
|
||||
if (!window.Promise) {
|
||||
window.Promise = PromisePolyfill;
|
||||
}
|
||||
|
||||
// Fetch polyfill
|
||||
if (!window.fetch) {
|
||||
window.fetch = fetchPolyfill;
|
||||
}
|
||||
```
|
||||
|
||||
### Progressive Enhancement
|
||||
|
||||
Build for basic browsers, enhance for modern ones:
|
||||
|
||||
```css
|
||||
/* Base styles */
|
||||
.container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Enhanced for Grid support */
|
||||
@supports (display: grid) {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## IDL (Interface Definition Language)
|
||||
|
||||
**WebIDL**: Defines Web APIs
|
||||
|
||||
```webidl
|
||||
interface Element : Node {
|
||||
readonly attribute DOMString? tagName;
|
||||
DOMString? getAttribute(DOMString qualifiedName);
|
||||
undefined setAttribute(DOMString qualifiedName, DOMString value);
|
||||
};
|
||||
```
|
||||
|
||||
## Specifications to Know
|
||||
|
||||
- **HTML Living Standard**
|
||||
- **CSS Specifications** (modular)
|
||||
- **ECMAScript Language Specification**
|
||||
- **HTTP/1.1 (RFC 9112)**
|
||||
- **HTTP/2 (RFC 9113)**
|
||||
- **HTTP/3 (RFC 9114)**
|
||||
- **TLS 1.3 (RFC 8446)**
|
||||
- **WebSocket Protocol (RFC 6455)**
|
||||
- **CORS (Fetch Standard)**
|
||||
- **Service Workers**
|
||||
- **Web Authentication (WebAuthn)**
|
||||
|
||||
## Glossary Terms
|
||||
|
||||
**Key Terms Covered**:
|
||||
- Baseline (compatibility)
|
||||
- BCP 47 language tag
|
||||
- ECMA
|
||||
- ECMAScript
|
||||
- HTML5
|
||||
- IANA
|
||||
- ICANN
|
||||
- IDL
|
||||
- IETF
|
||||
- ISO
|
||||
- ITU
|
||||
- Non-normative
|
||||
- Normative
|
||||
- Polyfill
|
||||
- Shim
|
||||
- Specification
|
||||
- W3C
|
||||
- WAI
|
||||
- WCAG
|
||||
- WHATWG
|
||||
- Web standards
|
||||
- WebIDL
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [W3C Standards](https://www.w3.org/TR/)
|
||||
- [WHATWG Living Standards](https://spec.whatwg.org/)
|
||||
- [MDN Web Docs](https://developer.mozilla.org/)
|
||||
- [Can I Use](https://caniuse.com/)
|
||||
- [TC39 Proposals](https://github.com/tc39/proposals)
|
||||
Reference in New Issue
Block a user