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

Transcript

1. Building a better web for everyone Henry Lim @henrylim96
2. Kamusta! Ako diay si Henry #DevFest18
3. #DevFest18
4. #DevFest18
5. #DevFest18 #DevFest18
6. #DevFest18 #DevFest18
7. #DevFest18 #DevFest18 #1 Browser in North Korea !
8. #DevFest18
9. #DevFest18 19 seconds average mobile web page load on 3G
10. #DevFest18 40% of mobile connections worldwide are 2G Source: GSMA - The Mobile Economy 2018
11. #DevFest18 3 tips to build a better web
12. #DevFest18 1 2 3 Progressive Web Apps Accessibility User Experience 3 tips to build a better web
13. #DevFest18 Tips 1 Progressive Web Apps
14. #DevFest18 #DevFest18 Electron
15. #DevFest18
17. #DevFest18 1 2 3 PWA Accessibility User Experience Desktop Progressive Web Apps
18. #DevFest18
20. #DevFest18 open.spotify.com/?pwa=1
21. #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+)
22. #DevFest18
23. #DevFest18 1 2 3 PWA Accessibility User Experience HTTPS
24. #DevFest18 1 2 3 PWA Accessibility User Experience #DevFest18
25. #DevFest18 1 2 3 PWA Accessibility User Experience Chrome 70+
26. #DevFest18 Source: https://twitter.com/jaffathecake/status/1044121129848377344 1 2 3 PWA Accessibility User Experience
27. #DevFest18 1 2 3 PWA Accessibility User Experience PWACompat
28. #DevFest18 1 2 3 PWA Accessibility User Experience PWACompat The Web App Manifest for all browsers
29. #DevFest18 1 2 3 PWA Accessibility User Experience Current problem: Safari doesn't show splash screen for PWA
30. #DevFest18 1 2 3 PWA Accessibility User Experience
31. #DevFest18 1 2 3 PWA Accessibility User Experience Nothing PWA nothing.limhenry.xyz github.com/limhenry/nothing
32. #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 …
33. #DevFest18 1 2 3 PWA Accessibility User Experience
34. #DevFest18 1 2 3 PWA Accessibility User Experience
35. #DevFest18 1 2 3 PWA Accessibility User Experience #DevFest18
36. #DevFest18 1 2 3 PWA Accessibility User Experience
37. #DevFest18 Tips 2 Accessibility
38. #DevFest18
39. #DevFest18 visual impairments 1 2 3 PWA Accessibility User Experience
40. #DevFest18 visual impairments 1 2 3 PWA Accessibility User Experience
41. #DevFest18
42. #DevFest18
43. #DevFest18
44. #DevFest18 motor impairments #DevFest18
45. #DevFest18 #DevFest18 Let’s talk about hearing impairments,
46. #DevFest18 #DevFest18 our hearing tends to degrade with age. Let’s talk about hearing impairments,
47. #DevFest18 #DevFest18 No hearing aids? No problem! our hearing tends to degrade with age. Let’s talk about hearing impairments,
48. #DevFest18 #DevFest18 cognitive impairments
49. #DevFest18 #DevFest18
50. #DevFest18 1 PWA Accessibility User Experience 2 3
51. #DevFest18 1 PWA Accessibility User Experience 2 3
52. #DevFest18 1 PWA Accessibility User Experience 2 3 “The old Lighthouse logo is better than the current logo” - Henry
53. #DevFest18 1 PWA Accessibility User Experience 2 3
54. #DevFest18 Learn more: developers.google.com/ web/fundamentals/ accessibility/
55. #DevFest18 Tips 3 User Experience
56. #DevFest18 Credential Management API 1 2 3 PWA Accessibility User Experience
57. #DevFest18 1 2 3 PWA Accessibility User Experience
58. #DevFest18 1 2 3 PWA Accessibility User Experience Chrome 70+
59. #DevFest18 Payment Request API 1 2 3 PWA Accessibility User Experience
60. #DevFest18 1 2 3 PWA Accessibility User Experience
61. #DevFest18 Payment Request API are supported on the following browsers: • Edge • Chrome • Safari • Opera • Samsung Internet 1 2 3 PWA Accessibility User Experience
62. #DevFest18 Picture-in-Picture 1 2 3 PWA Accessibility User Experience
65. <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
66. #DevFest18 Picture-in-Picture are supported on the following platforms: •MacOS •Linux •Windows •Android 8.0 + 1 2 3 PWA Accessibility User Experience
67. #DevFest18 Autofill 1 2 3 PWA Accessibility User Experience
68. #DevFest18 1 2 3 PWA Accessibility User Experience
69. #DevFest18 1 2 3 PWA Accessibility User Experience
70. <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
71. #DevFest18
72. Salamat Henry Lim @henrylim96