• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
front end workshop v3
 

front end workshop v3

on

  • 1,124 views

third version of my workshop for the ing

third version of my workshop for the ing

Statistics

Views

Total Views
1,124
Views on SlideShare
1,123
Embed Views
1

Actions

Likes
0
Downloads
14
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br />
  • 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. <br />
  • giving workshops is not my main job, just something I do on the side. mostly when people give me beer and get me talking :) <br />
  • the only url you have to write down <br />
  • There are three sides to a website... mvc... <br />
  • we will start with the basics, HTML. boring isn’t it. after all html is easy... <br />
  • There are a lot of things to think about, like; <br />
  • html is for structure, a way to show the content... <br />
  • <br /> <br />
  • Which doctype do you use? <br />
  • Strict is the way to go, if you can <br />
  • <br /> <br />
  • sketch the difference between ie and w3c <br />
  • and still this is the way most websites were build... <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • especially if your building data intensive applications... <br />
  • <br /> <br />
  • <br /> <br />
  • make sure you specify this one BEFORE the tbody <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • most people, turning away from tables, will use div’s in the same way... <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • to identify, must be unique <br />
  • not just for css. to classify <br />
  • <br /> <br />
  • 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 <br />
  • bad <br />
  • don’t add extra div’s to create that border the design calls for. You allready have enough elements to play with... <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • should be around 10.30 <br />
  • <br /> <br />
  • start 11.00 <br />
  • <br /> <br />
  • selectors are not limited to id’s and can be chained... <br /> multiple classes can be used. and such... <br />
  • supported in most browsers <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • support is not as wide spread <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • Match any E elements, whose att atribute value begins with ‘val’ <br />
  • Matches any E element that has no children (including text nodes) <br />
  • matches any F element that is preceded by an E element... <br /> general sibling selector <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • style the page you just made with proper html... <br /> start 12.00 <br />
  • should be 11.45 <br />
  • <br /> <br />
  • around 12.30 <br />
  • start 13.00 <br />
  • === is exactly equal to (value and type) <br /> <br /> == is equal to <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • build a good app and make it better. <br /> don’t build a good app and let it slip away... <br />
  • build as if you have no javascript en HIJACK the form actions with javascript <br />
  • <br /> <br />
  • <br /> <br />
  • please don’t try to make it into it... <br />
  • Really it is not. <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • power, confusion <br /> ie is the problem <br />
  • further than that, I will not go. as stuart talk opens my eyes but not enough. there is more in this than I know... <br />
  • <br /> <br />
  • Don’t put all of your trust in patterns... <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • transactie module by the dutch police to process your tickets is suffering... <br />
  • used to be no problem, as we left the page after a while <br />
  • We don’t leave the page anymore, instead we keep producing more and more dom objects... <br />
  • he forgot css and left out json or html as a data layer... <br />
  • Where does the name ajax stood for in the beginning... <br />
  • sorry for that, a mistake... <br />
  • The cleaner was a household name for so long, that we should use it... <br />
  • look into the architecture document for a good example, me I make the mistake sometimes, that’s where my hair is going... <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • <br /> <br />
  • including main characters and a compelling story line... <br />
  • JavaScript as a language is great, but has many bad parts. You want to avoid them... <br />
  • A must have reference guide of a gaziljon pages. Any decent JavaScript developer has a copy handy... <br />

front end workshop v3 front end workshop v3 Presentation Transcript

  • Client Side Development Introductory Workshop Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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 | wilfred@wnas.nl
  • 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/wnas | wilfred@wnas.nl
  • 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
  • not presentation 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.dtdquot;> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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@wnas.nl
  • 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 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/wnas | wilfred@wnas.nl
  • <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
  • 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
  • http://microformats.org/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • In conclusion... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Use a proper doctype Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • CSS at the top Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Javascript at the bottom Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Use elements as they should be used. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Do more with less. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Structure information, NOT design. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Exercise Write some markup. 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 | wilfred@wnas.nl
  • 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 Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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.com/wnas | wilfred@wnas.nl
  • Cascading http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Shorthand Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • padding: 2px; padding: 2px 2px 2px 2px; 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 wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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.com/wnas | wilfred@wnas.nl
  • Yslow http://developer.yahoo.com/yslow/ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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
  • In conclusion Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Start big set font stuff on the body (and the td for ie) Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • End small formulate exceptions on id’s, classes or on specific dom elements. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Write as little as possible It’s easy to get confused. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Know of the cascade And embrace it. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Inline styles are evil don’t use them. 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
  • Style this. 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
  • break Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • JavaScript part 1 Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • JavaScript === evil Do not rely on it. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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
  • Global variables === evil Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • x = global; Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • function isitglobal() { x = global; } Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • var is your friend Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • function isitglobal() { var x = notglobal; } Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Progressive Enhancement !== Graceful degradation. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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
  • ns.nl with javascript Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • ns.nl without javascript. aka not so graceful degradation... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • JavaScript !== java Really not. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • JavaScript Is not a toy language. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • The old way Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • <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
  • Bad. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • <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
  • <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> <a href=”#” onclick=”javascript:function(){// do stuff );}”>go there!</a> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • <a href=”http://wnas.nl” class=”popup”> go there! </a> Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • $(‘.popup’).click( function () { window.open( this.href,’wnas’,’width=300,height=400’); }); Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • The World's Most Misunderstood Programming Language ‘Douglas Crockford’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Closures one of javascript most devious concepts Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • where a function remembers what happens around it ‘Stuart Langridge’ Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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 | twitter.com/wnas | wilfred@wnas.nl
  • 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
  • namespace var ing = function () { // do stuff }(); Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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
  • 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
  • Group your stuff namespacing keeps it safe and structurally sound. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • XML vs JSON Use the best possible solution Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Not the available one JSON vs XML Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Memory And the garbage collector Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • So what changed ? Ajax and Rich Internet Applications. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Ajax Asynchronous Javascript and XML Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • The solution think of history Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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 | twitter.com/wnas | wilfred@wnas.nl
  • Pick up after yourself Leave a clean dom after you... ( use dojo for that ) Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • In conclusion Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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
  • 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.com/wnas | wilfred@wnas.nl
  • CSS To present it in a proper manner. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • JavaScript To enhance the user experience. Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • Exercise enhance the page you made... Wilfred Nas - Client Side Development wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 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 | wilfred@wnas.nl