Touring through the device API and instances of where to use it.

1. Creating Contextual
Applications with Maslow
& the Device API
Tim Wright, @csskarma Fresh Tilled Soil
What?
How?
Why?
Contextual
Applications Maslow
Device API
MaslowMaslow

2. Contextual Applications

3. Abraham Maslow

4. “If all you have is a
hammer, everything looks
like a nail.”

5. Physiological
Safety
Love/Belonging
Esteem
Self-
Actualization

6. Why does this matter?

7. The Device API

8. THE DEVICE API
2009

9. SAFTEY
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
!
});
Geolocation

10. THE DEVICE API
2014?

11. Abraham Maslow’s
Device API

12. “Physical requirements for
human survival”
PHYSIOLOGICAL

17. PHYSIOLOGICAL
Connectivity
Bandwidth
Do I have internet right now?
Do I have enough to get the content?

18. Online & Offline events
PHYSIOLOGICAL
navigator.onLine = true; // or false
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

19. Network information API
brings us all great sadness.
PHYSIOLOGICAL

20. PHYSIOLOGICAL
<picture>
<source srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt=“dog barf">
</picture>

21. SAFETY
“The need for security in
personal life, finances,
and health”

22. SAFETY
Physical Safety
Data Safety
Am I in a safe place?
Is all the work I’ve done safe?

23. Battery Manager
SAFETY
navigator.getBattery().then(function(battery) {
console.log(battery.level);
!
battery.addEventListener('levelchange', function() {
console.log(this.level);
};
});

24. Battery Manager
SAFETY
navigator.battery.charging
navigator.battery.chargingTime
navigator.battery.dischargingTime
navigator.battery.level
onchargingchange
onchargingtimechange
ondischargingtimechange
onlevelchange

25. LOVE & BELONGING
“The desire for friendship,
intimacy, and family”

26. LOVE & BELONGING
Connecting With People
Feeling Comfort
How can I meet and be around people?
Is the environment I’m in comforting?

27. LOVE & BELONGING

28. Contacts Manager
LOVE & BELONGING
contacts code here

29. WebNFC
LOVE & BELONGING
WebNFC code here

30. Messaging
LOVE & BELONGING
messaging code here

31. Ambient Light
LOVE & BELONGING
window.addEventListener("devicelight", function(e){
console.log(e.value);
!
});

32. ESTEEM
“The need for self-esteem
and self-respect.”

33. LOVE & BELONGING
Self-respect
Self-esteem
How do I feel about myself?
How do other people feel about me?

34. Media Capture & Streams
ESTEEM
Media capture

35. Proximity
ESTEEM
Proximity

36. SELF ACTUALIZATION
“The Desire to accomplish
everything that one can.”

37. LOVE & BELONGING
Reaching Potential
Self-reflection
Am I doing the best I can?
Why am I here?

38. Vibrate
SELF-ACTUALIZATION
navigator.vibrate(1000);
navigator.vibrate([1000]);
navigator.vibrate([50, 100, 50]);
navigator.vibrate(0);
navigator.vibrate([]);

39. SELF-ACTUALIZATION
But seriously, folks…

40. The Web is an
open medium.

41. Prototyping

42. It’s super cool!

44. Questions, now?
Questions, later?
Use words!
@csskarma
tim.wright@freshtilledsoil.com
csskarma.com/contact