What's going on with Project Fugu? at MelbJS

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
February 12, 2020

What's going on with Project Fugu? at MelbJS

The fugu, or pufferfish, is a toxic, potentially lethal delicacy that, prepared correctly, is a culinary masterpiece.

The web platform is less deadly, but still requires careful preparation when incubating new features. Project Fugu is the Chrome team's initiative to bring more power to the platform. Many of the experiments are trials or behind flags to ensure they are being prepared correctly.

In this session we'll investigate the features that are coming out of the Fugu kitchen, have a taste of some that are nearly ready and take a peek into the future to see what's in store for 2020. By the end you'll be equipped with the features to make your web application a masterpiece too.

---

Links:

All the open Origin Trials: https://developers.chrome.com/origintrials/#/trials/active

Wake Lock API:
https://web.dev/wakelock/
https://wake-lock-demo.glitch.me
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

Contact Picker API:
https://web.dev/contact-picker/
https://contact-picker.glitch.me/

Native File System API:
https://web.dev/native-file-system/
https://googlechromelabs.github.io/text-editor/

Shape Detection API:
https://web.dev/shape-detection/
https://shape-detection-demo.glitch.me

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

February 12, 2020
Tweet

Transcript

  1. 5.
  2. 10.

    The bad old days var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame

    || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 01. 02. 03. 04. 05. @philnash
  3. 11.
  4. 13.
  5. 14.
  6. 19.

    Origin Trials • Fixed time limit • Canceled if usage

    > 0.5% • Feature may or may not ship @philnash
  7. 26.

    Releasing the lock - the old way const abortController =

    new AbortController(); const signal = abortController.signal; navigator.wakeLock.request('screen', { signal }); // some time later abortController.abort(); // carry on 01. 02. 03. 01. 02. 03. @philnash
  8. 27.

    Aborting fetch const abortController = new AbortController(); fetch(url, { signal:

    abortController.signal }) .then(res => res.json()) .catch(e => { if (e.name === 'AbortError') { // fetch was aborted } }); 01. 02. 03. 04. 05. 06. 07. 08. @philnash
  9. 28.

    Releasing the lock let wakeLock; try { wakeLock = await

    navigator.wakeLock.request('screen'); wakeLock.addEventListener('release', () => { console.log('WakeLock released!'); }); } catch(e) { console.log('Could not attach WakeLock'); } window.setTimeout(() => wakeLock.release(), 5000); 01. 02. 03. 04. 05. 06. 07. 08. 09. @philnash
  10. 29.

    Wake Lock: Links Wake Lock introduction: https://web.dev/wakelock/ Wake Lock demo:

    https://wake-lock-demo.glitch.me/ AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController @philnash
  11. 32.
  12. 33.
  13. 34.

    Contact Picker API async function getContact() { const props =

    ['name', 'tel', 'email']; const opts = { multiple: false }; const contacts = await navigator.contacts.select(props, opts); return contacts[0]; } 01. 02. 03. 04. 05. 06. @philnash
  14. 35.

    Contact Picker API const contact = getContact() // => {

    // "email": [], // "name": ["Phil Nash"], // "tel": ["+61 455 123456", "+44 7712 345678"] // } 01. 02. 03. 04. 05. 06. @philnash
  15. 42.

    Native File System API const getFileHandle = async function() {

    return await window.chooseFileSystemEntries(); } 01. 02. 03. @philnash
  16. 43.

    Native File System API const getFileTextContents = async function(fileHandle) {

    const file = await fileHandle.getFile(); return await file.text(); } 01. 02. 03. 04. @philnash
  17. 44.

    Native File System API async function getNewFileHandle() { const opts

    = { type: 'saveFile', accepts: [{ extensions: ['txt'], mimeTypes: ['text/plain'], }], }; return await window.chooseFileSystemEntries(opts); } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. @philnash
  18. 47.

    Native File System API: Links Native File System API introduction:

    https://web.dev/native-file-system/ Native File System demo: https://googlechromelabs.github.io/text-editor/ @philnash
  19. 49.

    Shape Detection API async function getFaces() { const faces =

    await faceDetector.detect(canvasOrImage); } 01. 02. 03. @philnash
  20. 51.

    Shape Detection API: Links Shape Detection API introduction: https://web.dev/shape-detection/ Shape

    Detection API demo: https://shape-detection-demo.glitch.me/ @philnash