Rubbing the Sankara Stones the wrong way - From the Front 2014
-
Upload
christian-heilmann -
Category
Engineering
-
view
6.735 -
download
2
Transcript of Rubbing the Sankara Stones the wrong way - From the Front 2014
![Page 1: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/1.jpg)
Christian Heilmann (@codepo8) - From the Front - 18/09/14, Bologna, Italy
RUBBING THE SANKARA STONES THE WRONG WAY.
![Page 2: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/2.jpg)
THOSE MAGICAL STONES…
![Page 3: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/3.jpg)
MIND-BLOWING TIME!
![Page 4: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/4.jpg)
HTM
L
CSS
Java
Scrip
t
![Page 5: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/5.jpg)
![Page 6: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/6.jpg)
THE HOLY TRINITY OF WEB STANDARDS
Structure (HTML, semantic extras)
Behaviour (JavaScript)
Presentation (CSS, imagery, SVG)
![Page 7: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/7.jpg)
THE “WEB DEV ROCKSTAR” VERSION
Structure (HTML, semantic extras)
Beh
Presentation (CSS, imagery, SVG)
![Page 8: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/8.jpg)
THE CONTROL FREAK VERSION (SINGLE PAGE APPS)
Behaviour (JavaScript)
Presentation (CSS, imagery, SVG)
![Page 9: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/9.jpg)
TODAY’S VERSION
Structure (HTML, semantic extras)
Behaviour (JavaScript)
Presentation (CSS, imagery, SVG)
![Page 10: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/10.jpg)
TODAY’S VERSION
Structure (HTML, semantic extras)
Behaviour (JavaScript)
Presentation (CSS, imagery, SVG)
• Preprocessors • CMS • Libraries • Frameworks
![Page 11: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/11.jpg)
!new
![Page 12: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/12.jpg)
JAVASCRIPT HAS ALWAYS BEEN USED IN BLOATED WAYS.
![Page 13: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/13.jpg)
UNOBTRUSIVE JAVASCRIPT
http://www.onlinetools.org/articles/unobtrusivejavascript/
![Page 14: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/14.jpg)
THINKING ABOUT DEPENDENCIES Thursday, June 16th, 2005 at 10:12 am
http://christianheilmann.com/2005/06/16/three-separated-layers-of-web-development-think-again/
![Page 15: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/15.jpg)
IT IS AN ENDLESS STRUGGLE…
![Page 16: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/16.jpg)
SO, WHAT’S THE ANTIDOTE?
![Page 17: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/17.jpg)
DEALING WITH ANNOYANCES
![Page 18: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/18.jpg)
BAIT AND PESTER…
http://idontwantyourfuckingapp.tumblr.com/
![Page 19: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/19.jpg)
IT’S ALL THE BROWSER’S FAULT…
![Page 21: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/21.jpg)
FANBOISM AND “I CAN DO THAT”
![Page 22: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/22.jpg)
HOORAY FOR THE FAULT TOLERANT WEB!
![Page 23: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/23.jpg)
PROVIDING A FALLBACK…
<img src="meh.jpg" alt="cute kitten photo">
![Page 24: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/24.jpg)
PROVIDING A FALLBACK…
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);
![Page 25: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/25.jpg)
CAN HAS VIDEO?
<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>
![Page 26: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/26.jpg)
CAN HAS 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);
![Page 27: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/27.jpg)
![Page 28: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/28.jpg)
![Page 29: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/29.jpg)
WELCOME TO THE WEB!
![Page 30: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/30.jpg)
![Page 31: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/31.jpg)
THIS IS EXCITING AND MAKES ME VERY HAPPY!
![Page 32: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/32.jpg)
Hating JavaScript is like hating the Internet. The Internet is a cobweb of different technologies cobbled together with duct tape, string and chewing gum. It's not elegantly designed in any way, because it's more of a growing organism than it is a machine constructed with intent.
“
http://www.quora.com/Why-is-JavaScript-the-only-client-side-language-available/answer/Mattias-Petter-Johansson
Mattias Petter Johansson, Spotify
![Page 33: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/33.jpg)
STOP FORCING BELIEFS DOWN PEOPLE’S THROATS
![Page 34: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/34.jpg)
If you build a web app today, it will run in browsers 10 years from now. Good luck trying the same with your favorite mobile OS (excluding Firefox OS).
THE WEB IS BUILT TO LAST
“
http://paulbakaus.com/2014/08/26/the-web-is-built-to-last/
Paul Bakaus, Google (ex. Zynga)
![Page 35: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/35.jpg)
![Page 36: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/36.jpg)
![Page 37: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/37.jpg)
APPS
![Page 38: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/38.jpg)
“Christian Heilmann
If you enable people world-wide to get a good experience and solve a problem they have, I like it. The technology you use is not the important part. How much you lock them in is. Don’t lock people in.
![Page 39: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/39.jpg)
WORRY ABOUT YOUR OWN BEHAVIOUR AND TALK ABOUT IT
![Page 40: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/40.jpg)
http://www.futureinsights.com/home/the-state-of-the-componentised-web.html
![Page 41: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/41.jpg)
THE SIMPLE BEAUTY AND ROBUSTNESS OF STATIC HTML
![Page 42: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/42.jpg)
PREMATURE OPTIMISATION
![Page 43: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/43.jpg)
https://medium.com/@fredriknoren/on-generalization-608949214e63
![Page 44: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/44.jpg)
BE SMUG ABOUT WHAT WE HAVE!
![Page 45: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/45.jpg)
http://makethumbnails.com/
![Page 46: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/46.jpg)
BAIT AND PESTER…
![Page 47: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/47.jpg)
!
Vibration API Screen Orientation Geolocation API Mouse Lock API Open WebApps Network Information API Battery Status API Alarm API
SENSORS AND ACCESSING THE WORLD AROUND US
Push Notifications API WebFM API / FMRadio WebPayment IndexedDB Ambient light sensor Proximity sensor Notification
![Page 48: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/48.jpg)
DEVELOPER TOOLS TOTALLY ROCK!
![Page 49: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/49.jpg)
BUILD, DEPLOY AND DEBUG APPS IN THE BROWSER
WEBIDE
![Page 50: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/50.jpg)
OHAI CHROME/ANDROID AND SAFARI/IOS! FIREFOX TOOLS ADAPTER
![Page 51: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/51.jpg)
GET HEARD!
![Page 52: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/52.jpg)
http://ffdevtools.uservoice.com/
![Page 53: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/53.jpg)
https://openwebapps.uservoice.com/
![Page 54: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/54.jpg)
EMBRACE THE WORLD!
![Page 55: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/55.jpg)
http://opensignal.com/reports/2014/android-fragmentation/
18,796 Distinct Android devices (11,868 last
year)
![Page 56: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/56.jpg)
WORLD-WIDE… OH, WAIT…
![Page 57: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/57.jpg)
HELLO WORLD!
Intex Cloud FX: Firefox OS 1.0 GHz processor 128 MB RAM SD memory of up to 4GB. Dual-SIM Bluetooth Wi-Fi
1,999 Rupees ~ 25 Euro
![Page 58: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/58.jpg)
HELLO WORLD OF GOOGLE PLAY
![Page 59: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/59.jpg)
PICKING BRAINS IS EASY…
![Page 60: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/60.jpg)
A TREASURE TROVE…
https://www.youtube.com/watch?v=dPz_5-MEvcg
ALEX FEYERKE — OFFLINE FIRST
![Page 61: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/61.jpg)
https://www.youtube.com/watch?v=vBHt61yDO9U
A TREASURE TROVE…
![Page 62: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/62.jpg)
TOOLS I’D HAVE KILLED FOR IN THE PAST…
![Page 63: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/63.jpg)
COLLABORATIVE EDUCATION
https://www.youtube.com/watch?v=hC9sXz3tRow
![Page 64: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/64.jpg)
![Page 65: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/65.jpg)
NO MORE HESITATION!
![Page 66: Rubbing the Sankara Stones the wrong way - From the Front 2014](https://reader031.fdocuments.in/reader031/viewer/2022020917/58f9ae9e760da3da068ba481/html5/thumbnails/66.jpg)
THANKS! CHRIS HEILMANN @CODEPO8