Web APIs

A Journey Through Space & Time

Hello

I'm Ruth

@rumyra

I do Web

Use 'Web API's' a lot - but what are they?

Collective term for new browser API's

Also known as Browser API's

Also known as Device API's

Also known as HTML5 API's (blergh)

Or simply JavaScript APIs

I like 'Client Side Web API's'

Or CSWAPI's if you will

New functionality - HTML5 & native influence... goes beyond

Let's start with the familiar

Geolocation API

Demo

Geolocation Code


if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (position) {
    setCenter.lat = position.coords.latitude;
    setCenter.lng = position.coords.longitude;
    console.log(setCenter);
  });
} else {
  console.warn('sorry, geolocation not supported');
}

Geolocation watch functionlity


var watchID = navigator.geolocation.watchPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

Register a handler function that will be called automatically each time the position of the device changes.

Support

Support

Chrome pony Firefox pony Internet Explorer Safari Pony Opera Pony
Profile image of thundercat Cheetara Profile image of thundercat Cheetara Profile image of thundercat Cheetara Profile image of thundercat Cheetara Profile image of thundercat Cheetara
Profile image of thundercat Cheetara Profile image of thundercat Cheetara Profile image of thundercat Cheetara Profile image of thundercat Cheetara

See caniuse.com for more (subject to change)

Resources

Getting Directions Using the Google Maps API

Robert Nyman on Geolocation API

A Simple Trip Meter using the Geolocation API

Take a break

Web Animation API


mario.animate([
    {opacity: '1', transform: 'translate(200px, 0px)'},
    {opacity: '1', transform: 'translate(200px, -500px)'},
    {opacity: '1', transform: 'translate(200px, 0px)'}
  ], {
    duration: 2500,
    iterations: 1,
    delay: 300
});

Web Animation API

Encompasses animations from CSS Animations, CSS Transitions & SVG Animations.

More control:

  • Create animations
  • Get playback state of animation
  • Wait for animations to stop and remove them from the DOM
  • Pause all existing animations
  • Find out animations on a particular element
  • Control timing of animations (Timing Model Layer)
  • Half the speed of all animations
  • Get all animations using a certain property (transform for example)

Support

Chrome pony Firefox pony Internet Explorer Safari Pony Opera Pony
Profile image of thundercat Liono Profile image of thundercat Liono Profile image of mumra Profile image of thundercat mumra Profile image of thundercat Liono
Profile image of thundercat Liono Profile image of mumra Profile image of thundercat Mumra Profile image of thundercat Mumra

See caniuse.com for more (subject to change)

Resources

W3C Editor's Draft

Resources from Rachel Nabors

Also follow Val Head

HTML5 Rocks Article

Polyfill

Space

the Clangers hanging out on the moon

Web Audio API

Nodes (input, modification, analyser & output).

Input node = <audio> src

Modification node = delay

Output node = speakers

Web Audio Code

// create instance
var audioCtx = new AudioContext,

// input
var audioSource = audioCtx.createMediaElementSource(soundEl),

// new modification node
var delay = audioCtx.createDelay();

// set delay time
delay.delayTime.value = 0.3;
						

Web Audio Code

// connect everything together & play
source.connect(delay);
source.connect(audioCtx.destination);
delay.connect(audioCtx.destination);
soundEl.play();

						

Support

Chrome pony Firefox pony Internet Explorer Safari Pony Opera Pony
Profile image of thundercat cheetara Profile image of thundercat cheetara Profile image of mumra Profile image of thundercat liono Profile image of thundercat cheetara
Profile image of thundercat cheetara Profile image of thundercat cheetara Profile image of thundercat Mumra Profile image of thundercat liono

See caniuse.com for more (subject to change)

Resources

O'Reilly Web Audio API Book by Boris Smus (Free Online)

Jam with Chrome article

Can we see...?

Ambient Light API

Really just an event.

Super easy...

Ambient Light Code


// devicelight event
window.addEventListener("devicelight", function (event) {
  var luminosity = event.value;
  console.log('light: '+luminosity);
});
						

Support

Chrome pony Firefox pony Internet Explorer Safari Pony Opera Pony
Profile image of thundercat liono Profile image of thundercat cheetara Profile image of mumra Profile image of thundercat mumra Profile image of thundercat mumra
Profile image of thundercat mumra Profile image of thundercat cheetara Profile image of thundercat Mumra Profile image of thundercat mumra

See caniuse.com for more (subject to change)

Resources

Mobile Web Superpowers – Ambient Light API

Web API's - there's more

Geolocation

Web Animation

Web Audio

Ambient Light

Media Stream

Device Orientation

Screen Orientation

Vibration

...and more

Proximity

Battery Status

Push Notifications

Network Information

File System

Clipboard

Web Speech

Full Screen

...and even more

Notifications

Gamepad

Alarm

Pointer Lock

I'm making a website...

Listing API's, with code examples & resources.

Currently taking URL suggestions

Go and have a play :)

Thank you

Slides: rumyras-talks.herokuapp.com

Demo: space-time-apis.herokuapp.com

Webapis: https://github.com/Rumyra/web-apis

Credits

Browser Logos: https://github.com/alrra/browser-logos