More Related Content Similar to The road to professional web development (20) More from Christian Heilmann (20) The road to professional web development1. The road to
professional web
development
Christian Heilmann | http://icant.co.uk | http://wait-till-i.com
Taipeh, Taiwan, April 2009
4. ...and today I will talk about
the road to professional web
development.
8. The Dark Ages
http://www.flickr.com/photos/25725360@N05/2929959881
10. It structured text into
headings, lists and
paragraphs and linked
documents with each other
using anchors.
18. If the design of the site
changes, you needed to
change each document of it.
23. ..if you knew all the problems
that different browsers have
with showing the table
properly.
24. <table width=quot;500quot; border=quot;0quot;>
<tr>
<td width=quot;1quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;10quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;10quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;118quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;118quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;10quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;10quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;300quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;350quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;10quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;10quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;1quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;1quot; alt=quot;quot;></td>
</tr>
<tr>
<td width=quot;1quot; rowspan=quot;3quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;1quot; alt=quot;quot;></td>
<td width=quot;1quot; rowspan=quot;2quot;><img src=quot;spacer.gifquot; width=quot;10quot; height=quot;10quot;
alt=quot;quot;></td>
<td width=quot;1quot; colspan=quot;3quot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;10quot; alt=quot;quot;></td>
<td width=quot;1quot; rowspan=quot;2quot;><img src=quot;spacer.gifquot; width=quot;10quot; Navigation Content
height=quot;10quot;
alt=quot;quot;></td>
<td width=quot;1quot; rowspan=quot;3quot; bgcolor=quot;blackquot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;1quot; alt=quot;quot;></td>
</tr>
<tr>
<td>Navigation</td>
<td></td>
<td>Content</td>
</tr>
<tr>
<td colspan=quot;5quot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;10quot; alt=quot;quot;></td>
</tr>
<tr>
<td rowspan=quot;7quot;><img src=quot;spacer.gifquot; width=quot;1quot; height=quot;1quot; alt=quot;quot;></td>
</tr>
</table>
25. Also: what do you need to do
when the navigation has to
move to the right?
28. CSS allowed you to define the
look and feel in a much more
detailed manner.
30. So moving a navigation
meant changing a single file.
31. However, the problem was
that developers wanted more
and more and the standards
took too long to agree on.
33. As browser makers were in
fierce competition this lead to
non-standard extensions to
both HTML and CSS.
34. This, together with more and
more support for JavaScript
in browsers lead to another
dark period of web
development.
40. Which is why one group stood
up and put a stake in the
ground.
42. The work of the WaSP and
many individual trainers,
writers and developers made
web standards a good idea to
follow and understand.
44. As the first .com bubble
collapsed people spent much
less money on silly web sites.
47. We did our best to make
people understand that –
used the right way –
JavaScript is not evil.
52. var request;
try{
request = new XMLHttpRequest();
AJAX }catch(error){
try{
request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;);
}catch(error){
return true;
}
}
request.open('get',this.href,true);
request.onreadystatechange=function(){
if(request.readyState == 1){
output.innerHTML='loading...';
}
if(request.readyState == 4){
if (request.status && /200|304/.test(request.status))
{
retrieved(request);
} else{
failed(request);
}
}
}
53. Ajax meant that web sites are
fast, easy to use and highly
interactive.
55. The new interest in JavaScript
helped us go out to the world
and tell it how you can use
JavaScript together with web
standards and create
amazing experiences.
56. To make this work, we
needed a buzzword for “new
JavaScript”
58. However, the idea of
unobtrusive scripting and
web standards development
became a bit forgotten
because of yet another
revolution.
61. Everything had to be highly
interactive and Ajax is not
even a nice-to-have but a
main goal.
63. The mess we have to deal with.
http://www.flickr.com/photos/28114609@N05/3433642297
65. Users expect web sites to be
highly responsive and
working like real
applications.
70. To make our products work,
we need to know a lot of
things:
72. The problem is that most
likely you won’t have the
time to do all that.
73. The other problem is that as
individuals we are likely to
find solutions for our
problems but not for all of the
possible ones.
74. For this, we need to
collaborate and compare our
findings.
75. We also need to be careful
not to repeat the mistakes of
the past.
79. Standards only make sense
when they offer an easier
way of achieving a goal and if
they have support in the real
world.
80. As a developer, you should
work first and foremost for
the user of your products.
81. The second most important
person to work for is the
developer that takes over
from you.
83. In order to make web
development a professional
choice we need to act like
professionals.
84. This means that instead of
getting excited about hacks
and quick solutions we should
concentrate on other goals.
85. Does it work for everybody?
Is it easy to change?
Is it a smooth experience?
Does it make it easier for
users to do what they want
to do?
89. They are a much sturdier base
to build on than browsers and
their current documentation.
93. The Yahoo User Interface
library was build to make it
easier for Yahoo developers
to build our products.
94. Working with as many
locations, products and
people as Yahoo does it is the
only way to keep a constant
high quality.
95. With that many developers at
hand we were able to build a
great library based on solid
principles.
96. When we build products, we
test them with users and see
what they want.
101. One thing we needed to do is
to define what browsers to
support and what “support”
means.
104. It means using what the
browser can reliably do and
not making it reach what it
cannot do.
105. This is the main principle of
progressive enhancement.
106. We must build products that
work, and only work more
smoothly when the browser
in use allows for it.
107. Without JavaScript With JavaScript
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html
109. We used the design pattern
information and built widgets
that work this way.
110. We test them across the
supported browsers to make
sure they work.
112. Using these, you can build
applications that work across
all the browsers supported by
the GBS.
113. We provide the bricks,
you build the product.
http://www.flickr.com/photos/seven13avenue/2080281038/
114. All of the widgets can be
extended and styled the way
you want them to.
116. You can extend the widgets
by listening for events that
happen to them.
118. If you don’t want to use the
widgets, you can use the
helper libraries that we use to
build the widgets.
120. These do the same thing, but
on a code level. They make
web standards work across
browsers (DOM support,
event handling).
121. If all you need is creating CSS
layouts that work across
browser land, there’s that,
too.
122. Even for *very* lazy developers:
http://developer.yahoo.com/yui/grids/builder/
123. One other thing we do is
make web development less
random by providing testing
tools.
124. All of this is open source, fully
documented and you can
either host it yourself or get it
from a high speed distributed
network (even Google’s).
125. Practices we follow:
Progressive enhancement
Standards compliance
Code validation (JSLint)
Extensibility
Modularisation
Documentation
126. Even if you don’t want to use
anything we offer, these are
good ideas to use in your
work.
127. Don’t become a part of the
group of developers that
leave behind unmaintainable
products.
130. There’s a lot of good
information available at the
exceptional performance site.
132. All of which can be tested
using YSlow.
http://developer.yahoo.com/yslow/
133. One final thing we’re working
on a lot is accessibility.
http://yuiblog.com/blog/category/accessibility/
134. This is all I have time for
today, so thanks again.
Check out the bookmarks on
the last page for lots of good
tutorials and documents.
135. Two of mine were even translated:
http://www.cn-cuckoo.com/2007/08/14/unobtrusive-javascript-progressive-
enhancement-gracefully-degrade-82.html
136. Two of mine were even translated:
http://www.zhuoqun.net/html/y2008/1103.html
137. THANKS!
Christian Heilmann
http://icant.co.uk
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
http://delicious.com/codepo8/taiwantrip