Frontend Workshop

Client Side Development
Introductory Workshop

Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Introduction
Hi, Iʼm Wilfred


Introduction
I do HTML, CSS and some Javascript


Application
html, css and javascript.


HTML
itʼs easy.


NOT
if you do it right.


Structure


Doctypes


<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>


quirksmode


boxmodel


HTML
itʼs more than tables.
much more


Tables


Tables are evil?


nope


Tables are beautiful


Caption


Thead


tfoot


tbody


tr


td


th


colspan


colgroup


rowspan


rowgroup


scope


HTML
Itʼs more than divʼs and spanʼs


div


span


p


h1 > h6


em


strong


abbr


q


blockquote


id


class


validator.w3.org


HTML
Itʼs about structure, NOT presentation.


Do more with less
focus on the information, not the presentation.
that is what css is for.


Exercise
nu.nl
ing.nl
postbank.nl


break


If you thought html was bad, I give you...


CSS


selector {

property : value;
}


CSS 2.1


http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/


ﬂoat : left;


Explorer 6 Duplicate Characters Bug


The IE5/6 Doubled Float-Margin Bug


http://positioniseverything.net/explorer.html


Cascading
http://www.stuffandnonsense.co.uk/archives/css_speciﬁcity_wars.html


padding: 2px
padding: 2px 2px 2px 2px;


Shorthand


CSS 3


http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/


power


Unlimited power


e[att^=”val”]


E:empty


E~F


CSS 3 ?


dojo


jQuery


Exercise


http://wnas.nl/fronteers/


JavaScript
part 1


JavaScript === evil
Do not rely on it.


Donʼt rely on it
HTML is a rely accessible platform. Use JavaScript to
enhance it.


Progressive Enhancement
!==

Graceful degradation.


HIJAX vs AJAX
Plan ajax from the beginning and build it in the end.


ns.nl
with javascript


ns.nl
without javascript


Politie
with javascript


Politie
without javascript


JavaScript !== java
Really not.


JavaScript
Is not a toy language.


The World's Most Misunderstood
Programming Language
‘Douglas Crockford’


Break


JavaScript
part 2


Closures
one of javascript most devious concepts


where a function
remembers what
happens around it
‘Stuart Langridge’


http://tinyurl.com/jsclosures


If all you have is a
everything looks like a nail


Patterns
Smatterns


Read a lot
this day is too short for patterns...


XML vs JSON
Use the best possible solution


Not the available one
XML vs JSON


Memory
And the garbage collector


So what changed ?
Ajax and Rich Internet Applications.


Ajax
Asynchronous
Javascript
and
XML


The solution
think of history


Ajax
origins


Clean up
That is what Ajax stood for anyway...


Pick up after yourself
Leave a clean dom after you...


Totaal voetbal
Let the individual elements of
your program work for you.


Java
To handle the logic.


JSP / XHTML
To display the structure of your programs.


CSS
To present it in a proper manner.


JavaScript
To enhance the user experience.


Exercise
enhance the page you made...


Extra’s


Event delegation


Just in time initialization


Code as prose.


Douglas
The good parts


JavaScript
The Deﬁnitive Guide (5th)


Frontend Workshop

Recommended

Recommended

More Related Content

More from Wilfred Nas

More from Wilfred Nas (7)

Recently uploaded

Recently uploaded (20)

Frontend Workshop

Editor's Notes