FOSDEM 2021
/
Schedule
/
Events
/
Developer rooms
/
JavaScript
/
Designing with sensor data

Designing with sensor data

The next level of responsive web design?

Track: JavaScript devroom
Room: D.javascript
Day: Saturday
Start: 17:00
End: 17:30
Video with Q&A: D.javascript
Video only: D.javascript
Chat: Join the conversation!

For years now, we associate Responsive Web Design with Media Queries which adapt to the width of the device we are using. But what if we can take this one step further? Modern devices are brimful of sensors. The fun thing? There are JavaScript and CSS APIs which allow access to some of them! This talk will introduce you to some lesser known Web APIs and give examples on how you can progressively enhance your design with sensor input!

When I did some research for hackathons, I noticed on MDN Web Docs, that there are APIs for device sensors, that rarely get used.

The devicemotion and deviceorientation API might be known from Firefox OS days. But you can also use Ambient Light, Voice, Colours, Pointer devices, NFC or Bluetooth - if the device supports it.

This talk is using a Fairphone 3+ as mobile device to demonstrate some of those APIs. Part of them are available on Firefox, others on Chrome. You might need to toggle some flags to enable them. This means, it's not production ready yet - but you can build interesting demos to convince browser vendors to refine the APIs for production!

An idea might be to adjust the contrast or font to the environment you are. Or the position you are in. Or the devices which could be detected around you.