front end workshop v3

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


http://www.slideshare.net/wnas


Application
html, css and javascript.


HTML
itʼs easy.


NOT
if you do it right.


Structure


not presentation


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


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


div


span


p


h1 > h6


em


strong


abbr


Block & inline


Generally, block-level elements begin
on new lines, inline elements do not


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.


http://microformats.org/


In conclusion...


Use a proper doctype


CSS at the top


Javascript at the bottom


Use elements as they
should be used.


Do more with less.


Structure information,
NOT design.


Exercise
Write some markup.


break


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


CSS


selector {

property : value;
}


div#id.foo p .bar { ... }


CSS 2.1


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


Positioning


position : static;


position : relative;


ﬂoat: left;


ﬂoat : left;


IE doubles the padding and margin


display: inline;


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


Shorthand


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


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


Tools


Firebug
https://addons.mozilla.org/en-US/ﬁrefox/addon/1843


Yslow
http://developer.yahoo.com/yslow/


Web developer 1.1.6
https://addons.mozilla.org/en-US/ﬁrefox/addon/60


In conclusion


Start big
set font stuff on the body (and the td for ie)


End small
formulate exceptions on id’s, classes or on speciﬁc dom
elements.


Write as little as possible
It’s easy to get confused.


Know of the cascade
And embrace it.


Inline styles are evil
don’t use them.


Exercise


Style this.

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.


Global variables === evil


x = global;


function isitglobal() {
x = global;
}


var is your friend


function isitglobal() {
var x = notglobal;
}


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.

aka not so graceful
degradation...


JavaScript !== java
Really not.


JavaScript
Is not a toy language.


The old way


<a
href=”#”
onclick=”javascript:function(){
window.open(‘http://wnas.nl’,’wnas’,’width=300,height=400’);
}”>
go there!
</a>


Bad.


<a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a>


<a
href=”http://wnas.nl”
class=”popup”>
go there!
</a>


$(‘.popup’).click( function () {
window.open( this.href,’wnas’,’width=300,height=400’);
});


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


Closures
one of javascript most devious concepts


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


http://tinyurl.com/jsclosures


Patterns
Smatterns


If all you have is a
everything looks like a nail


Read a lot
this day is too short for patterns...
http://delicious.com/wnas


namespace
var ing = function () {
// do stuff
}();


Revealing module pattern
var foo = function () {
// do stuff
}
return {
foo : foo
}
}();


private variables
var config = { // object literal
name : ‘value’
};
var foo = function () {
alert ( config.name );
};
return {
foo : foo
};
}();

ing.foo();


Group your stuff
namespacing keeps it safe and structurally sound.


XML vs JSON
Use the best possible solution


Not the available one
JSON vs XML


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... ( use dojo for that )


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 time


Event delegation


Just in time initialization


Lazy loading


Code as prose.


Douglas
The good parts


JavaScript
The Deﬁnitive Guide (5th)


front end workshop v3

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (7)

Último

Último (20)

front end workshop v3

Notas do Editor