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

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

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. 100% Flash Sites

11. AJAX!

12. Fragments vs. documents.

13. Load on demand vs.
massive documents.

14. Application state vs.
fragments.

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

25. Religious debates

26. Saving the long web!

27. 2.42
8.6 3.25
ttp://17
h

28. Broken
links are
broken
promises

29. 7216
5041

30. Web vs. Contracts

32. Corporate
shortsightedness?

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

37. http://packrati.us

38. https://github.com/anantn/slurp

39. Links and resources are
great, but knowing people
and having a network gets
you somewhere!

40. Best practices are
timeless!

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.

51. jQuery.com - 2006

52. There’s a plugin for that!

53. Lots of small, very clever
solutions adding up...
http://www.flickr.com/photos/wheatfields/3026491551/

54. Is modularity extra
complexity?

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>

58. http://html5boilerplate.com/

59. http://initializr.com/

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

70. https://developers.facebook.com/blog/post/460

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!

107. http://jsconfeu.blip.tv/file/4234500/

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/

115. http://jsbin.com/

116. https://github.com/

117. Go where people are who
build for the web, but
aren’t where we normally
go (conferences, meetups)

118. http://stackoverflow.com/

119. http://www.quora.com/

120. Everyone of you has
something to contribute.

121. Tell others, work together
and build *real* products!

122. Thanks!
Chris Heilmann
@codepo8
#mozilla
#html5/freenet