HTML5 / Web APIs

HTML / DOM

• You Might Not Need jQuery, \ You Don't Need jQuery, \ (Now More Than Ever) You Might Not Need jQuery
• HEAD
• favicon
• Form pseudo-element
• Native form elements
• Detect DOM changes with Mutation Observers

Appearance

• Web Components
  • Shadow DOM v1, Custom Elements v1
• Web Animations
  • Web Animation Past, Present, and Future
  • Let's talk about the Web Animations API
  • Status - Are we animated yet?

Interaction

• Desktop
  • MouseEvent, WheelEvent, KeyboardEvent
  • Drag and Drop, Pointer Lock
• Mobile
  • TouchEvent
    • 300ms tap delay, gone away, More Responsive Tapping on iOS
  • DeviceOrientationEvent + DeviceMotionEvent
• Hardware Agnostic
  • PointerEvent, Selection
  • Intersection Observer API (Intro)
  • Resize Observer API
• Gamepad, Web Speech

Access

• URL, History, Navigator, Screen, Page Visibility, Clipboard, Performance, Console
• Permissions, Geolocation
• Web Notifications , Vibration

Network

• XMLHttpRequest2
• Fetch
  • Abortable Fetch
  • Why I won’t be using Fetch API in my apps
• WebSocket, Server-sent Event
• WebRTC
  • Getting Started with WebRTC
  • WebRTC in the real world: STUN, TURN and signaling
  • WebRTC data channels
  • Workshop - Codelabs - Real time communication with WebRTC

Offline

• Overview
  • Offline UX Considerations
  • The offline cookbook
  • Offline First - HTML5 technologies for a faster, smarter, more engaging web
• Web Storage, IndexedDB
• FileReader, File, Blob
• Service Worker
  • Service Workers Explained
  • Service Workers: an Introduction, The Service Worker Lifecycle
  • Instant Loading Web Apps with an Application Shell Architecture
  • Service Worker Cookbook
  • Status - Is ServiceWorker Ready?
• Progressive Web Apps
  • Progressive Web App Checklist, PWA audits
  • Offline Storage for Progressive Web Apps
  • The PRPL pattern
  • Workshop - Codelabs - Your First Progressive Web App

Media

• \<video>, \<audio>
• Web Audio API
  • Web Audio API Book
  • Workshop - Web Audio School
• Media Streams
  • Capturing Audio & Video in HTML5

Graphics

• SVG
  • Styling And Animating SVGs With CSS
• Canvas
  • HTML5 Canvas
• WebGL
  • WebGL by example, WebGL tutorial, Learning WebGL
  • Primer: Shaders, An Introduction to Shaders
  • The Book of Shaders
  • Workshop -Shader School, WebGL Workshop, WebGL Academy
  • Learning Modern 3D Graphics Programming
• WebXR / Immersive Web
  • Welcome to the immersive web
  • Progressive WebXR

Computing

• Web Cryptography
• Web Workers
• WebAssembly
  • see WebAssembly