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.
RUBBING THE SANKARA STONES THE WRONG WAY. 
Christian Heilmann (@codepo8) - From the Front - 18/09/14, Bologna, Italy
THOSE MAGICAL STONES…
MIND-BLOWING TIME!
HTML 
CSS 
JavaScript
THE HOLY TRINITY OF WEB STANDARDS 
Structure 
(HTML, semantic extras) 
Behaviour 
(JavaScript) 
Presentation 
(CSS, imager...
THE “WEB DEV ROCKSTAR” VERSION 
Structure 
(HTML, semantic extras) 
Beh 
Presentation 
(CSS, imagery, SVG)
THE CONTROL FREAK VERSION (SINGLE PAGE APPS) 
Behaviour 
(JavaScript) 
Presentation 
(CSS, imagery, SVG)
TODAY’S VERSION 
Structure 
(HTML, semantic extras) 
Behaviour 
(JavaScript) 
Presentation 
(CSS, imagery, SVG)
TODAY’S VERSION 
Structure 
(HTML, semantic extras) 
Behaviour 
(JavaScript) 
Presentation 
(CSS, imagery, SVG) 
• Preproc...
!new
JAVASCRIPT HAS ALWAYS 
BEEN USED IN BLOATED 
WAYS.
UNOBTRUSIVE JAVASCRIPT 
http://www.onlinetools.org/articles/unobtrusivejavascript/
THINKING ABOUT DEPENDENCIES 
Thursday, June 16th, 2005 at 10:12 am 
http://christianheilmann.com/2005/06/16/three-separate...
IT IS AN ENDLESS STRUGGLE…
SO, WHAT’S THE ANTIDOTE?
DEALING WITH ANNOYANCES
BAIT AND PESTER… 
http://idontwantyourfuckingapp.tumblr.com/
IT’S ALL THE BROWSER’S FAULT…
http://www.w3.org/2014/07/mobile-web-app-state/
FANBOISM AND “I CAN DO THAT”
HOORAY FOR THE FAULT TOLERANT WEB!
PROVIDING A FALLBACK… 
<img src="meh.jpg" alt="cute kitten photo">
PROVIDING A FALLBACK… 
var img = document.querySelector('img'); 
img.addEventListener('error', function(ev) { 
if (this.na...
CAN HAS VIDEO? 
<video controls> 
<source src="dynamicsearch.mp4" type="video/mp4"> 
</source> 
<a href="dynamicsearch.mp4...
CAN HAS VIDEO? 
var v = document.querySelector('video'), 
sources = v.querySelectorAll('source'), 
lastsource = sources[so...
WELCOME TO THE WEB!
THIS IS EXCITING AND 
MAKES ME VERY HAPPY!
Hating JavaScript is like hating the Internet. 
The Internet is a cobweb of different 
technologies cobbled together with ...
STOP FORCING BELIEFS DOWN PEOPLE’S THROATS
THE WEB IS BUILT TO LAST 
“ 
If you build a web app today, it will run in 
browsers 10 years from now. Good luck trying 
t...
APPS
“ 
If you enable people world-wide to get a good 
experience and solve a problem they have, I 
like it. The technology you...
WORRY ABOUT YOUR OWN BEHAVIOUR AND TALK ABOUT IT
http://www.futureinsights.com/home/the-state-of-the-componentised-web.html
THE SIMPLE BEAUTY AND ROBUSTNESS OF STATIC HTML
PREMATURE 
OPTIMISATION
https://medium.com/@fredriknoren/on-generalization-608949214e63
BE SMUG ABOUT WHAT WE HAVE!
http://makethumbnails.com/
BAIT AND PESTER…
SENSORS AND ACCESSING THE WORLD AROUND US 
! 
Vibration API 
Screen Orientation 
Geolocation API 
Mouse Lock API 
Open Web...
DEVELOPER TOOLS TOTALLY ROCK!
BUILD, DEPLOY AND DEBUG APPS IN THE BROWSER 
WEBIDE
OHAI CHROME/ANDROID AND SAFARI/IOS! 
FIREFOX TOOLS ADAPTER
GET HEARD!
http://ffdevtools.uservoice.com/
https://openwebapps.uservoice.com/
EMBRACE THE WORLD!
http://opensignal.com/reports/2014/android-fragmentation/ 
18,796 
Distinct 
Android 
devices 
(11,868 last 
year)
WORLD-WIDE… OH, WAIT…
HELLO WORLD! 
Intex Cloud FX: 
Firefox OS 
1.0 GHz processor 
128 MB RAM 
SD memory of up to 4GB. 
Dual-SIM 
Bluetooth 
Wi...
HELLO WORLD OF GOOGLE PLAY
PICKING BRAINS IS EASY…
A TREASURE TROVE… 
ALEX FEYERKE — OFFLINE FIRST 
https://www.youtube.com/watch?v=dPz_5-MEvcg
A TREASURE TROVE… 
https://www.youtube.com/watch?v=vBHt61yDO9U
TOOLS I’D HAVE KILLED FOR IN THE PAST…
COLLABORATIVE EDUCATION 
https://www.youtube.com/watch?v=hC9sXz3tRow
NO MORE HESITATION!
THANKS! 
CHRIS HEILMANN 
@CODEPO8
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
Upcoming SlideShare
Loading in …5
×

Rubbing the Sankara Stones the wrong way - From the Front 2014

7,080 views

Published on

Closing keynote of the From the Front conference in Bologna, Italy in September 2014. It talks about the way we approached web development over the years and how what we defined as best practices then has to change now that we are facing a mobile led world in emerging markets.

  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice, find more latest PPTs on www.ThesisScientist.com.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Rubbing the Sankara Stones the wrong way - From the Front 2014

  1. RUBBING THE SANKARA STONES THE WRONG WAY. Christian Heilmann (@codepo8) - From the Front - 18/09/14, Bologna, Italy
  2. THOSE MAGICAL STONES…
  3. MIND-BLOWING TIME!
  4. HTML CSS JavaScript
  5. THE HOLY TRINITY OF WEB STANDARDS Structure (HTML, semantic extras) Behaviour (JavaScript) Presentation (CSS, imagery, SVG)
  6. THE “WEB DEV ROCKSTAR” VERSION Structure (HTML, semantic extras) Beh Presentation (CSS, imagery, SVG)
  7. THE CONTROL FREAK VERSION (SINGLE PAGE APPS) Behaviour (JavaScript) Presentation (CSS, imagery, SVG)
  8. TODAY’S VERSION Structure (HTML, semantic extras) Behaviour (JavaScript) Presentation (CSS, imagery, SVG)
  9. TODAY’S VERSION Structure (HTML, semantic extras) Behaviour (JavaScript) Presentation (CSS, imagery, SVG) • Preprocessors • CMS • Libraries • Frameworks
  10. !new
  11. JAVASCRIPT HAS ALWAYS BEEN USED IN BLOATED WAYS.
  12. UNOBTRUSIVE JAVASCRIPT http://www.onlinetools.org/articles/unobtrusivejavascript/
  13. 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/
  14. IT IS AN ENDLESS STRUGGLE…
  15. SO, WHAT’S THE ANTIDOTE?
  16. DEALING WITH ANNOYANCES
  17. BAIT AND PESTER… http://idontwantyourfuckingapp.tumblr.com/
  18. IT’S ALL THE BROWSER’S FAULT…
  19. http://www.w3.org/2014/07/mobile-web-app-state/
  20. FANBOISM AND “I CAN DO THAT”
  21. HOORAY FOR THE FAULT TOLERANT WEB!
  22. PROVIDING A FALLBACK… <img src="meh.jpg" alt="cute kitten photo">
  23. 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);
  24. 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>
  25. 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);
  26. WELCOME TO THE WEB!
  27. THIS IS EXCITING AND MAKES ME VERY HAPPY!
  28. 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. “ Mattias Petter Johansson, Spotify http://www.quora.com/Why-is-JavaScript-the-only-client-side-language-available/answer/Mattias-Petter-Johansson
  29. STOP FORCING BELIEFS DOWN PEOPLE’S THROATS
  30. THE WEB IS BUILT TO LAST “ 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). Paul Bakaus, Google (ex. Zynga) http://paulbakaus.com/2014/08/26/the-web-is-built-to-last/
  31. APPS
  32. “ 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. Christian Heilmann
  33. WORRY ABOUT YOUR OWN BEHAVIOUR AND TALK ABOUT IT
  34. http://www.futureinsights.com/home/the-state-of-the-componentised-web.html
  35. THE SIMPLE BEAUTY AND ROBUSTNESS OF STATIC HTML
  36. PREMATURE OPTIMISATION
  37. https://medium.com/@fredriknoren/on-generalization-608949214e63
  38. BE SMUG ABOUT WHAT WE HAVE!
  39. http://makethumbnails.com/
  40. BAIT AND PESTER…
  41. SENSORS AND ACCESSING THE WORLD AROUND US ! Vibration API Screen Orientation Geolocation API Mouse Lock API Open WebApps Network Information API Battery Status API Alarm API Push Notifications API WebFM API / FMRadio WebPayment IndexedDB Ambient light sensor Proximity sensor Notification
  42. DEVELOPER TOOLS TOTALLY ROCK!
  43. BUILD, DEPLOY AND DEBUG APPS IN THE BROWSER WEBIDE
  44. OHAI CHROME/ANDROID AND SAFARI/IOS! FIREFOX TOOLS ADAPTER
  45. GET HEARD!
  46. http://ffdevtools.uservoice.com/
  47. https://openwebapps.uservoice.com/
  48. EMBRACE THE WORLD!
  49. http://opensignal.com/reports/2014/android-fragmentation/ 18,796 Distinct Android devices (11,868 last year)
  50. WORLD-WIDE… OH, WAIT…
  51. 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
  52. HELLO WORLD OF GOOGLE PLAY
  53. PICKING BRAINS IS EASY…
  54. A TREASURE TROVE… ALEX FEYERKE — OFFLINE FIRST https://www.youtube.com/watch?v=dPz_5-MEvcg
  55. A TREASURE TROVE… https://www.youtube.com/watch?v=vBHt61yDO9U
  56. TOOLS I’D HAVE KILLED FOR IN THE PAST…
  57. COLLABORATIVE EDUCATION https://www.youtube.com/watch?v=hC9sXz3tRow
  58. NO MORE HESITATION!
  59. THANKS! CHRIS HEILMANN @CODEPO8

×