the road to professional web development
DESCRIPTION
My presentation in Taiwan about the history of web development and what practices make sense and got followed in the YUI.TRANSCRIPT
![Page 1: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/1.jpg)
The road to professional web development
Christian Heilmann | http://icant.co.uk | http://wait-till-i.com
Taipeh, Taiwan, April 2009
![Page 2: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/2.jpg)
Hello and thank you for being here.
![Page 3: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/3.jpg)
I am Chris...
![Page 4: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/4.jpg)
...and today I will talk about the road to professional web development.
![Page 5: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/5.jpg)
You cannot look forward without learning from the mistakes of the past.
![Page 6: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/6.jpg)
Otherwise you are very likely to repeat them.
![Page 7: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/7.jpg)
So let’s take a look at the past of web development.
![Page 8: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/8.jpg)
The Dark Ages
http://www.flickr.com/photos/25725360@N05/2929959881
![Page 9: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/9.jpg)
In the beginning there was HTML.
![Page 10: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/10.jpg)
It structured text into headings, lists and paragraphs and linked documents with each other using anchors.
![Page 11: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/11.jpg)
This was good, and quite a revolution...
![Page 12: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/12.jpg)
...but also very, very boring.
![Page 13: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/13.jpg)
People wanted colours, different types of text, borders and images.
![Page 14: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/14.jpg)
Which lead to the next step.
![Page 15: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/15.jpg)
The first mistake:
Presentational Markup
![Page 16: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/16.jpg)
Adding bgcolor, color, <font>, border, hspace, vspace,float and all other presentational HTML allowed us to style the document.
![Page 17: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/17.jpg)
It doesn’t allow you to style a whole site though.
![Page 18: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/18.jpg)
If the design of the site changes, you needed to change each document of it.
![Page 19: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/19.jpg)
However, as sites were small this was not a problem – yet.
![Page 20: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/20.jpg)
Design was still limited to a single column.
![Page 21: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/21.jpg)
Until people realised that you can use the <table> element to create multi-column layouts.
![Page 22: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/22.jpg)
And it was *so* easy.
![Page 23: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/23.jpg)
..if you knew all the problems that different browsers have with showing the table properly.
![Page 24: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/24.jpg)
<table width="500" border="0"> <tr> <td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1" alt=""></td> <td width="10" bgcolor="black"><img src="spacer.gif" width="10" height="1" alt=""></td> <td width="118" bgcolor="black"><img src="spacer.gif" width="118" height="1" alt=""></td> <td width="10" bgcolor="black"><img src="spacer.gif" width="10" height="1" alt=""></td> <td width="300" bgcolor="black"><img src="spacer.gif" width="350" height="1" alt=""></td> <td width="10" bgcolor="black"><img src="spacer.gif" width="10" height="1" alt=""></td> <td width="1" bgcolor="black"><img src="spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td width="1" rowspan="3" bgcolor="black"><img src="spacer.gif" width="1" height="1" alt=""></td> <td width="1" rowspan="2"><img src="spacer.gif" width="10" height="10" alt=""></td> <td width="1" colspan="3"><img src="spacer.gif" width="1" height="10" alt=""></td> <td width="1" rowspan="2"><img src="spacer.gif" width="10" height="10" alt=""></td> <td width="1" rowspan="3" bgcolor="black"><img src="spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td>Navigation</td> <td></td> <td>Content</td> </tr> <tr> <td colspan="5"><img src="spacer.gif" width="1" height="10" alt=""></td> </tr> <tr> <td rowspan="7"><img src="spacer.gif" width="1" height="1" alt=""></td> </tr></table>
Navigation Content
![Page 25: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/25.jpg)
Also: what do you need to do when the navigation has to move to the right?
![Page 26: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/26.jpg)
The solution was to separate the presentation from the structure.
![Page 27: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/27.jpg)
CSS
![Page 28: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/28.jpg)
CSS allowed you to define the look and feel in a much more detailed manner.
![Page 29: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/29.jpg)
CSS is defined once and applied to as many documents as you want.
![Page 30: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/30.jpg)
So moving a navigation meant changing a single file.
![Page 31: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/31.jpg)
However, the problem was that developers wanted more and more and the standards took too long to agree on.
![Page 32: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/32.jpg)
Browser Wars
http
://w
ww
.flic
kr.c
om/p
hoto
s/71
8956
5@N
07/3
2791
7817
6
![Page 33: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/33.jpg)
As browser makers were in fierce competition this lead to non-standard extensions to both HTML and CSS.
![Page 34: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/34.jpg)
This, together with more and more support for JavaScript in browsers lead to another dark period of web development.
![Page 35: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/35.jpg)
DHTML Hell
http://www.flickr.com/photos/19703909@N00/3411843177
![Page 36: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/36.jpg)
Using DHTML (JavaScript controlling visual changes in the document) we went nuts.
![Page 37: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/37.jpg)
Moving and scrolling and JavaScript dependent navigations.
![Page 38: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/38.jpg)
Blink, Flicker, Crash.
![Page 39: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/39.jpg)
The biggest issue was that we tried to support every browser the same way.
![Page 40: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/40.jpg)
Which is why one group stood up and put a stake in the ground.
![Page 41: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/41.jpg)
WaSP – to hell with bad browsers.
![Page 42: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/42.jpg)
The work of the WaSP and many individual trainers,
writers and developers made web standards a good idea to
follow and understand.
![Page 43: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/43.jpg)
Which made a lot of sense.
![Page 44: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/44.jpg)
As the first .com bubble collapsed people spent much less money on silly web sites.
![Page 45: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/45.jpg)
Instead, they wanted easy to maintain, extend and change
web sites.
![Page 46: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/46.jpg)
This meant also that people didn’t want JavaScript
solutions any more.
![Page 47: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/47.jpg)
We did our best to make people understand that –
used the right way – JavaScript is not evil.
![Page 48: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/48.jpg)
Unobtrusive JavaScript
![Page 49: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/49.jpg)
http://www.zhuoqun.net/html/y2008/1103.html
http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
![Page 50: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/50.jpg)
However, the painful memories of DHTML hell were
still hard to forget.
![Page 51: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/51.jpg)
Until the next revolution came.
![Page 52: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/52.jpg)
var request; try{ request = new XMLHttpRequest(); }catch(error){ try{ request = new ActiveXObject("Microsoft.XMLHTTP"); }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); } } }
AJA
X
![Page 53: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/53.jpg)
Ajax meant that web sites are fast, easy to use and highly interactive.
![Page 54: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/54.jpg)
And it works by using JavaScript.
![Page 55: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/55.jpg)
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.
![Page 56: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/56.jpg)
To make this work, we needed a buzzword for “new JavaScript”
![Page 57: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/57.jpg)
DOM Scripting
![Page 58: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/58.jpg)
However, the idea of unobtrusive scripting and web standards development became a bit forgotten because of yet another revolution.
![Page 59: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/59.jpg)
WEB 2.0
http://www.flickr.com/photos/brownpau/198591442/
![Page 60: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/60.jpg)
WEB 2.0 meant that users are creating the web they use.
![Page 61: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/61.jpg)
Everything had to be highly interactive and Ajax is not even a nice-to-have but a main goal.
![Page 62: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/62.jpg)
So this is where we are.
![Page 63: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/63.jpg)
The mess we have to deal with.http://www.flickr.com/photos/28114609@N05/3433642297
![Page 64: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/64.jpg)
The Ajax revolution and the Web 2.0 move set high expectations.
![Page 65: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/65.jpg)
Users expect web sites to be highly responsive and working like real applications.
![Page 66: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/66.jpg)
However, we are still working in browsers and on the web.
![Page 67: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/67.jpg)
Ajax driven web sites do not reload the whole document.
![Page 68: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/68.jpg)
This breaks a lot of things.
![Page 69: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/69.jpg)
No bookmarking.
No back button.
No interaction with assistive technology.
![Page 70: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/70.jpg)
To make our products work, we need to know a lot of things:
![Page 71: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/71.jpg)
the technologies
how browsers fail supporting them
how users interact with systems
what people use
![Page 72: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/72.jpg)
The problem is that most likely you won’t have the time to do all that.
![Page 73: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/73.jpg)
The other problem is that as individuals we are likely to find solutions for our problems but not for all of the possible ones.
![Page 74: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/74.jpg)
For this, we need to collaborate and compare our findings.
![Page 75: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/75.jpg)
We also need to be careful not to repeat the mistakes of the past.
![Page 76: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/76.jpg)
Working on a solid base
![Page 77: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/77.jpg)
It is not about technology.
![Page 78: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/78.jpg)
You do not work to satisfy browsers.
![Page 79: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/79.jpg)
Standards only make sense when they offer an easier way of achieving a goal and if they have support in the real world.
![Page 80: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/80.jpg)
As a developer, you should work first and foremost for the user of your products.
![Page 81: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/81.jpg)
The second most important person to work for is the developer that takes over from you.
![Page 82: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/82.jpg)
The easier the interface, the more people will use it.
![Page 83: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/83.jpg)
In order to make web development a professional choice we need to act like professionals.
![Page 84: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/84.jpg)
This means that instead of getting excited about hacks and quick solutions we should concentrate on other goals.
![Page 85: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/85.jpg)
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?
![Page 86: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/86.jpg)
Here’s the good news: we are almost there.
![Page 87: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/87.jpg)
Web development libraries like jQuery, prototype, mootools, Dojo, YUI... are there to help you do your job.
![Page 88: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/88.jpg)
These libraries are all open for you to feed back problems and contribute solutions.
![Page 89: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/89.jpg)
They are a much sturdier base to build on than browsers and their current documentation.
![Page 90: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/90.jpg)
One base to work from is YUI:
![Page 91: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/91.jpg)
![Page 93: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/93.jpg)
The Yahoo User Interface library was build to make it easier for Yahoo developers to build our products.
![Page 94: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/94.jpg)
Working with as many locations, products and people as Yahoo does it is the only way to keep a constant high quality.
![Page 95: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/95.jpg)
With that many developers at hand we were able to build a great library based on solid principles.
![Page 96: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/96.jpg)
When we build products, we test them with users and see what they want.
![Page 97: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/97.jpg)
Analyzing this we came up with usage patterns, which are available to you.
![Page 98: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/98.jpg)
http://developer.yahoo.com/ypatterns
![Page 99: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/99.jpg)
They even come with stencils for your designers.
![Page 100: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/100.jpg)
http://developer.yahoo.com/ypatterns/wireframes/
![Page 101: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/101.jpg)
One thing we needed to do is to define what browsers to support and what “support” means.
![Page 102: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/102.jpg)
http://developer.yahoo.com/yui/articles/gbs/
![Page 103: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/103.jpg)
Support is not giving every browser the same experience.
![Page 104: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/104.jpg)
It means using what the browser can reliably do and not making it reach what it cannot do.
![Page 105: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/105.jpg)
This is the main principle of progressive enhancement.
![Page 106: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/106.jpg)
We must build products that work, and only work more smoothly when the browser in use allows for it.
![Page 107: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/107.jpg)
Without JavaScript With JavaScript
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html
![Page 108: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/108.jpg)
Without JavaScript
With JavaScript
http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html
![Page 109: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/109.jpg)
We used the design pattern information and built widgets that work this way.
![Page 110: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/110.jpg)
We test them across the supported browsers to make sure they work.
![Page 111: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/111.jpg)
http://ui.jquery.com/
http://ui.jquery.com
![Page 112: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/112.jpg)
Using these, you can build applications that work across all the browsers supported by the GBS.
![Page 113: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/113.jpg)
We provide the bricks, you build the product.
http://www.flickr.com/photos/seven13avenue/2080281038/
![Page 114: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/114.jpg)
All of the widgets can be extended and styled the way you want them to.
![Page 115: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/115.jpg)
http://developer.yahoo.com/yui/articles/skinning/
![Page 116: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/116.jpg)
You can extend the widgets by listening for events that happen to them.
![Page 117: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/117.jpg)
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr_log.html
![Page 118: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/118.jpg)
If you don’t want to use the widgets, you can use the helper libraries that we use to build the widgets.
![Page 119: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/119.jpg)
![Page 120: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/120.jpg)
These do the same thing, but on a code level. They make web standards work across browsers (DOM support, event handling).
![Page 121: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/121.jpg)
If all you need is creating CSS layouts that work across browser land, there’s that, too.
![Page 122: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/122.jpg)
http://developer.yahoo.com/yui/grids/builder/
Even for *very* lazy developers:
![Page 123: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/123.jpg)
One other thing we do is make web development less random by providing testing tools.
![Page 124: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/124.jpg)
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).
![Page 125: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/125.jpg)
Practices we follow:Progressive enhancement
Standards compliance
Code validation (JSLint)
Extensibility
Modularisation
Documentation
![Page 126: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/126.jpg)
Even if you don’t want to use anything we offer, these are good ideas to use in your work.
![Page 127: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/127.jpg)
Don’t become a part of the group of developers that leave behind unmaintainable products.
![Page 128: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/128.jpg)
Another thing to consider is how your products perform.
![Page 129: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/129.jpg)
Fast and smooth products make users happy.
![Page 130: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/130.jpg)
There’s a lot of good information available at the exceptional performance site.
![Page 131: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/131.jpg)
http://developer.yahoo.com/performance/
![Page 132: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/132.jpg)
All of which can be tested using YSlow.
http://developer.yahoo.com/yslow/
![Page 133: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/133.jpg)
One final thing we’re working on a lot is accessibility.
http://yuiblog.com/blog/category/accessibility/
![Page 134: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/134.jpg)
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.
![Page 135: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/135.jpg)
Two of mine were even translated:
http://www.cn-cuckoo.com/2007/08/14/unobtrusive-javascript-progressive-enhancement-gracefully-degrade-82.html
![Page 136: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/136.jpg)
Two of mine were even translated:
http://www.zhuoqun.net/html/y2008/1103.html
![Page 137: The road to professional web development](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f3e12b4c905471e8b4bba/html5/thumbnails/137.jpg)
Christian Heilmann
http://icant.co.uk
http://wait-till-i.com
http://scriptingenabled.org
http://twitter.com/codepo8
T H A N K S !
http://delicious.com/codepo8/taiwantrip