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.

Finding harmony in web development


Published on

A presentation questioning why we keep fighting the same fights as web developers when there are a lot more important things to worry about.

Published in: Technology, Design, Education
  • Be the first to comment

Finding harmony in web development

  1. 1. Finding harmony in webdevelopment Chris Heilmann - London Web Meetup, February 2011
  2. 2. You are in a strangeplace.To the west is arock, to the east isa hard place, to thenorth is the Deviland the south is theDeep Blue Sea.Command:_
  3. 3. A world of mixedmessages
  4. 4. A world of constantdisagreement and overlyquick and harsh responses.
  5. 5. Let’s take a current hottopic...
  6. 6.!/codepo8 vs.
  7. 7. Erase and rewind.
  8. 8. Basic Hypertext model:Document Document Document Text text Text text Text text text link text link text text load text text load text text link text text link text link link text text text
  9. 9. Frames!
  10. 10. AJAX!
  11. 11. Fragments vs. documents.
  12. 12. Load on demand vs.massive documents.
  13. 13. Application state vs.fragments.
  14. 14. Breaking stuff...
  15. 15. ★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability
  16. 16. Actions are applicable in acertain environment.
  17. 17. Web sites★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability
  18. 18. Web applications★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability
  19. 19. You miss all SEO benefits!
  20. 20. Standards to the rescue...
  21. 21. Scripts to the rescue...
  22. 22. Web Site Identity crisis...Application
  23. 23. Religious debates
  24. 24. Saving the long web!
  25. 25. 2.42 8.6 3.25 ttp://17h
  26. 26. Brokenlinks arebrokenpromises
  27. 27. 72165041
  28. 28. Web vs. Contracts
  29. 29. Corporateshortsightedness?
  30. 30. 2005-2010 101
  31. 31. 67
  32. 32. Show love to your links,but don’t kid yourself andothers.
  33. 33. Web vs. Realtime Web
  34. 34.
  35. 35.
  36. 36. Links and resources aregreat, but knowing peopleand having a network getsyou somewhere!
  37. 37. Best practices aretimeless!
  38. 38. The holy trinity accordingto the book of Zeldman. Behaviour (JavaScript) Presentation (CSS) Structure (HTML)
  39. 39. The reality according topeople you ask these days. JavaScript libraries, polyfills, templating languages and “real languages” translated to JS. CSS - created with a meta language as it lacks variables and stuff. Some HTML Placeholder stuff
  40. 40. Of course depending onwhat they do... jQuery! CSS OMFG!!!! CSS3 Transition and Animation and Shadows and fonts! OMG OMG OMG! clean HTML from Expression Engine or Wordpress.
  41. 41. We tend to define tech byhow we use it rather thanwhat it is meant to do.
  42. 42. This yields a plethora ofdifferent definitions.
  43. 43. What is HTML?★ JavaScript’s bitch (empty elements, links pointing nowhere, content to show and hide)★ A static database (microformats, semantics of awesome)★ The thing Google loves★ The end result of using real languages on the server.★ Outdated
  44. 44. What is CSS?★ Something to style and animate with - really the thing that makes the web interesting.★ Something to simulate layouts with and hope they work.★ Not good enough - it needs variables and constants and mixins and all the other cool thing real languages have.★ Broken
  45. 45. What is JavaScript?★ The predecessor to jQuery.★ Dangerous - use noscript.★ Awesome, use it with node.js to see why it rocks.★ Too hard to learn.★ Broken. Time to use LUA/Python/Ruby/ Coffescript instead.★ The thing Crockford understands.
  46. 46. Time for a more flexibleapproach it seems.
  47. 47. Agile and small one-size-fits-all solutions are thefuture.
  48. 48. - 2006
  49. 49. There’s a plugin for that!
  50. 50. Lots of small, very cleversolutions adding up...
  51. 51. Is modularity extracomplexity?
  52. 52. shrtr = btr!
  53. 53. B=(function x(){})[-5]==x?FF3:(function x(){})[-6]==x?FF2:/a/[-1]==a?FF:v==v?IE:/a/.__proto__==//?Saf:/s/.test(/a/.toString)?Chr:/^function (/.test([].sort)?Op:Unknown;“Clearly  code  quality  is  not  important  to  you,  or  you  would  not  be  demanding  your  right  to  write  incompetent  crap.” Douglas  Crockford
  54. 54. <!doctype html><html lang=en><head><meta charset=utf-8><title>blah</title></head><body><p>Im the content</p></body></html>
  55. 55.
  56. 56.
  57. 57. Web content is a mix ofdifferent technologies tomake them work anddisplay correctly...
  58. 58. Showing them offseparately paints a wrongimage!
  59. 59. Getting it out the door asquickly as possible -reiterate and fix later.
  60. 60. Abstracting problems intonew languages andpreprocessing.
  61. 61. Unknown overheads:★ Portability.★ Training of all involved.★ Explanation of abstraction layers for maintainers.★ Performance impact (can the client/ server handle it?).★ Impact on UX/PM.
  62. 62. Another  flaw  in  the  human  character  is  that  everybody  wants  to  build  and  nobody  wants  to  do  maintenance. Kurt  Vonnegut,  Hocus  Pocus
  63. 63. The community knowsbest.
  64. 64. “If  you  animate  things,  do  it  in  CSS!  CSS  transitions  and  animations  are  are  faster  as  they  are  hardware  accelerated  and  people  don’t  need  to  learn  JavaScript!”
  65. 65. “Using  a  Mac  is  the  best  thing  you  can  do  right  now,  but  be  careful  as  everything  is  faster  and  looks  much  smoother  there!  Test  in  a  VM,  too!”
  66. 66. “Chrome  is  currently  the  fastest  browser  -­‐  no  point  in  using  any  other  if  you  want  to  build  things  fast.”
  67. 67.
  68. 68. On  desktops,  using  CSS   transitions  for  motion  or  CSS   keyframes  for  animations  were   slower  than  simply  using   JavaScript  for  these  tasks.   Worse,  they  often  generated   noisy  framerates,  so  they  are  not   a  good  solution  for  games  in   desktop  browsers.
  69. 69. Sentiment vs. research
  70. 70. Bring on the hyperboles!
  71. 71. SEO techniques - anythingto stand out.
  72. 72. (...)
  73. 73. Are we really that brokenas a media that expertsneed to resort to tricks tolure us to content?
  74. 74. All this sensationalismdoesn’t get us anywhere...
  75. 75. So many theories, so manyprophecies. What we neednow is a change of ideas!
  76. 76. I am worried about theinternet right now.
  77. 77. From read/write web toconsumption media.
  78. 78. Net neutrality? Censorshipand government control?
  79. 79. I am worried about lock-into certain systems.
  80. 80. Formal education vs.needs of the market.
  81. 81. We believe that the web ismore cared for thanowned.
  82. 82. We are the people whomake the web work - weshould have fun doing it!
  83. 83. First up: Chill the f*ck out!
  84. 84. Stop yourself fromspouting truisms and dosome reflection.
  85. 85. Encouraging discussionand explaining your POV isa great way towardsfinding solutions.
  86. 86. Context is king!
  87. 87. There is no such thing as aperfect web product thatmeets all needs of the webaudience.
  88. 88. Explaining the context of aproduct makes surepeople don’t measure itwith the wrong values...
  89. 89. ...or implement it where itdoesn’t fit.
  90. 90. Let’s move fromshowcases to case studies.
  91. 91. We have inspirationoverload and a lack of realimplementations.
  92. 92. The main market we workfor needs to get a push tomove on.
  93. 93. Let’s focus on the futureand apply something I call“web euthanasia”.
  94. 94. Redirect old and outdatedtutorials to new andmaintained resources!
  95. 95. Offer a basic, workingexperience for legacybrowsers - not more, notless.
  96. 96. Simulating new tech withold platforms means wealso need to test withthem - wasting time!
  97. 97. Let’s take ownership ofthe web our jobs aredependent on!
  98. 98.
  99. 99. Question authority
  100. 100. Our job is to make theweb of tomorrow betterthan the web of today.
  101. 101. This means we need to letgo of some old ideas andbe flexible.
  102. 102. It also means toconcentrate on ouroutcome, not our ego.
  103. 103. So instead of creating a lotof soon-to-be outdated“look what I did” posts,let’s collaborate.
  104. 104. Forrst
  105. 105. Forrst
  106. 106.
  107. 107.
  108. 108. Go where people are whobuild for the web, butaren’t where we normallygo (conferences, meetups)
  109. 109.
  110. 110.
  111. 111. Everyone of you hassomething to contribute.
  112. 112. Tell others, work togetherand build *real* products!
  113. 113. Thanks!Chris Heilmann@codepo8#mozilla#html5/freenet