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.

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

6. THE HOLY TRINITY OF WEB STANDARDS
Structure
(HTML, semantic extras)
Behaviour
(JavaScript)
Presentation
(CSS, imagery, SVG)

7. THE “WEB DEV ROCKSTAR” VERSION
Structure
(HTML, semantic extras)
Beh
Presentation
(CSS, imagery, SVG)

8. THE CONTROL FREAK VERSION (SINGLE PAGE APPS)
Behaviour
(JavaScript)
Presentation
(CSS, imagery, SVG)

9. TODAY’S VERSION
Structure
(HTML, semantic extras)
Behaviour
(JavaScript)
Presentation
(CSS, imagery, SVG)

10. TODAY’S VERSION
Structure
(HTML, semantic extras)
Behaviour
(JavaScript)
Presentation
(CSS, imagery, SVG)
• Preprocessors
• CMS
• Libraries
• Frameworks

11. !new

12. JAVASCRIPT HAS ALWAYS
BEEN USED IN BLOATED
WAYS.

13. UNOBTRUSIVE JAVASCRIPT
http://www.onlinetools.org/articles/unobtrusivejavascript/

14. 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/

15. IT IS AN ENDLESS STRUGGLE…

16. SO, WHAT’S THE ANTIDOTE?

17. DEALING WITH ANNOYANCES

18. BAIT AND PESTER…
http://idontwantyourfuckingapp.tumblr.com/

19. IT’S ALL THE BROWSER’S FAULT…

20. http://www.w3.org/2014/07/mobile-web-app-state/

21. FANBOISM AND “I CAN DO THAT”

22. HOORAY FOR THE FAULT TOLERANT WEB!

23. PROVIDING A FALLBACK…
<img src="meh.jpg" alt="cute kitten photo">

24. 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);

25. 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>

26. 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);

29. WELCOME TO THE WEB!

31. THIS IS EXCITING AND
MAKES ME VERY HAPPY!

32. 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

33. STOP FORCING BELIEFS DOWN PEOPLE’S THROATS

34. 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/

37. APPS

38. “
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

39. WORRY ABOUT YOUR OWN BEHAVIOUR AND TALK ABOUT IT

40. http://www.futureinsights.com/home/the-state-of-the-componentised-web.html

41. THE SIMPLE BEAUTY AND ROBUSTNESS OF STATIC HTML

42. PREMATURE
OPTIMISATION

43. https://medium.com/@fredriknoren/on-generalization-608949214e63

44. BE SMUG ABOUT WHAT WE HAVE!

45. http://makethumbnails.com/

46. BAIT AND PESTER…

47. 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

48. DEVELOPER TOOLS TOTALLY ROCK!

49. BUILD, DEPLOY AND DEBUG APPS IN THE BROWSER
WEBIDE

50. OHAI CHROME/ANDROID AND SAFARI/IOS!
FIREFOX TOOLS ADAPTER

51. GET HEARD!

52. http://ffdevtools.uservoice.com/

53. https://openwebapps.uservoice.com/

54. EMBRACE THE WORLD!

55. http://opensignal.com/reports/2014/android-fragmentation/
18,796
Distinct
Android
devices
(11,868 last
year)

56. WORLD-WIDE… OH, WAIT…

57. 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

58. HELLO WORLD OF GOOGLE PLAY

59. PICKING BRAINS IS EASY…

60. A TREASURE TROVE…
ALEX FEYERKE — OFFLINE FIRST
https://www.youtube.com/watch?v=dPz_5-MEvcg

61. A TREASURE TROVE…
https://www.youtube.com/watch?v=vBHt61yDO9U

62. TOOLS I’D HAVE KILLED FOR IN THE PAST…

63. COLLABORATIVE EDUCATION
https://www.youtube.com/watch?v=hC9sXz3tRow

65. NO MORE HESITATION!

66. THANKS!
CHRIS HEILMANN
@CODEPO8