new skill web-coder (#881)

* new skill web-coder

* codespellrc: add aNULL HTTPS config cipher string

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

* Apply suggestion from @jhauga

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

skills/web-coder/SKILL.md

@@ -0,0 +1,563 @@
+---
+name: web-coder
+description: 'Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.'
+---
+
+# Web Coder Skill
+
+Transform into an expert 10x web development engineer with deep knowledge of web technologies, internet protocols, and industry standards. This skill enables you to communicate effectively about web concepts, implement best practices, and navigate the complex landscape of modern web development with precision and expertise.
+
+Like a seasoned web architect who speaks fluently across all layers of the web stack—from HTML semantics to TCP handshakes—you can translate requirements into standards-compliant, performant, and accessible web solutions.
+
+## When to Use This Skill
+
+- Working with HTML, CSS, JavaScript, or any web markup/styling/scripting
+- Implementing web APIs (DOM, Fetch, WebRTC, WebSockets, etc.)
+- Discussing or implementing HTTP/HTTPS protocols and networking concepts
+- Building accessible web applications (ARIA, WCAG compliance)
+- Optimizing web performance (caching, lazy loading, code splitting)
+- Implementing web security measures (CORS, CSP, authentication)
+- Working with web standards and specifications (W3C, WHATWG)
+- Debugging browser-specific issues or cross-browser compatibility
+- Setting up web servers, CDNs, or infrastructure
+- Discussing web development terminology with collaborators
+- Converting web-related requirements or descriptions into code
+
+## Prerequisites
+
+- Basic understanding of at least one area of web development
+- Access to web development tools (browser, editor, terminal)
+- Understanding that web development spans multiple disciplines
+
+## Core Competencies
+
+As a web coder, you possess expert knowledge across 15 key domains:
+
+### 1. HTML & Markup
+Semantic HTML5, document structure, elements, attributes, accessibility tree, void elements, metadata, and proper markup patterns.
+
+**Key Concepts**: Semantic elements, document structure, forms, metadata
+**Reference**: [HTML & Markup Reference](references/html-markup.md)
+
+### 2. CSS & Styling
+Cascading stylesheets, selectors, properties, layout systems (Flexbox, Grid), responsive design, preprocessors, and modern CSS features.
+
+**Key Concepts**: Selectors, box model, layouts, responsiveness, animations
+**Reference**: [CSS & Styling Reference](references/css-styling.md)
+
+### 3. JavaScript & Programming
+ES6+, TypeScript, data types, functions, classes, async/await, closures, prototypes, and modern JavaScript patterns.
+
+**Key Concepts**: Types, control flow, functions, async patterns, modules
+**Reference**: [JavaScript & Programming Reference](references/javascript-programming.md)
+
+### 4. Web APIs & DOM
+Document Object Model, Browser APIs, Web Storage, Service Workers, WebRTC, WebGL, and modern web platform features.
+
+**Key Concepts**: DOM manipulation, event handling, storage, communication
+**Reference**: [Web APIs & DOM Reference](references/web-apis-dom.md)
+
+### 5. HTTP & Networking
+HTTP/1.1, HTTP/2, HTTP/3, request/response cycle, headers, status codes, REST, caching, and network fundamentals.
+
+**Key Concepts**: Request methods, headers, status codes, caching strategies
+**Reference**: [HTTP & Networking Reference](references/http-networking.md)
+
+### 6. Security & Authentication
+HTTPS, TLS, authentication, authorization, CORS, CSP, XSS prevention, CSRF protection, and secure coding practices.
+
+**Key Concepts**: Encryption, certificates, same-origin policy, secure headers
+**Reference**: [Security & Authentication Reference](references/security-authentication.md)
+
+### 7. Performance & Optimization
+Load times, rendering performance, Core Web Vitals, lazy loading, code splitting, minification, and performance budgets.
+
+**Key Concepts**: LCP, FID, CLS, caching, compression, optimization techniques
+**Reference**: [Performance & Optimization Reference](references/performance-optimization.md)
+
+### 8. Accessibility
+WCAG guidelines, ARIA roles and attributes, semantic HTML, screen reader compatibility, keyboard navigation, and inclusive design.
+
+**Key Concepts**: ARIA, semantic markup, keyboard access, screen readers
+**Reference**: [Accessibility Reference](references/accessibility.md)
+
+### 9. Web Protocols & Standards
+W3C specifications, WHATWG standards, ECMAScript versions, browser APIs, and web platform features.
+
+**Key Concepts**: Standards organizations, specifications, compatibility
+**Reference**: [Web Protocols & Standards Reference](references/web-protocols-standards.md)
+
+### 10. Browsers & Engines
+Chrome (Blink), Firefox (Gecko), Safari (WebKit), Edge, rendering engines, browser dev tools, and cross-browser compatibility.
+
+**Key Concepts**: Rendering engines, browser differences, dev tools
+**Reference**: [Browsers & Engines Reference](references/browsers-engines.md)
+
+### 11. Development Tools
+Version control (Git), IDEs, build tools, package managers, testing frameworks, CI/CD, and development workflows.
+
+**Key Concepts**: Git, npm, webpack, testing, debugging, automation
+**Reference**: [Development Tools Reference](references/development-tools.md)
+
+### 12. Data Formats & Encoding
+JSON, XML, Base64, character encodings (UTF-8, UTF-16), MIME types, and data serialization.
+
+**Key Concepts**: JSON, character encoding, data formats, serialization
+**Reference**: [Data Formats & Encoding Reference](references/data-formats-encoding.md)
+
+### 13. Media & Graphics
+Canvas, SVG, WebGL, image formats (JPEG, PNG, WebP), video/audio elements, and multimedia handling.
+
+**Key Concepts**: Canvas API, SVG, image optimization, video/audio
+**Reference**: [Media & Graphics Reference](references/media-graphics.md)
+
+### 14. Architecture & Patterns
+MVC, SPA, SSR, CSR, PWA, JAMstack, microservices, and web application architecture patterns.
+
+**Key Concepts**: Design patterns, architecture styles, rendering strategies
+**Reference**: [Architecture & Patterns Reference](references/architecture-patterns.md)
+
+### 15. Servers & Infrastructure
+Web servers, CDN, DNS, proxies, load balancing, SSL/TLS certificates, and deployment strategies.
+
+**Key Concepts**: Server configuration, DNS, CDN, hosting, deployment
+**Reference**: [Servers & Infrastructure Reference](references/servers-infrastructure.md)
+
+## Working with Web Terminology
+
+### Accurate Translation
+
+When collaborators use web terminology, ensure accurate interpretation:
+
+#### Assess Terminology Accuracy
+1. **High confidence terms**: Standard terms like "API", "DOM", "HTTP" - use as stated
+2. **Ambiguous terms**: Terms with multiple meanings (e.g., "Block" - CSS box model vs code block)
+3. **Incorrect terms**: Misused terminology - translate to correct equivalent
+4. **Outdated terms**: Legacy terms - update to modern equivalents
+
+#### Common Terminology Issues
+
+| Collaborator Says | Likely Means | Correct Implementation |
+|-------------------|--------------|------------------------|
+| "AJAX call" | Asynchronous HTTP request | Use Fetch API or XMLHttpRequest |
+| "Make it responsive" | Mobile-friendly layout | Use media queries and responsive units |
+| "Add SSL" | Enable HTTPS | Configure TLS certificate |
+| "Fix the cache" | Update cache strategy | Adjust Cache-Control headers |
+| "Speed up the site" | Improve performance | Optimize assets, lazy load, minify |
+
+### Context-Aware Responses
+
+Different contexts require different interpretations:
+
+**Frontend Context**:
+- "Performance" → Client-side metrics (FCP, LCP, CLS)
+- "State" → Application state management (React, Vue, etc.)
+- "Routing" → Client-side routing (SPA navigation)
+
+**Backend Context**:
+- "Performance" → Server response time, throughput
+- "State" → Session management, database state
+- "Routing" → Server-side route handling
+
+**DevOps Context**:
+- "Performance" → Infrastructure scaling, load times
+- "Cache" → CDN caching, server-side caching
+- "Security" → SSL/TLS, firewalls, authentication
+
+## Step-by-Step Workflows
+
+### Workflow 1: Implement Web Feature from Requirements
+
+When given web-related requirements:
+
+1. **Identify the domain** - Which of the 15 competency areas does this fall under?
+2. **Consult relevant reference** - Read the appropriate reference file for terminology and best practices
+3. **Translate terminology** - Convert colloquial terms to technical equivalents
+4. **Apply web standards** - Use W3C/WHATWG specifications as guidance
+5. **Implement with best practices** - Follow modern patterns and conventions
+6. **Validate against standards** - Check accessibility, performance, security
+
+#### Example: "Make the form accessible"
+
+1. **Domain**: Accessibility (Competency #8)
+2. **Reference**: [Accessibility Reference](references/accessibility.md)
+3. **Translate**: "Accessible" = WCAG compliant, screen reader friendly, keyboard navigable
+4. **Standards**: WCAG 2.1 Level AA
+5. **Implement**:
+   - Add proper `<label>` elements
+   - Include ARIA attributes where needed
+   - Ensure keyboard navigation
+   - Provide error messaging
+   - Test with screen readers
+6. **Validate**: Run accessibility audit tools
+
+### Workflow 2: Debug Web Issues
+
+When encountering web-related problems:
+
+1. **Categorize the issue** - Which layer (HTML, CSS, JS, Network, etc.)?
+2. **Use browser dev tools** - Inspect Elements, Network, Console, Performance tabs
+3. **Check browser compatibility** - Is this a cross-browser issue?
+4. **Review relevant standards** - What does the spec say should happen?
+5. **Test hypothesis** - Does fixing the root cause resolve the issue?
+6. **Implement solution** - Apply standards-compliant fix
+
+### Workflow 3: Optimize Web Performance
+
+When asked to improve performance:
+
+1. **Measure baseline** - Use Lighthouse, WebPageTest, or performance APIs
+2. **Identify bottlenecks** - Network, rendering, JavaScript execution?
+3. **Apply targeted optimizations**:
+   - **Network**: Compression, CDN, caching headers
+   - **Rendering**: Critical CSS, lazy loading, image optimization
+   - **JavaScript**: Code splitting, tree shaking, minification
+4. **Measure improvement** - Compare metrics to baseline
+5. **Iterate** - Continue optimizing until performance budgets are met
+
+### Workflow 4: Implement Web Security
+
+When implementing security features:
+
+1. **Identify threats** - XSS, CSRF, injection, MitM, etc.
+2. **Apply defense in depth**:
+   - **Transport**: Use HTTPS with TLS 1.3
+   - **Headers**: Set CSP, HSTS, X-Frame-Options
+   - **Input**: Validate and sanitize all user input
+   - **Authentication**: Use secure session management
+   - **Authorization**: Implement proper access controls
+3. **Test security** - Use security scanning tools
+4. **Monitor** - Set up logging and alerting
+
+## Best Practices
+
+### Do's
+
+- ✅ Use semantic HTML elements (`<article>`, `<nav>`, `<main>`)
+- ✅ Follow W3C and WHATWG specifications
+- ✅ Implement progressive enhancement
+- ✅ Test across multiple browsers and devices
+- ✅ Optimize for Core Web Vitals (LCP, FID, CLS)
+- ✅ Make accessibility a priority from the start
+- ✅ Use modern JavaScript features (ES6+)
+- ✅ Implement proper error handling
+- ✅ Minify and compress production assets
+- ✅ Use HTTPS everywhere
+- ✅ Follow REST principles for APIs
+- ✅ Implement proper caching strategies
+
+### Don'ts
+
+- ❌ Use tables for layout (use CSS Grid/Flexbox)
+- ❌ Ignore accessibility requirements
+- ❌ Skip cross-browser testing
+- ❌ Serve unoptimized images
+- ❌ Mix HTTP and HTTPS content
+- ❌ Store sensitive data in localStorage
+- ❌ Ignore performance budgets
+- ❌ Use inline styles extensively
+- ❌ Forget to validate user input
+- ❌ Implement authentication without security review
+- ❌ Use deprecated APIs or features
+- ❌ Ignore browser console warnings
+
+## Common Web Development Patterns
+
+### Pattern 1: Progressive Enhancement
+
+Start with basic HTML, enhance with CSS, add JavaScript functionality:
+
+```html
+<!-- Base HTML (works without CSS/JS) -->
+<form action="/submit" method="POST">
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" required>
+  <button type="submit">Submit</button>
+</form>
+```
+
+```css
+/* Enhanced styling */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+```
+
+```javascript
+// Enhanced interactivity
+form.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  await fetch('/api/submit', { /* ... */ });
+});
+```
+
+### Pattern 2: Responsive Design
+
+Mobile-first approach with progressive enhancement:
+
+```css
+/* Mobile-first base styles */
+.container {
+  padding: 1rem;
+}
+
+/* Tablet and up */
+@media (min-width: 768px) {
+  .container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+  }
+}
+```
+
+### Pattern 3: Accessible Component
+
+Keyboard navigation, ARIA, semantic HTML:
+
+```html
+<nav aria-label="Main navigation">
+  <ul role="menubar">
+    <li role="none">
+      <a href="/" role="menuitem">Home</a>
+    </li>
+    <li role="none">
+      <button
+        role="menuitem"
+        aria-expanded="false"
+        aria-haspopup="true"
+      >
+        Products
+      </button>
+    </li>
+  </ul>
+</nav>
+```
+
+### Pattern 4: Performance Optimization
+
+Lazy loading, code splitting, and efficient loading:
+
+```html
+<!-- Lazy load images -->
+<img
+  src="placeholder.jpg"
+  data-src="high-res.jpg"
+  loading="lazy"
+  alt="Description"
+>
+
+<!-- Preload critical resources -->
+<link rel="preload" href="critical.css" as="style">
+<link rel="preconnect" href="https://api.example.com">
+
+<!-- Async/defer non-critical scripts -->
+<script src="analytics.js" async></script>
+<script src="app.js" defer></script>
+```
+
+## Troubleshooting
+
+| Issue | Likely Cause | Solution |
+|-------|-------------|----------|
+| **CORS error** | Cross-origin request blocked | Configure CORS headers on server |
+| **Layout shift** | Images without dimensions | Add width/height attributes |
+| **Slow load time** | Unoptimized assets | Minify, compress, lazy load |
+| **Accessibility audit fails** | Missing ARIA or semantic HTML | Add labels, roles, and semantic elements |
+| **Mixed content warning** | HTTP resources on HTTPS page | Update all resources to HTTPS |
+| **JavaScript not working** | Browser compatibility issue | Use polyfills or transpile with Babel |
+| **CSS not applying** | Specificity or cascade issue | Check selector specificity and order |
+| **Form not submitting** | Validation or event handling issue | Check validation rules and event listeners |
+| **API request failing** | Network, CORS, or auth issue | Check Network tab, CORS config, auth headers |
+| **Cache not updating** | Aggressive caching | Implement cache-busting or adjust headers |
+
+## Advanced Techniques
+
+### 1. Performance Monitoring
+
+Implement Real User Monitoring (RUM):
+
+```javascript
+// Measure Core Web Vitals
+const observer = new PerformanceObserver((list) => {
+  for (const entry of list.getEntries()) {
+    console.log('Performance metric:', {
+      name: entry.name,
+      value: entry.value,
+      rating: entry.rating
+    });
+  }
+});
+
+observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
+```
+
+### 2. Advanced Accessibility
+
+Create custom accessible components:
+
+```javascript
+class AccessibleTabs {
+  constructor(element) {
+    this.tablist = element.querySelector('[role="tablist"]');
+    this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
+    this.panels = Array.from(element.querySelectorAll('[role="tabpanel"]'));
+    
+    this.tabs.forEach((tab, index) => {
+      tab.addEventListener('click', () => this.selectTab(index));
+      tab.addEventListener('keydown', (e) => this.handleKeydown(e, index));
+    });
+  }
+  
+  selectTab(index) {
+    // Deselect all tabs
+    this.tabs.forEach(tab => {
+      tab.setAttribute('aria-selected', 'false');
+      tab.setAttribute('tabindex', '-1');
+    });
+    this.panels.forEach(panel => panel.hidden = true);
+    
+    // Select target tab
+    this.tabs[index].setAttribute('aria-selected', 'true');
+    this.tabs[index].setAttribute('tabindex', '0');
+    this.tabs[index].focus();
+    this.panels[index].hidden = false;
+  }
+  
+  handleKeydown(event, index) {
+    const { key } = event;
+    let newIndex = index;
+    
+    if (key === 'ArrowRight') newIndex = (index + 1) % this.tabs.length;
+    if (key === 'ArrowLeft') newIndex = (index - 1 + this.tabs.length) % this.tabs.length;
+    if (key === 'Home') newIndex = 0;
+    if (key === 'End') newIndex = this.tabs.length - 1;
+    
+    if (newIndex !== index) {
+      event.preventDefault();
+      this.selectTab(newIndex);
+    }
+  }
+}
+```
+
+### 3. Modern CSS Techniques
+
+Use modern CSS features for layouts:
+
+```css
+/* Container queries (modern browsers) */
+@container (min-width: 400px) {
+  .card {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+/* CSS Grid with subgrid */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.grid-item {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 3;
+}
+
+/* CSS custom properties with fallbacks */
+:root {
+  --primary-color: #007bff;
+  --spacing: 1rem;
+}
+
+.element {
+  color: var(--primary-color, blue);
+  padding: var(--spacing, 16px);
+}
+```
+
+### 4. Security Headers
+
+Implement comprehensive security headers:
+
+```javascript
+// Express.js example
+app.use((req, res, next) => {
+  // Content Security Policy
+  res.setHeader('Content-Security-Policy', 
+    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'");
+  
+  // Strict Transport Security
+  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
+  
+  // XSS Protection
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('X-Frame-Options', 'DENY');
+  res.setHeader('X-XSS-Protection', '1; mode=block');
+  
+  // Referrer Policy
+  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+  
+  next();
+});
+```
+
+## Reference Files
+
+This skill includes 15 comprehensive reference files covering all aspects of web development:
+
+1. [HTML & Markup](references/html-markup.md) - Semantic HTML, elements, attributes
+2. [CSS & Styling](references/css-styling.md) - Selectors, layouts, responsive design
+3. [JavaScript & Programming](references/javascript-programming.md) - ES6+, types, patterns
+4. [Web APIs & DOM](references/web-apis-dom.md) - Browser APIs, DOM manipulation
+5. [HTTP & Networking](references/http-networking.md) - Protocols, headers, REST
+6. [Security & Authentication](references/security-authentication.md) - HTTPS, auth, security
+7. [Performance & Optimization](references/performance-optimization.md) - Core Web Vitals, optimization
+8. [Accessibility](references/accessibility.md) - WCAG, ARIA, inclusive design
+9. [Web Protocols & Standards](references/web-protocols-standards.md) - W3C, WHATWG, specs
+10. [Browsers & Engines](references/browsers-engines.md) - Rendering engines, compatibility
+11. [Development Tools](references/development-tools.md) - Git, build tools, testing
+12. [Data Formats & Encoding](references/data-formats-encoding.md) - JSON, encodings, formats
+13. [Media & Graphics](references/media-graphics.md) - Canvas, SVG, images, video
+14. [Architecture & Patterns](references/architecture-patterns.md) - MVC, SPA, SSR, patterns
+15. [Servers & Infrastructure](references/servers-infrastructure.md) - Servers, CDN, deployment
+
+## Validation Checklist
+
+Before considering web development complete:
+
+- [ ] HTML validates without errors (W3C validator)
+- [ ] CSS follows best practices and validates
+- [ ] JavaScript has no console errors
+- [ ] Accessibility audit passes (Lighthouse, axe)
+- [ ] Performance meets Core Web Vitals targets
+- [ ] Security headers are properly configured
+- [ ] Cross-browser testing completed
+- [ ] Responsive design works on all breakpoints
+- [ ] SEO meta tags are present and correct
+- [ ] Forms have proper validation and error handling
+- [ ] Images are optimized and have alt text
+- [ ] HTTPS is enforced
+- [ ] Caching strategy is implemented
+- [ ] Error handling covers edge cases
+- [ ] Code is minified and compressed for production
+
+## Summary
+
+The Web Coder skill transforms you into an expert 10x engineer with comprehensive knowledge across all aspects of web development. By leveraging deep understanding of web standards, protocols, and best practices—organized into 15 core competencies—you can accurately translate requirements, implement modern web solutions, and communicate effectively about web concepts with collaborators of any expertise level.
+
+**Remember**: Web development is multidisciplinary. Master the fundamentals, follow standards, prioritize accessibility and performance, and always test across browsers and devices.

skills/web-coder/references/accessibility.md

@@ -0,0 +1,346 @@
+# Accessibility Reference
+
+Web accessibility ensures content is usable by everyone, including people with disabilities.
+
+## WCAG (Web Content Accessibility Guidelines)
+
+### Levels
+- **A**: Minimum level
+- **AA**: Standard target (legal requirement in many jurisdictions)
+- **AAA**: Enhanced accessibility
+
+### Four Principles (POUR)
+
+1. **Perceivable**: Information presented in ways users can perceive
+2. **Operable**: UI components and navigation are operable
+3. **Understandable**: Information and UI operation is understandable
+4. **Robust**: Content works with current and future technologies
+
+## ARIA (Accessible Rich Internet Applications)
+
+### ARIA Roles
+
+```html
+<!-- Landmark roles -->
+<nav role="navigation">
+<main role="main">
+<aside role="complementary">
+<footer role="contentinfo">
+
+<!-- Widget roles -->
+<div role="button" tabindex="0">Click me</div>
+<div role="tab" aria-selected="true">Tab 1</div>
+<div role="dialog" aria-labelledby="dialogTitle">
+
+<!-- Document structure -->
+<div role="list">
+  <div role="listitem">Item 1</div>
+</div>
+```
+
+### ARIA Attributes
+
+```html
+<!-- States -->
+<button aria-pressed="true">Toggle</button>
+<input aria-invalid="true" aria-errormessage="error1">
+<div aria-expanded="false" aria-controls="menu">Menu</div>
+
+<!-- Properties -->
+<img alt="" aria-hidden="true">
+<input aria-label="Search" type="search">
+<dialog aria-labelledby="title" aria-describedby="desc">
+  <h2 id="title">Dialog Title</h2>
+  <p id="desc">Description</p>
+</dialog>
+
+<!-- Relationships -->
+<label id="label1" for="input1">Name:</label>
+<input id="input1" aria-labelledby="label1">
+
+<!-- Live regions -->
+<div aria-live="polite" aria-atomic="true">
+  Status updated
+</div>
+```
+
+## Keyboard Navigation
+
+### Tab Order
+
+```html
+<!-- Natural tab order -->
+<button>First</button>
+<button>Second</button>
+
+<!-- Custom tab order (avoid if possible) -->
+<button tabindex="1">First</button>
+<button tabindex="2">Second</button>
+
+<!-- Programmatically focusable  (not in tab order) -->
+<div tabindex="-1">Not in tab order</div>
+
+<!-- In tab order -->
+<div tabindex="0" role="button">Custom button</div>
+```
+
+### Keyboard Events
+
+```javascript
+element.addEventListener('keydown', (e) => {
+  switch(e.key) {
+    case 'Enter':
+    case ' ': // Space
+      // Activate
+      break;
+    case 'Escape':
+      // Close/cancel
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+    case 'ArrowLeft':
+    case 'ArrowRight':
+      // Navigate
+      break;
+  }
+});
+```
+
+## Semantic HTML
+
+```html
+<!-- ✅ Good: semantic elements -->
+<nav aria-label="Main navigation">
+  <ul>
+    <li><a href="/">Home</a></li>
+  </ul>
+</nav>
+
+<!-- ❌ Bad: non-semantic -->
+<div class="nav">
+  <div><a href="/">Home</a></div>
+</div>
+
+<!-- ✅ Good: proper headings hierarchy -->
+<h1>Page Title</h1>
+  <h2>Section</h2>
+    <h3>Subsection</h3>
+
+<!-- ❌ Bad: skipping levels -->
+<h1>Page Title</h1>
+  <h3>Skipped h2</h3>
+```
+
+## Forms Accessibility
+
+```html
+<form>
+  <!-- Labels -->
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name" required aria-required="true">
+  
+  <!-- Error messages -->
+  <input
+    type="email"
+    id="email"
+    aria-invalid="true"
+    aria-describedby="email-error">
+  <span id="email-error" role="alert">
+    Please enter a valid email
+  </span>
+  
+  <!-- Fieldset for groups -->
+  <fieldset>
+    <legend>Choose an option</legend>
+    <label>
+      <input type="radio" name="option" value="a">
+      Option A
+    </label>
+    <label>
+      <input type="radio" name="option" value="b">
+      Option B
+    </label>
+  </fieldset>
+  
+  <!-- Help text -->
+  <label for="password">Password:</label>
+  <input
+    type="password"
+    id="password"
+    aria-describedby="password-help">
+  <span id="password-help">
+    Must be at least 8 characters
+  </span>
+</form>
+```
+
+## Images and Media
+
+```html
+<!-- Informative image -->
+<img src="chart.png" alt="Sales increased 50% in Q1">
+
+<!-- Decorative image -->
+<img src="decorative.png" alt="" role="presentation">
+
+<!-- Complex image -->
+<figure>
+  <img src="data-viz.png" alt="Sales data visualization">
+  <figcaption>
+    Detailed description of the data...
+  </figcaption>
+</figure>
+
+<!-- Video with captions -->
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <track kind="captions" src="captions.vtt" srclang="en" label="English">
+</video>
+```
+
+## Color and Contrast
+
+### WCAG Requirements
+
+- **Level AA**: 4.5:1 for normal text, 3:1 for large text
+- **Level AAA**: 7:1 for normal text, 4.5:1 for large text
+
+```css
+/* ✅ Good contrast */
+.text {
+  color: #000; /* Black */
+  background: #fff; /* White */
+  /* Contrast: 21:1 */
+}
+
+/* Don't rely on color alone */
+.error {
+  color: red;
+  /* ✅ Also use icon or text */
+  &::before {
+    content: '⚠ ';
+  }
+}
+```
+
+## Screen Readers
+
+### Best Practices
+
+```html
+<!-- Skip links for navigation -->
+<a href="#main-content" class="skip-link">
+  Skip to main content
+</a>
+
+<!-- Accessible headings -->
+<h1>Main heading (only one)</h1>
+
+<!-- Descriptive links -->
+<!-- ❌ Bad -->
+<a href="/article">Read more</a>
+
+<!-- ✅ Good -->
+<a href="/article">Read more about accessibility</a>
+
+<!-- Hidden content (screen reader only) -->
+<span class="sr-only">
+  Additional context for screen readers
+</span>
+```
+
+```css
+/* Screen reader only class */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+```
+
+## Focus Management
+
+```css
+/* Visible focus indicator */
+:focus {
+  outline: 2px solid #005fcc;
+  outline-offset: 2px;
+}
+
+/* Don't remove focus entirely */
+/* ❌ Bad */
+:focus {
+  outline: none;
+}
+
+/* ✅ Good: custom focus style */
+:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
+}
+```
+
+```javascript
+// Focus management in modal
+function openModal() {
+  modal.showModal();
+  modal.querySelector('button').focus();
+  
+  // Trap focus
+  modal.addEventListener('keydown', (e) => {
+    if (e.key === 'Tab') {
+      trapFocus(e, modal);
+    }
+  });
+}
+```
+
+## Testing Tools
+
+- **axe DevTools**: Browser extension
+- **WAVE**: Web accessibility evaluation tool
+- **NVDA**: Screen reader (Windows)
+- **JAWS**: Screen reader (Windows)
+- **VoiceOver**: Screen reader (macOS/iOS)
+- **Lighthouse**: Automated audits
+
+## Checklist
+
+- [ ] Semantic HTML used
+- [ ] All images have alt text
+- [ ] Color contrast meets WCAG AA
+- [ ] Keyboard navigation works
+- [ ] Focus indicators visible
+- [ ] Forms have labels
+- [ ] Heading hierarchy correct
+- [ ] ARIA used appropriately
+- [ ] Screen reader tested
+- [ ] No keyboard traps
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Accessibility
+- Accessibility tree
+- Accessible description
+- Accessible name
+- ARIA
+- ATAG
+- Boolean attribute (ARIA)
+- Screen reader
+- UAAG
+- WAI
+- WCAG
+
+## Additional Resources
+
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [WebAIM](https://webaim.org/)
+- [A11y Project](https://www.a11yproject.com/)

skills/web-coder/references/architecture-patterns.md

@@ -0,0 +1,625 @@
+# Architecture & Patterns Reference
+
+Web application architectures, design patterns, and architectural concepts.
+
+## Application Architectures
+
+### Single Page Application (SPA)
+
+Web app that loads single HTML page and dynamically updates content.
+
+**Characteristics**:
+- Client-side routing
+- Heavy JavaScript usage
+- Fast navigation after initial load
+- Complex state management
+
+**Pros**:
+- Smooth user experience
+- Reduced server load
+- Mobile app-like feel
+
+**Cons**:
+- Larger initial download
+- SEO challenges (mitigated with SSR)
+- Complex state management
+
+**Examples**: React, Vue, Angular apps
+
+```javascript
+// React Router example
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/products/:id" element={<Product />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+### Multi-Page Application (MPA)
+
+Traditional web app with multiple HTML pages.
+
+**Characteristics**:
+- Server renders each page
+- Full page reload on navigation
+- Simpler architecture
+
+**Pros**:
+- Better SEO out of the box
+- Simpler to build
+- Good for content-heavy sites
+
+**Cons**:
+- Slower navigation
+- More server requests
+
+### Progressive Web App (PWA)
+
+Web app with native app capabilities.
+
+**Features**:
+- Installable
+- Offline support (Service Workers)
+- Push notifications
+- App-like experience
+
+```javascript
+// Service Worker registration
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+    .then(reg => console.log('SW registered', reg))
+    .catch(err => console.error('SW error', err));
+}
+```
+
+**manifest.json**:
+```json
+{
+  "name": "My PWA",
+  "short_name": "PWA",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
+```
+
+### Server-Side Rendering (SSR)
+
+Render pages on server, send HTML to client.
+
+**Pros**:
+- Better SEO
+- Faster first contentful paint
+- Works without JavaScript
+
+**Cons**:
+- Higher server load
+- More complex setup
+
+**Frameworks**: Next.js, Nuxt.js, SvelteKit
+
+```javascript
+// Next.js SSR
+export async function getServerSideProps() {
+  const data = await fetchData();
+  return { props: { data } };
+}
+
+function Page({ data }) {
+  return <div>{data.title}</div>;
+}
+```
+
+### Static Site Generation (SSG)
+
+Pre-render pages at build time.
+
+**Pros**:
+- Extremely fast
+- Low server cost
+- Great SEO
+
+**Best for**: Blogs, documentation, marketing sites
+
+**Tools**: Next.js, Gatsby, Hugo, Jekyll, Eleventy
+
+```javascript
+// Next.js SSG
+export async function getStaticProps() {
+  const data = await fetchData();
+  return { props: { data } };
+}
+
+export async function getStaticPaths() {
+  const paths = await fetchPaths();
+  return { paths, fallback: false };
+}
+```
+
+### Incremental Static Regeneration (ISR)
+
+Update static content after build.
+
+```javascript
+// Next.js ISR
+export async function getStaticProps() {
+  const data = await fetchData();
+  return {
+    props: { data },
+    revalidate: 60 // Revalidate every 60 seconds
+  };
+}
+```
+
+### JAMstack
+
+JavaScript, APIs, Markup architecture.
+
+**Principles**:
+- Pre-rendered static files
+- APIs for dynamic functionality
+- Git-based workflows
+- CDN deployment
+
+**Benefits**:
+- Fast performance
+- High security
+- Scalability
+- Developer experience
+
+## Rendering Patterns
+
+### Client-Side Rendering (CSR)
+
+JavaScript renders content in browser.
+
+```html
+<div id="root"></div>
+<script>
+  // React renders app here
+  ReactDOM.render(<App />, document.getElementById('root'));
+</script>
+```
+
+### Hydration
+
+Attach JavaScript to server-rendered HTML.
+
+```javascript
+// React hydration
+ReactDOM.hydrate(<App />, document.getElementById('root'));
+```
+
+### Partial Hydration
+
+Hydrate only interactive components.
+
+**Tools**: Astro, Qwik
+
+### Islands Architecture
+
+Independent interactive components in static HTML.
+
+**Concept**: Ship minimal JavaScript, hydrate only "islands" of interactivity
+
+**Frameworks**: Astro, Eleventy with Islands
+
+## Design Patterns
+
+### MVC (Model-View-Controller)
+
+Separate data, presentation, and logic.
+
+- **Model**: Data and business logic
+- **View**: UI presentation
+- **Controller**: Handle input, update model/view
+
+### MVVM (Model-View-ViewModel)
+
+Similar to MVC with data binding.
+
+- **Model**: Data
+- **View**: UI
+- **ViewModel**: View logic and state
+
+**Used in**: Vue.js, Angular, Knockout
+
+### Component-Based Architecture
+
+Build UI from reusable components.
+
+```javascript
+// React component
+function Button({ onClick, children }) {
+  return (
+    <button onClick={onClick} className="btn">
+      {children}
+    </button>
+  );
+}
+
+// Usage
+<Button onClick={handleClick}>Click me</Button>
+```
+
+### Micro Frontends
+
+Split frontend into smaller, independent apps.
+
+**Approaches**:
+- Build-time integration
+- Run-time integration (iframes, Web Components)
+- Edge-side includes
+
+## State Management
+
+### Local State
+
+Component-level state.
+
+```javascript
+// React useState
+function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+}
+```
+
+### Global State
+
+Application-wide state.
+
+**Solutions**:
+- **Redux**: Predictable state container
+- **MobX**: Observable state
+- **Zustand**: Minimal state management
+- **Recoil**: Atomic state management
+
+```javascript
+// Redux example
+import { createSlice, configureStore } from '@reduxjs/toolkit';
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState: { value: 0 },
+  reducers: {
+    increment: state => { state.value += 1; }
+  }
+});
+
+const store = configureStore({
+  reducer: { counter: counterSlice.reducer }
+});
+```
+
+### Context API
+
+Share state without prop drilling.
+
+```javascript
+// React Context
+const ThemeContext = React.createContext('light');
+
+function App() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Toolbar />
+    </ThemeContext.Provider>
+  );
+}
+
+function Toolbar() {
+  const theme = useContext(ThemeContext);
+  return <div className={theme}>...</div>;
+}
+```
+
+## API Architecture Patterns
+
+### REST (Representational State Transfer)
+
+Resource-based API design.
+
+```javascript
+// RESTful API
+GET    /api/users      // List users
+GET    /api/users/1    // Get user
+POST   /api/users      // Create user
+PUT    /api/users/1    // Update user
+DELETE /api/users/1    // Delete user
+```
+
+### GraphQL
+
+Query language for APIs.
+
+```graphql
+# Query
+query {
+  user(id: "1") {
+    name
+    email
+    posts {
+      title
+    }
+  }
+}
+
+# Mutation
+mutation {
+  createUser(name: "John", email: "john@example.com") {
+    id
+    name
+  }
+}
+```
+
+```javascript
+// Apollo Client
+import { useQuery, gql } from '@apollo/client';
+
+const GET_USER = gql`
+  query GetUser($id: ID!) {
+    user(id: $id) {
+      name
+      email
+    }
+  }
+`;
+
+function User({ id }) {
+  const { loading, error, data } = useQuery(GET_USER, {
+    variables: { id }
+  });
+  
+  if (loading) return <p>Loading...</p>;
+  return <p>{data.user.name}</p>;
+}
+```
+
+### tRPC
+
+End-to-end typesafe APIs.
+
+```typescript
+// Server
+const appRouter = router({
+  getUser: publicProcedure
+    .input(z.string())
+    .query(async ({ input }) => {
+      return await db.user.findUnique({ where: { id: input } });
+    })
+});
+
+// Client (fully typed!)
+const user = await trpc.getUser.query('1');
+```
+
+## Microservices Architecture
+
+Split application into small, independent services.
+
+**Characteristics**:
+- Independent deployment
+- Service-specific databases
+- API communication
+- Decentralized governance
+
+**Benefits**:
+- Scalability
+- Technology flexibility
+- Fault isolation
+
+**Challenges**:
+- Complexity
+- Network latency
+- Data consistency
+
+## Monolithic Architecture
+
+Single, unified application.
+
+**Pros**:
+- Simpler development
+- Easier debugging
+- Single deployment
+
+**Cons**:
+- Scaling challenges
+- Technology lock-in
+- Tight coupling
+
+## Serverless Architecture
+
+Run code without managing servers.
+
+**Platforms**: AWS Lambda, Vercel Functions, Netlify Functions, Cloudflare Workers
+
+```javascript
+// Vercel serverless function
+export default function handler(req, res) {
+  res.status(200).json({ message: 'Hello from serverless!' });
+}
+```
+
+**Benefits**:
+- Auto-scaling
+- Pay per use
+- No server management
+
+**Use Cases**:
+- APIs
+- Background jobs
+- Webhooks
+- Image processing
+
+## Architectural Best Practices
+
+### Separation of Concerns
+
+Keep different aspects separate:
+- Presentation layer
+- Business logic layer
+- Data access layer
+
+### DRY (Don't Repeat Yourself)
+
+Avoid code duplication.
+
+### SOLID Principles
+
+- **S**ingle Responsibility
+- **O**pen/Closed
+- **L**iskov Substitution
+- **I**nterface Segregation
+- **D**ependency Inversion
+
+### Composition over Inheritance
+
+Prefer composing objects over class hierarchies.
+
+```javascript
+// Composition
+function withLogging(Component) {
+  return function LoggedComponent(props) {
+    console.log('Rendering', Component.name);
+    return <Component {...props} />;
+  };
+}
+
+const LoggedButton = withLogging(Button);
+```
+
+## Module Systems
+
+### ES Modules (ESM)
+
+Modern JavaScript modules.
+
+```javascript
+// export
+export const name = 'John';
+export function greet() {}
+export default App;
+
+// import
+import App from './App.js';
+import { name, greet } from './utils.js';
+import * as utils from './utils.js';
+```
+
+### CommonJS
+
+Node.js module system.
+
+```javascript
+// export
+module.exports = { name: 'John' };
+exports.greet = function() {};
+
+// import
+const { name } = require('./utils');
+```
+
+## Build Optimization
+
+### Code Splitting
+
+Split code into smaller chunks.
+
+```javascript
+// React lazy loading
+const OtherComponent = React.lazy(() => import('./OtherComponent'));
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <OtherComponent />
+    </Suspense>
+  );
+}
+```
+
+### Tree Shaking
+
+Remove unused code.
+
+```javascript
+// Only imports 'map', not entire lodash
+import { map } from 'lodash-es';
+```
+
+### Bundle Splitting
+
+- **Vendor bundle**: Third-party dependencies
+- **App bundle**: Application code
+- **Route bundles**: Per-route code
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Abstraction
+- API
+- Application
+- Architecture
+- Asynchronous
+- Binding
+- Block (CSS, JS)
+- Call stack
+- Class
+- Client-side
+- Control flow
+- Delta
+- Design pattern
+- Event
+- Fetch
+- First-class Function
+- Function
+- Garbage collection
+- Grid
+- Hoisting
+- Hydration
+- Idempotent
+- Instance
+- Lazy load
+- Main thread
+- MVC
+
+- Polyfill
+- Progressive Enhancement
+- Progressive web apps
+- Property
+- Prototype
+- Prototype-based programming
+- REST
+- Reflow
+- Round Trip Time (RTT)
+- SPA
+- Semantics
+- Server
+- Synthetic monitoring
+- Thread
+- Type
+
+## Additional Resources
+
+- [Patterns.dev](https://www.patterns.dev/)
+- [React Patterns](https://reactpatterns.com/)
+- [JAMstack](https://jamstack.org/)
+- [Micro Frontends](https://micro-frontends.org/)

skills/web-coder/references/browsers-engines.md

@@ -0,0 +1,358 @@
+# Browsers & Engines Reference
+
+Web browsers, rendering engines, and browser-specific information.
+
+## Major Browsers
+
+### Google Chrome
+
+**Engine**: Blink (rendering), V8 (JavaScript)  
+**Released**: 2008  
+**Market Share**: ~65% (desktop)  
+
+**Developer Tools**: 
+- Elements panel
+- Console
+- Network tab
+- Performance profiler
+- Lighthouse audits
+
+### Mozilla Firefox
+
+**Engine**: Gecko (rendering), SpiderMonkey (JavaScript)  
+**Released**: 2004  
+**Market Share**: ~3% (desktop)  
+
+**Features**:
+- Strong privacy focus
+- Container tabs
+- Enhanced tracking protection
+- Developer Edition
+
+### Apple Safari
+
+**Engine**: WebKit (rendering), JavaScriptCore (JavaScript)  
+**Released**: 2003  
+**Market Share**: ~20% (desktop), dominant on iOS  
+
+**Features**:
+- Energy efficient
+- Privacy-focused
+- Intelligent Tracking Prevention
+- Only browser allowed on iOS
+
+### Microsoft Edge
+
+**Engine**: Blink (Chromium-based since 2020)  
+**Released**: 2015 (EdgeHTML), 2020 (Chromium)  
+
+**Features**:
+- Windows integration
+- Collections
+- Vertical tabs
+- IE Mode (compatibility)
+
+### Opera
+
+**Engine**: Blink  
+**Based on**: Chromium  
+
+**Features**:
+- Built-in VPN
+- Ad blocker
+- Sidebar
+
+## Rendering Engines
+
+### Blink
+
+**Used by**: Chrome, Edge, Opera, Vivaldi  
+**Forked from**: WebKit (2013)  
+**Language**: C++  
+
+### WebKit
+
+**Used by**: Safari  
+**Origin**: KHTML (KDE)  
+**Language**: C++  
+
+### Gecko
+
+**Used by**: Firefox  
+**Developed by**: Mozilla  
+**Language**: C++, Rust  
+
+### Legacy Engines
+
+- **Trident**: Internet Explorer (deprecated)
+- **EdgeHTML**: Original Edge (deprecated)
+- **Presto**: Old Opera (deprecated)
+
+## JavaScript Engines
+
+| Engine | Browser | Language |
+|--------|---------|----------|
+| V8 | Chrome, Edge | C++ |
+| SpiderMonkey | Firefox | C++, Rust |
+| JavaScriptCore | Safari | C++ |
+| Chakra | IE/Edge (legacy) | C++ |
+
+### V8 Features
+
+- JIT compilation
+- Inline caching
+- Hidden classes
+- Garbage collection
+- WASM support
+
+## Browser DevTools
+
+### Chrome DevTools
+
+```javascript
+// Console API
+console.log('message');
+console.table(array);
+console.time('label');
+console.timeEnd('label');
+
+// Command Line API
+$() // document.querySelector()
+$$() // document.querySelectorAll()
+$x() // XPath query
+copy(object) // Copy to clipboard
+monitor(function) // Log function calls
+```
+
+**Panels**:
+- Elements: DOM inspection
+- Console: JavaScript console
+- Sources: Debugger
+- Network: HTTP requests
+- Performance: Profiling
+- Memory: Heap snapshots
+- Application: Storage, service workers
+- Security: Certificate  info
+- Lighthouse: Audits
+
+### Firefox DevTools
+
+**Unique Features**:
+- CSS Grid Inspector
+- Font Editor
+- Accessibility Inspector
+- Network throttling
+
+## Cross-Browser Compatibility
+
+### Browser Prefixes (Vendor Prefixes)
+
+```css
+/* Legacy - use autoprefixer instead */
+.element {
+  -webkit-transform: rotate(45deg); /* Chrome, Safari */
+  -moz-transform: rotate(45deg); /* Firefox */
+  -ms-transform: rotate(45deg); /* IE */
+  -o-transform: rotate(45deg); /* Opera */
+  transform: rotate(45deg); /* Standard */
+}
+```
+
+**Modern approach**: Use build tools (Autoprefixer)
+
+### User Agent String
+
+```javascript
+// Check browser
+const userAgent = navigator.userAgent;
+
+if (userAgent.includes('Firefox')) {
+  // Firefox-specific code
+} else if (userAgent.includes('Chrome')) {
+  // Chrome-specific code
+}
+
+// Better: Feature detection
+if ('serviceWorker' in navigator) {
+  // Modern browser
+}
+```
+
+### Graceful Degradation vs Progressive Enhancement
+
+**Graceful Degradation**: Build for modern, degrade for old
+
+```css
+.container {
+  display: grid; /* Modern browsers */
+  display: block; /* Fallback */
+}
+```
+
+**Progressive Enhancement**: Build base, enhance for modern
+
+```css
+.container {
+  display: block; /* Base */
+}
+
+@supports (display: grid) {
+  .container {
+    display: grid; /* Enhancement */
+  }
+}
+```
+
+## Browser Features
+
+### Service Workers
+
+Background scripts for offline functionality
+
+**Supported**: All modern browsers
+
+### WebAssembly
+
+Binary instruction format for web
+
+**Supported**: All modern browsers
+
+### Web Components
+
+Custom HTML elements
+
+**Supported**: All modern browsers (with polyfills)
+
+### WebRTC
+
+Real-time communication
+
+**Supported**: All modern browsers
+
+## Browser Storage
+
+| Storage | Size | Expiration | Scope |
+|---------|------|------------|-------|
+| Cookies | 4KB | Configurable | Domain |
+| LocalStorage | 5-10MB | Never | Origin |
+| SessionStorage | 5-10MB | Tab close | Origin |
+| IndexedDB | 50MB+ | Never | Origin |
+
+## Mobile Browsers
+
+### iOS Safari
+
+- Only browser allowed on iOS
+- All iOS browsers use WebKit
+- Different from desktop Safari
+
+### Chrome Mobile (Android)
+
+- Blink engine
+- Similar to desktop Chrome
+
+### Samsung Internet
+
+- Based on Chromium
+- Popular on Samsung devices
+
+## Browser Market Share (2026)
+
+**Desktop**:
+- Chrome: ~65%
+- Safari: ~20%
+- Edge: ~5%
+- Firefox: ~3%
+- Other: ~7%
+
+**Mobile**:
+- Chrome: ~65%
+- Safari: ~25%
+- Samsung Internet: ~5%
+- Other: ~5%
+
+## Testing Browsers
+
+### Tools
+
+- **BrowserStack**: Cloud browser testing
+- **Sauce Labs**: Automated testing
+- **CrossBrowserTesting**: Live testing
+- **LambdaTest**: Cross-browser testing
+
+### Virtual Machines
+
+- **VirtualBox**: Free virtualization
+- **Parallels**: Mac virtualization
+- **Windows Dev VMs**: Free Windows VMs
+
+## Developer Features
+
+### Chromium-based Developer Features
+
+- **Remote Debugging**: Debug mobile devices
+- **Workspaces**: Edit files directly
+- **Snippets**: Reusable code snippets
+- **Coverage**: Unused code detection
+
+### Firefox Developer Edition
+
+- **CSS Grid Inspector**
+- **Flexbox Inspector**
+- **Font Panel**
+- **Accessibility Audits**
+
+## Browser Extensions
+
+### Manifest V3 (Modern)
+
+```json
+{
+  "manifest_version": 3,
+  "name": "My Extension",
+  "version": "1.0",
+  "permissions": ["storage", "activeTab"],
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "content_scripts": [{
+    "matches": ["<all_urls>"],
+    "js": ["content.js"]
+  }]
+}
+```
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Apple Safari
+- Blink
+- blink element
+- Browser
+- Browsing context
+- Chrome
+- Developer tools
+- Engine
+- Firefox OS
+- Gecko
+- Google Chrome
+- JavaScript engine
+- Microsoft Edge
+- Microsoft Internet Explorer
+- Mozilla Firefox
+- Netscape Navigator
+- Opera browser
+- Presto
+- Rendering engine
+- Trident
+- User agent
+- Vendor prefix
+- WebKit
+
+## Additional Resources
+
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/)
+- [Safari Web Inspector](https://developer.apple.com/safari/tools/)
+- [Can I Use](https://caniuse.com/)
+- [Browser Market Share](https://gs.statcounter.com/)

skills/web-coder/references/css-styling.md

@@ -0,0 +1,696 @@
+# CSS & Styling Reference
+
+Comprehensive reference for Cascading Style Sheets, layout systems, and modern styling techniques.
+
+## Core Concepts
+
+### CSS (Cascading Style Sheets)
+
+Style sheet language used for describing the presentation of HTML documents.
+
+**Three Ways to Apply CSS**:
+
+1. **Inline**: `<div style="color: blue;">`
+2. **Internal**: `<style>` tag in HTML
+3. **External**: Separate `.css` file (recommended)
+
+### The Cascade
+
+The algorithm that determines which CSS rules apply when multiple rules target the same element.
+
+**Priority Order** (highest to lowest):
+
+1. Inline styles
+2. ID selectors (`#id`)
+3. Class selectors (`.class`), attribute selectors, pseudo-classes
+4. Element selectors (`div`, `p`)
+5. Inherited properties
+
+**Important**: `!important` declaration overrides normal specificity (use sparingly)
+
+### CSS Selectors
+
+| Selector | Example | Description |
+|----------|---------|-------------|
+| Element | `p` | Selects all `<p>` elements |
+| Class | `.button` | Selects elements with `class="button"` |
+| ID | `#header` | Selects element with `id="header"` |
+| Universal | `*` | Selects all elements |
+| Descendant | `div p` | `<p>` inside `<div>` (any level) |
+| Child | `div > p` | Direct child `<p>` of `<div>` |
+| Adjacent Sibling | `h1 + p` | `<p>` immediately after `<h1>` |
+| General Sibling | `h1 ~ p` | All `<p>` siblings after `<h1>` |
+| Attribute | `[type="text"]` | Elements with specific attribute |
+| Attribute Contains | `[href*="example"]` | Contains substring |
+| Attribute Starts | `[href^="https"]` | Starts with string |
+| Attribute Ends | `[href$=".pdf"]` | Ends with string |
+
+### Pseudo-Classes
+
+Target elements based on state or position:
+
+```css
+/* Link states */
+a:link { color: blue; }
+a:visited { color: purple; }
+a:hover { color: red; }
+a:active { color: orange; }
+a:focus { outline: 2px solid blue; }
+
+/* Structural */
+li:first-child { font-weight: bold; }
+li:last-child { border-bottom: none; }
+li:nth-child(odd) { background: #f0f0f0; }
+li:nth-child(3n) { color: red; }
+p:not(.special) { color: gray; }
+
+/* Form states */
+input:required { border-color: red; }
+input:valid { border-color: green; }
+input:invalid { border-color: red; }
+input:disabled { opacity: 0.5; }
+input:checked + label { font-weight: bold; }
+```
+
+### Pseudo-Elements
+
+Style specific parts of elements:
+
+```css
+/* First line/letter */
+p::first-line { font-weight: bold; }
+p::first-letter { font-size: 2em; }
+
+/* Generated content */
+.quote::before { content: '"'; }
+.quote::after { content: '"'; }
+
+/* Selection */
+::selection { background: yellow; color: black; }
+
+/* Placeholder */
+input::placeholder { color: #999; }
+```
+
+## Box Model
+
+Every element is a rectangular box with:
+
+1. **Content**: The actual content (text, images)
+2. **Padding**: Space around content, inside border
+3. **Border**: Line around padding
+4. **Margin**: Space outside border
+
+```css
+.box {
+  /* Content size */
+  width: 300px;
+  height: 200px;
+  
+  /* Padding */
+  padding: 20px; /* All sides */
+  padding: 10px 20px; /* Vertical | Horizontal */
+  padding: 10px 20px 15px 25px; /* Top | Right | Bottom | Left */
+  
+  /* Border */
+  border: 2px solid #333;
+  border-radius: 8px;
+  
+  /* Margin */
+  margin: 20px auto; /* Vertical | Horizontal (auto centers) */
+  
+  /* Box-sizing changes how width/height work */
+  box-sizing: border-box; /* Include padding/border in width/height */
+}
+```
+
+## Layout Systems
+
+### Flexbox
+
+One-dimensional layout system (row or column):
+
+```css
+.container {
+  display: flex;
+  
+  /* Direction */
+  flex-direction: row; /* row | row-reverse | column | column-reverse */
+  
+  /* Wrapping */
+  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
+  
+  /* Main axis alignment */
+  justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
+  
+  /* Cross axis alignment */
+  align-items: center; /* flex-start | flex-end | center | stretch | baseline */
+  
+  /* Multi-line cross axis */
+  align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */
+  
+  /* Gap between items */
+  gap: 1rem;
+}
+
+.item {
+  /* Grow factor */
+  flex-grow: 1; /* Takes available space */
+  
+  /* Shrink factor */
+  flex-shrink: 1; /* Can shrink if needed */
+  
+  /* Base size */
+  flex-basis: 200px; /* Initial size before growing/shrinking */
+  
+  /* Shorthand */
+  flex: 1 1 200px; /* grow | shrink | basis */
+  
+  /* Individual alignment */
+  align-self: flex-end; /* Overrides container's align-items */
+  
+  /* Order */
+  order: 2; /* Change visual order (default: 0) */
+}
+```
+
+### CSS Grid
+
+Two-dimensional layout system (rows and columns):
+
+```css
+.container {
+  display: grid;
+  
+  /* Define columns */
+  grid-template-columns: 200px 1fr 1fr; /* Fixed | Flexible | Flexible */
+  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
+  
+  /* Define rows */
+  grid-template-rows: 100px auto 50px; /* Fixed | Auto | Fixed */
+  
+  /* Named areas */
+  grid-template-areas:
+    "header header header"
+    "sidebar main main"
+    "footer footer footer";
+  
+  /* Gap between cells */
+  gap: 1rem; /* Row and column gap */
+  row-gap: 1rem;
+  column-gap: 2rem;
+  
+  /* Alignment */
+  justify-items: start; /* Align items horizontally within cells */
+  align-items: start; /* Align items vertically within cells */
+  justify-content: center; /* Align grid within container horizontally */
+  align-content: center; /* Align grid within container vertically */
+}
+
+.item {
+  /* Span columns */
+  grid-column: 1 / 3; /* Start / End */
+  grid-column: span 2; /* Span 2 columns */
+  
+  /* Span rows */
+  grid-row: 1 / 3;
+  grid-row: span 2;
+  
+  /* Named area */
+  grid-area: header;
+  
+  /* Individual alignment */
+  justify-self: center; /* Horizontal alignment */
+  align-self: center; /* Vertical alignment */
+}
+```
+
+### Grid vs Flexbox
+
+| Use Case | Best Choice |
+|----------|-------------|
+| One-dimensional layout (row or column) | Flexbox |
+| Two-dimensional layout (rows and columns) | Grid |
+| Align items along one axis | Flexbox |
+| Create complex page layouts | Grid |
+| Distribute space between items | Flexbox |
+| Precise control over rows and columns | Grid |
+| Content-first responsive design | Flexbox |
+| Layout-first responsive design | Grid |
+
+## Positioning
+
+### Position Types
+
+```css
+/* Static (default) - normal flow */
+.static { position: static; }
+
+/* Relative - offset from normal position */
+.relative {
+  position: relative;
+  top: 10px; /* Move down 10px */
+  left: 20px; /* Move right 20px */
+}
+
+/* Absolute - removed from flow, positioned relative to nearest positioned ancestor */
+.absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* Fixed - removed from flow, positioned relative to viewport */
+.fixed {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
+
+/* Sticky - switches between relative and fixed based on scroll */
+.sticky {
+  position: sticky;
+  top: 0; /* Sticks to top when scrolling */
+}
+```
+
+### Inset Properties
+
+Shorthand for positioning:
+
+```css
+.element {
+  position: absolute;
+  inset: 0; /* All sides: top, right, bottom, left = 0 */
+  inset: 10px 20px; /* Vertical | Horizontal */
+  inset: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
+}
+```
+
+### Stacking Context
+
+Control layering with `z-index`:
+
+```css
+.behind { z-index: 1; }
+.ahead { z-index: 10; }
+.top { z-index: 100; }
+```
+
+**Note**: `z-index` only works on positioned elements (not `static`)
+
+## Responsive Design
+
+### Media Queries
+
+Apply styles based on device characteristics:
+
+```css
+/* Mobile-first approach */
+.container {
+  padding: 1rem;
+}
+
+/* Tablet and up */
+@media (min-width: 768px) {
+  .container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .container {
+    padding: 3rem;
+  }
+}
+
+/* Landscape orientation */
+@media (orientation: landscape) {
+  .header { height: 60px; }
+}
+
+/* High-DPI screens */
+@media (min-resolution: 192dpi) {
+  .logo { background-image: url('logo@2x.png'); }
+}
+
+/* Dark mode preference */
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #222;
+    color: #fff;
+  }
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+### Responsive Units
+
+| Unit | Description | Example |
+|------|-------------|---------|
+| `px` | Pixels (absolute) | `16px` |
+| `em` | Relative to parent font-size | `1.5em` |
+| `rem` | Relative to root font-size | `1.5rem` |
+| `%` | Relative to parent | `50%` |
+| `vw` | Viewport width (1vw = 1% of viewport width) | `50vw` |
+| `vh` | Viewport height | `100vh` |
+| `vmin` | Smaller of vw or vh | `10vmin` |
+| `vmax` | Larger of vw or vh | `10vmax` |
+| `ch` | Width of "0" character | `40ch` |
+| `fr` | Fraction of available space (Grid only) | `1fr` |
+
+### Responsive Images
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Art direction with picture element */
+```
+
+```html
+<picture>
+  <source media="(min-width: 1024px)" srcset="large.jpg">
+  <source media="(min-width: 768px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="Responsive image">
+</picture>
+```
+
+## Typography
+
+```css
+.text {
+  /* Font family */
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  
+  /* Font size */
+  font-size: 16px; /* Base size */
+  font-size: 1rem; /* Relative to root */
+  font-size: clamp(14px, 2vw, 20px); /* Responsive with min/max */
+  
+  /* Font weight */
+  font-weight: normal; /* 400 */
+  font-weight: bold; /* 700 */
+  font-weight: 300; /* Light */
+  
+  /* Font style */
+  font-style: italic;
+  
+  /* Line height */
+  line-height: 1.5; /* 1.5 times font-size */
+  line-height: 24px;
+  
+  /* Letter spacing */
+  letter-spacing: 0.05em;
+  
+  /* Text alignment */
+  text-align: left; /* left | right | center | justify */
+  
+  /* Text decoration */
+  text-decoration: underline;
+  text-decoration: none; /* Remove underline from links */
+  
+  /* Text transform */
+  text-transform: uppercase; /* uppercase | lowercase | capitalize */
+  
+  /* Word spacing */
+  word-spacing: 0.1em;
+  
+  /* White space handling */
+  white-space: nowrap; /* Don't wrap */
+  white-space: pre-wrap; /* Preserve whitespace, wrap lines */
+  
+  /* Text overflow */
+  overflow: hidden;
+  text-overflow: ellipsis; /* Show ... when text overflows */
+  
+  /* Word break */
+  word-wrap: break-word; /* Break long words */
+  overflow-wrap: break-word; /* Modern version */
+}
+```
+
+## Colors
+
+```css
+.colors {
+  /* Named colors */
+  color: red;
+  
+  /* Hex */
+  color: #ff0000; /* Red */
+  color: #f00; /* Shorthand */
+  color: #ff0000ff; /* With alpha */
+  
+  /* RGB */
+  color: rgb(255, 0, 0);
+  color: rgba(255, 0, 0, 0.5); /* With alpha */
+  color: rgb(255 0 0 / 0.5); /* Modern syntax */
+  
+  /* HSL (Hue, Saturation, Lightness) */
+  color: hsl(0, 100%, 50%); /* Red */
+  color: hsla(0, 100%, 50%, 0.5); /* With alpha */
+  color: hsl(0 100% 50% / 0.5); /* Modern syntax */
+  
+  /* Color keywords */
+  color: currentColor; /* Inherit color */
+  color: transparent;
+}
+```
+
+### CSS Color Space
+
+Modern color spaces for wider gamut:
+
+```css
+.modern-colors {
+  /* Display P3 (Apple devices) */
+  color: color(display-p3 1 0 0);
+  
+  /* Lab color space */
+  color: lab(50% 125 0);
+  
+  /* LCH color space */
+  color: lch(50% 125 0deg);
+}
+```
+
+## Animations and Transitions
+
+### Transitions
+
+Smooth changes between states:
+
+```css
+.button {
+  background: blue;
+  color: white;
+  transition: all 0.3s ease;
+  /* transition: property duration timing-function delay */
+}
+
+.button:hover {
+  background: darkblue;
+  transform: scale(1.05);
+}
+
+/* Individual properties */
+.element {
+  transition-property: opacity, transform;
+  transition-duration: 0.3s, 0.5s;
+  transition-timing-function: ease, ease-in-out;
+  transition-delay: 0s, 0.1s;
+}
+```
+
+### Keyframe Animations
+
+```css
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.element {
+  animation: fadeIn 0.5s ease forwards;
+  /* animation: name duration timing-function delay iteration-count direction fill-mode */
+}
+
+/* Multiple keyframes */
+@keyframes slide {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(100px); }
+  100% { transform: translateX(0); }
+}
+
+.slider {
+  animation: slide 2s infinite alternate;
+}
+```
+
+## Transforms
+
+```css
+.transform {
+  /* Translate (move) */
+  transform: translate(50px, 100px); /* X, Y */
+  transform: translateX(50px);
+  transform: translateY(100px);
+  
+  /* Rotate */
+  transform: rotate(45deg);
+  
+  /* Scale */
+  transform: scale(1.5); /* 150% size */
+  transform: scale(2, 0.5); /* X, Y different */
+  
+  /* Skew */
+  transform: skew(10deg, 5deg);
+  
+  /* Multiple transforms */
+  transform: translate(50px, 0) rotate(45deg) scale(1.2);
+  
+  /* 3D transforms */
+  transform: rotateX(45deg) rotateY(30deg);
+  transform: perspective(500px) translateZ(100px);
+}
+```
+
+## CSS Variables (Custom Properties)
+
+```css
+:root {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --spacing: 1rem;
+  --border-radius: 4px;
+}
+
+.element {
+  color: var(--primary-color);
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  
+  /* With fallback */
+  color: var(--accent-color, red);
+}
+
+/* Dynamic changes */
+.dark-theme {
+  --primary-color: #0056b3;
+  --background: #222;
+  --text: #fff;
+}
+```
+
+## CSS Preprocessors
+
+### Common Features
+
+- Variables
+- Nesting
+- Mixins (reusable styles)
+- Functions
+- Imports
+
+**Popular Preprocessors**: Sass/SCSS, Less, Stylus
+
+## Best Practices
+
+### Do's
+
+- ✅ Use external stylesheets
+- ✅ Use class selectors over ID selectors
+- ✅ Keep specificity low
+- ✅ Use responsive units (rem, em, %)
+- ✅ Mobile-first approach
+- ✅ Use CSS variables for theming
+- ✅ Organize CSS logically
+- ✅ Use shorthand properties
+- ✅ Minify CSS for production
+
+### Don'ts
+
+- ❌ Use `!important` excessively
+- ❌ Use inline styles
+- ❌ Use fixed pixel widths
+- ❌ Over-nest selectors
+- ❌ Use vendor prefixes manually (use autoprefixer)
+- ❌ Forget to test cross-browser
+- ❌ Use IDs for styling
+- ❌ Ignore CSS specificity
+
+## Glossary Terms
+
+**Key Terms Covered**:
+
+- Alignment container
+- Alignment subject
+- Aspect ratio
+- Baseline
+- Block (CSS)
+- Bounding box
+- Cross Axis
+- CSS
+- CSS Object Model (CSSOM)
+- CSS pixel
+- CSS preprocessor
+- Descriptor (CSS)
+- Fallback alignment
+- Flex
+- Flex container
+- Flex item
+- Flexbox
+- Flow relative values
+- Grid
+- Grid areas
+- Grid Axis
+- Grid Cell
+- Grid Column
+- Grid container
+- Grid lines
+- Grid Row
+- Grid Tracks
+- Gutters
+- Ink overflow
+- Inset properties
+- Layout mode
+- Logical properties
+- Main axis
+- Media query
+- Physical properties
+- Pixel
+- Property (CSS)
+- Pseudo-class
+- Pseudo-element
+- Selector (CSS)
+- Stacking context
+- Style origin
+- Stylesheet
+- Vendor prefix
+
+## Additional Resources
+
+- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [CSS Tricks Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- [Can I Use](https://caniuse.com/) - Browser compatibility tables

skills/web-coder/references/data-formats-encoding.md

@@ -0,0 +1,411 @@
+# Data Formats & Encoding Reference
+
+Data formats, character encodings, and serialization for web development.
+
+## JSON (JavaScript Object Notation)
+
+Lightweight data interchange format.
+
+### Syntax
+
+```json
+{
+  "string": "value",
+  "number": 42,
+  "boolean": true,
+  "null": null,
+  "array": [1, 2, 3],
+  "object": {
+    "nested": "value"
+  }
+}
+```
+
+**Permitted Types**: string, number, boolean, null, array, object  
+**Not Permitted**: undefined, functions, dates, RegExp
+
+### JavaScript Methods
+
+```javascript
+// Parse JSON string
+const data = JSON.parse('{"name":"John","age":30}');
+
+// Stringify object
+const json = JSON.stringify({ name: 'John', age: 30 });
+
+// Pretty print (indentation)
+const json = JSON.stringify(data, null, 2);
+
+// Custom serialization
+const json = JSON.stringify(obj, (key, value) => {
+  if (key === 'password') return undefined; // Exclude
+  return value;
+});
+
+// toJSON method
+const obj = {
+  name: 'John',
+  date: new Date(),
+  toJSON() {
+    return {
+      name: this.name,
+      date: this.date.toISOString()
+    };
+  }
+};
+```
+
+### JSON Type Representation
+
+How JavaScript types map to JSON:
+- String → string
+- Number → number
+- Boolean → boolean
+- null → null
+- Array → array
+- Object → object
+- undefined → omitted
+- Function → omitted
+- Symbol → omitted
+- Date → ISO 8601 string
+
+## XML (Extensible Markup Language)
+
+Markup language for encoding documents.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<users>
+  <user id="1">
+    <name>John Doe</name>
+    <email>john@example.com</email>
+  </user>
+  <user id="2">
+    <name>Jane Smith</name>
+    <email>jane@example.com</email>
+  </user>
+</users>
+```
+
+**Use Cases**:
+- Configuration files
+- Data exchange
+- RSS/Atom feeds
+- SOAP web services
+
+### Parsing XML in JavaScript
+
+```javascript
+// Parse XML string
+const parser = new DOMParser();
+const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+
+// Query elements
+const users = xmlDoc.querySelectorAll('user');
+users.forEach(user => {
+  const name = user.querySelector('name').textContent;
+  console.log(name);
+});
+
+// Create XML
+const serializer = new XMLSerializer();
+const xmlString = serializer.serializeToString(xmlDoc);
+```
+
+## Character Encoding
+
+### UTF-8
+
+Universal character encoding (recommended for web).
+
+**Characteristics**:
+- Variable-width (1-4 bytes per character)
+- Backward compatible with ASCII
+- Supports all Unicode characters
+
+```html
+<meta charset="UTF-8">
+```
+
+### UTF-16
+
+2 or 4 bytes per character.
+
+**Use**: JavaScript internally uses UTF-16
+
+```javascript
+'A'.charCodeAt(0); // 65
+String.fromCharCode(65); // 'A'
+
+// Emoji (requires surrogate pair in UTF-16)
+'😀'.length; // 2 (in JavaScript)
+```
+
+### ASCII
+
+7-bit encoding (128 characters).
+
+**Range**: 0-127  
+**Includes**: English letters, digits, common symbols
+
+### Code Point vs Code Unit
+
+- **Code Point**: Unicode character (U+0041 = 'A')
+- **Code Unit**: 16-bit value in UTF-16
+
+```javascript
+// Code points
+'A'.codePointAt(0); // 65
+String.fromCodePoint(0x1F600); // '😀'
+
+// Iterate code points
+for (const char of 'Hello 😀') {
+  console.log(char);
+}
+```
+
+## Base64
+
+Binary-to-text encoding scheme.
+
+```javascript
+// Encode
+const encoded = btoa('Hello World'); // "SGVsbG8gV29ybGQ="
+
+// Decode
+const decoded = atob('SGVsbG8gV29ybGQ='); // "Hello World"
+
+// Handle Unicode (requires extra step)
+const encoded = btoa(unescape(encodeURIComponent('Hello 世界')));
+const decoded = decodeURIComponent(escape(atob(encoded)));
+
+// Modern approach
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+const bytes = encoder.encode('Hello 世界');
+const decoded = decoder.decode(bytes);
+```
+
+**Use Cases**:
+- Embed binary data in JSON/XML
+- Data URLs (`data:image/png;base64,...`)
+- Basic authentication headers
+
+## URL Encoding (Percent Encoding)
+
+Encode special characters in URLs.
+
+```javascript
+// encodeURIComponent (encode everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( ))
+const encoded = encodeURIComponent('Hello World!'); // "Hello%20World%21"
+const decoded = decodeURIComponent(encoded); // "Hello World!"
+
+// encodeURI (encode less - for full URLs)
+const url = encodeURI('http://example.com/search?q=hello world');
+
+// Modern URL API
+const url = new URL('http://example.com/search');
+url.searchParams.set('q', 'hello world');
+console.log(url.toString()); // Automatically encoded
+```
+
+## MIME Types
+
+Media type identification.
+
+### Common MIME Types
+
+| Type | MIME Type |
+|------|-----------|
+| HTML | `text/html` |
+| CSS | `text/css` |
+| JavaScript | `text/javascript`, `application/javascript` |
+| JSON | `application/json` |
+| XML | `application/xml`, `text/xml` |
+| Plain Text | `text/plain` |
+| JPEG | `image/jpeg` |
+| PNG | `image/png` |
+| GIF | `image/gif` |
+| SVG | `image/svg+xml` |
+| PDF | `application/pdf` |
+| ZIP | `application/zip` |
+| MP4 Video | `video/mp4` |
+| MP3 Audio | `audio/mpeg` |
+| Form Data | `application/x-www-form-urlencoded` |
+| Multipart | `multipart/form-data` |
+
+```html
+<link rel="stylesheet" href="styles.css" type="text/css">
+<script src="app.js" type="text/javascript"></script>
+```
+
+```http
+Content-Type: application/json; charset=utf-8
+Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
+```
+
+## Serialization & Deserialization
+
+Converting data structures to/from storable format.
+
+### JSON Serialization
+
+```javascript
+// Serialize
+const obj = { name: 'John', date: new Date() };
+const json = JSON.stringify(obj);
+
+// Deserialize
+const parsed = JSON.parse(json);
+```
+
+### Serializable Objects
+
+Objects that can be serialized by structured clone algorithm:
+- Basic types
+- Arrays, Objects,
+- Date, RegExp
+- Map, Set
+- ArrayBuffer, TypedArrays
+
+**Not Serializable**:
+- Functions
+- DOM nodes
+- Symbols (as values)
+- Objects with prototype methods
+
+## Character References
+
+HTML entities for special characters.
+
+```html
+&lt;    <!-- < -->
+&gt;    <!-- > -->
+&amp;   <!-- & -->
+&quot;  <!-- " -->
+&apos;  <!-- ' -->
+&nbsp;  <!-- non-breaking space -->
+&copy;  <!-- © -->
+&#8364; <!-- € -->
+&#x20AC; <!-- € (hex) -->
+```
+
+## Data URLs
+
+Embed data directly in URLs.
+
+```html
+<!-- Inline image -->
+<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Icon">
+
+<!-- Inline SVG -->
+<img src="data:image/svg+xml,%3Csvg xmlns='...'%3E...%3C/svg%3E" alt="Logo">
+
+<!-- Inline CSS -->
+<link rel="stylesheet" href="data:text/css,body%7Bmargin:0%7D">
+```
+
+```javascript
+// Create data URL from canvas
+const canvas = document.querySelector('canvas');
+const dataURL = canvas.toDataURL('image/png');
+
+// Create data URL from blob
+const blob = new Blob(['Hello'], { type: 'text/plain' });
+const reader = new FileReader();
+reader.onload = () => {
+  const dataURL = reader.result;
+};
+reader.readAsDataURL(blob);
+```
+
+## Escape Sequences
+
+```javascript
+// String escapes
+'It\'s a string'; // Single quote
+"He said \"Hello\""; // Double quote
+'Line 1\nLine 2'; // Newline
+'Column1\tColumn2'; // Tab
+'Path\\to\\file'; // Backslash
+```
+
+## Data Structures
+
+### Arrays
+
+Ordered collections:
+```javascript
+const arr = [1, 2, 3];
+arr.push(4); // Add to end
+arr.pop(); // Remove from end
+```
+
+### Objects
+
+Key-value pairs:
+```javascript
+const obj = { key: 'value' };
+obj.newKey = 'new value';
+delete obj.key;
+```
+
+### Map
+
+Keyed collections (any type as key):
+```javascript
+const map = new Map();
+map.set('key', 'value');
+map.set(obj, 'value');
+map.get('key');
+map.has('key');
+map.delete('key');
+```
+
+### Set
+
+Unique values:
+```javascript
+const set = new Set([1, 2, 2, 3]); // {1, 2, 3}
+set.add(4);
+set.has(2); // true
+set.delete(1);
+```
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- ASCII
+- Base64
+- Character
+- Character encoding
+- Character reference
+- Character set
+- Code point
+- Code unit
+- Data structure
+- Deserialization
+- Enumerated
+- Escape character
+- JSON
+- JSON type representation
+- MIME
+- MIME type
+- Percent-encoding
+- Serialization
+- Serializable object
+- Unicode
+- URI
+- URL
+- URN
+- UTF-8
+- UTF-16
+
+## Additional Resources
+
+- [JSON Specification](https://www.json.org/)
+- [Unicode Standard](https://unicode.org/standard/standard.html)
+- [MDN Character Encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)
+- [MIME Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)

skills/web-coder/references/development-tools.md

@@ -0,0 +1,502 @@
+# Development Tools Reference
+
+Tools and workflows for web development.
+
+## Version Control
+
+### Git
+
+Distributed version control system.
+
+**Basic Commands**:
+```bash
+# Initialize repository
+git init
+
+# Clone repository
+git clone https://github.com/user/repo.git
+
+# Check status
+git status
+
+# Stage changes
+git add file.js
+git add . # All files
+
+# Commit
+git commit -m "commit message"
+
+# Push to remote
+git push origin main
+
+# Pull from remote
+git pull origin main
+
+# Branches
+git branch feature-name
+git checkout feature-name
+git checkout -b feature-name # Create and switch
+
+# Merge
+git checkout main
+git merge feature-name
+
+# View history
+git log
+git log --oneline --graph
+```
+
+**Best Practices**:
+- Commit often with meaningful messages
+- Use branches for features
+- Pull before push
+- Review changes before committing
+- Use .gitignore for generated files
+
+### GitHub/GitLab/Bitbucket
+
+Git hosting platforms with collaboration features:
+- Pull requests / Merge requests
+- Code review
+- Issue tracking
+- CI/CD integration
+- Project management
+
+## Package Managers
+
+### npm (Node Package Manager)
+
+```bash
+# Initialize project
+npm init
+npm init -y # Skip prompts
+
+# Install dependencies
+npm install package-name
+npm install -D package-name # Dev dependency
+npm install -g package-name # Global
+
+# Update packages
+npm update
+npm outdated
+
+# Run scripts
+npm run build
+npm test
+npm start
+
+# Audit security
+npm audit
+npm audit fix
+```
+
+**package.json**:
+```json
+{
+  "name": "my-project",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "node server.js",
+    "build": "webpack",
+    "test": "jest"
+  },
+  "dependencies": {
+    "express": "^4.18.0"
+  },
+  "devDependencies": {
+    "webpack": "^5.75.0"
+  }
+}
+```
+
+### Yarn
+
+Faster alternative to npm:
+```bash
+yarn add package-name
+yarn remove package-name
+yarn upgrade
+yarn build
+```
+
+### pnpm
+
+Efficient package manager (disk space saving):
+```bash
+pnpm install
+pnpm add package-name
+pnpm remove package-name
+```
+
+## Build Tools
+
+### Webpack
+
+Module bundler:
+
+```javascript
+// webpack.config.js
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: __dirname + '/dist',
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ]
+};
+```
+
+### Vite
+
+Fast modern build tool:
+
+```bash
+# Create project
+npm create vite@latest my-app
+
+# Dev server
+npm run dev
+
+# Build
+npm run build
+```
+
+### Parcel
+
+Zero-config bundler:
+```bash
+parcel index.html
+parcel build index.html
+```
+
+## Task Runners
+
+### npm Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "test": "jest",
+    "lint": "eslint src/",
+    "format": "prettier --write src/"
+  }
+}
+```
+
+## Testing Frameworks
+
+### Jest
+
+JavaScript testing framework:
+
+```javascript
+// sum.test.js
+const sum = require('./sum');
+
+describe('sum function', () => {
+  test('adds 1 + 2 to equal 3', () => {
+    expect(sum(1, 2)).toBe(3);
+  });
+  
+  test('handles negative numbers', () => {
+    expect(sum(-1, -2)).toBe(-3);
+  });
+});
+```
+
+### Vitest
+
+Vite-powered testing (Jest-compatible):
+```javascript
+import { describe, test, expect } from 'vitest';
+
+describe('math', () => {
+  test('addition', () => {
+    expect(1 + 1).toBe(2);
+  });
+});
+```
+
+### Playwright
+
+End-to-end testing:
+```javascript
+import { test, expect } from '@playwright/test';
+
+test('homepage has title', async ({ page }) => {
+  await page.goto('https://example.com');
+  await expect(page).toHaveTitle(/Example/);
+});
+```
+
+## Linters & Formatters
+
+### ESLint
+
+JavaScript linter:
+
+```javascript
+// .eslintrc.js
+module.exports = {
+  extends: ['eslint:recommended'],
+  rules: {
+    'no-console': 'warn',
+    'no-unused-vars': 'error'
+  }
+};
+```
+
+### Prettier
+
+Code formatter:
+
+```json
+// .prettierrc
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
+```
+
+### Stylelint
+
+CSS linter:
+```json
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "indentation": 2,
+    "color-hex-length": "short"
+  }
+}
+```
+
+## IDEs and Editors
+
+### Visual Studio Code
+
+**Key Features**:
+- IntelliSense
+- Debugging
+- Git integration
+- Extensions marketplace
+- Terminal integration
+
+**Popular Extensions**:
+- ESLint
+- Prettier
+- Live Server
+- GitLens
+- Path Intellisense
+
+### WebStorm
+
+Full-featured IDE for web development by JetBrains.
+
+### Sublime Text
+
+Lightweight, fast text editor.
+
+### Vim/Neovim
+
+Terminal-based editor (steep learning curve).
+
+## TypeScript
+
+Typed superset of JavaScript:
+
+```typescript
+// types.ts
+interface User {
+  id: number;
+  name: string;
+  email?: string; // Optional
+}
+
+function getUser(id: number): User {
+  return { id, name: 'John' };
+}
+
+// Generics
+function identity<T>(arg: T): T {
+  return arg;
+}
+```
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}
+```
+
+## Continuous Integration (CI/CD)
+
+### GitHub Actions
+
+```yaml
+# .github/workflows/test.yml
+name: Test
+on: [push, pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm ci
+      - run: npm test
+```
+
+### Other CI/CD Platforms
+
+- **GitLab CI**
+- **CircleCI**
+- **Travis CI**
+- **Jenkins**
+
+## Debugging
+
+### Browser DevTools
+
+```javascript
+// Debugging statements
+debugger; // Pause execution
+console.log('value:', value);
+console.error('error:', error);
+console.trace(); // Stack trace
+```
+
+### Node.js Debugging
+
+```bash
+# Built-in debugger
+node inspect app.js
+
+# Chrome DevTools
+node --inspect app.js
+node --inspect-brk app.js # Break on start
+```
+
+## Performance Profiling
+
+### Chrome DevTools Performance
+
+- Record CPU activity
+- Analyze flame charts
+- Identify bottlenecks
+
+### Lighthouse
+
+```bash
+# CLI
+npm install -g lighthouse
+lighthouse https://example.com
+
+# DevTools
+Open Chrome DevTools > Lighthouse tab
+```
+
+## Monitoring
+
+### Error Tracking
+
+- **Sentry**: Error monitoring
+- **Rollbar**: Real-time error tracking
+- **Bugsnag**: Error monitoring
+
+### Analytics
+
+- **Google Analytics**
+- **Plausible**: Privacy-friendly
+- **Matomo**: Self-hosted
+
+### RUM (Real User Monitoring)
+
+- **SpeedCurve**
+- **New Relic**
+- **Datadog**
+
+## Developer Workflow
+
+### Typical Workflow
+
+1. **Setup**: Clone repo, install dependencies
+2. **Develop**: Write code, run dev server
+3. **Test**: Run unit/integration tests
+4. **Lint/Format**: Check code quality
+5. **Commit**: Git commit and push
+6. **CI/CD**: Automated tests and deployment
+7. **Deploy**: Push to production
+
+### Environment Variables
+
+```bash
+# .env
+DATABASE_URL=postgres://localhost/db
+API_KEY=secret-key-here
+NODE_ENV=development
+```
+
+```javascript
+// Access in Node.js
+const dbUrl = process.env.DATABASE_URL;
+```
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Bun
+- Continuous integration
+- Deno
+- Developer tools
+- Fork
+- Fuzz testing
+- Git
+- IDE
+- Node.js
+- Repo
+- Rsync
+- SCM
+- SDK
+- Smoke test
+- SVN
+- TypeScript
+
+## Additional Resources
+
+- [Git Documentation](https://git-scm.com/doc)
+- [npm Documentation](https://docs.npmjs.com/)
+- [Webpack Guides](https://webpack.js.org/guides/)
+- [Jest Documentation](https://jestjs.io/docs/getting-started)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)

skills/web-coder/references/glossary.md

@@ -0,0 +1,649 @@
+# Glossary
+
+- Reference [Glossary of Web Terms](https://developer.mozilla.org/en-US/docs/Glossary)
+
+## Web Terms
+
+This glossary contains comprehensive web terms categorized across 15 domains:
+
+- HTML & Markup
+- CSS & Styling  
+- JavaScript & Programming
+- Web APIs & DOM
+- HTTP & Networking
+- Security & Authentication
+- Performance & Optimization
+- Accessibility
+- Web Protocols & Standards
+- Browsers & Engines
+- Development Tools
+- Data Formats & Encoding
+- Media & Graphics
+- Architecture & Patterns
+- Servers & Infrastructure
+
+## All Web Terms
+
+- [Abstraction](https://developer.mozilla.org/en-US/docs/Glossary/Abstraction)
+- [Accent](https://developer.mozilla.org/en-US/docs/Glossary/Accent)
+- [Accessibility](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility)
+- [Accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree)
+- [Accessible description](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description)
+- [Accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name)
+- [Adobe Flash](https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash)
+- [Advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure)
+- [Ajax](https://developer.mozilla.org/en-US/docs/Glossary/Ajax)
+- [Algorithm](https://developer.mozilla.org/en-US/docs/Glossary/Algorithm)
+- [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_container)
+- [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_subject)
+- [Alpha (*alpha channel*)](https://developer.mozilla.org/en-US/docs/Glossary/Alpha)
+- [ALPN](https://developer.mozilla.org/en-US/docs/Glossary/ALPN)
+- [API](https://developer.mozilla.org/en-US/docs/Glossary/API)
+- [Apple Safari](https://developer.mozilla.org/en-US/docs/Glossary/Apple_Safari)
+- [Application context](https://developer.mozilla.org/en-US/docs/Glossary/Application_context)
+- [Argument](https://developer.mozilla.org/en-US/docs/Glossary/Argument)
+- [ARIA](https://developer.mozilla.org/en-US/docs/Glossary/ARIA)
+- [ARPA](https://developer.mozilla.org/en-US/docs/Glossary/ARPA)
+- [ARPANET](https://developer.mozilla.org/en-US/docs/Glossary/ARPANET)
+- [Array](https://developer.mozilla.org/en-US/docs/Glossary/Array)
+- [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII)
+- [Aspect ratio](https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio)
+- [Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous)
+- [ATAG](https://developer.mozilla.org/en-US/docs/Glossary/ATAG)
+- [Attribute](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)
+- [Authentication](https://developer.mozilla.org/en-US/docs/Glossary/Authentication)
+- [Authenticator](https://developer.mozilla.org/en-US/docs/Glossary/Authenticator)
+- [Bandwidth](https://developer.mozilla.org/en-US/docs/Glossary/Bandwidth)
+- [Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)
+- [Baseline](https://developer.mozilla.org/en-US/docs/Glossary/Baseline)
+  - [Baseline (*compatibility*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility)
+  - [Baseline (*typography*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Typography)
+- [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag)
+- [Beacon](https://developer.mozilla.org/en-US/docs/Glossary/Beacon)
+- [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bézier_curve)
+- [bfcache](https://developer.mozilla.org/en-US/docs/Glossary/bfcache)
+- [BiDi](https://developer.mozilla.org/en-US/docs/Glossary/BiDi)
+- [BigInt](https://developer.mozilla.org/en-US/docs/Glossary/BigInt)
+- [Binding](https://developer.mozilla.org/en-US/docs/Glossary/Binding)
+- [Bitwise flags](https://developer.mozilla.org/en-US/docs/Glossary/Bitwise_flags)
+- [Blink](https://developer.mozilla.org/en-US/docs/Glossary/Blink)
+  - [blink element (*\<blink\> tag*)](https://developer.mozilla.org/en-US/docs/Glossary/blink_element)
+- [Block](https://developer.mozilla.org/en-US/docs/Glossary/Block)
+  - [Block (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS)
+  - [Block (*scripting*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting)
+- [Block cipher mode of operation](https://developer.mozilla.org/en-US/docs/Glossary/Block_cipher_mode_of_operation)
+- [Block-level content](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content)
+- [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+  - [Boolean (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/JavaScript)
+  - [Boolean attribute (*ARIA*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/ARIA)
+  - [Boolean attribute (*HTML*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML)
+- [Bounding box](https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box)
+- [Breadcrumb](https://developer.mozilla.org/en-US/docs/Glossary/Breadcrumb)
+- [Brotli compression](https://developer.mozilla.org/en-US/docs/Glossary/Brotli_compression)
+- [Browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)
+- [Browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context)
+- [Buffer](https://developer.mozilla.org/en-US/docs/Glossary/Buffer)
+- [Bun](https://developer.mozilla.org/en-US/docs/Glossary/Bun)
+- [Cache](https://developer.mozilla.org/en-US/docs/Glossary/Cache)
+- [Cacheable](https://developer.mozilla.org/en-US/docs/Glossary/Cacheable)
+- [CalDAV](https://developer.mozilla.org/en-US/docs/Glossary/CalDAV)
+- [Call stack](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)
+- [Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
+- [Camel case](https://developer.mozilla.org/en-US/docs/Glossary/Camel_case)
+- [Canonical order](https://developer.mozilla.org/en-US/docs/Glossary/Canonical_order)
+- [Canvas](https://developer.mozilla.org/en-US/docs/Glossary/Canvas)
+- [Card sorting](https://developer.mozilla.org/en-US/docs/Glossary/Card_sorting)
+- [CardDAV](https://developer.mozilla.org/en-US/docs/Glossary/CardDAV)
+- [Caret](https://developer.mozilla.org/en-US/docs/Glossary/Caret)
+- [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)
+- [Certificate authority](https://developer.mozilla.org/en-US/docs/Glossary/Certificate_authority)
+- [Certified](https://developer.mozilla.org/en-US/docs/Glossary/Certified)
+- [Challenge-response authentication](https://developer.mozilla.org/en-US/docs/Glossary/Challenge-response_authentication)
+- [Character](https://developer.mozilla.org/en-US/docs/Glossary/Character)
+- [Character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)
+- [Character reference](https://developer.mozilla.org/en-US/docs/Glossary/Character_reference)
+- [Character set](https://developer.mozilla.org/en-US/docs/Glossary/Character_set)
+- [Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)
+- [CIA](https://developer.mozilla.org/en-US/docs/Glossary/CIA)
+- [Cipher](https://developer.mozilla.org/en-US/docs/Glossary/Cipher)
+- [Cipher suite](https://developer.mozilla.org/en-US/docs/Glossary/Cipher_suite)
+- [Ciphertext](https://developer.mozilla.org/en-US/docs/Glossary/Ciphertext)
+- [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class)
+- [Client-side rendering (*CSR*)](https://developer.mozilla.org/en-US/docs/Glossary/Client-side_rendering_(CSR))
+- [Closure](https://developer.mozilla.org/en-US/docs/Glossary/Closure)
+- [Cloud](https://developer.mozilla.org/en-US/docs/Glossary/Cloud)
+- [Cloud computing](https://developer.mozilla.org/en-US/docs/Glossary/Cloud_computing)
+- [CMS](https://developer.mozilla.org/en-US/docs/Glossary/CMS)
+- [Code point](https://developer.mozilla.org/en-US/docs/Glossary/Code_point)
+- [Code splitting](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting)
+- [Code unit](https://developer.mozilla.org/en-US/docs/Glossary/Code_unit)
+- [Codec](https://developer.mozilla.org/en-US/docs/Glossary/Codec)
+- [Color space](https://developer.mozilla.org/en-US/docs/Glossary/Color_space)
+- [Color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel)
+- [Compile](https://developer.mozilla.org/en-US/docs/Glossary/Compile)
+- [Compile time](https://developer.mozilla.org/en-US/docs/Glossary/Compile_time)
+- [Composite operation](https://developer.mozilla.org/en-US/docs/Glossary/Composite_operation)
+- [Compression Dictionary Transport](https://developer.mozilla.org/en-US/docs/Glossary/Compression_Dictionary_Transport)
+- [Computer programming](https://developer.mozilla.org/en-US/docs/Glossary/Computer_programming)
+- [Conditional](https://developer.mozilla.org/en-US/docs/Glossary/Conditional)
+- [Constant](https://developer.mozilla.org/en-US/docs/Glossary/Constant)
+- [Constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor)
+- [Content header](https://developer.mozilla.org/en-US/docs/Glossary/Content_header)
+- [Continuous integration](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_integration)
+- [Continuous media](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_media)
+- [Control flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow)
+- [Cookie](https://developer.mozilla.org/en-US/docs/Glossary/Cookie)
+- [Copyleft](https://developer.mozilla.org/en-US/docs/Glossary/Copyleft)
+- [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)
+- [CORS-safelisted request header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header)
+- [CORS-safelisted response header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_response_header)
+- [Crawler](https://developer.mozilla.org/en-US/docs/Glossary/Crawler)
+- [Credential](https://developer.mozilla.org/en-US/docs/Glossary/Credential)
+- [CRLF](https://developer.mozilla.org/en-US/docs/Glossary/CRLF)
+- [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
+- [Cross-site request forgery (*CSRF*)](https://developer.mozilla.org/en-US/docs/Glossary/CSRF)
+- [Cross-site scripting (*XSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)
+- [CRUD](https://developer.mozilla.org/en-US/docs/Glossary/CRUD)
+- [Cryptanalysis](https://developer.mozilla.org/en-US/docs/Glossary/Cryptanalysis)
+- [Cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Cryptography)
+- [CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP)
+- [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)
+- [CSS Object Model (*CSSOM*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Object_Model_(CSSOM))
+- [CSS pixel](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel)
+- [CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)
+- [Cumulative Layout Shift (*CLS*)](https://developer.mozilla.org/en-US/docs/Glossary/CLS)
+- [Data structure](https://developer.mozilla.org/en-US/docs/Glossary/Data_structure)
+- [Database](https://developer.mozilla.org/en-US/docs/Glossary/Database)
+- [Debounce](https://developer.mozilla.org/en-US/docs/Glossary/Debounce)
+- [Decryption](https://developer.mozilla.org/en-US/docs/Glossary/Decryption)
+- [Deep copy](https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy)
+- [Delta](https://developer.mozilla.org/en-US/docs/Glossary/Delta)
+- [Denial of Service (*DoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Denial_of_Service)
+- [Deno](https://developer.mozilla.org/en-US/docs/Glossary/Deno)
+- [Descriptor (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Descriptor_(CSS))
+- [Deserialization](https://developer.mozilla.org/en-US/docs/Glossary/Deserialization)
+- [Developer tools](https://developer.mozilla.org/en-US/docs/Glossary/Developer_tools)
+- [Device pixel](https://developer.mozilla.org/en-US/docs/Glossary/Device_pixel)
+- [Digital certificate](https://developer.mozilla.org/en-US/docs/Glossary/Digital_certificate)
+- [Digital signature](https://developer.mozilla.org/en-US/docs/Glossary/Digital_signature)
+- [Distributed Denial of Service (*DDoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Distributed_Denial_of_Service)
+- [DMZ](https://developer.mozilla.org/en-US/docs/Glossary/DMZ)
+- [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS)
+- [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
+- [Document directive](https://developer.mozilla.org/en-US/docs/Glossary/Document_directive)
+- [Document environment](https://developer.mozilla.org/en-US/docs/Glossary/Document_environment)
+- [DOM (*Document Object Model*)](https://developer.mozilla.org/en-US/docs/Glossary/DOM)
+- [Domain](https://developer.mozilla.org/en-US/docs/Glossary/Domain)
+- [Domain name](https://developer.mozilla.org/en-US/docs/Glossary/Domain_name)
+- [Domain sharding](https://developer.mozilla.org/en-US/docs/Glossary/Domain_sharding)
+- [Dominator](https://developer.mozilla.org/en-US/docs/Glossary/Dominator)
+- [DSL](https://developer.mozilla.org/en-US/docs/Glossary/DSL)
+  - [DSL (*Digital Subscriber Line*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Digital_Subscriber_Line)
+  - [DSL (*Domain-Specific Language*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Domain-Specific_Language)
+- [DTLS (*Datagram Transport Layer Security*)](https://developer.mozilla.org/en-US/docs/Glossary/DTLS)
+- [DTMF (*Dual-Tone Multi-Frequency signaling*)](https://developer.mozilla.org/en-US/docs/Glossary/DTMF)
+- [Dynamic typing](https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing)
+- [ECMA](https://developer.mozilla.org/en-US/docs/Glossary/ECMA)
+- [ECMAScript](https://developer.mozilla.org/en-US/docs/Glossary/ECMAScript)
+- [Effective connection type](https://developer.mozilla.org/en-US/docs/Glossary/Effective_connection_type)
+- [Element](https://developer.mozilla.org/en-US/docs/Glossary/Element)
+- [Encapsulation](https://developer.mozilla.org/en-US/docs/Glossary/Encapsulation)
+- [Encryption](https://developer.mozilla.org/en-US/docs/Glossary/Encryption)
+- [Endianness](https://developer.mozilla.org/en-US/docs/Glossary/Endianness)
+- [Engine](https://developer.mozilla.org/en-US/docs/Glossary/Engine)
+- [JavaScript engine](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript_engine)
+- [Rendering engine](https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine)
+- [Entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity)
+- [Entity header](https://developer.mozilla.org/en-US/docs/Glossary/Entity_header)
+- [Enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated)
+- [Escape character](https://developer.mozilla.org/en-US/docs/Glossary/Escape_character)
+- [Event](https://developer.mozilla.org/en-US/docs/Glossary/Event)
+- [Exception](https://developer.mozilla.org/en-US/docs/Glossary/Exception)
+- [EXIF](https://developer.mozilla.org/en-US/docs/Glossary/EXIF)
+- [Expando](https://developer.mozilla.org/en-US/docs/Glossary/Expando)
+- [Extrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Extrinsic_size)
+- [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_alignment)
+- [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
+- [Favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon)
+- [Federated identity](https://developer.mozilla.org/en-US/docs/Glossary/Federated_identity)
+- [Fetch directive](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive)
+- [Fetch metadata request header](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_metadata_request_header)
+- [Fingerprinting](https://developer.mozilla.org/en-US/docs/Glossary/Fingerprinting)
+- [Firefox OS](https://developer.mozilla.org/en-US/docs/Glossary/Firefox_OS)
+- [Firewall](https://developer.mozilla.org/en-US/docs/Glossary/Firewall)
+- [First Contentful Paint (*FCP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_Contentful_Paint_(FCP))
+- [First CPU idle](https://developer.mozilla.org/en-US/docs/Glossary/First_CPU_idle)
+- [First Input Delay (FID)Deprecated](https://developer.mozilla.org/en-US/docs/Glossary/First_Input_Delay)
+- [First Meaningful Paint (*FMP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_meaningful_paint)
+- [First Paint (*FP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_paint)
+- [First-class function](https://developer.mozilla.org/en-US/docs/Glossary/First-class_function)
+- [Flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex)
+- [Flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_container)
+- [Flex item](https://developer.mozilla.org/en-US/docs/Glossary/Flex_item)
+- [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)
+- [Flow relative values](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values)
+- [Forbidden request header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_request_header)
+- [Forbidden response header name](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name)
+- [Fork](https://developer.mozilla.org/en-US/docs/Glossary/Fork)
+- [Fragmentainer](https://developer.mozilla.org/en-US/docs/Glossary/Fragmentainer)
+- [Frame rate (*FPS*)](https://developer.mozilla.org/en-US/docs/Glossary/FPS)
+- [FTP](https://developer.mozilla.org/en-US/docs/Glossary/FTP)
+- [FTU](https://developer.mozilla.org/en-US/docs/Glossary/FTU)
+- [Function](https://developer.mozilla.org/en-US/docs/Glossary/Function)
+- [Fuzz testing](https://developer.mozilla.org/en-US/docs/Glossary/Fuzz_testing)
+- [Gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut)
+- [Garbage collection](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection)
+- [Gecko](https://developer.mozilla.org/en-US/docs/Glossary/Gecko)
+- [General header](https://developer.mozilla.org/en-US/docs/Glossary/General_header)
+- [GIF](https://developer.mozilla.org/en-US/docs/Glossary/GIF)
+- [Git](https://developer.mozilla.org/en-US/docs/Glossary/Git)
+- [Global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)
+- [Global scope](https://developer.mozilla.org/en-US/docs/Glossary/Global_scope)
+- [Global variable](https://developer.mozilla.org/en-US/docs/Glossary/Global_variable)
+- [Glyph](https://developer.mozilla.org/en-US/docs/Glossary/Glyph)
+- [Google Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Google_Chrome)
+- [GPL](https://developer.mozilla.org/en-US/docs/Glossary/GPL)
+- [GPU](https://developer.mozilla.org/en-US/docs/Glossary/GPU)
+- [Graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation)
+- [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid)
+- [Grid areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_areas)
+- [Grid Axis](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis)
+- [Grid Cell](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Cell)
+- [Grid Column](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column)
+- [Grid container](https://developer.mozilla.org/en-US/docs/Glossary/Grid_container)
+- [Grid lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines)
+- [Grid Row](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row)
+- [Grid Tracks](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks)
+- [Guaranteed-invalid value](https://developer.mozilla.org/en-US/docs/Glossary/Guaranteed-invalid_value)
+- [Gutters](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)
+- [gzip compression](https://developer.mozilla.org/en-US/docs/Glossary/gzip_compression)
+- [Hash function](https://developer.mozilla.org/en-US/docs/Glossary/Hash_function)
+- [Hash routing](https://developer.mozilla.org/en-US/docs/Glossary/Hash_routing)
+- [Head](https://developer.mozilla.org/en-US/docs/Glossary/Head)
+- [High-level programming language](https://developer.mozilla.org/en-US/docs/Glossary/High-level_programming_language)
+- [HMAC](https://developer.mozilla.org/en-US/docs/Glossary/HMAC)
+- [Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+- [HOL blocking](https://developer.mozilla.org/en-US/docs/Glossary/HOL_blocking)
+- [Host](https://developer.mozilla.org/en-US/docs/Glossary/Host)
+- [Hotlink](https://developer.mozilla.org/en-US/docs/Glossary/Hotlink)
+- [Houdini](https://developer.mozilla.org/en-US/docs/Glossary/Houdini)
+- [HPKP](https://developer.mozilla.org/en-US/docs/Glossary/HPKP)
+- [HSTS](https://developer.mozilla.org/en-US/docs/Glossary/HSTS)
+- [HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML)
+- [HTML color codes](https://developer.mozilla.org/en-US/docs/Glossary/HTML_color_codes)
+- [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)
+- [HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)
+- [HTTP content](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_content)
+- [HTTP header](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_header)
+- [HTTP/2](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/2)
+- [HTTP/3](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/3)
+- [HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS)
+- [HTTPS RR](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS_RR)
+- [Hyperlink](https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink)
+- [Hypertext](https://developer.mozilla.org/en-US/docs/Glossary/Hypertext)
+- [IANA](https://developer.mozilla.org/en-US/docs/Glossary/IANA)
+- [ICANN](https://developer.mozilla.org/en-US/docs/Glossary/ICANN)
+- [ICE](https://developer.mozilla.org/en-US/docs/Glossary/ICE)
+- [IDE](https://developer.mozilla.org/en-US/docs/Glossary/IDE)
+- [Idempotent](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent)
+- [Identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier)
+- [Identity provider (*IdP*)](https://developer.mozilla.org/en-US/docs/Glossary/Identity_provider)
+- [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)
+- [IETF](https://developer.mozilla.org/en-US/docs/Glossary/IETF)
+- [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
+- [IMAP](https://developer.mozilla.org/en-US/docs/Glossary/IMAP)
+- [Immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable)
+- [IndexedDB](https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB)
+- [Information architecture](https://developer.mozilla.org/en-US/docs/Glossary/Information_architecture)
+- [Inheritance](https://developer.mozilla.org/en-US/docs/Glossary/Inheritance)
+- [Ink overflow](https://developer.mozilla.org/en-US/docs/Glossary/Ink_overflow)
+- [Inline-level content](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content)
+- [Input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor)
+- [Inset properties](https://developer.mozilla.org/en-US/docs/Glossary/Inset_properties)
+- [Instance](https://developer.mozilla.org/en-US/docs/Glossary/Instance)
+- [Interaction to Next Paint (*INP*)](https://developer.mozilla.org/en-US/docs/Glossary/interaction_to_next_paint)
+- [Internationalization (*i18n*)](https://developer.mozilla.org/en-US/docs/Glossary/Internationalization)
+- [Internet](https://developer.mozilla.org/en-US/docs/Glossary/Internet)
+- [Interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation)
+- [Intrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_size)
+- [Invariant](https://developer.mozilla.org/en-US/docs/Glossary/Invariant)
+- [IP Address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address)
+- [IPv4](https://developer.mozilla.org/en-US/docs/Glossary/IPv4)
+- [IPv6](https://developer.mozilla.org/en-US/docs/Glossary/IPv6)
+- [IRC](https://developer.mozilla.org/en-US/docs/Glossary/IRC)
+- [ISO](https://developer.mozilla.org/en-US/docs/Glossary/ISO)
+- [ISP](https://developer.mozilla.org/en-US/docs/Glossary/ISP)
+- [ITU](https://developer.mozilla.org/en-US/docs/Glossary/ITU)
+- [Jank](https://developer.mozilla.org/en-US/docs/Glossary/Jank)
+- [Java](https://developer.mozilla.org/en-US/docs/Glossary/Java)
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript)
+- [Jitter](https://developer.mozilla.org/en-US/docs/Glossary/Jitter)
+- [JPEG](https://developer.mozilla.org/en-US/docs/Glossary/JPEG)
+- [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON)
+- [JSON type representation](https://developer.mozilla.org/en-US/docs/Glossary/JSON_type_representation)
+- [Just-In-Time Compilation (*JIT*)](https://developer.mozilla.org/en-US/docs/Glossary/Just-in-time_compilation)
+- [Kebab case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case)
+- [Key](https://developer.mozilla.org/en-US/docs/Glossary/Key)
+- [Keyword](https://developer.mozilla.org/en-US/docs/Glossary/Keyword)
+- [Largest Contentful Paint (*LCP*)](https://developer.mozilla.org/en-US/docs/Glossary/Largest_contentful_paint)
+- [Latency](https://developer.mozilla.org/en-US/docs/Glossary/Latency)
+- [Layout mode](https://developer.mozilla.org/en-US/docs/Glossary/Layout_mode)
+- [Layout viewport](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport)
+- [Lazy load](https://developer.mozilla.org/en-US/docs/Glossary/Lazy_load)
+- [Leading](https://developer.mozilla.org/en-US/docs/Glossary/Leading)
+- [LGPL](https://developer.mozilla.org/en-US/docs/Glossary/LGPL)
+- [Ligature](https://developer.mozilla.org/en-US/docs/Glossary/Ligature)
+- [Literal](https://developer.mozilla.org/en-US/docs/Glossary/Literal)
+- [Local scope](https://developer.mozilla.org/en-US/docs/Glossary/Local_scope)
+- [Local variable](https://developer.mozilla.org/en-US/docs/Glossary/Local_variable)
+- [Locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale)
+- [Localization](https://developer.mozilla.org/en-US/docs/Glossary/Localization)
+- [Logical properties](https://developer.mozilla.org/en-US/docs/Glossary/Logical_properties)
+- [Long task](https://developer.mozilla.org/en-US/docs/Glossary/Long_task)
+- [Loop](https://developer.mozilla.org/en-US/docs/Glossary/Loop)
+- [Lossless compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossless_compression)
+- [Lossy compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossy_compression)
+- [LTR (*Left To Right*)](https://developer.mozilla.org/en-US/docs/Glossary/LTR)
+- [Main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_axis)
+- [Main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread)
+- [Markup](https://developer.mozilla.org/en-US/docs/Glossary/Markup)
+- [MathML](https://developer.mozilla.org/en-US/docs/Glossary/MathML)
+- [Media](https://developer.mozilla.org/en-US/docs/Glossary/Media)
+  - [Media (*Audio-visual presentation*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/Audio-visual_presentation)
+  - [Media (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/CSS)
+- [Media query](https://developer.mozilla.org/en-US/docs/Glossary/Media_query)
+- [Metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)
+- [Method](https://developer.mozilla.org/en-US/docs/Glossary/Method)
+- [Microsoft Edge](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Edge)
+- [Microsoft Internet Explorer](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Internet_Explorer)
+- [Middleware](https://developer.mozilla.org/en-US/docs/Glossary/Middleware)
+- [MIME](https://developer.mozilla.org/en-US/docs/Glossary/MIME)
+- [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type)
+- [Minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)
+- [MitM](https://developer.mozilla.org/en-US/docs/Glossary/MitM)
+- [Mixin](https://developer.mozilla.org/en-US/docs/Glossary/Mixin)
+- [Mobile first](https://developer.mozilla.org/en-US/docs/Glossary/Mobile_first)
+- [Modem](https://developer.mozilla.org/en-US/docs/Glossary/Modem)
+- [Modularity](https://developer.mozilla.org/en-US/docs/Glossary/Modularity)
+- [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Mozilla_Firefox)
+- [Multi-factor authentication](https://developer.mozilla.org/en-US/docs/Glossary/Multi-factor_authentication)
+- [Mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable)
+- [MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)
+- [Namespace](https://developer.mozilla.org/en-US/docs/Glossary/Namespace)
+- [NaN](https://developer.mozilla.org/en-US/docs/Glossary/NaN)
+- [NAT](https://developer.mozilla.org/en-US/docs/Glossary/NAT)
+- [Native](https://developer.mozilla.org/en-US/docs/Glossary/Native)
+- [Navigation directive](https://developer.mozilla.org/en-US/docs/Glossary/Navigation_directive)
+- [Netscape Navigator](https://developer.mozilla.org/en-US/docs/Glossary/Netscape_Navigator)
+- [Network throttling](https://developer.mozilla.org/en-US/docs/Glossary/Network_throttling)
+- [NNTP](https://developer.mozilla.org/en-US/docs/Glossary/NNTP)
+- [Node](https://developer.mozilla.org/en-US/docs/Glossary/Node)
+  - [Node (*DOM*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/DOM)
+  - [Node (*networking*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/Networking)
+- [Node.js](https://developer.mozilla.org/en-US/docs/Glossary/Node.js)
+- [Non-normative](https://developer.mozilla.org/en-US/docs/Glossary/Non-normative)
+- [Nonce](https://developer.mozilla.org/en-US/docs/Glossary/Nonce)
+- [Normative](https://developer.mozilla.org/en-US/docs/Glossary/Normative)
+- [Null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+- [Nullish value](https://developer.mozilla.org/en-US/docs/Glossary/Nullish_value)
+- [Number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+- [Object](https://developer.mozilla.org/en-US/docs/Glossary/Object)
+- [Object reference](https://developer.mozilla.org/en-US/docs/Glossary/Object_reference)
+- [OOP](https://developer.mozilla.org/en-US/docs/Glossary/OOP)
+- [OpenGL](https://developer.mozilla.org/en-US/docs/Glossary/OpenGL)
+- [OpenSSL](https://developer.mozilla.org/en-US/docs/Glossary/OpenSSL)
+- [Opera browser](https://developer.mozilla.org/en-US/docs/Glossary/Opera_browser)
+- [Operand](https://developer.mozilla.org/en-US/docs/Glossary/Operand)
+- [Operator](https://developer.mozilla.org/en-US/docs/Glossary/Operator)
+- [Origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin)
+- [OTA](https://developer.mozilla.org/en-US/docs/Glossary/OTA)
+- [OWASP](https://developer.mozilla.org/en-US/docs/Glossary/OWASP)
+- [P2P](https://developer.mozilla.org/en-US/docs/Glossary/P2P)
+- [PAC](https://developer.mozilla.org/en-US/docs/Glossary/PAC)
+- [Packet](https://developer.mozilla.org/en-US/docs/Glossary/Packet)
+- [Page load time](https://developer.mozilla.org/en-US/docs/Glossary/Page_load_time)
+- [Page prediction](https://developer.mozilla.org/en-US/docs/Glossary/Page_prediction)
+- [Parameter](https://developer.mozilla.org/en-US/docs/Glossary/Parameter)
+- [Parent object](https://developer.mozilla.org/en-US/docs/Glossary/Parent_object)
+- [Parse](https://developer.mozilla.org/en-US/docs/Glossary/Parse)
+- [Parser](https://developer.mozilla.org/en-US/docs/Glossary/Parser)
+- [Payload body](https://developer.mozilla.org/en-US/docs/Glossary/Payload_body)
+- [Payload header](https://developer.mozilla.org/en-US/docs/Glossary/Payload_header)
+- [PDF](https://developer.mozilla.org/en-US/docs/Glossary/PDF)
+- [Perceived performance](https://developer.mozilla.org/en-US/docs/Glossary/Perceived_performance)
+- [Percent-encoding](https://developer.mozilla.org/en-US/docs/Glossary/Percent-encoding)
+- [PHP](https://developer.mozilla.org/en-US/docs/Glossary/PHP)
+- [Physical properties](https://developer.mozilla.org/en-US/docs/Glossary/Physical_properties)
+- [Pixel](https://developer.mozilla.org/en-US/docs/Glossary/Pixel)
+- [Placeholder names](https://developer.mozilla.org/en-US/docs/Glossary/Placeholder_names)
+- [Plaintext](https://developer.mozilla.org/en-US/docs/Glossary/Plaintext)
+- [Plugin](https://developer.mozilla.org/en-US/docs/Glossary/Plugin)
+- [PNG](https://developer.mozilla.org/en-US/docs/Glossary/PNG)
+- [Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)
+- [Polymorphism](https://developer.mozilla.org/en-US/docs/Glossary/Polymorphism)
+- [POP3](https://developer.mozilla.org/en-US/docs/Glossary/POP3)
+- [Port](https://developer.mozilla.org/en-US/docs/Glossary/Port)
+- [Prefetch](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch)
+- [Preflight request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request)
+- [Prerender](https://developer.mozilla.org/en-US/docs/Glossary/Prerender)
+- [Presto](https://developer.mozilla.org/en-US/docs/Glossary/Presto)
+- [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)
+- [Principle of least privilege](https://developer.mozilla.org/en-US/docs/Glossary/Principle_of_least_privilege)
+- [Privileged](https://developer.mozilla.org/en-US/docs/Glossary/Privileged)
+- [Privileged code](https://developer.mozilla.org/en-US/docs/Glossary/Privileged_code)
+- [Progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_enhancement)
+- [Progressive web applications (*PWAs*)](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_web_apps)
+- [Promise](https://developer.mozilla.org/en-US/docs/Glossary/Promise)
+- [Property](https://developer.mozilla.org/en-US/docs/Glossary/Property)
+  - [Property (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/CSS)
+  - [Property (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript)
+- [Protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol)
+- [Prototype](https://developer.mozilla.org/en-US/docs/Glossary/Prototype)
+- [Prototype-based programming](https://developer.mozilla.org/en-US/docs/Glossary/Prototype-based_programming)
+- [Proxy server](https://developer.mozilla.org/en-US/docs/Glossary/Proxy_server)
+- [Pseudo-class](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-class)
+- [Pseudo-element](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-element)
+- [Pseudocode](https://developer.mozilla.org/en-US/docs/Glossary/Pseudocode)
+- [Public-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Public-key_cryptography)
+- [Python](https://developer.mozilla.org/en-US/docs/Glossary/Python)
+- [Quality values](https://developer.mozilla.org/en-US/docs/Glossary/Quality_values)
+- [Quaternion](https://developer.mozilla.org/en-US/docs/Glossary/Quaternion)
+- [QUIC](https://developer.mozilla.org/en-US/docs/Glossary/QUIC)
+- [RAIL](https://developer.mozilla.org/en-US/docs/Glossary/RAIL)
+- [Random Number Generator](https://developer.mozilla.org/en-US/docs/Glossary/Random_Number_Generator)
+- [Raster image](https://developer.mozilla.org/en-US/docs/Glossary/Raster_image)
+- [Rate limit](https://developer.mozilla.org/en-US/docs/Glossary/Rate_limit)
+- [RDF](https://developer.mozilla.org/en-US/docs/Glossary/RDF)
+- [Reading order](https://developer.mozilla.org/en-US/docs/Glossary/Reading_order)
+- [Real User Monitoring (*RUM*)](https://developer.mozilla.org/en-US/docs/Glossary/Real_User_Monitoring)
+- [Recursion](https://developer.mozilla.org/en-US/docs/Glossary/Recursion)
+- [Reflow](https://developer.mozilla.org/en-US/docs/Glossary/Reflow)
+- [Registrable domain](https://developer.mozilla.org/en-US/docs/Glossary/Registrable_domain)
+- [Regular expression](https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression)
+- [Relying party](https://developer.mozilla.org/en-US/docs/Glossary/Relying_party)
+- [Render-blocking](https://developer.mozilla.org/en-US/docs/Glossary/Render-blocking)
+- [Repaint](https://developer.mozilla.org/en-US/docs/Glossary/Repaint)
+- [Replaced elements](https://developer.mozilla.org/en-US/docs/Glossary/Replaced_elements)
+- [Replay attack](https://developer.mozilla.org/en-US/docs/Glossary/Replay_attack)
+- [Repo](https://developer.mozilla.org/en-US/docs/Glossary/Repo)
+- [Reporting directive](https://developer.mozilla.org/en-US/docs/Glossary/Reporting_directive)
+- [Representation header](https://developer.mozilla.org/en-US/docs/Glossary/Representation_header)
+- [Request header](https://developer.mozilla.org/en-US/docs/Glossary/Request_header)
+- [Resource Timing](https://developer.mozilla.org/en-US/docs/Glossary/Resource_Timing)
+- [Response header](https://developer.mozilla.org/en-US/docs/Glossary/Response_header)
+- [Responsive Web Design (*RWD*)](https://developer.mozilla.org/en-US/docs/Glossary/Responsive_Web_Design)
+- [REST](https://developer.mozilla.org/en-US/docs/Glossary/REST)
+- [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB)
+- [RIL](https://developer.mozilla.org/en-US/docs/Glossary/RIL)
+- [Robots.txt](https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt)
+- [Round Trip Time (*RTT*)](https://developer.mozilla.org/en-US/docs/Glossary/Round_Trip_Time)
+- [Router](https://developer.mozilla.org/en-US/docs/Glossary/Router)
+- [RSS](https://developer.mozilla.org/en-US/docs/Glossary/RSS)
+- [Rsync](https://developer.mozilla.org/en-US/docs/Glossary/Rsync)
+- [RTCP (*RTP Control Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/RTCP)
+- [RTF](https://developer.mozilla.org/en-US/docs/Glossary/RTF)
+- [RTL (*Right to Left*)](https://developer.mozilla.org/en-US/docs/Glossary/RTL)
+- [RTP (*Real-time Transport Protocol*) and SRTP (*Secure RTP*)](https://developer.mozilla.org/en-US/docs/Glossary/RTP)
+- [RTSP: Real-time streaming protocol](https://developer.mozilla.org/en-US/docs/Glossary/RTSP)
+- [Ruby](https://developer.mozilla.org/en-US/docs/Glossary/Ruby)
+- [Safe](https://developer.mozilla.org/en-US/docs/Glossary/Safe)
+  - [Safe (*HTTP Methods*)](https://developer.mozilla.org/en-US/docs/Glossary/Safe/HTTP)
+- [Salt](https://developer.mozilla.org/en-US/docs/Glossary/Salt)
+- [Same-origin policy](https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy)
+- [SCM](https://developer.mozilla.org/en-US/docs/Glossary/SCM)
+- [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
+- [Screen reader](https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader)
+- [Script-supporting element](https://developer.mozilla.org/en-US/docs/Glossary/Script-supporting_element)
+- [Scroll boundary](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_boundary)
+- [Scroll chaining](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining)
+- [Scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container)
+- [Scroll snap](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_snap)
+- [SCTP](https://developer.mozilla.org/en-US/docs/Glossary/SCTP)
+- [SDK (*Software Development Kit*)](https://developer.mozilla.org/en-US/docs/Glossary/SDK)
+- [SDP](https://developer.mozilla.org/en-US/docs/Glossary/SDP)
+- [Search engine](https://developer.mozilla.org/en-US/docs/Glossary/Search_engine)
+- [Secure context](https://developer.mozilla.org/en-US/docs/Glossary/Secure_context)
+- [Secure Sockets Layer (*SSL*)](https://developer.mozilla.org/en-US/docs/Glossary/SSL)
+- [Selector (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector)
+- [Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
+- [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO)
+- [Serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object)
+- [Serialization](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)
+- [Server](https://developer.mozilla.org/en-US/docs/Glossary/Server)
+- [Server Timing](https://developer.mozilla.org/en-US/docs/Glossary/Server_Timing)
+- [Server-side rendering (*SSR*)](https://developer.mozilla.org/en-US/docs/Glossary/SSR)
+- [Session hijacking](https://developer.mozilla.org/en-US/docs/Glossary/Session_hijacking)
+- [SGML](https://developer.mozilla.org/en-US/docs/Glossary/SGML)
+- [Shadow tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)
+- [Shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy)
+- [Shim](https://developer.mozilla.org/en-US/docs/Glossary/Shim)
+- [Signature](https://developer.mozilla.org/en-US/docs/Glossary/Signature)
+- [Signature (*functions*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(functions))
+- [Signature (*security*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(security))
+- [SIMD](https://developer.mozilla.org/en-US/docs/Glossary/SIMD)
+- [SISD](https://developer.mozilla.org/en-US/docs/Glossary/SISD)
+- [Site](https://developer.mozilla.org/en-US/docs/Glossary/Site)
+- [Site map](https://developer.mozilla.org/en-US/docs/Glossary/Site_map)
+- [SLD](https://developer.mozilla.org/en-US/docs/Glossary/SLD)
+- [Sloppy mode](https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode)
+- [Slug](https://developer.mozilla.org/en-US/docs/Glossary/Slug)
+- [Smoke test](https://developer.mozilla.org/en-US/docs/Glossary/Smoke_test)
+- [SMPTE (*Society of Motion Picture and Television Engineers*)](https://developer.mozilla.org/en-US/docs/Glossary/SMPTE)
+- [SMTP](https://developer.mozilla.org/en-US/docs/Glossary/SMTP)
+- [Snake case](https://developer.mozilla.org/en-US/docs/Glossary/Snake_case)
+- [Snap positions](https://developer.mozilla.org/en-US/docs/Glossary/Snap_positions)
+- [SOAP](https://developer.mozilla.org/en-US/docs/Glossary/SOAP)
+- [Social engineering](https://developer.mozilla.org/en-US/docs/Glossary/Social_engineering)
+- [Source map](https://developer.mozilla.org/en-US/docs/Glossary/Source_map)
+- [SPA (*Single-page application*)](https://developer.mozilla.org/en-US/docs/Glossary/SPA)
+- [Specification](https://developer.mozilla.org/en-US/docs/Glossary/Specification)
+- [Speculative parsing](https://developer.mozilla.org/en-US/docs/Glossary/Speculative_parsing)
+- [Speed index](https://developer.mozilla.org/en-US/docs/Glossary/Speed_index)
+- [SQL](https://developer.mozilla.org/en-US/docs/Glossary/SQL)
+- [SQL injection](https://developer.mozilla.org/en-US/docs/Glossary/SQL_injection)
+- [SRI](https://developer.mozilla.org/en-US/docs/Glossary/SRI)
+- [Stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context)
+- [State machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine)
+- [Statement](https://developer.mozilla.org/en-US/docs/Glossary/Statement)
+- [Static method](https://developer.mozilla.org/en-US/docs/Glossary/Static_method)
+- [Static site generator (*SSG*)](https://developer.mozilla.org/en-US/docs/Glossary/SSG)
+- [Static typing](https://developer.mozilla.org/en-US/docs/Glossary/Static_typing)
+- [Sticky activation](https://developer.mozilla.org/en-US/docs/Glossary/Sticky_activation)
+- [Strict mode](https://developer.mozilla.org/en-US/docs/Glossary/Strict_mode)
+- [String](https://developer.mozilla.org/en-US/docs/Glossary/String)
+- [Stringifier](https://developer.mozilla.org/en-US/docs/Glossary/Stringifier)
+- [STUN](https://developer.mozilla.org/en-US/docs/Glossary/STUN)
+- [Style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin)
+- [Stylesheet](https://developer.mozilla.org/en-US/docs/Glossary/Stylesheet)
+- [Submit button](https://developer.mozilla.org/en-US/docs/Glossary/Submit_button)
+- [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG)
+- [SVN](https://developer.mozilla.org/en-US/docs/Glossary/SVN)
+- [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol)
+- [Symmetric-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Symmetric-key_cryptography)
+- [Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous)
+- [Syntax](https://developer.mozilla.org/en-US/docs/Glossary/Syntax)
+- [Syntax error](https://developer.mozilla.org/en-US/docs/Glossary/Syntax_error)
+- [Synthetic monitoring](https://developer.mozilla.org/en-US/docs/Glossary/Synthetic_monitoring)
+- [Table grid box](https://developer.mozilla.org/en-US/docs/Glossary/Table_grid_box)
+- [Table wrapper box](https://developer.mozilla.org/en-US/docs/Glossary/Table_wrapper_box)
+- [Tag](https://developer.mozilla.org/en-US/docs/Glossary/Tag)
+- [TCP](https://developer.mozilla.org/en-US/docs/Glossary/TCP)
+- [TCP handshake](https://developer.mozilla.org/en-US/docs/Glossary/TCP_handshake)
+- [TCP slow start](https://developer.mozilla.org/en-US/docs/Glossary/TCP_slow_start)
+- [Telnet](https://developer.mozilla.org/en-US/docs/Glossary/Telnet)
+- [Texel](https://developer.mozilla.org/en-US/docs/Glossary/Texel)
+- [The Khronos Group](https://developer.mozilla.org/en-US/docs/Glossary/The_Khronos_Group)
+- [Thread](https://developer.mozilla.org/en-US/docs/Glossary/Thread)
+- [Three js](https://developer.mozilla.org/en-US/docs/Glossary/Three_js)
+- [Throttle](https://developer.mozilla.org/en-US/docs/Glossary/Throttle)
+- [Time to First Byte (*TTFB*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte)
+- [Time to Interactive (*TTI*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_interactive)
+- [TLD](https://developer.mozilla.org/en-US/docs/Glossary/TLD)
+- [TOFU](https://developer.mozilla.org/en-US/docs/Glossary/TOFU)
+- [Top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+- [Transient activation](https://developer.mozilla.org/en-US/docs/Glossary/Transient_activation)
+- [Transport Layer Security (*TLS*)](https://developer.mozilla.org/en-US/docs/Glossary/TLS)
+- [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)
+- [Trident](https://developer.mozilla.org/en-US/docs/Glossary/Trident)
+- [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
+- [TTL](https://developer.mozilla.org/en-US/docs/Glossary/TTL)
+- [TURN](https://developer.mozilla.org/en-US/docs/Glossary/TURN)
+- [Type](https://developer.mozilla.org/en-US/docs/Glossary/Type)
+- [Type coercion](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion)
+- [Type conversion](https://developer.mozilla.org/en-US/docs/Glossary/Type_conversion)
+- [TypeScript](https://developer.mozilla.org/en-US/docs/Glossary/TypeScript)
+- [UAAG](https://developer.mozilla.org/en-US/docs/Glossary/UAAG)
+- [UDP (*User Datagram Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/UDP)
+- [UI](https://developer.mozilla.org/en-US/docs/Glossary/UI)
+- [Undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+- [Unicode](https://developer.mozilla.org/en-US/docs/Glossary/Unicode)
+- [Unix time](https://developer.mozilla.org/en-US/docs/Glossary/Unix_time)
+- [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI)
+- [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL)
+- [URN](https://developer.mozilla.org/en-US/docs/Glossary/URN)
+- [Usenet](https://developer.mozilla.org/en-US/docs/Glossary/Usenet)
+- [User agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)
+- [UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/UTF-8)
+- [UTF-16](https://developer.mozilla.org/en-US/docs/Glossary/UTF-16)
+- [UUID](https://developer.mozilla.org/en-US/docs/Glossary/UUID)
+- [UX](https://developer.mozilla.org/en-US/docs/Glossary/UX)
+- [Validator](https://developer.mozilla.org/en-US/docs/Glossary/Validator)
+- [Value](https://developer.mozilla.org/en-US/docs/Glossary/Value)
+- [Variable](https://developer.mozilla.org/en-US/docs/Glossary/Variable)
+- [Vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_prefix)
+- [Viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)
+- [Visual viewport](https://developer.mozilla.org/en-US/docs/Glossary/Visual_viewport)
+- [Void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)
+- [VoIP](https://developer.mozilla.org/en-US/docs/Glossary/VoIP)
+- [W3C](https://developer.mozilla.org/en-US/docs/Glossary/W3C)
+- [WAI](https://developer.mozilla.org/en-US/docs/Glossary/WAI)
+- [WCAG](https://developer.mozilla.org/en-US/docs/Glossary/WCAG)
+- [Web performance](https://developer.mozilla.org/en-US/docs/Glossary/Web_performance)
+- [Web server](https://developer.mozilla.org/en-US/docs/Glossary/Web_server)
+- [Web standards](https://developer.mozilla.org/en-US/docs/Glossary/Web_standards)
+- [WebAssembly](https://developer.mozilla.org/en-US/docs/Glossary/WebAssembly)
+- [WebDAV](https://developer.mozilla.org/en-US/docs/Glossary/WebDAV)
+- [WebExtensions](https://developer.mozilla.org/en-US/docs/Glossary/WebExtensions)
+- [WebGL](https://developer.mozilla.org/en-US/docs/Glossary/WebGL)
+- [WebIDL](https://developer.mozilla.org/en-US/docs/Glossary/WebIDL)
+- [WebKit](https://developer.mozilla.org/en-US/docs/Glossary/WebKit)
+- [WebM](https://developer.mozilla.org/en-US/docs/Glossary/WebM)
+- [WebP](https://developer.mozilla.org/en-US/docs/Glossary/WebP)
+- [WebRTC](https://developer.mozilla.org/en-US/docs/Glossary/WebRTC)
+- [WebSockets](https://developer.mozilla.org/en-US/docs/Glossary/WebSockets)
+- [WebVTT](https://developer.mozilla.org/en-US/docs/Glossary/WebVTT)
+- [WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)
+- [Whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace)
+- [WindowProxy](https://developer.mozilla.org/en-US/docs/Glossary/WindowProxy)
+- [World Wide Web](https://developer.mozilla.org/en-US/docs/Glossary/World_Wide_Web)
+- [Wrapper](https://developer.mozilla.org/en-US/docs/Glossary/Wrapper)
+- [XFormsDeprecated](https://developer.mozilla.org/en-US/docs/Glossary/XFormsDeprecated)
+- [XHTML](https://developer.mozilla.org/en-US/docs/Glossary/XHTML)
+- [XInclude](https://developer.mozilla.org/en-US/docs/Glossary/XInclude)
+- [XLink](https://developer.mozilla.org/en-US/docs/Glossary/XLink)
+- [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML)
+- [XMLHttpRequest (*XHR*)](https://developer.mozilla.org/en-US/docs/Glossary/XMLHttpRequest_(XHR))
+- [XPath](https://developer.mozilla.org/en-US/docs/Glossary/XPath)
+- [XQuery](https://developer.mozilla.org/en-US/docs/Glossary/XQuery)
+- [XSLT](https://developer.mozilla.org/en-US/docs/Glossary/XSLT)
+- [Zstandard compression](https://developer.mozilla.org/en-US/docs/Glossary/Zstandard_compression)

skills/web-coder/references/html-markup.md

@@ -0,0 +1,387 @@
+# HTML & Markup Reference
+
+Comprehensive reference for HTML5, markup languages, and document structure.
+
+## Core Concepts
+
+### HTML (HyperText Markup Language)
+The standard markup language for creating web pages and web applications.
+
+**Related Terms**: HTML5, XHTML, Markup, Semantic HTML
+
+### Elements
+Building blocks of HTML documents. Each element has opening/closing tags (except void elements).
+
+**Common Elements**:
+- `<div>` - Generic container
+- `<span>` - Inline container
+- `<article>` - Self-contained content
+- `<section>` - Thematic grouping
+- `<nav>` - Navigation links
+- `<header>` - Introductory content
+- `<footer>` - Footer content
+- `<main>` - Main content
+- `<aside>` - Complementary content
+
+### Attributes
+Properties that provide additional information about HTML elements.
+
+**Common Attributes**:
+- `id` - Unique identifier
+- `class` - CSS class name(s)
+- `src` - Source URL for images/scripts
+- `href` - Hyperlink reference
+- `alt` - Alternative text
+- `title` - Advisory title
+- `data-*` - Custom data attributes
+- `aria-*` - Accessibility attributes
+
+### Void Elements
+Elements that cannot have content and don't have closing tags.
+
+**Examples**: `<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`, `<link>`
+
+## Semantic HTML
+
+### What is Semantic HTML?
+HTML that clearly describes its meaning to both the browser and the developer.
+
+**Benefits**:
+- Improved accessibility
+- Better SEO
+- Easier maintenance
+- Built-in meaning and structure
+
+### Semantic Elements
+
+| Element | Purpose | When to Use |
+|---------|---------|-------------|
+| `<article>` | Self-contained composition | Blog posts, news articles |
+| `<section>` | Thematic grouping of content | Chapters, tabbed content |
+| `<nav>` | Navigation links | Main menu, breadcrumbs |
+| `<aside>` | Tangential content | Sidebars, related links |
+| `<header>` | Introductory content | Page/section headers |
+| `<footer>` | Footer content | Copyright, contact info |
+| `<main>` | Main content | Primary page content |
+| `<figure>` | Self-contained content | Images with captions |
+| `<figcaption>` | Caption for figure | Image descriptions |
+| `<time>` | Date/time | Publishing dates |
+| `<mark>` | Highlighted text | Search results |
+| `<details>` | Expandable details | Accordions, FAQs |
+| `<summary>` | Summary for details | Accordion headers |
+
+### Example: Semantic Document Structure
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Semantic Page Example</title>
+</head>
+<body>
+  <header>
+    <h1>Site Title</h1>
+    <nav aria-label="Main navigation">
+      <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+      </ul>
+    </nav>
+  </header>
+  
+  <main>
+    <article>
+      <header>
+        <h2>Article Title</h2>
+        <time datetime="2026-03-04">March 4, 2026</time>
+      </header>
+      <p>Article content goes here...</p>
+      <footer>
+        <p>Author: John Doe</p>
+      </footer>
+    </article>
+  </main>
+  
+  <aside>
+    <h3>Related Content</h3>
+    <ul>
+      <li><a href="/related">Related Article</a></li>
+    </ul>
+  </aside>
+  
+  <footer>
+    <p>&copy; 2026 Company Name</p>
+  </footer>
+</body>
+</html>
+```
+
+## Document Structure
+
+### Doctype
+Declares the document type and HTML version.
+
+```html
+<!DOCTYPE html>
+```
+
+### Head Section
+Contains metadata about the document.
+
+**Common Elements**:
+- `<meta>` - Metadata (charset, viewport, description)
+- `<title>` - Page title (shown in browser tab)
+- `<link>` - External resources (stylesheets, icons)
+- `<script>` - JavaScript files
+- `<style>` - Inline CSS
+
+### Metadata Examples
+
+```html
+<head>
+  <!-- Character encoding -->
+  <meta charset="UTF-8">
+  
+  <!-- Responsive viewport -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
+  <!-- SEO metadata -->
+  <meta name="description" content="Page description for search engines">
+  <meta name="keywords" content="html, web, development">
+  <meta name="author" content="Author Name">
+  
+  <!-- Open Graph (social media) -->
+  <meta property="og:title" content="Page Title">
+  <meta property="og:description" content="Page description">
+  <meta property="og:image" content="https://example.com/image.jpg">
+  
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="/favicon.png">
+  
+  <!-- Stylesheet -->
+  <link rel="stylesheet" href="styles.css">
+  
+  <!-- Preload critical resources -->
+  <link rel="preload" href="critical.css" as="style">
+  <link rel="preconnect" href="https://api.example.com">
+</head>
+```
+
+## Forms and Input
+
+### Form Elements
+
+```html
+<form action="/submit" method="POST">
+  <!-- Text input -->
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name" required>
+  
+  <!-- Email input -->
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" required>
+  
+  <!-- Password input -->
+  <label for="password">Password:</label>
+  <input type="password" id="password" name="password" minlength="8" required>
+  
+  <!-- Select dropdown -->
+  <label for="country">Country:</label>
+  <select id="country" name="country">
+    <option value="">Select...</option>
+    <option value="us">United States</option>
+    <option value="uk">United Kingdom</option>
+  </select>
+  
+  <!-- Textarea -->
+  <label for="message">Message:</label>
+  <textarea id="message" name="message" rows="4"></textarea>
+  
+  <!-- Checkbox -->
+  <label>
+    <input type="checkbox" name="terms" required>
+    I agree to the terms
+  </label>
+  
+  <!-- Radio buttons -->
+  <fieldset>
+    <legend>Choose an option:</legend>
+    <label>
+      <input type="radio" name="option" value="a">
+      Option A
+    </label>
+    <label>
+      <input type="radio" name="option" value="b">
+      Option B
+    </label>
+  </fieldset>
+  
+  <!-- Submit button -->
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Input Types
+
+| Type | Purpose | Example |
+|------|---------|---------|
+| `text` | Single-line text | `<input type="text">` |
+| `email` | Email address | `<input type="email">` |
+| `password` | Password field | `<input type="password">` |
+| `number` | Numeric input | `<input type="number" min="0" max="100">` |
+| `tel` | Telephone number | `<input type="tel">` |
+| `url` | URL | `<input type="url">` |
+| `date` | Date picker | `<input type="date">` |
+| `time` | Time picker | `<input type="time">` |
+| `file` | File upload | `<input type="file" accept="image/*">` |
+| `checkbox` | Checkbox | `<input type="checkbox">` |
+| `radio` | Radio button | `<input type="radio">` |
+| `range` | Slider | `<input type="range" min="0" max="100">` |
+| `color` | Color picker | `<input type="color">` |
+| `search` | Search field | `<input type="search">` |
+
+## Related Markup Languages
+
+### XML (Extensible Markup Language)
+A markup language for encoding documents in a format that is both human-readable and machine-readable.
+
+**Key Differences from HTML**:
+- All tags must be properly closed
+- Tags are case-sensitive
+- Attributes must be quoted
+- Custom tag names allowed
+
+### XHTML (Extensible HyperText Markup Language)
+HTML reformulated as XML. Stricter syntax rules than HTML.
+
+### MathML (Mathematical Markup Language)
+Markup language for displaying mathematical notation on the web.
+
+```html
+<math>
+  <mrow>
+    <msup>
+      <mi>x</mi>
+      <mn>2</mn>
+    </msup>
+    <mo>+</mo>
+    <mn>1</mn>
+  </mrow>
+</math>
+```
+
+### SVG (Scalable Vector Graphics)
+XML-based markup language for describing two-dimensional vector graphics.
+
+```html
+<svg width="100" height="100">
+  <circle cx="50" cy="50" r="40" fill="blue" />
+</svg>
+```
+
+## Character Encoding and References
+
+### Character Encoding
+Defines how characters are represented as bytes.
+
+**UTF-8**: Universal character encoding standard (recommended)
+
+```html
+<meta charset="UTF-8">
+```
+
+### Character References
+Ways to represent special characters in HTML.
+
+**Named Entities**:
+- `&lt;` - Less than (<)
+- `&gt;` - Greater than (>)
+- `&amp;` - Ampersand (&)
+- `&quot;` - Quote (")
+- `&apos;` - Apostrophe (')
+- `&nbsp;` - Non-breaking space
+- `&copy;` - Copyright (©)
+
+**Numeric Entities**:
+- `&#60;` - Less than (<)
+- `&#169;` - Copyright (©)
+- `&#8364;` - Euro (€)
+
+## Block vs Inline Content
+
+### Block-Level Content
+Elements that create a "block" in the layout, starting on a new line.
+
+**Examples**: `<div>`, `<p>`, `<h1>`-`<h6>`, `<article>`, `<section>`, `<header>`, `<footer>`, `<nav>`, `<aside>`, `<ul>`, `<ol>`, `<li>`
+
+### Inline-Level Content
+Elements that don't start on a new line and only take up as much width as necessary.
+
+**Examples**: `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, `<code>`, `<abbr>`, `<cite>`
+
+## Best Practices
+
+### Do's
+- ✅ Use semantic HTML elements
+- ✅ Include proper document structure (DOCTYPE, html, head, body)
+- ✅ Set character encoding to UTF-8
+- ✅ Use descriptive `alt` attributes for images
+- ✅ Associate labels with form inputs
+- ✅ Use heading hierarchy properly (h1 → h2 → h3)
+- ✅ Validate HTML with W3C validator
+- ✅ Use proper ARIA roles when needed
+- ✅ Include meta viewport for responsive design
+
+### Don'ts
+- ❌ Use `<div>` when a semantic element exists
+- ❌ Skip heading levels (h1 → h3)
+- ❌ Use tables for layout
+- ❌ Forget to close tags (except void elements)
+- ❌ Use inline styles extensively
+- ❌ Omit `alt` attribute on images
+- ❌ Create forms without labels
+- ❌ Use deprecated elements (`<font>`, `<center>`, `<blink>`)
+
+## Glossary Terms from MDN
+
+**Key Terms Covered**:
+- Abstraction
+- Accessibility tree
+- Accessible description
+- Accessible name
+- Attribute
+- Block-level content
+- Breadcrumb
+- Browsing context
+- Character
+- Character encoding
+- Character reference
+- Character set
+- Doctype
+- Document environment
+- Element
+- Entity
+- Head
+- HTML
+- HTML5
+- Hyperlink
+- Hypertext
+- Inline-level content
+- Markup
+- MathML
+- Metadata
+- Semantics
+- SVG
+- Tag
+- Void element
+- XHTML
+- XML
+
+## Additional Resources
+
+- [MDN HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML)
+- [W3C HTML Specification](https://html.spec.whatwg.org/)
+- [HTML5 Doctor](http://html5doctor.com/)
+- [W3C Markup Validation Service](https://validator.w3.org/)

skills/web-coder/references/http-networking.md

@@ -0,0 +1,538 @@
+# HTTP & Networking Reference
+
+Comprehensive reference for HTTP protocol, networking concepts, and web communication.
+
+## HTTP (HyperText Transfer Protocol)
+
+Protocol for transferring hypertext between client and server. Foundation of data communication on the web.
+
+### HTTP Versions
+
+- **HTTP/1.1** (1997): Text-based, persistent connections, pipelining
+- **HTTP/2** (2015): Binary protocol, multiplexing, server push, header compression
+- **HTTP/3** (2022): Based on QUIC (UDP), improved performance, better handling of packet loss
+
+## Request Methods
+
+| Method | Purpose | Idempotent | Safe | Cacheable |
+|--------|---------|------------|------|-----------|
+| GET | Retrieve resource | Yes | Yes | Yes |
+| POST | Create resource | No | No | Rarely |
+| PUT | Update/replace resource | Yes | No | No |
+| PATCH | Partial update | No | No | No |
+| DELETE | Delete resource | Yes | No | No |
+| HEAD | Like GET but no body | Yes | Yes | Yes |
+| OPTIONS | Get allowed methods | Yes | Yes | No |
+| CONNECT | Establish tunnel | No | No | No |
+| TRACE | Echo request | Yes | Yes | No |
+
+**Safe**: Doesn't modify server state  
+**Idempotent**: Multiple identical requests have same effect as single request
+
+## Status Codes
+
+### 1xx Informational
+
+| Code | Message | Meaning |
+|------|---------|---------|
+| 100 | Continue | Client should continue request |
+| 101 | Switching Protocols | Server switching protocols |
+
+### 2xx Success
+
+| Code | Message | Meaning |
+|------|---------|---------|
+| 200 | OK | Request succeeded |
+| 201 | Created | Resource created |
+| 202 | Accepted | Accepted but not processed |
+| 204 | No Content | Success but no content to return |
+| 206 | Partial Content | Partial resource (range request) |
+
+### 3xx Redirection
+
+| Code | Message | Meaning |
+|------|---------|---------|
+| 301 | Moved Permanently | Resource permanently moved |
+| 302 | Found | Temporary redirect |
+| 303 | See Other | Response at different URI |
+| 304 | Not Modified | Resource not modified (cache) |
+| 307 | Temporary Redirect | Like 302 but keep method |
+| 308 | Permanent Redirect | Like 301 but keep method |
+
+### 4xx Client Errors
+
+| Code | Message | Meaning |
+|------|---------|---------|
+| 400 | Bad Request | Invalid syntax |
+| 401 | Unauthorized | Authentication required |
+| 403 | Forbidden | Access denied |
+| 404 | Not Found | Resource not found |
+| 405 | Method Not Allowed | Method not supported |
+| 408 | Request Timeout | Request took too long |
+| 409 | Conflict | Request conflicts with state |
+| 410 | Gone | Resource permanently gone |
+| 413 | Payload Too Large | Request body too large |
+| 414 | URI Too Long | URI too long |
+| 415 | Unsupported Media Type | Media type not supported |
+| 422 | Unprocessable Entity | Semantic errors |
+| 429 | Too Many Requests | Rate limit exceeded |
+
+### 5xx Server Errors
+
+| Code | Message | Meaning |
+|------|---------|---------|
+| 500 | Internal Server Error | Generic server error |
+| 501 | Not Implemented | Method not supported |
+| 502 | Bad Gateway | Invalid response from upstream |
+| 503 | Service Unavailable | Server temporarily unavailable |
+| 504 | Gateway Timeout | Upstream timeout |
+| 505 | HTTP Version Not Supported | HTTP version not supported |
+
+## HTTP Headers
+
+### Request Headers
+
+```http
+GET /api/users HTTP/1.1
+Host: example.com
+User-Agent: Mozilla/5.0
+Accept: application/json, text/plain
+Accept-Language: en-US,en;q=0.9
+Accept-Encoding: gzip, deflate, br
+Authorization: Bearer token123
+Cookie: sessionId=abc123
+If-None-Match: "etag-value"
+If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
+Origin: https://example.com
+Referer: https://example.com/page
+```
+
+**Common Request Headers**:
+- `Accept`: Media types client accepts
+- `Accept-Encoding`: Encoding formats (compression)
+- `Accept-Language`: Preferred languages
+- `Authorization`: Authentication credentials
+- `Cache-Control`: Caching directives
+- `Cookie`: Cookies sent to server
+- `Content-Type`: Type of request body
+- `Host`: Target host and port
+- `If-Modified-Since`: Conditional request
+- `If-None-Match`: Conditional request (ETag)
+- `Origin`: Origin of request (CORS)
+- `Referer`: Previous page URL
+- `User-Agent`: Client information
+
+### Response Headers
+
+```http
+HTTP/1.1 200 OK
+Date: Mon, 04 Mar 2026 12:00:00 GMT
+Server: nginx/1.18.0
+Content-Type: application/json; charset=utf-8
+Content-Length: 348
+Content-Encoding: gzip
+Cache-Control: public, max-age=3600
+ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
+Last-Modified: Mon, 04 Mar 2026 11:00:00 GMT
+Access-Control-Allow-Origin: *
+Set-Cookie: sessionId=xyz789; HttpOnly; Secure; SameSite=Strict
+Strict-Transport-Security: max-age=31536000; includeSubDomains
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+```
+
+**Common Response Headers**:
+- `Access-Control-*`: CORS headers
+- `Cache-Control`: Caching directives
+- `Content-Encoding`: Content compression
+- `Content-Length`: Body size in bytes
+- `Content-Type`: Media type of body
+- `Date`: Response date/time
+- `ETag`: Resource version identifier
+- `Expires`: Expiration date
+- `Last-Modified`: Last modification date
+- `Location`: Redirect URL
+- `Server`: Server software
+- `Set-Cookie`: Set cookies
+- `Strict-Transport-Security`: HSTS
+- `X-Content-Type-Options`: MIME type sniffing
+- `X-Frame-Options`: Clickjacking protection
+
+## CORS (Cross-Origin Resource Sharing)
+
+Mechanism to allow cross-origin requests.
+
+### Simple Requests
+
+Automatically allowed if:
+- Method: GET, HEAD, or POST
+- Safe headers only
+- Content-Type: `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`
+
+### Preflight Requests
+
+For complex requests, browser sends OPTIONS request first:
+
+```http
+OPTIONS /api/users HTTP/1.1
+Origin: https://example.com
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: Content-Type
+```
+
+```http
+HTTP/1.1 204 No Content
+Access-Control-Allow-Origin: https://example.com
+Access-Control-Allow-Methods: GET, POST, PUT, DELETE
+Access-Control-Allow-Headers: Content-Type, Authorization
+Access-Control-Allow-Credentials: true
+Access-Control-Max-Age: 86400
+```
+
+### CORS Headers
+
+**Request**:
+- `Origin`: Request origin
+- `Access-Control-Request-Method`: Intended method
+- `Access-Control-Request-Headers`: Intended headers
+
+**Response**:
+- `Access-Control-Allow-Origin`: Allowed origins (* or specific)
+- `Access-Control-Allow-Methods`: Allowed methods
+- `Access-Control-Allow-Headers`: Allowed headers
+- `Access-Control-Allow-Credentials`: Allow credentials
+- `Access-Control-Max-Age`: Preflight cache duration
+- `Access-Control-Expose-Headers`: Headers accessible to client
+
+## Caching
+
+### Cache-Control Directives
+
+**Request Directives**:
+- `no-cache`: Validate with server before using cache
+- `no-store`: Don't cache at all
+- `max-age=N`: Max age in seconds
+- `max-stale=N`: Accept stale response up to N seconds
+- `min-fresh=N`: Fresh for at least N seconds
+- `only-if-cached`: Use only cached response
+
+**Response Directives**:
+- `public`: Cacheable by any cache
+- `private`: Cacheable by browser only
+- `no-cache`: Must validate before use
+- `no-store`: Don't cache
+- `max-age=N`: Fresh for N seconds
+- `s-maxage=N`: Max age for shared caches
+- `must-revalidate`: Must validate when stale
+- `immutable`: Content won't change
+
+### Examples
+
+```http
+# Cache for 1 hour
+Cache-Control: public, max-age=3600
+
+# Don't cache
+Cache-Control: no-store
+
+# Cache in browser only, revalidate after 1 hour
+Cache-Control: private, max-age=3600, must-revalidate
+
+# Cache forever (with versioned URLs)
+Cache-Control: public, max-age=31536000, immutable
+```
+
+### Conditional Requests
+
+Use ETags or Last-Modified for efficient caching:
+
+```http
+GET /resource HTTP/1.1
+If-None-Match: "etag-value"
+If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
+```
+
+If not modified:
+```http
+HTTP/1.1 304 Not Modified
+ETag: "etag-value"
+```
+
+## Cookies
+
+```http
+# Server sets cookie
+Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600
+
+# Client sends cookie
+Cookie: sessionId=abc123; userId=456
+```
+
+### Cookie Attributes
+
+- `Path=/`: Cookie path scope
+- `Domain=example.com`: Cookie domain scope
+- `Max-Age=N`: Expire after N seconds
+- `Expires=date`: Expire at specific date
+- `Secure`: Only sent over HTTPS
+- `HttpOnly`: Not accessible via JavaScript
+- `SameSite=Strict|Lax|None`: CSRF protection
+
+## REST (Representational State Transfer)
+
+Architectural style for web services.
+
+### REST Principles
+
+1. **Client-Server**: Separation of concerns
+2. **Stateless**: Each request contains all needed info
+3. **Cacheable**: Responses must define cacheability
+4. **Uniform Interface**: Standardized communication
+5. **Layered System**: Client doesn't know if connected to end server
+6. **Code on Demand** (optional): Server can send executable code
+
+### RESTful API Design
+
+```
+GET    /users           # List users
+GET    /users/123       # Get user 123
+POST   /users           # Create user
+PUT    /users/123       # Update user 123 (full)
+PATCH  /users/123       # Update user 123 (partial)
+DELETE /users/123       # Delete user 123
+
+GET    /users/123/posts # List posts by user 123
+GET    /posts?author=123 # Alternative: filter posts
+```
+
+### HTTP Content Negotiation
+
+```http
+# Client requests JSON
+Accept: application/json
+
+# Server responds with JSON
+Content-Type: application/json
+
+# Client can accept multiple formats
+Accept: application/json, application/xml;q=0.9, text/plain;q=0.8
+```
+
+## Networking Fundamentals
+
+### TCP (Transmission Control Protocol)
+
+Connection-oriented protocol ensuring reliable data delivery.
+
+**TCP Handshake** (3-way):
+1. Client → Server: SYN
+2. Server → Client: SYN-ACK
+3. Client → Server: ACK
+
+**Features**:
+- Reliable delivery (retransmission)
+- Ordered data
+- Error checking
+- Flow control
+- Connection-oriented
+
+### UDP (User Datagram Protocol)
+
+Connectionless protocol for fast data transmission.
+
+**Features**:
+- Fast (no handshake)
+- No guaranteed delivery
+- No ordering
+- Lower overhead
+- Used for streaming, gaming, DNS
+
+### DNS (Domain Name System)
+
+Translates domain names to IP addresses.
+
+```
+example.com → 93.184.216.34
+```
+
+**DNS Record Types**:
+- `A`: IPv4 address
+- `AAAA`: IPv6 address
+- `CNAME`: Canonical name (alias)
+- `MX`: Mail exchange
+- `TXT`: Text record
+- `NS`: Name server
+
+### IP Addressing
+
+**IPv4**: `192.168.1.1` (32-bit)  
+**IPv6**: `2001:0db8:85a3:0000:0000:8a2e:0370:7334` (128-bit)
+
+### Ports
+
+- **Well-known ports** (0-1023):
+  - 80: HTTP
+  - 443: HTTPS
+  - 21: FTP
+  - 22: SSH
+  - 25: SMTP
+  - 53: DNS
+- **Registered ports** (1024-49151)
+- **Dynamic ports** (49152-65535)
+
+### Bandwidth & Latency
+
+**Bandwidth**: Amount of data transferred per unit time (Mbps, Gbps)  
+**Latency**: Time delay in data transmission (milliseconds)
+
+**Round Trip Time (RTT)**: Time for request to reach server and response to return
+
+## WebSockets
+
+Full-duplex communication over single TCP connection.
+
+```javascript
+// Client
+const ws = new WebSocket('wss://example.com/socket');
+
+ws.onopen = () => {
+  console.log('Connected');
+  ws.send('Hello server!');
+};
+
+ws.onmessage = (event) => {
+  console.log('Received:', event.data);
+};
+
+ws.onerror = (error) => {
+  console.error('Error:', error);
+};
+
+ws.onclose = () => {
+  console.log('Disconnected');
+};
+
+// Close connection
+ws.close();
+```
+
+**Use Cases**: Chat, real-time updates, gaming, collaborative editing
+
+## Server-Sent Events (SSE)
+
+Server pushes updates to client over HTTP.
+
+```javascript
+// Client
+const eventSource = new EventSource('/events');
+
+eventSource.onmessage = (event) => {
+  console.log('New message:', event.data);
+};
+
+eventSource.addEventListener('custom-event', (event) => {
+  console.log('Custom event:', event.data);
+});
+
+eventSource.onerror = (error) => {
+  console.error('Error:', error);
+};
+
+// Close connection
+eventSource.close();
+```
+
+```http
+// Server response
+Content-Type: text/event-stream
+Cache-Control: no-cache
+Connection: keep-alive
+
+data: First message
+
+data: Second message
+
+event: custom-event
+data: Custom message data
+```
+
+## Best Practices
+
+### Do's
+- ✅ Use HTTPS everywhere
+- ✅ Implement proper caching strategies
+- ✅ Use appropriate HTTP methods
+- ✅ Return meaningful status codes
+- ✅ Implement rate limiting
+- ✅ Use compression (gzip, brotli)
+- ✅ Set proper CORS headers
+- ✅ Implement proper error handling
+- ✅ Use connection pooling
+- ✅ Monitor network performance
+
+### Don'ts
+- ❌ Use HTTP for sensitive data
+- ❌ Ignore CORS security
+- ❌ Return wrong status codes (200 for errors)
+- ❌ Cache sensitive data
+- ❌ Send large uncompressed responses
+- ❌ Skip SSL/TLS certificate validation
+- ❌ Store credentials in URLs
+- ❌ Expose internal server details in errors
+- ❌ Use synchronous requests
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Ajax
+- ALPN
+- Bandwidth
+- Cacheable
+- Cookie
+- CORS
+- CORS-safelisted request header
+- CORS-safelisted response header
+- Crawler
+- Effective connection type
+- Fetch directive
+- Fetch metadata request header
+- Forbidden request header
+- Forbidden response header name
+- FTP
+- General header
+- HOL blocking
+- HTTP
+- HTTP content
+- HTTP header
+- HTTP/2
+- HTTP/3
+- HTTPS
+- HTTPS RR
+- Idempotent
+- IMAP
+- Latency
+- Packet
+- POP3
+- Proxy server
+- QUIC
+- Rate limit
+- Request header
+- Response header
+- REST
+- Round Trip Time (RTT)
+- RTCP
+- RTP
+- Safe (HTTP Methods)
+- SMTP
+- TCP
+- TCP handshake
+- TCP slow start
+- UDP
+- WebSockets
+
+## Additional Resources
+
+- [MDN HTTP Guide](https://developer.mozilla.org/en-US/docs/Web/HTTP)
+- [HTTP/2 Spec](https://http2.github.io/)
+- [HTTP/3 Explained](https://http3-explained.haxx.se/)
+- [REST API Tutorial](https://restfulapi.net/)

skills/web-coder/references/javascript-programming.md

@@ -0,0 +1,807 @@
+# JavaScript & Programming Reference
+
+Comprehensive reference for JavaScript, ECMAScript, programming concepts, and modern JS patterns.
+
+## Core Concepts
+
+### JavaScript
+High-level, interpreted programming language that conforms to the ECMAScript specification. Primary language for web development alongside HTML and CSS.
+
+**Key Characteristics**:
+- Dynamically typed
+- Prototype-based inheritance
+- First-class functions
+- Event-driven
+- Asynchronous execution
+
+### ECMAScript
+The standardized specification that JavaScript implements.
+
+**Major Versions**:
+- **ES5** (2009): Strict mode, JSON support
+- **ES6/ES2015**: Classes, arrow functions, promises, modules
+- **ES2016+**: Async/await, optional chaining, nullish coalescing
+
+## Data Types
+
+### Primitive Types
+
+```javascript
+// String
+let name = "John";
+let greeting = 'Hello';
+let template = `Hello, ${name}!`; // Template literal
+
+// Number
+let integer = 42;
+let float = 3.14;
+let negative = -10;
+let scientific = 1e6; // 1000000
+
+// BigInt (for very large integers)
+let big = 9007199254740991n;
+
+// Boolean
+let isTrue = true;
+let isFalse = false;
+
+// Undefined (declared but not assigned)
+let undefined_var;
+console.log(undefined_var); // undefined
+
+// Null (intentional absence of value)
+let empty = null;
+
+// Symbol (unique identifier)
+let sym = Symbol('description');
+```
+
+### Type Checking
+
+```javascript
+typeof "hello"; // "string"
+typeof 42; // "number"
+typeof true; // "boolean"
+typeof undefined; // "undefined"
+typeof null; // "object" (historical bug)
+typeof Symbol(); // "symbol"
+typeof {}; // "object"
+typeof []; // "object"
+typeof function() {}; // "function"
+
+// Better array check
+Array.isArray([]); // true
+
+// Null check
+value === null; // true if null
+```
+
+### Type Coercion and Conversion
+
+```javascript
+// Implicit coercion
+"5" + 2; // "52" (string concatenation)
+"5" - 2; // 3 (numeric subtraction)
+"5" * "2"; // 10 (numeric multiplication)
+!!"value"; // true (boolean conversion)
+
+// Explicit conversion
+String(123); // "123"
+Number("123"); // 123
+Number("abc"); // NaN
+Boolean(0); // false
+Boolean(1); // true
+parseInt("123px"); // 123
+parseFloat("3.14"); // 3.14
+```
+
+### Truthy and Falsy Values
+
+**Falsy values** (evaluate to false):
+- `false`
+- `0`, `-0`
+- `""` (empty string)
+- `null`
+- `undefined`
+- `NaN`
+
+**Everything else is truthy**, including:
+- `"0"` (string)
+- `"false"` (string)
+- `[]` (empty array)
+- `{}` (empty object)
+- `function() {}` (empty function)
+
+## Variables and Constants
+
+```javascript
+// var (function-scoped, hoisted - avoid in modern code)
+var oldStyle = "avoid this";
+
+// let (block-scoped, can be reassigned)
+let count = 0;
+count = 1; // ✓ works
+
+// const (block-scoped, cannot be reassigned)
+const MAX = 100;
+MAX = 200; // ✗ TypeError
+
+// const with objects/arrays (content can change)
+const person = { name: "John" };
+person.name = "Jane"; // ✓ works (mutating object)
+person = {}; // ✗ TypeError (reassigning variable)
+```
+
+## Functions
+
+### Function Declaration
+
+```javascript
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+```
+
+### Function Expression
+
+```javascript
+const greet = function(name) {
+  return `Hello, ${name}!`;
+};
+```
+
+### Arrow Functions
+
+```javascript
+// Basic syntax
+const add = (a, b) => a + b;
+
+// With block body
+const multiply = (a, b) => {
+  const result = a * b;
+  return result;
+};
+
+// Single parameter (parentheses optional)
+const square = x => x * x;
+
+// No parameters
+const getRandom = () => Math.random();
+
+// Implicit return of object (wrap in parentheses)
+const makePerson = (name, age) => ({ name, age });
+```
+
+### First-Class Functions
+
+Functions are values that can be:
+- Assigned to variables
+- Passed as arguments
+- Returned from other functions
+
+```javascript
+// Assign to variable
+const fn = function() { return 42; };
+
+// Pass as argument
+function execute(callback) {
+  return callback();
+}
+execute(() => console.log("Hello"));
+
+// Return from function
+function createMultiplier(factor) {
+  return function(x) {
+    return x * factor;
+  };
+}
+const double = createMultiplier(2);
+double(5); // 10
+```
+
+### Closures
+
+Functions that remember their lexical scope:
+
+```javascript
+function createCounter() {
+  let count = 0; // Private variable
+  
+  return {
+    increment() {
+      count++;
+      return count;
+    },
+    decrement() {
+      count--;
+      return count;
+    },
+    getCount() {
+      return count;
+    }
+  };
+}
+
+const counter = createCounter();
+counter.increment(); // 1
+counter.increment(); // 2
+counter.decrement(); // 1
+counter.getCount(); // 1
+```
+
+### Callback Functions
+
+Function passed as an argument to be executed later:
+
+```javascript
+// Array methods use callbacks
+const numbers = [1, 2, 3, 4, 5];
+
+numbers.forEach(num => console.log(num));
+
+const doubled = numbers.map(num => num * 2);
+
+const evens = numbers.filter(num => num % 2 === 0);
+
+const sum = numbers.reduce((acc, num) => acc + num, 0);
+```
+
+### IIFE (Immediately Invoked Function Expression)
+
+```javascript
+(function() {
+  // Code here runs immediately
+  console.log("IIFE executed");
+})();
+
+// With parameters
+(function(name) {
+  console.log(`Hello, ${name}`);
+})("World");
+
+// Arrow function IIFE
+(() => {
+  console.log("Arrow IIFE");
+})();
+```
+
+## Objects
+
+### Object Creation
+
+```javascript
+// Object literal
+const person = {
+  name: "John",
+  age: 30,
+  greet() {
+    return `Hello, I'm ${this.name}`;
+  }
+};
+
+// Constructor function
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+const john = new Person("John", 30);
+
+// Object.create
+const proto = { greet() { return "Hello"; } };
+const obj = Object.create(proto);
+```
+
+### Accessing Properties
+
+```javascript
+const obj = { name: "John", age: 30 };
+
+// Dot notation
+obj.name; // "John"
+
+// Bracket notation
+obj["age"]; // 30
+const key = "name";
+obj[key]; // "John"
+
+// Optional chaining (ES2020)
+obj.address?.city; // undefined (no error if address doesn't exist)
+obj.getName?.(); // undefined (no error if getName doesn't exist)
+```
+
+### Object Methods
+
+```javascript
+const person = { name: "John", age: 30, city: "NYC" };
+
+// Get keys
+Object.keys(person); // ["name", "age", "city"]
+
+// Get values
+Object.values(person); // ["John", 30, "NYC"]
+
+// Get entries
+Object.entries(person); // [["name", "John"], ["age", 30], ["city", "NYC"]]
+
+// Assign (merge objects)
+const extended = Object.assign({}, person, { country: "USA" });
+
+// Spread operator (modern alternative)
+const merged = { ...person, country: "USA" };
+
+// Freeze (make immutable)
+Object.freeze(person);
+person.age = 31; // Silently fails (throws in strict mode)
+
+// Seal (prevent adding/removing properties)
+Object.seal(person);
+```
+
+### Destructuring
+
+```javascript
+// Object destructuring
+const person = { name: "John", age: 30, city: "NYC" };
+const { name, age } = person;
+
+// With different variable names
+const { name: personName, age: personAge } = person;
+
+// With defaults
+const { name, country = "USA" } = person;
+
+// Nested destructuring
+const user = { profile: { email: "john@example.com" } };
+const { profile: { email } } = user;
+
+// Array destructuring
+const numbers = [1, 2, 3, 4, 5];
+const [first, second, ...rest] = numbers;
+// first = 1, second = 2, rest = [3, 4, 5]
+
+// Skip elements
+const [a, , c] = numbers;
+// a = 1, c = 3
+```
+
+## Arrays
+
+```javascript
+// Create arrays
+const arr = [1, 2, 3];
+const empty = [];
+const mixed = [1, "two", { three: 3 }, [4]];
+
+// Access elements
+arr[0]; // 1
+arr[arr.length - 1]; // Last element
+arr.at(-1); // 3 (ES2022 - negative indexing)
+
+// Modify arrays
+arr.push(4); // Add to end
+arr.pop(); // Remove from end
+arr.unshift(0); // Add to beginning
+arr.shift(); // Remove from beginning
+arr.splice(1, 2, 'a', 'b'); // Remove 2 elements at index 1, insert 'a', 'b'
+
+// Iteration
+arr.forEach(item => console.log(item));
+for (let item of arr) { console.log(item); }
+for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
+
+// Transformation
+const doubled = arr.map(x => x * 2);
+const evens = arr.filter(x => x % 2 === 0);
+const sum = arr.reduce((acc, x) => acc + x, 0);
+
+// Search
+arr.includes(2); // true
+arr.indexOf(2); // Index or -1
+arr.find(x => x > 2); // First matching element
+arr.findIndex(x => x > 2); // Index of first match
+
+// Test
+arr.some(x => x > 5); // true if any match
+arr.every(x => x > 0); // true if all match
+
+// Sort and reverse
+arr.sort((a, b) => a - b); // Ascending
+arr.reverse(); // Reverse in place
+
+// Combine
+const combined = arr.concat([4, 5]);
+const spread = [...arr, 4, 5];
+
+// Slice (copy portion)
+const portion = arr.slice(1, 3); // Index 1 to 3 (exclusive)
+
+// Flat (flatten nested arrays)
+[[1, 2], [3, 4]].flat(); // [1, 2, 3, 4]
+```
+
+## Control Flow
+
+### Conditionals
+
+```javascript
+// if/else
+if (condition) {
+  // code
+} else if (otherCondition) {
+  // code
+} else {
+  // code
+}
+
+// Ternary operator
+const result = condition ? valueIfTrue : valueIfFalse;
+
+// Switch statement
+switch (value) {
+  case 1:
+    // code
+    break;
+  case 2:
+  case 3:
+    // code for 2 or 3
+    break;
+  default:
+    // default code
+}
+
+// Nullish coalescing (ES2020)
+const value = null ?? "default"; // "default"
+const value = 0 ?? "default"; // 0 (0 is not nullish)
+
+// Logical OR for defaults (pre-ES2020)
+const value = falsy || "default";
+
+// Optional chaining
+const city = user?.address?.city;
+```
+
+### Loops
+
+```javascript
+// for loop
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+
+// while loop
+let i = 0;
+while (i < 10) {
+  console.log(i);
+  i++;
+}
+
+// do-while loop
+do {
+  console.log(i);
+  i++;
+} while (i < 10);
+
+// for...of (iterate values)
+for (const item of array) {
+  console.log(item);
+}
+
+// for...in (iterate keys - avoid for arrays)
+for (const key in object) {
+  console.log(key, object[key]);
+}
+
+// break and continue
+for (let i = 0; i < 10; i++) {
+  if (i === 5) break; // Exit loop
+  if (i === 3) continue; // Skip iteration
+  console.log(i);
+}
+```
+
+## Asynchronous JavaScript
+
+### Callbacks
+
+```javascript
+function fetchData(callback) {
+  setTimeout(() => {
+    callback("Data received");
+  }, 1000);
+}
+
+fetchData(data => console.log(data));
+```
+
+### Promises
+
+```javascript
+// Create promise
+const promise = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    const success = true;
+    if (success) {
+      resolve("Success!");
+    } else {
+      reject("Error!");
+    }
+  }, 1000);
+});
+
+// Use promise
+promise
+  .then(result => console.log(result))
+  .catch(error => console.error(error))
+  .finally(() => console.log("Done"));
+
+// Promise utilities
+Promise.all([promise1, promise2]); // Wait for all
+Promise.race([promise1, promise2]); // First to complete
+Promise.allSettled([promise1, promise2]); // Wait for all (ES2020)
+Promise.any([promise1, promise2]); // First to succeed (ES2021)
+```
+
+### Async/Await
+
+```javascript
+// Async function
+async function fetchData() {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+// Use async function
+fetchData().then(data => console.log(data));
+
+// Top-level await (ES2022, in modules)
+const data = await fetchData();
+```
+
+## Classes
+
+```javascript
+class Person {
+  // Constructor
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+  
+  // Instance method
+  greet() {
+    return `Hello, I'm ${this.name}`;
+  }
+  
+  // Getter
+  get info() {
+    return `${this.name}, ${this.age}`;
+  }
+  
+  // Setter
+  set birthYear(year) {
+    this.age = new Date().getFullYear() - year;
+  }
+  
+  // Static method
+  static species() {
+    return "Homo sapiens";
+  }
+}
+
+// Inheritance
+class Employee extends Person {
+  constructor(name, age, jobTitle) {
+    super(name, age); // Call parent constructor
+    this.jobTitle = jobTitle;
+  }
+  
+  // Override method
+  greet() {
+    return `${super.greet()}, I'm a ${this.jobTitle}`;
+  }
+}
+
+// Usage
+const john = new Person("John", 30);
+john.greet(); // "Hello, I'm John"
+Person.species(); // "Homo sapiens"
+
+const jane = new Employee("Jane", 25, "Developer");
+jane.greet(); // "Hello, I'm Jane, I'm a Developer"
+```
+
+## Modules
+
+### ES6 Modules (ESM)
+
+```javascript
+// Export (math.js)
+export const PI = 3.14159;
+export function add(a, b) {
+  return a + b;
+}
+export default class Calculator {
+  // ...
+}
+
+// Import
+import Calculator, { PI, add } from './math.js';
+import * as math from './math.js';
+import { add as sum } from './math.js'; // Rename
+```
+
+### CommonJS (Node.js)
+
+```javascript
+// Export (math.js)
+module.exports = {
+  add(a, b) {
+    return a + b;
+  }
+};
+
+// Import
+const math = require('./math');
+```
+
+## Error Handling
+
+```javascript
+// Try/catch
+try {
+  // Code that might throw
+  throw new Error("Something went wrong");
+} catch (error) {
+  console.error(error.message);
+} finally {
+  // Always runs
+  console.log("Cleanup");
+}
+
+// Custom errors
+class ValidationError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ValidationError";
+  }
+}
+
+throw new ValidationError("Invalid input");
+```
+
+## Best Practices
+
+### Do's
+- ✅ Use `const` by default, `let` when needed
+- ✅ Use strict mode (`'use strict';`)
+- ✅ Use arrow functions for callbacks
+- ✅ Use template literals for string interpolation
+- ✅ Use destructuring for cleaner code
+- ✅ Use async/await for asynchronous code
+- ✅ Handle errors properly
+- ✅ Use descriptive variable names
+- ✅ Keep functions small and focused
+- ✅ Use modern ES6+ features
+
+### Don'ts
+- ❌ Use `var` (use `let` or `const`)
+- ❌ Pollute global scope
+- ❌ Use `==` (use `===` for strict equality)
+- ❌ Modify function parameters
+- ❌ Use `eval()` or `with()`
+- ❌ Ignore errors silently
+- ❌ Use synchronous code for I/O operations
+- ❌ Create deeply nested callbacks (callback hell)
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Algorithm
+- Argument
+- Array
+- Asynchronous
+- Binding
+- BigInt
+- Bitwise flags
+- Block (scripting)
+- Boolean
+- Callback function
+- Camel case
+- Class
+- Closure
+- Code point
+- Code unit
+- Compile
+- Compile time
+- Conditional
+- Constant
+- Constructor
+- Control flow
+- Deep copy
+- Deserialization
+- ECMAScript
+- Encapsulation
+- Exception
+- Expando
+- First-class function
+- Function
+- Hoisting
+- IIFE
+- Identifier
+- Immutable
+- Inheritance
+- Instance
+- JavaScript
+- JSON
+- JSON type representation
+- Just-In-Time Compilation (JIT)
+- Kebab case
+- Keyword
+- Literal
+- Local scope
+- Local variable
+- Loop
+- Method
+- Mixin
+- Modularity
+- Mutable
+- Namespace
+- NaN
+- Native
+- Null
+- Nullish value
+- Number
+- Object
+- Object reference
+- OOP
+- Operand
+- Operator
+- Parameter
+- Parse
+- Polymorphism
+- Primitive
+- Promise
+- Property (JavaScript)
+- Prototype
+- Prototype-based programming
+- Pseudocode
+- Recursion
+- Regular expression
+- Scope
+- Serialization
+- Serializable object
+- Shallow copy
+- Signature (functions)
+- Sloppy mode
+- Snake case
+- Static method
+- Static typing
+- Statement
+- Strict mode
+- String
+- Stringifier
+- Symbol
+- Synchronous
+- Syntax
+- Syntax error
+- Type
+- Type coercion
+- Type conversion
+- Truthy
+- Falsy
+- Undefined
+- Value
+- Variable
+
+## Additional Resources
+
+- [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [ECMAScript Specification](https://tc39.es/ecma262/)
+- [JavaScript.info](https://javascript.info/)
+- [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS)

skills/web-coder/references/media-graphics.md

@@ -0,0 +1,504 @@
+# Media & Graphics Reference
+
+Multimedia content, graphics, and related technologies for the web.
+
+## Image Formats
+
+### JPEG/JPG
+
+Lossy compression for photographs.
+
+**Characteristics**:
+- Good for photos
+- No transparency support
+- Small file size
+- Quality degrades with editing
+
+**Usage**:
+```html
+<img src="photo.jpg" alt="Photo">
+```
+
+### PNG
+
+Lossless compression with transparency.
+
+**Characteristics**:
+- Supports alpha channel (transparency)
+- Larger file size than JPEG
+- Good for logos, graphics, screenshots
+- PNG-8 (256 colors) vs PNG-24 (16M colors)
+
+```html
+<img src="logo.png" alt="Logo">
+```
+
+### WebP
+
+Modern format with better compression.
+
+**Characteristics**:
+- Smaller than JPEG/PNG
+- Supports transparency
+- Supports animation
+- Not supported in older browsers
+
+```html
+<picture>
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.jpg" alt="Fallback">
+</picture>
+```
+
+### AVIF
+
+Next-generation image format.
+
+**Characteristics**:
+- Better compression than WebP
+- Supports HDR
+- Slower encoding
+- Limited browser support
+
+### GIF
+
+Animated images (limited colors).
+
+**Characteristics**:
+- 256 colors max
+- Supports animation
+- Simple transparency (no alpha)
+- Consider modern alternatives (video, WebP)
+
+### SVG (Scalable Vector Graphics)
+
+XML-based vector graphics.
+
+**Characteristics**:
+- Scalable without quality loss
+- Small file size for simple graphics
+- CSS/JS manipulatable
+- Animation support
+
+```html
+<!-- Inline SVG -->
+<svg width="100" height="100">
+  <circle cx="50" cy="50" r="40" fill="blue" />
+</svg>
+
+<!-- External SVG -->
+<img src="icon.svg" alt="Icon">
+```
+
+**Creating SVG**:
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Rectangle -->
+  <rect x="10" y="10" width="80" height="60" fill="red" />
+  
+  <!-- Circle -->
+  <circle cx="150" cy="40" r="30" fill="blue" />
+  
+  <!-- Path -->
+  <path d="M10 100 L100 100 L50 150 Z" fill="green" />
+  
+  <!-- Text -->
+  <text x="50" y="180" font-size="20">Hello SVG</text>
+</svg>
+```
+
+## Canvas API
+
+2D raster graphics (bitmap).
+
+### Basic Setup
+
+```html
+<canvas id="myCanvas" width="400" height="300"></canvas>
+```
+
+```javascript
+const canvas = document.getElementById('myCanvas');
+const ctx = canvas.getContext('2d');
+
+// Draw rectangle
+ctx.fillStyle = 'red';
+ctx.fillRect(10, 10, 100, 50);
+
+// Draw circle
+ctx.beginPath();
+ctx.arc(200, 150, 50, 0, Math.PI * 2);
+ctx.fillStyle = 'blue';
+ctx.fill();
+
+// Draw line
+ctx.beginPath();
+ctx.moveTo(50, 200);
+ctx.lineTo(350, 250);
+ctx.strokeStyle = 'green';
+ctx.lineWidth = 3;
+ctx.stroke();
+
+// Draw text
+ctx.font = '30px Arial';
+ctx.fillStyle = 'black';
+ctx.fillText('Hello Canvas', 50, 100);
+
+// Draw image
+const img = new Image();
+img.onload = () => {
+  ctx.drawImage(img, 0, 0);
+};
+img.src = 'image.jpg';
+```
+
+### Canvas Methods
+
+```javascript
+// Paths
+ctx.beginPath();
+ctx.moveTo(x, y);
+ctx.lineTo(x, y);
+ctx.arc(x, y, radius, startAngle, endAngle);
+ctx.closePath();
+ctx.fill();
+ctx.stroke();
+
+// Transforms
+ctx.translate(x, y);
+ctx.rotate(angle);
+ctx.scale(x, y);
+ctx.save(); // Save state
+ctx.restore(); // Restore state
+
+// Compositing
+ctx.globalAlpha = 0.5;
+ctx.globalCompositeOperation = 'source-over';
+
+// Export
+const dataURL = canvas.toDataURL('image/png');
+canvas.toBlob(blob => {
+  // Use blob
+}, 'image/png');
+```
+
+## WebGL
+
+3D graphics in the browser.
+
+**Use Cases**:
+- 3D visualizations
+- Games
+- Data visualization
+- VR/AR
+
+**Libraries**:
+- **Three.js**: Easy 3D graphics
+- **Babylon.js**: Game engine
+- **PixiJS**: 2D WebGL renderer
+
+```javascript
+// Three.js example
+import * as THREE from 'three';
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer();
+
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+// Create cube
+const geometry = new THREE.BoxGeometry();
+const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+const cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+
+camera.position.z = 5;
+
+// Render loop
+function animate() {
+  requestAnimationFrame(animate);
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render(scene, camera);
+}
+animate();
+```
+
+## Video
+
+### HTML5 Video Element
+
+```html
+<video controls width="640" height="360">
+  <source src="video.mp4" type="video/mp4">
+  <source src="video.webm" type="video/webm">
+  Your browser doesn't support video.
+</video>
+```
+
+**Attributes**:
+- `controls`: Show playback controls
+- `autoplay`: Start automatically
+- `loop`: Repeat video
+- `muted`: Mute audio
+- `poster`: Thumbnail image
+- `preload`: none/metadata/auto
+
+### Video Formats
+
+- **MP4 (H.264)**: Widely supported
+- **WebM (VP8/VP9)**: Open format
+- **Ogg (Theora)**: Open format
+
+### JavaScript Control
+
+```javascript
+const video = document.querySelector('video');
+
+// Playback
+video.play();
+video.pause();
+video.currentTime = 10; // Seek to 10s
+
+// Properties
+video.duration; // Total duration
+video.currentTime; // Current position
+video.paused; // Is paused?
+video.volume = 0.5; // 0.0 to 1.0
+video.playbackRate = 1.5; // Speed
+
+// Events
+video.addEventListener('play', () => {});
+video.addEventListener('pause', () => {});
+video.addEventListener('ended', () => {});
+video.addEventListener('timeupdate', () => {});
+```
+
+## Audio
+
+### HTML5 Audio Element
+
+```html
+<audio controls>
+  <source src="audio.mp3" type="audio/mpeg">
+  <source src="audio.ogg" type="audio/ogg">
+</audio>
+```
+
+### Audio Formats
+
+- **MP3**: Widely supported
+- **AAC**: Good quality
+- **Ogg Vorbis**: Open format
+- **WAV**: Uncompressed
+
+### Web Audio API
+
+Advanced audio processing:
+
+```javascript
+const audioContext = new AudioContext();
+
+// Load audio
+fetch('audio.mp3')
+  .then(response => response.arrayBuffer())
+  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
+  .then(audioBuffer => {
+    // Create source
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    
+    // Create gain node (volume)
+    const gainNode = audioContext.createGain();
+    gainNode.gain.value = 0.5;
+    
+    // Connect: source -> gain -> destination
+    source.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+    
+    // Play
+    source.start();
+  });
+```
+
+## Responsive Images
+
+### srcset and sizes
+
+```html
+<!-- Different resolutions -->
+<img src="image-800.jpg"
+     srcset="image-400.jpg 400w,
+             image-800.jpg 800w,
+             image-1200.jpg 1200w"
+     sizes="(max-width: 600px) 100vw,
+            (max-width: 900px) 50vw,
+            800px"
+     alt="Responsive image">
+
+<!-- Pixel density -->
+<img src="image.jpg"
+     srcset="image.jpg 1x,
+             image@2x.jpg 2x,
+             image@3x.jpg 3x"
+     alt="High DPI image">
+```
+
+### Picture Element
+
+Art direction and format switching:
+
+```html
+<picture>
+  <!-- Different formats -->
+  <source srcset="image.avif" type="image/avif">
+  <source srcset="image.webp" type="image/webp">
+  
+  <!-- Different crops for mobile/desktop -->
+  <source media="(max-width: 600px)" srcset="image-mobile.jpg">
+  <source media="(min-width: 601px)" srcset="image-desktop.jpg">
+  
+  <!-- Fallback -->
+  <img src="image.jpg" alt="Fallback">
+</picture>
+```
+
+## Image Optimization
+
+### Best Practices
+
+1. **Choose correct format**:
+   - Photos: JPEG, WebP, AVIF
+   - Graphics/logos: PNG, SVG, WebP
+   - Animations: Video, WebP
+
+2. **Compress images**:
+   - Use compression tools
+   - Balance quality vs file size
+   - Progressive JPEG for large images
+
+3. **Responsive images**:
+   - Serve appropriate sizes
+   - Use srcset/picture
+   - Consider device pixel ratio
+
+4. **Lazy loading**:
+   ```html
+   <img src="image.jpg" loading="lazy" alt="Lazy loaded">
+   ```
+
+5. **Dimensions**:
+   ```html
+   <img src="image.jpg" width="800" height="600" alt="With dimensions">
+   ```
+
+## Image Loading Techniques
+
+### Lazy Loading
+
+```html
+<!-- Native lazy loading -->
+<img src="image.jpg" loading="lazy" alt="Image">
+
+<!-- Intersection Observer -->
+<img data-src="image.jpg" class="lazy" alt="Image">
+```
+
+```javascript
+const images = document.querySelectorAll('.lazy');
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      const img = entry.target;
+      img.src = img.dataset.src;
+      observer.unobserve(img);
+    }
+  });
+});
+
+images.forEach(img => observer.observe(img));
+```
+
+### Progressive Enhancement
+
+```html
+<!-- Low quality placeholder -->
+<img src="image-tiny.jpg"
+     data-src="image-full.jpg"
+     class="blur"
+     alt="Progressive image">
+```
+
+## Favicon
+
+Website icon:
+
+```html
+<!-- Standard -->
+<link rel="icon" href="/favicon.ico" sizes="any">
+
+<!-- Modern -->
+<link rel="icon" href="/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+<!-- Multiple sizes -->
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
+```
+
+## Multimedia Best Practices
+
+### Performance
+
+- Optimize file sizes
+- Use appropriate formats
+- Implement lazy loading
+- Use CDN for delivery
+- Compress videos
+
+### Accessibility
+
+- Provide alt text for images
+- Include captions/subtitles for videos
+- Provide transcripts for audio
+- Don't autoplay with sound
+- Ensure keyboard controls
+
+### SEO
+
+- Descriptive filenames
+- Alt text with keywords
+- Structured data (schema.org)
+- Image sitemaps
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Alpha
+- Baseline (image)
+- Baseline (scripting)
+- Canvas
+- Favicon
+- JPEG
+- Lossless compression
+- Lossy compression
+- PNG
+- Progressive enhancement
+- Quality values
+- Raster image
+- Render
+- Rendering engine
+- SVG
+- Vector images
+- WebGL
+- WebP
+
+## Additional Resources
+
+- [MDN Canvas Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
+- [SVG Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
+- [WebGL Fundamentals](https://webglfundamentals.org/)
+- [Responsive Images Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

skills/web-coder/references/performance-optimization.md

@@ -0,0 +1,546 @@
+# Performance & Optimization Reference
+
+Comprehensive reference for web performance metrics, optimization techniques, and Core Web Vitals.
+
+## Core Web Vitals
+
+Google's metrics for measuring user experience.
+
+### Largest Contentful Paint (LCP)
+
+Measures loading performance - when largest content element becomes visible.
+
+**Target**: < 2.5 seconds
+
+**Optimization**:
+- Reduce server response time
+- Optimize images
+- Remove render-blocking resources
+- Use CDN
+- Implement lazy loading
+- Preload critical resources
+
+```html
+<link rel="preload" href="hero-image.jpg" as="image">
+```
+
+### First Input Delay (FID) → Interaction to Next Paint (INP)
+
+FID (deprecated) measured input responsiveness. INP is the new metric.
+
+**INP Target**: < 200ms
+
+**Optimization**:
+- Minimize JavaScript execution time
+- Break up long tasks
+- Use web workers
+- Optimize third-party scripts
+- Use `requestIdleCallback`
+
+### Cumulative Layout Shift (CLS)
+
+Measures visual stability - unexpected layout shifts.
+
+**Target**: < 0.1
+
+**Optimization**:
+- Specify image/video dimensions
+- Avoid inserting content above existing content
+- Use CSS aspect-ratio
+- Reserve space for dynamic content
+
+```html
+<img src="image.jpg" width="800" height="600" alt="Photo">
+
+<style>
+  .video-container {
+    aspect-ratio: 16 / 9;
+  }
+</style>
+```
+
+## Other Performance Metrics
+
+### First Contentful Paint (FCP)
+Time when first content element renders.  
+**Target**: < 1.8s
+
+### Time to First Byte (TTFB)
+Time for browser to receive first byte of response.  
+**Target**: < 600ms
+
+### Time to Interactive (TTI)
+When page becomes fully interactive.  
+**Target**: < 3.8s
+
+### Speed Index
+How quickly content is visually displayed.  
+**Target**: < 3.4s
+
+### Total Blocking Time (TBT)
+Sum of blocking time for all long tasks.  
+**Target**: < 200ms
+
+## Image Optimization
+
+### Format Selection
+
+| Format | Best For | Pros | Cons |
+|--------|----------|------|------|
+| JPEG | Photos | Small size, widely supported | Lossy, no transparency |
+| PNG | Graphics, transparency | Lossless, transparency | Larger size |
+| WebP | Modern browsers | Small size, transparency | Limited old browser support |
+| AVIF | Newest format | Best compression | Limited support |
+| SVG | Icons, logos | Scalable, small | Not for photos |
+
+### Responsive Images
+
+```html
+<!-- Picture element for art direction -->
+<picture>
+  <source media="(min-width: 1024px)" srcset="large.webp" type="image/webp">
+  <source media="(min-width: 768px)" srcset="medium.webp" type="image/webp">
+  <source media="(min-width: 1024px)" srcset="large.jpg">
+  <source media="(min-width: 768px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="Responsive image">
+</picture>
+
+<!-- Srcset for resolution switching -->
+<img
+  src="image-800.jpg"
+  srcset="image-400.jpg 400w,
+          image-800.jpg 800w,
+          image-1200.jpg 1200w"
+  sizes="(max-width: 600px) 400px,
+         (max-width: 1000px) 800px,
+         1200px"
+  alt="Image">
+
+<!-- Lazy loading -->
+<img src="image.jpg" loading="lazy" alt="Lazy loaded">
+```
+
+### Image Compression
+
+- Use tools like ImageOptim, Squoosh, or Sharp
+- Target 80-85% quality for JPEGs
+- Use progressive JPEGs
+- Strip metadata
+
+## Code Optimization
+
+### Minification
+
+Remove whitespace, comments, shorten names:
+
+```javascript
+// Before
+function calculateTotal(price, tax) {
+  const total = price + (price * tax);
+  return total;
+}
+
+// After minification
+function t(p,x){return p+p*x}
+```
+
+**Tools**: Terser (JS), cssnano (CSS), html-minifier
+
+### Code Splitting
+
+Split code into smaller chunks loaded on demand:
+
+```javascript
+// Dynamic import
+button.addEventListener('click', async () => {
+  const module = await import('./heavy-module.js');
+  module.run();
+});
+
+// React lazy loading
+const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
+
+// Webpack code splitting
+import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
+  // Use lodash
+});
+```
+
+### Tree Shaking
+
+Remove unused code during bundling:
+
+```javascript
+// Only imports what's used
+import { debounce } from 'lodash-es';
+
+// ESM exports enable tree shaking
+export { function1, function2 };
+```
+
+### Compression
+
+Enable gzip or brotli compression:
+
+```nginx
+# nginx config
+gzip on;
+gzip_types text/plain text/css application/json application/javascript;
+gzip_min_length 1000;
+
+# brotli (better compression)
+brotli on;
+brotli_types text/plain text/css application/json application/javascript;
+```
+
+## Caching Strategies
+
+### Cache-Control Headers
+
+```http
+# Immutable assets (versioned URLs)
+Cache-Control: public, max-age=31536000, immutable
+
+# HTML (always revalidate)
+Cache-Control: no-cache
+
+# API responses (short cache)
+Cache-Control: private, max-age=300
+
+# No caching
+Cache-Control: no-store
+```
+
+### Service Workers
+
+Advanced caching control:
+
+```javascript
+// Cache-first strategy
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});
+
+// Network-first strategy
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    fetch(event.request).catch(() => {
+      return caches.match(event.request);
+    })
+  );
+});
+
+// Stale-while-revalidate
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.open('dynamic').then((cache) => {
+      return cache.match(event.request).then((response) => {
+        const fetchPromise = fetch(event.request).then((networkResponse) => {
+          cache.put(event.request, networkResponse.clone());
+          return networkResponse;
+        });
+        return response || fetchPromise;
+      });
+    })
+  );
+});
+```
+
+## Loading Strategies
+
+### Critical Rendering Path
+
+1. Construct DOM from HTML
+2. Construct CSSOM from CSS
+3. Combine DOM + CSSOM into render tree
+4. Calculate layout
+5. Paint pixels
+
+### Resource Hints
+
+```html
+<!-- DNS prefetch -->
+<link rel="dns-prefetch" href="//example.com">
+
+<!-- Preconnect (DNS + TCP + TLS) -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+
+<!-- Prefetch (low priority for next page) -->
+<link rel="prefetch" href="next-page.js">
+
+<!-- Preload (high priority for current page) -->
+<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
+
+<!-- Prerender (next page in background) -->
+<link rel="prerender" href="next-page.html">
+```
+
+### Lazy Loading
+
+#### Images - native lazy loading
+
+    <img src="image.jpg" loading="lazy">
+
+```javascript
+// Intersection Observer for custom lazy loading
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      const img = entry.target;
+      img.src = img.dataset.src;
+      observer.unobserve(img);
+    }
+  });
+});
+
+document.querySelectorAll('img[data-src]').forEach(img => {
+  observer.observe(img);
+});
+```
+
+### Critical CSS
+
+Inline above-the-fold CSS, defer the rest:
+
+```html
+<head>
+  <style>
+    /* Critical CSS inlined */
+    body { margin: 0; font-family: sans-serif; }
+    .header { height: 60px; background: #333; }
+  </style>
+  
+  <!-- Non-critical CSS deferred -->
+  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="styles.css"></noscript>
+</head>
+```
+
+## JavaScript Performance
+
+### Debouncing & Throttling
+
+```javascript
+// Debounce - execute after delay
+function debounce(func, delay) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+// Usage
+const handleSearch = debounce((query) => {
+  // Search logic
+}, 300);
+
+// Throttle - execute at most once per interval
+function throttle(func, limit) {
+  let inThrottle;
+  return function(...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+
+// Usage
+const handleScroll = throttle(() => {
+  // Scroll logic
+}, 100);
+```
+
+### Long Tasks
+
+Break up with `requestIdleCallback`:
+
+```javascript
+function processLargeArray(items) {
+  let index = 0;
+  
+  function processChunk() {
+    const deadline = performance.now() + 50; // 50ms budget
+    
+    while (index < items.length && performance.now() < deadline) {
+      // Process item
+      processItem(items[index]);
+      index++;
+    }
+    
+    if (index < items.length) {
+      requestIdleCallback(processChunk);
+    }
+  }
+  
+  requestIdleCallback(processChunk);
+}
+```
+
+### Web Workers
+
+Offload heavy computation:
+
+```javascript
+// main.js
+const worker = new Worker('worker.js');
+worker.postMessage({ data: largeDataset });
+
+worker.onmessage = (event) => {
+  console.log('Result:', event.data);
+};
+
+// worker.js
+self.onmessage = (event) => {
+  const result = heavyComputation(event.data);
+  self.postMessage(result);
+};
+```
+
+## Performance Monitoring
+
+### Performance API
+
+```javascript
+// Navigation timing
+const navTiming = performance.getEntriesByType('navigation')[0];
+console.log('DOM loaded:', navTiming.domContentLoadedEventEnd);
+console.log('Page loaded:', navTiming.loadEventEnd);
+
+// Resource timing
+const resources = performance.getEntriesByType('resource');
+resources.forEach(resource => {
+  console.log(resource.name, resource.duration);
+});
+
+// Mark and measure custom timings
+performance.mark('start-task');
+// Do work
+performance.mark('end-task');
+performance.measure('task-duration', 'start-task', 'end-task');
+
+const measure = performance.getEntriesByName('task-duration')[0];
+console.log('Task took:', measure.duration, 'ms');
+
+// Observer for performance entries
+const observer = new PerformanceObserver((list) => {
+  for (const entry of list.getEntries()) {
+    console.log('Performance entry:', entry);
+  }
+});
+observer.observe({ entryTypes: ['measure', 'mark', 'resource'] });
+```
+
+### Web Vitals Library
+
+```javascript
+import { getLCP, getFID, getCLS } from 'web-vitals';
+
+getLCP(console.log);
+getFID(console.log);
+getCLS(console.log);
+```
+
+## CDN (Content Delivery Network)
+
+Distribute content across global servers for faster delivery.
+
+**Benefits**:
+- Reduced latency
+- Improved load times
+- Better availability
+- Reduced bandwidth costs
+
+**Popular CDNs**:
+- Cloudflare
+- Amazon CloudFront
+- Fastly
+- Akamai
+
+## Best Practices
+
+### Do's
+- ✅ Optimize images (format, compression, size)
+- ✅ Minify and compress code
+- ✅ Implement caching strategies
+- ✅ Use CDN for static assets
+- ✅ Lazy load non-critical resources
+- ✅ Defer non-critical JavaScript
+- ✅ Inline critical CSS
+- ✅ Use HTTP/2 or HTTP/3
+- ✅ Monitor Core Web Vitals
+- ✅ Set performance budgets
+
+### Don'ts
+- ❌ Serve unoptimized images
+- ❌ Block rendering with scripts
+- ❌ Cause layout shifts
+- ❌ Make excessive HTTP requests
+- ❌ Load unused code
+- ❌ Use synchronous operations on main thread
+- ❌ Ignore performance metrics
+- ❌ Forget mobile performance
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- bfcache
+- Bandwidth
+- Brotli compression
+- Code splitting
+- Compression Dictionary Transport
+- Cumulative Layout Shift (CLS)
+- Delta
+- First Contentful Paint (FCP)
+- First CPU idle
+- First Input Delay (FID)
+- First Meaningful Paint (FMP)
+- First Paint (FP)
+- Graceful degradation
+- gzip compression
+- Interaction to Next Paint (INP)
+- Jank
+- Jitter
+- Largest Contentful Paint (LCP)
+- Latency
+- Lazy load
+- Long task
+- Lossless compression
+- Lossy compression
+- Minification
+- Network throttling
+- Page load time
+- Page prediction
+- Perceived performance
+- Prefetch
+- Prerender
+- Progressive enhancement
+- RAIL
+- Real User Monitoring (RUM)
+- Reflow
+- Render-blocking
+- Repaint
+- Resource Timing
+- Round Trip Time (RTT)
+- Server Timing
+- Speed index
+- Speculative parsing
+- Synthetic monitoring
+- Time to First Byte (TTFB)
+- Time to Interactive (TTI)
+- Tree shaking
+- Web performance
+- Zstandard compression
+
+## Additional Resources
+
+- [Web.dev Performance](https://web.dev/performance/)
+- [MDN Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
+- [WebPageTest](https://www.webpagetest.org/)
+- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

skills/web-coder/references/security-authentication.md

@@ -0,0 +1,603 @@
+# Security & Authentication Reference
+
+Comprehensive reference for web security, authentication, encryption, and secure coding practices.
+
+## Web Security Fundamentals
+
+### CIA Triad
+
+Core principles of information security:
+- **Confidentiality**: Data accessible only to authorized parties
+- **Integrity**: Data remains accurate and unmodified
+- **Availability**: Systems and data accessible when needed
+
+### Security Headers
+
+```http
+# Content Security Policy
+Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com 'nonce-<random-base64-value>'; style-src 'self' 'nonce-<random-base64-value>'; object-src 'none'
+
+# HTTP Strict Transport Security
+Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+
+# X-Frame-Options (clickjacking protection)
+X-Frame-Options: DENY
+
+# X-Content-Type-Options (MIME sniffing)
+X-Content-Type-Options: nosniff
+
+# X-XSS-Protection (legacy, use CSP instead)
+X-XSS-Protection: 1; mode=block
+
+# Referrer-Policy
+Referrer-Policy: strict-origin-when-cross-origin
+
+# Permissions-Policy
+Permissions-Policy: geolocation=(), microphone=(), camera=()
+```
+
+### CSP (Content Security Policy)
+
+Mitigates XSS and data injection attacks.
+
+**Directives**:
+- `default-src`: Fallback for other directives
+- `script-src`: JavaScript sources
+- `style-src`: CSS sources
+- `img-src`: Image sources
+- `font-src`: Font sources
+- `connect-src`: Fetch/XMLHttpRequest destinations
+- `frame-src`: iframe sources
+- `object-src`: Plugin sources
+
+**Values**:
+- `'self'`: Same origin
+- `'none'`: Block all
+- `'unsafe-inline'`: Allow inline scripts/styles (avoid)
+- `'unsafe-eval'`: Allow eval() (avoid)
+- `https:`: HTTPS sources only
+- `https://example.com`: Specific domain
+
+## HTTPS & TLS
+
+### TLS (Transport Layer Security)
+
+Encrypts data in transit between client and server.
+
+**TLS Handshake**:
+1. Client Hello (supported versions, cipher suites)
+2. Server Hello (chosen version, cipher suite)
+3. Server Certificate
+4. Key Exchange
+5. Finished (connection established)
+
+**Versions**:
+- TLS 1.0, 1.1 (deprecated)
+- TLS 1.2 (current standard)
+- TLS 1.3 (latest, faster)
+
+### SSL Certificates
+
+**Types**:
+- **Domain Validated (DV)**: Basic validation
+- **Organization Validated (OV)**: Business verification
+- **Extended Validation (EV)**: Rigorous verification
+
+**Certificate Authority**: Trusted entity that issues certificates
+
+**Self-Signed**: Not trusted by browsers (dev/testing only)
+
+### HSTS (HTTP Strict Transport Security)
+
+Forces browsers to use HTTPS:
+
+```http
+Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+```
+
+- `max-age`: Duration in seconds
+- `includeSubDomains`: Apply to all subdomains
+- `preload`: Submit to browser preload list
+
+## Authentication
+
+### Authentication vs Authorization
+
+- **Authentication**: Verify identity ("Who are you?")
+- **Authorization**: Verify permissions ("What can you do?")
+
+### Common Authentication Methods
+
+#### 1. Session-Based Authentication
+
+```javascript
+// Login
+app.post('/login', (req, res) => {
+  const { username, password } = req.body;
+  
+  // Verify credentials
+  if (verifyCredentials(username, password)) {
+    req.session.userId = user.id;
+    res.json({ success: true });
+  } else {
+    res.status(401).json({ error: 'Invalid credentials' });
+  }
+});
+
+// Protected route
+app.get('/profile', requireAuth, (req, res) => {
+  const user = getUserById(req.session.userId);
+  res.json(user);
+});
+
+// Logout
+app.post('/logout', (req, res) => {
+  req.session.destroy();
+  res.json({ success: true });
+});
+```
+
+**Pros**: Simple, server controls sessions  
+**Cons**: Stateful, scalability issues, CSRF vulnerable
+
+#### 2. Token-Based Authentication (JWT)
+
+```javascript
+// Login
+app.post('/login', (req, res) => {
+  const { username, password } = req.body;
+  
+  if (verifyCredentials(username, password)) {
+    const token = jwt.sign(
+      { userId: user.id, role: user.role },
+      SECRET_KEY,
+      { expiresIn: '1h' }
+    );
+    res.json({ token });
+  } else {
+    res.status(401).json({ error: 'Invalid credentials' });
+  }
+});
+
+// Protected route
+app.get('/profile', (req, res) => {
+  const token = req.headers.authorization?.split(' ')[1];
+  
+  try {
+    const decoded = jwt.verify(token, SECRET_KEY);
+    const user = getUserById(decoded.userId);
+    res.json(user);
+  } catch (error) {
+    res.status(401).json({ error: 'Invalid token' });
+  }
+});
+```
+
+**Pros**: Stateless, scalable, works across domains  
+**Cons**: Can't revoke before expiry, size overhead
+
+#### 3. OAuth 2.0
+
+Authorization framework for delegated access.
+
+**Roles**:
+- **Resource Owner**: End user
+- **Client**: Application requesting access
+- **Authorization Server**: Issues tokens
+- **Resource Server**: Hosts protected resources
+
+**Flow Example** (Authorization Code):
+1. Client redirects to auth server
+2. User authenticates and grants permission
+3. Auth server redirects back with code
+4. Client exchanges code for access token
+5. Client uses token to access resources
+
+#### 4. Multi-Factor Authentication (MFA)
+
+Requires multiple verification factors:
+- **Something you know**: Password
+- **Something you have**: Phone, hardware token
+- **Something you are**: Biometric
+
+### Password Security
+
+```javascript
+const bcrypt = require('bcrypt');
+
+// Hash password
+async function hashPassword(password) {
+  const saltRounds = 10;
+  return await bcrypt.hash(password, saltRounds);
+}
+
+// Verify password
+async function verifyPassword(password, hash) {
+  return await bcrypt.compare(password, hash);
+}
+```
+
+**Best Practices**:
+- ✅ Use bcrypt, scrypt, or Argon2
+- ✅ Minimum 8 characters (12+ recommended)
+- ✅ Require mix of characters
+- ✅ Implement rate limiting
+- ✅ Use account lockout after failures
+- ❌ Never store plain text passwords
+- ❌ Never limit password length (within reason)
+- ❌ Never email passwords
+
+## Common Vulnerabilities
+
+### XSS (Cross-Site Scripting)
+
+Injecting malicious scripts into web pages.
+
+**Types**:
+1. **Stored XSS**: Malicious script stored in database
+2. **Reflected XSS**: Script in URL reflected in response
+3. **DOM-based XSS**: Client-side script manipulation
+
+**Prevention**:
+```javascript
+// ❌ Vulnerable
+element.innerHTML = userInput;
+
+// ✅ Safe
+element.textContent = userInput;
+
+// ✅ Escape HTML
+function escapeHTML(str) {
+  return str.replace(/[&<>"']/g, (match) => {
+    const map = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    };
+    return map[match];
+  });
+}
+
+// ✅ Use DOMPurify for rich content
+import DOMPurify from 'dompurify';
+element.innerHTML = DOMPurify.sanitize(userInput);
+```
+
+### CSRF (Cross-Site Request Forgery)
+
+Tricks user into executing unwanted actions.
+
+**Prevention**:
+```javascript
+// CSRF token
+app.get('/form', (req, res) => {
+  const csrfToken = generateToken();
+  req.session.csrfToken = csrfToken;
+  res.render('form', { csrfToken });
+});
+
+app.post('/transfer', (req, res) => {
+  if (req.body.csrfToken !== req.session.csrfToken) {
+    return res.status(403).json({ error: 'Invalid CSRF token' });
+  }
+  // Process request
+});
+
+// SameSite cookie attribute
+Set-Cookie: sessionId=abc; SameSite=Strict; Secure; HttpOnly
+```
+
+### SQL Injection
+
+Injecting malicious SQL code.
+
+**Prevention**:
+```javascript
+// ❌ Vulnerable
+const query = `SELECT * FROM users WHERE username = '${username}'`;
+
+// ✅ Parameterized queries
+const query = 'SELECT * FROM users WHERE username = ?';
+db.execute(query, [username]);
+
+// ✅ ORM/Query builder
+const user = await User.findOne({ where: { username } });
+```
+
+### CORS Misconfiguration
+
+```javascript
+// ❌ Vulnerable (allows any origin)
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Credentials: true
+
+// ✅ Whitelist specific origins
+const allowedOrigins = ['https://example.com'];
+if (allowedOrigins.includes(origin)) {
+  res.setHeader('Access-Control-Allow-Origin', origin);
+  res.setHeader('Access-Control-Allow-Credentials', 'true');
+}
+```
+
+### Clickjacking
+
+Tricking users into clicking hidden elements.
+
+**Prevention**:
+```http
+X-Frame-Options: DENY
+X-Frame-Options: SAMEORIGIN
+
+# Or with CSP
+Content-Security-Policy: frame-ancestors 'none'
+Content-Security-Policy: frame-ancestors 'self'
+```
+
+### File Upload Vulnerabilities
+
+```javascript
+// Validate file type
+const allowedTypes = ['image/jpeg', 'image/png'];
+if (!allowedTypes.includes(file.mimetype)) {
+  return res.status(400).json({ error: 'Invalid file type' });
+}
+
+// Check file size
+const maxSize = 5 * 1024 * 1024; // 5MB
+if (file.size > maxSize) {
+  return res.status(400).json({ error: 'File too large' });
+}
+
+// Sanitize filename
+const sanitizedName = file.name.replace(/[^a-z0-9.-]/gi, '_');
+
+// Store outside web root
+const uploadPath = '/secure/uploads/' + sanitizedName;
+
+// Use random filenames
+const filename = crypto.randomBytes(16).toString('hex') + path.extname(file.name);
+```
+
+## Cryptography
+
+### Encryption vs Hashing
+
+- **Encryption**: Reversible (decrypt with key)
+- **Hashing**: One-way transformation
+
+### Symmetric Encryption
+
+Same key for encryption and decryption.
+
+```javascript
+const crypto = require('crypto');
+
+function encrypt(text, key) {
+  const iv = crypto.randomBytes(16);
+  const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
+  let encrypted = cipher.update(text, 'utf8', 'hex');
+  encrypted += cipher.final('hex');
+  return iv.toString('hex') + ':' + encrypted;
+}
+
+function decrypt(text, key) {
+  const parts = text.split(':');
+  const iv = Buffer.from(parts[0], 'hex');
+  const encrypted = parts[1];
+  const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
+  let decrypted = decipher.update(encrypted, 'hex', 'utf8');
+  decrypted += decipher.final('utf8');
+  return decrypted;
+}
+```
+
+### Public-Key Cryptography
+
+Different keys for encryption (public) and decryption (private).
+
+**Use Cases**:
+- TLS/SSL certificates
+- Digital signatures
+- SSH keys
+
+### Hash Functions
+
+```javascript
+const crypto = require('crypto');
+
+// SHA-256
+const hash = crypto.createHash('sha256').update(data).digest('hex');
+
+// HMAC (keyed hash)
+const hmac = crypto.createHmac('sha256', secretKey).update(data).digest('hex');
+```
+
+### Digital Signatures
+
+Verify authenticity and integrity.
+
+```javascript
+const { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', {
+  modulusLength: 2048
+});
+
+// Sign
+const sign = crypto.createSign('SHA256');
+sign.update(data);
+const signature = sign.sign(privateKey, 'hex');
+
+// Verify
+const verify = crypto.createVerify('SHA256');
+verify.update(data);
+const isValid = verify.verify(publicKey, signature, 'hex');
+```
+
+## Secure Coding Practices
+
+### Input Validation
+
+```javascript
+// Validate email
+function isValidEmail(email) {
+  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return regex.test(email);
+}
+
+// Validate and sanitize
+function sanitizeInput(input) {
+  // Remove dangerous characters
+  return input.replace(/[<>\"']/g, '');
+}
+
+// Whitelist approach
+function isValidUsername(username) {
+  return /^[a-zA-Z0-9_]{3,20}$/.test(username);
+}
+```
+
+### Output Encoding
+
+Encode data based on context:
+- **HTML context**: Escape `< > & " '`
+- **JavaScript context**: Use JSON.stringify()
+- **URL context**: Use encodeURIComponent()
+- **CSS context**: Escape special characters
+
+### Secure Storage
+
+```javascript
+// ❌ Don't store sensitive data in localStorage
+localStorage.setItem('token', token); // XSS can access
+
+// ✅ Use HttpOnly cookies
+res.cookie('token', token, {
+  httpOnly: true,
+  secure: true,
+  sameSite: 'strict',
+  maxAge: 3600000
+});
+
+// ✅ For sensitive client-side data, encrypt first
+const encrypted = encrypt(sensitiveData, encryptionKey);
+sessionStorage.setItem('data', encrypted);
+```
+
+### Rate Limiting
+
+```javascript
+const rateLimit = require('express-rate-limit');
+
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // Limit each IP to 100 requests per windowMs
+  message: 'Too many requests, please try again later'
+});
+
+app.use('/api/', limiter);
+
+// Stricter for auth endpoints
+const authLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: 5,
+  skipSuccessfulRequests: true
+});
+
+app.use('/api/login', authLimiter);
+```
+
+### Error Handling
+
+```javascript
+// ❌ Expose internal details
+catch (error) {
+  res.status(500).json({ error: error.message });
+}
+
+// ✅ Generic error message
+catch (error) {
+  console.error(error); // Log internally
+  res.status(500).json({ error: 'Internal server error' });
+}
+```
+
+## Security Testing
+
+### Tools
+- **OWASP ZAP**: Security scanner
+- **Burp Suite**: Web vulnerability scanner
+- **nmap**: Network scanner
+- **SQLMap**: SQL injection testing
+- **Nikto**: Web server scanner
+
+### Checklist
+- [ ] HTTPS enforced everywhere
+- [ ] Security headers configured
+- [ ] Authentication implemented securely
+- [ ] Authorization checked on all endpoints
+- [ ] Input validation and sanitization
+- [ ] Output encoding
+- [ ] CSRF protection
+- [ ] SQL injection prevention
+- [ ] XSS prevention
+- [ ] Rate limiting
+- [ ] Secure session management
+- [ ] Secure password storage
+- [ ] File upload security
+- [ ] Error handling doesn't leak info
+- [ ] Dependencies up to date
+- [ ] Security logging and monitoring
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Authentication
+- Authenticator
+- Certificate authority
+- Challenge-response authentication
+- CIA
+- Cipher
+- Cipher suite
+- Ciphertext
+- Credential
+- Cross-site request forgery (CSRF)
+- Cross-site scripting (XSS)
+- Cryptanalysis
+- Cryptography
+- Decryption
+- Denial of Service (DoS)
+- Digital certificate
+- Digital signature
+- Distributed Denial of Service (DDoS)
+- Encryption
+- Federated identity
+- Fingerprinting
+- Firewall
+- HSTS
+- Identity provider (IdP)
+- MitM
+- Multi-factor authentication
+- Nonce
+- OWASP
+- Plaintext
+- Principle of least privilege
+- Privileged
+- Public-key cryptography
+- Relying party
+- Replay attack
+- Salt
+- Secure context
+- Secure Sockets Layer (SSL)
+- Session hijacking
+- Signature (security)
+- SQL injection
+- Symmetric-key cryptography
+- Transport Layer Security (TLS)
+
+## Additional Resources
+
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)
+- [Security Headers](https://securityheaders.com/)
+- [SSL Labs](https://www.ssllabs.com/)

skills/web-coder/references/servers-infrastructure.md

@@ -0,0 +1,615 @@
+# Servers & Infrastructure Reference
+
+Web servers, hosting, deployment, and infrastructure concepts.
+
+## Web Servers
+
+### Popular Web Servers
+
+#### Nginx
+
+High-performance web server and reverse proxy.
+
+**Features**:
+- Load balancing
+- Reverse proxy
+- Static file serving
+- SSL/TLS termination
+
+**Basic Configuration**:
+```nginx
+server {
+    listen 80;
+    server_name example.com;
+    
+    # Serve static files
+    location / {
+        root /var/www/html;
+        index index.html;
+    }
+    
+    # Proxy to backend
+    location /api {
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+    
+    # SSL configuration
+    listen 443 ssl;
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+}
+```
+
+#### Apache HTTP Server
+
+Widely-used web server.
+
+**Features**:
+- .htaccess support
+- Module system
+- Virtual hosting
+
+**Basic .htaccess**:
+```apache
+# Redirect to HTTPS
+RewriteEngine On
+RewriteCond %{HTTPS} off
+RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+# Custom error pages
+ErrorDocument 404 /404.html
+
+# Cache control
+<FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
+    Header set Cache-Control "max-age=31536000, public"
+</FilesMatch>
+```
+
+#### Node.js Servers
+
+**Express.js**:
+```javascript
+const express = require('express');
+const app = express();
+
+app.use(express.json());
+app.use(express.static('public'));
+
+app.get('/api/users', (req, res) => {
+  res.json({ users: [] });
+});
+
+app.listen(3000, () => {
+  console.log('Server running on port 3000');
+});
+```
+
+**Built-in HTTP Server**:
+```javascript
+const http = require('http');
+
+const server = http.createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/html' });
+  res.end('<h1>Hello World</h1>');
+});
+
+server.listen(3000);
+```
+
+## Hosting Options
+
+### Static Hosting
+
+For static sites (HTML, CSS, JS).
+
+**Platforms**:
+- **Vercel**: Automatic deployments, serverless functions
+- **Netlify**: Build automation, edge functions
+- **GitHub Pages**: Free for public repos
+- **Cloudflare Pages**: Fast global CDN
+- **AWS S3 + CloudFront**: Scalable, requires setup
+
+**Deployment**:
+```bash
+# Vercel
+npx vercel
+
+# Netlify
+npx netlify deploy --prod
+
+# GitHub Pages (via Git)
+git push origin main
+```
+
+### Platform as a Service (PaaS)
+
+Managed application hosting.
+
+**Platforms**:
+- **Heroku**: Easy deployment, add-ons
+- **Railway**: Modern developer experience
+- **Render**: Unified platform
+- **Google App Engine**: Automatic scaling
+- **Azure App Service**: Microsoft cloud
+
+**Example (Heroku)**:
+```bash
+# Deploy
+git push heroku main
+
+# Scale
+heroku ps:scale web=2
+
+# View logs
+heroku logs --tail
+```
+
+### Infrastructure as a Service (IaaS)
+
+Virtual servers (more control, more setup).
+
+**Providers**:
+- **AWS EC2**: Amazon virtual servers
+- **Google Compute Engine**: Google VMs
+- **DigitalOcean Droplets**: Simple VPS
+- **Linode**: Developer-friendly VPS
+
+### Containerization
+
+**Docker**:
+```dockerfile
+# Dockerfile
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+EXPOSE 3000
+CMD ["node", "server.js"]
+```
+
+```bash
+# Build image
+docker build -t my-app .
+
+# Run container
+docker run -p 3000:3000 my-app
+```
+
+**Docker Compose**:
+```yaml
+version: '3'
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - DATABASE_URL=postgres://db:5432
+  db:
+    image: postgres:15
+    environment:
+      POSTGRES_PASSWORD: password
+```
+
+### Kubernetes
+
+Container orchestration platform.
+
+**Concepts**:
+- **Pods**: Smallest deployable units
+- **Services**: Expose pods
+- **Deployments**: Manage replicas
+- **Ingress**: HTTP routing
+
+## Content Delivery Network (CDN)
+
+Distributed network for fast content delivery.
+
+**Benefits**:
+- Faster load times
+- Reduced server load
+- DDoS protection
+- Geographic distribution
+
+**Popular CDNs**:
+- **Cloudflare**: Free tier, DDoS protection
+- **AWS CloudFront**: Amazon CDN
+- **Fastly**: Edge computing
+- **Akamai**: Enterprise CDN
+
+**CDN for Libraries**:
+```html
+<!-- CDN-hosted library -->
+<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
+```
+
+## Domain Name System (DNS)
+
+Translates domain names to IP addresses.
+
+### DNS Records
+
+| Type | Purpose | Example |
+|------|---------|---------|
+| A | IPv4 address | `example.com → 192.0.2.1` |
+| AAAA | IPv6 address | `example.com → 2001:db8::1` |
+| CNAME | Alias to another domain | `www → example.com` |
+| MX | Mail server | `mail.example.com` |
+| TXT | Text information | SPF, DKIM records |
+| NS | Nameserver | DNS delegation |
+
+**DNS Lookup**:
+```bash
+# Command line
+nslookup example.com
+dig example.com
+
+# JavaScript (not direct DNS, but IP lookup)
+fetch('https://dns.google/resolve?name=example.com')
+```
+
+### DNS Propagation
+
+Time for DNS changes to spread globally (typically 24-48 hours).
+
+## SSL/TLS Certificates
+
+Encrypt data between client and server.
+
+### Certificate Types
+
+- **Domain Validation (DV)**: Basic, automated
+- **Organization Validation (OV)**: Verified business
+- **Extended Validation (EV)**: Highest validation
+
+### Getting Certificates
+
+**Let's Encrypt** (Free):
+```bash
+# Certbot
+sudo certbot --nginx -d example.com
+```
+
+**Cloudflare** (Free with Cloudflare DNS)
+
+### HTTPS Configuration
+
+```nginx
+# Nginx HTTPS
+server {
+    listen 443 ssl http2;
+    server_name example.com;
+    
+    ssl_certificate /path/to/fullchain.pem;
+    ssl_certificate_key /path/to/privkey.pem;
+    
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers HIGH:!aNULL:!MD5;
+}
+
+# Redirect HTTP to HTTPS
+server {
+    listen 80;
+    server_name example.com;
+    return 301 https://$host$request_uri;
+}
+```
+
+## Load Balancing
+
+Distribute traffic across multiple servers.
+
+### Load Balancing Algorithms
+
+- **Round Robin**: Rotate through servers
+- **Least Connections**: Send to server with fewest connections
+- **IP Hash**: Route based on client IP
+- **Weighted**: Servers have different capacities
+
+**Nginx Load Balancer**:
+```nginx
+upstream backend {
+    server server1.example.com weight=3;
+    server server2.example.com;
+    server server3.example.com;
+}
+
+server {
+    location / {
+        proxy_pass http://backend;
+    }
+}
+```
+
+## Reverse Proxy
+
+Server that forwards requests to backend servers.
+
+**Benefits**:
+- Load balancing
+- SSL termination
+- Caching
+- Security (hide backend)
+
+**Nginx Reverse Proxy**:
+```nginx
+server {
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+## Caching Strategies
+
+### Browser Caching
+
+```http
+Cache-Control: public, max-age=31536000, immutable
+```
+
+### Server-Side Caching
+
+**Redis**:
+```javascript
+const redis = require('redis');
+const client = redis.createClient();
+
+// Cache data
+await client.set('user:1', JSON.stringify(user), {
+  EX: 3600 // Expire after 1 hour
+});
+
+// Retrieve cached data
+const cached = await client.get('user:1');
+```
+
+### CDN Caching
+
+Static assets cached at edge locations.
+
+## Environment Variables
+
+Configuration without hardcoding.
+
+```bash
+# .env file
+DATABASE_URL=postgresql://localhost/mydb
+API_KEY=secret-key-here
+NODE_ENV=production
+```
+
+```javascript
+// Access in Node.js
+require('dotenv').config();
+const dbUrl = process.env.DATABASE_URL;
+```
+
+**Best Practices**:
+- Never commit .env to Git
+- Use .env.example as template
+- Different values per environment
+- Secure secret values
+
+## Deployment Strategies
+
+### Continuous Deployment (CD)
+
+Automatically deploy when code is pushed.
+
+**GitHub Actions**:
+```yaml
+name: Deploy
+on:
+  push:
+    branches: [main]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm ci
+      - run: npm run build
+      - run: npm run deploy
+```
+
+### Blue-Green Deployment
+
+Two identical environments, switch traffic.
+
+### Canary Deployment
+
+Gradually roll out to subset of users.
+
+### Rolling Deployment
+
+Update instances incrementally.
+
+## Process Managers
+
+Keep applications running.
+
+### PM2
+
+```bash
+# Start application
+pm2 start app.js
+
+# Start with name
+pm2 start app.js --name my-app
+
+# Cluster mode (use all CPUs)
+pm2 start app.js -i max
+
+# Monitor
+pm2 monit
+
+# Restart
+pm2 restart my-app
+
+# Stop
+pm2 stop my-app
+
+# Logs
+pm2 logs
+
+# Startup script (restart on reboot)
+pm2 startup
+pm2 save
+```
+
+### systemd
+
+Linux service manager.
+
+```ini
+# /etc/systemd/system/myapp.service
+[Unit]
+Description=My Node App
+
+[Service]
+ExecStart=/usr/bin/node /path/to/app.js
+Restart=always
+User=nobody
+Environment=NODE_ENV=production
+
+[Install]
+WantedBy=multi-user.target
+```
+
+```bash
+sudo systemctl enable myapp
+sudo systemctl start myapp
+sudo systemctl status myapp
+```
+
+## Monitoring & Logging
+
+### Application Monitoring
+
+- **New Relic**: APM, monitoring
+- **Datadog**: Infrastructure monitoring
+- **Grafana**: Visualization
+- **Prometheus**: Metrics collection
+
+### Log Aggregation
+
+- **Elasticsearch + Kibana**: Search and visualize logs
+- **Splunk**: Enterprise log management
+- **Papertrail**: Cloud logging
+
+### Uptime Monitoring
+
+- **UptimeRobot**: Free uptime checks
+- **Pingdom**: Monitoring service
+- **StatusCake**: Website monitoring
+
+## Security Best Practices
+
+### Server Hardening
+
+- Keep software updated
+- Use firewall (ufw, iptables)
+- Disable root SSH login
+- Use SSH keys (not passwords)
+- Limit user permissions
+- Regular backups
+
+### Application Security
+
+- Use HTTPS everywhere
+- Implement rate limiting
+- Validate all input
+- Use security headers
+- Keep dependencies updated
+- Regular security audits
+
+## Backup Strategies
+
+### Database Backups
+
+```bash
+# PostgreSQL
+pg_dump dbname > backup.sql
+
+# MySQL
+mysqldump -u user -p dbname > backup.sql
+
+# MongoDB
+mongodump --db mydb --out /backup/
+```
+
+### Automated Backups
+
+- Daily backups
+- Multiple retention periods
+- Off-site storage
+- Test restores regularly
+
+## Scalability
+
+### Vertical Scaling
+
+Increase server resources (CPU, RAM).
+
+**Pros**: Simple  
+**Cons**: Limited, expensive
+
+### Horizontal Scaling
+
+Add more servers.
+
+**Pros**: Unlimited scaling  
+**Cons**: Complex, requires load balancer
+
+### Database Scaling
+
+- **Replication**: Read replicas
+- **Sharding**: Split data across databases
+- **Caching**: Reduce database load
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Apache
+- Bandwidth
+- CDN
+- Cloud computing
+- CNAME
+- DNS
+- Domain
+- Domain name
+- Firewall
+- Host
+- Hotlink
+- IP address
+- ISP
+- Latency
+- localhost
+- Nginx
+- Origin
+- Port
+- Proxy servers
+- Round Trip Time (RTT)
+- Server
+- Site
+- TLD
+- Web server
+- Website
+
+## Additional Resources
+
+- [Nginx Documentation](https://nginx.org/en/docs/)
+- [Docker Documentation](https://docs.docker.com/)
+- [AWS Documentation](https://docs.aws.amazon.com/)
+- [Let's Encrypt](https://letsencrypt.org/)
+- [PM2 Documentation](https://pm2.keymetrics.io/docs/)

skills/web-coder/references/web-apis-dom.md

@@ -0,0 +1,654 @@
+# Web APIs & DOM Reference
+
+Comprehensive reference for the Document Object Model (DOM) and Web APIs available in modern browsers.
+
+## Document Object Model (DOM)
+
+### What is the DOM?
+The DOM is a programming interface for HTML and XML documents. It represents the page structure as a tree of objects that can be manipulated with JavaScript.
+
+**DOM Tree Structure**:
+```
+Document
+└── html
+    ├── head
+    │   ├── title
+    │   └── meta
+    └── body
+        ├── header
+        ├── main
+        └── footer
+```
+
+### DOM Node Types
+
+| Node Type | Description | Example |
+|-----------|-------------|---------|
+| Element | HTML element | `<div>`, `<p>` |
+| Text | Text content | Text inside elements |
+| Comment | HTML comment | `<!-- comment -->` |
+| Document | Root document | `document` |
+| DocumentFragment | Lightweight document | For batch operations |
+
+### Selecting Elements
+
+```javascript
+// By ID
+const element = document.getElementById('myId');
+
+// By class name (returns HTMLCollection)
+const elements = document.getElementsByClassName('myClass');
+
+// By tag name (returns HTMLCollection)
+const divs = document.getElementsByTagName('div');
+
+// Query selector (first match)
+const first = document.querySelector('.myClass');
+const advanced = document.querySelector('div.container > p:first-child');
+
+// Query selector all (returns NodeList)
+const all = document.querySelectorAll('.myClass');
+
+// Special selectors
+document.body; // Body element
+document.head; // Head element
+document.documentElement; // <html> element
+```
+
+### Traversing the DOM
+
+```javascript
+const element = document.querySelector('#myElement');
+
+// Parent
+element.parentElement;
+element.parentNode;
+
+// Children
+element.children; // HTMLCollection of child elements
+element.childNodes; // NodeList of all child nodes
+element.firstElementChild;
+element.lastElementChild;
+
+// Siblings
+element.nextElementSibling;
+element.previousElementSibling;
+
+// Closest ancestor matching selector
+element.closest('.container');
+
+// Check if element contains another
+parent.contains(child); // true/false
+```
+
+### Creating and Modifying Elements
+
+```javascript
+// Create element
+const div = document.createElement('div');
+const text = document.createTextNode('Hello');
+const fragment = document.createDocumentFragment();
+
+// Set content
+div.textContent = 'Plain text'; // Safe (escaped)
+div.innerHTML = '<strong>HTML</strong>'; // Can be unsafe with user input
+
+// Set attributes
+div.setAttribute('id', 'myDiv');
+div.setAttribute('class', 'container');
+div.id = 'myDiv'; // Direct property
+div.className = 'container';
+div.classList.add('active');
+div.classList.remove('inactive');
+div.classList.toggle('visible');
+div.classList.contains('active'); // true/false
+
+// Set styles
+div.style.color = 'red';
+div.style.backgroundColor = 'blue';
+div.style.cssText = 'color: red; background: blue;';
+
+// Data attributes
+div.dataset.userId = '123'; // Sets data-user-id="123"
+div.getAttribute('data-user-id'); // "123"
+
+// Insert into DOM
+parent.appendChild(div); // Add as last child
+parent.insertBefore(div, referenceNode); // Insert before reference
+parent.prepend(div); // Add as first child (modern)
+parent.append(div); // Add as last child (modern)
+element.after(div); // Insert after element
+element.before(div); // Insert before element
+element.replaceWith(newElement); // Replace element
+
+// Remove from DOM
+element.remove(); // Modern way
+parent.removeChild(element); // Old way
+
+// Clone element
+const clone = element.cloneNode(true); // true = deep clone (with children)
+```
+
+### Element Properties
+
+```javascript
+// Dimensions and position
+element.offsetWidth; // Width including border
+element.offsetHeight; // Height including border
+element.clientWidth; // Width excluding border
+element.clientHeight; // Height excluding border
+element.scrollWidth; // Total scrollable width
+element.scrollHeight; // Total scrollable height
+element.offsetTop; // Top position relative to offsetParent
+element.offsetLeft; // Left position relative to offsetParent
+
+// Bounding box
+const rect = element.getBoundingClientRect();
+// Returns: { x, y, width, height, top, right, bottom, left }
+
+// Scroll position
+element.scrollTop; // Vertical scroll position
+element.scrollLeft; // Horizontal scroll position
+element.scrollTo(0, 100); // Scroll to position
+element.scrollIntoView(); // Scroll element into view
+
+// Check visibility
+element.checkVisibility(); // Modern API
+```
+
+## Event Handling
+
+### Adding Event Listeners
+
+```javascript
+// addEventListener (modern, recommended)
+element.addEventListener('click', handleClick);
+element.addEventListener('click', handleClick, { once: true }); // Remove after first trigger
+
+function handleClick(event) {
+  console.log('Clicked!', event);
+}
+
+// Event options
+element.addEventListener('scroll', handleScroll, {
+  passive: true, // Won't call preventDefault()
+  capture: false, // Bubble phase (default)
+  once: true // Remove after one call
+});
+
+// Remove event listener
+element.removeEventListener('click', handleClick);
+```
+
+### Common Events
+
+| Category | Events |
+|----------|--------|
+| Mouse | `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`, `contextmenu` |
+| Keyboard | `keydown`, `keyup`, `keypress` (deprecated) |
+| Form | `submit`, `change`, `input`, `focus`, `blur`, `invalid` |
+| Window | `load`, `DOMContentLoaded`, `resize`, `scroll`, `beforeunload`, `unload` |
+| Touch | `touchstart`, `touchmove`, `touchend`, `touchcancel` |
+| Drag | `drag`, `dragstart`, `dragend`, `dragover`, `drop` |
+| Media | `play`, `pause`, `ended`, `timeupdate`, `loadeddata` |
+| Animation | `animationstart`, `animationend`, `animationiteration` |
+| Transition | `transitionstart`, `transitionend` |
+
+### Event Object
+
+```javascript
+element.addEventListener('click', (event) => {
+  // Target elements
+  event.target; // Element that triggered event
+  event.currentTarget; // Element with listener attached
+  
+  // Mouse position
+  event.clientX; // X relative to viewport
+  event.clientY; // Y relative to viewport
+  event.pageX; // X relative to document
+  event.pageY; // Y relative to document
+  
+  // Keyboard
+  event.key; // 'a', 'Enter', 'ArrowUp'
+  event.code; // 'KeyA', 'Enter', 'ArrowUp'
+  event.ctrlKey; // true if Ctrl pressed
+  event.shiftKey; // true if Shift pressed
+  event.altKey; // true if Alt pressed
+  event.metaKey; // true if Meta/Cmd pressed
+  
+  // Control event flow
+  event.preventDefault(); // Prevent default action
+  event.stopPropagation(); // Stop bubbling
+  event.stopImmediatePropagation(); // Stop other listeners
+});
+```
+
+### Event Delegation
+
+Handle events on parent instead of individual children:
+
+```javascript
+// Instead of adding listener to each button
+document.querySelector('.container').addEventListener('click', (event) => {
+  if (event.target.matches('button')) {
+    console.log('Button clicked:', event.target);
+  }
+});
+```
+
+## Web Storage APIs
+
+### LocalStorage
+
+Persistent storage (no expiration):
+
+```javascript
+// Set item
+localStorage.setItem('key', 'value');
+localStorage.setItem('user', JSON.stringify({ name: 'John' }));
+
+// Get item
+const value = localStorage.getItem('key');
+const user = JSON.parse(localStorage.getItem('user'));
+
+// Remove item
+localStorage.removeItem('key');
+
+// Clear all
+localStorage.clear();
+
+// Get key by index
+localStorage.key(0);
+
+// Number of items
+localStorage.length;
+
+// Iterate all items
+for (let i = 0; i < localStorage.length; i++) {
+  const key = localStorage.key(i);
+  const value = localStorage.getItem(key);
+  console.log(key, value);
+}
+```
+
+### SessionStorage
+
+Storage cleared when tab closes:
+
+```javascript
+// Same API as localStorage
+sessionStorage.setItem('key', 'value');
+sessionStorage.getItem('key');
+sessionStorage.removeItem('key');
+sessionStorage.clear();
+```
+
+**Storage Limits**: ~5-10MB per origin
+
+## Fetch API
+
+Modern API for HTTP requests:
+
+```javascript
+// Basic GET request
+fetch('https://api.example.com/data')
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error(error));
+
+// Async/await
+async function fetchData() {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    
+    // Check if successful
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Fetch error:', error);
+  }
+}
+
+// POST request with JSON
+fetch('https://api.example.com/users', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify({ name: 'John', age: 30 })
+})
+  .then(response => response.json())
+  .then(data => console.log(data));
+
+// With various options
+fetch(url, {
+  method: 'GET', // GET, POST, PUT, DELETE, etc.
+  headers: {
+    'Authorization': 'Bearer token',
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify(data), // For POST/PUT
+  mode: 'cors', // cors, no-cors, same-origin
+  credentials: 'include', // include, same-origin, omit
+  cache: 'no-cache', // default, no-cache, reload, force-cache
+  redirect: 'follow', // follow, error, manual
+  referrerPolicy: 'no-referrer' // no-referrer, origin, etc.
+});
+
+// Response methods
+const text = await response.text(); // Plain text
+const json = await response.json(); // JSON
+const blob = await response.blob(); // Binary data
+const arrayBuffer = await response.arrayBuffer(); // ArrayBuffer
+const formData = await response.formData(); // FormData
+```
+
+## Other Important Web APIs
+
+### Console API
+
+```javascript
+console.log('Message'); // Log message
+console.error('Error'); // Error message (red)
+console.warn('Warning'); // Warning message (yellow)
+console.info('Info'); // Info message
+console.table([{ a: 1 }, { a: 2 }]); // Table format
+console.group('Group'); // Start group
+console.groupEnd(); // End group
+console.time('timer'); // Start timer
+console.timeEnd('timer'); // End timer and log duration
+console.clear(); // Clear console
+console.assert(condition, 'Error message'); // Assert condition
+```
+
+### Timers
+
+```javascript
+// Execute once after delay
+const timeoutId = setTimeout(() => {
+  console.log('Executed after 1 second');
+}, 1000);
+
+// Cancel timeout
+clearTimeout(timeoutId);
+
+// Execute repeatedly
+const intervalId = setInterval(() => {
+  console.log('Executed every second');
+}, 1000);
+
+// Cancel interval
+clearInterval(intervalId);
+
+// RequestAnimationFrame (for animations)
+function animate() {
+  // Animation code
+  requestAnimationFrame(animate);
+}
+requestAnimationFrame(animate);
+```
+
+### URL API
+
+```javascript
+const url = new URL('https://example.com:8080/path?query=value#hash');
+
+url.protocol; // 'https:'
+url.hostname; // 'example.com'
+url.port; // '8080'
+url.pathname; // '/path'
+url.search; // '?query=value'
+url.hash; // '#hash'
+url.href; // Full URL
+
+// URL parameters
+url.searchParams.get('query'); // 'value'
+url.searchParams.set('newParam', 'newValue');
+url.searchParams.append('query', 'another');
+url.searchParams.delete('query');
+url.searchParams.has('query'); // true/false
+
+// Convert to string
+url.toString(); // Full URL
+```
+
+### FormData API
+
+```javascript
+// Create FormData from form
+const form = document.querySelector('form');
+const formData = new FormData(form);
+
+// Create FormData manually
+const data = new FormData();
+data.append('username', 'john');
+data.append('file', fileInput.files[0]);
+
+// Get values
+data.get('username'); // 'john'
+data.getAll('files'); // Array of all 'files' values
+
+// Iterate
+for (const [key, value] of data.entries()) {
+  console.log(key, value);
+}
+
+// Send with fetch
+fetch('/api/upload', {
+  method: 'POST',
+  body: formData // Don't set Content-Type header
+});
+```
+
+### Intersection Observer API
+
+Detect when element enters viewport:
+
+```javascript
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      console.log('Element is visible');
+      entry.target.classList.add('visible');
+    }
+  });
+}, {
+  threshold: 0.5, // 50% visible
+  rootMargin: '0px'
+});
+
+observer.observe(element);
+observer.unobserve(element);
+observer.disconnect(); // Stop observing all
+```
+
+### Mutation Observer API
+
+Watch for DOM changes:
+
+```javascript
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach(mutation => {
+    console.log('DOM changed:', mutation.type);
+  });
+});
+
+observer.observe(element, {
+  attributes: true, // Watch attribute changes
+  childList: true, // Watch child elements
+  subtree: true, // Watch all descendants
+  characterData: true // Watch text content
+});
+
+observer.disconnect(); // Stop observing
+```
+
+### Geolocation API
+
+```javascript
+navigator.geolocation.getCurrentPosition(
+  (position) => {
+    console.log(position.coords.latitude);
+    console.log(position.coords.longitude);
+  },
+  (error) => {
+    console.error('Error getting location:', error);
+  },
+  {
+    enableHighAccuracy: true,
+    timeout: 5000,
+    maximumAge: 0
+  }
+);
+
+// Watch position (continuous updates)
+const watchId = navigator.geolocation.watchPosition(callback);
+navigator.geolocation.clearWatch(watchId);
+```
+
+### Web Workers
+
+Run JavaScript in background thread:
+
+```javascript
+// Main thread
+const worker = new Worker('worker.js');
+
+worker.postMessage({ data: 'Hello' });
+
+worker.onmessage = (event) => {
+  console.log('From worker:', event.data);
+};
+
+worker.onerror = (error) => {
+  console.error('Worker error:', error);
+};
+
+worker.terminate(); // Stop worker
+
+// worker.js
+self.onmessage = (event) => {
+  console.log('From main:', event.data);
+  self.postMessage({ result: 'Done' });
+};
+```
+
+### Canvas API
+
+Draw graphics:
+
+```javascript
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+// Draw rectangle
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 50);
+
+// Draw circle
+ctx.beginPath();
+ctx.arc(100, 100, 50, 0, Math.PI * 2);
+ctx.fillStyle = 'red';
+ctx.fill();
+
+// Draw text
+ctx.font = '20px Arial';
+ctx.fillText('Hello', 10, 50);
+
+// Draw image
+const img = new Image();
+img.onload = () => {
+  ctx.drawImage(img, 0, 0);
+};
+img.src = 'image.jpg';
+```
+
+### IndexedDB
+
+Client-side database for large amounts of structured data:
+
+```javascript
+// Open database
+const request = indexedDB.open('MyDatabase', 1);
+
+request.onerror = () => console.error('Database error');
+
+request.onsuccess = (event) => {
+  const db = event.target.result;
+  // Use database
+};
+
+request.onupgradeneeded = (event) => {
+  const db = event.target.result;
+  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
+  objectStore.createIndex('name', 'name', { unique: false });
+};
+
+// Add data
+const transaction = db.transaction(['users'], 'readwrite');
+const objectStore = transaction.objectStore('users');
+objectStore.add({ id: 1, name: 'John' });
+
+// Get data
+const request = objectStore.get(1);
+request.onsuccess = () => console.log(request.result);
+```
+
+## Best Practices
+
+### Do's
+- ✅ Use `addEventListener` over inline event handlers
+- ✅ Remove event listeners when no longer needed
+- ✅ Use event delegation for dynamic content
+- ✅ Cache DOM queries in variables
+- ✅ Use `textContent` for plain text (safer than `innerHTML`)
+- ✅ Use DocumentFragment for batch DOM operations
+- ✅ Debounce/throttle scroll and resize handlers
+- ✅ Use `requestAnimationFrame` for animations
+- ✅ Validate and sanitize user input
+
+### Don'ts
+- ❌ Use `innerHTML` with untrusted data (XSS risk)
+- ❌ Query DOM repeatedly in loops
+- ❌ Modify DOM in tight loops (batch operations)
+- ❌ Use `document.write()` (deprecated)
+- ❌ Use synchronous XMLHttpRequest
+- ❌ Store sensitive data in localStorage
+- ❌ Ignore error handling in async code
+- ❌ Block main thread with heavy computations
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- API
+- Application context
+- Beacon
+- Blink
+- Blink element
+- Browser
+- Browsing context
+- Buffer
+- Canvas
+- DOM (Document Object Model)
+- Document environment
+- Event
+- Expando
+- Global object
+- Global scope
+- Hoisting
+- IndexedDB
+- Interpolation
+- Node (DOM)
+- Shadow tree
+- WindowProxy
+- Wrapper
+
+## Additional Resources
+
+- [MDN DOM Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+- [MDN Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)
+- [JavaScript.info DOM](https://javascript.info/document)

skills/web-coder/references/web-protocols-standards.md

@@ -0,0 +1,265 @@
+# Web Protocols & Standards Reference
+
+Organizations, specifications, and standards that govern the web.
+
+## Standards Organizations
+
+### W3C (World Wide Web Consortium)
+
+International community developing web standards.
+
+**Key Standards**:
+- HTML
+- CSS
+- XML
+- SVG
+- WCAG (Accessibility)
+- Web APIs
+
+**Website**: https://www.w3.org/
+
+### WHATWG (Web Hypertext Application Technology Working Group)
+
+Community maintaining HTML and DOM Living Standards.
+
+**Key Standards**:
+- HTML Living Standard
+- DOM Living Standard
+- Fetch Standard
+- URL Standard
+
+**Website**: https://whatwg.org/
+
+### IETF (Internet Engineering Task Force)
+
+Develops internet standards.
+
+**Key Standards**:
+- HTTP
+- TLS
+- TCP/IP
+- DNS
+- WebRTC protocols
+
+**Website**: https://www.ietf.org/
+
+### ECMA International
+
+Standards organization for information systems.
+
+**Key Standards**:
+- ECMAScript (JavaScript)
+- JSON
+
+**Website**: https://www.ecma-international.org/
+
+### TC39 (Technical Committee 39)
+
+ECMAScript standardization committee.
+
+**Proposal Stages**:
+- **Stage 0**: Strawperson
+- **Stage 1**: Proposal
+- **Stage 2**: Draft
+- **Stage 3**: Candidate
+- **Stage 4**: Finished (included in next version)
+
+### IANA (Internet Assigned Numbers Authority)
+
+Coordinates internet protocol resources.
+
+**Responsibilities**:
+- MIME types
+- Port numbers
+- Protocol parameters
+- TLDs (Top-Level Domains)
+
+### ICANN (Internet Corporation for Assigned Names and Numbers)
+
+Coordinates DNS and IP addresses.
+
+## Web Standards
+
+### HTML Standards
+
+**HTML5 Features**:
+- Semantic elements (`<article>`, `<section>`, etc.)
+- Audio and video elements
+- Canvas and SVG
+- Form enhancements
+- LocalStorage and SessionStorage
+- Web Workers
+- Geolocation API
+
+### CSS Specifications
+
+**CSS Modules** (each specification is a module):
+- CSS Selectors Level 4
+- CSS Flexbox Level 1
+- CSS Grid Level 2
+- CSS Animations
+- CSS Transitions
+- CSS Custom Properties
+
+### JavaScript Standards
+
+**ECMAScript Versions**:
+- **ES5** (2009): Strict mode, JSON
+- **ES6/ES2015**: Classes, modules, arrow functions, promises
+- **ES2016**: Array.includes(), exponentiation operator (`**`)
+- **ES2017**: async/await, Object.values/entries
+- **ES2018**: Rest/spread for objects, async iteration
+- **ES2019**: Array.flat(), Object.fromEntries
+- **ES2020**: Optional chaining, nullish coalescing, BigInt
+- **ES2021**: Logical assignment, Promise.any
+- **ES2022**: Top-level await, class fields
+- **ES2023**: Array.findLast(), Object.groupBy
+
+### Web API Specifications
+
+**Common APIs**:
+- DOM (Document Object Model)
+- Fetch API
+- Service Workers
+- Web Storage
+- IndexedDB
+- WebRTC
+- WebGL
+- Web Audio API
+- Payment Request API
+- Web Authentication API
+
+## Specifications
+
+### Normative vs Non-Normative
+
+- **Normative**: Required for compliance
+- **Non-normative**: Informative only (examples, notes)
+
+### Specification Lifecycle
+
+1. **Editor's Draft**: Work in progress
+2. **Working Draft**: Community review
+3. **Candidate Recommendation**: Implementation and testing
+4. **Proposed Recommendation**: Final review
+5. **W3C Recommendation**: Official standard
+
+## Browser Compatibility
+
+### Feature Detection
+
+```javascript
+// Check feature support
+if ('serviceWorker' in navigator) {
+  // Use service workers
+}
+
+if (window.IntersectionObserver) {
+  // Use Intersection Observer
+}
+
+if (CSS.supports('display', 'grid')) {
+  // Use CSS Grid
+}
+```
+
+### Baseline Compatibility
+
+Newly standardized features achieving widespread browser support.
+
+**Widely Available**: Firefox, Chrome, Edge, Safari support
+
+### Polyfills
+
+Code providing modern functionality in older browsers:
+
+```javascript
+// Promise polyfill
+if (!window.Promise) {
+  window.Promise = PromisePolyfill;
+}
+
+// Fetch polyfill
+if (!window.fetch) {
+  window.fetch = fetchPolyfill;
+}
+```
+
+### Progressive Enhancement
+
+Build for basic browsers, enhance for modern ones:
+
+```css
+/* Base styles */
+.container {
+  display: block;
+}
+
+/* Enhanced for Grid support */
+@supports (display: grid) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+```
+
+## IDL (Interface Definition Language)
+
+**WebIDL**: Defines Web APIs
+
+```webidl
+interface Element : Node {
+  readonly attribute DOMString? tagName;
+  DOMString? getAttribute(DOMString qualifiedName);
+  undefined setAttribute(DOMString qualifiedName, DOMString value);
+};
+```
+
+## Specifications to Know
+
+- **HTML Living Standard**
+- **CSS Specifications** (modular)
+- **ECMAScript Language Specification**
+- **HTTP/1.1 (RFC 9112)**
+- **HTTP/2 (RFC 9113)**
+- **HTTP/3 (RFC 9114)**
+- **TLS 1.3 (RFC 8446)**
+- **WebSocket Protocol (RFC 6455)**
+- **CORS (Fetch Standard)**
+- **Service Workers**
+- **Web Authentication (WebAuthn)**
+
+## Glossary Terms
+
+**Key Terms Covered**:
+- Baseline (compatibility)
+- BCP 47 language tag
+- ECMA
+- ECMAScript
+- HTML5
+- IANA
+- ICANN
+- IDL
+- IETF
+- ISO
+- ITU
+- Non-normative
+- Normative
+- Polyfill
+- Shim
+- Specification
+- W3C
+- WAI
+- WCAG
+- WHATWG
+- Web standards
+- WebIDL
+
+## Additional Resources
+
+- [W3C Standards](https://www.w3.org/TR/)
+- [WHATWG Living Standards](https://spec.whatwg.org/)
+- [MDN Web Docs](https://developer.mozilla.org/)
+- [Can I Use](https://caniuse.com/)
+- [TC39 Proposals](https://github.com/tc39/proposals)