SlideShare a Scribd company logo
1 of 82
Download to read offline
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/
HTML5 after the hype - JFokus2015
[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"></li>	
<li class="list-item"></li>	
<li class="list-item-last"></li>	
</ul>
&#128169;
!
: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()
<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');	
alert('Score:' + player.dataset.score);	
alert('Name:' + player.dataset.name);	
player.dataset.score = 10;	
alert('Score:' + player.dataset.score);
<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);	
	 position: absolute; 	
	 left: -50px;	
}	
#dataplayer::before {	
	 opacity: 0;	
	 content: attr(data-score);	
	 position: absolute; 	
	 left: 100px;	
}
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="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>
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">
matchMedia = the JS brother
if (window.matchMedia('screen and (min-width: 600px)')){	
document.write('<link rel="stylesheet" 	
href="small.css">');	
}
Support = meh IE?
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">
mediaQuery all the things!
<img data-src="http://placekitten.com/500/500" 	
data-alt="kitten" 	
class="mediaquerydependent" 	
data-media="screen and (min-width: 600px)">
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]);	
}	
}	
}	
}
but JS is bad!
<link rel="stylesheet" class="mediaquerydependent" 	
href="standard.css"	
data-media="screen and (min-width: 600px)" 	
data-href="green.css">
Video
HTML5 after the hype - JFokus2015
<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 && 	
this.naturalHeight === 0) {	
console.log('Image ' + this.src + 	
' not loaded');	
}	
}, false);
Testable fallbacks!
<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?
HTML5 after the hype - JFokus2015
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);
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 ;)
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!
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
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]
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 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.
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.
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 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…
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…
var greeting = "Hello 	
World";	
!
var greeting = "Hello " +	
“World";	
!
console.log(`you just	
made the first step	
into a larger	
World!`);	
Multiline strings!
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!

More Related Content

What's hot

Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !Microsoft
 
Web Components With Rails
Web Components With RailsWeb Components With Rails
Web Components With RailsBoris Nadion
 
Practical auto layout
Practical auto layoutPractical auto layout
Practical auto layoutInferis
 
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变Kejun Zhang
 
Rapidly Iterating Across Platforms with Server-Driven UI
Rapidly Iterating Across Platforms with Server-Driven UIRapidly Iterating Across Platforms with Server-Driven UI
Rapidly Iterating Across Platforms with Server-Driven UILaura Kelly
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
A miało być tak... bez wycieków
A miało być tak... bez wyciekówA miało być tak... bez wycieków
A miało być tak... bez wyciekówKonrad Kokosa
 
Rapidly Iterating Across Platforms using Server-Driven UI
Rapidly Iterating Across Platforms using Server-Driven UIRapidly Iterating Across Platforms using Server-Driven UI
Rapidly Iterating Across Platforms using Server-Driven UILaura Kelly
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1Bitla Software
 
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军裕波 周
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)jeresig
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09Frédéric Harper
 

What's hot (19)

Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !Elasticsearch sur Azure : Make sense of your (BIG) data !
Elasticsearch sur Azure : Make sense of your (BIG) data !
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Web Components With Rails
Web Components With RailsWeb Components With Rails
Web Components With Rails
 
Practical auto layout
Practical auto layoutPractical auto layout
Practical auto layout
 
从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变从YUI2到YUI3看前端的演变
从YUI2到YUI3看前端的演变
 
Rapidly Iterating Across Platforms with Server-Driven UI
Rapidly Iterating Across Platforms with Server-Driven UIRapidly Iterating Across Platforms with Server-Driven UI
Rapidly Iterating Across Platforms with Server-Driven UI
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
A miało być tak... bez wycieków
A miało być tak... bez wyciekówA miało być tak... bez wycieków
A miało być tak... bez wycieków
 
Rapidly Iterating Across Platforms using Server-Driven UI
Rapidly Iterating Across Platforms using Server-Driven UIRapidly Iterating Across Platforms using Server-Driven UI
Rapidly Iterating Across Platforms using Server-Driven UI
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
Prototype UI
Prototype UIPrototype UI
Prototype UI
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军分层语义化模板实践 ---- 张克军
分层语义化模板实践 ---- 张克军
 
Learning d3
Learning d3Learning d3
Learning d3
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
 

Similar to HTML5 after the hype - JFokus2015

The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014Christian Heilmann
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02PL dream
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
 
The Future of CSS with Web components
The Future of CSS with Web componentsThe Future of CSS with Web components
The Future of CSS with Web componentsdevObjective
 
The Future of CSS with Web Components
The Future of CSS with Web ComponentsThe Future of CSS with Web Components
The Future of CSS with Web ComponentsColdFusionConference
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
Library Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & RomaniaLibrary Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & RomaniaMark Belinsky
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibilityEb Styles
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVCAlive Kuo
 
Css sprite_maker-1
Css  sprite_maker-1Css  sprite_maker-1
Css sprite_maker-1lokku
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
The Big Picture: Responsive Images in Action #devcon13
The Big Picture: Responsive Images in Action #devcon13The Big Picture: Responsive Images in Action #devcon13
The Big Picture: Responsive Images in Action #devcon13Matthias Lau
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Chris Alfano
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
Being a tweaker modern web performance techniques
Being a tweaker   modern web performance techniquesBeing a tweaker   modern web performance techniques
Being a tweaker modern web performance techniquesChris Love
 
HTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleHTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleChris Mills
 

Similar to HTML5 after the hype - JFokus2015 (20)

The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014The things browsers can do! SAE Alumni Convention 2014
The things browsers can do! SAE Alumni Convention 2014
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
The Future of CSS with Web components
The Future of CSS with Web componentsThe Future of CSS with Web components
The Future of CSS with Web components
 
The Future of CSS with Web Components
The Future of CSS with Web ComponentsThe Future of CSS with Web Components
The Future of CSS with Web Components
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Library Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & RomaniaLibrary Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & Romania
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Css sprite_maker-1
Css  sprite_maker-1Css  sprite_maker-1
Css sprite_maker-1
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
The Big Picture: Responsive Images in Action #devcon13
The Big Picture: Responsive Images in Action #devcon13The Big Picture: Responsive Images in Action #devcon13
The Big Picture: Responsive Images in Action #devcon13
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
Being a tweaker modern web performance techniques
Being a tweaker   modern web performance techniquesBeing a tweaker   modern web performance techniques
Being a tweaker modern web performance techniques
 
HTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleHTML5 and CSS3 Shizzle
HTML5 and CSS3 Shizzle
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptx3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptxmary850239
 
Plant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptxPlant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptxHimansu10
 
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptxMetabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptxDr. Santhosh Kumar. N
 
3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptx3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptxmary850239
 
ICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdfICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdfVanessa Camilleri
 
Pharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdfPharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdfSumit Tiwari
 
The basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxThe basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxheathfieldcps1
 
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxBBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxProf. Kanchan Kumari
 
3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptx3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptxmary850239
 
VIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdfVIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdfArthyR3
 
Alamkara theory by Bhamaha Indian Poetics (1).pptx
Alamkara theory by Bhamaha Indian Poetics (1).pptxAlamkara theory by Bhamaha Indian Poetics (1).pptx
Alamkara theory by Bhamaha Indian Poetics (1).pptxDhatriParmar
 
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYSDLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYSTeacherNicaPrintable
 
Material Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.pptMaterial Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.pptBanaras Hindu University
 
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxAUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxiammrhaywood
 
How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17
How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17
How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17Celine George
 
25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...
25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...
25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...Nguyen Thanh Tu Collection
 
Auchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian PoeticsAuchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian PoeticsDhatriParmar
 
Riti theory by Vamana Indian poetics.pptx
Riti theory by Vamana Indian poetics.pptxRiti theory by Vamana Indian poetics.pptx
Riti theory by Vamana Indian poetics.pptxDhatriParmar
 

Recently uploaded (20)

3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptx3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptx
 
Plant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptxPlant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptx
 
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptxMetabolism of  lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
Metabolism of lipoproteins & its disorders(Chylomicron & VLDL & LDL).pptx
 
3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptx3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptx
 
ICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdfICS2208 Lecture4 Intelligent Interface Agents.pdf
ICS2208 Lecture4 Intelligent Interface Agents.pdf
 
Pharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdfPharmacology chapter No 7 full notes.pdf
Pharmacology chapter No 7 full notes.pdf
 
t-test Parametric test Biostatics and Research Methodology
t-test Parametric test Biostatics and Research Methodologyt-test Parametric test Biostatics and Research Methodology
t-test Parametric test Biostatics and Research Methodology
 
The basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptxThe basics of sentences session 8pptx.pptx
The basics of sentences session 8pptx.pptx
 
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxBBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
 
3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptx3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptx
 
VIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdfVIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdf
 
Alamkara theory by Bhamaha Indian Poetics (1).pptx
Alamkara theory by Bhamaha Indian Poetics (1).pptxAlamkara theory by Bhamaha Indian Poetics (1).pptx
Alamkara theory by Bhamaha Indian Poetics (1).pptx
 
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYSDLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
 
Material Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.pptMaterial Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.ppt
 
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxAUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
 
Least Significance Difference:Biostatics and Research Methodology
Least Significance Difference:Biostatics and Research MethodologyLeast Significance Difference:Biostatics and Research Methodology
Least Significance Difference:Biostatics and Research Methodology
 
How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17
How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17
How to Customise Quotation's Appearance Using PDF Quote Builder in Odoo 17
 
25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...
25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...
25 CHUYÊN ĐỀ ÔN THI TỐT NGHIỆP THPT 2023 – BÀI TẬP PHÁT TRIỂN TỪ ĐỀ MINH HỌA...
 
Auchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian PoeticsAuchitya Theory by Kshemendra Indian Poetics
Auchitya Theory by Kshemendra Indian Poetics
 
Riti theory by Vamana Indian poetics.pptx
Riti theory by Vamana Indian poetics.pptxRiti theory by Vamana Indian poetics.pptx
Riti theory by Vamana Indian poetics.pptx
 

HTML5 after the hype - JFokus2015