Try this at home, lesser known (but interesting) browser APIs

A glimpse of what you may be able to do in the future from within your browser with Javascript. Apart from the what and how, it also addresses the question why we should start to experiment with these techniques as soon as they're available, and how we can actually use them in our current projects.

Transcript

1. Image by Paul Stevenson — via Flickr https://flic.kr/p/6BubGM TRY THIS AT HOME Lesser known (but interesting) browser APIs FOWA, 30 September 2014
2. HI, I AM FLURIN @flurin
4. BROWSER APIS
5. 7 APIS
6. Image by Steve Jurvetson — via Flickr https://flic.kr/p/gWL8D EXPERIMENTAL
7. Image by ajmexico — via Flickr https://flic.kr/p/5ZWGsP NOT NEW
8. WHY?
9. THE TRAIN IS MOVING!
10. FALLBACKS & FALLOFFS & POLYFILLS
11. Image by Daniele Zanni — via Flickr https://flic.kr/p/e1poBr APIS ARE NOT A GOAL
12. THE BROWSER AS A PLATFORM
13. THE WEB AS A PLATFORM BROWSER
14. INSPIRE
15. LET'S GET STARTED
16. WEB ANIMATIONS 1
17. HISTORY JavaScript CSS Transitions & Animations
18. ANIMATION IN CSS … ... is hard to sequence ... is hard to control ... can't be tweaked from script while running
19. E l . a n i m a t e ( )
20. e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , 1 5 0 0 ) ;
21. e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , 1 5 0 0 ) ;
22. e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , { d u r a t i o n : 1 0 0 0 , i t e r a t i o n s : 3 } ) ;
23. e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , { d u r a t i o n : 1 0 0 0 , i t e r a t i o n s : 3 } ) ;
24. e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' , o p a c i t y : 1 } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' , o p a c i t y : 1 } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' , o p a c i t y : 0 } ] , { d u r a t i o n : 1 0 0 0 , e a s i n g : e a s e , i t e r a t i o n s : 1 } ) ;
25. e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' , o p a c i t y : 1 } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' , o p a c i t y : 1 } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' , o p a c i t y : 0 } ] , { d u r a t i o n : 1 0 0 0 , e a s i n g : e a s e , i t e r a t i o n s : 1 } ) ;
26. v a r p l a y e r = e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , { d u r a t i o n : 3 0 0 0 , i t e r a t i o n s : 3 } ) ; s e t T i m e o u t ( f u n c t i o n ( ) { p l a y e r . c a n c e l ( ) ; } , 1 5 0 0 ) ;
27. v a r p l a y e r = e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , { d u r a t i o n : 3 0 0 0 , i t e r a t i o n s : 3 } ) ; s e t T i m e o u t ( f u n c t i o n ( ) { p l a y e r . c a n c e l ( ) ; } , 1 5 0 0 ) ;
28. v a r p l a y e r = e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , { d u r a t i o n : 1 5 0 0 , i t e r a t i o n s : 2 } ) ; p l a y e r . o n f i n i s h = f u n c t i o n ( e v ) { e l e m e n t . s t y l e . b a c k g r o u n d = " # 0 0 f " ; }
29. v a r p l a y e r = e l e m e n t . a n i m a t e ( [ { t r a n s f o r m : ' t r a n s l a t e ( 0 , 0 ) ' } , { t r a n s f o r m : ' t r a n s l a t e ( 0 , ' + w i n d o w . i n n e r H e i g h t + ' p x ) ' } ] , { d u r a t i o n : 1 5 0 0 , i t e r a t i o n s : 2 } ) ; p l a y e r . o n f i n i s h = f u n c t i o n ( e v ) { e l e m e n t . s t y l e . b a c k g r o u n d = " # 0 0 f " ; }
30. PARTY!
31. 36+ 23+ In development In development Under consideration
32. POLYFILL Yes
33. Image by Patent and the Pantry — via Flickr https://flic.kr/p/7wypEw THE BACON API 2
34. Image by Dennis Jarvis — via Flickr https://flic.kr/p/cZ7zuu THE BEACON API 2
35. Used images by Dennis Jarvis and Patent and the Pantry — via Flickr https://flic.kr/p/cZ7zuu and https://flic.kr/p/7wypEw THE BEACON API 2
36. Image by Luis Villa del Campo AJAX — via Flickr https://flic.kr/p/q19j8 WHY NOT AJAX?
37. Image by Official U.S. Navy Page — via Flickr https://flic.kr/p/daon8m FIRE & FORGET
38. w i n d o w . a d d E v e n t L i s t e n e r ( " u n l o a d " , f u n c t i o n ( ) { n a v i g a t o r . s e n d B e a c o n ( " / b e a c o n " , " E l v i s h a s l e f t t h e b u i l d i n g " ) ; } )
39. n a v i g a t o r . s e n d B e a c o n ( " / b e a c o n " , " E l v i s h a s l e f t t h e b u i l d i n g " ) ;
40. 37+ (flag) 24+ (flag) 31+ Not supported Under consideration
41. POLYFILL Nope
42. PROMISES 3
43. WHY?
44. v a r i m g = d o c u m e n t . q u e r y S e l e c t o r ( ' . t h e - i m a g e ' ) ; i m g . a d d E v e n t L i s t e n e r ( ' l o a d ' , f u n c t i o n ( ) { / / L o a d e d ! } ) ;
45. YOU WAIT AND YOU WAIT AND YOU WAIT
47. AND YOU WAIT SOME MORE …
48. v a r i m g = d o c u m e n t . q u e r y S e l e c t o r ( " . t h e - i m a g e " ) ; f u n c t i o n l o a d e d ( ) { / / L o a d e d ! } i f ( i m g . c o m p l e t e ) { l o a d e d ( ) ; } e l s e { i m g . a d d E v e n t L i s t e n e r ( ' l o a d ' , l o a d e d ) ; }
49. ANOTHER EXAMPLE
50. t r y { s t a r t S p i n n e r ( ) ; g e t J S O N ( " r e c i p e . j s o n " , f u n c t i o n ( r e c i p e ) { r e n d e r ( r e c i p e . t i t l e ) ; r e c i p e . i n g r e d i e n t U r l s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t U r l ) { t r y { g e t ( i n g r e d i e n t U r l , f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) ; } ) ; } c a t c h ( e r r ) { / / R e t r y ? } } ) } ) ; } c a t c h ( e r r ) { s t o p S p i n n e r ( ) ; r e n d e r ( " E r r o r " ) ; }
51. / / . . . r e c i p e . i n g r e d i e n t U r l s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t U r l ) { t r y { g e t J S O N ( i n g r e d i e n t U r l , f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) ; } ) ; } c a t c h ( e r r ) { / / R e t r y ? } } ) / / . . .
52. / / . . . v a r l o a d e d I n g r e d i e n t s = [ ] ; r e c i p e . i n g r e d i e n t U r l s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t U r l ) { t r y { g e t J S O N ( i n g r e d i e n t U r l , f u n c t i o n ( i n g r e d i e n t ) { l o a d e d I n g r e d i e n t s . p u s h ( i n g r e d i e n t ) ; i f ( l o a d e d I n g r e d i e n t s . l e n g t h = = = r e c i p e . i n g r e d i e n t U r l s . … l o a d e d I n g r e d i e n t s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) ; } ) ; s t o p S p i n n e r ( ) ; } } ) ; } c a t c h ( e r r ) { / / R e t r y ? } } ) / / . . .
53. t r y { s t a r t S p i n n e r ( ) ; g e t J S O N ( " r e c i p e . j s o n " , f u n c t i o n ( r e c i p e ) { r e n d e r ( r e c i p e . t i t l e ) ; v a r l o a d e d I n g r e d i e n t s = [ ] ; r e c i p e . i n g r e d i e n t U r l s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t U r l ) { t r y { g e t J S O N ( i n g r e d i e n t U r l , f u n c t i o n ( i n g r e d i e n t ) { l o a d e d I n g r e d i e n t s . p u s h ( i n g r e d i e n t ) ; i f ( l o a d e d I n g r e d i e n t s . l e n g t h = = = r e c i p e . i n g r e d i e n t U r l s . l e n g t h ) { l o a d e d I n g r e d i e n t s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) ; } ) ; s t o p S p i n n e r ( ) ; } } ) ; } c a t c h ( e r r ) { / / R e t r y ? } } ) } ) ; } c a t c h ( e r r ) { s t o p S p i n n e r ( ) ; r e n d e r ( " E r r o r " ) ; }
54. Image by Naotake Murayama — via Flickr https://flic.kr/p/kTg6ha
55. . C A T C H ( ) ME IF YOU . T H E N ( ) AND P R O M I S E . A L L ( )
56. A PROMISE CAN BE … fulfilled / resolved rejected pending settled
57. BEFORE AFTER v a r i m g = d o c u m e n t . q u e r y S e l e c t o … f u n c t i o n l o a d e d ( ) { / / L o a d e d ! } i f ( i m g . c o m p l e t e ) { l o a d e d ( ) ; } e l s e { i m g . a d d E v e n t L i s t e n e r ( ' l o a d ' , … } v a r i m g = d o c u m e n t . q u e r y S e l e c t o … / / A t t e n t i o n ! T h i s d o e s n o t e x i … i m g . r e a d y ( ) . t h e n ( f u n c t i o n ( ) { / / L o a d e d ! } ) ;
58. t r y { s t a r t S p i n n e r ( ) ; g e t J S O N ( " r e c i p e . j s o n " , f u n c t i o n ( r e c i p e ) { r e n d e r ( r e c i p e . t i t l e ) ; v a r l o a d e d I n g r e d i e n t s = [ ] ; r e c i p e . i n g r e d i e n t U r l s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t U r l ) { t r y { g e t J S O N ( i n g r e d i e n t U r l , f u n c t i o n ( i n g r e d i e n t ) { l o a d e d I n g r e d i e n t s . p u s h ( i n g r e d i e n t ) ; i f ( l o a d e d I n g r e d i e n t s . l e n g t h = = r e c i p e . i n g r e d i e n t U r … l o a d e d I n g r e d i e n t s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) ; } ) ; s t o p S p i n n e r ( ) ; } } ) ; } c a t c h ( e r r ) { / / R e t r y ? } } ) } ) ; } c a t c h ( e r r ) { s t o p S p i n n e r ( ) ; r e n d e r ( " E r r o r " ) ; }
59. s t a r t S p i n n e r ( ) ; g e t J S O N ( " r e c i p e . j s o n " ) . t h e n ( f u n c t i o n ( r e c i p e ) { r e n d e r ( r e c i p e . t i t l e ) ; r e t u r n P r o m i s e . a l l ( r e c i p e . i n g r e d i e n t U r l s . m a p ( f u n c t i o n ( u r l ) { r e t u r n g e t J S O N ( … ) } . t h e n ( f u n c t i o n ( i n g r e d i e n t s ) { i n g r e d i e n t s . f o r E a c h ( f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) } ) ; s t o p S p i n n e r ( ) ; } ) . c a t c h ( f u n c t i o n ( e r r o r ) { r e n d e r ( " e r r o r " ) ; s t o p S p i n n e r ( ) ; } )
60. s t a r t S p i n n e r ( ) ; g e t J S O N ( " r e c i p e . j s o n " ) . t h e n ( f u n c t i o n ( r e c i p e ) { r e n d e r ( r e c i p e . t i t l e ) ; s e q u e n c e = P r o m i s e . r e s o l v e ( ) ; r e c i p e . i n g r e d i e n t U r l s . m a p ( g e t J S O N ) . f o r E a c h ( f u n c t i o n ( p r o m i s e ) { s e q u e n c e = s e q u e n c e . t h e n ( f u n c t i o n ( ) { r e t u r n p r o m i s e ; } ) . t h e n ( f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . n a m e ) ; } ) ; } ) r e t u r n s e q u e n c e ; } ) . t h e n ( f u n c t i o n ( i n g r e d i e n t s ) { s t o p S p i n n e r ( ) ; } ) . c a t c h ( f u n c t i o n ( e r r o r ) { r e n d e r ( " e r r o r " ) ; s t o p S p i n n e r ( ) ; } )
61. s t a r t S p i n n e r ( ) ; g e t J S O N ( " r e c i p e . j s o n " ) . t h e n ( f u n c t i o n ( r e c i … r e n d e r ( r e c i p e . t i t l e ) ; v a r s e q u e n c e = P r o m i s e . r e s o l v e ( ) ; r e c i p e . i n g r e d i e n t U r l s . m a p ( g e t J S O N ) . f o r E … s e q u e n c e = s e q u e n c e . t h e n ( f u n c t i o n ( ) { r e t u r n p r o m i s e ; } ) . t h e n ( f u n c t i o n ( i n g r e d i e n t ) { r e n d e r ( i n g r e d i e n t . t i t l e ) ; } ) ; } ) r e t u r n s e q u e n c e ; } ) . t h e n ( f u n c t i o n ( i n g r e d i e n t s ) { s t o p S p i n n e r ( ) ; } ) . c a t c h ( f u n c t i o n ( e r r o r ) { r e n d e r ( " e r r o r " ) ; s t o p S p i n n e r ( ) ; } )
62. NOT FOR EVERYTHING
63. 33+ 20+ 29+ 8+ In development
64. PLENTY OF LIBRARIES Q when RSVP.js
65. BEST OF ALL New APIs will use them natively
66. Image by __MV__ — via Flickr https://www.flickr.com/photos/emvau/8704614836 WEB AUDIO 4
67. WHY? Procedural sounds Visualisations and analysis Spatial sounds Exact timing control
68. HOW?
69. NODES source, intermediate, destination
70. v a r c o n t e x t = n e w A u d i o C o n t e x t ( ) ; g e t ( " p i a n o . m p 3 " , { r e s p o n s e T y p e : " a r r a y b u f f e r " } ) . t h e n ( f u n c t i o n ( r e s p o n s e ) { r e t u r n n e w P r o m i s e ( f u n c t i o n ( r e s , r e j ) { r e t u r n c o n t e x t . d e c o d e A u d i o D a t a ( r e s p o n s e , r e s , r e j ) ; } } ) . t h e n ( f u n c t i o n ( b u f f e r ) { v a r s o u r c e N o d e = c o n t e x t . c r e a t e B u f f e r S o u r c e ( ) ; s o u r c e N o d e . b u f f e r = b u f f e r ; s o u r c e N o d e . c o n n e c t ( c o n t e x t . d e s t i n a t i o n ) ; s o u r c e N o d e . s t a r t ( 0 ) ; } ) ;
71. v a r c o n t e x t = n e w A u d i o C o n t e x t ( ) ; g e t ( " p i a n o . m p 3 " , { r e s p o n s e T y p e : " a r r a y b u f f e r " } ) . t h e n ( f u n c t i o n ( r e s p o n s e ) { r e t u r n n e w P r o m i s e ( f u n c t i o n ( r e s , r e j ) { r e t u r n c o n t e x t . d e c o d e A u d i o D a t a ( r e s p o n s e , r e s , r e j ) ; } } ) . t h e n ( f u n c t i o n ( b u f f e r ) { v a r s o u r c e N o d e = c o n t e x t . c r e a t e B u f f e r S o u r c e ( ) ; s o u r c e N o d e . b u f f e r = b u f f e r ; s o u r c e N o d e . c o n n e c t ( c o n t e x t . d e s t i n a t i o n ) ; s o u r c e N o d e . s t a r t ( 0 ) ; } ) ;
72. v a r c o n t e x t = n e w A u d i o C o n t e x t ( ) ; v a r s o u r c e N o d e , g a i n N o d e ; g e t S o u n d ( " p i a n o . m p 3 " ) . t h e n ( f u n c t i o n ( b u f f e r ) { s o u r c e N o d e = c o n t e x t . c r e a t e B u f f e r S o u r c e ( ) ; s o u r c e N o d e . b u f f e r = b u f f e r ; s o u r c e N o d e . l o o p = t r u e ; g a i n N o d e = c o n t e x t . c r e a t e G a i n ( ) ; g a i n N o d e . g a i n . v a l u e = 0 . 5 ; s o u r c e N o d e . c o n n e c t ( g a i n N o d e ) ; g a i n N o d e . c o n n e c t ( c o n t e x t . d e s t i n a t i o n ) ; s o u r c e . s t a r t ( 0 ) ; } ) ;
73. v a r c o n t e x t = n e w A u d i o C o n t e x t ( ) ; v a r s o u r c e N o d e , g a i n N o d e ; g e t S o u n d ( " / a s s e t s / p i a n o . m p 3 " ) . t h e n ( f u n c t i o n ( b u f f e r ) { s o u r c e N o d e = c o n t e x t . c r e a t e B u f f e r S o u r c e ( ) ; s o u r c e N o d e . b u f f e r = b u f f e r ; s o u r c e N o d e . l o o p = t r u e ; g a i n N o d e = c o n t e x t . c r e a t e G a i n ( ) ; g a i n N o d e . g a i n . v a l u e = 0 . 5 ; s o u r c e N o d e . c o n n e c t ( g a i n N o d e ) ; g a i n N o d e . c o n n e c t ( c o n t e x t . d e s t i n a t i o n ) ; s o u r c e N o d e . s t a r t ( 0 ) ; } ) ;
74. FIREFOX WEB AUDIO VISUALIZER
75. MIX MACHINE PIANO Gain Convolve none DRUM Gain Convolve none BASS Gain Convolve none
76. DEMO
77. 10+ 23+ 30+ 6.1+ In development
78. POLYFILL Multiple
79. CSS FEATURE QUERIES 5
80. WHY? No more libraries to load Use it from CSS with @supports Using it in CSS does not break in older browsers
81. JAVASCRIPT C S S . s u p p o r t s ( " ( d i s p l a y : f l e x ) a n d ( d i s p l a y : b l o c k ) " ) ; C S S . s u p p o r t s ( " d i s p l a y " , " m a g i c " ) ; / / W i s h f u l t h i n k i n g
82. JAVASCRIPT C S S . s u p p o r t s ( " ( d i s p l a y : f l e x ) a n d ( d i s p l a y : b l o c k ) " ) ; C S S . s u p p o r t s ( " d i s p l a y " , " m a g i c " ) ; / / W i s h f u l t h i n k i n g
83. CSS . l i n e { b a c k g r o u n d : # 9 0 0 ; } @ s u p p o r t s ( ( d i s p l a y : f l e x ) a n d ( d i s p l a y : b l o c k ) ) { . l i n e - d i s p l a y - f l e x - d i s p l a y - b l o c k { b a c k g r o u n d : # 0 9 0 ; } } @ s u p p o r t s ( d i s p l a y : m a g i c ) { . l i n e - d i s p l a y - m a g i c { b a c k g r o u n d : # 0 9 0 ; } }
84. 28+ 23+ 23+ In development In development
85. POLYFILL Yup
86. Image by Kordite — via Flickr https://flic.kr/p/6qSXrk WEB NOTIFICATIONS 6
87. WHY?
88. v a r n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' T i t l e ' , { b o d y : ' L o r e m i p s u m d o l o r s i t a m e t ' } ) ;
89. v a r n o t i f i c a t i o n ; v a r n o t i f y = f u n c t i o n ( ) { n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' T i t l e ' , { b o d y : ' L o r e m i p s u m d o l o r s i t a m e t ' } ) ; } i f ( N o t i f i c a t i o n . p e r m i s s i o n = = = " g r a n t e d " ) { n o t i f y ( ) ; } e l s e { N o t i f i c a t i o n . r e q u e s t P e r m i s s i o n ( f u n c t i o n ( p e r m i s s i o n ) { i f ( p e r m i s s i o n = = " g r a n t e d " ) { n o t i f y ( ) } } ) ; }
90. / / F i c t i o n a l c o d e ; I f w e o n l y h a d P r o m i s e s . . . v a r n o t i f i c a t i o n ; N o t i f i c a t i o n . r e q u e s t P e r m i s s i o n ( ) . t h e n ( f u n c t i o n ( p e r m i s s i o n ) { i f ( p e r m i s s i o n = = " g r a n t e d " ) { n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' T i t l e ' , { b o d y : ' L o r e m i p s u m d o l o r s i t a m e t ' } ) ; } } ) ;
91. v a r n o t i f i c a t i o n ; v a r n o t i f y = f u n c t i o n ( ) { n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' T i t l e ' , { b o d y : ' L o r e m i p s u m d o l o r s i t a m e t ' } ) ; } i f ( N o t i f i c a t i o n . p e r m i s s i o n = = = " g r a n t e d " ) { n o t i f y ( ) ; } e l s e { N o t i f i c a t i o n . r e q u e s t P e r m i s s i o n ( f u n c t i o n ( p e r m i s s i o n ) { i f ( p e r m i s s i o n = = " g r a n t e d " ) { n o t i f y ( ) } } ) ; }
92. v a r n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' N e w m e s s a g e ' , { b o d y : ' H i t h e r e ! ' , i c o n : ' / a s s e t s / a v a t a r 1 . p n g ' t a g : ' n e w m s g ' } ) ; n o t i f i c a t i o n . a d d E v e n t L i s t e n e r ( " s h o w " , f u n c t i o n ( ) { / / N o t i f i c a t i o n s h o w n s e t T i m e o u t ( f u n c t i o n ( ) { n o t i f i c a t i o n . c l o s e ( ) ; } , 5 0 0 0 ) ; } ) ; n o t i f i c a t i o n . a d d E v e n t L i s t e n e r ( " c l o s e " , f u n c t i o n ( ) { / / N o t i f i c a t i o n c l o s e d } ) ; n o t i f i c a t i o n . a d d E v e n t L i s t e n e r ( " c l i c k " , f u n c t i o n ( ) { / / N o t i f i c a t i o n c l i c k e d } ) ;
93. v a r n o t i f i c a t i o n = n e w N o t i f i c a t i o n ( ' N e w m e s s a g e ' , { b o d y : ' H i t h e r e ! ' , i c o n : ' / a s s e t s / a v a t a r 1 . p n g ' , t a g : ' n e w m s g ' } ) ; n o t i f i c a t i o n . a d d E v e n t L i s t e n e r ( " s h o w " , f u n c t i o n ( ) { / / N o t i f i c a t i o n s h o w n s e t T i m e o u t ( f u n c t i o n ( ) { n o t i f i c a t i o n . c l o s e ( ) ; } , 5 0 0 0 ) ; } ) ; n o t i f i c a t i o n . a d d E v e n t L i s t e n e r ( " c l o s e " , f u n c t i o n ( ) { / / N o t i f i c a t i o n c l o s e d } ) ; n o t i f i c a t i o n . a d d E v e n t L i s t e n e r ( " c l i c k " , f u n c t i o n ( ) { / / N o t i f i c a t i o n c l i c k e d } ) ;
94. 5+ 25+ (future) 22+ 6+ (desktop only) Under consideration
95. POLYFILL Yes, but...
96. SCREEN ORIENTATION API 7
97. WHY? Can be different from the device orientation It always has a value It can lock the screen
98. w i n d o w . s c r e e n . o r i e n t a t i o n . t y p e / / " l a n d s c a p e - p r i m a r y " , " l a n d s c a p e - s e c o n d a r y " / / " p o r t r a i t - p r i m a r y " , " p o r t r a i t - s e c o n d a r y "
99. w i n d o w . s c r e e n . o r i e n t a t i o n . l o c k ( " l a n d s c a p e " ) . t h e n ( f u n c t i o n ( ) { / / L o c k e d } ) . c a t c h ( f u n c t i o n ( ) { / / N o t s o m u c h } )
100. 38+ (future) 25+ (future) yes (prefixed) Unknown 11+ (prefixed)
101. AGAIN, WHY?
102. YOU CAN USE MOST OF THIS TODAY
103. THINK ENHANCEMENT
104. Image by Windell Oskay — via Flickr https://flic.kr/p/foUdnM EXPERIMENT
105. WE SHOULD DRIVE THIS
106. HUNGRY FOR MORE?
107. DASHBOARDS IE Platform Status Chromium (Chrome + Opera) CanIuse.com
108. Web MIDI API Crypto api Web speech api Debug API Presen Ambient light events Vibration API IME API Me Streams API CSS Custom Elements Encoding API User Timing API getUserMedia GamePad api Mutation observer File System API Navigation Timing A IndexDB matchMedia Serviceworkers Device Motion Device Orientation Fullscreen API HTML Imports Page Visibility API Pointer Lock URL API Battery status API EventSource WebDriver Selection API Standby API Standby API Serial API Serial API Web MIDI API Web MIDI API Web speech api Web speech api Debug API Debug API Credential management API Credential management API Presentation API Ambient light events Ambient light events Vibration API IME API IME API MediaRecorder Push API Push API Streams API CSS Font Loading CSS Font Loading Custom Elements Custom Elements requestAut requestAutocomplete() Encoding API Encoding API Resource Timing API Resource Timing API User Timing API WebRTC WebRTC Gam GamePad api Mutation observers Mutation observers File System A File System API Navigation Navigation Timing API IndexDB IndexDB matchMedia matchMedia Websocket Websocket Device Motion Device Orientation Device Orientation Fullscreen API HTML Impo Page Visibility API Page Visibility API Pointer Lock URL API Battery status API Battery status A EventSource EventSource WebDriver Selection API THERE IS SO MUCH MORE
109. THANK YOU