Skip to main content
Mapagam

20 SECTIONS · 372 TOPICS

Web Apis Roadmap

  1. DOM Manipulation (querySelector, getElementById)

    1. 1. Element Selection (querySelector, querySelectorAll, getElementById)
    2. Example: Selection methods comparison
    3. 2. DOM Node Creation (createElement, createTextNode, appendChild)
    4. Example: Creating and inserting elements
    5. 3. Element Attributes (getAttribute, setAttribute, dataset)
    6. Example: Attribute manipulation
    7. Example: Content manipulation
    8. 4. CSS Classes (classList.add, classList.remove, classList.toggle)
    9. Example: Class manipulation with classList
    10. Example: Style manipulation
    11. 5. DOM Traversal (parentNode, children, nextSibling)
    12. Example: DOM traversal patterns
    13. 6. MutationObserver for DOM Changes
    14. Example: Basic mutation observer usage
    15. Example: Practical use cases

  2. Event Handling (addEventListener, removeEventListener)

    1. 1. Event Listeners (addEventListener, removeEventListener, once)
    2. Example: Event listener registration patterns
    3. 2. Event Object (preventDefault, stopPropagation, target)
    4. Example: Event object properties
    5. Example: Controlling event behavior
    6. 3. Custom Events (CustomEvent, dispatchEvent)
    7. Example: Creating and dispatching custom events
    8. Example: Simulating native events
    9. 4. Touch and Pointer Events (touchstart, pointerdown)
    10. Example: Pointer events for unified input handling
    11. Example: Multi-touch handling
    12. 5. Keyboard and Mouse Events (keydown, click, mouseover)
    13. Example: Keyboard event handling
    14. Example: Mouse event handling
    15. 6. Event Delegation and Bubbling
    16. Example: Event delegation pattern
    17. Example: Event propagation and phases
    18. Example: Advanced delegation patterns
    19. Event Handling Best Practices

  3. Fetch API and Network Requests

    1. 1. Fetch API (fetch, Request, Response, Headers)
    2. Example: Basic fetch usage
    3. Example: Headers and credentials
    4. 2. Fetch Advanced (AbortController, ReadableStream)
    5. Example: Aborting fetch requests
    6. Example: Streaming response data
    7. Example: Advanced patterns
    8. 3. XMLHttpRequest and AJAX
    9. Example: XMLHttpRequest basic usage (legacy)
    10. 4. WebSocket API (new WebSocket, send, onmessage)
    11. Example: WebSocket basic usage
    12. Example: WebSocket reconnection pattern
    13. 5. Server-Sent Events (EventSource, onmessage)
    14. Example: EventSource basic usage
    15. Example: Server-side SSE format (Node.js)
    16. 6. Navigator.sendBeacon for Analytics
    17. Example: sendBeacon usage patterns
    18. Network Communication Best Practices

  4. localStorage and Browser Storage

    1. 1. localStorage and sessionStorage (setItem, getItem, removeItem)
    2. Example: Basic storage operations
    3. Example: Helper functions and patterns
    4. Example: Storage event for cross-tab communication
    5. 2. IndexedDB (open, objectStore, transaction)
    6. Example: Opening database and creating schema
    7. Example: CRUD operations
    8. Example: Indexes and cursors
    9. Example: Promise wrapper for easier async/await
    10. 3. Cache API (caches.open, cache.put, cache.match)
    11. Example: Basic Cache API usage
    12. Example: Cache strategies
    13. Example: Cache management
    14. 4. Cookies (document.cookie, expires, path)
    15. Example: Cookie helper functions
    16. 5. Origin Private File System API
    17. Example: Origin Private File System usage
    18. 6. Storage Quota (navigator.storage.estimate)
    19. Example: Checking storage quota
    20. Storage API Best Practices

  5. Canvas API and Media

    1. 1. HTML Media (play, pause, currentTime, volume)
    2. Example: Basic video controls
    3. Example: Event handling and progress tracking
    4. 2. getUserMedia (navigator.mediaDevices.getUserMedia)
    5. Example: Getting camera and microphone
    6. Example: Device enumeration and track control
    7. 3. MediaRecorder API (start, stop, ondataavailable)
    8. Example: Recording camera/microphone
    9. Example: Recording screen with chunked data
    10. 4. Web Audio API (AudioContext, createOscillator)
    11. Example: Basic audio playback and synthesis
    12. Example: Audio effects and filtering
    13. Example: Audio visualization with AnalyserNode
    14. 5. Canvas 2D (getContext, fillRect, drawImage, arc)
    15. Example: Basic shapes and text
    16. Example: Paths, gradients, and patterns
    17. Example: Transformations and animations
    18. Example: Pixel manipulation
    19. 6. WebGL API (getContext('webgl'), shaders)
    20. Example: Basic WebGL setup and triangle
    21. Example: Textured quad with WebGL
    22. Media and Graphics API Best Practices

  6. Geolocation and Device APIs

    1. 1. Geolocation API (getCurrentPosition, watchPosition)
    2. Example: Get current location
    3. Example: Watch position and distance calculation
    4. 2. Device Orientation (deviceorientation, devicemotion)
    5. Example: Device orientation
    6. Example: Device motion and shake detection
    7. 3. Battery Status API (navigator.getBattery)
    8. Example: Battery status monitoring
    9. 4. Vibration API (navigator.vibrate)
    10. Example: Vibration patterns
    11. 5. Screen Orientation (screen.orientation.lock)
    12. Example: Detect and lock orientation
    13. 6. Sensor APIs (Accelerometer, Gyroscope)
    14. Example: Accelerometer usage
    15. Example: Gyroscope and orientation sensors
    16. Device and Sensor API Best Practices

  7. File API and Clipboard

    1. 1. File API (File, Blob, FileList)
    2. Example: File input and validation
    3. Example: Modern file reading with promises
    4. 2. FileReader (readAsText, readAsDataURL, onload)
    5. Example: FileReader with event handlers
    6. 3. Clipboard API (navigator.clipboard.writeText, readText)
    7. Example: Modern clipboard API
    8. Example: Legacy execCommand fallback
    9. 4. Drag and Drop (dragstart, drop, DataTransfer)
    10. Example: Basic drag and drop
    11. Example: File drag and drop
    12. 5. File System Access (showOpenFilePicker, showSaveFilePicker)
    13. Example: Open and read file
    14. Example: Save file
    15. 6. File Handle (createWritable, getFile)
    16. Example: Directory operations
    17. File and Clipboard API Best Practices

  8. Service Workers and PWA

    1. 1. Service Worker (navigator.serviceWorker.register, install)
    2. Example: Register service worker
    3. Example: Service worker lifecycle (sw.js)
    4. 2. Service Worker Messages (postMessage, onmessage)
    5. Example: Page to service worker communication
    6. Example: Service worker to page communication
    7. 3. Background Sync (sync, periodicSync)
    8. Example: Background Sync for retry
    9. Example: Periodic Background Sync
    10. 4. Push API (PushManager.subscribe, showNotification)
    11. Example: Subscribe to push notifications
    12. Example: Handle push events in service worker
    13. 5. Background Fetch API
    14. Example: Background fetch for offline downloads
    15. 6. Workbox Strategies
    16. Example: Workbox setup
    17. Service Worker Best Practices

  9. Performance API (performance.now, PerformanceObserver)

    1. 1. Performance Timing (performance.timing, navigationStart)
    2. Example: Navigation timing metrics
    3. 2. Resource Timing (performance.getEntriesByType)
    4. Example: Analyze resource loading
    5. 3. User Timing (performance.mark, performance.measure)
    6. Example: User timing for custom metrics
    7. Example: Performance monitoring helper
    8. 4. Paint Timing (first-paint, first-contentful-paint)
    9. Example: Measure paint timing
    10. Example: Web Vitals monitoring
    11. 5. Long Tasks API (PerformanceLongTaskTiming)
    12. Example: Monitor long tasks
    13. 6. PerformanceObserver (observe, entryTypes)
    14. Example: Performance observer patterns
    15. Example: Comprehensive performance monitoring
    16. Performance API Best Practices

  10. IntersectionObserver and ResizeObserver

    1. 1. IntersectionObserver (new IntersectionObserver, observe)
    2. Example: Basic intersection observer
    3. Example: Trigger animations on visibility
    4. 2. Intersection Options (root, rootMargin, threshold)
    5. Example: Root margin and thresholds
    6. 3. ResizeObserver (new ResizeObserver, observe)
    7. Example: Basic resize observer
    8. Example: Responsive component behavior
    9. 4. Observer Performance Patterns
    10. Example: Observer management patterns
    11. 5. Lazy Loading Images (IntersectionObserver)
    12. Example: Lazy load images
    13. 6. Infinite Scroll Implementation
    14. Example: Infinite scroll implementation
    15. Observer API Best Practices

  11. Web Components (Custom Elements, Shadow DOM)

    1. 1. Custom Elements (customElements.define, connectedCallback)
    2. Example: Basic custom element
    3. Example: Customized built-in element
    4. 2. Shadow DOM (attachShadow, shadowRoot)
    5. Example: Shadow DOM with styling
    6. 3. HTML Templates (template, content, cloneNode)
    7. Example: Template element usage
    8. 4. Slots (slot, slotchange event)
    9. Example: Slots for content projection
    10. 5. Element Internals (attachInternals, form integration)
    11. Example: Form-associated custom element
    12. 6. Adoptable Stylesheets (CSSStyleSheet, adoptedStyleSheets)
    13. Example: Adoptable stylesheets
    14. Web Components Best Practices

  12. WebAuthn and Security APIs

    1. 1. Web Authentication (navigator.credentials.create, get)
    2. Example: WebAuthn registration
    3. Example: WebAuthn authentication
    4. 2. Credential Management (PasswordCredential, FederatedCredential)
    5. Example: Password credential management
    6. 3. Payment Request (new PaymentRequest, show)
    7. Example: Payment Request API
    8. 4. Permissions API (navigator.permissions.query)
    9. Example: Check and request permissions
    10. 5. CSP Reporting (SecurityPolicyViolationEvent)
    11. Example: CSP violation monitoring
    12. 6. SubtleCrypto (crypto.subtle.encrypt, decrypt, sign)
    13. Example: Hash data with SHA-256
    14. Example: Encrypt/decrypt with AES-GCM
    15. Authentication and Security Best Practices

  13. Broadcast Channel and Web Share

    1. 1. BroadcastChannel (new BroadcastChannel, postMessage)
    2. Example: Tab synchronization with BroadcastChannel
    3. Example: Real-time notification sync across tabs
    4. 2. Web Share API (navigator.share)
    5. Example: Share text and URL
    6. Example: Share files
    7. 3. Web Share Target API
    8. Example: Web app manifest for share target
    9. Example: Handle shared content in service worker
    10. Example: Process shared content in app
    11. 4. MessageChannel (new MessageChannel, port1, port2)
    12. Example: Communication between iframe and parent
    13. Example: Worker communication with MessageChannel
    14. Example: Dedicated communication channels
    15. 5. Cross-Origin Messaging (postMessage, origin)
    16. Example: Secure cross-origin iframe communication
    17. Example: Cross-origin authentication flow
    18. 6. Worker Communication
    19. Example: SharedWorker with MessagePort
    20. Example: Multi-worker coordination
    21. Communication and Sharing Best Practices

  14. Notifications API (Notification, requestPermission)

    1. 1. Notification API (new Notification, requestPermission)
    2. Example: Request permission and show notification
    3. Example: Notification with actions (Service Worker)
    4. 2. Push Notifications (PushSubscription, subscribe)
    5. Example: Subscribe to push notifications
    6. Example: Handle push messages in service worker
    7. 3. Badge API (navigator.setAppBadge)
    8. Example: Update app badge
    9. Example: Badge API in Service Worker
    10. 4. Wake Lock (navigator.wakeLock.request)
    11. Example: Prevent screen sleep during video playback
    12. Example: Recipe app with wake lock
    13. 5. Idle Detection (IdleDetector, requestPermission)
    14. Example: Detect user idle state
    15. Example: Auto-logout on idle
    16. 6. Picture-in-Picture (requestPictureInPicture)
    17. Example: Toggle Picture-in-Picture
    18. Example: Auto PiP on scroll or tab switch
    19. Example: Custom PiP controls
    20. Notification and Messaging Best Practices

  15. Web Streams and Modern APIs (2026+)

    1. 1. Streams API (ReadableStream, WritableStream, TransformStream)
    2. Example: Read and process fetch response stream
    3. Example: Create custom ReadableStream
    4. Example: Transform stream for data processing
    5. 2. Compression Streams (CompressionStream, DecompressionStream)
    6. Example: Compress and decompress data
    7. Example: Compress file before upload
    8. Example: Download and decompress on the fly
    9. 3. Web Locks (navigator.locks.request)
    10. Example: Exclusive lock for critical section
    11. Example: Shared locks for read operations
    12. Example: Lock with timeout using AbortController
    13. 4. Scheduler API (scheduler.postTask, priority)
    14. Example: Prioritize tasks with scheduler.postTask
    15. Example: Break up long task with yields
    16. Example: Task scheduler with abort
    17. 5. View Transitions API (document.startViewTransition)
    18. Example: Basic view transition
    19. Example: Named transitions with CSS
    20. Example: Custom transition with CSS animations
    21. Example: SPA navigation with view transitions
    22. 6. Container Queries (@container)
    23. Example: Basic container queries in CSS
    24. Example: Check container query support in JavaScript
    25. Example: Dynamic responsive components
    26. Example: Container queries CSS for responsive component
    27. Modern Web Platform APIs Best Practices

  16. Intl API (Internationalization)

    1. 1. Intl Object (Intl.DateTimeFormat, Intl.NumberFormat)
    2. Example: Check supported locales and values
    3. 2. Intl.DateTimeFormat (format, formatToParts)
    4. Example: Format dates in different locales
    5. Example: Time zones and formatting parts
    6. 3. Intl.NumberFormat (currency, unit, notation)
    7. Example: Format numbers, currency, and percentages
    8. Example: Units, compact notation, and advanced formatting
    9. 4. Intl.Collator (compare, sort)
    10. Example: Locale-aware string sorting
    11. Example: Search with different sensitivities
    12. 5. Intl.PluralRules (select, pluralization)
    13. Example: Pluralization rules for different locales
    14. Example: Build pluralized messages
    15. 6. Intl.Locale (language, region, script)
    16. Example: Parse and manipulate locale identifiers
    17. Example: Locale-specific calendar and numbering systems
    18. Internationalization and Formatting Best Practices

  17. PWA APIs (Progressive Web App)

    1. 1. Web App Manifest (manifest.json, icons, theme_color)
    2. Example: Complete Web App Manifest
    3. Example: Link manifest and check installation
    4. 2. Install Prompts (beforeinstallprompt, prompt)
    5. Example: Custom install button with beforeinstallprompt
    6. Example: Check if already installed and detection
    7. 3. Window Controls Overlay (titleBarStyle)
    8. Example: Enable and use Window Controls Overlay
    9. Example: Handle title bar area in JavaScript
    10. Example: CSS for Window Controls Overlay
    11. 4. App Shortcuts (shortcuts in manifest)
    12. Example: Define app shortcuts in manifest
    13. Example: Handle shortcut navigation
    14. 5. Display Modes (standalone, fullscreen, minimal-ui)
    15. Example: Detect and respond to display mode
    16. Example: CSS for different display modes
    17. 6. Install Events (appinstalled)
    18. Example: Complete PWA lifecycle management
    19. Example: Update notification for PWA
    20. Progressive Web App APIs Best Practices

  18. Feature Detection (CSS.supports, navigator)

    1. 1. CSS.supports (CSS.supports('display', 'grid'))
    2. Example: Check CSS property support
    3. Example: Feature detection with fallbacks
    4. Example: CSS @supports in stylesheets
    5. 2. Navigator.userAgent (browser detection)
    6. Example: User agent detection (not recommended)
    7. Example: Modern User-Agent Client Hints API
    8. 3. MediaCapabilities (navigator.mediaCapabilities.decodingInfo)
    9. Example: Check video format support
    10. Example: Check audio format and select best quality
    11. 4. Permissions Policy (document.featurePolicy)
    12. Example: Check feature policy
    13. Example: Set Permissions Policy in HTTP headers and HTML
    14. Example: Use allow attribute on iframes
    15. 5. Navigator Properties (platform, language, onLine)
    16. Example: Detect device capabilities
    17. Example: Feature detection utilities
    18. 6. Feature Detection Patterns
    19. Example: Modernizr usage pattern
    20. Example: CSS with Modernizr classes
    21. Example: Manual polyfill loading strategy
    22. Browser Feature Detection Best Practices

  19. WebGPU and Emerging APIs (2026+)

    1. 1. WebGPU API (navigator.gpu.requestAdapter)
    2. Example: Initialize WebGPU
    3. Example: WebGPU compute shader
    4. 2. WebAssembly (WebAssembly.instantiate, Module)
    5. Example: Load and use WebAssembly module
    6. Example: WASM with shared memory and threads
    7. 3. WebNN (Web Neural Network API)
    8. Example: WebNN basic usage
    9. Example: Load and run ONNX model with WebNN
    10. 4. WebTransport API (new WebTransport)
    11. Example: WebTransport connection and streams
    12. Example: WebTransport datagrams for real-time data
    13. 5. WebCodecs (VideoEncoder, AudioDecoder)
    14. Example: Encode video frames
    15. Example: Decode and display video
    16. 6. Origin Trials (experimental features)
    17. Example: Register for Origin Trial
    18. Example: HTTP header registration and feature detection
    19. Example: Programmatic feature detection and flags
    20. Experimental and Emerging APIs Best Practices

  20. API Best Practices and Patterns

    1. 1. Polyfills and Feature Detection
    2. Example: Comprehensive feature detection
    3. Example: Conditional polyfill loading
    4. 2. Error Handling (try-catch, Promise.catch)
    5. Example: Comprehensive error handling
    6. Example: API-specific graceful degradation
    7. 3. Performance Optimization
    8. Example: Debouncing and throttling
    9. Example: Request caching and deduplication
    10. Example: Request batching and Web Workers
    11. 4. Cross-Browser Compatibility
    12. Example: Cross-browser API access
    13. Example: Browser-specific workarounds
    14. 5. API Testing and Mocking
    15. Example: API mocking strategies
    16. Example: Integration testing with real APIs
    17. 6. Progressive Enhancement
    18. Example: Progressive enhancement framework
    19. Example: Adaptive component loading
    20. API Integration and Development Best Practices