Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a better web for everyone - DevFest x ...

Henry Lim
October 27, 2018

Building a better web for everyone - DevFest x BizFest Cebu 2018 / DevFest Bangkok 2018

Henry Lim

October 27, 2018
Tweet

More Decks by Henry Lim

Other Decks in Technology

Transcript

  1. #DevFest18 1 2 3 PWA Accessibility User Experience Desktop PWA

    are supported on the following platforms: •Chrome OS (Chrome 67+) •Linux (Chrome 70+) •Windows (Chrome 70+)
  2. #DevFest18 1 2 3 PWA Accessibility User Experience Nothing PWA

    nothing.limhenry.xyz github.com/limhenry/nothing
  3. #DevFest18 1 2 3 PWA Accessibility User Experience What else

    PWACompat can do? - Create meta icon tags for all icons - Create fallback meta tags for various browsers - Sets the theme color based on the manifest - And more …
  4. #DevFest18 #DevFest18 No hearing aids? No problem! our hearing tends

    to degrade with age. Let’s talk about hearing impairments,
  5. #DevFest18 1 PWA Accessibility User Experience 2 3 “The old

    Lighthouse logo is better than the current logo” - Henry
  6. #DevFest18 Payment Request API are supported on the following browsers:

    • Edge • Chrome • Safari • Opera • Samsung Internet 1 2 3 PWA Accessibility User Experience
  7. <video id="videoElement" src=“https://example.com/file.mp4"> </video>
 <button id="pipButtonElement"></button> pipButtonElement.addEventListener('click', async function() {


    pipButtonElement.disabled = true;
 
 await videoElement.requestPictureInPicture();
 
 pipButtonElement.disabled = false;
 }); #DevFest18
  8. #DevFest18 Picture-in-Picture are supported on the following platforms: •MacOS •Linux

    •Windows •Android 8.0 + 1 2 3 PWA Accessibility User Experience
  9. <label for="frmNameCC">Name on card</label>
 <input name="ccname" id="frmNameCC"
 required placeholder="Full Name"

    autocomplete="cc-name">
 
 <label for="frmCCNum">Card Number</label>
 <input name="cardnumber" id="frmCCNum"
 required autocomplete="cc-number">
 
 <label for="frmCCCVC">CVC</label>
 <input name="cvc" id="frmCCCVC"
 required autocomplete="cc-csc">
 
 <label for="frmCCExp">Expiry</label>
 <input name="cc-exp" id="frmCCExp"
 required placeholder="MM-YYYY" autocomplete="cc-exp"> #DevFest18