The slides from a whole day workshop I gave the 19th of januari 2009 for some dozen java developers. the goal was to teach them some basics for proper front end development...
8. Doctypes
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
9. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
42. HTML
Itʼs about structure, NOT presentation.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
43. <div class=quot;spacer-wquot;><!-- this empty
spacer is used to make a space between
vertical holding blocks --></div>
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
44. Do more with less
focus on the information, not the presentation.
that is what css is for.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
73. Exercise
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
74. break
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
75. JavaScript
part 1
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
76. JavaScript === evil
Do not rely on it.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
77. Donʼt rely on it
HTML is a rely accessible platform. Use JavaScript to
enhance it.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
78. Progressive Enhancement
!==
Graceful degradation.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
79. HIJAX vs AJAX
Plan ajax from the beginning and build it in the end.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
80. ns.nl
with javascript
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
81. ns.nl
without javascript
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
82. Politie
with javascript
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
83. Politie
without javascript
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
84. JavaScript !== java
Really not.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
85. JavaScript
Is not a toy language.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
86. The World's Most Misunderstood
Programming Language
‘Douglas Crockford’
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
87. Break
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
88. JavaScript
part 2
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
89. Closures
one of javascript most devious concepts
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
90. where a function
remembers what
happens around it
‘Stuart Langridge’
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
100. The solution
think of history
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
101. Ajax
origins
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
102. Clean up
That is what Ajax stood for anyway...
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
103. Pick up after yourself
Leave a clean dom after you...
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
104. Totaal voetbal
Let the individual elements of
your program work for you.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
105. Java
To handle the logic.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
106. JSP / XHTML
To display the structure of your programs.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
107. CSS
To present it in a proper manner.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
108. JavaScript
To enhance the user experience.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
109. Exercise
enhance the page you made...
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
110. Extra’s
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
112. Just in time initialization
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
113. Code as prose.
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
114. Douglas
The good parts
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
115. JavaScript
The Definitive Guide (5th)
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Notas del editor
I have been working on the web for the past 14 years. I started out as a designer bugging developers. In the past years I have come full circle, becoming the developer that is bugging designers.
There are three sides to a website... mvc...
we will start with the basics, HTML. boring isn’t it. after all html is easy...
There are a lot of things to think about, like;
html is for structure, a way to show the content...
Which doctype do you use?
Strict is the way to go, if you can
sketch the difference between ie and w3c
and still this is the way most websites were build...
especially if your building data intensive applications...
make sure you specify this one BEFORE the tbody
most people, turning away from tables, will use div’s in the same way...
to identify, must be unique
not just for css. to classify
most developers get a fo and a graphic design. they will use the design to build and the fo to tweak. they should do the reverse
bad
don’t add extra div’s to create that border the design calls for. You allready have enough elements to play with...
should be around 10.30
start 11.00
supported in most browsers
support is not as wide spread
Match any E elements, whose att atribute value begins with ‘val’
Matches any E element that has no children (including text nodes)
matches any F element that is preceded by an E element...
should be 11.45
style the page you just made with proper html...
start 12.00
around 12.30
start 13.00
=== is exactly equal to (value and type)
== is equal to
build a good app and make it better.
don’t build a good app and let it slip away...
build as if you have no javascript en HIJACK the form actions with javascript
please don’t try to make it into it...
Really it is not.
14.00
14.30 And I was asked to talk about things like closures...
power, confusion
ie is the problem
further than that, I will not go. as stuart talk opens my eyes but not enough. there is more in this than I know...
Don’t put all of your trust in patterns...
used to be no problem, as we left the page after a while
We don’t leave the page anymore, instead we keep producing more and more dom objects...
he forgot css and left out json or html as a data layer...
Where does the name ajax stood for in the beginning...
sorry for that, a mistake...
The cleaner was a household name for so long, that we should use it...