front end workshop v2
Download as ZIP, PDF1 like457 views
This document contains the slides from a presentation on client side development by Wilfred Nas. It covers topics such as HTML, CSS, JavaScript, patterns and best practices. Wilfred emphasizes building accessible, semantic HTML and using CSS for presentation and JavaScript for enhancement. The slides provide an introduction to concepts like DOM manipulation, events, closures and namespaces in JavaScript.
Editor's Notes
- #3: 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.
- #4: giving workshops is not my main job, just something I do on the side. mostly when people give me beer and get me talking :)
- #5: the only url you have to write down
- #6: There are three sides to a website... mvc...
- #7: we will start with the basics, HTML. boring isn’t it. after all html is easy...
- #8: There are a lot of things to think about, like;
- #9: html is for structure, a way to show the content...
- #10: Which doctype do you use?
- #11: Strict is the way to go, if you can
- #13: sketch the difference between ie and w3c
- #14: and still this is the way most websites were build...
- #18: especially if your building data intensive applications...
- #21: make sure you specify this one BEFORE the tbody
- #30: most people, turning away from tables, will use div’s in the same way...
- #40: to identify, must be unique
- #41: not just for css. to classify
- #43: 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
- #44: bad
- #45: don’t add extra div’s to create that border the design calls for. You allready have enough elements to play with...
- #48: should be around 10.30
- #50: start 11.00
- #52: selectors are not limited to id’s and can be chained... multiple classes can be used. and such...
- #53: supported in most browsers
- #70: support is not as wide spread
- #74: Match any E elements, whose att atribute value begins with ‘val’
- #75: Matches any E element that has no children (including text nodes)
- #76: matches any F element that is preceded by an E element... general sibling selector
- #84: should be 11.45
- #86: style the page you just made with proper html... start 12.00
- #87: around 12.30
- #88: start 13.00
- #89: === is exactly equal to (value and type) == is equal to
- #92: build a good app and make it better. don’t build a good app and let it slip away...
- #93: build as if you have no javascript en HIJACK the form actions with javascript
- #96: please don’t try to make it into it...
- #97: Really it is not.
- #101: power, confusion ie is the problem
- #102: further than that, I will not go. as stuart talk opens my eyes but not enough. there is more in this than I know...
- #104: Don’t put all of your trust in patterns...
- #111: transactie module by the dutch police to process your tickets is suffering...
- #112: used to be no problem, as we left the page after a while
- #113: We don’t leave the page anymore, instead we keep producing more and more dom objects...
- #114: he forgot css and left out json or html as a data layer...
- #115: Where does the name ajax stood for in the beginning...
- #116: sorry for that, a mistake...
- #117: The cleaner was a household name for so long, that we should use it...
- #118: look into the architecture document for a good example, me I make the mistake sometimes, that’s where my hair is going...
- #129: including main characters and a compelling story line...
- #130: JavaScript as a language is great, but has many bad parts. You want to avoid them...
- #131: A must have reference guide of a gaziljon pages. Any decent JavaScript developer has a copy handy...