mahuntington
/
modular-js-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
modular-js-notes/html5/apis.md

2.8 KiB
Raw Permalink Blame History

HTML 5 APIs

Lesson Objectives

  1. Explain what HTML 5 APIs are
  2. List some common APIs and what they do

Explain what HTML 5 APIs are

HTML5 means the new HTML elements that have recently been added, but it also means a collection of advanced functionality that browsers are expected to have. A decent summary can be found here.

List some common APIs and what they do

Semantics

  • Sections and outlines in HTML5: organizational tags that don't effect layout
  • Using HTML5 audio and video: easily embed audio/video in a web page
  • Forms improvements: new types of inputs + validation

Performance and Integration

  • Web Workers: put long running processes in the background, so your site doesn't slow down
  • XMLHttpRequest level 2: making ajax calls is syntactically easier than ever. You don't even really need jQuery for it anymore
  • History API: Manipulate the browser history with JS. Make it seem like the user has visited a new page, when they haven't
  • Drag and drop: allows you to drag and drop items within and between sites
  • Focus management in HTML: lets you see if an element has been focused on. Lets you see which element is focused on
  • Fullscreen API: take over the screen
  • Online and offline events: see when the user has lost/regained connection

Connectivity

  • Web Sockets: create a permanent connection between the page/server for extra fast communication
  • WebRTC: video conferencing in the browser

Device Access

  • Using the Camera API: use a camera to get instant avatar icons... or spy on your exes
  • Touch events: for mobile/tablet devices
  • Using geolocation: again, great for spying on exes
  • Detecting device orientation: good for mobile/tablet devices being held in landscape/portrait mode. Not so good for desktops

Offline and Storage

  • Offline resources: The application cache: allows you to use the site somewhat without connectivity
  • WHATWG client-side session and persistent storage (aka DOM storage): better cookies
  • IndexedDB: kinda like MongoDB, but for storing stuff client-side
  • Using files from web applications: access local files from a web app

Styling

  • New background styling features: shadows, multiple backgrounds, filters
  • More fancy borders: curved borders, images for borders
  • Animating your style: transitions and animations
  • Typography improvement: custom fonts!
  • New presentational layouts: flex-box does what you always wanted to do, but couldn't

3D Graphics

  • Canvas: Good for "raster" (or pixel) graphics/animations/games. Draw like Microsoft Paint, re-make NES games, etc
  • SVG: Good for "vector" (or math-based) graphics/animations/games. Every graph you see online now uses this (probably with the D3.js lib)
  • WebGL - 3D graphics support!!!! Fortnite in the browser