Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The things browsers can do! 
Go play with the web 
Chris Heilmann, SAE Alumni Convention, Berlin, Germany, 23/10/2014
Chris Heilmann 
@codepo8
?
Libraries, Polyfills, Frameworks!
It’s a mobile game!
Of course, we moved on…
CSS Stuff
<div id="#really" 
class="no idea how i do" 
data-foo="thismarkupthing"> 
[…] 
</div>
p {} 
p.oop {} 
p#tag {} 
p[class] {} 
p[title="hi there"]{} 
p[title^="hi"]{} 
p[title$="hi"]{} 
p[title~="hi"]{}
p + p {} 
p > span {} 
p ~ div {}
http://www.smashingmagazine.com/2013/08/20/ 
semantic-css-with-intelligent-selectors/
[href$=".zip"]:before, 
[href$=".gz"]:before { 
content: 'E004'; 
/* unicode for the zip folder icon */ 
}
<a href="http://twitter.com/heydonworks" 
target="_blank" class="new-window-icon 
twitter-icon">@heydonworks</a>
<a href="http://twitter.com/heydonworks" 
target="_blank">@heydonworks</a>
💩 
<ul> 
<li class="list-item-first"></li> 
<li class="list-item"></li> 
<li class="list-item"></li> 
<li class="list-item...
! 
:link 
:visited 
:active 
:hover 
:focus 
:first-child 
:last-child 
:nth-child 
:nth-last-child 
:nth-of-type 
:first-...
https://medium.com/@mjtweaver/the-css-that-you-dont-know- 
about-d5945cea1c94
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> ul > li:first-child {} 
<li></li> 
<li></li> 
<li></li> 
</ul>
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> ul > li:last-child {} 
<li></li> 
<li></li> 
<li></li> 
</ul>
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> ul > li:nth-child(odd) {} 
<li></li> 
<li></li> 
<li></li> 
</ul>
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> ul > li:nth-child(even) {} 
<li></li> 
<li></li> 
<li></li> 
</ul>
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> ul > li:nth-child(3n) {} 
<li></li> 
<li></li> 
<li></li> 
</ul>
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> ul > li:nth-child(3n+1) {} 
<li></li> 
<li></li> 
<li></li> 
</ul>
Support = epic
https://vimeo.com/101718785
http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
CSS calc() 
padding: 40px; 
width: calc(100% - 80px);
Support = now
DOM manipulation
querySelector(); 
querySelectorAll(); 
! 
…and that is all.
classList (add, remove, toggle, contains)
<p class="bovine" data-sound="moo">cow</p> 
! 
p.dataset.sound => "moo"
http://christianheilmann.com/2012/10/10/data-attributes-rock- 
as-both-css-and-javascript-know-them/
<div id="dataplayer" 
data-name="Joe" 
data-score="100"> 
</div> 
var player = 
document.querySelector('#dataplayer'); 
al...
<div id="dataplayer" 
data-name="Joe" 
data-score="100"> 
</div> 
#dataplayer[data-score='10'] { 
color: #c00; 
}
<div id="dataplayer" 
data-name="Joe" 
data-score="100"> 
</div> 
#dataplayer::after { 
content: attr(data-name); 
positio...
MediaQueries
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
{ 
… 
}
Support = epic
No support = opportunity! 
@media all and (min-width:0) { 
… 
} 
@media only { 
… 
}
http://christianheilmann.com/2012/12/19/conditional-loading- 
of-resources-with-mediaqueries/
Inline media queries? 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" 
media...
Gotta load them all! 
<link rel="stylesheet" 
media="screen and (min-width: 600px)" 
href="small.css"> 
<link rel="stylesh...
matchMedia = the JS brother 
if (window.matchMedia('screen and (min-width: 600px)')){ 
document.write('<link rel="styleshe...
Support = meh IE?
document.yougottobekiddin? 
<link rel="stylesheet" class="mediaquerydependent" 
data-media="screen and (min-width: 600px)"...
mediaQuery all the things! 
<img data-src="http://placekitten.com/500/500" 
data-alt="kitten" 
class="mediaquerydependent"...
match and apply… 
var qs = document. 
querySelectorAll('.mediaquerydependent'), 
all = qs, 
cur = null, 
attr = null; 
whi...
but JS is bad! 
<link rel="stylesheet" class="mediaquerydependent" 
href="standard.css" 
data-media="screen and (min-width...
Video
Fallbacks are good! 
<img src="meh.jpg" alt="cute kitten photo">
Testable fallbacks! 
var img = document.querySelector('img'); 
img.addEventListener('error', 
function(ev) { 
if (this.nat...
<video controls> 
<source src="dynamicsearch.mp4" type="video/mp4"> 
</source> 
<a href="dynamicsearch.mp4"> 
<img src="dy...
Fallback for an extinct case 
How about writing a 
JavaScript that tests for 
the video support?! 
I mean, there is ! 
can...
Codecs are hard ;) 
The canPlayType(type) method must return the 
empty string if type is a type that the user agent 
know...
Bullet proof video! 
var v = document.querySelector('video'), 
sources = v.querySelectorAll('source'), 
lastsource = sourc...
Canvas
http://phaser.io/
http://www.pixijs.com/
http://hub.gravit.io/browser/
A very basic painting API…
A collection of pixels!
Zoom and pick… 
http://thewebrocks.com/demos/zoom-and-pick/
And generate… 
https://github.com/codepo8/zoom-and-pick
Canvas + 
FileReader =
https://www.youtube.com/watch?v=gnbLLQwZxeA
http://removephotodata.com
https://github.com/jseidelin/exif-js/ 
Make: LGE! 
Model: Nexus 5! 
XResolution: 72! 
YResolution: 72! 
ResolutionUnit: 2!...
c = document.querySelector('canvas'); 
cx = c.getContext('2d'); 
c.width = w = img.naturalHeight; 
c.height = h = img.natu...
Support = good 
https://github.com/eligrey/FileSaver.js
Support = good 
https://github.com/eligrey/FileSaver.js
Support = eek 
https://github.com/eligrey/FileSaver.js
http://stuk.github.io/jszip/ 
http://makethumbnails.com http://stuk.github.io/jszip/
<tag> You’re it!
Share, find, re-use…
Share, find, re-use…
Chris Heilmann 
christianheilmann.com 
@codepo8 
chris.heilmann@gmail.com 
Thank you!
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
Upcoming SlideShare
Loading in …5
×

The things browsers can do! SAE Alumni Convention 2014

3,684 views

Published on

A talk about allowing HTML5 to graduate from a toy language of web enthusiasts to something used in every day web products. Shows how far browsers have come in support and how to use the standards without resorting to lots of abstraction libraries

Published in: Software, Education

The things browsers can do! SAE Alumni Convention 2014

  1. 1. The things browsers can do! Go play with the web Chris Heilmann, SAE Alumni Convention, Berlin, Germany, 23/10/2014
  2. 2. Chris Heilmann @codepo8
  3. 3. ?
  4. 4. Libraries, Polyfills, Frameworks!
  5. 5. It’s a mobile game!
  6. 6. Of course, we moved on…
  7. 7. CSS Stuff
  8. 8. <div id="#really" class="no idea how i do" data-foo="thismarkupthing"> […] </div>
  9. 9. p {} p.oop {} p#tag {} p[class] {} p[title="hi there"]{} p[title^="hi"]{} p[title$="hi"]{} p[title~="hi"]{}
  10. 10. p + p {} p > span {} p ~ div {}
  11. 11. http://www.smashingmagazine.com/2013/08/20/ semantic-css-with-intelligent-selectors/
  12. 12. [href$=".zip"]:before, [href$=".gz"]:before { content: 'E004'; /* unicode for the zip folder icon */ }
  13. 13. <a href="http://twitter.com/heydonworks" target="_blank" class="new-window-icon twitter-icon">@heydonworks</a>
  14. 14. <a href="http://twitter.com/heydonworks" target="_blank">@heydonworks</a>
  15. 15. 💩 <ul> <li class="list-item-first"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item-last"></li> </ul>
  16. 16. ! :link :visited :active :hover :focus :first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :checked :enabled :disabled :not()
  17. 17. https://medium.com/@mjtweaver/the-css-that-you-dont-know- about-d5945cea1c94
  18. 18. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:first-child {} <li></li> <li></li> <li></li> </ul>
  19. 19. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:last-child {} <li></li> <li></li> <li></li> </ul>
  20. 20. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(odd) {} <li></li> <li></li> <li></li> </ul>
  21. 21. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(even) {} <li></li> <li></li> <li></li> </ul>
  22. 22. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n) {} <li></li> <li></li> <li></li> </ul>
  23. 23. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n+1) {} <li></li> <li></li> <li></li> </ul>
  24. 24. Support = epic
  25. 25. https://vimeo.com/101718785
  26. 26. http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
  27. 27. CSS calc() padding: 40px; width: calc(100% - 80px);
  28. 28. Support = now
  29. 29. DOM manipulation
  30. 30. querySelector(); querySelectorAll(); ! …and that is all.
  31. 31. classList (add, remove, toggle, contains)
  32. 32. <p class="bovine" data-sound="moo">cow</p> ! p.dataset.sound => "moo"
  33. 33. http://christianheilmann.com/2012/10/10/data-attributes-rock- as-both-css-and-javascript-know-them/
  34. 34. <div id="dataplayer" data-name="Joe" data-score="100"> </div> var player = document.querySelector('#dataplayer'); alert('Score:' + player.dataset.score); alert('Name:' + player.dataset.name); player.dataset.score = 10; alert('Score:' + player.dataset.score);
  35. 35. <div id="dataplayer" data-name="Joe" data-score="100"> </div> #dataplayer[data-score='10'] { color: #c00; }
  36. 36. <div id="dataplayer" data-name="Joe" data-score="100"> </div> #dataplayer::after { content: attr(data-name); position: absolute; left: -50px; } #dataplayer::before { opacity: 0; content: attr(data-score); position: absolute; left: 100px; }
  37. 37. MediaQueries
  38. 38. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }
  39. 39. Support = epic
  40. 40. No support = opportunity! @media all and (min-width:0) { … } @media only { … }
  41. 41. http://christianheilmann.com/2012/12/19/conditional-loading- of-resources-with-mediaqueries/
  42. 42. Inline media queries? <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css"> <title>CSS files with media queries</title> </head> <body> </body> </html>
  43. 43. Gotta load them all! <link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">
  44. 44. matchMedia = the JS brother if (window.matchMedia('screen and (min-width: 600px)')){ document.write('<link rel="stylesheet" href="small.css">'); }
  45. 45. Support = meh IE?
  46. 46. document.yougottobekiddin? <link rel="stylesheet" class="mediaquerydependent" data-media="screen and (min-width: 600px)" data-href="green.css"> <link rel="stylesheet" class="mediaquerydependent" data-media="screen and (min-width: 4000px)" data-href="blue.css">
  47. 47. mediaQuery all the things! <img data-src="http://placekitten.com/500/500" data-alt="kitten" class="mediaquerydependent" data-media="screen and (min-width: 600px)">
  48. 48. match and apply… var qs = document. querySelectorAll('.mediaquerydependent'), all = qs, cur = null, attr = null; while (all--) { cur = qs[all]; if (cur.dataset.media && window.matchMedia(cur.dataset.media).matches) { for (attr in cur.dataset) { if (attr !== 'media') { cur.setAttribute(attr, cur.dataset[attr]); } } } }
  49. 49. but JS is bad! <link rel="stylesheet" class="mediaquerydependent" href="standard.css" data-media="screen and (min-width: 600px)" data-href="green.css">
  50. 50. Video
  51. 51. Fallbacks are good! <img src="meh.jpg" alt="cute kitten photo">
  52. 52. Testable fallbacks! var img = document.querySelector('img'); img.addEventListener('error', function(ev) { if (this.naturalWidth === 0 && this.naturalHeight === 0) { console.log('Image ' + this.src + ' not loaded'); } }, false);
  53. 53. <video controls> <source src="dynamicsearch.mp4" type="video/mp4"> </source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> </a> <p>Click image to play a video demo of dynamic app search</p> </video> Bullet proof video?
  54. 54. Fallback for an extinct case How about writing a JavaScript that tests for the video support?! I mean, there is ! canPlayType(type), right?
  55. 55. Codecs are hard ;) The canPlayType(type) method must return the empty string if type is a type that the user agent knows it cannot render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return "maybe" otherwise.! ! W3C media elements spec
  56. 56. Bullet proof video! var v = document.querySelector('video'), sources = v.querySelectorAll('source'), lastsource = sources[sources.length-1]; lastsource.addEventListener('error', function(ev) { var d = document.createElement('div'); d.innerHTML = v.innerHTML; v.parentNode.replaceChild(d, v); }, false);
  57. 57. Canvas
  58. 58. http://phaser.io/
  59. 59. http://www.pixijs.com/
  60. 60. http://hub.gravit.io/browser/
  61. 61. A very basic painting API…
  62. 62. A collection of pixels!
  63. 63. Zoom and pick… http://thewebrocks.com/demos/zoom-and-pick/
  64. 64. And generate… https://github.com/codepo8/zoom-and-pick
  65. 65. Canvas + FileReader =
  66. 66. https://www.youtube.com/watch?v=gnbLLQwZxeA
  67. 67. http://removephotodata.com
  68. 68. https://github.com/jseidelin/exif-js/ Make: LGE! Model: Nexus 5! XResolution: 72! YResolution: 72! ResolutionUnit: 2! YCbCrPositioning: 1! ExifIFDPointer: 134! GPSInfoIFDPointer: 462! ExposureTime: 0.009523809523809525! FNumber: 2.4! ISOSpeedRatings: 104! ExifVersion: 0220! DateTimeOriginal: 2014:10:19 17:28:22! DateTimeDigitized: 2014:10:19 17:28:22! ComponentsConfiguration: YCbCr! ShutterSpeedValue: 6.713! ApertureValue: 2.52! ExposureBias: 0! Flash: Flash did not fire! FocalLength: 3.97! FlashpixVersion: 0100! ColorSpace: 1! PixelXDimension: 1944! PixelYDimension: 2592! InteroperabilityIFDPointer: 432
  69. 69. c = document.querySelector('canvas'); cx = c.getContext('2d'); c.width = w = img.naturalHeight; c.height = h = img.naturalWidth; cx.drawImage(img, 0, 0, w, h); ! [EXIF] <a href="' + c.toDataURL('image/jpeg', 0.9) + '" '+ 'download="' + dlname + '">Download clean image</a>
  70. 70. Support = good https://github.com/eligrey/FileSaver.js
  71. 71. Support = good https://github.com/eligrey/FileSaver.js
  72. 72. Support = eek https://github.com/eligrey/FileSaver.js
  73. 73. http://stuk.github.io/jszip/ http://makethumbnails.com http://stuk.github.io/jszip/
  74. 74. <tag> You’re it!
  75. 75. Share, find, re-use…
  76. 76. Share, find, re-use…
  77. 77. Chris Heilmann christianheilmann.com @codepo8 chris.heilmann@gmail.com Thank you!

×