Keynote at Beyond Tellerand 2015

1. ADVANCING THE WEB
WITHOUT BREAKING IT
CHRIS HEILMANN (@CODEPO8), BEYOND TELLERAND 2015, DÜSSELDORF

2. THIS IS A TIME OF
CLASHES…

3. THIS IS A TIME OF
CLASHES…
• Native vs. Web
• io vs node
• virtual DOM vs. DOM
• App vs. Web Site
• SASS vs. CSS
• Angular vs. React
• Gulp vs. Grunt
• Düsseldorf vs. Köln

4. AND BOY, DO WE
WRITE AND POST
AND DISCUSS A LOT
ABOUT ALL OF
THAT…

5. FRANKLY, I AM
GETTING TIRED OF
THIS…

6. WE CARED ABOUT
THE WEB AS AN
INFRASTRUCTURE
AND A PUBLICATION
PLATFORM.
Amount of
comments
Shits I am
ready to
give
HACKER NEWS DRAMA

7. BACK IN THE DAYS,
WEB DEVELOPERS
WERE INNOVATORS.

8. WE HAD NO CLUE
WHAT BROWSERS
DID. WE USED
WHAT WE HAD
AND HACKED
AROUND THE
PROBLEMS.
• Sliding Doors
• CSS Sprites
• FIR
• Clearfix
• …

9. ALL OF THESE
TECHNIQUES
WERE AIMED AT
CREATING USER
INTERFACES.

10. WE CARED ABOUT
THE WEB AS AN
INFRASTRUCTURE
AND A PUBLICATION
PLATFORM.

11. NOW WE ARE IN
THE MIDDLE OF A
ENGINEERING
TAKEOVER.

12. THE WEB HAS
BECOME MORE
COMPLEX
• We know the inner workings of
browsers
• A lot of the web innovation
happens in the open
• JavaScript is server and client
side
• With mobile, we have a fast
growing market that treats web
content and technology as 2nd
class.

13. AND THAT IS VERY
EXCITING!

14. WE DON’T
DEMAND THE
IMPORTANT,
BASIC THINGS
FROM BROWSER
MAKERS.

15. TO BE A “MODERN”
FULL STACK
DEVELOPER YOU
NEED TO USE…
• Task runners
• CSS preprocessors
• Package managers
• MVC Frameworks
• Unit tests
• A “modern” development
environment with live reload and 360°
inspection.
“Magical Framework and modern solution
to everything and more” of this month.
or…

16. THIS IS UNDERSTANDABLE.
WE HAVE GREAT TOOLS
AND POWER AND ARE
CONSTANTLY REMINDED
THAT TIME IS OF THE
ESSENCE.

17. Steve Jobs/Apple Sergey Brin / Google
Mark Zuckerberg/FacebookTravis Kalanick / Uber
When you see something
that is technically sweet, you
go ahead and do it and you
argue about what to do
about it only after you have
had your technical success.

18. When you see something
that is technically sweet, you
go ahead and do it and you
argue about what to do
about it only after you have
had your technical success.
That is the way it was with
the atomic bomb.
J. Robert Oppenheimer/Manhattan Project

19. STORIES OF
GREAT, QUICK
SUCCESS ALWAYS
RESULT IN STRESS
AND UNHEALTHY
COMPETITION

20. I DON’T WANT TO
PLAY THAT GAME.

21. ZOMG CODE IS
EVERYTHING!

22. EVERYBODY
NEEDS TO LEARN
TO CODE!
https://twitter.com/StartupLJackson/status/594283350019280897

23. CODE

24. NOT EVERYBODY
NEEDS TO CODE.

26. EVERYBODY
NEEDS TO LEARN
TO CREATE AND
CARE.

27. WE REALLY
DROPPED THE
BALL ON THAT
ONE.

28. THE LURE OF THE
WEB FOR
COMPANIES AND
DEVELOPERS IS
FADING.

29. OLD CLUTTER,
NEW WEB?
https://twitter.com/Caged/status/590602214021922818

30. WE NEED TO
CHANGE AND
ADAPT.

31. AND IT IS TIME WE
FACED SOME
COMMERCIAL
FACTS.

32. OUR BEST
PRACTICES AND
IDEALS ALL DEAL
WITH LONGEVITY
AND STURDINESS.

33. AND WE SEEM TO
GET INTO A
WORLD WHERE
ONLY WE CARE.

34. “We crave for new
sensations but soon
become indifferent to them.
The wonders of yesterday
are today common
occurrences.”
― Nikola Tesla, My Inventions

35. ARE YOU READY TO
ROCK THE WORLD
OF “GENERATION
SELFIE”?

36. TIMELESS BEAUTY
AND DESIGN…

37. LET’S GET THEM
YOUNG AND KEEP
THEM FOR LIFE?

38. WE’RE TRYING TO
COMPETE WITH A
MARKET DESIGNED
TO BE SHORT-LIVED
WITH IDEALS OF
LONGEVITY.

39. AT THE SAME
TIME, OUR
WORLD IS MORE
AMAZING THAN
EVER.
• Google implementing Microsoft’s
Pointer Events
• Microsoft implementing Adobe’s
CSS blend modes code
• Manifold.js - create native apps from
web code with W3C manifest
• Vorlon.js - debug across all
platforms

40. LET ME TAKE YOU
BACK TO
SOMETHING I
LOVED AS A
TEENAGER.

41. WE’RE TRYING TO
COMPETE WITH A
MARKET DESIGNED
TO BE SHORT-LIVED
WITH IDEALS OF
LONGEVITY.

42. 160 × 200 PIXELS
(ON A 320 × 200 PIXELS DISPLAY)
16 PREDEFINED COLOURS
1 SCREEN-WIDE
BACKGROUND COLOUR.
3 COLOURS IN EACH
8 × 8 (4 × 2) PIXEL
SQUARE

43. 160 × 200 PIXELS
(ON A 320 × 200 PIXELS DISPLAY)
16 PREDEFINED COLOURS
1 SCREEN-WIDE
BACKGROUND COLOUR.
3 COLOURS IN EACH
8 × 8 (4 × 2) PIXEL
SQUARE

44. 160 × 200 PIXELS
(ON A 320 × 200 PIXELS DISPLAY)
16 PREDEFINED COLOURS
1 SCREEN-WIDE
BACKGROUND COLOUR.
3 COLOURS IN EACH
8 × 8 (4 × 2) PIXEL
SQUARE

45. 160 × 200 PIXELS
(ON A 320 × 200 PIXELS DISPLAY)
16 PREDEFINED COLOURS
1 SCREEN-WIDE
BACKGROUND COLOUR.
3 COLOURS IN EACH
8 × 8 (4 × 2) PIXEL
SQUARE
• MUCH BETTER TOOLING
• EXPERIENCE
• SHARED TRICKERY AND
KNOWLEDGE
• A LOT OF SHITS GIVEN.

46. EXCELLENCE ≠ INNOVATION + IMPLEMENTATION

47. EXCELLENCE = (TALENT + EFFORT + TOOLS) *
SHITS GIVEN

48. TOOLS ARE ALL
ABOUT THE
MINIMUM VIABLE
PRODUCT.

49. LET’S GO AND
BUILD GREAT
PRODUCTS FOR
EVERYBODY

50. EXCELLENCE = (TALENT + EFFORT) * SHITS GIVEN

51. YOU’RE ANGRY
AND THIS
OBVIOUSLY
ANNOYS YOU…
WHAT ARE YOU
GOING TO DO
ABOUT IT?

52. Chris
christianheilmann.com
@codepo8
Thanks!