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.
HTML5 beyond the hype
Chris Heilmann, JFokus , Stockholm, Sweden, 02/02/15
@codepo8
Chris Heilmann
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-o...
<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
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);	
	 po...
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="styleshee...
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.length,	
cur = null,	
attr = null...
but JS is bad!
<link rel="stylesheet" class="mediaquerydependent" 	
href="standard.css"	
data-media="screen and (min-width...
Video
<img src="meh.jpg" alt="cute kitten photo">
Fallbacks are good!
var img = document.querySelector('img');	
img.addEventListener('error',
function(ev) {	
if (this.naturalWidth === 0 && 	
t...
<video controls>	
<source src="dynamicsearch.mp4" type="video/mp4">	
</source>	
<a href="dynamicsearch.mp4">	
<img src="dy...
Bullet proof video!
var v = document.querySelector('video'),	
sources = v.querySelectorAll('source'),	
lastsource = source...
The canPlayType(type) method must return the
empty string if type is a type that the user agent
knows it cannot render or ...
Canvas
http://phaser.io/
http://www.pixijs.com/
http://hub.gravit.io/browser/
A very basic painting API…
A collection of pixels!
https://codepo8.github.io/canvas-images-and-pixels/
http://thewebrocks.com/demos/zoom-and-pick/
Zoom and pick…
https://github.com/codepo8/zoom-and-pick
And generate…
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!
YCbC...
c = document.querySelector('canvas');	
cx = c.getContext('2d');	
c.width = w = img.naturalHeight;	
c.height = h = img.natu...
https://github.com/eligrey/FileSaver.js
Support = good
https://github.com/eligrey/FileSaver.js
Support = good
https://github.com/eligrey/FileSaver.js
Support = eek
http://stuk.github.io/jszip/
http://makethumbnails.com http://stuk.github.io/jszip/
JavaScript evolution…
http://colintoh.com/blog/5-array-methods-that-you-should-use-today
Fun with arrays…
Fun with arrays…
indexOf() returns the first index at which a
given element can be found in
the array, or -1 if it is not p...
Fun with arrays…
map() creates a new array with the
results of calling a function on
every element in this array.
reduce()...
http://updates.html5rocks.com/2015/01/ES6-Template-Strings
Template strings
var a = 10;	
var b = 10;	
console.log(`JavaScript first appeared 	
${a+b} years ago. Crazy!`);	
//=> JavaScript first appe...
function fn() { 	
return 42; 	
}	
console.log(`Meaning of life: ${fn()}`);	
//=> Meaning of life: 42	
!
var author = {name...
var greeting = "Hello 	
World";	
!
var greeting = "Hello " +	
“World";	
!
console.log(`you just	
made the first step	
into...
More tomorrow!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
<tag> You’re it!
Share, find, re-use…
Share, find, re-use…
Chris Heilmann
christianheilmann.com

@codepo8

Thank you!
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
Upcoming SlideShare
Loading in …5
×

HTML5 after the hype - JFokus2015

4,100 views

Published on

A whirlwind tour of some of the great HTML5 features available across browsers today.

Published in: Education

HTML5 after the hype - JFokus2015

  1. 1. HTML5 beyond the hype Chris Heilmann, JFokus , Stockholm, Sweden, 02/02/15
  2. 2. @codepo8 Chris Heilmann
  3. 3. CSS Stuff
  4. 4. <div id="#really" class="no idea how i do" data-foo="thismarkupthing"> […] </div>
  5. 5. p {} p.oop {} p#tag {} p[class] {} p[title="hi there"]{} p[title^="hi"]{} p[title$="hi"]{} p[title~="hi"]{}
  6. 6. p + p {} p > span {} p ~ div {}
  7. 7. http://www.smashingmagazine.com/2013/08/20/ semantic-css-with-intelligent-selectors/
  8. 8. [href$=".zip"]:before, [href$=".gz"]:before { content: 'E004'; /* unicode for the zip folder icon */ }
  9. 9. <a href="http://twitter.com/heydonworks" target="_blank" class="new-window-icon twitter-icon">@heydonworks</a>
  10. 10. <a href="http://twitter.com/heydonworks" target="_blank">@heydonworks</a>
  11. 11. <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> 💩
  12. 12. ! :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()
  13. 13. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:first-child {} <li></li> <li></li> <li></li> </ul>
  14. 14. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:last-child {} <li></li> <li></li> <li></li> </ul>
  15. 15. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(odd) {} <li></li> <li></li> <li></li> </ul>
  16. 16. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(even) {} <li></li> <li></li> <li></li> </ul>
  17. 17. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n) {} <li></li> <li></li> <li></li> </ul>
  18. 18. <ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n+1) {} <li></li> <li></li> <li></li> </ul>
  19. 19. Support = epic
  20. 20. https://vimeo.com/101718785
  21. 21. http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
  22. 22. DOM manipulation
  23. 23. querySelector(); querySelectorAll(); …and that is all.
  24. 24. classList (add, remove, toggle, contains)
  25. 25. <p class="bovine" data-sound="moo">cow</p> ! p.dataset.sound => "moo"
  26. 26. http://christianheilmann.com/2012/10/10/data-attributes- rock-as-both-css-and-javascript-know-them/
  27. 27. <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);
  28. 28. <div id="dataplayer" data-name="Joe" data-score="100"> </div> #dataplayer[data-score='10'] { color: #c00; }
  29. 29. <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; }
  30. 30. MediaQueries
  31. 31. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }
  32. 32. Support = epic
  33. 33. No support = opportunity! @media all and (min-width:0) { … } @media only { … }
  34. 34. http://christianheilmann.com/2012/12/19/conditional- loading-of-resources-with-mediaqueries/
  35. 35. 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>
  36. 36. 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">
  37. 37. matchMedia = the JS brother if (window.matchMedia('screen and (min-width: 600px)')){ document.write('<link rel="stylesheet" href="small.css">'); }
  38. 38. Support = meh IE?
  39. 39. 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">
  40. 40. mediaQuery all the things! <img data-src="http://placekitten.com/500/500" data-alt="kitten" class="mediaquerydependent" data-media="screen and (min-width: 600px)">
  41. 41. match and apply… var qs = document. querySelectorAll('.mediaquerydependent'), all = qs.length, 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]); } } } }
  42. 42. but JS is bad! <link rel="stylesheet" class="mediaquerydependent" href="standard.css" data-media="screen and (min-width: 600px)" data-href="green.css">
  43. 43. Video
  44. 44. <img src="meh.jpg" alt="cute kitten photo"> Fallbacks are good!
  45. 45. 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); Testable fallbacks!
  46. 46. <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?
  47. 47. 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);
  48. 48. 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 Codecs are hard ;)
  49. 49. Canvas
  50. 50. http://phaser.io/
  51. 51. http://www.pixijs.com/
  52. 52. http://hub.gravit.io/browser/
  53. 53. A very basic painting API…
  54. 54. A collection of pixels!
  55. 55. https://codepo8.github.io/canvas-images-and-pixels/
  56. 56. http://thewebrocks.com/demos/zoom-and-pick/ Zoom and pick…
  57. 57. https://github.com/codepo8/zoom-and-pick And generate…
  58. 58. Canvas + FileReader =
  59. 59. https://www.youtube.com/watch?v=gnbLLQwZxeA
  60. 60. http://removephotodata.com
  61. 61. 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
  62. 62. 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); ! <a href="' + c.toDataURL('image/jpeg', 0.9) + '" '+ 'download="' + dlname + '">Download clean image</a> [EXIF]
  63. 63. https://github.com/eligrey/FileSaver.js Support = good
  64. 64. https://github.com/eligrey/FileSaver.js Support = good
  65. 65. https://github.com/eligrey/FileSaver.js Support = eek
  66. 66. http://stuk.github.io/jszip/ http://makethumbnails.com http://stuk.github.io/jszip/
  67. 67. JavaScript evolution…
  68. 68. http://colintoh.com/blog/5-array-methods-that-you-should-use-today Fun with arrays…
  69. 69. Fun with arrays… indexOf() returns the first index at which a given element can be found in the array, or -1 if it is not present. filter() creates a new array with all elements that pass the test of a provided function forEach() executes a provided function once per array element.
  70. 70. Fun with arrays… map() creates a new array with the results of calling a function on every element in this array. reduce() applies a function against an accumulator and each value of the array (from left-to-right) has to reduce it to a single value.
  71. 71. http://updates.html5rocks.com/2015/01/ES6-Template-Strings Template strings
  72. 72. var a = 10; var b = 10; console.log(`JavaScript first appeared ${a+b} years ago. Crazy!`); //=> JavaScript first appeared 20 years ago. Crazy! ! console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`); //=> The number of JS frameworks is 40 and not 2000. String substitution…
  73. 73. function fn() { return 42; } console.log(`Meaning of life: ${fn()}`); //=> Meaning of life: 42 ! var author = {name: ‘Douglas Adams'}; console.log(`I really enjoy, ${user.name.toUpperCase()}.`); Function and data access…
  74. 74. var greeting = "Hello World"; ! var greeting = "Hello " + “World"; ! console.log(`you just made the first step into a larger World!`); Multiline strings!
  75. 75. More tomorrow! https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
  76. 76. <tag> You’re it!
  77. 77. Share, find, re-use…
  78. 78. Share, find, re-use…
  79. 79. Chris Heilmann christianheilmann.com @codepo8 Thank you!

×