Finding harmony in web development
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Finding harmony in web development

on

  • 9,934 views

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

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

Statistics

Views

Total Views
9,934
Views on SlideShare
9,923
Embed Views
11

Actions

Likes
7
Downloads
37
Comments
0

5 Embeds 11

http://paper.li 6
http://twitter.com 2
https://twitter.com 1
http://icant.co.uk 1
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Finding harmony in web development Presentation Transcript

  • 1. Finding harmony in webdevelopment Chris Heilmann - London Web Meetup, February 2011
  • 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. A world of mixedmessages
  • 4. A world of constantdisagreement and overlyquick and harsh responses.
  • 5. Let’s take a current hottopic...
  • 6. http://twitter.com/#!/codepo8 vs. http://twitter.com/codepo8
  • 7. Erase and rewind.
  • 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. Frames!
  • 10. AJAX!
  • 11. Fragments vs. documents.
  • 12. Load on demand vs.massive documents.
  • 13. Application state vs.fragments.
  • 14. Breaking stuff...
  • 15. ★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability
  • 16. Actions are applicable in acertain environment.
  • 17. Web sites★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability
  • 18. Web applications★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability https://heatmap.mozillalabs.com/mozmetrics/
  • 19. You miss all SEO benefits! http://www.flickr.com/photos/artonice/4599768501/
  • 20. Standards to the rescue...http://www.w3.org/TR/html5/author/history.html
  • 21. Scripts to the rescue...
  • 22. Web Site Identity crisis...Application
  • 23. Religious debates
  • 24. Saving the long web!
  • 25. 2.42 8.6 3.25 ttp://17h
  • 26. Brokenlinks arebrokenpromises
  • 27. 72165041
  • 28. Web vs. Contracts
  • 29. Corporateshortsightedness?
  • 30. 2005-2010 101http://icant.co.uk/csstablegallery
  • 31. 67http://icant.co.uk/csstablegallery/tables/2.php
  • 32. Show love to your links,but don’t kid yourself andothers.
  • 33. Web vs. Realtime Web
  • 34. http://packrati.us
  • 35. https://github.com/anantn/slurp
  • 36. Links and resources aregreat, but knowing peopleand having a network getsyou somewhere!
  • 37. Best practices aretimeless!
  • 38. The holy trinity accordingto the book of Zeldman. Behaviour (JavaScript) Presentation (CSS) Structure (HTML)
  • 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. 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. We tend to define tech byhow we use it rather thanwhat it is meant to do.
  • 42. This yields a plethora ofdifferent definitions.
  • 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. 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. 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. Time for a more flexibleapproach it seems.
  • 47. Agile and small one-size-fits-all solutions are thefuture.
  • 48. jQuery.com - 2006
  • 49. There’s a plugin for that!
  • 50. Lots of small, very cleversolutions adding up... http://www.flickr.com/photos/wheatfields/3026491551/
  • 51. Is modularity extracomplexity?
  • 52. shrtr = btr!
  • 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. <!doctype html><html lang=en><head><meta charset=utf-8><title>blah</title></head><body><p>Im the content</p></body></html>
  • 55. http://html5boilerplate.com/
  • 56. http://initializr.com/
  • 57. Web content is a mix ofdifferent technologies tomake them work anddisplay correctly...
  • 58. Showing them offseparately paints a wrongimage!
  • 59. Getting it out the door asquickly as possible -reiterate and fix later. http://www.flickr.com/photos/artonice/4599768501/
  • 60. Abstracting problems intonew languages andpreprocessing.
  • 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. Another  flaw  in  the  human  character  is  that  everybody  wants  to  build  and  nobody  wants  to  do  maintenance. Kurt  Vonnegut,  Hocus  Pocus
  • 63. The community knowsbest. http://tools.ietf.org/html/rfc2795
  • 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. “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. “Chrome  is  currently  the  fastest  browser  -­‐  no  point  in  using  any  other  if  you  want  to  build  things  fast.”
  • 67. https://developers.facebook.com/blog/post/460
  • 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.https://developers.facebook.com/blog/post/460
  • 69. Sentiment vs. research http://twitter.com/tomcopy/statuses/36378510465433600
  • 70. Bring on the hyperboles!
  • 71. SEO techniques - anythingto stand out.
  • 72. (...)
  • 73. Are we really that brokenas a media that expertsneed to resort to tricks tolure us to content?
  • 74. All this sensationalismdoesn’t get us anywhere...
  • 75. So many theories, so manyprophecies. What we neednow is a change of ideas!
  • 76. I am worried about theinternet right now.
  • 77. From read/write web toconsumption media.
  • 78. Net neutrality? Censorshipand government control?
  • 79. I am worried about lock-into certain systems.
  • 80. Formal education vs.needs of the market.
  • 81. We believe that the web ismore cared for thanowned.
  • 82. We are the people whomake the web work - weshould have fun doing it!
  • 83. First up: Chill the f*ck out!
  • 84. Stop yourself fromspouting truisms and dosome reflection.
  • 85. Encouraging discussionand explaining your POV isa great way towardsfinding solutions.
  • 86. Context is king!
  • 87. There is no such thing as aperfect web product thatmeets all needs of the webaudience.
  • 88. Explaining the context of aproduct makes surepeople don’t measure itwith the wrong values...
  • 89. ...or implement it where itdoesn’t fit.
  • 90. Let’s move fromshowcases to case studies.
  • 91. We have inspirationoverload and a lack of realimplementations.
  • 92. The main market we workfor needs to get a push tomove on.
  • 93. Let’s focus on the futureand apply something I call“web euthanasia”.
  • 94. Redirect old and outdatedtutorials to new andmaintained resources!
  • 95. Offer a basic, workingexperience for legacybrowsers - not more, notless.
  • 96. Simulating new tech withold platforms means wealso need to test withthem - wasting time!
  • 97. Let’s take ownership ofthe web our jobs aredependent on!
  • 98. http://jsconfeu.blip.tv/file/4234500/
  • 99. Question authority
  • 100. Our job is to make theweb of tomorrow betterthan the web of today.
  • 101. This means we need to letgo of some old ideas andbe flexible.
  • 102. It also means toconcentrate on ouroutcome, not our ego.
  • 103. So instead of creating a lotof soon-to-be outdated“look what I did” posts,let’s collaborate.
  • 104. Forrst http://forrst.com/
  • 105. Forrst http://jsfiddle.net/
  • 106. http://jsbin.com/
  • 107. https://github.com/
  • 108. Go where people are whobuild for the web, butaren’t where we normallygo (conferences, meetups)
  • 109. http://stackoverflow.com/
  • 110. http://www.quora.com/
  • 111. Everyone of you hassomething to contribute.
  • 112. Tell others, work togetherand build *real* products!
  • 113. Thanks!Chris Heilmann@codepo8#mozilla#html5/freenet