Bleeding Edge Web APIs

                    
            const roboto = new FontFace('Roboto', 'url(roboto.woff2)');

            const addLoadedClass = (font) => {
              document.body.classList.add(`${font.family.toLowerCase()}-loaded`);
            }

            roboto.load();

            document.fonts.add(roboto);
            document.fonts.ready.then(() => console.log(`${document.fonts.size} FontFaces loaded.`));

            roboto.loaded.then(addLoadedClass);
                    
                

                    
            class CustomElement extends HTMLElement {
              constructor() {
                super();
                const shadowRoot = this.attachShadow({ mode: 'open' });
                const t = document.querySelector('template');
                const instance = t.content.cloneNode(true);
                shadowRoot.appendChild(instance);
              }

              static get observedAttributes() {
                return ['disabled'];
              }

              connectedCallback() {}
              disconnectedCallback() {}
              attributeChangedCallback(attrName, oldVal, newVal) {}
            }

            customElements.define('custom-element', CustomElement);
            customElements.whenDefined('custom-element').then(() => {});
                    
                

                    
            navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] })
              .then(device => device.gatt.connect())
              .then(server => server.getPrimaryService('battery_service'))
              .then(service => service.getCharacteristics())
              .then(characteristic => characteristic.readValue())
              .then(value => console.log(`Battery level is ${value}%`))
              .catch(error => console.error(error));
                    
                

                    
            let gamepadIndex;
            let loopID;

            window.addEventListener('gamepadconnected', (e) => {
              gamepadIndex = e.gamepad.index;
              loopID = window.requestAnimationFrame(gameLoop);
            });

            window.addEventListener('gamepaddisconnected', (e) => {
              gamepadIndex = null;
              window.cancelAnimationFrame(loopID);
            });

            const BUTTON_LEFT_INDEX = 14;
            const BUTTON_RIGHT_INDEX = 15;

            function gameLoop() {
              let gamepads = navigator.getGamepads();
              let gp = gamepads[gamepadIndex];
              let button = gp.buttons[0].pressed;

              switch (button) {
                case BUTTON_LEFT_INDEX:
                  turnLeft();
                  break;
                case BUTTON_RIGHT_INDEX:
                  turnRight();
                  break;
                default:
                  fly();
              }

              window.requestAnimationFrame(gameLoop);
            }