Client Side Development
Introductory Workshop




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfr...
Introduction
Hi, Iʼm Wilfred




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Introduction
I do HTML, CSS and some Javascript




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wil...
http://www.slideshare.net/wnas




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Application
html, css and javascript.




         Wilfred Nas - Client Side Development
         wnas.nl | twitter.com/wn...
HTML
itʼs easy.




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
NOT
if you do it right.




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


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquo...
quirksmode


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
HTML
itʼs more than tables.
   much more




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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Tables are evil?


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




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


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


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


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


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


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


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


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


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


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


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


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
HTML
Itʼs more than divʼs and spanʼs




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


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


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


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


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


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


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


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Generally, block-level elements begin
on new lines, inline elements do not




 Wilfred Nas - Client Side Development
 wna...
id


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


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
HTML
             Itʼs about structure, NOT presentation.




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/...
<div class=quot;spacer-wquot;><!-- this empty spacer
  is used to make a space between vertical
           holding blocks ...
Do more with less
focus on the information, not the presentation.
that is what css is for.




Wilfred Nas - Client Side D...
http://microformats.org/




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Exercise
nu.nl
ing.nl
postbank.nl




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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
If you thought html was bad, I give you...




 Wilfred Nas - Client Side Development
 wnas.nl | twitter.com/wnas | wilfre...
CSS


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

 property : value;
}


 Wilfred Nas - Client Side Development
 wnas.nl | twitter.com/wnas | wilfred@wnas.nl
div#id.foo p .bar { ... }


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
http://www.456bereastreet.com/archive/200509/
               css_21_selectors_part_1/




Wilfred Nas - Client Side Develo...
Positioning


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
position : static;


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
position : relative;


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
float: left;


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
float : left;


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
IE doubles the padding and margin




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
display: inline;


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Explorer 6 Duplicate Characters Bug




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
The IE5/6 Doubled Float-Margin Bug




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
http://positioniseverything.net/
                explorer.html




Wilfred Nas - Client Side Development
wnas.nl | twitter...
Cascading
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html




         Wilfred Nas - Client Side Devel...
padding: 2px
padding: 2px 2px 2px 2px;




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | wilf...
Shorthand


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
http://www.456bereastreet.com/archive/200601/
               css_3_selectors_explained/




Wilfred Nas - Client Side Deve...
power


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




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
e[att^=”val”]


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


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


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


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


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


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Firebug
   https://addons.mozilla.org/en-US/firefox/addon/1843




Wilfred Nas - Client Side Development
wnas.nl | twitter....
Yslow
               http://developer.yahoo.com/yslow/




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wna...
Web developer 1.1.6
     https://addons.mozilla.org/en-US/firefox/addon/60




Wilfred Nas - Client Side Development
wnas.n...
Exercise



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


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



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


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




Wilfred Nas - Client Side Development
wnas.nl | twitt...
JavaScript === evil
                            Do not rely on it.




Wilfred Nas - Client Side Development
wnas.nl | twi...
Donʼt rely on it
HTML is a rely accessible platform. Use JavaScript to
enhance it.




Wilfred Nas - Client Side Developme...
Global variables === evil


 Wilfred Nas - Client Side Development
 wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Progressive Enhancement
                                     !==

        Graceful degradation.


Wilfred Nas - Client Sid...
HIJAX vs AJAX
Plan ajax from the beginning and build it in the end.




Wilfred Nas - Client Side Development
wnas.nl | tw...
ns.nl
with javascript




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




        Wilfred Nas - Client Side Development
        wnas.nl | twitter.com/wnas | wilfred@wn...
JavaScript !== java
                                Really not.




Wilfred Nas - Client Side Development
wnas.nl | twitte...
JavaScript
Is not a toy language.




        Wilfred Nas - Client Side Development
        wnas.nl | twitter.com/wnas | w...
<a
  href=”#”
  onclick=”javascript:function(){
     window.open(‘http://wnas.nl’,’wnas’,’width=300,height=400’);
  }”>
  ...
<a
  href=”http://wnas.nl”
  class=”popup”>
     go there!
</a>




     Wilfred Nas - Client Side Development
     wnas.n...
The World's Most Misunderstood
      Programming Language
‘Douglas Crockford’




    Wilfred Nas - Client Side Developmen...
Closures
one of javascript most devious concepts




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wi...
where a function
remembers what
happens around it
‘Stuart Langridge’




    Wilfred Nas - Client Side Development
    wna...
http://tinyurl.com/jsclosures




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




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
If all you have is a
everything looks like a nail




         Wilfred Nas - Client Side Development
         wnas.nl | tw...
Read a lot
this day is too short for patterns...
http://delicious.com/wnas




    Wilfred Nas - Client Side Development
 ...
namespace
var ing = function () {
     // do stuff
}();




  Wilfred Nas - Client Side Development
  wnas.nl | twitter.co...
Revealing module pattern
var ing = function () {
     var foo = function () {
         // do stuff
     }
     return {
  ...
private variables
var ing = function () {
     var config = { // object literal
         name : ‘value’
     };
     var f...
XML vs JSON
Use the best possible solution




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | ...
Not the available one
JSON vs XML




  Wilfred Nas - Client Side Development
  wnas.nl | twitter.com/wnas | wilfred@wnas....
Memory
And the garbage collector




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | wilfred@wn...
So what changed ?
Ajax and Rich Internet Applications.




    Wilfred Nas - Client Side Development
    wnas.nl | twitter...
Ajax
Asynchronous
Javascript
and
XML



       Wilfred Nas - Client Side Development
       wnas.nl | twitter.com/wnas | w...
The solution
think of history




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




          Wilfred Nas - Client Side Development
          wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Clean up
That is what Ajax stood for anyway...




         Wilfred Nas - Client Side Development
         wnas.nl | twitt...
Pick up after yourself
Leave a clean dom after you...




    Wilfred Nas - Client Side Development
    wnas.nl | twitter....
Totaal voetbal
Let the individual elements of your
program work for you.




        Wilfred Nas - Client Side Development...
Java
To handle the logic.




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | wilfred@wnas.nl
JSP / XHTML
To display the structure of your programs.




    Wilfred Nas - Client Side Development
    wnas.nl | twitter...
CSS
To present it in a proper manner.




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | wilfr...
JavaScript
To enhance the user experience.




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | ...
Exercise
enhance the page you made...




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/wnas | wilfr...
Extra time


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Just in time initialization


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


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


Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Douglas
The good parts




       Wilfred Nas - Client Side Development
       wnas.nl | twitter.com/wnas | wilfred@wnas.nl
JavaScript
The Definitive Guide (5th)




        Wilfred Nas - Client Side Development
        wnas.nl | twitter.com/wnas ...
Upcoming SlideShare
Loading in …5
×

front end workshop v2

812 views

Published on

workshop on proper front end development, covering html, css and javascript

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
812
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide


  • 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.
  • giving workshops is not my main job, just something I do on the side. mostly when people give me beer and get me talking :)
  • the only url you have to write down
  • There are three sides to a website... mvc...
  • we will start with the basics, HTML. boring isn&#x2019;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&#x2019;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&#x2019;t add extra div&#x2019;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


  • selectors are not limited to id&#x2019;s and can be chained...
    multiple classes can be used. and such...
  • supported in most browsers
































  • support is not as wide spread






  • Match any E elements, whose att atribute value begins with &#x2018;val&#x2019;
  • Matches any E element that has no children (including text nodes)
  • matches any F element that is preceded by an E element...
    general sibling selector














  • 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&#x2019;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&#x2019;t try to make it into it...
  • Really it is not.






  • 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&#x2019;t put all of your trust in patterns...












  • transactie module by the dutch police to process your tickets is suffering...
  • used to be no problem, as we left the page after a while
  • We don&#x2019;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...
  • look into the architecture document for a good example, me I make the mistake sometimes, that&#x2019;s where my hair is going...




















  • including main characters and a compelling story line...
  • JavaScript as a language is great, but has many bad parts. You want to avoid them...
  • A must have reference guide of a gaziljon pages. Any decent JavaScript developer has a copy handy...
  • front end workshop v2

    1. 1. Client Side Development Introductory Workshop Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    2. 2. Introduction Hi, Iʼm Wilfred Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    3. 3. Introduction I do HTML, CSS and some Javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    4. 4. http://www.slideshare.net/wnas Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    5. 5. Application html, css and javascript. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    6. 6. HTML itʼs easy. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    7. 7. NOT if you do it right. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    8. 8. Structure Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    9. 9. Doctypes Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    10. 10. <!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
    11. 11. quirksmode Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    12. 12. boxmodel Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    13. 13. HTML itʼs more than tables. much more Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    14. 14. Tables Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    15. 15. Tables are evil? Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    16. 16. nope Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    17. 17. Tables are beautiful Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    18. 18. Caption Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    19. 19. Thead Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    20. 20. tfoot Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    21. 21. tbody Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    22. 22. tr Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    23. 23. td Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    24. 24. th Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    25. 25. colspan Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    26. 26. colgroup Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    27. 27. rowspan Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    28. 28. rowgroup Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    29. 29. HTML Itʼs more than divʼs and spanʼs Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    30. 30. div Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    31. 31. span Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    32. 32. p Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    33. 33. h1 > h6 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    34. 34. em Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    35. 35. strong Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    36. 36. abbr Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    37. 37. Block & inline Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    38. 38. Generally, block-level elements begin on new lines, inline elements do not Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    39. 39. id Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    40. 40. class Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    41. 41. validator.w3.org Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    42. 42. HTML Itʼs about structure, NOT presentation. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    43. 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. 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
    45. 45. http://microformats.org/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    46. 46. Exercise nu.nl ing.nl postbank.nl Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    47. 47. break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    48. 48. If you thought html was bad, I give you... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    49. 49. CSS Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    50. 50. selector { property : value; } Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    51. 51. div#id.foo p .bar { ... } Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    52. 52. CSS 2.1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    53. 53. http://www.456bereastreet.com/archive/200509/ css_21_selectors_part_1/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    54. 54. Positioning Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    55. 55. position : static; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    56. 56. position : relative; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    57. 57. float: left; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    58. 58. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    59. 59. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    60. 60. float : left; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    61. 61. IE doubles the padding and margin Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    62. 62. display: inline; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    63. 63. Explorer 6 Duplicate Characters Bug Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    64. 64. The IE5/6 Doubled Float-Margin Bug Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    65. 65. http://positioniseverything.net/ explorer.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    66. 66. Cascading http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    67. 67. padding: 2px padding: 2px 2px 2px 2px; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    68. 68. Shorthand Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    69. 69. CSS 3 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    70. 70. http://www.456bereastreet.com/archive/200601/ css_3_selectors_explained/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    71. 71. power Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    72. 72. Unlimited power Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    73. 73. e[att^=”val”] Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    74. 74. E:empty Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    75. 75. E~F Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    76. 76. CSS 3 ? Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    77. 77. dojo Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    78. 78. jQuery Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    79. 79. Tools Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    80. 80. Firebug https://addons.mozilla.org/en-US/firefox/addon/1843 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    81. 81. Yslow http://developer.yahoo.com/yslow/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    82. 82. Web developer 1.1.6 https://addons.mozilla.org/en-US/firefox/addon/60 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    83. 83. Exercise Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    84. 84. http://wnas.nl/fronteers/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    85. 85. Exercise Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    86. 86. break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    87. 87. JavaScript part 1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    88. 88. JavaScript === evil Do not rely on it. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    89. 89. 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
    90. 90. Global variables === evil Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    91. 91. Progressive Enhancement !== Graceful degradation. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    92. 92. 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
    93. 93. ns.nl with javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    94. 94. ns.nl without javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    95. 95. JavaScript !== java Really not. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    96. 96. JavaScript Is not a toy language. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    97. 97. <a href=”#” onclick=”javascript:function(){ window.open(‘http://wnas.nl’,’wnas’,’width=300,height=400’); }”> go there! </a> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    98. 98. <a href=”http://wnas.nl” class=”popup”> go there! </a> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    99. 99. The World's Most Misunderstood Programming Language ‘Douglas Crockford’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    100. 100. Closures one of javascript most devious concepts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    101. 101. where a function remembers what happens around it ‘Stuart Langridge’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    102. 102. http://tinyurl.com/jsclosures Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    103. 103. Patterns Smatterns Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    104. 104. If all you have is a everything looks like a nail Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    105. 105. Read a lot this day is too short for patterns... http://delicious.com/wnas Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    106. 106. namespace var ing = function () { // do stuff }(); Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    107. 107. Revealing module pattern var ing = function () { var foo = function () { // do stuff } return { foo : foo } }(); Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    108. 108. private variables var ing = function () { var config = { // object literal name : ‘value’ }; var foo = function () { alert ( config.name ); }; return { foo : foo }; }(); ing.foo(); Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    109. 109. XML vs JSON Use the best possible solution Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    110. 110. Not the available one JSON vs XML Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    111. 111. Memory And the garbage collector Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    112. 112. So what changed ? Ajax and Rich Internet Applications. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    113. 113. Ajax Asynchronous Javascript and XML Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    114. 114. The solution think of history Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    115. 115. Ajax origins Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    116. 116. Clean up That is what Ajax stood for anyway... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    117. 117. Pick up after yourself Leave a clean dom after you... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    118. 118. 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
    119. 119. Java To handle the logic. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    120. 120. JSP / XHTML To display the structure of your programs. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    121. 121. CSS To present it in a proper manner. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    122. 122. JavaScript To enhance the user experience. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    123. 123. Exercise enhance the page you made... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    124. 124. Extra time Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    125. 125. Event delegation Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    126. 126. Just in time initialization Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    127. 127. Lazy loading Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    128. 128. Code as prose. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    129. 129. Douglas The good parts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    130. 130. JavaScript The Definitive Guide (5th) Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl

    ×