Pro Yearly is on sale from $80 to $50! »

What's going on with Project Fugu? at DevFest Melbourne

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
November 09, 2019

What's going on with Project Fugu? at DevFest Melbourne

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://developers.google.com/web/updates/2018/12/wakelock
https://wake-lock-demo.glitch.me
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

Native File System API:
https://developers.google.com/web/updates/2019/08/native-file-system
https://googlechromelabs.github.io/text-editor/

Shape Detection API:
https://developers.google.com/web/updates/2019/01/shape-detection
https://shape-detection-demo.glitch.me

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

November 09, 2019
Tweet

Transcript

  1. WHAT'S GOING ON WITH PROJECT FUGU? @philnash

  2. Phil Nash @philnash http://philna.sh philnash@twilio.com

  3. WHAT'S GOING ON WITH PROJECT FUGU? @philnash

  4. WHAT EVEN IS PROJECT FUGU? @philnash

  5. @philnash

  6. None
  7. API DESIGN @philnash

  8. PRIVACY & SECURITY @philnash

  9. VENDOR PREFIXES @philnash

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

    || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 01. 02. 03. 04. 05. @philnash
  11. @philnash

  12. Flags #enable-experimental-web-platform-features @philnash

  13. @philnash

  14. @philnash

  15. BUT @philnash

  16. ORIGIN TRIALS @philnash

  17. Origin Trials https://developers.chrome.com/origintrials @philnash

  18. Origin Trials <meta http-equiv="origin-trial" data-feature="Web Share" data-expires="2017-04-17" content="AvAvrNEtWccBI18wmx2kSi..." > 01.

    02. 03. 04. 05. 06. @philnash
  19. Origin Trials • Fixed time limit • Canceled if usage

    > 0.5% • Feature may or may not ship @philnash
  20. GET ON WITH THE @philnash

  21. WAKE LOCK CONTACT PICKER NATIVE FILESYSTEM SHAPE DETECTION @philnash

  22. WAKE LOCK @philnash

  23. Wake Lock screen or system system doesn't work yet @philnash

  24. DEMO @philnash

  25. RELEASING THE LOCK @philnash

  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
  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
  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
  29. Wake Lock: Links Wake Lock introduction: https://developers.google.com/web/updates/2018/12/wakelock Wake Lock demo:

    https://wake-lock-demo.glitch.me/ AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController @philnash
  30. CONTACT PICKER API @philnash

  31. PRIVATE DATA @philnash

  32. @philnash

  33. Contact Picker API const supported = ('contacts' in navigator &&

    'ContactsManager' in window); @philnash
  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
  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
  36. DEMO @philnash

  37. Contact Picker API: Links Contact Picker API introduction: https://developers.google.com/web/updates/2019/08/contact-picker Contact

    Picker demo: https://contact-picker.glitch.me/ @philnash
  38. NATIVE FILE SYSTEM API @philnash

  39. Native File System API No file chosen Choose file @philnash

  40. Native File System API <a download href="blob:...">Save</a> @philnash

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

    return await window.chooseFileSystemEntries(); } 01. 02. 03. @philnash
  42. Native File System API const getFileTextContents = async function(fileHandle) {

    const file = await fileHandle.getFile(); return await file.text(); } 01. 02. 03. 04. @philnash
  43. 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
  44. DEMO @philnash

  45. PERMISSIONS @philnash

  46. Native File System API: Links Native File System API introduction:

    https://developers.google.com/web/updates/2019/08/native-file-system Native File System demo: https://googlechromelabs.github.io/text-editor/ @philnash
  47. SHAPE DETECTION API @philnash

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

    await faceDetector.detect(canvasOrImage); } 01. 02. 03. @philnash
  49. DEMO @philnash

  50. Shape Detection API: Links Shape Detection API introduction: https://developers.google.com/web/updates/2019/01/shape-detection Shape

    Detection API demo: https://shape-detection-demo.glitch.me/ @philnash
  51. THE WEB HAS A LOT TO OFFER @philnash

  52. WE NEED TO GET IT RIGHT @philnash

  53. EXPERIMENT! @philnash

  54. Thanks! @philnash http://philna.sh philnash@twilio.com