Finding harmony in web development
7 likes1,877 views
Chris Heilmann's talk at the London Web Meetup in February 2011 addresses the complexities and contradictions within web development, emphasizing the need for harmony between web applications and the traditional web. He highlights the evolving technologies, the importance of understanding context, and the necessity for collaboration in the web community. Heilmann calls for a focus on practical implementations over theory, urging developers to take ownership of the web and move beyond outdated practices.
![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](https://image.slidesharecdn.com/finding-harmony-in-web-design-110217123224-phpapp01/85/Finding-harmony-in-web-development-56-320.jpg)
Finding harmony in web development
- 1. Finding harmony in web development Chris Heilmann - London Web Meetup, February 2011
- 2. You are in a strange place. To the west is a rock, to the east is a hard place, to the north is the Devil and the south is the Deep Blue Sea. Command:_
- 3. A world of mixed messages
- 4. A world of constant disagreement and overly quick and harsh responses.
- 5. Let’s take a current hot topic...
- 6. http://twitter.com/#!/codepo8 vs. http://twitter.com/codepo8
- 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. 100% Flash Sites
- 11. AJAX!
- 13. Load on demand vs. massive documents.
- 15. Breaking stuff...
- 16. ★ Back button ★ Browser history ★ Bookmarks ★ Deep links / Crawlability
- 17. Actions are applicable in a certain environment.
- 18. Web sites ★ Back button ★ Browser history ★ Bookmarks ★ Deep links / Crawlability
- 19. Web applications ★ Back button ★ Browser history ★ Bookmarks ★ Deep links / Crawlability https://heatmap.mozillalabs.com/mozmetrics/
- 20. You miss all SEO benefits! http://www.flickr.com/photos/artonice/4599768501/
- 21. Standards to the rescue... http://www.w3.org/TR/html5/author/history.html
- 22. Scripts to the rescue...
- 24. Web Site Identity crisis... Application
- 26. Saving the long web!
- 27. 2.42 8.6 3.25 ttp://17 h
- 29. 7216 5041
- 33. 2005-2010 101 http://icant.co.uk/csstablegallery
- 34. 67 http://icant.co.uk/csstablegallery/tables/2.php
- 35. Show love to your links, but don’t kid yourself and others - there is no “long web”.
- 36. Web vs. Realtime Web
- 39. Links and resources are great, but knowing people and having a network gets you somewhere!
- 41. The holy trinity according to the book of Zeldman. Behaviour (JavaScript) Presentation (CSS) Structure (HTML)
- 42. The reality according to people 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
- 43. Of course depending on what they do... jQuery! CSS OMFG!!!! CSS3 Transition and Animation and Shadows and fonts! OMG OMG OMG! clean HTML from Expression Engine or Wordpress.
- 44. We tend to define tech by how we use it rather than what it is meant to do.
- 45. This yields a plethora of different definitions.
- 46. 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
- 47. 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
- 48. 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.
- 49. Time for a more flexible approach it seems.
- 50. Agile and small one-size- fits-all solutions are the future.
- 52. There’s a plugin for that!
- 53. Lots of small, very clever solutions adding up... http://www.flickr.com/photos/wheatfields/3026491551/
- 55. shrtr = btr!
- 56. 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
- 57. <!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>blah</title> </head> <body> <p>I'm the content</p> </body> </html>
- 60. Web content is a mix of different technologies to make them work and display correctly...
- 61. Showing them off separately paints a wrong image!
- 62. Getting it out the door as quickly as possible - reiterate and fix later. http://www.flickr.com/photos/artonice/4599768501/
- 63. Abstracting problems into new languages and preprocessing.
- 64. 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.
- 65. Another flaw in the human character is that everybody wants to build and nobody wants to do maintenance. Kurt Vonnegut, Hocus Pocus
- 66. The community knows best. http://tools.ietf.org/html/rfc2795
- 67. “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!”
- 68. “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!”
- 69. “Chrome is currently the fastest browser -‐ no point in using any other if you want to build things fast.”
- 71. 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
- 73. Sentiment vs. research http://twitter.com/tomcopy/statuses/36378510465433600
- 74. Bring on the hyperboles!
- 76. SEO techniques - anything to stand out.
- 77. (...)
- 79. Are we really that broken as a media that experts need to resort to tricks to lure us to content?
- 81. All this sensationalism doesn’t get us anywhere...
- 82. So many theories, so many prophecies. What we need now is a change of ideas!
- 83. I am worried about the internet right now.
- 84. From read/write web to consumption media.
- 85. Net neutrality? Censorship and government control?
- 86. I am worried about lock-in to certain systems.
- 87. Formal education vs. needs of the market.
- 88. We believe that the web is more cared for than owned.
- 89. We are the people who make the web work - we should have fun doing it!
- 90. First up: Chill the f*ck out!
- 91. Stop yourself from spouting truisms and do some reflection.
- 92. Encouraging discussion and explaining your POV is a great way towards finding solutions.
- 95. Context is king!
- 96. There is no such thing as a perfect web product that meets all needs of the web audience.
- 97. Explaining the context of a product makes sure people don’t measure it with the wrong values...
- 98. ...or implement it where it doesn’t fit.
- 99. Let’s move from showcases to case studies.
- 100. We have inspiration overload and a lack of real implementations.
- 101. The main market we work for needs to get a push to move on.
- 102. Let’s focus on the future and apply something I call “web euthanasia”.
- 103. Redirect old and outdated tutorials to new and maintained resources!
- 104. Offer a basic, working experience for legacy browsers - not more, not less.
- 105. Simulating new tech with old platforms means we also need to test with them - wasting time!
- 106. Let’s take ownership of the web our jobs are dependent on!
- 108. Question authority
- 109. Our job is to make the web of tomorrow better than the web of today.
- 110. This means we need to let go of some old ideas and be flexible.
- 111. It also means to concentrate on our outcome, not our ego.
- 112. So instead of creating a lot of soon-to-be outdated “look what I did” posts, let’s collaborate.
- 113. Forrst http://forrst.com/
- 114. Forrst http://jsfiddle.net/
- 117. Go where people are who build for the web, but aren’t where we normally go (conferences, meetups)
- 120. Everyone of you has something to contribute.
- 121. Tell others, work together and build *real* products!