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
×

of

The things browsers can do! SAE Alumni Convention 2014 Slide 1 The things browsers can do! SAE Alumni Convention 2014 Slide 2 The things browsers can do! SAE Alumni Convention 2014 Slide 3 The things browsers can do! SAE Alumni Convention 2014 Slide 4 The things browsers can do! SAE Alumni Convention 2014 Slide 5 The things browsers can do! SAE Alumni Convention 2014 Slide 6 The things browsers can do! SAE Alumni Convention 2014 Slide 7 The things browsers can do! SAE Alumni Convention 2014 Slide 8 The things browsers can do! SAE Alumni Convention 2014 Slide 9 The things browsers can do! SAE Alumni Convention 2014 Slide 10 The things browsers can do! SAE Alumni Convention 2014 Slide 11 The things browsers can do! SAE Alumni Convention 2014 Slide 12 The things browsers can do! SAE Alumni Convention 2014 Slide 13 The things browsers can do! SAE Alumni Convention 2014 Slide 14 The things browsers can do! SAE Alumni Convention 2014 Slide 15 The things browsers can do! SAE Alumni Convention 2014 Slide 16 The things browsers can do! SAE Alumni Convention 2014 Slide 17 The things browsers can do! SAE Alumni Convention 2014 Slide 18 The things browsers can do! SAE Alumni Convention 2014 Slide 19 The things browsers can do! SAE Alumni Convention 2014 Slide 20 The things browsers can do! SAE Alumni Convention 2014 Slide 21 The things browsers can do! SAE Alumni Convention 2014 Slide 22 The things browsers can do! SAE Alumni Convention 2014 Slide 23 The things browsers can do! SAE Alumni Convention 2014 Slide 24 The things browsers can do! SAE Alumni Convention 2014 Slide 25 The things browsers can do! SAE Alumni Convention 2014 Slide 26 The things browsers can do! SAE Alumni Convention 2014 Slide 27 The things browsers can do! SAE Alumni Convention 2014 Slide 28 The things browsers can do! SAE Alumni Convention 2014 Slide 29 The things browsers can do! SAE Alumni Convention 2014 Slide 30 The things browsers can do! SAE Alumni Convention 2014 Slide 31 The things browsers can do! SAE Alumni Convention 2014 Slide 32 The things browsers can do! SAE Alumni Convention 2014 Slide 33 The things browsers can do! SAE Alumni Convention 2014 Slide 34 The things browsers can do! SAE Alumni Convention 2014 Slide 35 The things browsers can do! SAE Alumni Convention 2014 Slide 36 The things browsers can do! SAE Alumni Convention 2014 Slide 37 The things browsers can do! SAE Alumni Convention 2014 Slide 38 The things browsers can do! SAE Alumni Convention 2014 Slide 39 The things browsers can do! SAE Alumni Convention 2014 Slide 40 The things browsers can do! SAE Alumni Convention 2014 Slide 41 The things browsers can do! SAE Alumni Convention 2014 Slide 42 The things browsers can do! SAE Alumni Convention 2014 Slide 43 The things browsers can do! SAE Alumni Convention 2014 Slide 44 The things browsers can do! SAE Alumni Convention 2014 Slide 45 The things browsers can do! SAE Alumni Convention 2014 Slide 46 The things browsers can do! SAE Alumni Convention 2014 Slide 47 The things browsers can do! SAE Alumni Convention 2014 Slide 48 The things browsers can do! SAE Alumni Convention 2014 Slide 49 The things browsers can do! SAE Alumni Convention 2014 Slide 50 The things browsers can do! SAE Alumni Convention 2014 Slide 51 The things browsers can do! SAE Alumni Convention 2014 Slide 52 The things browsers can do! SAE Alumni Convention 2014 Slide 53 The things browsers can do! SAE Alumni Convention 2014 Slide 54 The things browsers can do! SAE Alumni Convention 2014 Slide 55 The things browsers can do! SAE Alumni Convention 2014 Slide 56 The things browsers can do! SAE Alumni Convention 2014 Slide 57 The things browsers can do! SAE Alumni Convention 2014 Slide 58 The things browsers can do! SAE Alumni Convention 2014 Slide 59 The things browsers can do! SAE Alumni Convention 2014 Slide 60 The things browsers can do! SAE Alumni Convention 2014 Slide 61 The things browsers can do! SAE Alumni Convention 2014 Slide 62 The things browsers can do! SAE Alumni Convention 2014 Slide 63 The things browsers can do! SAE Alumni Convention 2014 Slide 64 The things browsers can do! SAE Alumni Convention 2014 Slide 65 The things browsers can do! SAE Alumni Convention 2014 Slide 66 The things browsers can do! SAE Alumni Convention 2014 Slide 67 The things browsers can do! SAE Alumni Convention 2014 Slide 68 The things browsers can do! SAE Alumni Convention 2014 Slide 69 The things browsers can do! SAE Alumni Convention 2014 Slide 70 The things browsers can do! SAE Alumni Convention 2014 Slide 71 The things browsers can do! SAE Alumni Convention 2014 Slide 72 The things browsers can do! SAE Alumni Convention 2014 Slide 73 The things browsers can do! SAE Alumni Convention 2014 Slide 74 The things browsers can do! SAE Alumni Convention 2014 Slide 75 The things browsers can do! SAE Alumni Convention 2014 Slide 76 The things browsers can do! SAE Alumni Convention 2014 Slide 77 The things browsers can do! SAE Alumni Convention 2014 Slide 78 The things browsers can do! SAE Alumni Convention 2014 Slide 79 The things browsers can do! SAE Alumni Convention 2014 Slide 80 The things browsers can do! SAE Alumni Convention 2014 Slide 81 The things browsers can do! SAE Alumni Convention 2014 Slide 82 The things browsers can do! SAE Alumni Convention 2014 Slide 83 The things browsers can do! SAE Alumni Convention 2014 Slide 84
Upcoming SlideShare
How HTML5 missed its graduation - #TrondheimDC
Next
Download to read offline and view in fullscreen.

12 Likes

Share

Download to read offline

The things browsers can do! SAE Alumni Convention 2014

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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!
  • virajs

    Dec. 3, 2015
  • ljupkai

    Nov. 11, 2014
  • jasonli1880

    Nov. 7, 2014
  • ssuser8d245d

    Nov. 5, 2014
  • chjin

    Nov. 3, 2014
  • bcroq

    Oct. 30, 2014
  • torarve

    Oct. 30, 2014
  • jalbertbowden

    Oct. 28, 2014
  • cowrie1

    Oct. 26, 2014
  • nmovold

    Oct. 23, 2014
  • freethan

    Oct. 23, 2014
  • chatronik

    Oct. 22, 2014

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

Views

Total views

4,019

On Slideshare

0

From embeds

0

Number of embeds

1,188

Actions

Downloads

27

Shares

0

Comments

0

Likes

12

×