`, `
` |
+| Text | Text content | Text inside elements |
+| Comment | HTML 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; // 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 = 'HTML'; // 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)
diff --git a/skills/web-coder/references/web-protocols-standards.md b/skills/web-coder/references/web-protocols-standards.md
new file mode 100644
index 00000000..150bf97d
--- /dev/null
+++ b/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 (``, ``, 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)