{"kind":"Skill","metadata":{"namespace":"community","name":"web-coder","version":"0.1.0"},"spec":{"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.","files":{"SKILL.md":"---\nname: web-coder\ndescription: '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.'\n---\n\n# Web Coder Skill\n\nTransform 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.\n\nLike 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.\n\n## When to Use This Skill\n\n- Working with HTML, CSS, JavaScript, or any web markup/styling/scripting\n- Implementing web APIs (DOM, Fetch, WebRTC, WebSockets, etc.)\n- Discussing or implementing HTTP/HTTPS protocols and networking concepts\n- Building accessible web applications (ARIA, WCAG compliance)\n- Optimizing web performance (caching, lazy loading, code splitting)\n- Implementing web security measures (CORS, CSP, authentication)\n- Working with web standards and specifications (W3C, WHATWG)\n- Debugging browser-specific issues or cross-browser compatibility\n- Setting up web servers, CDNs, or infrastructure\n- Discussing web development terminology with collaborators\n- Converting web-related requirements or descriptions into code\n\n## Prerequisites\n\n- Basic understanding of at least one area of web development\n- Access to web development tools (browser, editor, terminal)\n- Understanding that web development spans multiple disciplines\n\n## Core Competencies\n\nAs a web coder, you possess expert knowledge across 15 key domains:\n\n### 1. HTML \u0026 Markup\nSemantic HTML5, document structure, elements, attributes, accessibility tree, void elements, metadata, and proper markup patterns.\n\n**Key Concepts**: Semantic elements, document structure, forms, metadata\n**Reference**: [HTML \u0026 Markup Reference](references/html-markup.md)\n\n### 2. CSS \u0026 Styling\nCascading stylesheets, selectors, properties, layout systems (Flexbox, Grid), responsive design, preprocessors, and modern CSS features.\n\n**Key Concepts**: Selectors, box model, layouts, responsiveness, animations\n**Reference**: [CSS \u0026 Styling Reference](references/css-styling.md)\n\n### 3. JavaScript \u0026 Programming\nES6+, TypeScript, data types, functions, classes, async/await, closures, prototypes, and modern JavaScript patterns.\n\n**Key Concepts**: Types, control flow, functions, async patterns, modules\n**Reference**: [JavaScript \u0026 Programming Reference](references/javascript-programming.md)\n\n### 4. Web APIs \u0026 DOM\nDocument Object Model, Browser APIs, Web Storage, Service Workers, WebRTC, WebGL, and modern web platform features.\n\n**Key Concepts**: DOM manipulation, event handling, storage, communication\n**Reference**: [Web APIs \u0026 DOM Reference](references/web-apis-dom.md)\n\n### 5. HTTP \u0026 Networking\nHTTP/1.1, HTTP/2, HTTP/3, request/response cycle, headers, status codes, REST, caching, and network fundamentals.\n\n**Key Concepts**: Request methods, headers, status codes, caching strategies\n**Reference**: [HTTP \u0026 Networking Reference](references/http-networking.md)\n\n### 6. Security \u0026 Authentication\nHTTPS, TLS, authentication, authorization, CORS, CSP, XSS prevention, CSRF protection, and secure coding practices.\n\n**Key Concepts**: Encryption, certificates, same-origin policy, secure headers\n**Reference**: [Security \u0026 Authentication Reference](references/security-authentication.md)\n\n### 7. Performance \u0026 Optimization\nLoad times, rendering performance, Core Web Vitals, lazy loading, code splitting, minification, and performance budgets.\n\n**Key Concepts**: LCP, FID, CLS, caching, compression, optimization techniques\n**Reference**: [Performance \u0026 Optimization Reference](references/performance-optimization.md)\n\n### 8. Accessibility\nWCAG guidelines, ARIA roles and attributes, semantic HTML, screen reader compatibility, keyboard navigation, and inclusive design.\n\n**Key Concepts**: ARIA, semantic markup, keyboard access, screen readers\n**Reference**: [Accessibility Reference](references/accessibility.md)\n\n### 9. Web Protocols \u0026 Standards\nW3C specifications, WHATWG standards, ECMAScript versions, browser APIs, and web platform features.\n\n**Key Concepts**: Standards organizations, specifications, compatibility\n**Reference**: [Web Protocols \u0026 Standards Reference](references/web-protocols-standards.md)\n\n### 10. Browsers \u0026 Engines\nChrome (Blink), Firefox (Gecko), Safari (WebKit), Edge, rendering engines, browser dev tools, and cross-browser compatibility.\n\n**Key Concepts**: Rendering engines, browser differences, dev tools\n**Reference**: [Browsers \u0026 Engines Reference](references/browsers-engines.md)\n\n### 11. Development Tools\nVersion control (Git), IDEs, build tools, package managers, testing frameworks, CI/CD, and development workflows.\n\n**Key Concepts**: Git, npm, webpack, testing, debugging, automation\n**Reference**: [Development Tools Reference](references/development-tools.md)\n\n### 12. Data Formats \u0026 Encoding\nJSON, XML, Base64, character encodings (UTF-8, UTF-16), MIME types, and data serialization.\n\n**Key Concepts**: JSON, character encoding, data formats, serialization\n**Reference**: [Data Formats \u0026 Encoding Reference](references/data-formats-encoding.md)\n\n### 13. Media \u0026 Graphics\nCanvas, SVG, WebGL, image formats (JPEG, PNG, WebP), video/audio elements, and multimedia handling.\n\n**Key Concepts**: Canvas API, SVG, image optimization, video/audio\n**Reference**: [Media \u0026 Graphics Reference](references/media-graphics.md)\n\n### 14. Architecture \u0026 Patterns\nMVC, SPA, SSR, CSR, PWA, JAMstack, microservices, and web application architecture patterns.\n\n**Key Concepts**: Design patterns, architecture styles, rendering strategies\n**Reference**: [Architecture \u0026 Patterns Reference](references/architecture-patterns.md)\n\n### 15. Servers \u0026 Infrastructure\nWeb servers, CDN, DNS, proxies, load balancing, SSL/TLS certificates, and deployment strategies.\n\n**Key Concepts**: Server configuration, DNS, CDN, hosting, deployment\n**Reference**: [Servers \u0026 Infrastructure Reference](references/servers-infrastructure.md)\n\n## Working with Web Terminology\n\n### Accurate Translation\n\nWhen collaborators use web terminology, ensure accurate interpretation:\n\n#### Assess Terminology Accuracy\n1. **High confidence terms**: Standard terms like \"API\", \"DOM\", \"HTTP\" - use as stated\n2. **Ambiguous terms**: Terms with multiple meanings (e.g., \"Block\" - CSS box model vs code block)\n3. **Incorrect terms**: Misused terminology - translate to correct equivalent\n4. **Outdated terms**: Legacy terms - update to modern equivalents\n\n#### Common Terminology Issues\n\n| Collaborator Says | Likely Means | Correct Implementation |\n|-------------------|--------------|------------------------|\n| \"AJAX call\" | Asynchronous HTTP request | Use Fetch API or XMLHttpRequest |\n| \"Make it responsive\" | Mobile-friendly layout | Use media queries and responsive units |\n| \"Add SSL\" | Enable HTTPS | Configure TLS certificate |\n| \"Fix the cache\" | Update cache strategy | Adjust Cache-Control headers |\n| \"Speed up the site\" | Improve performance | Optimize assets, lazy load, minify |\n\n### Context-Aware Responses\n\nDifferent contexts require different interpretations:\n\n**Frontend Context**:\n- \"Performance\" → Client-side metrics (FCP, LCP, CLS)\n- \"State\" → Application state management (React, Vue, etc.)\n- \"Routing\" → Client-side routing (SPA navigation)\n\n**Backend Context**:\n- \"Performance\" → Server response time, throughput\n- \"State\" → Session management, database state\n- \"Routing\" → Server-side route handling\n\n**DevOps Context**:\n- \"Performance\" → Infrastructure scaling, load times\n- \"Cache\" → CDN caching, server-side caching\n- \"Security\" → SSL/TLS, firewalls, authentication\n\n## Step-by-Step Workflows\n\n### Workflow 1: Implement Web Feature from Requirements\n\nWhen given web-related requirements:\n\n1. **Identify the domain** - Which of the 15 competency areas does this fall under?\n2. **Consult relevant reference** - Read the appropriate reference file for terminology and best practices\n3. **Translate terminology** - Convert colloquial terms to technical equivalents\n4. **Apply web standards** - Use W3C/WHATWG specifications as guidance\n5. **Implement with best practices** - Follow modern patterns and conventions\n6. **Validate against standards** - Check accessibility, performance, security\n\n#### Example: \"Make the form accessible\"\n\n1. **Domain**: Accessibility (Competency #8)\n2. **Reference**: [Accessibility Reference](references/accessibility.md)\n3. **Translate**: \"Accessible\" = WCAG compliant, screen reader friendly, keyboard navigable\n4. **Standards**: WCAG 2.1 Level AA\n5. **Implement**:\n   - Add proper `\u003clabel\u003e` elements\n   - Include ARIA attributes where needed\n   - Ensure keyboard navigation\n   - Provide error messaging\n   - Test with screen readers\n6. **Validate**: Run accessibility audit tools\n\n### Workflow 2: Debug Web Issues\n\nWhen encountering web-related problems:\n\n1. **Categorize the issue** - Which layer (HTML, CSS, JS, Network, etc.)?\n2. **Use browser dev tools** - Inspect Elements, Network, Console, Performance tabs\n3. **Check browser compatibility** - Is this a cross-browser issue?\n4. **Review relevant standards** - What does the spec say should happen?\n5. **Test hypothesis** - Does fixing the root cause resolve the issue?\n6. **Implement solution** - Apply standards-compliant fix\n\n### Workflow 3: Optimize Web Performance\n\nWhen asked to improve performance:\n\n1. **Measure baseline** - Use Lighthouse, WebPageTest, or performance APIs\n2. **Identify bottlenecks** - Network, rendering, JavaScript execution?\n3. **Apply targeted optimizations**:\n   - **Network**: Compression, CDN, caching headers\n   - **Rendering**: Critical CSS, lazy loading, image optimization\n   - **JavaScript**: Code splitting, tree shaking, minification\n4. **Measure improvement** - Compare metrics to baseline\n5. **Iterate** - Continue optimizing until performance budgets are met\n\n### Workflow 4: Implement Web Security\n\nWhen implementing security features:\n\n1. **Identify threats** - XSS, CSRF, injection, MitM, etc.\n2. **Apply defense in depth**:\n   - **Transport**: Use HTTPS with TLS 1.3\n   - **Headers**: Set CSP, HSTS, X-Frame-Options\n   - **Input**: Validate and sanitize all user input\n   - **Authentication**: Use secure session management\n   - **Authorization**: Implement proper access controls\n3. **Test security** - Use security scanning tools\n4. **Monitor** - Set up logging and alerting\n\n## Best Practices\n\n### Do's\n\n- ✅ Use semantic HTML elements (`\u003carticle\u003e`, `\u003cnav\u003e`, `\u003cmain\u003e`)\n- ✅ Follow W3C and WHATWG specifications\n- ✅ Implement progressive enhancement\n- ✅ Test across multiple browsers and devices\n- ✅ Optimize for Core Web Vitals (LCP, FID, CLS)\n- ✅ Make accessibility a priority from the start\n- ✅ Use modern JavaScript features (ES6+)\n- ✅ Implement proper error handling\n- ✅ Minify and compress production assets\n- ✅ Use HTTPS everywhere\n- ✅ Follow REST principles for APIs\n- ✅ Implement proper caching strategies\n\n### Don'ts\n\n- ❌ Use tables for layout (use CSS Grid/Flexbox)\n- ❌ Ignore accessibility requirements\n- ❌ Skip cross-browser testing\n- ❌ Serve unoptimized images\n- ❌ Mix HTTP and HTTPS content\n- ❌ Store sensitive data in localStorage\n- ❌ Ignore performance budgets\n- ❌ Use inline styles extensively\n- ❌ Forget to validate user input\n- ❌ Implement authentication without security review\n- ❌ Use deprecated APIs or features\n- ❌ Ignore browser console warnings\n\n## Common Web Development Patterns\n\n### Pattern 1: Progressive Enhancement\n\nStart with basic HTML, enhance with CSS, add JavaScript functionality:\n\n```html\n\u003c!-- Base HTML (works without CSS/JS) --\u003e\n\u003cform action=\"/submit\" method=\"POST\"\u003e\n  \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n  \u003cinput type=\"email\" id=\"email\" name=\"email\" required\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```css\n/* Enhanced styling */\nform {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n```\n\n```javascript\n// Enhanced interactivity\nform.addEventListener('submit', async (e) =\u003e {\n  e.preventDefault();\n  await fetch('/api/submit', { /* ... */ });\n});\n```\n\n### Pattern 2: Responsive Design\n\nMobile-first approach with progressive enhancement:\n\n```css\n/* Mobile-first base styles */\n.container {\n  padding: 1rem;\n}\n\n/* Tablet and up */\n@media (min-width: 768px) {\n  .container {\n    padding: 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n}\n\n/* Desktop */\n@media (min-width: 1024px) {\n  .container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2rem;\n  }\n}\n```\n\n### Pattern 3: Accessible Component\n\nKeyboard navigation, ARIA, semantic HTML:\n\n```html\n\u003cnav aria-label=\"Main navigation\"\u003e\n  \u003cul role=\"menubar\"\u003e\n    \u003cli role=\"none\"\u003e\n      \u003ca href=\"/\" role=\"menuitem\"\u003eHome\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli role=\"none\"\u003e\n      \u003cbutton\n        role=\"menuitem\"\n        aria-expanded=\"false\"\n        aria-haspopup=\"true\"\n      \u003e\n        Products\n      \u003c/button\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n### Pattern 4: Performance Optimization\n\nLazy loading, code splitting, and efficient loading:\n\n```html\n\u003c!-- Lazy load images --\u003e\n\u003cimg\n  src=\"placeholder.jpg\"\n  data-src=\"high-res.jpg\"\n  loading=\"lazy\"\n  alt=\"Description\"\n\u003e\n\n\u003c!-- Preload critical resources --\u003e\n\u003clink rel=\"preload\" href=\"critical.css\" as=\"style\"\u003e\n\u003clink rel=\"preconnect\" href=\"https://api.example.com\"\u003e\n\n\u003c!-- Async/defer non-critical scripts --\u003e\n\u003cscript src=\"analytics.js\" async\u003e\u003c/script\u003e\n\u003cscript src=\"app.js\" defer\u003e\u003c/script\u003e\n```\n\n## Troubleshooting\n\n| Issue | Likely Cause | Solution |\n|-------|-------------|----------|\n| **CORS error** | Cross-origin request blocked | Configure CORS headers on server |\n| **Layout shift** | Images without dimensions | Add width/height attributes |\n| **Slow load time** | Unoptimized assets | Minify, compress, lazy load |\n| **Accessibility audit fails** | Missing ARIA or semantic HTML | Add labels, roles, and semantic elements |\n| **Mixed content warning** | HTTP resources on HTTPS page | Update all resources to HTTPS |\n| **JavaScript not working** | Browser compatibility issue | Use polyfills or transpile with Babel |\n| **CSS not applying** | Specificity or cascade issue | Check selector specificity and order |\n| **Form not submitting** | Validation or event handling issue | Check validation rules and event listeners |\n| **API request failing** | Network, CORS, or auth issue | Check Network tab, CORS config, auth headers |\n| **Cache not updating** | Aggressive caching | Implement cache-busting or adjust headers |\n\n## Advanced Techniques\n\n### 1. Performance Monitoring\n\nImplement Real User Monitoring (RUM):\n\n```javascript\n// Measure Core Web Vitals\nconst observer = new PerformanceObserver((list) =\u003e {\n  for (const entry of list.getEntries()) {\n    console.log('Performance metric:', {\n      name: entry.name,\n      value: entry.value,\n      rating: entry.rating\n    });\n  }\n});\n\nobserver.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });\n```\n\n### 2. Advanced Accessibility\n\nCreate custom accessible components:\n\n```javascript\nclass AccessibleTabs {\n  constructor(element) {\n    this.tablist = element.querySelector('[role=\"tablist\"]');\n    this.tabs = Array.from(this.tablist.querySelectorAll('[role=\"tab\"]'));\n    this.panels = Array.from(element.querySelectorAll('[role=\"tabpanel\"]'));\n    \n    this.tabs.forEach((tab, index) =\u003e {\n      tab.addEventListener('click', () =\u003e this.selectTab(index));\n      tab.addEventListener('keydown', (e) =\u003e this.handleKeydown(e, index));\n    });\n  }\n  \n  selectTab(index) {\n    // Deselect all tabs\n    this.tabs.forEach(tab =\u003e {\n      tab.setAttribute('aria-selected', 'false');\n      tab.setAttribute('tabindex', '-1');\n    });\n    this.panels.forEach(panel =\u003e panel.hidden = true);\n    \n    // Select target tab\n    this.tabs[index].setAttribute('aria-selected', 'true');\n    this.tabs[index].setAttribute('tabindex', '0');\n    this.tabs[index].focus();\n    this.panels[index].hidden = false;\n  }\n  \n  handleKeydown(event, index) {\n    const { key } = event;\n    let newIndex = index;\n    \n    if (key === 'ArrowRight') newIndex = (index + 1) % this.tabs.length;\n    if (key === 'ArrowLeft') newIndex = (index - 1 + this.tabs.length) % this.tabs.length;\n    if (key === 'Home') newIndex = 0;\n    if (key === 'End') newIndex = this.tabs.length - 1;\n    \n    if (newIndex !== index) {\n      event.preventDefault();\n      this.selectTab(newIndex);\n    }\n  }\n}\n```\n\n### 3. Modern CSS Techniques\n\nUse modern CSS features for layouts:\n\n```css\n/* Container queries (modern browsers) */\n@container (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n  }\n}\n\n/* CSS Grid with subgrid */\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n}\n\n.grid-item {\n  display: grid;\n  grid-template-rows: subgrid;\n  grid-row: span 3;\n}\n\n/* CSS custom properties with fallbacks */\n:root {\n  --primary-color: #007bff;\n  --spacing: 1rem;\n}\n\n.element {\n  color: var(--primary-color, blue);\n  padding: var(--spacing, 16px);\n}\n```\n\n### 4. Security Headers\n\nImplement comprehensive security headers:\n\n```javascript\n// Express.js example\napp.use((req, res, next) =\u003e {\n  // Content Security Policy\n  res.setHeader('Content-Security-Policy', \n    \"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'\");\n  \n  // Strict Transport Security\n  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');\n  \n  // XSS Protection\n  res.setHeader('X-Content-Type-Options', 'nosniff');\n  res.setHeader('X-Frame-Options', 'DENY');\n  res.setHeader('X-XSS-Protection', '1; mode=block');\n  \n  // Referrer Policy\n  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');\n  \n  next();\n});\n```\n\n## Reference Files\n\nThis skill includes 15 comprehensive reference files covering all aspects of web development:\n\n1. [HTML \u0026 Markup](references/html-markup.md) - Semantic HTML, elements, attributes\n2. [CSS \u0026 Styling](references/css-styling.md) - Selectors, layouts, responsive design\n3. [JavaScript \u0026 Programming](references/javascript-programming.md) - ES6+, types, patterns\n4. [Web APIs \u0026 DOM](references/web-apis-dom.md) - Browser APIs, DOM manipulation\n5. [HTTP \u0026 Networking](references/http-networking.md) - Protocols, headers, REST\n6. [Security \u0026 Authentication](references/security-authentication.md) - HTTPS, auth, security\n7. [Performance \u0026 Optimization](references/performance-optimization.md) - Core Web Vitals, optimization\n8. [Accessibility](references/accessibility.md) - WCAG, ARIA, inclusive design\n9. [Web Protocols \u0026 Standards](references/web-protocols-standards.md) - W3C, WHATWG, specs\n10. [Browsers \u0026 Engines](references/browsers-engines.md) - Rendering engines, compatibility\n11. [Development Tools](references/development-tools.md) - Git, build tools, testing\n12. [Data Formats \u0026 Encoding](references/data-formats-encoding.md) - JSON, encodings, formats\n13. [Media \u0026 Graphics](references/media-graphics.md) - Canvas, SVG, images, video\n14. [Architecture \u0026 Patterns](references/architecture-patterns.md) - MVC, SPA, SSR, patterns\n15. [Servers \u0026 Infrastructure](references/servers-infrastructure.md) - Servers, CDN, deployment\n\n## Validation Checklist\n\nBefore considering web development complete:\n\n- [ ] HTML validates without errors (W3C validator)\n- [ ] CSS follows best practices and validates\n- [ ] JavaScript has no console errors\n- [ ] Accessibility audit passes (Lighthouse, axe)\n- [ ] Performance meets Core Web Vitals targets\n- [ ] Security headers are properly configured\n- [ ] Cross-browser testing completed\n- [ ] Responsive design works on all breakpoints\n- [ ] SEO meta tags are present and correct\n- [ ] Forms have proper validation and error handling\n- [ ] Images are optimized and have alt text\n- [ ] HTTPS is enforced\n- [ ] Caching strategy is implemented\n- [ ] Error handling covers edge cases\n- [ ] Code is minified and compressed for production\n\n## Summary\n\nThe 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.\n\n**Remember**: Web development is multidisciplinary. Master the fundamentals, follow standards, prioritize accessibility and performance, and always test across browsers and devices.\n","references/accessibility.md":"# Accessibility Reference\n\nWeb accessibility ensures content is usable by everyone, including people with disabilities.\n\n## WCAG (Web Content Accessibility Guidelines)\n\n### Levels\n- **A**: Minimum level\n- **AA**: Standard target (legal requirement in many jurisdictions)\n- **AAA**: Enhanced accessibility\n\n### Four Principles (POUR)\n\n1. **Perceivable**: Information presented in ways users can perceive\n2. **Operable**: UI components and navigation are operable\n3. **Understandable**: Information and UI operation is understandable\n4. **Robust**: Content works with current and future technologies\n\n## ARIA (Accessible Rich Internet Applications)\n\n### ARIA Roles\n\n```html\n\u003c!-- Landmark roles --\u003e\n\u003cnav role=\"navigation\"\u003e\n\u003cmain role=\"main\"\u003e\n\u003caside role=\"complementary\"\u003e\n\u003cfooter role=\"contentinfo\"\u003e\n\n\u003c!-- Widget roles --\u003e\n\u003cdiv role=\"button\" tabindex=\"0\"\u003eClick me\u003c/div\u003e\n\u003cdiv role=\"tab\" aria-selected=\"true\"\u003eTab 1\u003c/div\u003e\n\u003cdiv role=\"dialog\" aria-labelledby=\"dialogTitle\"\u003e\n\n\u003c!-- Document structure --\u003e\n\u003cdiv role=\"list\"\u003e\n  \u003cdiv role=\"listitem\"\u003eItem 1\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### ARIA Attributes\n\n```html\n\u003c!-- States --\u003e\n\u003cbutton aria-pressed=\"true\"\u003eToggle\u003c/button\u003e\n\u003cinput aria-invalid=\"true\" aria-errormessage=\"error1\"\u003e\n\u003cdiv aria-expanded=\"false\" aria-controls=\"menu\"\u003eMenu\u003c/div\u003e\n\n\u003c!-- Properties --\u003e\n\u003cimg alt=\"\" aria-hidden=\"true\"\u003e\n\u003cinput aria-label=\"Search\" type=\"search\"\u003e\n\u003cdialog aria-labelledby=\"title\" aria-describedby=\"desc\"\u003e\n  \u003ch2 id=\"title\"\u003eDialog Title\u003c/h2\u003e\n  \u003cp id=\"desc\"\u003eDescription\u003c/p\u003e\n\u003c/dialog\u003e\n\n\u003c!-- Relationships --\u003e\n\u003clabel id=\"label1\" for=\"input1\"\u003eName:\u003c/label\u003e\n\u003cinput id=\"input1\" aria-labelledby=\"label1\"\u003e\n\n\u003c!-- Live regions --\u003e\n\u003cdiv aria-live=\"polite\" aria-atomic=\"true\"\u003e\n  Status updated\n\u003c/div\u003e\n```\n\n## Keyboard Navigation\n\n### Tab Order\n\n```html\n\u003c!-- Natural tab order --\u003e\n\u003cbutton\u003eFirst\u003c/button\u003e\n\u003cbutton\u003eSecond\u003c/button\u003e\n\n\u003c!-- Custom tab order (avoid if possible) --\u003e\n\u003cbutton tabindex=\"1\"\u003eFirst\u003c/button\u003e\n\u003cbutton tabindex=\"2\"\u003eSecond\u003c/button\u003e\n\n\u003c!-- Programmatically focusable  (not in tab order) --\u003e\n\u003cdiv tabindex=\"-1\"\u003eNot in tab order\u003c/div\u003e\n\n\u003c!-- In tab order --\u003e\n\u003cdiv tabindex=\"0\" role=\"button\"\u003eCustom button\u003c/div\u003e\n```\n\n### Keyboard Events\n\n```javascript\nelement.addEventListener('keydown', (e) =\u003e {\n  switch(e.key) {\n    case 'Enter':\n    case ' ': // Space\n      // Activate\n      break;\n    case 'Escape':\n      // Close/cancel\n      break;\n    case 'ArrowUp':\n    case 'ArrowDown':\n    case 'ArrowLeft':\n    case 'ArrowRight':\n      // Navigate\n      break;\n  }\n});\n```\n\n## Semantic HTML\n\n```html\n\u003c!-- ✅ Good: semantic elements --\u003e\n\u003cnav aria-label=\"Main navigation\"\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n\n\u003c!-- ❌ Bad: non-semantic --\u003e\n\u003cdiv class=\"nav\"\u003e\n  \u003cdiv\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- ✅ Good: proper headings hierarchy --\u003e\n\u003ch1\u003ePage Title\u003c/h1\u003e\n  \u003ch2\u003eSection\u003c/h2\u003e\n    \u003ch3\u003eSubsection\u003c/h3\u003e\n\n\u003c!-- ❌ Bad: skipping levels --\u003e\n\u003ch1\u003ePage Title\u003c/h1\u003e\n  \u003ch3\u003eSkipped h2\u003c/h3\u003e\n```\n\n## Forms Accessibility\n\n```html\n\u003cform\u003e\n  \u003c!-- Labels --\u003e\n  \u003clabel for=\"name\"\u003eName:\u003c/label\u003e\n  \u003cinput type=\"text\" id=\"name\" name=\"name\" required aria-required=\"true\"\u003e\n  \n  \u003c!-- Error messages --\u003e\n  \u003cinput\n    type=\"email\"\n    id=\"email\"\n    aria-invalid=\"true\"\n    aria-describedby=\"email-error\"\u003e\n  \u003cspan id=\"email-error\" role=\"alert\"\u003e\n    Please enter a valid email\n  \u003c/span\u003e\n  \n  \u003c!-- Fieldset for groups --\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003eChoose an option\u003c/legend\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"option\" value=\"a\"\u003e\n      Option A\n    \u003c/label\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"option\" value=\"b\"\u003e\n      Option B\n    \u003c/label\u003e\n  \u003c/fieldset\u003e\n  \n  \u003c!-- Help text --\u003e\n  \u003clabel for=\"password\"\u003ePassword:\u003c/label\u003e\n  \u003cinput\n    type=\"password\"\n    id=\"password\"\n    aria-describedby=\"password-help\"\u003e\n  \u003cspan id=\"password-help\"\u003e\n    Must be at least 8 characters\n  \u003c/span\u003e\n\u003c/form\u003e\n```\n\n## Images and Media\n\n```html\n\u003c!-- Informative image --\u003e\n\u003cimg src=\"chart.png\" alt=\"Sales increased 50% in Q1\"\u003e\n\n\u003c!-- Decorative image --\u003e\n\u003cimg src=\"decorative.png\" alt=\"\" role=\"presentation\"\u003e\n\n\u003c!-- Complex image --\u003e\n\u003cfigure\u003e\n  \u003cimg src=\"data-viz.png\" alt=\"Sales data visualization\"\u003e\n  \u003cfigcaption\u003e\n    Detailed description of the data...\n  \u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003c!-- Video with captions --\u003e\n\u003cvideo controls\u003e\n  \u003csource src=\"video.mp4\" type=\"video/mp4\"\u003e\n  \u003ctrack kind=\"captions\" src=\"captions.vtt\" srclang=\"en\" label=\"English\"\u003e\n\u003c/video\u003e\n```\n\n## Color and Contrast\n\n### WCAG Requirements\n\n- **Level AA**: 4.5:1 for normal text, 3:1 for large text\n- **Level AAA**: 7:1 for normal text, 4.5:1 for large text\n\n```css\n/* ✅ Good contrast */\n.text {\n  color: #000; /* Black */\n  background: #fff; /* White */\n  /* Contrast: 21:1 */\n}\n\n/* Don't rely on color alone */\n.error {\n  color: red;\n  /* ✅ Also use icon or text */\n  \u0026::before {\n    content: '⚠ ';\n  }\n}\n```\n\n## Screen Readers\n\n### Best Practices\n\n```html\n\u003c!-- Skip links for navigation --\u003e\n\u003ca href=\"#main-content\" class=\"skip-link\"\u003e\n  Skip to main content\n\u003c/a\u003e\n\n\u003c!-- Accessible headings --\u003e\n\u003ch1\u003eMain heading (only one)\u003c/h1\u003e\n\n\u003c!-- Descriptive links --\u003e\n\u003c!-- ❌ Bad --\u003e\n\u003ca href=\"/article\"\u003eRead more\u003c/a\u003e\n\n\u003c!-- ✅ Good --\u003e\n\u003ca href=\"/article\"\u003eRead more about accessibility\u003c/a\u003e\n\n\u003c!-- Hidden content (screen reader only) --\u003e\n\u003cspan class=\"sr-only\"\u003e\n  Additional context for screen readers\n\u003c/span\u003e\n```\n\n```css\n/* Screen reader only class */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n```\n\n## Focus Management\n\n```css\n/* Visible focus indicator */\n:focus {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}\n\n/* Don't remove focus entirely */\n/* ❌ Bad */\n:focus {\n  outline: none;\n}\n\n/* ✅ Good: custom focus style */\n:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n```javascript\n// Focus management in modal\nfunction openModal() {\n  modal.showModal();\n  modal.querySelector('button').focus();\n  \n  // Trap focus\n  modal.addEventListener('keydown', (e) =\u003e {\n    if (e.key === 'Tab') {\n      trapFocus(e, modal);\n    }\n  });\n}\n```\n\n## Testing Tools\n\n- **axe DevTools**: Browser extension\n- **WAVE**: Web accessibility evaluation tool\n- **NVDA**: Screen reader (Windows)\n- **JAWS**: Screen reader (Windows)\n- **VoiceOver**: Screen reader (macOS/iOS)\n- **Lighthouse**: Automated audits\n\n## Checklist\n\n- [ ] Semantic HTML used\n- [ ] All images have alt text\n- [ ] Color contrast meets WCAG AA\n- [ ] Keyboard navigation works\n- [ ] Focus indicators visible\n- [ ] Forms have labels\n- [ ] Heading hierarchy correct\n- [ ] ARIA used appropriately\n- [ ] Screen reader tested\n- [ ] No keyboard traps\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Accessibility\n- Accessibility tree\n- Accessible description\n- Accessible name\n- ARIA\n- ATAG\n- Boolean attribute (ARIA)\n- Screen reader\n- UAAG\n- WAI\n- WCAG\n\n## Additional Resources\n\n- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)\n- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)\n- [WebAIM](https://webaim.org/)\n- [A11y Project](https://www.a11yproject.com/)\n","references/architecture-patterns.md":"# Architecture \u0026 Patterns Reference\n\nWeb application architectures, design patterns, and architectural concepts.\n\n## Application Architectures\n\n### Single Page Application (SPA)\n\nWeb app that loads single HTML page and dynamically updates content.\n\n**Characteristics**:\n- Client-side routing\n- Heavy JavaScript usage\n- Fast navigation after initial load\n- Complex state management\n\n**Pros**:\n- Smooth user experience\n- Reduced server load\n- Mobile app-like feel\n\n**Cons**:\n- Larger initial download\n- SEO challenges (mitigated with SSR)\n- Complex state management\n\n**Examples**: React, Vue, Angular apps\n\n```javascript\n// React Router example\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\n\nfunction App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cHome /\u003e} /\u003e\n        \u003cRoute path=\"/about\" element={\u003cAbout /\u003e} /\u003e\n        \u003cRoute path=\"/products/:id\" element={\u003cProduct /\u003e} /\u003e\n      \u003c/Routes\u003e\n    \u003c/BrowserRouter\u003e\n  );\n}\n```\n\n### Multi-Page Application (MPA)\n\nTraditional web app with multiple HTML pages.\n\n**Characteristics**:\n- Server renders each page\n- Full page reload on navigation\n- Simpler architecture\n\n**Pros**:\n- Better SEO out of the box\n- Simpler to build\n- Good for content-heavy sites\n\n**Cons**:\n- Slower navigation\n- More server requests\n\n### Progressive Web App (PWA)\n\nWeb app with native app capabilities.\n\n**Features**:\n- Installable\n- Offline support (Service Workers)\n- Push notifications\n- App-like experience\n\n```javascript\n// Service Worker registration\nif ('serviceWorker' in navigator) {\n  navigator.serviceWorker.register('/sw.js')\n    .then(reg =\u003e console.log('SW registered', reg))\n    .catch(err =\u003e console.error('SW error', err));\n}\n```\n\n**manifest.json**:\n```json\n{\n  \"name\": \"My PWA\",\n  \"short_name\": \"PWA\",\n  \"start_url\": \"/\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#000000\",\n  \"icons\": [\n    {\n      \"src\": \"/icon-192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image/png\"\n    }\n  ]\n}\n```\n\n### Server-Side Rendering (SSR)\n\nRender pages on server, send HTML to client.\n\n**Pros**:\n- Better SEO\n- Faster first contentful paint\n- Works without JavaScript\n\n**Cons**:\n- Higher server load\n- More complex setup\n\n**Frameworks**: Next.js, Nuxt.js, SvelteKit\n\n```javascript\n// Next.js SSR\nexport async function getServerSideProps() {\n  const data = await fetchData();\n  return { props: { data } };\n}\n\nfunction Page({ data }) {\n  return \u003cdiv\u003e{data.title}\u003c/div\u003e;\n}\n```\n\n### Static Site Generation (SSG)\n\nPre-render pages at build time.\n\n**Pros**:\n- Extremely fast\n- Low server cost\n- Great SEO\n\n**Best for**: Blogs, documentation, marketing sites\n\n**Tools**: Next.js, Gatsby, Hugo, Jekyll, Eleventy\n\n```javascript\n// Next.js SSG\nexport async function getStaticProps() {\n  const data = await fetchData();\n  return { props: { data } };\n}\n\nexport async function getStaticPaths() {\n  const paths = await fetchPaths();\n  return { paths, fallback: false };\n}\n```\n\n### Incremental Static Regeneration (ISR)\n\nUpdate static content after build.\n\n```javascript\n// Next.js ISR\nexport async function getStaticProps() {\n  const data = await fetchData();\n  return {\n    props: { data },\n    revalidate: 60 // Revalidate every 60 seconds\n  };\n}\n```\n\n### JAMstack\n\nJavaScript, APIs, Markup architecture.\n\n**Principles**:\n- Pre-rendered static files\n- APIs for dynamic functionality\n- Git-based workflows\n- CDN deployment\n\n**Benefits**:\n- Fast performance\n- High security\n- Scalability\n- Developer experience\n\n## Rendering Patterns\n\n### Client-Side Rendering (CSR)\n\nJavaScript renders content in browser.\n\n```html\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  // React renders app here\n  ReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n\u003c/script\u003e\n```\n\n### Hydration\n\nAttach JavaScript to server-rendered HTML.\n\n```javascript\n// React hydration\nReactDOM.hydrate(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n### Partial Hydration\n\nHydrate only interactive components.\n\n**Tools**: Astro, Qwik\n\n### Islands Architecture\n\nIndependent interactive components in static HTML.\n\n**Concept**: Ship minimal JavaScript, hydrate only \"islands\" of interactivity\n\n**Frameworks**: Astro, Eleventy with Islands\n\n## Design Patterns\n\n### MVC (Model-View-Controller)\n\nSeparate data, presentation, and logic.\n\n- **Model**: Data and business logic\n- **View**: UI presentation\n- **Controller**: Handle input, update model/view\n\n### MVVM (Model-View-ViewModel)\n\nSimilar to MVC with data binding.\n\n- **Model**: Data\n- **View**: UI\n- **ViewModel**: View logic and state\n\n**Used in**: Vue.js, Angular, Knockout\n\n### Component-Based Architecture\n\nBuild UI from reusable components.\n\n```javascript\n// React component\nfunction Button({ onClick, children }) {\n  return (\n    \u003cbutton onClick={onClick} className=\"btn\"\u003e\n      {children}\n    \u003c/button\u003e\n  );\n}\n\n// Usage\n\u003cButton onClick={handleClick}\u003eClick me\u003c/Button\u003e\n```\n\n### Micro Frontends\n\nSplit frontend into smaller, independent apps.\n\n**Approaches**:\n- Build-time integration\n- Run-time integration (iframes, Web Components)\n- Edge-side includes\n\n## State Management\n\n### Local State\n\nComponent-level state.\n\n```javascript\n// React useState\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e{count}\u003c/button\u003e;\n}\n```\n\n### Global State\n\nApplication-wide state.\n\n**Solutions**:\n- **Redux**: Predictable state container\n- **MobX**: Observable state\n- **Zustand**: Minimal state management\n- **Recoil**: Atomic state management\n\n```javascript\n// Redux example\nimport { createSlice, configureStore } from '@reduxjs/toolkit';\n\nconst counterSlice = createSlice({\n  name: 'counter',\n  initialState: { value: 0 },\n  reducers: {\n    increment: state =\u003e { state.value += 1; }\n  }\n});\n\nconst store = configureStore({\n  reducer: { counter: counterSlice.reducer }\n});\n```\n\n### Context API\n\nShare state without prop drilling.\n\n```javascript\n// React Context\nconst ThemeContext = React.createContext('light');\n\nfunction App() {\n  return (\n    \u003cThemeContext.Provider value=\"dark\"\u003e\n      \u003cToolbar /\u003e\n    \u003c/ThemeContext.Provider\u003e\n  );\n}\n\nfunction Toolbar() {\n  const theme = useContext(ThemeContext);\n  return \u003cdiv className={theme}\u003e...\u003c/div\u003e;\n}\n```\n\n## API Architecture Patterns\n\n### REST (Representational State Transfer)\n\nResource-based API design.\n\n```javascript\n// RESTful API\nGET    /api/users      // List users\nGET    /api/users/1    // Get user\nPOST   /api/users      // Create user\nPUT    /api/users/1    // Update user\nDELETE /api/users/1    // Delete user\n```\n\n### GraphQL\n\nQuery language for APIs.\n\n```graphql\n# Query\nquery {\n  user(id: \"1\") {\n    name\n    email\n    posts {\n      title\n    }\n  }\n}\n\n# Mutation\nmutation {\n  createUser(name: \"John\", email: \"john@example.com\") {\n    id\n    name\n  }\n}\n```\n\n```javascript\n// Apollo Client\nimport { useQuery, gql } from '@apollo/client';\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      name\n      email\n    }\n  }\n`;\n\nfunction User({ id }) {\n  const { loading, error, data } = useQuery(GET_USER, {\n    variables: { id }\n  });\n  \n  if (loading) return \u003cp\u003eLoading...\u003c/p\u003e;\n  return \u003cp\u003e{data.user.name}\u003c/p\u003e;\n}\n```\n\n### tRPC\n\nEnd-to-end typesafe APIs.\n\n```typescript\n// Server\nconst appRouter = router({\n  getUser: publicProcedure\n    .input(z.string())\n    .query(async ({ input }) =\u003e {\n      return await db.user.findUnique({ where: { id: input } });\n    })\n});\n\n// Client (fully typed!)\nconst user = await trpc.getUser.query('1');\n```\n\n## Microservices Architecture\n\nSplit application into small, independent services.\n\n**Characteristics**:\n- Independent deployment\n- Service-specific databases\n- API communication\n- Decentralized governance\n\n**Benefits**:\n- Scalability\n- Technology flexibility\n- Fault isolation\n\n**Challenges**:\n- Complexity\n- Network latency\n- Data consistency\n\n## Monolithic Architecture\n\nSingle, unified application.\n\n**Pros**:\n- Simpler development\n- Easier debugging\n- Single deployment\n\n**Cons**:\n- Scaling challenges\n- Technology lock-in\n- Tight coupling\n\n## Serverless Architecture\n\nRun code without managing servers.\n\n**Platforms**: AWS Lambda, Vercel Functions, Netlify Functions, Cloudflare Workers\n\n```javascript\n// Vercel serverless function\nexport default function handler(req, res) {\n  res.status(200).json({ message: 'Hello from serverless!' });\n}\n```\n\n**Benefits**:\n- Auto-scaling\n- Pay per use\n- No server management\n\n**Use Cases**:\n- APIs\n- Background jobs\n- Webhooks\n- Image processing\n\n## Architectural Best Practices\n\n### Separation of Concerns\n\nKeep different aspects separate:\n- Presentation layer\n- Business logic layer\n- Data access layer\n\n### DRY (Don't Repeat Yourself)\n\nAvoid code duplication.\n\n### SOLID Principles\n\n- **S**ingle Responsibility\n- **O**pen/Closed\n- **L**iskov Substitution\n- **I**nterface Segregation\n- **D**ependency Inversion\n\n### Composition over Inheritance\n\nPrefer composing objects over class hierarchies.\n\n```javascript\n// Composition\nfunction withLogging(Component) {\n  return function LoggedComponent(props) {\n    console.log('Rendering', Component.name);\n    return \u003cComponent {...props} /\u003e;\n  };\n}\n\nconst LoggedButton = withLogging(Button);\n```\n\n## Module Systems\n\n### ES Modules (ESM)\n\nModern JavaScript modules.\n\n```javascript\n// export\nexport const name = 'John';\nexport function greet() {}\nexport default App;\n\n// import\nimport App from './App.js';\nimport { name, greet } from './utils.js';\nimport * as utils from './utils.js';\n```\n\n### CommonJS\n\nNode.js module system.\n\n```javascript\n// export\nmodule.exports = { name: 'John' };\nexports.greet = function() {};\n\n// import\nconst { name } = require('./utils');\n```\n\n## Build Optimization\n\n### Code Splitting\n\nSplit code into smaller chunks.\n\n```javascript\n// React lazy loading\nconst OtherComponent = React.lazy(() =\u003e import('./OtherComponent'));\n\nfunction App() {\n  return (\n    \u003cSuspense fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n      \u003cOtherComponent /\u003e\n    \u003c/Suspense\u003e\n  );\n}\n```\n\n### Tree Shaking\n\nRemove unused code.\n\n```javascript\n// Only imports 'map', not entire lodash\nimport { map } from 'lodash-es';\n```\n\n### Bundle Splitting\n\n- **Vendor bundle**: Third-party dependencies\n- **App bundle**: Application code\n- **Route bundles**: Per-route code\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Abstraction\n- API\n- Application\n- Architecture\n- Asynchronous\n- Binding\n- Block (CSS, JS)\n- Call stack\n- Class\n- Client-side\n- Control flow\n- Delta\n- Design pattern\n- Event\n- Fetch\n- First-class Function\n- Function\n- Garbage collection\n- Grid\n- Hoisting\n- Hydration\n- Idempotent\n- Instance\n- Lazy load\n- Main thread\n- MVC\n\n- Polyfill\n- Progressive Enhancement\n- Progressive web apps\n- Property\n- Prototype\n- Prototype-based programming\n- REST\n- Reflow\n- Round Trip Time (RTT)\n- SPA\n- Semantics\n- Server\n- Synthetic monitoring\n- Thread\n- Type\n\n## Additional Resources\n\n- [Patterns.dev](https://www.patterns.dev/)\n- [React Patterns](https://reactpatterns.com/)\n- [JAMstack](https://jamstack.org/)\n- [Micro Frontends](https://micro-frontends.org/)\n","references/browsers-engines.md":"# Browsers \u0026 Engines Reference\n\nWeb browsers, rendering engines, and browser-specific information.\n\n## Major Browsers\n\n### Google Chrome\n\n**Engine**: Blink (rendering), V8 (JavaScript)  \n**Released**: 2008  \n**Market Share**: ~65% (desktop)  \n\n**Developer Tools**: \n- Elements panel\n- Console\n- Network tab\n- Performance profiler\n- Lighthouse audits\n\n### Mozilla Firefox\n\n**Engine**: Gecko (rendering), SpiderMonkey (JavaScript)  \n**Released**: 2004  \n**Market Share**: ~3% (desktop)  \n\n**Features**:\n- Strong privacy focus\n- Container tabs\n- Enhanced tracking protection\n- Developer Edition\n\n### Apple Safari\n\n**Engine**: WebKit (rendering), JavaScriptCore (JavaScript)  \n**Released**: 2003  \n**Market Share**: ~20% (desktop), dominant on iOS  \n\n**Features**:\n- Energy efficient\n- Privacy-focused\n- Intelligent Tracking Prevention\n- Only browser allowed on iOS\n\n### Microsoft Edge\n\n**Engine**: Blink (Chromium-based since 2020)  \n**Released**: 2015 (EdgeHTML), 2020 (Chromium)  \n\n**Features**:\n- Windows integration\n- Collections\n- Vertical tabs\n- IE Mode (compatibility)\n\n### Opera\n\n**Engine**: Blink  \n**Based on**: Chromium  \n\n**Features**:\n- Built-in VPN\n- Ad blocker\n- Sidebar\n\n## Rendering Engines\n\n### Blink\n\n**Used by**: Chrome, Edge, Opera, Vivaldi  \n**Forked from**: WebKit (2013)  \n**Language**: C++  \n\n### WebKit\n\n**Used by**: Safari  \n**Origin**: KHTML (KDE)  \n**Language**: C++  \n\n### Gecko\n\n**Used by**: Firefox  \n**Developed by**: Mozilla  \n**Language**: C++, Rust  \n\n### Legacy Engines\n\n- **Trident**: Internet Explorer (deprecated)\n- **EdgeHTML**: Original Edge (deprecated)\n- **Presto**: Old Opera (deprecated)\n\n## JavaScript Engines\n\n| Engine | Browser | Language |\n|--------|---------|----------|\n| V8 | Chrome, Edge | C++ |\n| SpiderMonkey | Firefox | C++, Rust |\n| JavaScriptCore | Safari | C++ |\n| Chakra | IE/Edge (legacy) | C++ |\n\n### V8 Features\n\n- JIT compilation\n- Inline caching\n- Hidden classes\n- Garbage collection\n- WASM support\n\n## Browser DevTools\n\n### Chrome DevTools\n\n```javascript\n// Console API\nconsole.log('message');\nconsole.table(array);\nconsole.time('label');\nconsole.timeEnd('label');\n\n// Command Line API\n$() // document.querySelector()\n$$() // document.querySelectorAll()\n$x() // XPath query\ncopy(object) // Copy to clipboard\nmonitor(function) // Log function calls\n```\n\n**Panels**:\n- Elements: DOM inspection\n- Console: JavaScript console\n- Sources: Debugger\n- Network: HTTP requests\n- Performance: Profiling\n- Memory: Heap snapshots\n- Application: Storage, service workers\n- Security: Certificate  info\n- Lighthouse: Audits\n\n### Firefox DevTools\n\n**Unique Features**:\n- CSS Grid Inspector\n- Font Editor\n- Accessibility Inspector\n- Network throttling\n\n## Cross-Browser Compatibility\n\n### Browser Prefixes (Vendor Prefixes)\n\n```css\n/* Legacy - use autoprefixer instead */\n.element {\n  -webkit-transform: rotate(45deg); /* Chrome, Safari */\n  -moz-transform: rotate(45deg); /* Firefox */\n  -ms-transform: rotate(45deg); /* IE */\n  -o-transform: rotate(45deg); /* Opera */\n  transform: rotate(45deg); /* Standard */\n}\n```\n\n**Modern approach**: Use build tools (Autoprefixer)\n\n### User Agent String\n\n```javascript\n// Check browser\nconst userAgent = navigator.userAgent;\n\nif (userAgent.includes('Firefox')) {\n  // Firefox-specific code\n} else if (userAgent.includes('Chrome')) {\n  // Chrome-specific code\n}\n\n// Better: Feature detection\nif ('serviceWorker' in navigator) {\n  // Modern browser\n}\n```\n\n### Graceful Degradation vs Progressive Enhancement\n\n**Graceful Degradation**: Build for modern, degrade for old\n\n```css\n.container {\n  display: grid; /* Modern browsers */\n  display: block; /* Fallback */\n}\n```\n\n**Progressive Enhancement**: Build base, enhance for modern\n\n```css\n.container {\n  display: block; /* Base */\n}\n\n@supports (display: grid) {\n  .container {\n    display: grid; /* Enhancement */\n  }\n}\n```\n\n## Browser Features\n\n### Service Workers\n\nBackground scripts for offline functionality\n\n**Supported**: All modern browsers\n\n### WebAssembly\n\nBinary instruction format for web\n\n**Supported**: All modern browsers\n\n### Web Components\n\nCustom HTML elements\n\n**Supported**: All modern browsers (with polyfills)\n\n### WebRTC\n\nReal-time communication\n\n**Supported**: All modern browsers\n\n## Browser Storage\n\n| Storage | Size | Expiration | Scope |\n|---------|------|------------|-------|\n| Cookies | 4KB | Configurable | Domain |\n| LocalStorage | 5-10MB | Never | Origin |\n| SessionStorage | 5-10MB | Tab close | Origin |\n| IndexedDB | 50MB+ | Never | Origin |\n\n## Mobile Browsers\n\n### iOS Safari\n\n- Only browser allowed on iOS\n- All iOS browsers use WebKit\n- Different from desktop Safari\n\n### Chrome Mobile (Android)\n\n- Blink engine\n- Similar to desktop Chrome\n\n### Samsung Internet\n\n- Based on Chromium\n- Popular on Samsung devices\n\n## Browser Market Share (2026)\n\n**Desktop**:\n- Chrome: ~65%\n- Safari: ~20%\n- Edge: ~5%\n- Firefox: ~3%\n- Other: ~7%\n\n**Mobile**:\n- Chrome: ~65%\n- Safari: ~25%\n- Samsung Internet: ~5%\n- Other: ~5%\n\n## Testing Browsers\n\n### Tools\n\n- **BrowserStack**: Cloud browser testing\n- **Sauce Labs**: Automated testing\n- **CrossBrowserTesting**: Live testing\n- **LambdaTest**: Cross-browser testing\n\n### Virtual Machines\n\n- **VirtualBox**: Free virtualization\n- **Parallels**: Mac virtualization\n- **Windows Dev VMs**: Free Windows VMs\n\n## Developer Features\n\n### Chromium-based Developer Features\n\n- **Remote Debugging**: Debug mobile devices\n- **Workspaces**: Edit files directly\n- **Snippets**: Reusable code snippets\n- **Coverage**: Unused code detection\n\n### Firefox Developer Edition\n\n- **CSS Grid Inspector**\n- **Flexbox Inspector**\n- **Font Panel**\n- **Accessibility Audits**\n\n## Browser Extensions\n\n### Manifest V3 (Modern)\n\n```json\n{\n  \"manifest_version\": 3,\n  \"name\": \"My Extension\",\n  \"version\": \"1.0\",\n  \"permissions\": [\"storage\", \"activeTab\"],\n  \"action\": {\n    \"default_popup\": \"popup.html\"\n  },\n  \"content_scripts\": [{\n    \"matches\": [\"\u003call_urls\u003e\"],\n    \"js\": [\"content.js\"]\n  }]\n}\n```\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Apple Safari\n- Blink\n- blink element\n- Browser\n- Browsing context\n- Chrome\n- Developer tools\n- Engine\n- Firefox OS\n- Gecko\n- Google Chrome\n- JavaScript engine\n- Microsoft Edge\n- Microsoft Internet Explorer\n- Mozilla Firefox\n- Netscape Navigator\n- Opera browser\n- Presto\n- Rendering engine\n- Trident\n- User agent\n- Vendor prefix\n- WebKit\n\n## Additional Resources\n\n- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)\n- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/)\n- [Safari Web Inspector](https://developer.apple.com/safari/tools/)\n- [Can I Use](https://caniuse.com/)\n- [Browser Market Share](https://gs.statcounter.com/)\n","references/css-styling.md":"# CSS \u0026 Styling Reference\n\nComprehensive reference for Cascading Style Sheets, layout systems, and modern styling techniques.\n\n## Core Concepts\n\n### CSS (Cascading Style Sheets)\n\nStyle sheet language used for describing the presentation of HTML documents.\n\n**Three Ways to Apply CSS**:\n\n1. **Inline**: `\u003cdiv style=\"color: blue;\"\u003e`\n2. **Internal**: `\u003cstyle\u003e` tag in HTML\n3. **External**: Separate `.css` file (recommended)\n\n### The Cascade\n\nThe algorithm that determines which CSS rules apply when multiple rules target the same element.\n\n**Priority Order** (highest to lowest):\n\n1. Inline styles\n2. ID selectors (`#id`)\n3. Class selectors (`.class`), attribute selectors, pseudo-classes\n4. Element selectors (`div`, `p`)\n5. Inherited properties\n\n**Important**: `!important` declaration overrides normal specificity (use sparingly)\n\n### CSS Selectors\n\n| Selector | Example | Description |\n|----------|---------|-------------|\n| Element | `p` | Selects all `\u003cp\u003e` elements |\n| Class | `.button` | Selects elements with `class=\"button\"` |\n| ID | `#header` | Selects element with `id=\"header\"` |\n| Universal | `*` | Selects all elements |\n| Descendant | `div p` | `\u003cp\u003e` inside `\u003cdiv\u003e` (any level) |\n| Child | `div \u003e p` | Direct child `\u003cp\u003e` of `\u003cdiv\u003e` |\n| Adjacent Sibling | `h1 + p` | `\u003cp\u003e` immediately after `\u003ch1\u003e` |\n| General Sibling | `h1 ~ p` | All `\u003cp\u003e` siblings after `\u003ch1\u003e` |\n| Attribute | `[type=\"text\"]` | Elements with specific attribute |\n| Attribute Contains | `[href*=\"example\"]` | Contains substring |\n| Attribute Starts | `[href^=\"https\"]` | Starts with string |\n| Attribute Ends | `[href$=\".pdf\"]` | Ends with string |\n\n### Pseudo-Classes\n\nTarget elements based on state or position:\n\n```css\n/* Link states */\na:link { color: blue; }\na:visited { color: purple; }\na:hover { color: red; }\na:active { color: orange; }\na:focus { outline: 2px solid blue; }\n\n/* Structural */\nli:first-child { font-weight: bold; }\nli:last-child { border-bottom: none; }\nli:nth-child(odd) { background: #f0f0f0; }\nli:nth-child(3n) { color: red; }\np:not(.special) { color: gray; }\n\n/* Form states */\ninput:required { border-color: red; }\ninput:valid { border-color: green; }\ninput:invalid { border-color: red; }\ninput:disabled { opacity: 0.5; }\ninput:checked + label { font-weight: bold; }\n```\n\n### Pseudo-Elements\n\nStyle specific parts of elements:\n\n```css\n/* First line/letter */\np::first-line { font-weight: bold; }\np::first-letter { font-size: 2em; }\n\n/* Generated content */\n.quote::before { content: '\"'; }\n.quote::after { content: '\"'; }\n\n/* Selection */\n::selection { background: yellow; color: black; }\n\n/* Placeholder */\ninput::placeholder { color: #999; }\n```\n\n## Box Model\n\nEvery element is a rectangular box with:\n\n1. **Content**: The actual content (text, images)\n2. **Padding**: Space around content, inside border\n3. **Border**: Line around padding\n4. **Margin**: Space outside border\n\n```css\n.box {\n  /* Content size */\n  width: 300px;\n  height: 200px;\n  \n  /* Padding */\n  padding: 20px; /* All sides */\n  padding: 10px 20px; /* Vertical | Horizontal */\n  padding: 10px 20px 15px 25px; /* Top | Right | Bottom | Left */\n  \n  /* Border */\n  border: 2px solid #333;\n  border-radius: 8px;\n  \n  /* Margin */\n  margin: 20px auto; /* Vertical | Horizontal (auto centers) */\n  \n  /* Box-sizing changes how width/height work */\n  box-sizing: border-box; /* Include padding/border in width/height */\n}\n```\n\n## Layout Systems\n\n### Flexbox\n\nOne-dimensional layout system (row or column):\n\n```css\n.container {\n  display: flex;\n  \n  /* Direction */\n  flex-direction: row; /* row | row-reverse | column | column-reverse */\n  \n  /* Wrapping */\n  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */\n  \n  /* Main axis alignment */\n  justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */\n  \n  /* Cross axis alignment */\n  align-items: center; /* flex-start | flex-end | center | stretch | baseline */\n  \n  /* Multi-line cross axis */\n  align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */\n  \n  /* Gap between items */\n  gap: 1rem;\n}\n\n.item {\n  /* Grow factor */\n  flex-grow: 1; /* Takes available space */\n  \n  /* Shrink factor */\n  flex-shrink: 1; /* Can shrink if needed */\n  \n  /* Base size */\n  flex-basis: 200px; /* Initial size before growing/shrinking */\n  \n  /* Shorthand */\n  flex: 1 1 200px; /* grow | shrink | basis */\n  \n  /* Individual alignment */\n  align-self: flex-end; /* Overrides container's align-items */\n  \n  /* Order */\n  order: 2; /* Change visual order (default: 0) */\n}\n```\n\n### CSS Grid\n\nTwo-dimensional layout system (rows and columns):\n\n```css\n.container {\n  display: grid;\n  \n  /* Define columns */\n  grid-template-columns: 200px 1fr 1fr; /* Fixed | Flexible | Flexible */\n  grid-template-columns: repeat(3, 1fr); /* Three equal columns */\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */\n  \n  /* Define rows */\n  grid-template-rows: 100px auto 50px; /* Fixed | Auto | Fixed */\n  \n  /* Named areas */\n  grid-template-areas:\n    \"header header header\"\n    \"sidebar main main\"\n    \"footer footer footer\";\n  \n  /* Gap between cells */\n  gap: 1rem; /* Row and column gap */\n  row-gap: 1rem;\n  column-gap: 2rem;\n  \n  /* Alignment */\n  justify-items: start; /* Align items horizontally within cells */\n  align-items: start; /* Align items vertically within cells */\n  justify-content: center; /* Align grid within container horizontally */\n  align-content: center; /* Align grid within container vertically */\n}\n\n.item {\n  /* Span columns */\n  grid-column: 1 / 3; /* Start / End */\n  grid-column: span 2; /* Span 2 columns */\n  \n  /* Span rows */\n  grid-row: 1 / 3;\n  grid-row: span 2;\n  \n  /* Named area */\n  grid-area: header;\n  \n  /* Individual alignment */\n  justify-self: center; /* Horizontal alignment */\n  align-self: center; /* Vertical alignment */\n}\n```\n\n### Grid vs Flexbox\n\n| Use Case | Best Choice |\n|----------|-------------|\n| One-dimensional layout (row or column) | Flexbox |\n| Two-dimensional layout (rows and columns) | Grid |\n| Align items along one axis | Flexbox |\n| Create complex page layouts | Grid |\n| Distribute space between items | Flexbox |\n| Precise control over rows and columns | Grid |\n| Content-first responsive design | Flexbox |\n| Layout-first responsive design | Grid |\n\n## Positioning\n\n### Position Types\n\n```css\n/* Static (default) - normal flow */\n.static { position: static; }\n\n/* Relative - offset from normal position */\n.relative {\n  position: relative;\n  top: 10px; /* Move down 10px */\n  left: 20px; /* Move right 20px */\n}\n\n/* Absolute - removed from flow, positioned relative to nearest positioned ancestor */\n.absolute {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n/* Fixed - removed from flow, positioned relative to viewport */\n.fixed {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Sticky - switches between relative and fixed based on scroll */\n.sticky {\n  position: sticky;\n  top: 0; /* Sticks to top when scrolling */\n}\n```\n\n### Inset Properties\n\nShorthand for positioning:\n\n```css\n.element {\n  position: absolute;\n  inset: 0; /* All sides: top, right, bottom, left = 0 */\n  inset: 10px 20px; /* Vertical | Horizontal */\n  inset: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */\n}\n```\n\n### Stacking Context\n\nControl layering with `z-index`:\n\n```css\n.behind { z-index: 1; }\n.ahead { z-index: 10; }\n.top { z-index: 100; }\n```\n\n**Note**: `z-index` only works on positioned elements (not `static`)\n\n## Responsive Design\n\n### Media Queries\n\nApply styles based on device characteristics:\n\n```css\n/* Mobile-first approach */\n.container {\n  padding: 1rem;\n}\n\n/* Tablet and up */\n@media (min-width: 768px) {\n  .container {\n    padding: 2rem;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n}\n\n/* Desktop */\n@media (min-width: 1024px) {\n  .container {\n    padding: 3rem;\n  }\n}\n\n/* Landscape orientation */\n@media (orientation: landscape) {\n  .header { height: 60px; }\n}\n\n/* High-DPI screens */\n@media (min-resolution: 192dpi) {\n  .logo { background-image: url('logo@2x.png'); }\n}\n\n/* Dark mode preference */\n@media (prefers-color-scheme: dark) {\n  body {\n    background: #222;\n    color: #fff;\n  }\n}\n\n/* Reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n### Responsive Units\n\n| Unit | Description | Example |\n|------|-------------|---------|\n| `px` | Pixels (absolute) | `16px` |\n| `em` | Relative to parent font-size | `1.5em` |\n| `rem` | Relative to root font-size | `1.5rem` |\n| `%` | Relative to parent | `50%` |\n| `vw` | Viewport width (1vw = 1% of viewport width) | `50vw` |\n| `vh` | Viewport height | `100vh` |\n| `vmin` | Smaller of vw or vh | `10vmin` |\n| `vmax` | Larger of vw or vh | `10vmax` |\n| `ch` | Width of \"0\" character | `40ch` |\n| `fr` | Fraction of available space (Grid only) | `1fr` |\n\n### Responsive Images\n\n```css\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Art direction with picture element */\n```\n\n```html\n\u003cpicture\u003e\n  \u003csource media=\"(min-width: 1024px)\" srcset=\"large.jpg\"\u003e\n  \u003csource media=\"(min-width: 768px)\" srcset=\"medium.jpg\"\u003e\n  \u003cimg src=\"small.jpg\" alt=\"Responsive image\"\u003e\n\u003c/picture\u003e\n```\n\n## Typography\n\n```css\n.text {\n  /* Font family */\n  font-family: 'Helvetica Neue', Arial, sans-serif;\n  \n  /* Font size */\n  font-size: 16px; /* Base size */\n  font-size: 1rem; /* Relative to root */\n  font-size: clamp(14px, 2vw, 20px); /* Responsive with min/max */\n  \n  /* Font weight */\n  font-weight: normal; /* 400 */\n  font-weight: bold; /* 700 */\n  font-weight: 300; /* Light */\n  \n  /* Font style */\n  font-style: italic;\n  \n  /* Line height */\n  line-height: 1.5; /* 1.5 times font-size */\n  line-height: 24px;\n  \n  /* Letter spacing */\n  letter-spacing: 0.05em;\n  \n  /* Text alignment */\n  text-align: left; /* left | right | center | justify */\n  \n  /* Text decoration */\n  text-decoration: underline;\n  text-decoration: none; /* Remove underline from links */\n  \n  /* Text transform */\n  text-transform: uppercase; /* uppercase | lowercase | capitalize */\n  \n  /* Word spacing */\n  word-spacing: 0.1em;\n  \n  /* White space handling */\n  white-space: nowrap; /* Don't wrap */\n  white-space: pre-wrap; /* Preserve whitespace, wrap lines */\n  \n  /* Text overflow */\n  overflow: hidden;\n  text-overflow: ellipsis; /* Show ... when text overflows */\n  \n  /* Word break */\n  word-wrap: break-word; /* Break long words */\n  overflow-wrap: break-word; /* Modern version */\n}\n```\n\n## Colors\n\n```css\n.colors {\n  /* Named colors */\n  color: red;\n  \n  /* Hex */\n  color: #ff0000; /* Red */\n  color: #f00; /* Shorthand */\n  color: #ff0000ff; /* With alpha */\n  \n  /* RGB */\n  color: rgb(255, 0, 0);\n  color: rgba(255, 0, 0, 0.5); /* With alpha */\n  color: rgb(255 0 0 / 0.5); /* Modern syntax */\n  \n  /* HSL (Hue, Saturation, Lightness) */\n  color: hsl(0, 100%, 50%); /* Red */\n  color: hsla(0, 100%, 50%, 0.5); /* With alpha */\n  color: hsl(0 100% 50% / 0.5); /* Modern syntax */\n  \n  /* Color keywords */\n  color: currentColor; /* Inherit color */\n  color: transparent;\n}\n```\n\n### CSS Color Space\n\nModern color spaces for wider gamut:\n\n```css\n.modern-colors {\n  /* Display P3 (Apple devices) */\n  color: color(display-p3 1 0 0);\n  \n  /* Lab color space */\n  color: lab(50% 125 0);\n  \n  /* LCH color space */\n  color: lch(50% 125 0deg);\n}\n```\n\n## Animations and Transitions\n\n### Transitions\n\nSmooth changes between states:\n\n```css\n.button {\n  background: blue;\n  color: white;\n  transition: all 0.3s ease;\n  /* transition: property duration timing-function delay */\n}\n\n.button:hover {\n  background: darkblue;\n  transform: scale(1.05);\n}\n\n/* Individual properties */\n.element {\n  transition-property: opacity, transform;\n  transition-duration: 0.3s, 0.5s;\n  transition-timing-function: ease, ease-in-out;\n  transition-delay: 0s, 0.1s;\n}\n```\n\n### Keyframe Animations\n\n```css\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.element {\n  animation: fadeIn 0.5s ease forwards;\n  /* animation: name duration timing-function delay iteration-count direction fill-mode */\n}\n\n/* Multiple keyframes */\n@keyframes slide {\n  0% { transform: translateX(0); }\n  50% { transform: translateX(100px); }\n  100% { transform: translateX(0); }\n}\n\n.slider {\n  animation: slide 2s infinite alternate;\n}\n```\n\n## Transforms\n\n```css\n.transform {\n  /* Translate (move) */\n  transform: translate(50px, 100px); /* X, Y */\n  transform: translateX(50px);\n  transform: translateY(100px);\n  \n  /* Rotate */\n  transform: rotate(45deg);\n  \n  /* Scale */\n  transform: scale(1.5); /* 150% size */\n  transform: scale(2, 0.5); /* X, Y different */\n  \n  /* Skew */\n  transform: skew(10deg, 5deg);\n  \n  /* Multiple transforms */\n  transform: translate(50px, 0) rotate(45deg) scale(1.2);\n  \n  /* 3D transforms */\n  transform: rotateX(45deg) rotateY(30deg);\n  transform: perspective(500px) translateZ(100px);\n}\n```\n\n## CSS Variables (Custom Properties)\n\n```css\n:root {\n  --primary-color: #007bff;\n  --secondary-color: #6c757d;\n  --spacing: 1rem;\n  --border-radius: 4px;\n}\n\n.element {\n  color: var(--primary-color);\n  padding: var(--spacing);\n  border-radius: var(--border-radius);\n  \n  /* With fallback */\n  color: var(--accent-color, red);\n}\n\n/* Dynamic changes */\n.dark-theme {\n  --primary-color: #0056b3;\n  --background: #222;\n  --text: #fff;\n}\n```\n\n## CSS Preprocessors\n\n### Common Features\n\n- Variables\n- Nesting\n- Mixins (reusable styles)\n- Functions\n- Imports\n\n**Popular Preprocessors**: Sass/SCSS, Less, Stylus\n\n## Best Practices\n\n### Do's\n\n- ✅ Use external stylesheets\n- ✅ Use class selectors over ID selectors\n- ✅ Keep specificity low\n- ✅ Use responsive units (rem, em, %)\n- ✅ Mobile-first approach\n- ✅ Use CSS variables for theming\n- ✅ Organize CSS logically\n- ✅ Use shorthand properties\n- ✅ Minify CSS for production\n\n### Don'ts\n\n- ❌ Use `!important` excessively\n- ❌ Use inline styles\n- ❌ Use fixed pixel widths\n- ❌ Over-nest selectors\n- ❌ Use vendor prefixes manually (use autoprefixer)\n- ❌ Forget to test cross-browser\n- ❌ Use IDs for styling\n- ❌ Ignore CSS specificity\n\n## Glossary Terms\n\n**Key Terms Covered**:\n\n- Alignment container\n- Alignment subject\n- Aspect ratio\n- Baseline\n- Block (CSS)\n- Bounding box\n- Cross Axis\n- CSS\n- CSS Object Model (CSSOM)\n- CSS pixel\n- CSS preprocessor\n- Descriptor (CSS)\n- Fallback alignment\n- Flex\n- Flex container\n- Flex item\n- Flexbox\n- Flow relative values\n- Grid\n- Grid areas\n- Grid Axis\n- Grid Cell\n- Grid Column\n- Grid container\n- Grid lines\n- Grid Row\n- Grid Tracks\n- Gutters\n- Ink overflow\n- Inset properties\n- Layout mode\n- Logical properties\n- Main axis\n- Media query\n- Physical properties\n- Pixel\n- Property (CSS)\n- Pseudo-class\n- Pseudo-element\n- Selector (CSS)\n- Stacking context\n- Style origin\n- Stylesheet\n- Vendor prefix\n\n## Additional Resources\n\n- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)\n- [CSS Tricks Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\n- [Can I Use](https://caniuse.com/) - Browser compatibility tables\n","references/data-formats-encoding.md":"# Data Formats \u0026 Encoding Reference\n\nData formats, character encodings, and serialization for web development.\n\n## JSON (JavaScript Object Notation)\n\nLightweight data interchange format.\n\n### Syntax\n\n```json\n{\n  \"string\": \"value\",\n  \"number\": 42,\n  \"boolean\": true,\n  \"null\": null,\n  \"array\": [1, 2, 3],\n  \"object\": {\n    \"nested\": \"value\"\n  }\n}\n```\n\n**Permitted Types**: string, number, boolean, null, array, object  \n**Not Permitted**: undefined, functions, dates, RegExp\n\n### JavaScript Methods\n\n```javascript\n// Parse JSON string\nconst data = JSON.parse('{\"name\":\"John\",\"age\":30}');\n\n// Stringify object\nconst json = JSON.stringify({ name: 'John', age: 30 });\n\n// Pretty print (indentation)\nconst json = JSON.stringify(data, null, 2);\n\n// Custom serialization\nconst json = JSON.stringify(obj, (key, value) =\u003e {\n  if (key === 'password') return undefined; // Exclude\n  return value;\n});\n\n// toJSON method\nconst obj = {\n  name: 'John',\n  date: new Date(),\n  toJSON() {\n    return {\n      name: this.name,\n      date: this.date.toISOString()\n    };\n  }\n};\n```\n\n### JSON Type Representation\n\nHow JavaScript types map to JSON:\n- String → string\n- Number → number\n- Boolean → boolean\n- null → null\n- Array → array\n- Object → object\n- undefined → omitted\n- Function → omitted\n- Symbol → omitted\n- Date → ISO 8601 string\n\n## XML (Extensible Markup Language)\n\nMarkup language for encoding documents.\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003cusers\u003e\n  \u003cuser id=\"1\"\u003e\n    \u003cname\u003eJohn Doe\u003c/name\u003e\n    \u003cemail\u003ejohn@example.com\u003c/email\u003e\n  \u003c/user\u003e\n  \u003cuser id=\"2\"\u003e\n    \u003cname\u003eJane Smith\u003c/name\u003e\n    \u003cemail\u003ejane@example.com\u003c/email\u003e\n  \u003c/user\u003e\n\u003c/users\u003e\n```\n\n**Use Cases**:\n- Configuration files\n- Data exchange\n- RSS/Atom feeds\n- SOAP web services\n\n### Parsing XML in JavaScript\n\n```javascript\n// Parse XML string\nconst parser = new DOMParser();\nconst xmlDoc = parser.parseFromString(xmlString, 'text/xml');\n\n// Query elements\nconst users = xmlDoc.querySelectorAll('user');\nusers.forEach(user =\u003e {\n  const name = user.querySelector('name').textContent;\n  console.log(name);\n});\n\n// Create XML\nconst serializer = new XMLSerializer();\nconst xmlString = serializer.serializeToString(xmlDoc);\n```\n\n## Character Encoding\n\n### UTF-8\n\nUniversal character encoding (recommended for web).\n\n**Characteristics**:\n- Variable-width (1-4 bytes per character)\n- Backward compatible with ASCII\n- Supports all Unicode characters\n\n```html\n\u003cmeta charset=\"UTF-8\"\u003e\n```\n\n### UTF-16\n\n2 or 4 bytes per character.\n\n**Use**: JavaScript internally uses UTF-16\n\n```javascript\n'A'.charCodeAt(0); // 65\nString.fromCharCode(65); // 'A'\n\n// Emoji (requires surrogate pair in UTF-16)\n'😀'.length; // 2 (in JavaScript)\n```\n\n### ASCII\n\n7-bit encoding (128 characters).\n\n**Range**: 0-127  \n**Includes**: English letters, digits, common symbols\n\n### Code Point vs Code Unit\n\n- **Code Point**: Unicode character (U+0041 = 'A')\n- **Code Unit**: 16-bit value in UTF-16\n\n```javascript\n// Code points\n'A'.codePointAt(0); // 65\nString.fromCodePoint(0x1F600); // '😀'\n\n// Iterate code points\nfor (const char of 'Hello 😀') {\n  console.log(char);\n}\n```\n\n## Base64\n\nBinary-to-text encoding scheme.\n\n```javascript\n// Encode\nconst encoded = btoa('Hello World'); // \"SGVsbG8gV29ybGQ=\"\n\n// Decode\nconst decoded = atob('SGVsbG8gV29ybGQ='); // \"Hello World\"\n\n// Handle Unicode (requires extra step)\nconst encoded = btoa(unescape(encodeURIComponent('Hello 世界')));\nconst decoded = decodeURIComponent(escape(atob(encoded)));\n\n// Modern approach\nconst encoder = new TextEncoder();\nconst decoder = new TextDecoder();\n\nconst bytes = encoder.encode('Hello 世界');\nconst decoded = decoder.decode(bytes);\n```\n\n**Use Cases**:\n- Embed binary data in JSON/XML\n- Data URLs (`data:image/png;base64,...`)\n- Basic authentication headers\n\n## URL Encoding (Percent Encoding)\n\nEncode special characters in URLs.\n\n```javascript\n// encodeURIComponent (encode everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( ))\nconst encoded = encodeURIComponent('Hello World!'); // \"Hello%20World%21\"\nconst decoded = decodeURIComponent(encoded); // \"Hello World!\"\n\n// encodeURI (encode less - for full URLs)\nconst url = encodeURI('http://example.com/search?q=hello world');\n\n// Modern URL API\nconst url = new URL('http://example.com/search');\nurl.searchParams.set('q', 'hello world');\nconsole.log(url.toString()); // Automatically encoded\n```\n\n## MIME Types\n\nMedia type identification.\n\n### Common MIME Types\n\n| Type | MIME Type |\n|------|-----------|\n| HTML | `text/html` |\n| CSS | `text/css` |\n| JavaScript | `text/javascript`, `application/javascript` |\n| JSON | `application/json` |\n| XML | `application/xml`, `text/xml` |\n| Plain Text | `text/plain` |\n| JPEG | `image/jpeg` |\n| PNG | `image/png` |\n| GIF | `image/gif` |\n| SVG | `image/svg+xml` |\n| PDF | `application/pdf` |\n| ZIP | `application/zip` |\n| MP4 Video | `video/mp4` |\n| MP3 Audio | `audio/mpeg` |\n| Form Data | `application/x-www-form-urlencoded` |\n| Multipart | `multipart/form-data` |\n\n```html\n\u003clink rel=\"stylesheet\" href=\"styles.css\" type=\"text/css\"\u003e\n\u003cscript src=\"app.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n```http\nContent-Type: application/json; charset=utf-8\nContent-Type: text/html; charset=utf-8\nContent-Type: multipart/form-data; boundary=----WebKitFormBoundary\n```\n\n## Serialization \u0026 Deserialization\n\nConverting data structures to/from storable format.\n\n### JSON Serialization\n\n```javascript\n// Serialize\nconst obj = { name: 'John', date: new Date() };\nconst json = JSON.stringify(obj);\n\n// Deserialize\nconst parsed = JSON.parse(json);\n```\n\n### Serializable Objects\n\nObjects that can be serialized by structured clone algorithm:\n- Basic types\n- Arrays, Objects,\n- Date, RegExp\n- Map, Set\n- ArrayBuffer, TypedArrays\n\n**Not Serializable**:\n- Functions\n- DOM nodes\n- Symbols (as values)\n- Objects with prototype methods\n\n## Character References\n\nHTML entities for special characters.\n\n```html\n\u0026lt;    \u003c!-- \u003c --\u003e\n\u0026gt;    \u003c!-- \u003e --\u003e\n\u0026amp;   \u003c!-- \u0026 --\u003e\n\u0026quot;  \u003c!-- \" --\u003e\n\u0026apos;  \u003c!-- ' --\u003e\n\u0026nbsp;  \u003c!-- non-breaking space --\u003e\n\u0026copy;  \u003c!-- © --\u003e\n\u0026#8364; \u003c!-- € --\u003e\n\u0026#x20AC; \u003c!-- € (hex) --\u003e\n```\n\n## Data URLs\n\nEmbed data directly in URLs.\n\n```html\n\u003c!-- Inline image --\u003e\n\u003cimg src=\"data:image/png;base64,iVBORw0KGgoAAAANS...\" alt=\"Icon\"\u003e\n\n\u003c!-- Inline SVG --\u003e\n\u003cimg src=\"data:image/svg+xml,%3Csvg xmlns='...'%3E...%3C/svg%3E\" alt=\"Logo\"\u003e\n\n\u003c!-- Inline CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"data:text/css,body%7Bmargin:0%7D\"\u003e\n```\n\n```javascript\n// Create data URL from canvas\nconst canvas = document.querySelector('canvas');\nconst dataURL = canvas.toDataURL('image/png');\n\n// Create data URL from blob\nconst blob = new Blob(['Hello'], { type: 'text/plain' });\nconst reader = new FileReader();\nreader.onload = () =\u003e {\n  const dataURL = reader.result;\n};\nreader.readAsDataURL(blob);\n```\n\n## Escape Sequences\n\n```javascript\n// String escapes\n'It\\'s a string'; // Single quote\n\"He said \\\"Hello\\\"\"; // Double quote\n'Line 1\\nLine 2'; // Newline\n'Column1\\tColumn2'; // Tab\n'Path\\\\to\\\\file'; // Backslash\n```\n\n## Data Structures\n\n### Arrays\n\nOrdered collections:\n```javascript\nconst arr = [1, 2, 3];\narr.push(4); // Add to end\narr.pop(); // Remove from end\n```\n\n### Objects\n\nKey-value pairs:\n```javascript\nconst obj = { key: 'value' };\nobj.newKey = 'new value';\ndelete obj.key;\n```\n\n### Map\n\nKeyed collections (any type as key):\n```javascript\nconst map = new Map();\nmap.set('key', 'value');\nmap.set(obj, 'value');\nmap.get('key');\nmap.has('key');\nmap.delete('key');\n```\n\n### Set\n\nUnique values:\n```javascript\nconst set = new Set([1, 2, 2, 3]); // {1, 2, 3}\nset.add(4);\nset.has(2); // true\nset.delete(1);\n```\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- ASCII\n- Base64\n- Character\n- Character encoding\n- Character reference\n- Character set\n- Code point\n- Code unit\n- Data structure\n- Deserialization\n- Enumerated\n- Escape character\n- JSON\n- JSON type representation\n- MIME\n- MIME type\n- Percent-encoding\n- Serialization\n- Serializable object\n- Unicode\n- URI\n- URL\n- URN\n- UTF-8\n- UTF-16\n\n## Additional Resources\n\n- [JSON Specification](https://www.json.org/)\n- [Unicode Standard](https://unicode.org/standard/standard.html)\n- [MDN Character Encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)\n- [MIME Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)\n","references/development-tools.md":"# Development Tools Reference\n\nTools and workflows for web development.\n\n## Version Control\n\n### Git\n\nDistributed version control system.\n\n**Basic Commands**:\n```bash\n# Initialize repository\ngit init\n\n# Clone repository\ngit clone https://github.com/user/repo.git\n\n# Check status\ngit status\n\n# Stage changes\ngit add file.js\ngit add . # All files\n\n# Commit\ngit commit -m \"commit message\"\n\n# Push to remote\ngit push origin main\n\n# Pull from remote\ngit pull origin main\n\n# Branches\ngit branch feature-name\ngit checkout feature-name\ngit checkout -b feature-name # Create and switch\n\n# Merge\ngit checkout main\ngit merge feature-name\n\n# View history\ngit log\ngit log --oneline --graph\n```\n\n**Best Practices**:\n- Commit often with meaningful messages\n- Use branches for features\n- Pull before push\n- Review changes before committing\n- Use .gitignore for generated files\n\n### GitHub/GitLab/Bitbucket\n\nGit hosting platforms with collaboration features:\n- Pull requests / Merge requests\n- Code review\n- Issue tracking\n- CI/CD integration\n- Project management\n\n## Package Managers\n\n### npm (Node Package Manager)\n\n```bash\n# Initialize project\nnpm init\nnpm init -y # Skip prompts\n\n# Install dependencies\nnpm install package-name\nnpm install -D package-name # Dev dependency\nnpm install -g package-name # Global\n\n# Update packages\nnpm update\nnpm outdated\n\n# Run scripts\nnpm run build\nnpm test\nnpm start\n\n# Audit security\nnpm audit\nnpm audit fix\n```\n\n**package.json**:\n```json\n{\n  \"name\": \"my-project\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"start\": \"node server.js\",\n    \"build\": \"webpack\",\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.18.0\"\n  },\n  \"devDependencies\": {\n    \"webpack\": \"^5.75.0\"\n  }\n}\n```\n\n### Yarn\n\nFaster alternative to npm:\n```bash\nyarn add package-name\nyarn remove package-name\nyarn upgrade\nyarn build\n```\n\n### pnpm\n\nEfficient package manager (disk space saving):\n```bash\npnpm install\npnpm add package-name\npnpm remove package-name\n```\n\n## Build Tools\n\n### Webpack\n\nModule bundler:\n\n```javascript\n// webpack.config.js\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: 'babel-loader',\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']\n      }\n    ]\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.html'\n    })\n  ]\n};\n```\n\n### Vite\n\nFast modern build tool:\n\n```bash\n# Create project\nnpm create vite@latest my-app\n\n# Dev server\nnpm run dev\n\n# Build\nnpm run build\n```\n\n### Parcel\n\nZero-config bundler:\n```bash\nparcel index.html\nparcel build index.html\n```\n\n## Task Runners\n\n### npm Scripts\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"webpack serve --mode development\",\n    \"build\": \"webpack --mode production\",\n    \"test\": \"jest\",\n    \"lint\": \"eslint src/\",\n    \"format\": \"prettier --write src/\"\n  }\n}\n```\n\n## Testing Frameworks\n\n### Jest\n\nJavaScript testing framework:\n\n```javascript\n// sum.test.js\nconst sum = require('./sum');\n\ndescribe('sum function', () =\u003e {\n  test('adds 1 + 2 to equal 3', () =\u003e {\n    expect(sum(1, 2)).toBe(3);\n  });\n  \n  test('handles negative numbers', () =\u003e {\n    expect(sum(-1, -2)).toBe(-3);\n  });\n});\n```\n\n### Vitest\n\nVite-powered testing (Jest-compatible):\n```javascript\nimport { describe, test, expect } from 'vitest';\n\ndescribe('math', () =\u003e {\n  test('addition', () =\u003e {\n    expect(1 + 1).toBe(2);\n  });\n});\n```\n\n### Playwright\n\nEnd-to-end testing:\n```javascript\nimport { test, expect } from '@playwright/test';\n\ntest('homepage has title', async ({ page }) =\u003e {\n  await page.goto('https://example.com');\n  await expect(page).toHaveTitle(/Example/);\n});\n```\n\n## Linters \u0026 Formatters\n\n### ESLint\n\nJavaScript linter:\n\n```javascript\n// .eslintrc.js\nmodule.exports = {\n  extends: ['eslint:recommended'],\n  rules: {\n    'no-console': 'warn',\n    'no-unused-vars': 'error'\n  }\n};\n```\n\n### Prettier\n\nCode formatter:\n\n```json\n// .prettierrc\n{\n  \"singleQuote\": true,\n  \"semi\": true,\n  \"tabWidth\": 2,\n  \"trailingComma\": \"es5\"\n}\n```\n\n### Stylelint\n\nCSS linter:\n```json\n{\n  \"extends\": \"stylelint-config-standard\",\n  \"rules\": {\n    \"indentation\": 2,\n    \"color-hex-length\": \"short\"\n  }\n}\n```\n\n## IDEs and Editors\n\n### Visual Studio Code\n\n**Key Features**:\n- IntelliSense\n- Debugging\n- Git integration\n- Extensions marketplace\n- Terminal integration\n\n**Popular Extensions**:\n- ESLint\n- Prettier\n- Live Server\n- GitLens\n- Path Intellisense\n\n### WebStorm\n\nFull-featured IDE for web development by JetBrains.\n\n### Sublime Text\n\nLightweight, fast text editor.\n\n### Vim/Neovim\n\nTerminal-based editor (steep learning curve).\n\n## TypeScript\n\nTyped superset of JavaScript:\n\n```typescript\n// types.ts\ninterface User {\n  id: number;\n  name: string;\n  email?: string; // Optional\n}\n\nfunction getUser(id: number): User {\n  return { id, name: 'John' };\n}\n\n// Generics\nfunction identity\u003cT\u003e(arg: T): T {\n  return arg;\n}\n```\n\n```json\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2020\",\n    \"module\": \"ESNext\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true\n  }\n}\n```\n\n## Continuous Integration (CI/CD)\n\n### GitHub Actions\n\n```yaml\n# .github/workflows/test.yml\nname: Test\non: [push, pull_request]\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: '18'\n      - run: npm ci\n      - run: npm test\n```\n\n### Other CI/CD Platforms\n\n- **GitLab CI**\n- **CircleCI**\n- **Travis CI**\n- **Jenkins**\n\n## Debugging\n\n### Browser DevTools\n\n```javascript\n// Debugging statements\ndebugger; // Pause execution\nconsole.log('value:', value);\nconsole.error('error:', error);\nconsole.trace(); // Stack trace\n```\n\n### Node.js Debugging\n\n```bash\n# Built-in debugger\nnode inspect app.js\n\n# Chrome DevTools\nnode --inspect app.js\nnode --inspect-brk app.js # Break on start\n```\n\n## Performance Profiling\n\n### Chrome DevTools Performance\n\n- Record CPU activity\n- Analyze flame charts\n- Identify bottlenecks\n\n### Lighthouse\n\n```bash\n# CLI\nnpm install -g lighthouse\nlighthouse https://example.com\n\n# DevTools\nOpen Chrome DevTools \u003e Lighthouse tab\n```\n\n## Monitoring\n\n### Error Tracking\n\n- **Sentry**: Error monitoring\n- **Rollbar**: Real-time error tracking\n- **Bugsnag**: Error monitoring\n\n### Analytics\n\n- **Google Analytics**\n- **Plausible**: Privacy-friendly\n- **Matomo**: Self-hosted\n\n### RUM (Real User Monitoring)\n\n- **SpeedCurve**\n- **New Relic**\n- **Datadog**\n\n## Developer Workflow\n\n### Typical Workflow\n\n1. **Setup**: Clone repo, install dependencies\n2. **Develop**: Write code, run dev server\n3. **Test**: Run unit/integration tests\n4. **Lint/Format**: Check code quality\n5. **Commit**: Git commit and push\n6. **CI/CD**: Automated tests and deployment\n7. **Deploy**: Push to production\n\n### Environment Variables\n\n```bash\n# .env\nDATABASE_URL=postgres://localhost/db\nAPI_KEY=secret-key-here\nNODE_ENV=development\n```\n\n```javascript\n// Access in Node.js\nconst dbUrl = process.env.DATABASE_URL;\n```\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Bun\n- Continuous integration\n- Deno\n- Developer tools\n- Fork\n- Fuzz testing\n- Git\n- IDE\n- Node.js\n- Repo\n- Rsync\n- SCM\n- SDK\n- Smoke test\n- SVN\n- TypeScript\n\n## Additional Resources\n\n- [Git Documentation](https://git-scm.com/doc)\n- [npm Documentation](https://docs.npmjs.com/)\n- [Webpack Guides](https://webpack.js.org/guides/)\n- [Jest Documentation](https://jestjs.io/docs/getting-started)\n- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)\n","references/glossary.md":"# Glossary\n\n- Reference [Glossary of Web Terms](https://developer.mozilla.org/en-US/docs/Glossary)\n\n## Web Terms\n\nThis glossary contains comprehensive web terms categorized across 15 domains:\n\n- HTML \u0026 Markup\n- CSS \u0026 Styling  \n- JavaScript \u0026 Programming\n- Web APIs \u0026 DOM\n- HTTP \u0026 Networking\n- Security \u0026 Authentication\n- Performance \u0026 Optimization\n- Accessibility\n- Web Protocols \u0026 Standards\n- Browsers \u0026 Engines\n- Development Tools\n- Data Formats \u0026 Encoding\n- Media \u0026 Graphics\n- Architecture \u0026 Patterns\n- Servers \u0026 Infrastructure\n\n## All Web Terms\n\n- [Abstraction](https://developer.mozilla.org/en-US/docs/Glossary/Abstraction)\n- [Accent](https://developer.mozilla.org/en-US/docs/Glossary/Accent)\n- [Accessibility](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility)\n- [Accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree)\n- [Accessible description](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description)\n- [Accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name)\n- [Adobe Flash](https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash)\n- [Advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure)\n- [Ajax](https://developer.mozilla.org/en-US/docs/Glossary/Ajax)\n- [Algorithm](https://developer.mozilla.org/en-US/docs/Glossary/Algorithm)\n- [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_container)\n- [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_subject)\n- [Alpha (*alpha channel*)](https://developer.mozilla.org/en-US/docs/Glossary/Alpha)\n- [ALPN](https://developer.mozilla.org/en-US/docs/Glossary/ALPN)\n- [API](https://developer.mozilla.org/en-US/docs/Glossary/API)\n- [Apple Safari](https://developer.mozilla.org/en-US/docs/Glossary/Apple_Safari)\n- [Application context](https://developer.mozilla.org/en-US/docs/Glossary/Application_context)\n- [Argument](https://developer.mozilla.org/en-US/docs/Glossary/Argument)\n- [ARIA](https://developer.mozilla.org/en-US/docs/Glossary/ARIA)\n- [ARPA](https://developer.mozilla.org/en-US/docs/Glossary/ARPA)\n- [ARPANET](https://developer.mozilla.org/en-US/docs/Glossary/ARPANET)\n- [Array](https://developer.mozilla.org/en-US/docs/Glossary/Array)\n- [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII)\n- [Aspect ratio](https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio)\n- [Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous)\n- [ATAG](https://developer.mozilla.org/en-US/docs/Glossary/ATAG)\n- [Attribute](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)\n- [Authentication](https://developer.mozilla.org/en-US/docs/Glossary/Authentication)\n- [Authenticator](https://developer.mozilla.org/en-US/docs/Glossary/Authenticator)\n- [Bandwidth](https://developer.mozilla.org/en-US/docs/Glossary/Bandwidth)\n- [Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)\n- [Baseline](https://developer.mozilla.org/en-US/docs/Glossary/Baseline)\n  - [Baseline (*compatibility*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility)\n  - [Baseline (*typography*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Typography)\n- [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag)\n- [Beacon](https://developer.mozilla.org/en-US/docs/Glossary/Beacon)\n- [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bézier_curve)\n- [bfcache](https://developer.mozilla.org/en-US/docs/Glossary/bfcache)\n- [BiDi](https://developer.mozilla.org/en-US/docs/Glossary/BiDi)\n- [BigInt](https://developer.mozilla.org/en-US/docs/Glossary/BigInt)\n- [Binding](https://developer.mozilla.org/en-US/docs/Glossary/Binding)\n- [Bitwise flags](https://developer.mozilla.org/en-US/docs/Glossary/Bitwise_flags)\n- [Blink](https://developer.mozilla.org/en-US/docs/Glossary/Blink)\n  - [blink element (*\\\u003cblink\\\u003e tag*)](https://developer.mozilla.org/en-US/docs/Glossary/blink_element)\n- [Block](https://developer.mozilla.org/en-US/docs/Glossary/Block)\n  - [Block (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS)\n  - [Block (*scripting*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting)\n- [Block cipher mode of operation](https://developer.mozilla.org/en-US/docs/Glossary/Block_cipher_mode_of_operation)\n- [Block-level content](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content)\n- [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)\n  - [Boolean (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/JavaScript)\n  - [Boolean attribute (*ARIA*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/ARIA)\n  - [Boolean attribute (*HTML*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML)\n- [Bounding box](https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box)\n- [Breadcrumb](https://developer.mozilla.org/en-US/docs/Glossary/Breadcrumb)\n- [Brotli compression](https://developer.mozilla.org/en-US/docs/Glossary/Brotli_compression)\n- [Browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)\n- [Browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context)\n- [Buffer](https://developer.mozilla.org/en-US/docs/Glossary/Buffer)\n- [Bun](https://developer.mozilla.org/en-US/docs/Glossary/Bun)\n- [Cache](https://developer.mozilla.org/en-US/docs/Glossary/Cache)\n- [Cacheable](https://developer.mozilla.org/en-US/docs/Glossary/Cacheable)\n- [CalDAV](https://developer.mozilla.org/en-US/docs/Glossary/CalDAV)\n- [Call stack](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)\n- [Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)\n- [Camel case](https://developer.mozilla.org/en-US/docs/Glossary/Camel_case)\n- [Canonical order](https://developer.mozilla.org/en-US/docs/Glossary/Canonical_order)\n- [Canvas](https://developer.mozilla.org/en-US/docs/Glossary/Canvas)\n- [Card sorting](https://developer.mozilla.org/en-US/docs/Glossary/Card_sorting)\n- [CardDAV](https://developer.mozilla.org/en-US/docs/Glossary/CardDAV)\n- [Caret](https://developer.mozilla.org/en-US/docs/Glossary/Caret)\n- [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)\n- [Certificate authority](https://developer.mozilla.org/en-US/docs/Glossary/Certificate_authority)\n- [Certified](https://developer.mozilla.org/en-US/docs/Glossary/Certified)\n- [Challenge-response authentication](https://developer.mozilla.org/en-US/docs/Glossary/Challenge-response_authentication)\n- [Character](https://developer.mozilla.org/en-US/docs/Glossary/Character)\n- [Character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)\n- [Character reference](https://developer.mozilla.org/en-US/docs/Glossary/Character_reference)\n- [Character set](https://developer.mozilla.org/en-US/docs/Glossary/Character_set)\n- [Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)\n- [CIA](https://developer.mozilla.org/en-US/docs/Glossary/CIA)\n- [Cipher](https://developer.mozilla.org/en-US/docs/Glossary/Cipher)\n- [Cipher suite](https://developer.mozilla.org/en-US/docs/Glossary/Cipher_suite)\n- [Ciphertext](https://developer.mozilla.org/en-US/docs/Glossary/Ciphertext)\n- [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class)\n- [Client-side rendering (*CSR*)](https://developer.mozilla.org/en-US/docs/Glossary/Client-side_rendering_(CSR))\n- [Closure](https://developer.mozilla.org/en-US/docs/Glossary/Closure)\n- [Cloud](https://developer.mozilla.org/en-US/docs/Glossary/Cloud)\n- [Cloud computing](https://developer.mozilla.org/en-US/docs/Glossary/Cloud_computing)\n- [CMS](https://developer.mozilla.org/en-US/docs/Glossary/CMS)\n- [Code point](https://developer.mozilla.org/en-US/docs/Glossary/Code_point)\n- [Code splitting](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting)\n- [Code unit](https://developer.mozilla.org/en-US/docs/Glossary/Code_unit)\n- [Codec](https://developer.mozilla.org/en-US/docs/Glossary/Codec)\n- [Color space](https://developer.mozilla.org/en-US/docs/Glossary/Color_space)\n- [Color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel)\n- [Compile](https://developer.mozilla.org/en-US/docs/Glossary/Compile)\n- [Compile time](https://developer.mozilla.org/en-US/docs/Glossary/Compile_time)\n- [Composite operation](https://developer.mozilla.org/en-US/docs/Glossary/Composite_operation)\n- [Compression Dictionary Transport](https://developer.mozilla.org/en-US/docs/Glossary/Compression_Dictionary_Transport)\n- [Computer programming](https://developer.mozilla.org/en-US/docs/Glossary/Computer_programming)\n- [Conditional](https://developer.mozilla.org/en-US/docs/Glossary/Conditional)\n- [Constant](https://developer.mozilla.org/en-US/docs/Glossary/Constant)\n- [Constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor)\n- [Content header](https://developer.mozilla.org/en-US/docs/Glossary/Content_header)\n- [Continuous integration](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_integration)\n- [Continuous media](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_media)\n- [Control flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow)\n- [Cookie](https://developer.mozilla.org/en-US/docs/Glossary/Cookie)\n- [Copyleft](https://developer.mozilla.org/en-US/docs/Glossary/Copyleft)\n- [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)\n- [CORS-safelisted request header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header)\n- [CORS-safelisted response header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_response_header)\n- [Crawler](https://developer.mozilla.org/en-US/docs/Glossary/Crawler)\n- [Credential](https://developer.mozilla.org/en-US/docs/Glossary/Credential)\n- [CRLF](https://developer.mozilla.org/en-US/docs/Glossary/CRLF)\n- [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)\n- [Cross-site request forgery (*CSRF*)](https://developer.mozilla.org/en-US/docs/Glossary/CSRF)\n- [Cross-site scripting (*XSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)\n- [CRUD](https://developer.mozilla.org/en-US/docs/Glossary/CRUD)\n- [Cryptanalysis](https://developer.mozilla.org/en-US/docs/Glossary/Cryptanalysis)\n- [Cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Cryptography)\n- [CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP)\n- [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)\n- [CSS Object Model (*CSSOM*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Object_Model_(CSSOM))\n- [CSS pixel](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel)\n- [CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)\n- [Cumulative Layout Shift (*CLS*)](https://developer.mozilla.org/en-US/docs/Glossary/CLS)\n- [Data structure](https://developer.mozilla.org/en-US/docs/Glossary/Data_structure)\n- [Database](https://developer.mozilla.org/en-US/docs/Glossary/Database)\n- [Debounce](https://developer.mozilla.org/en-US/docs/Glossary/Debounce)\n- [Decryption](https://developer.mozilla.org/en-US/docs/Glossary/Decryption)\n- [Deep copy](https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy)\n- [Delta](https://developer.mozilla.org/en-US/docs/Glossary/Delta)\n- [Denial of Service (*DoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Denial_of_Service)\n- [Deno](https://developer.mozilla.org/en-US/docs/Glossary/Deno)\n- [Descriptor (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Descriptor_(CSS))\n- [Deserialization](https://developer.mozilla.org/en-US/docs/Glossary/Deserialization)\n- [Developer tools](https://developer.mozilla.org/en-US/docs/Glossary/Developer_tools)\n- [Device pixel](https://developer.mozilla.org/en-US/docs/Glossary/Device_pixel)\n- [Digital certificate](https://developer.mozilla.org/en-US/docs/Glossary/Digital_certificate)\n- [Digital signature](https://developer.mozilla.org/en-US/docs/Glossary/Digital_signature)\n- [Distributed Denial of Service (*DDoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Distributed_Denial_of_Service)\n- [DMZ](https://developer.mozilla.org/en-US/docs/Glossary/DMZ)\n- [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS)\n- [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)\n- [Document directive](https://developer.mozilla.org/en-US/docs/Glossary/Document_directive)\n- [Document environment](https://developer.mozilla.org/en-US/docs/Glossary/Document_environment)\n- [DOM (*Document Object Model*)](https://developer.mozilla.org/en-US/docs/Glossary/DOM)\n- [Domain](https://developer.mozilla.org/en-US/docs/Glossary/Domain)\n- [Domain name](https://developer.mozilla.org/en-US/docs/Glossary/Domain_name)\n- [Domain sharding](https://developer.mozilla.org/en-US/docs/Glossary/Domain_sharding)\n- [Dominator](https://developer.mozilla.org/en-US/docs/Glossary/Dominator)\n- [DSL](https://developer.mozilla.org/en-US/docs/Glossary/DSL)\n  - [DSL (*Digital Subscriber Line*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Digital_Subscriber_Line)\n  - [DSL (*Domain-Specific Language*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Domain-Specific_Language)\n- [DTLS (*Datagram Transport Layer Security*)](https://developer.mozilla.org/en-US/docs/Glossary/DTLS)\n- [DTMF (*Dual-Tone Multi-Frequency signaling*)](https://developer.mozilla.org/en-US/docs/Glossary/DTMF)\n- [Dynamic typing](https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing)\n- [ECMA](https://developer.mozilla.org/en-US/docs/Glossary/ECMA)\n- [ECMAScript](https://developer.mozilla.org/en-US/docs/Glossary/ECMAScript)\n- [Effective connection type](https://developer.mozilla.org/en-US/docs/Glossary/Effective_connection_type)\n- [Element](https://developer.mozilla.org/en-US/docs/Glossary/Element)\n- [Encapsulation](https://developer.mozilla.org/en-US/docs/Glossary/Encapsulation)\n- [Encryption](https://developer.mozilla.org/en-US/docs/Glossary/Encryption)\n- [Endianness](https://developer.mozilla.org/en-US/docs/Glossary/Endianness)\n- [Engine](https://developer.mozilla.org/en-US/docs/Glossary/Engine)\n- [JavaScript engine](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript_engine)\n- [Rendering engine](https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine)\n- [Entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity)\n- [Entity header](https://developer.mozilla.org/en-US/docs/Glossary/Entity_header)\n- [Enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated)\n- [Escape character](https://developer.mozilla.org/en-US/docs/Glossary/Escape_character)\n- [Event](https://developer.mozilla.org/en-US/docs/Glossary/Event)\n- [Exception](https://developer.mozilla.org/en-US/docs/Glossary/Exception)\n- [EXIF](https://developer.mozilla.org/en-US/docs/Glossary/EXIF)\n- [Expando](https://developer.mozilla.org/en-US/docs/Glossary/Expando)\n- [Extrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Extrinsic_size)\n- [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_alignment)\n- [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)\n- [Favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon)\n- [Federated identity](https://developer.mozilla.org/en-US/docs/Glossary/Federated_identity)\n- [Fetch directive](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive)\n- [Fetch metadata request header](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_metadata_request_header)\n- [Fingerprinting](https://developer.mozilla.org/en-US/docs/Glossary/Fingerprinting)\n- [Firefox OS](https://developer.mozilla.org/en-US/docs/Glossary/Firefox_OS)\n- [Firewall](https://developer.mozilla.org/en-US/docs/Glossary/Firewall)\n- [First Contentful Paint (*FCP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_Contentful_Paint_(FCP))\n- [First CPU idle](https://developer.mozilla.org/en-US/docs/Glossary/First_CPU_idle)\n- [First Input Delay (FID)Deprecated](https://developer.mozilla.org/en-US/docs/Glossary/First_Input_Delay)\n- [First Meaningful Paint (*FMP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_meaningful_paint)\n- [First Paint (*FP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_paint)\n- [First-class function](https://developer.mozilla.org/en-US/docs/Glossary/First-class_function)\n- [Flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex)\n- [Flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_container)\n- [Flex item](https://developer.mozilla.org/en-US/docs/Glossary/Flex_item)\n- [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)\n- [Flow relative values](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values)\n- [Forbidden request header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_request_header)\n- [Forbidden response header name](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name)\n- [Fork](https://developer.mozilla.org/en-US/docs/Glossary/Fork)\n- [Fragmentainer](https://developer.mozilla.org/en-US/docs/Glossary/Fragmentainer)\n- [Frame rate (*FPS*)](https://developer.mozilla.org/en-US/docs/Glossary/FPS)\n- [FTP](https://developer.mozilla.org/en-US/docs/Glossary/FTP)\n- [FTU](https://developer.mozilla.org/en-US/docs/Glossary/FTU)\n- [Function](https://developer.mozilla.org/en-US/docs/Glossary/Function)\n- [Fuzz testing](https://developer.mozilla.org/en-US/docs/Glossary/Fuzz_testing)\n- [Gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut)\n- [Garbage collection](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection)\n- [Gecko](https://developer.mozilla.org/en-US/docs/Glossary/Gecko)\n- [General header](https://developer.mozilla.org/en-US/docs/Glossary/General_header)\n- [GIF](https://developer.mozilla.org/en-US/docs/Glossary/GIF)\n- [Git](https://developer.mozilla.org/en-US/docs/Glossary/Git)\n- [Global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)\n- [Global scope](https://developer.mozilla.org/en-US/docs/Glossary/Global_scope)\n- [Global variable](https://developer.mozilla.org/en-US/docs/Glossary/Global_variable)\n- [Glyph](https://developer.mozilla.org/en-US/docs/Glossary/Glyph)\n- [Google Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Google_Chrome)\n- [GPL](https://developer.mozilla.org/en-US/docs/Glossary/GPL)\n- [GPU](https://developer.mozilla.org/en-US/docs/Glossary/GPU)\n- [Graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation)\n- [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid)\n- [Grid areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_areas)\n- [Grid Axis](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis)\n- [Grid Cell](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Cell)\n- [Grid Column](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column)\n- [Grid container](https://developer.mozilla.org/en-US/docs/Glossary/Grid_container)\n- [Grid lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines)\n- [Grid Row](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row)\n- [Grid Tracks](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks)\n- [Guaranteed-invalid value](https://developer.mozilla.org/en-US/docs/Glossary/Guaranteed-invalid_value)\n- [Gutters](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)\n- [gzip compression](https://developer.mozilla.org/en-US/docs/Glossary/gzip_compression)\n- [Hash function](https://developer.mozilla.org/en-US/docs/Glossary/Hash_function)\n- [Hash routing](https://developer.mozilla.org/en-US/docs/Glossary/Hash_routing)\n- [Head](https://developer.mozilla.org/en-US/docs/Glossary/Head)\n- [High-level programming language](https://developer.mozilla.org/en-US/docs/Glossary/High-level_programming_language)\n- [HMAC](https://developer.mozilla.org/en-US/docs/Glossary/HMAC)\n- [Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)\n- [HOL blocking](https://developer.mozilla.org/en-US/docs/Glossary/HOL_blocking)\n- [Host](https://developer.mozilla.org/en-US/docs/Glossary/Host)\n- [Hotlink](https://developer.mozilla.org/en-US/docs/Glossary/Hotlink)\n- [Houdini](https://developer.mozilla.org/en-US/docs/Glossary/Houdini)\n- [HPKP](https://developer.mozilla.org/en-US/docs/Glossary/HPKP)\n- [HSTS](https://developer.mozilla.org/en-US/docs/Glossary/HSTS)\n- [HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML)\n- [HTML color codes](https://developer.mozilla.org/en-US/docs/Glossary/HTML_color_codes)\n- [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)\n- [HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)\n- [HTTP content](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_content)\n- [HTTP header](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_header)\n- [HTTP/2](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/2)\n- [HTTP/3](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/3)\n- [HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS)\n- [HTTPS RR](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS_RR)\n- [Hyperlink](https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink)\n- [Hypertext](https://developer.mozilla.org/en-US/docs/Glossary/Hypertext)\n- [IANA](https://developer.mozilla.org/en-US/docs/Glossary/IANA)\n- [ICANN](https://developer.mozilla.org/en-US/docs/Glossary/ICANN)\n- [ICE](https://developer.mozilla.org/en-US/docs/Glossary/ICE)\n- [IDE](https://developer.mozilla.org/en-US/docs/Glossary/IDE)\n- [Idempotent](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent)\n- [Identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier)\n- [Identity provider (*IdP*)](https://developer.mozilla.org/en-US/docs/Glossary/Identity_provider)\n- [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)\n- [IETF](https://developer.mozilla.org/en-US/docs/Glossary/IETF)\n- [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)\n- [IMAP](https://developer.mozilla.org/en-US/docs/Glossary/IMAP)\n- [Immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable)\n- [IndexedDB](https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB)\n- [Information architecture](https://developer.mozilla.org/en-US/docs/Glossary/Information_architecture)\n- [Inheritance](https://developer.mozilla.org/en-US/docs/Glossary/Inheritance)\n- [Ink overflow](https://developer.mozilla.org/en-US/docs/Glossary/Ink_overflow)\n- [Inline-level content](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content)\n- [Input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor)\n- [Inset properties](https://developer.mozilla.org/en-US/docs/Glossary/Inset_properties)\n- [Instance](https://developer.mozilla.org/en-US/docs/Glossary/Instance)\n- [Interaction to Next Paint (*INP*)](https://developer.mozilla.org/en-US/docs/Glossary/interaction_to_next_paint)\n- [Internationalization (*i18n*)](https://developer.mozilla.org/en-US/docs/Glossary/Internationalization)\n- [Internet](https://developer.mozilla.org/en-US/docs/Glossary/Internet)\n- [Interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation)\n- [Intrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_size)\n- [Invariant](https://developer.mozilla.org/en-US/docs/Glossary/Invariant)\n- [IP Address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address)\n- [IPv4](https://developer.mozilla.org/en-US/docs/Glossary/IPv4)\n- [IPv6](https://developer.mozilla.org/en-US/docs/Glossary/IPv6)\n- [IRC](https://developer.mozilla.org/en-US/docs/Glossary/IRC)\n- [ISO](https://developer.mozilla.org/en-US/docs/Glossary/ISO)\n- [ISP](https://developer.mozilla.org/en-US/docs/Glossary/ISP)\n- [ITU](https://developer.mozilla.org/en-US/docs/Glossary/ITU)\n- [Jank](https://developer.mozilla.org/en-US/docs/Glossary/Jank)\n- [Java](https://developer.mozilla.org/en-US/docs/Glossary/Java)\n- [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript)\n- [Jitter](https://developer.mozilla.org/en-US/docs/Glossary/Jitter)\n- [JPEG](https://developer.mozilla.org/en-US/docs/Glossary/JPEG)\n- [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON)\n- [JSON type representation](https://developer.mozilla.org/en-US/docs/Glossary/JSON_type_representation)\n- [Just-In-Time Compilation (*JIT*)](https://developer.mozilla.org/en-US/docs/Glossary/Just-in-time_compilation)\n- [Kebab case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case)\n- [Key](https://developer.mozilla.org/en-US/docs/Glossary/Key)\n- [Keyword](https://developer.mozilla.org/en-US/docs/Glossary/Keyword)\n- [Largest Contentful Paint (*LCP*)](https://developer.mozilla.org/en-US/docs/Glossary/Largest_contentful_paint)\n- [Latency](https://developer.mozilla.org/en-US/docs/Glossary/Latency)\n- [Layout mode](https://developer.mozilla.org/en-US/docs/Glossary/Layout_mode)\n- [Layout viewport](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport)\n- [Lazy load](https://developer.mozilla.org/en-US/docs/Glossary/Lazy_load)\n- [Leading](https://developer.mozilla.org/en-US/docs/Glossary/Leading)\n- [LGPL](https://developer.mozilla.org/en-US/docs/Glossary/LGPL)\n- [Ligature](https://developer.mozilla.org/en-US/docs/Glossary/Ligature)\n- [Literal](https://developer.mozilla.org/en-US/docs/Glossary/Literal)\n- [Local scope](https://developer.mozilla.org/en-US/docs/Glossary/Local_scope)\n- [Local variable](https://developer.mozilla.org/en-US/docs/Glossary/Local_variable)\n- [Locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale)\n- [Localization](https://developer.mozilla.org/en-US/docs/Glossary/Localization)\n- [Logical properties](https://developer.mozilla.org/en-US/docs/Glossary/Logical_properties)\n- [Long task](https://developer.mozilla.org/en-US/docs/Glossary/Long_task)\n- [Loop](https://developer.mozilla.org/en-US/docs/Glossary/Loop)\n- [Lossless compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossless_compression)\n- [Lossy compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossy_compression)\n- [LTR (*Left To Right*)](https://developer.mozilla.org/en-US/docs/Glossary/LTR)\n- [Main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_axis)\n- [Main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread)\n- [Markup](https://developer.mozilla.org/en-US/docs/Glossary/Markup)\n- [MathML](https://developer.mozilla.org/en-US/docs/Glossary/MathML)\n- [Media](https://developer.mozilla.org/en-US/docs/Glossary/Media)\n  - [Media (*Audio-visual presentation*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/Audio-visual_presentation)\n  - [Media (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/CSS)\n- [Media query](https://developer.mozilla.org/en-US/docs/Glossary/Media_query)\n- [Metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)\n- [Method](https://developer.mozilla.org/en-US/docs/Glossary/Method)\n- [Microsoft Edge](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Edge)\n- [Microsoft Internet Explorer](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Internet_Explorer)\n- [Middleware](https://developer.mozilla.org/en-US/docs/Glossary/Middleware)\n- [MIME](https://developer.mozilla.org/en-US/docs/Glossary/MIME)\n- [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type)\n- [Minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)\n- [MitM](https://developer.mozilla.org/en-US/docs/Glossary/MitM)\n- [Mixin](https://developer.mozilla.org/en-US/docs/Glossary/Mixin)\n- [Mobile first](https://developer.mozilla.org/en-US/docs/Glossary/Mobile_first)\n- [Modem](https://developer.mozilla.org/en-US/docs/Glossary/Modem)\n- [Modularity](https://developer.mozilla.org/en-US/docs/Glossary/Modularity)\n- [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Mozilla_Firefox)\n- [Multi-factor authentication](https://developer.mozilla.org/en-US/docs/Glossary/Multi-factor_authentication)\n- [Mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable)\n- [MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)\n- [Namespace](https://developer.mozilla.org/en-US/docs/Glossary/Namespace)\n- [NaN](https://developer.mozilla.org/en-US/docs/Glossary/NaN)\n- [NAT](https://developer.mozilla.org/en-US/docs/Glossary/NAT)\n- [Native](https://developer.mozilla.org/en-US/docs/Glossary/Native)\n- [Navigation directive](https://developer.mozilla.org/en-US/docs/Glossary/Navigation_directive)\n- [Netscape Navigator](https://developer.mozilla.org/en-US/docs/Glossary/Netscape_Navigator)\n- [Network throttling](https://developer.mozilla.org/en-US/docs/Glossary/Network_throttling)\n- [NNTP](https://developer.mozilla.org/en-US/docs/Glossary/NNTP)\n- [Node](https://developer.mozilla.org/en-US/docs/Glossary/Node)\n  - [Node (*DOM*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/DOM)\n  - [Node (*networking*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/Networking)\n- [Node.js](https://developer.mozilla.org/en-US/docs/Glossary/Node.js)\n- [Non-normative](https://developer.mozilla.org/en-US/docs/Glossary/Non-normative)\n- [Nonce](https://developer.mozilla.org/en-US/docs/Glossary/Nonce)\n- [Normative](https://developer.mozilla.org/en-US/docs/Glossary/Normative)\n- [Null](https://developer.mozilla.org/en-US/docs/Glossary/Null)\n- [Nullish value](https://developer.mozilla.org/en-US/docs/Glossary/Nullish_value)\n- [Number](https://developer.mozilla.org/en-US/docs/Glossary/Number)\n- [Object](https://developer.mozilla.org/en-US/docs/Glossary/Object)\n- [Object reference](https://developer.mozilla.org/en-US/docs/Glossary/Object_reference)\n- [OOP](https://developer.mozilla.org/en-US/docs/Glossary/OOP)\n- [OpenGL](https://developer.mozilla.org/en-US/docs/Glossary/OpenGL)\n- [OpenSSL](https://developer.mozilla.org/en-US/docs/Glossary/OpenSSL)\n- [Opera browser](https://developer.mozilla.org/en-US/docs/Glossary/Opera_browser)\n- [Operand](https://developer.mozilla.org/en-US/docs/Glossary/Operand)\n- [Operator](https://developer.mozilla.org/en-US/docs/Glossary/Operator)\n- [Origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin)\n- [OTA](https://developer.mozilla.org/en-US/docs/Glossary/OTA)\n- [OWASP](https://developer.mozilla.org/en-US/docs/Glossary/OWASP)\n- [P2P](https://developer.mozilla.org/en-US/docs/Glossary/P2P)\n- [PAC](https://developer.mozilla.org/en-US/docs/Glossary/PAC)\n- [Packet](https://developer.mozilla.org/en-US/docs/Glossary/Packet)\n- [Page load time](https://developer.mozilla.org/en-US/docs/Glossary/Page_load_time)\n- [Page prediction](https://developer.mozilla.org/en-US/docs/Glossary/Page_prediction)\n- [Parameter](https://developer.mozilla.org/en-US/docs/Glossary/Parameter)\n- [Parent object](https://developer.mozilla.org/en-US/docs/Glossary/Parent_object)\n- [Parse](https://developer.mozilla.org/en-US/docs/Glossary/Parse)\n- [Parser](https://developer.mozilla.org/en-US/docs/Glossary/Parser)\n- [Payload body](https://developer.mozilla.org/en-US/docs/Glossary/Payload_body)\n- [Payload header](https://developer.mozilla.org/en-US/docs/Glossary/Payload_header)\n- [PDF](https://developer.mozilla.org/en-US/docs/Glossary/PDF)\n- [Perceived performance](https://developer.mozilla.org/en-US/docs/Glossary/Perceived_performance)\n- [Percent-encoding](https://developer.mozilla.org/en-US/docs/Glossary/Percent-encoding)\n- [PHP](https://developer.mozilla.org/en-US/docs/Glossary/PHP)\n- [Physical properties](https://developer.mozilla.org/en-US/docs/Glossary/Physical_properties)\n- [Pixel](https://developer.mozilla.org/en-US/docs/Glossary/Pixel)\n- [Placeholder names](https://developer.mozilla.org/en-US/docs/Glossary/Placeholder_names)\n- [Plaintext](https://developer.mozilla.org/en-US/docs/Glossary/Plaintext)\n- [Plugin](https://developer.mozilla.org/en-US/docs/Glossary/Plugin)\n- [PNG](https://developer.mozilla.org/en-US/docs/Glossary/PNG)\n- [Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)\n- [Polymorphism](https://developer.mozilla.org/en-US/docs/Glossary/Polymorphism)\n- [POP3](https://developer.mozilla.org/en-US/docs/Glossary/POP3)\n- [Port](https://developer.mozilla.org/en-US/docs/Glossary/Port)\n- [Prefetch](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch)\n- [Preflight request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request)\n- [Prerender](https://developer.mozilla.org/en-US/docs/Glossary/Prerender)\n- [Presto](https://developer.mozilla.org/en-US/docs/Glossary/Presto)\n- [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)\n- [Principle of least privilege](https://developer.mozilla.org/en-US/docs/Glossary/Principle_of_least_privilege)\n- [Privileged](https://developer.mozilla.org/en-US/docs/Glossary/Privileged)\n- [Privileged code](https://developer.mozilla.org/en-US/docs/Glossary/Privileged_code)\n- [Progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_enhancement)\n- [Progressive web applications (*PWAs*)](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_web_apps)\n- [Promise](https://developer.mozilla.org/en-US/docs/Glossary/Promise)\n- [Property](https://developer.mozilla.org/en-US/docs/Glossary/Property)\n  - [Property (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/CSS)\n  - [Property (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript)\n- [Protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol)\n- [Prototype](https://developer.mozilla.org/en-US/docs/Glossary/Prototype)\n- [Prototype-based programming](https://developer.mozilla.org/en-US/docs/Glossary/Prototype-based_programming)\n- [Proxy server](https://developer.mozilla.org/en-US/docs/Glossary/Proxy_server)\n- [Pseudo-class](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-class)\n- [Pseudo-element](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-element)\n- [Pseudocode](https://developer.mozilla.org/en-US/docs/Glossary/Pseudocode)\n- [Public-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Public-key_cryptography)\n- [Python](https://developer.mozilla.org/en-US/docs/Glossary/Python)\n- [Quality values](https://developer.mozilla.org/en-US/docs/Glossary/Quality_values)\n- [Quaternion](https://developer.mozilla.org/en-US/docs/Glossary/Quaternion)\n- [QUIC](https://developer.mozilla.org/en-US/docs/Glossary/QUIC)\n- [RAIL](https://developer.mozilla.org/en-US/docs/Glossary/RAIL)\n- [Random Number Generator](https://developer.mozilla.org/en-US/docs/Glossary/Random_Number_Generator)\n- [Raster image](https://developer.mozilla.org/en-US/docs/Glossary/Raster_image)\n- [Rate limit](https://developer.mozilla.org/en-US/docs/Glossary/Rate_limit)\n- [RDF](https://developer.mozilla.org/en-US/docs/Glossary/RDF)\n- [Reading order](https://developer.mozilla.org/en-US/docs/Glossary/Reading_order)\n- [Real User Monitoring (*RUM*)](https://developer.mozilla.org/en-US/docs/Glossary/Real_User_Monitoring)\n- [Recursion](https://developer.mozilla.org/en-US/docs/Glossary/Recursion)\n- [Reflow](https://developer.mozilla.org/en-US/docs/Glossary/Reflow)\n- [Registrable domain](https://developer.mozilla.org/en-US/docs/Glossary/Registrable_domain)\n- [Regular expression](https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression)\n- [Relying party](https://developer.mozilla.org/en-US/docs/Glossary/Relying_party)\n- [Render-blocking](https://developer.mozilla.org/en-US/docs/Glossary/Render-blocking)\n- [Repaint](https://developer.mozilla.org/en-US/docs/Glossary/Repaint)\n- [Replaced elements](https://developer.mozilla.org/en-US/docs/Glossary/Replaced_elements)\n- [Replay attack](https://developer.mozilla.org/en-US/docs/Glossary/Replay_attack)\n- [Repo](https://developer.mozilla.org/en-US/docs/Glossary/Repo)\n- [Reporting directive](https://developer.mozilla.org/en-US/docs/Glossary/Reporting_directive)\n- [Representation header](https://developer.mozilla.org/en-US/docs/Glossary/Representation_header)\n- [Request header](https://developer.mozilla.org/en-US/docs/Glossary/Request_header)\n- [Resource Timing](https://developer.mozilla.org/en-US/docs/Glossary/Resource_Timing)\n- [Response header](https://developer.mozilla.org/en-US/docs/Glossary/Response_header)\n- [Responsive Web Design (*RWD*)](https://developer.mozilla.org/en-US/docs/Glossary/Responsive_Web_Design)\n- [REST](https://developer.mozilla.org/en-US/docs/Glossary/REST)\n- [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB)\n- [RIL](https://developer.mozilla.org/en-US/docs/Glossary/RIL)\n- [Robots.txt](https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt)\n- [Round Trip Time (*RTT*)](https://developer.mozilla.org/en-US/docs/Glossary/Round_Trip_Time)\n- [Router](https://developer.mozilla.org/en-US/docs/Glossary/Router)\n- [RSS](https://developer.mozilla.org/en-US/docs/Glossary/RSS)\n- [Rsync](https://developer.mozilla.org/en-US/docs/Glossary/Rsync)\n- [RTCP (*RTP Control Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/RTCP)\n- [RTF](https://developer.mozilla.org/en-US/docs/Glossary/RTF)\n- [RTL (*Right to Left*)](https://developer.mozilla.org/en-US/docs/Glossary/RTL)\n- [RTP (*Real-time Transport Protocol*) and SRTP (*Secure RTP*)](https://developer.mozilla.org/en-US/docs/Glossary/RTP)\n- [RTSP: Real-time streaming protocol](https://developer.mozilla.org/en-US/docs/Glossary/RTSP)\n- [Ruby](https://developer.mozilla.org/en-US/docs/Glossary/Ruby)\n- [Safe](https://developer.mozilla.org/en-US/docs/Glossary/Safe)\n  - [Safe (*HTTP Methods*)](https://developer.mozilla.org/en-US/docs/Glossary/Safe/HTTP)\n- [Salt](https://developer.mozilla.org/en-US/docs/Glossary/Salt)\n- [Same-origin policy](https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy)\n- [SCM](https://developer.mozilla.org/en-US/docs/Glossary/SCM)\n- [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope)\n- [Screen reader](https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader)\n- [Script-supporting element](https://developer.mozilla.org/en-US/docs/Glossary/Script-supporting_element)\n- [Scroll boundary](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_boundary)\n- [Scroll chaining](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining)\n- [Scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container)\n- [Scroll snap](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_snap)\n- [SCTP](https://developer.mozilla.org/en-US/docs/Glossary/SCTP)\n- [SDK (*Software Development Kit*)](https://developer.mozilla.org/en-US/docs/Glossary/SDK)\n- [SDP](https://developer.mozilla.org/en-US/docs/Glossary/SDP)\n- [Search engine](https://developer.mozilla.org/en-US/docs/Glossary/Search_engine)\n- [Secure context](https://developer.mozilla.org/en-US/docs/Glossary/Secure_context)\n- [Secure Sockets Layer (*SSL*)](https://developer.mozilla.org/en-US/docs/Glossary/SSL)\n- [Selector (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector)\n- [Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)\n- [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO)\n- [Serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object)\n- [Serialization](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)\n- [Server](https://developer.mozilla.org/en-US/docs/Glossary/Server)\n- [Server Timing](https://developer.mozilla.org/en-US/docs/Glossary/Server_Timing)\n- [Server-side rendering (*SSR*)](https://developer.mozilla.org/en-US/docs/Glossary/SSR)\n- [Session hijacking](https://developer.mozilla.org/en-US/docs/Glossary/Session_hijacking)\n- [SGML](https://developer.mozilla.org/en-US/docs/Glossary/SGML)\n- [Shadow tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)\n- [Shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy)\n- [Shim](https://developer.mozilla.org/en-US/docs/Glossary/Shim)\n- [Signature](https://developer.mozilla.org/en-US/docs/Glossary/Signature)\n- [Signature (*functions*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(functions))\n- [Signature (*security*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(security))\n- [SIMD](https://developer.mozilla.org/en-US/docs/Glossary/SIMD)\n- [SISD](https://developer.mozilla.org/en-US/docs/Glossary/SISD)\n- [Site](https://developer.mozilla.org/en-US/docs/Glossary/Site)\n- [Site map](https://developer.mozilla.org/en-US/docs/Glossary/Site_map)\n- [SLD](https://developer.mozilla.org/en-US/docs/Glossary/SLD)\n- [Sloppy mode](https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode)\n- [Slug](https://developer.mozilla.org/en-US/docs/Glossary/Slug)\n- [Smoke test](https://developer.mozilla.org/en-US/docs/Glossary/Smoke_test)\n- [SMPTE (*Society of Motion Picture and Television Engineers*)](https://developer.mozilla.org/en-US/docs/Glossary/SMPTE)\n- [SMTP](https://developer.mozilla.org/en-US/docs/Glossary/SMTP)\n- [Snake case](https://developer.mozilla.org/en-US/docs/Glossary/Snake_case)\n- [Snap positions](https://developer.mozilla.org/en-US/docs/Glossary/Snap_positions)\n- [SOAP](https://developer.mozilla.org/en-US/docs/Glossary/SOAP)\n- [Social engineering](https://developer.mozilla.org/en-US/docs/Glossary/Social_engineering)\n- [Source map](https://developer.mozilla.org/en-US/docs/Glossary/Source_map)\n- [SPA (*Single-page application*)](https://developer.mozilla.org/en-US/docs/Glossary/SPA)\n- [Specification](https://developer.mozilla.org/en-US/docs/Glossary/Specification)\n- [Speculative parsing](https://developer.mozilla.org/en-US/docs/Glossary/Speculative_parsing)\n- [Speed index](https://developer.mozilla.org/en-US/docs/Glossary/Speed_index)\n- [SQL](https://developer.mozilla.org/en-US/docs/Glossary/SQL)\n- [SQL injection](https://developer.mozilla.org/en-US/docs/Glossary/SQL_injection)\n- [SRI](https://developer.mozilla.org/en-US/docs/Glossary/SRI)\n- [Stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context)\n- [State machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine)\n- [Statement](https://developer.mozilla.org/en-US/docs/Glossary/Statement)\n- [Static method](https://developer.mozilla.org/en-US/docs/Glossary/Static_method)\n- [Static site generator (*SSG*)](https://developer.mozilla.org/en-US/docs/Glossary/SSG)\n- [Static typing](https://developer.mozilla.org/en-US/docs/Glossary/Static_typing)\n- [Sticky activation](https://developer.mozilla.org/en-US/docs/Glossary/Sticky_activation)\n- [Strict mode](https://developer.mozilla.org/en-US/docs/Glossary/Strict_mode)\n- [String](https://developer.mozilla.org/en-US/docs/Glossary/String)\n- [Stringifier](https://developer.mozilla.org/en-US/docs/Glossary/Stringifier)\n- [STUN](https://developer.mozilla.org/en-US/docs/Glossary/STUN)\n- [Style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin)\n- [Stylesheet](https://developer.mozilla.org/en-US/docs/Glossary/Stylesheet)\n- [Submit button](https://developer.mozilla.org/en-US/docs/Glossary/Submit_button)\n- [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG)\n- [SVN](https://developer.mozilla.org/en-US/docs/Glossary/SVN)\n- [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol)\n- [Symmetric-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Symmetric-key_cryptography)\n- [Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous)\n- [Syntax](https://developer.mozilla.org/en-US/docs/Glossary/Syntax)\n- [Syntax error](https://developer.mozilla.org/en-US/docs/Glossary/Syntax_error)\n- [Synthetic monitoring](https://developer.mozilla.org/en-US/docs/Glossary/Synthetic_monitoring)\n- [Table grid box](https://developer.mozilla.org/en-US/docs/Glossary/Table_grid_box)\n- [Table wrapper box](https://developer.mozilla.org/en-US/docs/Glossary/Table_wrapper_box)\n- [Tag](https://developer.mozilla.org/en-US/docs/Glossary/Tag)\n- [TCP](https://developer.mozilla.org/en-US/docs/Glossary/TCP)\n- [TCP handshake](https://developer.mozilla.org/en-US/docs/Glossary/TCP_handshake)\n- [TCP slow start](https://developer.mozilla.org/en-US/docs/Glossary/TCP_slow_start)\n- [Telnet](https://developer.mozilla.org/en-US/docs/Glossary/Telnet)\n- [Texel](https://developer.mozilla.org/en-US/docs/Glossary/Texel)\n- [The Khronos Group](https://developer.mozilla.org/en-US/docs/Glossary/The_Khronos_Group)\n- [Thread](https://developer.mozilla.org/en-US/docs/Glossary/Thread)\n- [Three js](https://developer.mozilla.org/en-US/docs/Glossary/Three_js)\n- [Throttle](https://developer.mozilla.org/en-US/docs/Glossary/Throttle)\n- [Time to First Byte (*TTFB*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte)\n- [Time to Interactive (*TTI*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_interactive)\n- [TLD](https://developer.mozilla.org/en-US/docs/Glossary/TLD)\n- [TOFU](https://developer.mozilla.org/en-US/docs/Glossary/TOFU)\n- [Top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)\n- [Transient activation](https://developer.mozilla.org/en-US/docs/Glossary/Transient_activation)\n- [Transport Layer Security (*TLS*)](https://developer.mozilla.org/en-US/docs/Glossary/TLS)\n- [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)\n- [Trident](https://developer.mozilla.org/en-US/docs/Glossary/Trident)\n- [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)\n- [TTL](https://developer.mozilla.org/en-US/docs/Glossary/TTL)\n- [TURN](https://developer.mozilla.org/en-US/docs/Glossary/TURN)\n- [Type](https://developer.mozilla.org/en-US/docs/Glossary/Type)\n- [Type coercion](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion)\n- [Type conversion](https://developer.mozilla.org/en-US/docs/Glossary/Type_conversion)\n- [TypeScript](https://developer.mozilla.org/en-US/docs/Glossary/TypeScript)\n- [UAAG](https://developer.mozilla.org/en-US/docs/Glossary/UAAG)\n- [UDP (*User Datagram Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/UDP)\n- [UI](https://developer.mozilla.org/en-US/docs/Glossary/UI)\n- [Undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)\n- [Unicode](https://developer.mozilla.org/en-US/docs/Glossary/Unicode)\n- [Unix time](https://developer.mozilla.org/en-US/docs/Glossary/Unix_time)\n- [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI)\n- [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL)\n- [URN](https://developer.mozilla.org/en-US/docs/Glossary/URN)\n- [Usenet](https://developer.mozilla.org/en-US/docs/Glossary/Usenet)\n- [User agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)\n- [UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/UTF-8)\n- [UTF-16](https://developer.mozilla.org/en-US/docs/Glossary/UTF-16)\n- [UUID](https://developer.mozilla.org/en-US/docs/Glossary/UUID)\n- [UX](https://developer.mozilla.org/en-US/docs/Glossary/UX)\n- [Validator](https://developer.mozilla.org/en-US/docs/Glossary/Validator)\n- [Value](https://developer.mozilla.org/en-US/docs/Glossary/Value)\n- [Variable](https://developer.mozilla.org/en-US/docs/Glossary/Variable)\n- [Vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_prefix)\n- [Viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)\n- [Visual viewport](https://developer.mozilla.org/en-US/docs/Glossary/Visual_viewport)\n- [Void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)\n- [VoIP](https://developer.mozilla.org/en-US/docs/Glossary/VoIP)\n- [W3C](https://developer.mozilla.org/en-US/docs/Glossary/W3C)\n- [WAI](https://developer.mozilla.org/en-US/docs/Glossary/WAI)\n- [WCAG](https://developer.mozilla.org/en-US/docs/Glossary/WCAG)\n- [Web performance](https://developer.mozilla.org/en-US/docs/Glossary/Web_performance)\n- [Web server](https://developer.mozilla.org/en-US/docs/Glossary/Web_server)\n- [Web standards](https://developer.mozilla.org/en-US/docs/Glossary/Web_standards)\n- [WebAssembly](https://developer.mozilla.org/en-US/docs/Glossary/WebAssembly)\n- [WebDAV](https://developer.mozilla.org/en-US/docs/Glossary/WebDAV)\n- [WebExtensions](https://developer.mozilla.org/en-US/docs/Glossary/WebExtensions)\n- [WebGL](https://developer.mozilla.org/en-US/docs/Glossary/WebGL)\n- [WebIDL](https://developer.mozilla.org/en-US/docs/Glossary/WebIDL)\n- [WebKit](https://developer.mozilla.org/en-US/docs/Glossary/WebKit)\n- [WebM](https://developer.mozilla.org/en-US/docs/Glossary/WebM)\n- [WebP](https://developer.mozilla.org/en-US/docs/Glossary/WebP)\n- [WebRTC](https://developer.mozilla.org/en-US/docs/Glossary/WebRTC)\n- [WebSockets](https://developer.mozilla.org/en-US/docs/Glossary/WebSockets)\n- [WebVTT](https://developer.mozilla.org/en-US/docs/Glossary/WebVTT)\n- [WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)\n- [Whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace)\n- [WindowProxy](https://developer.mozilla.org/en-US/docs/Glossary/WindowProxy)\n- [World Wide Web](https://developer.mozilla.org/en-US/docs/Glossary/World_Wide_Web)\n- [Wrapper](https://developer.mozilla.org/en-US/docs/Glossary/Wrapper)\n- [XFormsDeprecated](https://developer.mozilla.org/en-US/docs/Glossary/XFormsDeprecated)\n- [XHTML](https://developer.mozilla.org/en-US/docs/Glossary/XHTML)\n- [XInclude](https://developer.mozilla.org/en-US/docs/Glossary/XInclude)\n- [XLink](https://developer.mozilla.org/en-US/docs/Glossary/XLink)\n- [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML)\n- [XMLHttpRequest (*XHR*)](https://developer.mozilla.org/en-US/docs/Glossary/XMLHttpRequest_(XHR))\n- [XPath](https://developer.mozilla.org/en-US/docs/Glossary/XPath)\n- [XQuery](https://developer.mozilla.org/en-US/docs/Glossary/XQuery)\n- [XSLT](https://developer.mozilla.org/en-US/docs/Glossary/XSLT)\n- [Zstandard compression](https://developer.mozilla.org/en-US/docs/Glossary/Zstandard_compression)\n","references/html-markup.md":"# HTML \u0026 Markup Reference\n\nComprehensive reference for HTML5, markup languages, and document structure.\n\n## Core Concepts\n\n### HTML (HyperText Markup Language)\nThe standard markup language for creating web pages and web applications.\n\n**Related Terms**: HTML5, XHTML, Markup, Semantic HTML\n\n### Elements\nBuilding blocks of HTML documents. Each element has opening/closing tags (except void elements).\n\n**Common Elements**:\n- `\u003cdiv\u003e` - Generic container\n- `\u003cspan\u003e` - Inline container\n- `\u003carticle\u003e` - Self-contained content\n- `\u003csection\u003e` - Thematic grouping\n- `\u003cnav\u003e` - Navigation links\n- `\u003cheader\u003e` - Introductory content\n- `\u003cfooter\u003e` - Footer content\n- `\u003cmain\u003e` - Main content\n- `\u003caside\u003e` - Complementary content\n\n### Attributes\nProperties that provide additional information about HTML elements.\n\n**Common Attributes**:\n- `id` - Unique identifier\n- `class` - CSS class name(s)\n- `src` - Source URL for images/scripts\n- `href` - Hyperlink reference\n- `alt` - Alternative text\n- `title` - Advisory title\n- `data-*` - Custom data attributes\n- `aria-*` - Accessibility attributes\n\n### Void Elements\nElements that cannot have content and don't have closing tags.\n\n**Examples**: `\u003cimg\u003e`, `\u003cbr\u003e`, `\u003chr\u003e`, `\u003cinput\u003e`, `\u003cmeta\u003e`, `\u003clink\u003e`\n\n## Semantic HTML\n\n### What is Semantic HTML?\nHTML that clearly describes its meaning to both the browser and the developer.\n\n**Benefits**:\n- Improved accessibility\n- Better SEO\n- Easier maintenance\n- Built-in meaning and structure\n\n### Semantic Elements\n\n| Element | Purpose | When to Use |\n|---------|---------|-------------|\n| `\u003carticle\u003e` | Self-contained composition | Blog posts, news articles |\n| `\u003csection\u003e` | Thematic grouping of content | Chapters, tabbed content |\n| `\u003cnav\u003e` | Navigation links | Main menu, breadcrumbs |\n| `\u003caside\u003e` | Tangential content | Sidebars, related links |\n| `\u003cheader\u003e` | Introductory content | Page/section headers |\n| `\u003cfooter\u003e` | Footer content | Copyright, contact info |\n| `\u003cmain\u003e` | Main content | Primary page content |\n| `\u003cfigure\u003e` | Self-contained content | Images with captions |\n| `\u003cfigcaption\u003e` | Caption for figure | Image descriptions |\n| `\u003ctime\u003e` | Date/time | Publishing dates |\n| `\u003cmark\u003e` | Highlighted text | Search results |\n| `\u003cdetails\u003e` | Expandable details | Accordions, FAQs |\n| `\u003csummary\u003e` | Summary for details | Accordion headers |\n\n### Example: Semantic Document Structure\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eSemantic Page Example\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cheader\u003e\n    \u003ch1\u003eSite Title\u003c/h1\u003e\n    \u003cnav aria-label=\"Main navigation\"\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"/about\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n  \u003c/header\u003e\n  \n  \u003cmain\u003e\n    \u003carticle\u003e\n      \u003cheader\u003e\n        \u003ch2\u003eArticle Title\u003c/h2\u003e\n        \u003ctime datetime=\"2026-03-04\"\u003eMarch 4, 2026\u003c/time\u003e\n      \u003c/header\u003e\n      \u003cp\u003eArticle content goes here...\u003c/p\u003e\n      \u003cfooter\u003e\n        \u003cp\u003eAuthor: John Doe\u003c/p\u003e\n      \u003c/footer\u003e\n    \u003c/article\u003e\n  \u003c/main\u003e\n  \n  \u003caside\u003e\n    \u003ch3\u003eRelated Content\u003c/h3\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"/related\"\u003eRelated Article\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/aside\u003e\n  \n  \u003cfooter\u003e\n    \u003cp\u003e\u0026copy; 2026 Company Name\u003c/p\u003e\n  \u003c/footer\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Document Structure\n\n### Doctype\nDeclares the document type and HTML version.\n\n```html\n\u003c!DOCTYPE html\u003e\n```\n\n### Head Section\nContains metadata about the document.\n\n**Common Elements**:\n- `\u003cmeta\u003e` - Metadata (charset, viewport, description)\n- `\u003ctitle\u003e` - Page title (shown in browser tab)\n- `\u003clink\u003e` - External resources (stylesheets, icons)\n- `\u003cscript\u003e` - JavaScript files\n- `\u003cstyle\u003e` - Inline CSS\n\n### Metadata Examples\n\n```html\n\u003chead\u003e\n  \u003c!-- Character encoding --\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \n  \u003c!-- Responsive viewport --\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \n  \u003c!-- SEO metadata --\u003e\n  \u003cmeta name=\"description\" content=\"Page description for search engines\"\u003e\n  \u003cmeta name=\"keywords\" content=\"html, web, development\"\u003e\n  \u003cmeta name=\"author\" content=\"Author Name\"\u003e\n  \n  \u003c!-- Open Graph (social media) --\u003e\n  \u003cmeta property=\"og:title\" content=\"Page Title\"\u003e\n  \u003cmeta property=\"og:description\" content=\"Page description\"\u003e\n  \u003cmeta property=\"og:image\" content=\"https://example.com/image.jpg\"\u003e\n  \n  \u003c!-- Favicon --\u003e\n  \u003clink rel=\"icon\" type=\"image/png\" href=\"/favicon.png\"\u003e\n  \n  \u003c!-- Stylesheet --\u003e\n  \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n  \n  \u003c!-- Preload critical resources --\u003e\n  \u003clink rel=\"preload\" href=\"critical.css\" as=\"style\"\u003e\n  \u003clink rel=\"preconnect\" href=\"https://api.example.com\"\u003e\n\u003c/head\u003e\n```\n\n## Forms and Input\n\n### Form Elements\n\n```html\n\u003cform action=\"/submit\" method=\"POST\"\u003e\n  \u003c!-- Text input --\u003e\n  \u003clabel for=\"name\"\u003eName:\u003c/label\u003e\n  \u003cinput type=\"text\" id=\"name\" name=\"name\" required\u003e\n  \n  \u003c!-- Email input --\u003e\n  \u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n  \u003cinput type=\"email\" id=\"email\" name=\"email\" required\u003e\n  \n  \u003c!-- Password input --\u003e\n  \u003clabel for=\"password\"\u003ePassword:\u003c/label\u003e\n  \u003cinput type=\"password\" id=\"password\" name=\"password\" minlength=\"8\" required\u003e\n  \n  \u003c!-- Select dropdown --\u003e\n  \u003clabel for=\"country\"\u003eCountry:\u003c/label\u003e\n  \u003cselect id=\"country\" name=\"country\"\u003e\n    \u003coption value=\"\"\u003eSelect...\u003c/option\u003e\n    \u003coption value=\"us\"\u003eUnited States\u003c/option\u003e\n    \u003coption value=\"uk\"\u003eUnited Kingdom\u003c/option\u003e\n  \u003c/select\u003e\n  \n  \u003c!-- Textarea --\u003e\n  \u003clabel for=\"message\"\u003eMessage:\u003c/label\u003e\n  \u003ctextarea id=\"message\" name=\"message\" rows=\"4\"\u003e\u003c/textarea\u003e\n  \n  \u003c!-- Checkbox --\u003e\n  \u003clabel\u003e\n    \u003cinput type=\"checkbox\" name=\"terms\" required\u003e\n    I agree to the terms\n  \u003c/label\u003e\n  \n  \u003c!-- Radio buttons --\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003eChoose an option:\u003c/legend\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"option\" value=\"a\"\u003e\n      Option A\n    \u003c/label\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"option\" value=\"b\"\u003e\n      Option B\n    \u003c/label\u003e\n  \u003c/fieldset\u003e\n  \n  \u003c!-- Submit button --\u003e\n  \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n### Input Types\n\n| Type | Purpose | Example |\n|------|---------|---------|\n| `text` | Single-line text | `\u003cinput type=\"text\"\u003e` |\n| `email` | Email address | `\u003cinput type=\"email\"\u003e` |\n| `password` | Password field | `\u003cinput type=\"password\"\u003e` |\n| `number` | Numeric input | `\u003cinput type=\"number\" min=\"0\" max=\"100\"\u003e` |\n| `tel` | Telephone number | `\u003cinput type=\"tel\"\u003e` |\n| `url` | URL | `\u003cinput type=\"url\"\u003e` |\n| `date` | Date picker | `\u003cinput type=\"date\"\u003e` |\n| `time` | Time picker | `\u003cinput type=\"time\"\u003e` |\n| `file` | File upload | `\u003cinput type=\"file\" accept=\"image/*\"\u003e` |\n| `checkbox` | Checkbox | `\u003cinput type=\"checkbox\"\u003e` |\n| `radio` | Radio button | `\u003cinput type=\"radio\"\u003e` |\n| `range` | Slider | `\u003cinput type=\"range\" min=\"0\" max=\"100\"\u003e` |\n| `color` | Color picker | `\u003cinput type=\"color\"\u003e` |\n| `search` | Search field | `\u003cinput type=\"search\"\u003e` |\n\n## Related Markup Languages\n\n### XML (Extensible Markup Language)\nA markup language for encoding documents in a format that is both human-readable and machine-readable.\n\n**Key Differences from HTML**:\n- All tags must be properly closed\n- Tags are case-sensitive\n- Attributes must be quoted\n- Custom tag names allowed\n\n### XHTML (Extensible HyperText Markup Language)\nHTML reformulated as XML. Stricter syntax rules than HTML.\n\n### MathML (Mathematical Markup Language)\nMarkup language for displaying mathematical notation on the web.\n\n```html\n\u003cmath\u003e\n  \u003cmrow\u003e\n    \u003cmsup\u003e\n      \u003cmi\u003ex\u003c/mi\u003e\n      \u003cmn\u003e2\u003c/mn\u003e\n    \u003c/msup\u003e\n    \u003cmo\u003e+\u003c/mo\u003e\n    \u003cmn\u003e1\u003c/mn\u003e\n  \u003c/mrow\u003e\n\u003c/math\u003e\n```\n\n### SVG (Scalable Vector Graphics)\nXML-based markup language for describing two-dimensional vector graphics.\n\n```html\n\u003csvg width=\"100\" height=\"100\"\u003e\n  \u003ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"blue\" /\u003e\n\u003c/svg\u003e\n```\n\n## Character Encoding and References\n\n### Character Encoding\nDefines how characters are represented as bytes.\n\n**UTF-8**: Universal character encoding standard (recommended)\n\n```html\n\u003cmeta charset=\"UTF-8\"\u003e\n```\n\n### Character References\nWays to represent special characters in HTML.\n\n**Named Entities**:\n- `\u0026lt;` - Less than (\u003c)\n- `\u0026gt;` - Greater than (\u003e)\n- `\u0026amp;` - Ampersand (\u0026)\n- `\u0026quot;` - Quote (\")\n- `\u0026apos;` - Apostrophe (')\n- `\u0026nbsp;` - Non-breaking space\n- `\u0026copy;` - Copyright (©)\n\n**Numeric Entities**:\n- `\u0026#60;` - Less than (\u003c)\n- `\u0026#169;` - Copyright (©)\n- `\u0026#8364;` - Euro (€)\n\n## Block vs Inline Content\n\n### Block-Level Content\nElements that create a \"block\" in the layout, starting on a new line.\n\n**Examples**: `\u003cdiv\u003e`, `\u003cp\u003e`, `\u003ch1\u003e`-`\u003ch6\u003e`, `\u003carticle\u003e`, `\u003csection\u003e`, `\u003cheader\u003e`, `\u003cfooter\u003e`, `\u003cnav\u003e`, `\u003caside\u003e`, `\u003cul\u003e`, `\u003col\u003e`, `\u003cli\u003e`\n\n### Inline-Level Content\nElements that don't start on a new line and only take up as much width as necessary.\n\n**Examples**: `\u003cspan\u003e`, `\u003ca\u003e`, `\u003cstrong\u003e`, `\u003cem\u003e`, `\u003cimg\u003e`, `\u003ccode\u003e`, `\u003cabbr\u003e`, `\u003ccite\u003e`\n\n## Best Practices\n\n### Do's\n- ✅ Use semantic HTML elements\n- ✅ Include proper document structure (DOCTYPE, html, head, body)\n- ✅ Set character encoding to UTF-8\n- ✅ Use descriptive `alt` attributes for images\n- ✅ Associate labels with form inputs\n- ✅ Use heading hierarchy properly (h1 → h2 → h3)\n- ✅ Validate HTML with W3C validator\n- ✅ Use proper ARIA roles when needed\n- ✅ Include meta viewport for responsive design\n\n### Don'ts\n- ❌ Use `\u003cdiv\u003e` when a semantic element exists\n- ❌ Skip heading levels (h1 → h3)\n- ❌ Use tables for layout\n- ❌ Forget to close tags (except void elements)\n- ❌ Use inline styles extensively\n- ❌ Omit `alt` attribute on images\n- ❌ Create forms without labels\n- ❌ Use deprecated elements (`\u003cfont\u003e`, `\u003ccenter\u003e`, `\u003cblink\u003e`)\n\n## Glossary Terms from MDN\n\n**Key Terms Covered**:\n- Abstraction\n- Accessibility tree\n- Accessible description\n- Accessible name\n- Attribute\n- Block-level content\n- Breadcrumb\n- Browsing context\n- Character\n- Character encoding\n- Character reference\n- Character set\n- Doctype\n- Document environment\n- Element\n- Entity\n- Head\n- HTML\n- HTML5\n- Hyperlink\n- Hypertext\n- Inline-level content\n- Markup\n- MathML\n- Metadata\n- Semantics\n- SVG\n- Tag\n- Void element\n- XHTML\n- XML\n\n## Additional Resources\n\n- [MDN HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML)\n- [W3C HTML Specification](https://html.spec.whatwg.org/)\n- [HTML5 Doctor](http://html5doctor.com/)\n- [W3C Markup Validation Service](https://validator.w3.org/)\n","references/http-networking.md":"# HTTP \u0026 Networking Reference\n\nComprehensive reference for HTTP protocol, networking concepts, and web communication.\n\n## HTTP (HyperText Transfer Protocol)\n\nProtocol for transferring hypertext between client and server. Foundation of data communication on the web.\n\n### HTTP Versions\n\n- **HTTP/1.1** (1997): Text-based, persistent connections, pipelining\n- **HTTP/2** (2015): Binary protocol, multiplexing, server push, header compression\n- **HTTP/3** (2022): Based on QUIC (UDP), improved performance, better handling of packet loss\n\n## Request Methods\n\n| Method | Purpose | Idempotent | Safe | Cacheable |\n|--------|---------|------------|------|-----------|\n| GET | Retrieve resource | Yes | Yes | Yes |\n| POST | Create resource | No | No | Rarely |\n| PUT | Update/replace resource | Yes | No | No |\n| PATCH | Partial update | No | No | No |\n| DELETE | Delete resource | Yes | No | No |\n| HEAD | Like GET but no body | Yes | Yes | Yes |\n| OPTIONS | Get allowed methods | Yes | Yes | No |\n| CONNECT | Establish tunnel | No | No | No |\n| TRACE | Echo request | Yes | Yes | No |\n\n**Safe**: Doesn't modify server state  \n**Idempotent**: Multiple identical requests have same effect as single request\n\n## Status Codes\n\n### 1xx Informational\n\n| Code | Message | Meaning |\n|------|---------|---------|\n| 100 | Continue | Client should continue request |\n| 101 | Switching Protocols | Server switching protocols |\n\n### 2xx Success\n\n| Code | Message | Meaning |\n|------|---------|---------|\n| 200 | OK | Request succeeded |\n| 201 | Created | Resource created |\n| 202 | Accepted | Accepted but not processed |\n| 204 | No Content | Success but no content to return |\n| 206 | Partial Content | Partial resource (range request) |\n\n### 3xx Redirection\n\n| Code | Message | Meaning |\n|------|---------|---------|\n| 301 | Moved Permanently | Resource permanently moved |\n| 302 | Found | Temporary redirect |\n| 303 | See Other | Response at different URI |\n| 304 | Not Modified | Resource not modified (cache) |\n| 307 | Temporary Redirect | Like 302 but keep method |\n| 308 | Permanent Redirect | Like 301 but keep method |\n\n### 4xx Client Errors\n\n| Code | Message | Meaning |\n|------|---------|---------|\n| 400 | Bad Request | Invalid syntax |\n| 401 | Unauthorized | Authentication required |\n| 403 | Forbidden | Access denied |\n| 404 | Not Found | Resource not found |\n| 405 | Method Not Allowed | Method not supported |\n| 408 | Request Timeout | Request took too long |\n| 409 | Conflict | Request conflicts with state |\n| 410 | Gone | Resource permanently gone |\n| 413 | Payload Too Large | Request body too large |\n| 414 | URI Too Long | URI too long |\n| 415 | Unsupported Media Type | Media type not supported |\n| 422 | Unprocessable Entity | Semantic errors |\n| 429 | Too Many Requests | Rate limit exceeded |\n\n### 5xx Server Errors\n\n| Code | Message | Meaning |\n|------|---------|---------|\n| 500 | Internal Server Error | Generic server error |\n| 501 | Not Implemented | Method not supported |\n| 502 | Bad Gateway | Invalid response from upstream |\n| 503 | Service Unavailable | Server temporarily unavailable |\n| 504 | Gateway Timeout | Upstream timeout |\n| 505 | HTTP Version Not Supported | HTTP version not supported |\n\n## HTTP Headers\n\n### Request Headers\n\n```http\nGET /api/users HTTP/1.1\nHost: example.com\nUser-Agent: Mozilla/5.0\nAccept: application/json, text/plain\nAccept-Language: en-US,en;q=0.9\nAccept-Encoding: gzip, deflate, br\nAuthorization: Bearer token123\nCookie: sessionId=abc123\nIf-None-Match: \"etag-value\"\nIf-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT\nOrigin: https://example.com\nReferer: https://example.com/page\n```\n\n**Common Request Headers**:\n- `Accept`: Media types client accepts\n- `Accept-Encoding`: Encoding formats (compression)\n- `Accept-Language`: Preferred languages\n- `Authorization`: Authentication credentials\n- `Cache-Control`: Caching directives\n- `Cookie`: Cookies sent to server\n- `Content-Type`: Type of request body\n- `Host`: Target host and port\n- `If-Modified-Since`: Conditional request\n- `If-None-Match`: Conditional request (ETag)\n- `Origin`: Origin of request (CORS)\n- `Referer`: Previous page URL\n- `User-Agent`: Client information\n\n### Response Headers\n\n```http\nHTTP/1.1 200 OK\nDate: Mon, 04 Mar 2026 12:00:00 GMT\nServer: nginx/1.18.0\nContent-Type: application/json; charset=utf-8\nContent-Length: 348\nContent-Encoding: gzip\nCache-Control: public, max-age=3600\nETag: \"33a64df551425fcc55e4d42a148795d9f25f89d4\"\nLast-Modified: Mon, 04 Mar 2026 11:00:00 GMT\nAccess-Control-Allow-Origin: *\nSet-Cookie: sessionId=xyz789; HttpOnly; Secure; SameSite=Strict\nStrict-Transport-Security: max-age=31536000; includeSubDomains\nX-Content-Type-Options: nosniff\nX-Frame-Options: DENY\n```\n\n**Common Response Headers**:\n- `Access-Control-*`: CORS headers\n- `Cache-Control`: Caching directives\n- `Content-Encoding`: Content compression\n- `Content-Length`: Body size in bytes\n- `Content-Type`: Media type of body\n- `Date`: Response date/time\n- `ETag`: Resource version identifier\n- `Expires`: Expiration date\n- `Last-Modified`: Last modification date\n- `Location`: Redirect URL\n- `Server`: Server software\n- `Set-Cookie`: Set cookies\n- `Strict-Transport-Security`: HSTS\n- `X-Content-Type-Options`: MIME type sniffing\n- `X-Frame-Options`: Clickjacking protection\n\n## CORS (Cross-Origin Resource Sharing)\n\nMechanism to allow cross-origin requests.\n\n### Simple Requests\n\nAutomatically allowed if:\n- Method: GET, HEAD, or POST\n- Safe headers only\n- Content-Type: `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`\n\n### Preflight Requests\n\nFor complex requests, browser sends OPTIONS request first:\n\n```http\nOPTIONS /api/users HTTP/1.1\nOrigin: https://example.com\nAccess-Control-Request-Method: POST\nAccess-Control-Request-Headers: Content-Type\n```\n\n```http\nHTTP/1.1 204 No Content\nAccess-Control-Allow-Origin: https://example.com\nAccess-Control-Allow-Methods: GET, POST, PUT, DELETE\nAccess-Control-Allow-Headers: Content-Type, Authorization\nAccess-Control-Allow-Credentials: true\nAccess-Control-Max-Age: 86400\n```\n\n### CORS Headers\n\n**Request**:\n- `Origin`: Request origin\n- `Access-Control-Request-Method`: Intended method\n- `Access-Control-Request-Headers`: Intended headers\n\n**Response**:\n- `Access-Control-Allow-Origin`: Allowed origins (* or specific)\n- `Access-Control-Allow-Methods`: Allowed methods\n- `Access-Control-Allow-Headers`: Allowed headers\n- `Access-Control-Allow-Credentials`: Allow credentials\n- `Access-Control-Max-Age`: Preflight cache duration\n- `Access-Control-Expose-Headers`: Headers accessible to client\n\n## Caching\n\n### Cache-Control Directives\n\n**Request Directives**:\n- `no-cache`: Validate with server before using cache\n- `no-store`: Don't cache at all\n- `max-age=N`: Max age in seconds\n- `max-stale=N`: Accept stale response up to N seconds\n- `min-fresh=N`: Fresh for at least N seconds\n- `only-if-cached`: Use only cached response\n\n**Response Directives**:\n- `public`: Cacheable by any cache\n- `private`: Cacheable by browser only\n- `no-cache`: Must validate before use\n- `no-store`: Don't cache\n- `max-age=N`: Fresh for N seconds\n- `s-maxage=N`: Max age for shared caches\n- `must-revalidate`: Must validate when stale\n- `immutable`: Content won't change\n\n### Examples\n\n```http\n# Cache for 1 hour\nCache-Control: public, max-age=3600\n\n# Don't cache\nCache-Control: no-store\n\n# Cache in browser only, revalidate after 1 hour\nCache-Control: private, max-age=3600, must-revalidate\n\n# Cache forever (with versioned URLs)\nCache-Control: public, max-age=31536000, immutable\n```\n\n### Conditional Requests\n\nUse ETags or Last-Modified for efficient caching:\n\n```http\nGET /resource HTTP/1.1\nIf-None-Match: \"etag-value\"\nIf-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT\n```\n\nIf not modified:\n```http\nHTTP/1.1 304 Not Modified\nETag: \"etag-value\"\n```\n\n## Cookies\n\n```http\n# Server sets cookie\nSet-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600\n\n# Client sends cookie\nCookie: sessionId=abc123; userId=456\n```\n\n### Cookie Attributes\n\n- `Path=/`: Cookie path scope\n- `Domain=example.com`: Cookie domain scope\n- `Max-Age=N`: Expire after N seconds\n- `Expires=date`: Expire at specific date\n- `Secure`: Only sent over HTTPS\n- `HttpOnly`: Not accessible via JavaScript\n- `SameSite=Strict|Lax|None`: CSRF protection\n\n## REST (Representational State Transfer)\n\nArchitectural style for web services.\n\n### REST Principles\n\n1. **Client-Server**: Separation of concerns\n2. **Stateless**: Each request contains all needed info\n3. **Cacheable**: Responses must define cacheability\n4. **Uniform Interface**: Standardized communication\n5. **Layered System**: Client doesn't know if connected to end server\n6. **Code on Demand** (optional): Server can send executable code\n\n### RESTful API Design\n\n```\nGET    /users           # List users\nGET    /users/123       # Get user 123\nPOST   /users           # Create user\nPUT    /users/123       # Update user 123 (full)\nPATCH  /users/123       # Update user 123 (partial)\nDELETE /users/123       # Delete user 123\n\nGET    /users/123/posts # List posts by user 123\nGET    /posts?author=123 # Alternative: filter posts\n```\n\n### HTTP Content Negotiation\n\n```http\n# Client requests JSON\nAccept: application/json\n\n# Server responds with JSON\nContent-Type: application/json\n\n# Client can accept multiple formats\nAccept: application/json, application/xml;q=0.9, text/plain;q=0.8\n```\n\n## Networking Fundamentals\n\n### TCP (Transmission Control Protocol)\n\nConnection-oriented protocol ensuring reliable data delivery.\n\n**TCP Handshake** (3-way):\n1. Client → Server: SYN\n2. Server → Client: SYN-ACK\n3. Client → Server: ACK\n\n**Features**:\n- Reliable delivery (retransmission)\n- Ordered data\n- Error checking\n- Flow control\n- Connection-oriented\n\n### UDP (User Datagram Protocol)\n\nConnectionless protocol for fast data transmission.\n\n**Features**:\n- Fast (no handshake)\n- No guaranteed delivery\n- No ordering\n- Lower overhead\n- Used for streaming, gaming, DNS\n\n### DNS (Domain Name System)\n\nTranslates domain names to IP addresses.\n\n```\nexample.com → 93.184.216.34\n```\n\n**DNS Record Types**:\n- `A`: IPv4 address\n- `AAAA`: IPv6 address\n- `CNAME`: Canonical name (alias)\n- `MX`: Mail exchange\n- `TXT`: Text record\n- `NS`: Name server\n\n### IP Addressing\n\n**IPv4**: `192.168.1.1` (32-bit)  \n**IPv6**: `2001:0db8:85a3:0000:0000:8a2e:0370:7334` (128-bit)\n\n### Ports\n\n- **Well-known ports** (0-1023):\n  - 80: HTTP\n  - 443: HTTPS\n  - 21: FTP\n  - 22: SSH\n  - 25: SMTP\n  - 53: DNS\n- **Registered ports** (1024-49151)\n- **Dynamic ports** (49152-65535)\n\n### Bandwidth \u0026 Latency\n\n**Bandwidth**: Amount of data transferred per unit time (Mbps, Gbps)  \n**Latency**: Time delay in data transmission (milliseconds)\n\n**Round Trip Time (RTT)**: Time for request to reach server and response to return\n\n## WebSockets\n\nFull-duplex communication over single TCP connection.\n\n```javascript\n// Client\nconst ws = new WebSocket('wss://example.com/socket');\n\nws.onopen = () =\u003e {\n  console.log('Connected');\n  ws.send('Hello server!');\n};\n\nws.onmessage = (event) =\u003e {\n  console.log('Received:', event.data);\n};\n\nws.onerror = (error) =\u003e {\n  console.error('Error:', error);\n};\n\nws.onclose = () =\u003e {\n  console.log('Disconnected');\n};\n\n// Close connection\nws.close();\n```\n\n**Use Cases**: Chat, real-time updates, gaming, collaborative editing\n\n## Server-Sent Events (SSE)\n\nServer pushes updates to client over HTTP.\n\n```javascript\n// Client\nconst eventSource = new EventSource('/events');\n\neventSource.onmessage = (event) =\u003e {\n  console.log('New message:', event.data);\n};\n\neventSource.addEventListener('custom-event', (event) =\u003e {\n  console.log('Custom event:', event.data);\n});\n\neventSource.onerror = (error) =\u003e {\n  console.error('Error:', error);\n};\n\n// Close connection\neventSource.close();\n```\n\n```http\n// Server response\nContent-Type: text/event-stream\nCache-Control: no-cache\nConnection: keep-alive\n\ndata: First message\n\ndata: Second message\n\nevent: custom-event\ndata: Custom message data\n```\n\n## Best Practices\n\n### Do's\n- ✅ Use HTTPS everywhere\n- ✅ Implement proper caching strategies\n- ✅ Use appropriate HTTP methods\n- ✅ Return meaningful status codes\n- ✅ Implement rate limiting\n- ✅ Use compression (gzip, brotli)\n- ✅ Set proper CORS headers\n- ✅ Implement proper error handling\n- ✅ Use connection pooling\n- ✅ Monitor network performance\n\n### Don'ts\n- ❌ Use HTTP for sensitive data\n- ❌ Ignore CORS security\n- ❌ Return wrong status codes (200 for errors)\n- ❌ Cache sensitive data\n- ❌ Send large uncompressed responses\n- ❌ Skip SSL/TLS certificate validation\n- ❌ Store credentials in URLs\n- ❌ Expose internal server details in errors\n- ❌ Use synchronous requests\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Ajax\n- ALPN\n- Bandwidth\n- Cacheable\n- Cookie\n- CORS\n- CORS-safelisted request header\n- CORS-safelisted response header\n- Crawler\n- Effective connection type\n- Fetch directive\n- Fetch metadata request header\n- Forbidden request header\n- Forbidden response header name\n- FTP\n- General header\n- HOL blocking\n- HTTP\n- HTTP content\n- HTTP header\n- HTTP/2\n- HTTP/3\n- HTTPS\n- HTTPS RR\n- Idempotent\n- IMAP\n- Latency\n- Packet\n- POP3\n- Proxy server\n- QUIC\n- Rate limit\n- Request header\n- Response header\n- REST\n- Round Trip Time (RTT)\n- RTCP\n- RTP\n- Safe (HTTP Methods)\n- SMTP\n- TCP\n- TCP handshake\n- TCP slow start\n- UDP\n- WebSockets\n\n## Additional Resources\n\n- [MDN HTTP Guide](https://developer.mozilla.org/en-US/docs/Web/HTTP)\n- [HTTP/2 Spec](https://http2.github.io/)\n- [HTTP/3 Explained](https://http3-explained.haxx.se/)\n- [REST API Tutorial](https://restfulapi.net/)\n","references/javascript-programming.md":"# JavaScript \u0026 Programming Reference\n\nComprehensive reference for JavaScript, ECMAScript, programming concepts, and modern JS patterns.\n\n## Core Concepts\n\n### JavaScript\nHigh-level, interpreted programming language that conforms to the ECMAScript specification. Primary language for web development alongside HTML and CSS.\n\n**Key Characteristics**:\n- Dynamically typed\n- Prototype-based inheritance\n- First-class functions\n- Event-driven\n- Asynchronous execution\n\n### ECMAScript\nThe standardized specification that JavaScript implements.\n\n**Major Versions**:\n- **ES5** (2009): Strict mode, JSON support\n- **ES6/ES2015**: Classes, arrow functions, promises, modules\n- **ES2016+**: Async/await, optional chaining, nullish coalescing\n\n## Data Types\n\n### Primitive Types\n\n```javascript\n// String\nlet name = \"John\";\nlet greeting = 'Hello';\nlet template = `Hello, ${name}!`; // Template literal\n\n// Number\nlet integer = 42;\nlet float = 3.14;\nlet negative = -10;\nlet scientific = 1e6; // 1000000\n\n// BigInt (for very large integers)\nlet big = 9007199254740991n;\n\n// Boolean\nlet isTrue = true;\nlet isFalse = false;\n\n// Undefined (declared but not assigned)\nlet undefined_var;\nconsole.log(undefined_var); // undefined\n\n// Null (intentional absence of value)\nlet empty = null;\n\n// Symbol (unique identifier)\nlet sym = Symbol('description');\n```\n\n### Type Checking\n\n```javascript\ntypeof \"hello\"; // \"string\"\ntypeof 42; // \"number\"\ntypeof true; // \"boolean\"\ntypeof undefined; // \"undefined\"\ntypeof null; // \"object\" (historical bug)\ntypeof Symbol(); // \"symbol\"\ntypeof {}; // \"object\"\ntypeof []; // \"object\"\ntypeof function() {}; // \"function\"\n\n// Better array check\nArray.isArray([]); // true\n\n// Null check\nvalue === null; // true if null\n```\n\n### Type Coercion and Conversion\n\n```javascript\n// Implicit coercion\n\"5\" + 2; // \"52\" (string concatenation)\n\"5\" - 2; // 3 (numeric subtraction)\n\"5\" * \"2\"; // 10 (numeric multiplication)\n!!\"value\"; // true (boolean conversion)\n\n// Explicit conversion\nString(123); // \"123\"\nNumber(\"123\"); // 123\nNumber(\"abc\"); // NaN\nBoolean(0); // false\nBoolean(1); // true\nparseInt(\"123px\"); // 123\nparseFloat(\"3.14\"); // 3.14\n```\n\n### Truthy and Falsy Values\n\n**Falsy values** (evaluate to false):\n- `false`\n- `0`, `-0`\n- `\"\"` (empty string)\n- `null`\n- `undefined`\n- `NaN`\n\n**Everything else is truthy**, including:\n- `\"0\"` (string)\n- `\"false\"` (string)\n- `[]` (empty array)\n- `{}` (empty object)\n- `function() {}` (empty function)\n\n## Variables and Constants\n\n```javascript\n// var (function-scoped, hoisted - avoid in modern code)\nvar oldStyle = \"avoid this\";\n\n// let (block-scoped, can be reassigned)\nlet count = 0;\ncount = 1; // ✓ works\n\n// const (block-scoped, cannot be reassigned)\nconst MAX = 100;\nMAX = 200; // ✗ TypeError\n\n// const with objects/arrays (content can change)\nconst person = { name: \"John\" };\nperson.name = \"Jane\"; // ✓ works (mutating object)\nperson = {}; // ✗ TypeError (reassigning variable)\n```\n\n## Functions\n\n### Function Declaration\n\n```javascript\nfunction greet(name) {\n  return `Hello, ${name}!`;\n}\n```\n\n### Function Expression\n\n```javascript\nconst greet = function(name) {\n  return `Hello, ${name}!`;\n};\n```\n\n### Arrow Functions\n\n```javascript\n// Basic syntax\nconst add = (a, b) =\u003e a + b;\n\n// With block body\nconst multiply = (a, b) =\u003e {\n  const result = a * b;\n  return result;\n};\n\n// Single parameter (parentheses optional)\nconst square = x =\u003e x * x;\n\n// No parameters\nconst getRandom = () =\u003e Math.random();\n\n// Implicit return of object (wrap in parentheses)\nconst makePerson = (name, age) =\u003e ({ name, age });\n```\n\n### First-Class Functions\n\nFunctions are values that can be:\n- Assigned to variables\n- Passed as arguments\n- Returned from other functions\n\n```javascript\n// Assign to variable\nconst fn = function() { return 42; };\n\n// Pass as argument\nfunction execute(callback) {\n  return callback();\n}\nexecute(() =\u003e console.log(\"Hello\"));\n\n// Return from function\nfunction createMultiplier(factor) {\n  return function(x) {\n    return x * factor;\n  };\n}\nconst double = createMultiplier(2);\ndouble(5); // 10\n```\n\n### Closures\n\nFunctions that remember their lexical scope:\n\n```javascript\nfunction createCounter() {\n  let count = 0; // Private variable\n  \n  return {\n    increment() {\n      count++;\n      return count;\n    },\n    decrement() {\n      count--;\n      return count;\n    },\n    getCount() {\n      return count;\n    }\n  };\n}\n\nconst counter = createCounter();\ncounter.increment(); // 1\ncounter.increment(); // 2\ncounter.decrement(); // 1\ncounter.getCount(); // 1\n```\n\n### Callback Functions\n\nFunction passed as an argument to be executed later:\n\n```javascript\n// Array methods use callbacks\nconst numbers = [1, 2, 3, 4, 5];\n\nnumbers.forEach(num =\u003e console.log(num));\n\nconst doubled = numbers.map(num =\u003e num * 2);\n\nconst evens = numbers.filter(num =\u003e num % 2 === 0);\n\nconst sum = numbers.reduce((acc, num) =\u003e acc + num, 0);\n```\n\n### IIFE (Immediately Invoked Function Expression)\n\n```javascript\n(function() {\n  // Code here runs immediately\n  console.log(\"IIFE executed\");\n})();\n\n// With parameters\n(function(name) {\n  console.log(`Hello, ${name}`);\n})(\"World\");\n\n// Arrow function IIFE\n(() =\u003e {\n  console.log(\"Arrow IIFE\");\n})();\n```\n\n## Objects\n\n### Object Creation\n\n```javascript\n// Object literal\nconst person = {\n  name: \"John\",\n  age: 30,\n  greet() {\n    return `Hello, I'm ${this.name}`;\n  }\n};\n\n// Constructor function\nfunction Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst john = new Person(\"John\", 30);\n\n// Object.create\nconst proto = { greet() { return \"Hello\"; } };\nconst obj = Object.create(proto);\n```\n\n### Accessing Properties\n\n```javascript\nconst obj = { name: \"John\", age: 30 };\n\n// Dot notation\nobj.name; // \"John\"\n\n// Bracket notation\nobj[\"age\"]; // 30\nconst key = \"name\";\nobj[key]; // \"John\"\n\n// Optional chaining (ES2020)\nobj.address?.city; // undefined (no error if address doesn't exist)\nobj.getName?.(); // undefined (no error if getName doesn't exist)\n```\n\n### Object Methods\n\n```javascript\nconst person = { name: \"John\", age: 30, city: \"NYC\" };\n\n// Get keys\nObject.keys(person); // [\"name\", \"age\", \"city\"]\n\n// Get values\nObject.values(person); // [\"John\", 30, \"NYC\"]\n\n// Get entries\nObject.entries(person); // [[\"name\", \"John\"], [\"age\", 30], [\"city\", \"NYC\"]]\n\n// Assign (merge objects)\nconst extended = Object.assign({}, person, { country: \"USA\" });\n\n// Spread operator (modern alternative)\nconst merged = { ...person, country: \"USA\" };\n\n// Freeze (make immutable)\nObject.freeze(person);\nperson.age = 31; // Silently fails (throws in strict mode)\n\n// Seal (prevent adding/removing properties)\nObject.seal(person);\n```\n\n### Destructuring\n\n```javascript\n// Object destructuring\nconst person = { name: \"John\", age: 30, city: \"NYC\" };\nconst { name, age } = person;\n\n// With different variable names\nconst { name: personName, age: personAge } = person;\n\n// With defaults\nconst { name, country = \"USA\" } = person;\n\n// Nested destructuring\nconst user = { profile: { email: \"john@example.com\" } };\nconst { profile: { email } } = user;\n\n// Array destructuring\nconst numbers = [1, 2, 3, 4, 5];\nconst [first, second, ...rest] = numbers;\n// first = 1, second = 2, rest = [3, 4, 5]\n\n// Skip elements\nconst [a, , c] = numbers;\n// a = 1, c = 3\n```\n\n## Arrays\n\n```javascript\n// Create arrays\nconst arr = [1, 2, 3];\nconst empty = [];\nconst mixed = [1, \"two\", { three: 3 }, [4]];\n\n// Access elements\narr[0]; // 1\narr[arr.length - 1]; // Last element\narr.at(-1); // 3 (ES2022 - negative indexing)\n\n// Modify arrays\narr.push(4); // Add to end\narr.pop(); // Remove from end\narr.unshift(0); // Add to beginning\narr.shift(); // Remove from beginning\narr.splice(1, 2, 'a', 'b'); // Remove 2 elements at index 1, insert 'a', 'b'\n\n// Iteration\narr.forEach(item =\u003e console.log(item));\nfor (let item of arr) { console.log(item); }\nfor (let i = 0; i \u003c arr.length; i++) { console.log(arr[i]); }\n\n// Transformation\nconst doubled = arr.map(x =\u003e x * 2);\nconst evens = arr.filter(x =\u003e x % 2 === 0);\nconst sum = arr.reduce((acc, x) =\u003e acc + x, 0);\n\n// Search\narr.includes(2); // true\narr.indexOf(2); // Index or -1\narr.find(x =\u003e x \u003e 2); // First matching element\narr.findIndex(x =\u003e x \u003e 2); // Index of first match\n\n// Test\narr.some(x =\u003e x \u003e 5); // true if any match\narr.every(x =\u003e x \u003e 0); // true if all match\n\n// Sort and reverse\narr.sort((a, b) =\u003e a - b); // Ascending\narr.reverse(); // Reverse in place\n\n// Combine\nconst combined = arr.concat([4, 5]);\nconst spread = [...arr, 4, 5];\n\n// Slice (copy portion)\nconst portion = arr.slice(1, 3); // Index 1 to 3 (exclusive)\n\n// Flat (flatten nested arrays)\n[[1, 2], [3, 4]].flat(); // [1, 2, 3, 4]\n```\n\n## Control Flow\n\n### Conditionals\n\n```javascript\n// if/else\nif (condition) {\n  // code\n} else if (otherCondition) {\n  // code\n} else {\n  // code\n}\n\n// Ternary operator\nconst result = condition ? valueIfTrue : valueIfFalse;\n\n// Switch statement\nswitch (value) {\n  case 1:\n    // code\n    break;\n  case 2:\n  case 3:\n    // code for 2 or 3\n    break;\n  default:\n    // default code\n}\n\n// Nullish coalescing (ES2020)\nconst value = null ?? \"default\"; // \"default\"\nconst value = 0 ?? \"default\"; // 0 (0 is not nullish)\n\n// Logical OR for defaults (pre-ES2020)\nconst value = falsy || \"default\";\n\n// Optional chaining\nconst city = user?.address?.city;\n```\n\n### Loops\n\n```javascript\n// for loop\nfor (let i = 0; i \u003c 10; i++) {\n  console.log(i);\n}\n\n// while loop\nlet i = 0;\nwhile (i \u003c 10) {\n  console.log(i);\n  i++;\n}\n\n// do-while loop\ndo {\n  console.log(i);\n  i++;\n} while (i \u003c 10);\n\n// for...of (iterate values)\nfor (const item of array) {\n  console.log(item);\n}\n\n// for...in (iterate keys - avoid for arrays)\nfor (const key in object) {\n  console.log(key, object[key]);\n}\n\n// break and continue\nfor (let i = 0; i \u003c 10; i++) {\n  if (i === 5) break; // Exit loop\n  if (i === 3) continue; // Skip iteration\n  console.log(i);\n}\n```\n\n## Asynchronous JavaScript\n\n### Callbacks\n\n```javascript\nfunction fetchData(callback) {\n  setTimeout(() =\u003e {\n    callback(\"Data received\");\n  }, 1000);\n}\n\nfetchData(data =\u003e console.log(data));\n```\n\n### Promises\n\n```javascript\n// Create promise\nconst promise = new Promise((resolve, reject) =\u003e {\n  setTimeout(() =\u003e {\n    const success = true;\n    if (success) {\n      resolve(\"Success!\");\n    } else {\n      reject(\"Error!\");\n    }\n  }, 1000);\n});\n\n// Use promise\npromise\n  .then(result =\u003e console.log(result))\n  .catch(error =\u003e console.error(error))\n  .finally(() =\u003e console.log(\"Done\"));\n\n// Promise utilities\nPromise.all([promise1, promise2]); // Wait for all\nPromise.race([promise1, promise2]); // First to complete\nPromise.allSettled([promise1, promise2]); // Wait for all (ES2020)\nPromise.any([promise1, promise2]); // First to succeed (ES2021)\n```\n\n### Async/Await\n\n```javascript\n// Async function\nasync function fetchData() {\n  try {\n    const response = await fetch('https://api.example.com/data');\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('Error:', error);\n  }\n}\n\n// Use async function\nfetchData().then(data =\u003e console.log(data));\n\n// Top-level await (ES2022, in modules)\nconst data = await fetchData();\n```\n\n## Classes\n\n```javascript\nclass Person {\n  // Constructor\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n  \n  // Instance method\n  greet() {\n    return `Hello, I'm ${this.name}`;\n  }\n  \n  // Getter\n  get info() {\n    return `${this.name}, ${this.age}`;\n  }\n  \n  // Setter\n  set birthYear(year) {\n    this.age = new Date().getFullYear() - year;\n  }\n  \n  // Static method\n  static species() {\n    return \"Homo sapiens\";\n  }\n}\n\n// Inheritance\nclass Employee extends Person {\n  constructor(name, age, jobTitle) {\n    super(name, age); // Call parent constructor\n    this.jobTitle = jobTitle;\n  }\n  \n  // Override method\n  greet() {\n    return `${super.greet()}, I'm a ${this.jobTitle}`;\n  }\n}\n\n// Usage\nconst john = new Person(\"John\", 30);\njohn.greet(); // \"Hello, I'm John\"\nPerson.species(); // \"Homo sapiens\"\n\nconst jane = new Employee(\"Jane\", 25, \"Developer\");\njane.greet(); // \"Hello, I'm Jane, I'm a Developer\"\n```\n\n## Modules\n\n### ES6 Modules (ESM)\n\n```javascript\n// Export (math.js)\nexport const PI = 3.14159;\nexport function add(a, b) {\n  return a + b;\n}\nexport default class Calculator {\n  // ...\n}\n\n// Import\nimport Calculator, { PI, add } from './math.js';\nimport * as math from './math.js';\nimport { add as sum } from './math.js'; // Rename\n```\n\n### CommonJS (Node.js)\n\n```javascript\n// Export (math.js)\nmodule.exports = {\n  add(a, b) {\n    return a + b;\n  }\n};\n\n// Import\nconst math = require('./math');\n```\n\n## Error Handling\n\n```javascript\n// Try/catch\ntry {\n  // Code that might throw\n  throw new Error(\"Something went wrong\");\n} catch (error) {\n  console.error(error.message);\n} finally {\n  // Always runs\n  console.log(\"Cleanup\");\n}\n\n// Custom errors\nclass ValidationError extends Error {\n  constructor(message) {\n    super(message);\n    this.name = \"ValidationError\";\n  }\n}\n\nthrow new ValidationError(\"Invalid input\");\n```\n\n## Best Practices\n\n### Do's\n- ✅ Use `const` by default, `let` when needed\n- ✅ Use strict mode (`'use strict';`)\n- ✅ Use arrow functions for callbacks\n- ✅ Use template literals for string interpolation\n- ✅ Use destructuring for cleaner code\n- ✅ Use async/await for asynchronous code\n- ✅ Handle errors properly\n- ✅ Use descriptive variable names\n- ✅ Keep functions small and focused\n- ✅ Use modern ES6+ features\n\n### Don'ts\n- ❌ Use `var` (use `let` or `const`)\n- ❌ Pollute global scope\n- ❌ Use `==` (use `===` for strict equality)\n- ❌ Modify function parameters\n- ❌ Use `eval()` or `with()`\n- ❌ Ignore errors silently\n- ❌ Use synchronous code for I/O operations\n- ❌ Create deeply nested callbacks (callback hell)\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Algorithm\n- Argument\n- Array\n- Asynchronous\n- Binding\n- BigInt\n- Bitwise flags\n- Block (scripting)\n- Boolean\n- Callback function\n- Camel case\n- Class\n- Closure\n- Code point\n- Code unit\n- Compile\n- Compile time\n- Conditional\n- Constant\n- Constructor\n- Control flow\n- Deep copy\n- Deserialization\n- ECMAScript\n- Encapsulation\n- Exception\n- Expando\n- First-class function\n- Function\n- Hoisting\n- IIFE\n- Identifier\n- Immutable\n- Inheritance\n- Instance\n- JavaScript\n- JSON\n- JSON type representation\n- Just-In-Time Compilation (JIT)\n- Kebab case\n- Keyword\n- Literal\n- Local scope\n- Local variable\n- Loop\n- Method\n- Mixin\n- Modularity\n- Mutable\n- Namespace\n- NaN\n- Native\n- Null\n- Nullish value\n- Number\n- Object\n- Object reference\n- OOP\n- Operand\n- Operator\n- Parameter\n- Parse\n- Polymorphism\n- Primitive\n- Promise\n- Property (JavaScript)\n- Prototype\n- Prototype-based programming\n- Pseudocode\n- Recursion\n- Regular expression\n- Scope\n- Serialization\n- Serializable object\n- Shallow copy\n- Signature (functions)\n- Sloppy mode\n- Snake case\n- Static method\n- Static typing\n- Statement\n- Strict mode\n- String\n- Stringifier\n- Symbol\n- Synchronous\n- Syntax\n- Syntax error\n- Type\n- Type coercion\n- Type conversion\n- Truthy\n- Falsy\n- Undefined\n- Value\n- Variable\n\n## Additional Resources\n\n- [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n- [ECMAScript Specification](https://tc39.es/ecma262/)\n- [JavaScript.info](https://javascript.info/)\n- [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS)\n","references/media-graphics.md":"# Media \u0026 Graphics Reference\n\nMultimedia content, graphics, and related technologies for the web.\n\n## Image Formats\n\n### JPEG/JPG\n\nLossy compression for photographs.\n\n**Characteristics**:\n- Good for photos\n- No transparency support\n- Small file size\n- Quality degrades with editing\n\n**Usage**:\n```html\n\u003cimg src=\"photo.jpg\" alt=\"Photo\"\u003e\n```\n\n### PNG\n\nLossless compression with transparency.\n\n**Characteristics**:\n- Supports alpha channel (transparency)\n- Larger file size than JPEG\n- Good for logos, graphics, screenshots\n- PNG-8 (256 colors) vs PNG-24 (16M colors)\n\n```html\n\u003cimg src=\"logo.png\" alt=\"Logo\"\u003e\n```\n\n### WebP\n\nModern format with better compression.\n\n**Characteristics**:\n- Smaller than JPEG/PNG\n- Supports transparency\n- Supports animation\n- Not supported in older browsers\n\n```html\n\u003cpicture\u003e\n  \u003csource srcset=\"image.webp\" type=\"image/webp\"\u003e\n  \u003cimg src=\"image.jpg\" alt=\"Fallback\"\u003e\n\u003c/picture\u003e\n```\n\n### AVIF\n\nNext-generation image format.\n\n**Characteristics**:\n- Better compression than WebP\n- Supports HDR\n- Slower encoding\n- Limited browser support\n\n### GIF\n\nAnimated images (limited colors).\n\n**Characteristics**:\n- 256 colors max\n- Supports animation\n- Simple transparency (no alpha)\n- Consider modern alternatives (video, WebP)\n\n### SVG (Scalable Vector Graphics)\n\nXML-based vector graphics.\n\n**Characteristics**:\n- Scalable without quality loss\n- Small file size for simple graphics\n- CSS/JS manipulatable\n- Animation support\n\n```html\n\u003c!-- Inline SVG --\u003e\n\u003csvg width=\"100\" height=\"100\"\u003e\n  \u003ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"blue\" /\u003e\n\u003c/svg\u003e\n\n\u003c!-- External SVG --\u003e\n\u003cimg src=\"icon.svg\" alt=\"Icon\"\u003e\n```\n\n**Creating SVG**:\n```html\n\u003csvg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003c!-- Rectangle --\u003e\n  \u003crect x=\"10\" y=\"10\" width=\"80\" height=\"60\" fill=\"red\" /\u003e\n  \n  \u003c!-- Circle --\u003e\n  \u003ccircle cx=\"150\" cy=\"40\" r=\"30\" fill=\"blue\" /\u003e\n  \n  \u003c!-- Path --\u003e\n  \u003cpath d=\"M10 100 L100 100 L50 150 Z\" fill=\"green\" /\u003e\n  \n  \u003c!-- Text --\u003e\n  \u003ctext x=\"50\" y=\"180\" font-size=\"20\"\u003eHello SVG\u003c/text\u003e\n\u003c/svg\u003e\n```\n\n## Canvas API\n\n2D raster graphics (bitmap).\n\n### Basic Setup\n\n```html\n\u003ccanvas id=\"myCanvas\" width=\"400\" height=\"300\"\u003e\u003c/canvas\u003e\n```\n\n```javascript\nconst canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\n\n// Draw rectangle\nctx.fillStyle = 'red';\nctx.fillRect(10, 10, 100, 50);\n\n// Draw circle\nctx.beginPath();\nctx.arc(200, 150, 50, 0, Math.PI * 2);\nctx.fillStyle = 'blue';\nctx.fill();\n\n// Draw line\nctx.beginPath();\nctx.moveTo(50, 200);\nctx.lineTo(350, 250);\nctx.strokeStyle = 'green';\nctx.lineWidth = 3;\nctx.stroke();\n\n// Draw text\nctx.font = '30px Arial';\nctx.fillStyle = 'black';\nctx.fillText('Hello Canvas', 50, 100);\n\n// Draw image\nconst img = new Image();\nimg.onload = () =\u003e {\n  ctx.drawImage(img, 0, 0);\n};\nimg.src = 'image.jpg';\n```\n\n### Canvas Methods\n\n```javascript\n// Paths\nctx.beginPath();\nctx.moveTo(x, y);\nctx.lineTo(x, y);\nctx.arc(x, y, radius, startAngle, endAngle);\nctx.closePath();\nctx.fill();\nctx.stroke();\n\n// Transforms\nctx.translate(x, y);\nctx.rotate(angle);\nctx.scale(x, y);\nctx.save(); // Save state\nctx.restore(); // Restore state\n\n// Compositing\nctx.globalAlpha = 0.5;\nctx.globalCompositeOperation = 'source-over';\n\n// Export\nconst dataURL = canvas.toDataURL('image/png');\ncanvas.toBlob(blob =\u003e {\n  // Use blob\n}, 'image/png');\n```\n\n## WebGL\n\n3D graphics in the browser.\n\n**Use Cases**:\n- 3D visualizations\n- Games\n- Data visualization\n- VR/AR\n\n**Libraries**:\n- **Three.js**: Easy 3D graphics\n- **Babylon.js**: Game engine\n- **PixiJS**: 2D WebGL renderer\n\n```javascript\n// Three.js example\nimport * as THREE from 'three';\n\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\n\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n\n// Create cube\nconst geometry = new THREE.BoxGeometry();\nconst material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\nconst cube = new THREE.Mesh(geometry, material);\nscene.add(cube);\n\ncamera.position.z = 5;\n\n// Render loop\nfunction animate() {\n  requestAnimationFrame(animate);\n  cube.rotation.x += 0.01;\n  cube.rotation.y += 0.01;\n  renderer.render(scene, camera);\n}\nanimate();\n```\n\n## Video\n\n### HTML5 Video Element\n\n```html\n\u003cvideo controls width=\"640\" height=\"360\"\u003e\n  \u003csource src=\"video.mp4\" type=\"video/mp4\"\u003e\n  \u003csource src=\"video.webm\" type=\"video/webm\"\u003e\n  Your browser doesn't support video.\n\u003c/video\u003e\n```\n\n**Attributes**:\n- `controls`: Show playback controls\n- `autoplay`: Start automatically\n- `loop`: Repeat video\n- `muted`: Mute audio\n- `poster`: Thumbnail image\n- `preload`: none/metadata/auto\n\n### Video Formats\n\n- **MP4 (H.264)**: Widely supported\n- **WebM (VP8/VP9)**: Open format\n- **Ogg (Theora)**: Open format\n\n### JavaScript Control\n\n```javascript\nconst video = document.querySelector('video');\n\n// Playback\nvideo.play();\nvideo.pause();\nvideo.currentTime = 10; // Seek to 10s\n\n// Properties\nvideo.duration; // Total duration\nvideo.currentTime; // Current position\nvideo.paused; // Is paused?\nvideo.volume = 0.5; // 0.0 to 1.0\nvideo.playbackRate = 1.5; // Speed\n\n// Events\nvideo.addEventListener('play', () =\u003e {});\nvideo.addEventListener('pause', () =\u003e {});\nvideo.addEventListener('ended', () =\u003e {});\nvideo.addEventListener('timeupdate', () =\u003e {});\n```\n\n## Audio\n\n### HTML5 Audio Element\n\n```html\n\u003caudio controls\u003e\n  \u003csource src=\"audio.mp3\" type=\"audio/mpeg\"\u003e\n  \u003csource src=\"audio.ogg\" type=\"audio/ogg\"\u003e\n\u003c/audio\u003e\n```\n\n### Audio Formats\n\n- **MP3**: Widely supported\n- **AAC**: Good quality\n- **Ogg Vorbis**: Open format\n- **WAV**: Uncompressed\n\n### Web Audio API\n\nAdvanced audio processing:\n\n```javascript\nconst audioContext = new AudioContext();\n\n// Load audio\nfetch('audio.mp3')\n  .then(response =\u003e response.arrayBuffer())\n  .then(arrayBuffer =\u003e audioContext.decodeAudioData(arrayBuffer))\n  .then(audioBuffer =\u003e {\n    // Create source\n    const source = audioContext.createBufferSource();\n    source.buffer = audioBuffer;\n    \n    // Create gain node (volume)\n    const gainNode = audioContext.createGain();\n    gainNode.gain.value = 0.5;\n    \n    // Connect: source -\u003e gain -\u003e destination\n    source.connect(gainNode);\n    gainNode.connect(audioContext.destination);\n    \n    // Play\n    source.start();\n  });\n```\n\n## Responsive Images\n\n### srcset and sizes\n\n```html\n\u003c!-- Different resolutions --\u003e\n\u003cimg src=\"image-800.jpg\"\n     srcset=\"image-400.jpg 400w,\n             image-800.jpg 800w,\n             image-1200.jpg 1200w\"\n     sizes=\"(max-width: 600px) 100vw,\n            (max-width: 900px) 50vw,\n            800px\"\n     alt=\"Responsive image\"\u003e\n\n\u003c!-- Pixel density --\u003e\n\u003cimg src=\"image.jpg\"\n     srcset=\"image.jpg 1x,\n             image@2x.jpg 2x,\n             image@3x.jpg 3x\"\n     alt=\"High DPI image\"\u003e\n```\n\n### Picture Element\n\nArt direction and format switching:\n\n```html\n\u003cpicture\u003e\n  \u003c!-- Different formats --\u003e\n  \u003csource srcset=\"image.avif\" type=\"image/avif\"\u003e\n  \u003csource srcset=\"image.webp\" type=\"image/webp\"\u003e\n  \n  \u003c!-- Different crops for mobile/desktop --\u003e\n  \u003csource media=\"(max-width: 600px)\" srcset=\"image-mobile.jpg\"\u003e\n  \u003csource media=\"(min-width: 601px)\" srcset=\"image-desktop.jpg\"\u003e\n  \n  \u003c!-- Fallback --\u003e\n  \u003cimg src=\"image.jpg\" alt=\"Fallback\"\u003e\n\u003c/picture\u003e\n```\n\n## Image Optimization\n\n### Best Practices\n\n1. **Choose correct format**:\n   - Photos: JPEG, WebP, AVIF\n   - Graphics/logos: PNG, SVG, WebP\n   - Animations: Video, WebP\n\n2. **Compress images**:\n   - Use compression tools\n   - Balance quality vs file size\n   - Progressive JPEG for large images\n\n3. **Responsive images**:\n   - Serve appropriate sizes\n   - Use srcset/picture\n   - Consider device pixel ratio\n\n4. **Lazy loading**:\n   ```html\n   \u003cimg src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded\"\u003e\n   ```\n\n5. **Dimensions**:\n   ```html\n   \u003cimg src=\"image.jpg\" width=\"800\" height=\"600\" alt=\"With dimensions\"\u003e\n   ```\n\n## Image Loading Techniques\n\n### Lazy Loading\n\n```html\n\u003c!-- Native lazy loading --\u003e\n\u003cimg src=\"image.jpg\" loading=\"lazy\" alt=\"Image\"\u003e\n\n\u003c!-- Intersection Observer --\u003e\n\u003cimg data-src=\"image.jpg\" class=\"lazy\" alt=\"Image\"\u003e\n```\n\n```javascript\nconst images = document.querySelectorAll('.lazy');\nconst observer = new IntersectionObserver((entries) =\u003e {\n  entries.forEach(entry =\u003e {\n    if (entry.isIntersecting) {\n      const img = entry.target;\n      img.src = img.dataset.src;\n      observer.unobserve(img);\n    }\n  });\n});\n\nimages.forEach(img =\u003e observer.observe(img));\n```\n\n### Progressive Enhancement\n\n```html\n\u003c!-- Low quality placeholder --\u003e\n\u003cimg src=\"image-tiny.jpg\"\n     data-src=\"image-full.jpg\"\n     class=\"blur\"\n     alt=\"Progressive image\"\u003e\n```\n\n## Favicon\n\nWebsite icon:\n\n```html\n\u003c!-- Standard --\u003e\n\u003clink rel=\"icon\" href=\"/favicon.ico\" sizes=\"any\"\u003e\n\n\u003c!-- Modern --\u003e\n\u003clink rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\"\u003e\n\u003clink rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\"\u003e\n\n\u003c!-- Multiple sizes --\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32.png\"\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16.png\"\u003e\n```\n\n## Multimedia Best Practices\n\n### Performance\n\n- Optimize file sizes\n- Use appropriate formats\n- Implement lazy loading\n- Use CDN for delivery\n- Compress videos\n\n### Accessibility\n\n- Provide alt text for images\n- Include captions/subtitles for videos\n- Provide transcripts for audio\n- Don't autoplay with sound\n- Ensure keyboard controls\n\n### SEO\n\n- Descriptive filenames\n- Alt text with keywords\n- Structured data (schema.org)\n- Image sitemaps\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Alpha\n- Baseline (image)\n- Baseline (scripting)\n- Canvas\n- Favicon\n- JPEG\n- Lossless compression\n- Lossy compression\n- PNG\n- Progressive enhancement\n- Quality values\n- Raster image\n- Render\n- Rendering engine\n- SVG\n- Vector images\n- WebGL\n- WebP\n\n## Additional Resources\n\n- [MDN Canvas Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)\n- [SVG Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)\n- [WebGL Fundamentals](https://webglfundamentals.org/)\n- [Responsive Images Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)\n- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n","references/performance-optimization.md":"# Performance \u0026 Optimization Reference\n\nComprehensive reference for web performance metrics, optimization techniques, and Core Web Vitals.\n\n## Core Web Vitals\n\nGoogle's metrics for measuring user experience.\n\n### Largest Contentful Paint (LCP)\n\nMeasures loading performance - when largest content element becomes visible.\n\n**Target**: \u003c 2.5 seconds\n\n**Optimization**:\n- Reduce server response time\n- Optimize images\n- Remove render-blocking resources\n- Use CDN\n- Implement lazy loading\n- Preload critical resources\n\n```html\n\u003clink rel=\"preload\" href=\"hero-image.jpg\" as=\"image\"\u003e\n```\n\n### First Input Delay (FID) → Interaction to Next Paint (INP)\n\nFID (deprecated) measured input responsiveness. INP is the new metric.\n\n**INP Target**: \u003c 200ms\n\n**Optimization**:\n- Minimize JavaScript execution time\n- Break up long tasks\n- Use web workers\n- Optimize third-party scripts\n- Use `requestIdleCallback`\n\n### Cumulative Layout Shift (CLS)\n\nMeasures visual stability - unexpected layout shifts.\n\n**Target**: \u003c 0.1\n\n**Optimization**:\n- Specify image/video dimensions\n- Avoid inserting content above existing content\n- Use CSS aspect-ratio\n- Reserve space for dynamic content\n\n```html\n\u003cimg src=\"image.jpg\" width=\"800\" height=\"600\" alt=\"Photo\"\u003e\n\n\u003cstyle\u003e\n  .video-container {\n    aspect-ratio: 16 / 9;\n  }\n\u003c/style\u003e\n```\n\n## Other Performance Metrics\n\n### First Contentful Paint (FCP)\nTime when first content element renders.  \n**Target**: \u003c 1.8s\n\n### Time to First Byte (TTFB)\nTime for browser to receive first byte of response.  \n**Target**: \u003c 600ms\n\n### Time to Interactive (TTI)\nWhen page becomes fully interactive.  \n**Target**: \u003c 3.8s\n\n### Speed Index\nHow quickly content is visually displayed.  \n**Target**: \u003c 3.4s\n\n### Total Blocking Time (TBT)\nSum of blocking time for all long tasks.  \n**Target**: \u003c 200ms\n\n## Image Optimization\n\n### Format Selection\n\n| Format | Best For | Pros | Cons |\n|--------|----------|------|------|\n| JPEG | Photos | Small size, widely supported | Lossy, no transparency |\n| PNG | Graphics, transparency | Lossless, transparency | Larger size |\n| WebP | Modern browsers | Small size, transparency | Limited old browser support |\n| AVIF | Newest format | Best compression | Limited support |\n| SVG | Icons, logos | Scalable, small | Not for photos |\n\n### Responsive Images\n\n```html\n\u003c!-- Picture element for art direction --\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(min-width: 1024px)\" srcset=\"large.webp\" type=\"image/webp\"\u003e\n  \u003csource media=\"(min-width: 768px)\" srcset=\"medium.webp\" type=\"image/webp\"\u003e\n  \u003csource media=\"(min-width: 1024px)\" srcset=\"large.jpg\"\u003e\n  \u003csource media=\"(min-width: 768px)\" srcset=\"medium.jpg\"\u003e\n  \u003cimg src=\"small.jpg\" alt=\"Responsive image\"\u003e\n\u003c/picture\u003e\n\n\u003c!-- Srcset for resolution switching --\u003e\n\u003cimg\n  src=\"image-800.jpg\"\n  srcset=\"image-400.jpg 400w,\n          image-800.jpg 800w,\n          image-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 400px,\n         (max-width: 1000px) 800px,\n         1200px\"\n  alt=\"Image\"\u003e\n\n\u003c!-- Lazy loading --\u003e\n\u003cimg src=\"image.jpg\" loading=\"lazy\" alt=\"Lazy loaded\"\u003e\n```\n\n### Image Compression\n\n- Use tools like ImageOptim, Squoosh, or Sharp\n- Target 80-85% quality for JPEGs\n- Use progressive JPEGs\n- Strip metadata\n\n## Code Optimization\n\n### Minification\n\nRemove whitespace, comments, shorten names:\n\n```javascript\n// Before\nfunction calculateTotal(price, tax) {\n  const total = price + (price * tax);\n  return total;\n}\n\n// After minification\nfunction t(p,x){return p+p*x}\n```\n\n**Tools**: Terser (JS), cssnano (CSS), html-minifier\n\n### Code Splitting\n\nSplit code into smaller chunks loaded on demand:\n\n```javascript\n// Dynamic import\nbutton.addEventListener('click', async () =\u003e {\n  const module = await import('./heavy-module.js');\n  module.run();\n});\n\n// React lazy loading\nconst HeavyComponent = React.lazy(() =\u003e import('./HeavyComponent'));\n\n// Webpack code splitting\nimport(/* webpackChunkName: \"lodash\" */ 'lodash').then(({ default: _ }) =\u003e {\n  // Use lodash\n});\n```\n\n### Tree Shaking\n\nRemove unused code during bundling:\n\n```javascript\n// Only imports what's used\nimport { debounce } from 'lodash-es';\n\n// ESM exports enable tree shaking\nexport { function1, function2 };\n```\n\n### Compression\n\nEnable gzip or brotli compression:\n\n```nginx\n# nginx config\ngzip on;\ngzip_types text/plain text/css application/json application/javascript;\ngzip_min_length 1000;\n\n# brotli (better compression)\nbrotli on;\nbrotli_types text/plain text/css application/json application/javascript;\n```\n\n## Caching Strategies\n\n### Cache-Control Headers\n\n```http\n# Immutable assets (versioned URLs)\nCache-Control: public, max-age=31536000, immutable\n\n# HTML (always revalidate)\nCache-Control: no-cache\n\n# API responses (short cache)\nCache-Control: private, max-age=300\n\n# No caching\nCache-Control: no-store\n```\n\n### Service Workers\n\nAdvanced caching control:\n\n```javascript\n// Cache-first strategy\nself.addEventListener('fetch', (event) =\u003e {\n  event.respondWith(\n    caches.match(event.request).then((response) =\u003e {\n      return response || fetch(event.request);\n    })\n  );\n});\n\n// Network-first strategy\nself.addEventListener('fetch', (event) =\u003e {\n  event.respondWith(\n    fetch(event.request).catch(() =\u003e {\n      return caches.match(event.request);\n    })\n  );\n});\n\n// Stale-while-revalidate\nself.addEventListener('fetch', (event) =\u003e {\n  event.respondWith(\n    caches.open('dynamic').then((cache) =\u003e {\n      return cache.match(event.request).then((response) =\u003e {\n        const fetchPromise = fetch(event.request).then((networkResponse) =\u003e {\n          cache.put(event.request, networkResponse.clone());\n          return networkResponse;\n        });\n        return response || fetchPromise;\n      });\n    })\n  );\n});\n```\n\n## Loading Strategies\n\n### Critical Rendering Path\n\n1. Construct DOM from HTML\n2. Construct CSSOM from CSS\n3. Combine DOM + CSSOM into render tree\n4. Calculate layout\n5. Paint pixels\n\n### Resource Hints\n\n```html\n\u003c!-- DNS prefetch --\u003e\n\u003clink rel=\"dns-prefetch\" href=\"//example.com\"\u003e\n\n\u003c!-- Preconnect (DNS + TCP + TLS) --\u003e\n\u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n\n\u003c!-- Prefetch (low priority for next page) --\u003e\n\u003clink rel=\"prefetch\" href=\"next-page.js\"\u003e\n\n\u003c!-- Preload (high priority for current page) --\u003e\n\u003clink rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin\u003e\n\n\u003c!-- Prerender (next page in background) --\u003e\n\u003clink rel=\"prerender\" href=\"next-page.html\"\u003e\n```\n\n### Lazy Loading\n\n#### Images - native lazy loading\n\n    \u003cimg src=\"image.jpg\" loading=\"lazy\"\u003e\n\n```javascript\n// Intersection Observer for custom lazy loading\nconst observer = new IntersectionObserver((entries) =\u003e {\n  entries.forEach(entry =\u003e {\n    if (entry.isIntersecting) {\n      const img = entry.target;\n      img.src = img.dataset.src;\n      observer.unobserve(img);\n    }\n  });\n});\n\ndocument.querySelectorAll('img[data-src]').forEach(img =\u003e {\n  observer.observe(img);\n});\n```\n\n### Critical CSS\n\nInline above-the-fold CSS, defer the rest:\n\n```html\n\u003chead\u003e\n  \u003cstyle\u003e\n    /* Critical CSS inlined */\n    body { margin: 0; font-family: sans-serif; }\n    .header { height: 60px; background: #333; }\n  \u003c/style\u003e\n  \n  \u003c!-- Non-critical CSS deferred --\u003e\n  \u003clink rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"\u003e\n  \u003cnoscript\u003e\u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\u003c/noscript\u003e\n\u003c/head\u003e\n```\n\n## JavaScript Performance\n\n### Debouncing \u0026 Throttling\n\n```javascript\n// Debounce - execute after delay\nfunction debounce(func, delay) {\n  let timeoutId;\n  return function(...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() =\u003e func.apply(this, args), delay);\n  };\n}\n\n// Usage\nconst handleSearch = debounce((query) =\u003e {\n  // Search logic\n}, 300);\n\n// Throttle - execute at most once per interval\nfunction throttle(func, limit) {\n  let inThrottle;\n  return function(...args) {\n    if (!inThrottle) {\n      func.apply(this, args);\n      inThrottle = true;\n      setTimeout(() =\u003e inThrottle = false, limit);\n    }\n  };\n}\n\n// Usage\nconst handleScroll = throttle(() =\u003e {\n  // Scroll logic\n}, 100);\n```\n\n### Long Tasks\n\nBreak up with `requestIdleCallback`:\n\n```javascript\nfunction processLargeArray(items) {\n  let index = 0;\n  \n  function processChunk() {\n    const deadline = performance.now() + 50; // 50ms budget\n    \n    while (index \u003c items.length \u0026\u0026 performance.now() \u003c deadline) {\n      // Process item\n      processItem(items[index]);\n      index++;\n    }\n    \n    if (index \u003c items.length) {\n      requestIdleCallback(processChunk);\n    }\n  }\n  \n  requestIdleCallback(processChunk);\n}\n```\n\n### Web Workers\n\nOffload heavy computation:\n\n```javascript\n// main.js\nconst worker = new Worker('worker.js');\nworker.postMessage({ data: largeDataset });\n\nworker.onmessage = (event) =\u003e {\n  console.log('Result:', event.data);\n};\n\n// worker.js\nself.onmessage = (event) =\u003e {\n  const result = heavyComputation(event.data);\n  self.postMessage(result);\n};\n```\n\n## Performance Monitoring\n\n### Performance API\n\n```javascript\n// Navigation timing\nconst navTiming = performance.getEntriesByType('navigation')[0];\nconsole.log('DOM loaded:', navTiming.domContentLoadedEventEnd);\nconsole.log('Page loaded:', navTiming.loadEventEnd);\n\n// Resource timing\nconst resources = performance.getEntriesByType('resource');\nresources.forEach(resource =\u003e {\n  console.log(resource.name, resource.duration);\n});\n\n// Mark and measure custom timings\nperformance.mark('start-task');\n// Do work\nperformance.mark('end-task');\nperformance.measure('task-duration', 'start-task', 'end-task');\n\nconst measure = performance.getEntriesByName('task-duration')[0];\nconsole.log('Task took:', measure.duration, 'ms');\n\n// Observer for performance entries\nconst observer = new PerformanceObserver((list) =\u003e {\n  for (const entry of list.getEntries()) {\n    console.log('Performance entry:', entry);\n  }\n});\nobserver.observe({ entryTypes: ['measure', 'mark', 'resource'] });\n```\n\n### Web Vitals Library\n\n```javascript\nimport { getLCP, getFID, getCLS } from 'web-vitals';\n\ngetLCP(console.log);\ngetFID(console.log);\ngetCLS(console.log);\n```\n\n## CDN (Content Delivery Network)\n\nDistribute content across global servers for faster delivery.\n\n**Benefits**:\n- Reduced latency\n- Improved load times\n- Better availability\n- Reduced bandwidth costs\n\n**Popular CDNs**:\n- Cloudflare\n- Amazon CloudFront\n- Fastly\n- Akamai\n\n## Best Practices\n\n### Do's\n- ✅ Optimize images (format, compression, size)\n- ✅ Minify and compress code\n- ✅ Implement caching strategies\n- ✅ Use CDN for static assets\n- ✅ Lazy load non-critical resources\n- ✅ Defer non-critical JavaScript\n- ✅ Inline critical CSS\n- ✅ Use HTTP/2 or HTTP/3\n- ✅ Monitor Core Web Vitals\n- ✅ Set performance budgets\n\n### Don'ts\n- ❌ Serve unoptimized images\n- ❌ Block rendering with scripts\n- ❌ Cause layout shifts\n- ❌ Make excessive HTTP requests\n- ❌ Load unused code\n- ❌ Use synchronous operations on main thread\n- ❌ Ignore performance metrics\n- ❌ Forget mobile performance\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- bfcache\n- Bandwidth\n- Brotli compression\n- Code splitting\n- Compression Dictionary Transport\n- Cumulative Layout Shift (CLS)\n- Delta\n- First Contentful Paint (FCP)\n- First CPU idle\n- First Input Delay (FID)\n- First Meaningful Paint (FMP)\n- First Paint (FP)\n- Graceful degradation\n- gzip compression\n- Interaction to Next Paint (INP)\n- Jank\n- Jitter\n- Largest Contentful Paint (LCP)\n- Latency\n- Lazy load\n- Long task\n- Lossless compression\n- Lossy compression\n- Minification\n- Network throttling\n- Page load time\n- Page prediction\n- Perceived performance\n- Prefetch\n- Prerender\n- Progressive enhancement\n- RAIL\n- Real User Monitoring (RUM)\n- Reflow\n- Render-blocking\n- Repaint\n- Resource Timing\n- Round Trip Time (RTT)\n- Server Timing\n- Speed index\n- Speculative parsing\n- Synthetic monitoring\n- Time to First Byte (TTFB)\n- Time to Interactive (TTI)\n- Tree shaking\n- Web performance\n- Zstandard compression\n\n## Additional Resources\n\n- [Web.dev Performance](https://web.dev/performance/)\n- [MDN Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)\n- [WebPageTest](https://www.webpagetest.org/)\n- [Lighthouse](https://developers.google.com/web/tools/lighthouse)\n","references/security-authentication.md":"# Security \u0026 Authentication Reference\n\nComprehensive reference for web security, authentication, encryption, and secure coding practices.\n\n## Web Security Fundamentals\n\n### CIA Triad\n\nCore principles of information security:\n- **Confidentiality**: Data accessible only to authorized parties\n- **Integrity**: Data remains accurate and unmodified\n- **Availability**: Systems and data accessible when needed\n\n### Security Headers\n\n```http\n# Content Security Policy\nContent-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com 'nonce-\u003crandom-base64-value\u003e'; style-src 'self' 'nonce-\u003crandom-base64-value\u003e'; object-src 'none'\n\n# HTTP Strict Transport Security\nStrict-Transport-Security: max-age=31536000; includeSubDomains; preload\n\n# X-Frame-Options (clickjacking protection)\nX-Frame-Options: DENY\n\n# X-Content-Type-Options (MIME sniffing)\nX-Content-Type-Options: nosniff\n\n# X-XSS-Protection (legacy, use CSP instead)\nX-XSS-Protection: 1; mode=block\n\n# Referrer-Policy\nReferrer-Policy: strict-origin-when-cross-origin\n\n# Permissions-Policy\nPermissions-Policy: geolocation=(), microphone=(), camera=()\n```\n\n### CSP (Content Security Policy)\n\nMitigates XSS and data injection attacks.\n\n**Directives**:\n- `default-src`: Fallback for other directives\n- `script-src`: JavaScript sources\n- `style-src`: CSS sources\n- `img-src`: Image sources\n- `font-src`: Font sources\n- `connect-src`: Fetch/XMLHttpRequest destinations\n- `frame-src`: iframe sources\n- `object-src`: Plugin sources\n\n**Values**:\n- `'self'`: Same origin\n- `'none'`: Block all\n- `'unsafe-inline'`: Allow inline scripts/styles (avoid)\n- `'unsafe-eval'`: Allow eval() (avoid)\n- `https:`: HTTPS sources only\n- `https://example.com`: Specific domain\n\n## HTTPS \u0026 TLS\n\n### TLS (Transport Layer Security)\n\nEncrypts data in transit between client and server.\n\n**TLS Handshake**:\n1. Client Hello (supported versions, cipher suites)\n2. Server Hello (chosen version, cipher suite)\n3. Server Certificate\n4. Key Exchange\n5. Finished (connection established)\n\n**Versions**:\n- TLS 1.0, 1.1 (deprecated)\n- TLS 1.2 (current standard)\n- TLS 1.3 (latest, faster)\n\n### SSL Certificates\n\n**Types**:\n- **Domain Validated (DV)**: Basic validation\n- **Organization Validated (OV)**: Business verification\n- **Extended Validation (EV)**: Rigorous verification\n\n**Certificate Authority**: Trusted entity that issues certificates\n\n**Self-Signed**: Not trusted by browsers (dev/testing only)\n\n### HSTS (HTTP Strict Transport Security)\n\nForces browsers to use HTTPS:\n\n```http\nStrict-Transport-Security: max-age=31536000; includeSubDomains; preload\n```\n\n- `max-age`: Duration in seconds\n- `includeSubDomains`: Apply to all subdomains\n- `preload`: Submit to browser preload list\n\n## Authentication\n\n### Authentication vs Authorization\n\n- **Authentication**: Verify identity (\"Who are you?\")\n- **Authorization**: Verify permissions (\"What can you do?\")\n\n### Common Authentication Methods\n\n#### 1. Session-Based Authentication\n\n```javascript\n// Login\napp.post('/login', (req, res) =\u003e {\n  const { username, password } = req.body;\n  \n  // Verify credentials\n  if (verifyCredentials(username, password)) {\n    req.session.userId = user.id;\n    res.json({ success: true });\n  } else {\n    res.status(401).json({ error: 'Invalid credentials' });\n  }\n});\n\n// Protected route\napp.get('/profile', requireAuth, (req, res) =\u003e {\n  const user = getUserById(req.session.userId);\n  res.json(user);\n});\n\n// Logout\napp.post('/logout', (req, res) =\u003e {\n  req.session.destroy();\n  res.json({ success: true });\n});\n```\n\n**Pros**: Simple, server controls sessions  \n**Cons**: Stateful, scalability issues, CSRF vulnerable\n\n#### 2. Token-Based Authentication (JWT)\n\n```javascript\n// Login\napp.post('/login', (req, res) =\u003e {\n  const { username, password } = req.body;\n  \n  if (verifyCredentials(username, password)) {\n    const token = jwt.sign(\n      { userId: user.id, role: user.role },\n      SECRET_KEY,\n      { expiresIn: '1h' }\n    );\n    res.json({ token });\n  } else {\n    res.status(401).json({ error: 'Invalid credentials' });\n  }\n});\n\n// Protected route\napp.get('/profile', (req, res) =\u003e {\n  const token = req.headers.authorization?.split(' ')[1];\n  \n  try {\n    const decoded = jwt.verify(token, SECRET_KEY);\n    const user = getUserById(decoded.userId);\n    res.json(user);\n  } catch (error) {\n    res.status(401).json({ error: 'Invalid token' });\n  }\n});\n```\n\n**Pros**: Stateless, scalable, works across domains  \n**Cons**: Can't revoke before expiry, size overhead\n\n#### 3. OAuth 2.0\n\nAuthorization framework for delegated access.\n\n**Roles**:\n- **Resource Owner**: End user\n- **Client**: Application requesting access\n- **Authorization Server**: Issues tokens\n- **Resource Server**: Hosts protected resources\n\n**Flow Example** (Authorization Code):\n1. Client redirects to auth server\n2. User authenticates and grants permission\n3. Auth server redirects back with code\n4. Client exchanges code for access token\n5. Client uses token to access resources\n\n#### 4. Multi-Factor Authentication (MFA)\n\nRequires multiple verification factors:\n- **Something you know**: Password\n- **Something you have**: Phone, hardware token\n- **Something you are**: Biometric\n\n### Password Security\n\n```javascript\nconst bcrypt = require('bcrypt');\n\n// Hash password\nasync function hashPassword(password) {\n  const saltRounds = 10;\n  return await bcrypt.hash(password, saltRounds);\n}\n\n// Verify password\nasync function verifyPassword(password, hash) {\n  return await bcrypt.compare(password, hash);\n}\n```\n\n**Best Practices**:\n- ✅ Use bcrypt, scrypt, or Argon2\n- ✅ Minimum 8 characters (12+ recommended)\n- ✅ Require mix of characters\n- ✅ Implement rate limiting\n- ✅ Use account lockout after failures\n- ❌ Never store plain text passwords\n- ❌ Never limit password length (within reason)\n- ❌ Never email passwords\n\n## Common Vulnerabilities\n\n### XSS (Cross-Site Scripting)\n\nInjecting malicious scripts into web pages.\n\n**Types**:\n1. **Stored XSS**: Malicious script stored in database\n2. **Reflected XSS**: Script in URL reflected in response\n3. **DOM-based XSS**: Client-side script manipulation\n\n**Prevention**:\n```javascript\n// ❌ Vulnerable\nelement.innerHTML = userInput;\n\n// ✅ Safe\nelement.textContent = userInput;\n\n// ✅ Escape HTML\nfunction escapeHTML(str) {\n  return str.replace(/[\u0026\u003c\u003e\"']/g, (match) =\u003e {\n    const map = {\n      '\u0026': '\u0026amp;',\n      '\u003c': '\u0026lt;',\n      '\u003e': '\u0026gt;',\n      '\"': '\u0026quot;',\n      \"'\": '\u0026#39;'\n    };\n    return map[match];\n  });\n}\n\n// ✅ Use DOMPurify for rich content\nimport DOMPurify from 'dompurify';\nelement.innerHTML = DOMPurify.sanitize(userInput);\n```\n\n### CSRF (Cross-Site Request Forgery)\n\nTricks user into executing unwanted actions.\n\n**Prevention**:\n```javascript\n// CSRF token\napp.get('/form', (req, res) =\u003e {\n  const csrfToken = generateToken();\n  req.session.csrfToken = csrfToken;\n  res.render('form', { csrfToken });\n});\n\napp.post('/transfer', (req, res) =\u003e {\n  if (req.body.csrfToken !== req.session.csrfToken) {\n    return res.status(403).json({ error: 'Invalid CSRF token' });\n  }\n  // Process request\n});\n\n// SameSite cookie attribute\nSet-Cookie: sessionId=abc; SameSite=Strict; Secure; HttpOnly\n```\n\n### SQL Injection\n\nInjecting malicious SQL code.\n\n**Prevention**:\n```javascript\n// ❌ Vulnerable\nconst query = `SELECT * FROM users WHERE username = '${username}'`;\n\n// ✅ Parameterized queries\nconst query = 'SELECT * FROM users WHERE username = ?';\ndb.execute(query, [username]);\n\n// ✅ ORM/Query builder\nconst user = await User.findOne({ where: { username } });\n```\n\n### CORS Misconfiguration\n\n```javascript\n// ❌ Vulnerable (allows any origin)\nAccess-Control-Allow-Origin: *\nAccess-Control-Allow-Credentials: true\n\n// ✅ Whitelist specific origins\nconst allowedOrigins = ['https://example.com'];\nif (allowedOrigins.includes(origin)) {\n  res.setHeader('Access-Control-Allow-Origin', origin);\n  res.setHeader('Access-Control-Allow-Credentials', 'true');\n}\n```\n\n### Clickjacking\n\nTricking users into clicking hidden elements.\n\n**Prevention**:\n```http\nX-Frame-Options: DENY\nX-Frame-Options: SAMEORIGIN\n\n# Or with CSP\nContent-Security-Policy: frame-ancestors 'none'\nContent-Security-Policy: frame-ancestors 'self'\n```\n\n### File Upload Vulnerabilities\n\n```javascript\n// Validate file type\nconst allowedTypes = ['image/jpeg', 'image/png'];\nif (!allowedTypes.includes(file.mimetype)) {\n  return res.status(400).json({ error: 'Invalid file type' });\n}\n\n// Check file size\nconst maxSize = 5 * 1024 * 1024; // 5MB\nif (file.size \u003e maxSize) {\n  return res.status(400).json({ error: 'File too large' });\n}\n\n// Sanitize filename\nconst sanitizedName = file.name.replace(/[^a-z0-9.-]/gi, '_');\n\n// Store outside web root\nconst uploadPath = '/secure/uploads/' + sanitizedName;\n\n// Use random filenames\nconst filename = crypto.randomBytes(16).toString('hex') + path.extname(file.name);\n```\n\n## Cryptography\n\n### Encryption vs Hashing\n\n- **Encryption**: Reversible (decrypt with key)\n- **Hashing**: One-way transformation\n\n### Symmetric Encryption\n\nSame key for encryption and decryption.\n\n```javascript\nconst crypto = require('crypto');\n\nfunction encrypt(text, key) {\n  const iv = crypto.randomBytes(16);\n  const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);\n  let encrypted = cipher.update(text, 'utf8', 'hex');\n  encrypted += cipher.final('hex');\n  return iv.toString('hex') + ':' + encrypted;\n}\n\nfunction decrypt(text, key) {\n  const parts = text.split(':');\n  const iv = Buffer.from(parts[0], 'hex');\n  const encrypted = parts[1];\n  const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);\n  let decrypted = decipher.update(encrypted, 'hex', 'utf8');\n  decrypted += decipher.final('utf8');\n  return decrypted;\n}\n```\n\n### Public-Key Cryptography\n\nDifferent keys for encryption (public) and decryption (private).\n\n**Use Cases**:\n- TLS/SSL certificates\n- Digital signatures\n- SSH keys\n\n### Hash Functions\n\n```javascript\nconst crypto = require('crypto');\n\n// SHA-256\nconst hash = crypto.createHash('sha256').update(data).digest('hex');\n\n// HMAC (keyed hash)\nconst hmac = crypto.createHmac('sha256', secretKey).update(data).digest('hex');\n```\n\n### Digital Signatures\n\nVerify authenticity and integrity.\n\n```javascript\nconst { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', {\n  modulusLength: 2048\n});\n\n// Sign\nconst sign = crypto.createSign('SHA256');\nsign.update(data);\nconst signature = sign.sign(privateKey, 'hex');\n\n// Verify\nconst verify = crypto.createVerify('SHA256');\nverify.update(data);\nconst isValid = verify.verify(publicKey, signature, 'hex');\n```\n\n## Secure Coding Practices\n\n### Input Validation\n\n```javascript\n// Validate email\nfunction isValidEmail(email) {\n  const regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n  return regex.test(email);\n}\n\n// Validate and sanitize\nfunction sanitizeInput(input) {\n  // Remove dangerous characters\n  return input.replace(/[\u003c\u003e\\\"']/g, '');\n}\n\n// Whitelist approach\nfunction isValidUsername(username) {\n  return /^[a-zA-Z0-9_]{3,20}$/.test(username);\n}\n```\n\n### Output Encoding\n\nEncode data based on context:\n- **HTML context**: Escape `\u003c \u003e \u0026 \" '`\n- **JavaScript context**: Use JSON.stringify()\n- **URL context**: Use encodeURIComponent()\n- **CSS context**: Escape special characters\n\n### Secure Storage\n\n```javascript\n// ❌ Don't store sensitive data in localStorage\nlocalStorage.setItem('token', token); // XSS can access\n\n// ✅ Use HttpOnly cookies\nres.cookie('token', token, {\n  httpOnly: true,\n  secure: true,\n  sameSite: 'strict',\n  maxAge: 3600000\n});\n\n// ✅ For sensitive client-side data, encrypt first\nconst encrypted = encrypt(sensitiveData, encryptionKey);\nsessionStorage.setItem('data', encrypted);\n```\n\n### Rate Limiting\n\n```javascript\nconst rateLimit = require('express-rate-limit');\n\nconst limiter = rateLimit({\n  windowMs: 15 * 60 * 1000, // 15 minutes\n  max: 100, // Limit each IP to 100 requests per windowMs\n  message: 'Too many requests, please try again later'\n});\n\napp.use('/api/', limiter);\n\n// Stricter for auth endpoints\nconst authLimiter = rateLimit({\n  windowMs: 15 * 60 * 1000,\n  max: 5,\n  skipSuccessfulRequests: true\n});\n\napp.use('/api/login', authLimiter);\n```\n\n### Error Handling\n\n```javascript\n// ❌ Expose internal details\ncatch (error) {\n  res.status(500).json({ error: error.message });\n}\n\n// ✅ Generic error message\ncatch (error) {\n  console.error(error); // Log internally\n  res.status(500).json({ error: 'Internal server error' });\n}\n```\n\n## Security Testing\n\n### Tools\n- **OWASP ZAP**: Security scanner\n- **Burp Suite**: Web vulnerability scanner\n- **nmap**: Network scanner\n- **SQLMap**: SQL injection testing\n- **Nikto**: Web server scanner\n\n### Checklist\n- [ ] HTTPS enforced everywhere\n- [ ] Security headers configured\n- [ ] Authentication implemented securely\n- [ ] Authorization checked on all endpoints\n- [ ] Input validation and sanitization\n- [ ] Output encoding\n- [ ] CSRF protection\n- [ ] SQL injection prevention\n- [ ] XSS prevention\n- [ ] Rate limiting\n- [ ] Secure session management\n- [ ] Secure password storage\n- [ ] File upload security\n- [ ] Error handling doesn't leak info\n- [ ] Dependencies up to date\n- [ ] Security logging and monitoring\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Authentication\n- Authenticator\n- Certificate authority\n- Challenge-response authentication\n- CIA\n- Cipher\n- Cipher suite\n- Ciphertext\n- Credential\n- Cross-site request forgery (CSRF)\n- Cross-site scripting (XSS)\n- Cryptanalysis\n- Cryptography\n- Decryption\n- Denial of Service (DoS)\n- Digital certificate\n- Digital signature\n- Distributed Denial of Service (DDoS)\n- Encryption\n- Federated identity\n- Fingerprinting\n- Firewall\n- HSTS\n- Identity provider (IdP)\n- MitM\n- Multi-factor authentication\n- Nonce\n- OWASP\n- Plaintext\n- Principle of least privilege\n- Privileged\n- Public-key cryptography\n- Relying party\n- Replay attack\n- Salt\n- Secure context\n- Secure Sockets Layer (SSL)\n- Session hijacking\n- Signature (security)\n- SQL injection\n- Symmetric-key cryptography\n- Transport Layer Security (TLS)\n\n## Additional Resources\n\n- [OWASP Top 10](https://owasp.org/www-project-top-ten/)\n- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)\n- [Security Headers](https://securityheaders.com/)\n- [SSL Labs](https://www.ssllabs.com/)\n","references/servers-infrastructure.md":"# Servers \u0026 Infrastructure Reference\n\nWeb servers, hosting, deployment, and infrastructure concepts.\n\n## Web Servers\n\n### Popular Web Servers\n\n#### Nginx\n\nHigh-performance web server and reverse proxy.\n\n**Features**:\n- Load balancing\n- Reverse proxy\n- Static file serving\n- SSL/TLS termination\n\n**Basic Configuration**:\n```nginx\nserver {\n    listen 80;\n    server_name example.com;\n    \n    # Serve static files\n    location / {\n        root /var/www/html;\n        index index.html;\n    }\n    \n    # Proxy to backend\n    location /api {\n        proxy_pass http://localhost:3000;\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n    }\n    \n    # SSL configuration\n    listen 443 ssl;\n    ssl_certificate /path/to/cert.pem;\n    ssl_certificate_key /path/to/key.pem;\n}\n```\n\n#### Apache HTTP Server\n\nWidely-used web server.\n\n**Features**:\n- .htaccess support\n- Module system\n- Virtual hosting\n\n**Basic .htaccess**:\n```apache\n# Redirect to HTTPS\nRewriteEngine On\nRewriteCond %{HTTPS} off\nRewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]\n\n# Custom error pages\nErrorDocument 404 /404.html\n\n# Cache control\n\u003cFilesMatch \"\\.(jpg|jpeg|png|gif|css|js)$\"\u003e\n    Header set Cache-Control \"max-age=31536000, public\"\n\u003c/FilesMatch\u003e\n```\n\n#### Node.js Servers\n\n**Express.js**:\n```javascript\nconst express = require('express');\nconst app = express();\n\napp.use(express.json());\napp.use(express.static('public'));\n\napp.get('/api/users', (req, res) =\u003e {\n  res.json({ users: [] });\n});\n\napp.listen(3000, () =\u003e {\n  console.log('Server running on port 3000');\n});\n```\n\n**Built-in HTTP Server**:\n```javascript\nconst http = require('http');\n\nconst server = http.createServer((req, res) =\u003e {\n  res.writeHead(200, { 'Content-Type': 'text/html' });\n  res.end('\u003ch1\u003eHello World\u003c/h1\u003e');\n});\n\nserver.listen(3000);\n```\n\n## Hosting Options\n\n### Static Hosting\n\nFor static sites (HTML, CSS, JS).\n\n**Platforms**:\n- **Vercel**: Automatic deployments, serverless functions\n- **Netlify**: Build automation, edge functions\n- **GitHub Pages**: Free for public repos\n- **Cloudflare Pages**: Fast global CDN\n- **AWS S3 + CloudFront**: Scalable, requires setup\n\n**Deployment**:\n```bash\n# Vercel\nnpx vercel\n\n# Netlify\nnpx netlify deploy --prod\n\n# GitHub Pages (via Git)\ngit push origin main\n```\n\n### Platform as a Service (PaaS)\n\nManaged application hosting.\n\n**Platforms**:\n- **Heroku**: Easy deployment, add-ons\n- **Railway**: Modern developer experience\n- **Render**: Unified platform\n- **Google App Engine**: Automatic scaling\n- **Azure App Service**: Microsoft cloud\n\n**Example (Heroku)**:\n```bash\n# Deploy\ngit push heroku main\n\n# Scale\nheroku ps:scale web=2\n\n# View logs\nheroku logs --tail\n```\n\n### Infrastructure as a Service (IaaS)\n\nVirtual servers (more control, more setup).\n\n**Providers**:\n- **AWS EC2**: Amazon virtual servers\n- **Google Compute Engine**: Google VMs\n- **DigitalOcean Droplets**: Simple VPS\n- **Linode**: Developer-friendly VPS\n\n### Containerization\n\n**Docker**:\n```dockerfile\n# Dockerfile\nFROM node:18-alpine\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nEXPOSE 3000\nCMD [\"node\", \"server.js\"]\n```\n\n```bash\n# Build image\ndocker build -t my-app .\n\n# Run container\ndocker run -p 3000:3000 my-app\n```\n\n**Docker Compose**:\n```yaml\nversion: '3'\nservices:\n  web:\n    build: .\n    ports:\n      - \"3000:3000\"\n    environment:\n      - DATABASE_URL=postgres://db:5432\n  db:\n    image: postgres:15\n    environment:\n      POSTGRES_PASSWORD: password\n```\n\n### Kubernetes\n\nContainer orchestration platform.\n\n**Concepts**:\n- **Pods**: Smallest deployable units\n- **Services**: Expose pods\n- **Deployments**: Manage replicas\n- **Ingress**: HTTP routing\n\n## Content Delivery Network (CDN)\n\nDistributed network for fast content delivery.\n\n**Benefits**:\n- Faster load times\n- Reduced server load\n- DDoS protection\n- Geographic distribution\n\n**Popular CDNs**:\n- **Cloudflare**: Free tier, DDoS protection\n- **AWS CloudFront**: Amazon CDN\n- **Fastly**: Edge computing\n- **Akamai**: Enterprise CDN\n\n**CDN for Libraries**:\n```html\n\u003c!-- CDN-hosted library --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js\"\u003e\u003c/script\u003e\n```\n\n## Domain Name System (DNS)\n\nTranslates domain names to IP addresses.\n\n### DNS Records\n\n| Type | Purpose | Example |\n|------|---------|---------|\n| A | IPv4 address | `example.com → 192.0.2.1` |\n| AAAA | IPv6 address | `example.com → 2001:db8::1` |\n| CNAME | Alias to another domain | `www → example.com` |\n| MX | Mail server | `mail.example.com` |\n| TXT | Text information | SPF, DKIM records |\n| NS | Nameserver | DNS delegation |\n\n**DNS Lookup**:\n```bash\n# Command line\nnslookup example.com\ndig example.com\n\n# JavaScript (not direct DNS, but IP lookup)\nfetch('https://dns.google/resolve?name=example.com')\n```\n\n### DNS Propagation\n\nTime for DNS changes to spread globally (typically 24-48 hours).\n\n## SSL/TLS Certificates\n\nEncrypt data between client and server.\n\n### Certificate Types\n\n- **Domain Validation (DV)**: Basic, automated\n- **Organization Validation (OV)**: Verified business\n- **Extended Validation (EV)**: Highest validation\n\n### Getting Certificates\n\n**Let's Encrypt** (Free):\n```bash\n# Certbot\nsudo certbot --nginx -d example.com\n```\n\n**Cloudflare** (Free with Cloudflare DNS)\n\n### HTTPS Configuration\n\n```nginx\n# Nginx HTTPS\nserver {\n    listen 443 ssl http2;\n    server_name example.com;\n    \n    ssl_certificate /path/to/fullchain.pem;\n    ssl_certificate_key /path/to/privkey.pem;\n    \n    ssl_protocols TLSv1.2 TLSv1.3;\n    ssl_ciphers HIGH:!aNULL:!MD5;\n}\n\n# Redirect HTTP to HTTPS\nserver {\n    listen 80;\n    server_name example.com;\n    return 301 https://$host$request_uri;\n}\n```\n\n## Load Balancing\n\nDistribute traffic across multiple servers.\n\n### Load Balancing Algorithms\n\n- **Round Robin**: Rotate through servers\n- **Least Connections**: Send to server with fewest connections\n- **IP Hash**: Route based on client IP\n- **Weighted**: Servers have different capacities\n\n**Nginx Load Balancer**:\n```nginx\nupstream backend {\n    server server1.example.com weight=3;\n    server server2.example.com;\n    server server3.example.com;\n}\n\nserver {\n    location / {\n        proxy_pass http://backend;\n    }\n}\n```\n\n## Reverse Proxy\n\nServer that forwards requests to backend servers.\n\n**Benefits**:\n- Load balancing\n- SSL termination\n- Caching\n- Security (hide backend)\n\n**Nginx Reverse Proxy**:\n```nginx\nserver {\n    location / {\n        proxy_pass http://localhost:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}\n```\n\n## Caching Strategies\n\n### Browser Caching\n\n```http\nCache-Control: public, max-age=31536000, immutable\n```\n\n### Server-Side Caching\n\n**Redis**:\n```javascript\nconst redis = require('redis');\nconst client = redis.createClient();\n\n// Cache data\nawait client.set('user:1', JSON.stringify(user), {\n  EX: 3600 // Expire after 1 hour\n});\n\n// Retrieve cached data\nconst cached = await client.get('user:1');\n```\n\n### CDN Caching\n\nStatic assets cached at edge locations.\n\n## Environment Variables\n\nConfiguration without hardcoding.\n\n```bash\n# .env file\nDATABASE_URL=postgresql://localhost/mydb\nAPI_KEY=secret-key-here\nNODE_ENV=production\n```\n\n```javascript\n// Access in Node.js\nrequire('dotenv').config();\nconst dbUrl = process.env.DATABASE_URL;\n```\n\n**Best Practices**:\n- Never commit .env to Git\n- Use .env.example as template\n- Different values per environment\n- Secure secret values\n\n## Deployment Strategies\n\n### Continuous Deployment (CD)\n\nAutomatically deploy when code is pushed.\n\n**GitHub Actions**:\n```yaml\nname: Deploy\non:\n  push:\n    branches: [main]\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n      - run: npm ci\n      - run: npm run build\n      - run: npm run deploy\n```\n\n### Blue-Green Deployment\n\nTwo identical environments, switch traffic.\n\n### Canary Deployment\n\nGradually roll out to subset of users.\n\n### Rolling Deployment\n\nUpdate instances incrementally.\n\n## Process Managers\n\nKeep applications running.\n\n### PM2\n\n```bash\n# Start application\npm2 start app.js\n\n# Start with name\npm2 start app.js --name my-app\n\n# Cluster mode (use all CPUs)\npm2 start app.js -i max\n\n# Monitor\npm2 monit\n\n# Restart\npm2 restart my-app\n\n# Stop\npm2 stop my-app\n\n# Logs\npm2 logs\n\n# Startup script (restart on reboot)\npm2 startup\npm2 save\n```\n\n### systemd\n\nLinux service manager.\n\n```ini\n# /etc/systemd/system/myapp.service\n[Unit]\nDescription=My Node App\n\n[Service]\nExecStart=/usr/bin/node /path/to/app.js\nRestart=always\nUser=nobody\nEnvironment=NODE_ENV=production\n\n[Install]\nWantedBy=multi-user.target\n```\n\n```bash\nsudo systemctl enable myapp\nsudo systemctl start myapp\nsudo systemctl status myapp\n```\n\n## Monitoring \u0026 Logging\n\n### Application Monitoring\n\n- **New Relic**: APM, monitoring\n- **Datadog**: Infrastructure monitoring\n- **Grafana**: Visualization\n- **Prometheus**: Metrics collection\n\n### Log Aggregation\n\n- **Elasticsearch + Kibana**: Search and visualize logs\n- **Splunk**: Enterprise log management\n- **Papertrail**: Cloud logging\n\n### Uptime Monitoring\n\n- **UptimeRobot**: Free uptime checks\n- **Pingdom**: Monitoring service\n- **StatusCake**: Website monitoring\n\n## Security Best Practices\n\n### Server Hardening\n\n- Keep software updated\n- Use firewall (ufw, iptables)\n- Disable root SSH login\n- Use SSH keys (not passwords)\n- Limit user permissions\n- Regular backups\n\n### Application Security\n\n- Use HTTPS everywhere\n- Implement rate limiting\n- Validate all input\n- Use security headers\n- Keep dependencies updated\n- Regular security audits\n\n## Backup Strategies\n\n### Database Backups\n\n```bash\n# PostgreSQL\npg_dump dbname \u003e backup.sql\n\n# MySQL\nmysqldump -u user -p dbname \u003e backup.sql\n\n# MongoDB\nmongodump --db mydb --out /backup/\n```\n\n### Automated Backups\n\n- Daily backups\n- Multiple retention periods\n- Off-site storage\n- Test restores regularly\n\n## Scalability\n\n### Vertical Scaling\n\nIncrease server resources (CPU, RAM).\n\n**Pros**: Simple  \n**Cons**: Limited, expensive\n\n### Horizontal Scaling\n\nAdd more servers.\n\n**Pros**: Unlimited scaling  \n**Cons**: Complex, requires load balancer\n\n### Database Scaling\n\n- **Replication**: Read replicas\n- **Sharding**: Split data across databases\n- **Caching**: Reduce database load\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Apache\n- Bandwidth\n- CDN\n- Cloud computing\n- CNAME\n- DNS\n- Domain\n- Domain name\n- Firewall\n- Host\n- Hotlink\n- IP address\n- ISP\n- Latency\n- localhost\n- Nginx\n- Origin\n- Port\n- Proxy servers\n- Round Trip Time (RTT)\n- Server\n- Site\n- TLD\n- Web server\n- Website\n\n## Additional Resources\n\n- [Nginx Documentation](https://nginx.org/en/docs/)\n- [Docker Documentation](https://docs.docker.com/)\n- [AWS Documentation](https://docs.aws.amazon.com/)\n- [Let's Encrypt](https://letsencrypt.org/)\n- [PM2 Documentation](https://pm2.keymetrics.io/docs/)\n","references/web-apis-dom.md":"# Web APIs \u0026 DOM Reference\n\nComprehensive reference for the Document Object Model (DOM) and Web APIs available in modern browsers.\n\n## Document Object Model (DOM)\n\n### What is the DOM?\nThe 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.\n\n**DOM Tree Structure**:\n```\nDocument\n└── html\n    ├── head\n    │   ├── title\n    │   └── meta\n    └── body\n        ├── header\n        ├── main\n        └── footer\n```\n\n### DOM Node Types\n\n| Node Type | Description | Example |\n|-----------|-------------|---------|\n| Element | HTML element | `\u003cdiv\u003e`, `\u003cp\u003e` |\n| Text | Text content | Text inside elements |\n| Comment | HTML comment | `\u003c!-- comment --\u003e` |\n| Document | Root document | `document` |\n| DocumentFragment | Lightweight document | For batch operations |\n\n### Selecting Elements\n\n```javascript\n// By ID\nconst element = document.getElementById('myId');\n\n// By class name (returns HTMLCollection)\nconst elements = document.getElementsByClassName('myClass');\n\n// By tag name (returns HTMLCollection)\nconst divs = document.getElementsByTagName('div');\n\n// Query selector (first match)\nconst first = document.querySelector('.myClass');\nconst advanced = document.querySelector('div.container \u003e p:first-child');\n\n// Query selector all (returns NodeList)\nconst all = document.querySelectorAll('.myClass');\n\n// Special selectors\ndocument.body; // Body element\ndocument.head; // Head element\ndocument.documentElement; // \u003chtml\u003e element\n```\n\n### Traversing the DOM\n\n```javascript\nconst element = document.querySelector('#myElement');\n\n// Parent\nelement.parentElement;\nelement.parentNode;\n\n// Children\nelement.children; // HTMLCollection of child elements\nelement.childNodes; // NodeList of all child nodes\nelement.firstElementChild;\nelement.lastElementChild;\n\n// Siblings\nelement.nextElementSibling;\nelement.previousElementSibling;\n\n// Closest ancestor matching selector\nelement.closest('.container');\n\n// Check if element contains another\nparent.contains(child); // true/false\n```\n\n### Creating and Modifying Elements\n\n```javascript\n// Create element\nconst div = document.createElement('div');\nconst text = document.createTextNode('Hello');\nconst fragment = document.createDocumentFragment();\n\n// Set content\ndiv.textContent = 'Plain text'; // Safe (escaped)\ndiv.innerHTML = '\u003cstrong\u003eHTML\u003c/strong\u003e'; // Can be unsafe with user input\n\n// Set attributes\ndiv.setAttribute('id', 'myDiv');\ndiv.setAttribute('class', 'container');\ndiv.id = 'myDiv'; // Direct property\ndiv.className = 'container';\ndiv.classList.add('active');\ndiv.classList.remove('inactive');\ndiv.classList.toggle('visible');\ndiv.classList.contains('active'); // true/false\n\n// Set styles\ndiv.style.color = 'red';\ndiv.style.backgroundColor = 'blue';\ndiv.style.cssText = 'color: red; background: blue;';\n\n// Data attributes\ndiv.dataset.userId = '123'; // Sets data-user-id=\"123\"\ndiv.getAttribute('data-user-id'); // \"123\"\n\n// Insert into DOM\nparent.appendChild(div); // Add as last child\nparent.insertBefore(div, referenceNode); // Insert before reference\nparent.prepend(div); // Add as first child (modern)\nparent.append(div); // Add as last child (modern)\nelement.after(div); // Insert after element\nelement.before(div); // Insert before element\nelement.replaceWith(newElement); // Replace element\n\n// Remove from DOM\nelement.remove(); // Modern way\nparent.removeChild(element); // Old way\n\n// Clone element\nconst clone = element.cloneNode(true); // true = deep clone (with children)\n```\n\n### Element Properties\n\n```javascript\n// Dimensions and position\nelement.offsetWidth; // Width including border\nelement.offsetHeight; // Height including border\nelement.clientWidth; // Width excluding border\nelement.clientHeight; // Height excluding border\nelement.scrollWidth; // Total scrollable width\nelement.scrollHeight; // Total scrollable height\nelement.offsetTop; // Top position relative to offsetParent\nelement.offsetLeft; // Left position relative to offsetParent\n\n// Bounding box\nconst rect = element.getBoundingClientRect();\n// Returns: { x, y, width, height, top, right, bottom, left }\n\n// Scroll position\nelement.scrollTop; // Vertical scroll position\nelement.scrollLeft; // Horizontal scroll position\nelement.scrollTo(0, 100); // Scroll to position\nelement.scrollIntoView(); // Scroll element into view\n\n// Check visibility\nelement.checkVisibility(); // Modern API\n```\n\n## Event Handling\n\n### Adding Event Listeners\n\n```javascript\n// addEventListener (modern, recommended)\nelement.addEventListener('click', handleClick);\nelement.addEventListener('click', handleClick, { once: true }); // Remove after first trigger\n\nfunction handleClick(event) {\n  console.log('Clicked!', event);\n}\n\n// Event options\nelement.addEventListener('scroll', handleScroll, {\n  passive: true, // Won't call preventDefault()\n  capture: false, // Bubble phase (default)\n  once: true // Remove after one call\n});\n\n// Remove event listener\nelement.removeEventListener('click', handleClick);\n```\n\n### Common Events\n\n| Category | Events |\n|----------|--------|\n| Mouse | `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`, `contextmenu` |\n| Keyboard | `keydown`, `keyup`, `keypress` (deprecated) |\n| Form | `submit`, `change`, `input`, `focus`, `blur`, `invalid` |\n| Window | `load`, `DOMContentLoaded`, `resize`, `scroll`, `beforeunload`, `unload` |\n| Touch | `touchstart`, `touchmove`, `touchend`, `touchcancel` |\n| Drag | `drag`, `dragstart`, `dragend`, `dragover`, `drop` |\n| Media | `play`, `pause`, `ended`, `timeupdate`, `loadeddata` |\n| Animation | `animationstart`, `animationend`, `animationiteration` |\n| Transition | `transitionstart`, `transitionend` |\n\n### Event Object\n\n```javascript\nelement.addEventListener('click', (event) =\u003e {\n  // Target elements\n  event.target; // Element that triggered event\n  event.currentTarget; // Element with listener attached\n  \n  // Mouse position\n  event.clientX; // X relative to viewport\n  event.clientY; // Y relative to viewport\n  event.pageX; // X relative to document\n  event.pageY; // Y relative to document\n  \n  // Keyboard\n  event.key; // 'a', 'Enter', 'ArrowUp'\n  event.code; // 'KeyA', 'Enter', 'ArrowUp'\n  event.ctrlKey; // true if Ctrl pressed\n  event.shiftKey; // true if Shift pressed\n  event.altKey; // true if Alt pressed\n  event.metaKey; // true if Meta/Cmd pressed\n  \n  // Control event flow\n  event.preventDefault(); // Prevent default action\n  event.stopPropagation(); // Stop bubbling\n  event.stopImmediatePropagation(); // Stop other listeners\n});\n```\n\n### Event Delegation\n\nHandle events on parent instead of individual children:\n\n```javascript\n// Instead of adding listener to each button\ndocument.querySelector('.container').addEventListener('click', (event) =\u003e {\n  if (event.target.matches('button')) {\n    console.log('Button clicked:', event.target);\n  }\n});\n```\n\n## Web Storage APIs\n\n### LocalStorage\n\nPersistent storage (no expiration):\n\n```javascript\n// Set item\nlocalStorage.setItem('key', 'value');\nlocalStorage.setItem('user', JSON.stringify({ name: 'John' }));\n\n// Get item\nconst value = localStorage.getItem('key');\nconst user = JSON.parse(localStorage.getItem('user'));\n\n// Remove item\nlocalStorage.removeItem('key');\n\n// Clear all\nlocalStorage.clear();\n\n// Get key by index\nlocalStorage.key(0);\n\n// Number of items\nlocalStorage.length;\n\n// Iterate all items\nfor (let i = 0; i \u003c localStorage.length; i++) {\n  const key = localStorage.key(i);\n  const value = localStorage.getItem(key);\n  console.log(key, value);\n}\n```\n\n### SessionStorage\n\nStorage cleared when tab closes:\n\n```javascript\n// Same API as localStorage\nsessionStorage.setItem('key', 'value');\nsessionStorage.getItem('key');\nsessionStorage.removeItem('key');\nsessionStorage.clear();\n```\n\n**Storage Limits**: ~5-10MB per origin\n\n## Fetch API\n\nModern API for HTTP requests:\n\n```javascript\n// Basic GET request\nfetch('https://api.example.com/data')\n  .then(response =\u003e response.json())\n  .then(data =\u003e console.log(data))\n  .catch(error =\u003e console.error(error));\n\n// Async/await\nasync function fetchData() {\n  try {\n    const response = await fetch('https://api.example.com/data');\n    \n    // Check if successful\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n    \n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('Fetch error:', error);\n  }\n}\n\n// POST request with JSON\nfetch('https://api.example.com/users', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application/json'\n  },\n  body: JSON.stringify({ name: 'John', age: 30 })\n})\n  .then(response =\u003e response.json())\n  .then(data =\u003e console.log(data));\n\n// With various options\nfetch(url, {\n  method: 'GET', // GET, POST, PUT, DELETE, etc.\n  headers: {\n    'Authorization': 'Bearer token',\n    'Content-Type': 'application/json'\n  },\n  body: JSON.stringify(data), // For POST/PUT\n  mode: 'cors', // cors, no-cors, same-origin\n  credentials: 'include', // include, same-origin, omit\n  cache: 'no-cache', // default, no-cache, reload, force-cache\n  redirect: 'follow', // follow, error, manual\n  referrerPolicy: 'no-referrer' // no-referrer, origin, etc.\n});\n\n// Response methods\nconst text = await response.text(); // Plain text\nconst json = await response.json(); // JSON\nconst blob = await response.blob(); // Binary data\nconst arrayBuffer = await response.arrayBuffer(); // ArrayBuffer\nconst formData = await response.formData(); // FormData\n```\n\n## Other Important Web APIs\n\n### Console API\n\n```javascript\nconsole.log('Message'); // Log message\nconsole.error('Error'); // Error message (red)\nconsole.warn('Warning'); // Warning message (yellow)\nconsole.info('Info'); // Info message\nconsole.table([{ a: 1 }, { a: 2 }]); // Table format\nconsole.group('Group'); // Start group\nconsole.groupEnd(); // End group\nconsole.time('timer'); // Start timer\nconsole.timeEnd('timer'); // End timer and log duration\nconsole.clear(); // Clear console\nconsole.assert(condition, 'Error message'); // Assert condition\n```\n\n### Timers\n\n```javascript\n// Execute once after delay\nconst timeoutId = setTimeout(() =\u003e {\n  console.log('Executed after 1 second');\n}, 1000);\n\n// Cancel timeout\nclearTimeout(timeoutId);\n\n// Execute repeatedly\nconst intervalId = setInterval(() =\u003e {\n  console.log('Executed every second');\n}, 1000);\n\n// Cancel interval\nclearInterval(intervalId);\n\n// RequestAnimationFrame (for animations)\nfunction animate() {\n  // Animation code\n  requestAnimationFrame(animate);\n}\nrequestAnimationFrame(animate);\n```\n\n### URL API\n\n```javascript\nconst url = new URL('https://example.com:8080/path?query=value#hash');\n\nurl.protocol; // 'https:'\nurl.hostname; // 'example.com'\nurl.port; // '8080'\nurl.pathname; // '/path'\nurl.search; // '?query=value'\nurl.hash; // '#hash'\nurl.href; // Full URL\n\n// URL parameters\nurl.searchParams.get('query'); // 'value'\nurl.searchParams.set('newParam', 'newValue');\nurl.searchParams.append('query', 'another');\nurl.searchParams.delete('query');\nurl.searchParams.has('query'); // true/false\n\n// Convert to string\nurl.toString(); // Full URL\n```\n\n### FormData API\n\n```javascript\n// Create FormData from form\nconst form = document.querySelector('form');\nconst formData = new FormData(form);\n\n// Create FormData manually\nconst data = new FormData();\ndata.append('username', 'john');\ndata.append('file', fileInput.files[0]);\n\n// Get values\ndata.get('username'); // 'john'\ndata.getAll('files'); // Array of all 'files' values\n\n// Iterate\nfor (const [key, value] of data.entries()) {\n  console.log(key, value);\n}\n\n// Send with fetch\nfetch('/api/upload', {\n  method: 'POST',\n  body: formData // Don't set Content-Type header\n});\n```\n\n### Intersection Observer API\n\nDetect when element enters viewport:\n\n```javascript\nconst observer = new IntersectionObserver((entries) =\u003e {\n  entries.forEach(entry =\u003e {\n    if (entry.isIntersecting) {\n      console.log('Element is visible');\n      entry.target.classList.add('visible');\n    }\n  });\n}, {\n  threshold: 0.5, // 50% visible\n  rootMargin: '0px'\n});\n\nobserver.observe(element);\nobserver.unobserve(element);\nobserver.disconnect(); // Stop observing all\n```\n\n### Mutation Observer API\n\nWatch for DOM changes:\n\n```javascript\nconst observer = new MutationObserver((mutations) =\u003e {\n  mutations.forEach(mutation =\u003e {\n    console.log('DOM changed:', mutation.type);\n  });\n});\n\nobserver.observe(element, {\n  attributes: true, // Watch attribute changes\n  childList: true, // Watch child elements\n  subtree: true, // Watch all descendants\n  characterData: true // Watch text content\n});\n\nobserver.disconnect(); // Stop observing\n```\n\n### Geolocation API\n\n```javascript\nnavigator.geolocation.getCurrentPosition(\n  (position) =\u003e {\n    console.log(position.coords.latitude);\n    console.log(position.coords.longitude);\n  },\n  (error) =\u003e {\n    console.error('Error getting location:', error);\n  },\n  {\n    enableHighAccuracy: true,\n    timeout: 5000,\n    maximumAge: 0\n  }\n);\n\n// Watch position (continuous updates)\nconst watchId = navigator.geolocation.watchPosition(callback);\nnavigator.geolocation.clearWatch(watchId);\n```\n\n### Web Workers\n\nRun JavaScript in background thread:\n\n```javascript\n// Main thread\nconst worker = new Worker('worker.js');\n\nworker.postMessage({ data: 'Hello' });\n\nworker.onmessage = (event) =\u003e {\n  console.log('From worker:', event.data);\n};\n\nworker.onerror = (error) =\u003e {\n  console.error('Worker error:', error);\n};\n\nworker.terminate(); // Stop worker\n\n// worker.js\nself.onmessage = (event) =\u003e {\n  console.log('From main:', event.data);\n  self.postMessage({ result: 'Done' });\n};\n```\n\n### Canvas API\n\nDraw graphics:\n\n```javascript\nconst canvas = document.querySelector('canvas');\nconst ctx = canvas.getContext('2d');\n\n// Draw rectangle\nctx.fillStyle = 'blue';\nctx.fillRect(10, 10, 100, 50);\n\n// Draw circle\nctx.beginPath();\nctx.arc(100, 100, 50, 0, Math.PI * 2);\nctx.fillStyle = 'red';\nctx.fill();\n\n// Draw text\nctx.font = '20px Arial';\nctx.fillText('Hello', 10, 50);\n\n// Draw image\nconst img = new Image();\nimg.onload = () =\u003e {\n  ctx.drawImage(img, 0, 0);\n};\nimg.src = 'image.jpg';\n```\n\n### IndexedDB\n\nClient-side database for large amounts of structured data:\n\n```javascript\n// Open database\nconst request = indexedDB.open('MyDatabase', 1);\n\nrequest.onerror = () =\u003e console.error('Database error');\n\nrequest.onsuccess = (event) =\u003e {\n  const db = event.target.result;\n  // Use database\n};\n\nrequest.onupgradeneeded = (event) =\u003e {\n  const db = event.target.result;\n  const objectStore = db.createObjectStore('users', { keyPath: 'id' });\n  objectStore.createIndex('name', 'name', { unique: false });\n};\n\n// Add data\nconst transaction = db.transaction(['users'], 'readwrite');\nconst objectStore = transaction.objectStore('users');\nobjectStore.add({ id: 1, name: 'John' });\n\n// Get data\nconst request = objectStore.get(1);\nrequest.onsuccess = () =\u003e console.log(request.result);\n```\n\n## Best Practices\n\n### Do's\n- ✅ Use `addEventListener` over inline event handlers\n- ✅ Remove event listeners when no longer needed\n- ✅ Use event delegation for dynamic content\n- ✅ Cache DOM queries in variables\n- ✅ Use `textContent` for plain text (safer than `innerHTML`)\n- ✅ Use DocumentFragment for batch DOM operations\n- ✅ Debounce/throttle scroll and resize handlers\n- ✅ Use `requestAnimationFrame` for animations\n- ✅ Validate and sanitize user input\n\n### Don'ts\n- ❌ Use `innerHTML` with untrusted data (XSS risk)\n- ❌ Query DOM repeatedly in loops\n- ❌ Modify DOM in tight loops (batch operations)\n- ❌ Use `document.write()` (deprecated)\n- ❌ Use synchronous XMLHttpRequest\n- ❌ Store sensitive data in localStorage\n- ❌ Ignore error handling in async code\n- ❌ Block main thread with heavy computations\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- API\n- Application context\n- Beacon\n- Blink\n- Blink element\n- Browser\n- Browsing context\n- Buffer\n- Canvas\n- DOM (Document Object Model)\n- Document environment\n- Event\n- Expando\n- Global object\n- Global scope\n- Hoisting\n- IndexedDB\n- Interpolation\n- Node (DOM)\n- Shadow tree\n- WindowProxy\n- Wrapper\n\n## Additional Resources\n\n- [MDN DOM Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)\n- [MDN Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)\n- [JavaScript.info DOM](https://javascript.info/document)\n","references/web-protocols-standards.md":"# Web Protocols \u0026 Standards Reference\n\nOrganizations, specifications, and standards that govern the web.\n\n## Standards Organizations\n\n### W3C (World Wide Web Consortium)\n\nInternational community developing web standards.\n\n**Key Standards**:\n- HTML\n- CSS\n- XML\n- SVG\n- WCAG (Accessibility)\n- Web APIs\n\n**Website**: https://www.w3.org/\n\n### WHATWG (Web Hypertext Application Technology Working Group)\n\nCommunity maintaining HTML and DOM Living Standards.\n\n**Key Standards**:\n- HTML Living Standard\n- DOM Living Standard\n- Fetch Standard\n- URL Standard\n\n**Website**: https://whatwg.org/\n\n### IETF (Internet Engineering Task Force)\n\nDevelops internet standards.\n\n**Key Standards**:\n- HTTP\n- TLS\n- TCP/IP\n- DNS\n- WebRTC protocols\n\n**Website**: https://www.ietf.org/\n\n### ECMA International\n\nStandards organization for information systems.\n\n**Key Standards**:\n- ECMAScript (JavaScript)\n- JSON\n\n**Website**: https://www.ecma-international.org/\n\n### TC39 (Technical Committee 39)\n\nECMAScript standardization committee.\n\n**Proposal Stages**:\n- **Stage 0**: Strawperson\n- **Stage 1**: Proposal\n- **Stage 2**: Draft\n- **Stage 3**: Candidate\n- **Stage 4**: Finished (included in next version)\n\n### IANA (Internet Assigned Numbers Authority)\n\nCoordinates internet protocol resources.\n\n**Responsibilities**:\n- MIME types\n- Port numbers\n- Protocol parameters\n- TLDs (Top-Level Domains)\n\n### ICANN (Internet Corporation for Assigned Names and Numbers)\n\nCoordinates DNS and IP addresses.\n\n## Web Standards\n\n### HTML Standards\n\n**HTML5 Features**:\n- Semantic elements (`\u003carticle\u003e`, `\u003csection\u003e`, etc.)\n- Audio and video elements\n- Canvas and SVG\n- Form enhancements\n- LocalStorage and SessionStorage\n- Web Workers\n- Geolocation API\n\n### CSS Specifications\n\n**CSS Modules** (each specification is a module):\n- CSS Selectors Level 4\n- CSS Flexbox Level 1\n- CSS Grid Level 2\n- CSS Animations\n- CSS Transitions\n- CSS Custom Properties\n\n### JavaScript Standards\n\n**ECMAScript Versions**:\n- **ES5** (2009): Strict mode, JSON\n- **ES6/ES2015**: Classes, modules, arrow functions, promises\n- **ES2016**: Array.includes(), exponentiation operator (`**`)\n- **ES2017**: async/await, Object.values/entries\n- **ES2018**: Rest/spread for objects, async iteration\n- **ES2019**: Array.flat(), Object.fromEntries\n- **ES2020**: Optional chaining, nullish coalescing, BigInt\n- **ES2021**: Logical assignment, Promise.any\n- **ES2022**: Top-level await, class fields\n- **ES2023**: Array.findLast(), Object.groupBy\n\n### Web API Specifications\n\n**Common APIs**:\n- DOM (Document Object Model)\n- Fetch API\n- Service Workers\n- Web Storage\n- IndexedDB\n- WebRTC\n- WebGL\n- Web Audio API\n- Payment Request API\n- Web Authentication API\n\n## Specifications\n\n### Normative vs Non-Normative\n\n- **Normative**: Required for compliance\n- **Non-normative**: Informative only (examples, notes)\n\n### Specification Lifecycle\n\n1. **Editor's Draft**: Work in progress\n2. **Working Draft**: Community review\n3. **Candidate Recommendation**: Implementation and testing\n4. **Proposed Recommendation**: Final review\n5. **W3C Recommendation**: Official standard\n\n## Browser Compatibility\n\n### Feature Detection\n\n```javascript\n// Check feature support\nif ('serviceWorker' in navigator) {\n  // Use service workers\n}\n\nif (window.IntersectionObserver) {\n  // Use Intersection Observer\n}\n\nif (CSS.supports('display', 'grid')) {\n  // Use CSS Grid\n}\n```\n\n### Baseline Compatibility\n\nNewly standardized features achieving widespread browser support.\n\n**Widely Available**: Firefox, Chrome, Edge, Safari support\n\n### Polyfills\n\nCode providing modern functionality in older browsers:\n\n```javascript\n// Promise polyfill\nif (!window.Promise) {\n  window.Promise = PromisePolyfill;\n}\n\n// Fetch polyfill\nif (!window.fetch) {\n  window.fetch = fetchPolyfill;\n}\n```\n\n### Progressive Enhancement\n\nBuild for basic browsers, enhance for modern ones:\n\n```css\n/* Base styles */\n.container {\n  display: block;\n}\n\n/* Enhanced for Grid support */\n@supports (display: grid) {\n  .container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n```\n\n## IDL (Interface Definition Language)\n\n**WebIDL**: Defines Web APIs\n\n```webidl\ninterface Element : Node {\n  readonly attribute DOMString? tagName;\n  DOMString? getAttribute(DOMString qualifiedName);\n  undefined setAttribute(DOMString qualifiedName, DOMString value);\n};\n```\n\n## Specifications to Know\n\n- **HTML Living Standard**\n- **CSS Specifications** (modular)\n- **ECMAScript Language Specification**\n- **HTTP/1.1 (RFC 9112)**\n- **HTTP/2 (RFC 9113)**\n- **HTTP/3 (RFC 9114)**\n- **TLS 1.3 (RFC 8446)**\n- **WebSocket Protocol (RFC 6455)**\n- **CORS (Fetch Standard)**\n- **Service Workers**\n- **Web Authentication (WebAuthn)**\n\n## Glossary Terms\n\n**Key Terms Covered**:\n- Baseline (compatibility)\n- BCP 47 language tag\n- ECMA\n- ECMAScript\n- HTML5\n- IANA\n- ICANN\n- IDL\n- IETF\n- ISO\n- ITU\n- Non-normative\n- Normative\n- Polyfill\n- Shim\n- Specification\n- W3C\n- WAI\n- WCAG\n- WHATWG\n- Web standards\n- WebIDL\n\n## Additional Resources\n\n- [W3C Standards](https://www.w3.org/TR/)\n- [WHATWG Living Standards](https://spec.whatwg.org/)\n- [MDN Web Docs](https://developer.mozilla.org/)\n- [Can I Use](https://caniuse.com/)\n- [TC39 Proposals](https://github.com/tc39/proposals)\n"},"import":{"commit_sha":"541b7819d8c3545c6df122491af4fa1eae415779","imported_at":"2026-05-18T20:05:35Z","license_text":"MIT License\n\nCopyright GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","owner":"github","repo":"github/awesome-copilot","source_url":"https://github.com/github/awesome-copilot/tree/541b7819d8c3545c6df122491af4fa1eae415779/plugins/cms-development/skills/web-coder"}},"content_hash":[38,94,35,117,161,166,220,135,141,234,72,251,7,42,108,103,232,162,173,65,138,195,232,193,58,180,76,103,100,149,85,215],"trust_level":"unsigned","yanked":false}