Your SlideShare is downloading. ×
0
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...
Application
html, css and javascript.




        Wilfred Nas - Client Side Development
        wnas.nl | twitter.com/wnas...
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
scope


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
q


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


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




Wilfred Nas - Client Side D...
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
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 Development
    wn...
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
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.com/wnas | wilfr...
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 | wilfre...
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 Development
    ...
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
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 | twitt...
Donʼt rely on it
HTML is a rely accessible platform. Use JavaScript to
enhance it.




Wilfred Nas - Client Side Developme...
Progressive Enhancement
                                    !==

       Graceful degradation.

Wilfred Nas - Client Side D...
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...
Politie
with javascript




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




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




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




        Wilfred Nas - Client Side Development
        wnas.nl | twitter.com/wnas | w...
The World's Most Misunderstood
      Programming Language
‘Douglas Crockford’




   Wilfred Nas - Client Side Development...
Break



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




Wilfred Nas - Client Side Development
wnas.nl | twitt...
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@wna...
If all you have is a
everything looks like a nail




        Wilfred Nas - Client Side Development
        wnas.nl | twit...
Patterns
Smatterns




Wilfred Nas - Client Side Development
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Read a lot
this day is too short for patterns...




    Wilfred Nas - Client Side Development
    wnas.nl | twitter.com/w...
XML vs JSON
Use the best possible solution




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




  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@wnas...
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 | wil...
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 | wi...
Exercise
enhance the page you made...




   Wilfred Nas - Client Side Development
   wnas.nl | twitter.com/wnas | wilfred...
Extra’s


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
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
×

Frontend Workshop

710

Published on

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...

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
710
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
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.




  • 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




  • 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...










  • 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.




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










  • 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...



























  • Transcript of "Frontend Workshop"

    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. Application html, css and javascript. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    5. 5. HTML itʼs easy. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    6. 6. NOT if you do it right. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    7. 7. Structure Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    8. 8. Doctypes Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    9. 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
    10. 10. quirksmode Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    11. 11. boxmodel Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    12. 12. HTML itʼs more than tables. much more Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    13. 13. Tables Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    14. 14. Tables are evil? Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    15. 15. nope Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    16. 16. Tables are beautiful Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    17. 17. Caption Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    18. 18. Thead Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    19. 19. tfoot Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    20. 20. tbody Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    21. 21. tr Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    22. 22. td Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    23. 23. th Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    24. 24. colspan Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    25. 25. colgroup Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    26. 26. rowspan Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    27. 27. rowgroup Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    28. 28. scope 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. q Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    38. 38. blockquote 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. Exercise nu.nl ing.nl postbank.nl Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    46. 46. break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    47. 47. If you thought html was bad, I give you... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    48. 48. CSS Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    49. 49. selector { property : value; } Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    50. 50. CSS 2.1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    51. 51. http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    52. 52. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    53. 53. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    54. 54. float : left; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    55. 55. Explorer 6 Duplicate Characters Bug Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    56. 56. The IE5/6 Doubled Float-Margin Bug Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    57. 57. http://positioniseverything.net/explorer.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    58. 58. Cascading http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    59. 59. padding: 2px padding: 2px 2px 2px 2px; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    60. 60. Shorthand Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    61. 61. CSS 3 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    62. 62. http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    63. 63. power Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    64. 64. Unlimited power Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    65. 65. e[att^=”val”] Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    66. 66. E:empty Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    67. 67. E~F Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    68. 68. CSS 3 ? Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    69. 69. dojo Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    70. 70. jQuery Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    71. 71. Exercise Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    72. 72. http://wnas.nl/fronteers/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    73. 73. Exercise Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    74. 74. break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    75. 75. JavaScript part 1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    76. 76. JavaScript === evil Do not rely on it. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    77. 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. 78. Progressive Enhancement !== Graceful degradation. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    79. 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. 80. ns.nl with javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    81. 81. ns.nl without javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    82. 82. Politie with javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    83. 83. Politie without javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    84. 84. JavaScript !== java Really not. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    85. 85. JavaScript Is not a toy language. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    86. 86. The World's Most Misunderstood Programming Language ‘Douglas Crockford’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    87. 87. Break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    88. 88. JavaScript part 2 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    89. 89. Closures one of javascript most devious concepts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    90. 90. where a function remembers what happens around it ‘Stuart Langridge’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    91. 91. http://tinyurl.com/jsclosures Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    92. 92. If all you have is a everything looks like a nail Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    93. 93. Patterns Smatterns Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    94. 94. Read a lot this day is too short for patterns... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    95. 95. XML vs JSON Use the best possible solution Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    96. 96. Not the available one XML vs JSON Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    97. 97. Memory And the garbage collector Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    98. 98. So what changed ? Ajax and Rich Internet Applications. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    99. 99. Ajax Asynchronous Javascript and XML Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    100. 100. The solution think of history Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    101. 101. Ajax origins Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    102. 102. Clean up That is what Ajax stood for anyway... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    103. 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. 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. 105. Java To handle the logic. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    106. 106. JSP / XHTML To display the structure of your programs. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    107. 107. CSS To present it in a proper manner. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    108. 108. JavaScript To enhance the user experience. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    109. 109. Exercise enhance the page you made... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    110. 110. Extra’s Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    111. 111. Event delegation Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    112. 112. Just in time initialization Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    113. 113. Code as prose. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    114. 114. Douglas The good parts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    115. 115. JavaScript The Definitive Guide (5th) Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×