JavaScript
Designing with sensor data
The next level of responsive web design?
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.
Additional information
| Type | devroom |
|---|
More sessions
| 2/6/21 |
A short introduction about JavaScript Devroom with some interesting resources about JavaScript and a presentation about this special day for the FOSDEM JS Devroom
|
| 2/6/21 |
How to write Angular components that can evolve ? How can we write components that can easily be refactored ? How can we write tests that won't be useless as soon as we change the implementation ? We can achieve all that by writing the tests first, writing tests that are agnostic of the implementation, so writing tests that focus on features.
|
| 2/6/21 |
Eleventy isn't the first Static Site Generator in Node.js out there. But it gets amazing feedback from different parties. Time to look into what makes it so compelling! We'll touch Setup, Data Directory Files and Template Languages. You'll see, that you have plenty of options to choose from.
|
| 2/6/21 |
Accessible code editing with CodeMirror 6
|
| 2/6/21 |
Node.js’ single-threaded nature makes it very susceptible to DOS attacks. While Node.js’ event loop allows performing some operations in an asynchronous fashion, it’s still quite easy to write a vulnerable Node.js application by making a few simple mistakes. In this talk I’ll cover some common ways a Node.js application may be vulnerable to DoS attacks and some common best-practices and counter measures to defend against such attacks.
|
| 2/6/21 |
The presentation will cover different ways to communicate across browsing contexts. The main 2 approaches are - 1. Shared memory - Localstorage, Cookies, SessionStorage, IndexedDB, SharedArrayBuffers & Atomics 2. Messaging- Postmessage, BroadcastChannel, MessageChannel The presentation will show a demo of usage for each of the types and explain the use-case, advantages and disadvantages for them.
|
| 2/6/21 |
How I reverse engineered an off the shelf smart watch in order to create Bangle.js, a watch that runs JavaScript. I'll cover the process as well as some of the hacks Espruino employs to run JS on a device with only 64k of RAM!
|
